Resolve #3472788 "Allow sdds hero"

starshot_demo/components/03-organisms/starshot-hero/starshot-hero.component.yml

@@ -28,6 +28,20 @@ props:
     #- Drupal is a fully composable CMS that allows you to design a digital
     #experience around your vision.
 
+    design:
+      type: string
+      title: Design
+      description: 'Design: light, green, blue, lavender, blue-stripe.'
+      enum:
+        - light
+        - green
+        - blue
+        - lavender
+        - blue-stripe
+      default: blue-stripe
+      examples:
+        - blue-stripe
+
     image:
       $ref: json-schema-definitions://experience_builder.module/image
       type: object

starshot_demo/components/03-organisms/starshot-hero/starshot-hero.scss

 .ct-starshot-hero {
-  background-color: ct-color-light('background-6');
-  background-image:
-    repeating-linear-gradient(
-      45deg,
-      #83d0ef,
-      #83d0ef 20px,
-      #ccedf9 20px,
-      #ccedf9 72px
-    );
-  background-position: center;
+  $root: &;
+
+  &--design-none {
+    // ...
+  }
+
+  &--design-light {
+    background-image: url('./assets/starshot/background_2.png');
+    background-size: cover;
+  }
+
+  &--design-green {
+    background-image: url('./assets/backgrounds/starshot_pattern.png');
+  }
+
+  &--design-blue {
+    background-color: ct-color-light('background-6');
+  }
+
+  &--design-blue-stripe {
+    background-color: ct-color-light('background-6');
+    background-image:
+      repeating-linear-gradient(
+        45deg,
+        #83d0ef,
+        #83d0ef 20px,
+        #ccedf9 20px,
+        #ccedf9 72px
+      );
+    background-position: center;
+  }
+
+  &--design-lavender {
+    background-color: ct-color-light('background-4');
+  }
+
   padding-top: 60px;
   padding-bottom: 60px;
   overflow: hidden;

starshot_demo/components/03-organisms/starshot-hero/starshot-hero.twig

@@ -12,10 +12,13 @@
  * - link: [object] Call to action link:
  *   - text: [string] Display text.
  *   - url: [string] Href.
+ * - design: [string] Design: light, green, blue, lavender, blue-stripe.
  */
 #}
 
-<div class="ct-starshot-hero">
+{% set design_class = 'ct-starshot-container--design-%s'|format(design|default('none')) %}
+
+<div class="ct-starshot-hero {{ design_class -}}">
   <div class="ct-starshot-hero__inner">
     <div class="ct-starshot-hero__left">
       <svg width="186" height="49" viewBox="0 0 186 49" fill="none" xmlns="http://www.w3.org/2000/svg">