Resolve #3472792 "Integrate updated sdds"

starshot_demo/components/01-atoms/old-starshot-heading/old-starshot-heading.component.yml

@@ -2,7 +2,7 @@
 
 name: Old Starshot Heading
 
-status: experimental
+status: obsolete
 
 group: Atoms
 

starshot_demo/components/01-atoms/old-starshot-paragraph/old-starshot-paragraph.component.yml

@@ -2,7 +2,7 @@
 
 name: Old Starshot Paragraph
 
-status: experimental
+status: obsolete
 
 group: Atoms
 

starshot_demo/components/02-molecules/old-starshot-card/old-starshot-card.component.yml

@@ -2,7 +2,7 @@
 
 name: Old Starshot Card
 
-status: experimental
+status: obsolete
 
 group: Molecules
 

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

@@ -16,106 +16,104 @@ props:
       title: Title
       description: Title.
       examples:
-        - Some title
+        - 'Open source means no vendor lock-in'
 
     stats_large1:
-      type: string
+      type: integer
       title: Stats large1
       description: Stats large text1.
       examples:
-        - Stats large text1.
-
-    stats_below1:
-      type: string
-      title: Stats below1
-      description: Stats below text1.
-      examples:
-        - Stats below text1.
+        - 100
 
     stats_small1:
       type: string
       title: Stats small1
       description: Stats small text1.
       examples:
-        - Stats small text1.
+      - ''
 
-    stats_large2:
+    stats_below1:
       type: string
-      title: Stats large2
-      description: Stats large text2.
+      title: Stats below1
+      description: Stats below text1.
       examples:
-        - Stats large text2.
+        - 'Drupal Certified Partners provide global support'
 
-    stats_below2:
-      type: string
-      title: Stats below2
-      description: Stats below text2.
+    stats_large2:
+      type: integer
+      title: Stats large2
+      description: Stats large text2.
       examples:
-        - Stats below text2.
+        - 10
 
     stats_small2:
       type: string
       title: Stats small2
       description: Stats small text2.
       examples:
-        - Stats small text2.
+        - 'k'
 
-    stats_large3:
+    stats_below2:
       type: string
-      title: Stats large3
-      description: Stats large text3.
+      title: Stats below2
+      description: Stats below text2.
       examples:
-        - Stats large text3.
+        - 'Support base of Drupal professionals'
 
-    stats_below3:
-      type: string
-      title: Stats below3
-      description: Stats below text3.
+    stats_large3:
+      type: integer
+      title: Stats large3
+      description: Stats large text3.
       examples:
-        - Stats below text3.
+        - 50
 
     stats_small3:
       type: string
       title: Stats small3
       description: Stats small text3.
       examples:
-        - Stats small text3.
+        - '%'
 
-    stats_large4:
+    stats_below3:
       type: string
-      title: Stats large4
-      description: Stats large text4.
+      title: Stats below3
+      description: Stats below text3.
       examples:
-        - Stats large text4.
+        - 'Half of Fortune 500 companies use Drupal'
 
-    stats_below4:
-      type: string
-      title: Stats below4
-      description: Stats below text4.
+    stats_large4:
+      type: integer
+      title: Stats large4
+      description: Stats large text4.
       examples:
-        - Stats below text4.
+        - 500
 
     stats_small4:
       type: string
       title: Stats small4
       description: Stats small text4.
       examples:
-        - Stats small text4.
+        - 'k'
+
+    stats_below4:
+      type: string
+      title: Stats below4
+      description: Stats below text4.
+      examples:
+        - 'Websites currently use Drupal'
 
     image:
       $ref: json-schema-definitions://experience_builder.module/image
       type: object
       title: Image
       examples:
-        - src: 'https://placehold.co/600x400.png'
-          alt: 'placeholder'
-          width: 600
-          height: 400
-
-        # @fixme comment out for now
-        #background_image:
-        #type: string
-        #title: Background image
-        #description: Background image.
-        #examples:
-        #- 'https://example.com/image.png'
+        - src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_13.png'
+          alt: 'Person within Drupal logo'
+
+    background_image:
+      $ref: json-schema-definitions://experience_builder.module/image
+      type: object
+      title: Background image
+      examples:
+        - src: '/themes/contrib/demo_design_system/starshot_demo/assets/backgrounds/starshot_pattern.png'
+          alt: 'Green pattern'

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

@@ -16,44 +16,50 @@
  */
 #}
 
-<div class="ct-starshot-stats" style="background-image: url('{{ background_image }}');">
+<div class="ct-starshot-stats" style="background-image: url('{{ background_image.src }}');">
   <div class="ct-starshot-stats__inner">
     {% if title %}
       <h2>{{ title }}</h2>
     {% endif %}
 
-    {% if stats_large1 and stats_below1 and stats_small1 and stats_large2 and stats_below2 and stats_small2 and stats_large3 and stats_below3 and stats_small3 and stats_large4 and stats_below4 and stats_small4 %}
-      <div class="stat-container">
-        <div class="stat">
-          <span class="stat__top">
-            <span class="stat__large">{{ stats_large1 }}</span>
-            <span class="stat__small">{{ stats_small1 }}</span>
-          </span>
-          <span class="stat__description">{{ stats_below1 }}</span>
-        </div>
-        <div class="stat">
-          <span class="stat__top">
-            <span class="stat__large">{{ stats_large2 }}</span>
-            <span class="stat__small">{{ stats_small2 }}</span>
-          </span>
-          <span class="stat__description">{{ stats_below2 }}</span>
-        </div>
-        <div class="stat">
-          <span class="stat__top">
-            <span class="stat__large">{{ stats_large3 }}</span>
-            <span class="stat__small">{{ stats_small3 }}</span>
-          </span>
-          <span class="stat__description">{{ stats_below3 }}</span>
-        </div>
-        <div class="stat">
-          <span class="stat__top">
-            <span class="stat__large">{{ stats_large4 }}</span>
-            <span class="stat__small">{{ stats_small4 }}</span>
-          </span>
-          <span class="stat__description">{{ stats_below4 }}</span>
-        </div>
+    <div class="stat-container">
+      {% if stats_large1 or stats_small1 or stats_below1 %}
+      <div class="stat">
+        <span class="stat__top">
+          <span class="stat__large">{% if stats_large1 %}{{ stats_large1 }}{% endif %}</span>
+          <span class="stat__small">{% if stats_small1 %}{{ stats_small1 }}{% endif %}</span>
+        </span>
+        <span class="stat__description">{% if stats_below1 %}{{ stats_below1 }}{% endif %}</span>
       </div>
-    {% endif %}
+      {% endif %}
+      {% if stats_large2 or stats_small2 or stats_below2 %}
+      <div class="stat">
+        <span class="stat__top">
+          <span class="stat__large">{% if stats_large2 %}{{ stats_large2 }}{% endif %}</span>
+          <span class="stat__small">{% if stats_small2 %}{{ stats_small2 }}{% endif %}</span>
+        </span>
+        <span class="stat__description">{% if stats_below2 %}{{ stats_below2 }}{% endif %}</span>
+      </div>
+      {% endif %}
+      {% if stats_large3 or stats_small3 or stats_below3 %}
+      <div class="stat">
+        <span class="stat__top">
+          <span class="stat__large">{% if stats_large3 %}{{ stats_large3 }}{% endif %}</span>
+          <span class="stat__small">{% if stats_small3 %}{{ stats_small3 }}{% endif %}</span>
+        </span>
+        <span class="stat__description">{% if stats_below3 %}{{ stats_below3 }}{% endif %}</span>
+      </div>
+      {% endif %}
+      {% if stats_large4 or stats_small4 or stats_below4 %}
+      <div class="stat">
+        <span class="stat__top">
+          <span class="stat__large">{% if stats_large4 %}{{ stats_large4 }}{% endif %}</span>
+          <span class="stat__small">{% if stats_small4 %}{{ stats_small4 }}{% endif %}</span>
+        </span>
+        <span class="stat__description">{% if stats_below4 %}{{ stats_below4 }}{% endif %}</span>
+      </div>
+      {% endif %}
+    </div>
 
   </div>
   {% if image and image.src %}