Updates

.storybook/preview.js

@@ -14,13 +14,13 @@ export const parameters = {
                     'NavBar',
                     'Footer',
                     'ContactSection',
-                    'ContentSection',
                     'CtaSection',
                     'FeaturedPeopleSection',
                     'FeaturedPostsSection',
                     'HeroSection',
                     'QuoteSection',
-                    'TestimonialsSection'
+                    'TestimonialsSection',
+                    'TextSection'
                 ],
                 'Blocks'
             ]

models/AdvancedLayout.yaml

@@ -14,10 +14,10 @@ fields:
       type: model
       models:
         - ContactSection
-        - ContentSection
         - CtaSection
         - FeaturedPeopleSection
         - FeaturedPostsSection
         - HeroSection
-        - TestimonialsSection
         - QuoteSection
+        - TestimonialsSection
+        - TextSection

models/BadgeBlock.yaml → models/Badge.yaml

@@ -1,10 +1,13 @@
 type: object
-name: BadgeBlock
+name: Badge
 label: Badge
 fields:
+  - type: string
+    name: elementId
+    label: Element ID
+    description: The unique ID for an HTML element, must not contain whitespace
+    default: ''
   - type: string
     name: label
     label: Label
     description: The text in the badge
-  - type: string
-    name: elementId

models/Button.yaml

@@ -2,37 +2,54 @@ type: object
 name: Button
 label: Button
 fields:
+  - type: string
+    name: elementId
+    label: Element ID
+    description: The unique ID for an HTML element, must not contain whitespace
+    default: ''
   - type: string
     name: label
     label: Label
+  - type: string
+    name: altText
+    label: Alt text
+    description: The alternative text for screen readers
   - type: string
     name: url
     label: URL
     default: '#'
-  - type: string
-    name: altText
-    label: Title attribute
-  - type: enum
-    name: style
-    label: Style
-    options:
-      - label: Link
-        value: link
-      - label: Primary
-        value: primary
-      - label: Secondary
-        value: secondary
-    default: secondary
+  - type: boolean
+    name: showIcon
+    label: Show icon
+    default: false
   - type: enum
     name: icon
     label: Icon
     options:
+      - arrowLeft
       - arrowRight
       - cart
       - facebook
       - github
       - instagram
       - linkedin
       - twitter
-  - type: string
-    name: elementId
+    default: arrowLeft
+  - type: enum
+    name: iconPosition
+    label: Icon position
+    options:
+      - left
+      - right
+    default: right
+  - type: enum
+    name: style
+    label: Style
+    options:
+      - label: Link
+        value: link
+      - label: Primary
+        value: primary
+      - label: Secondary
+        value: secondary
+    default: secondary

models/ContactSection.yaml

@@ -1,6 +1,8 @@
 type: object
 name: ContactSection
 label: Contact section
+extends:
+  - Section
 fields:
   - type: enum
     name: variant
@@ -11,94 +13,25 @@ fields:
       - label: Contact form with feature on the right
         value: variant-b
     default: variant-a
-  - type: enum
-    name: colors
-    label: Colors
-    options:
-      - label: Base foreground on white background
-        value: colors-a
-      - label: Primary foreground on white background
-        value: colors-b
-      - label: White foreground on base background
-        value: colors-c
-      - label: Primary foreground on base background
-        value: colors-d
-      - label: Base foreground on primary background
-        value: colors-e
-      - label: Base foreground on secondary background
-        value: colors-f
-      - label: Primary foreground on secondary background
-        value: colors-g
-      - label: Base foreground on complimentary 1 background
-        value: colors-h
-      - label: Base foreground on complimentary 2 background
-        value: colors-i
-    default: colors-a
-  - type: enum
-    name: width
-    label: Width
-    options:
-      - wide
-      - full
-    default: wide
-  - type: enum
-    name: height
-    label: Height
-    options:
-      - short
-      - tall
-      - viewport
-    default: short
-  - type: enum
-    name: topGap
-    label: Top gap
-    options:
-      - none
-      - small
-      - large
-    default: small
-  - type: enum
-    name: bottomGap
-    label: Bottom gap
-    options:
-      - none
-      - small
-      - large
-    default: small
-  - type: enum
-    name: alignHoriz
-    label: Horizontal alignment
-    options:
-      - left
-      - right
-      - center
-    default: left
-  - type: enum
-    name: alignVert
-    label: Vertical alignment
-    options:
-      - top
-      - middle
-      - bottom
-    default: middle
-  - type: string
+  - type: model
     name: badge
     label: Badge
+    models:
+      - Badge
   - type: string
     name: title
     label: Title
   - type: markdown
     name: text
     label: Text
+  - type: model
+    name: form
+    label: Form
+    models:
+      - FormBlock
   - type: model
     name: feature
     label: Feature
     models:
       - ImageBlock
       - VideoBlock
-  - type: model
-    name: form
-    label: Form
-    models: [FormBlock]
-  - type: string
-    name: elementId

models/CtaSection.yaml

@@ -1,6 +1,8 @@
 type: object
 name: CtaSection
 label: CTA section
+extends:
+  - Section
 fields:
   - type: enum
     name: variant
@@ -11,71 +13,11 @@ fields:
       - label: CTA with buttons on the right
         value: variant-b
     default: variant-a
-  - type: enum
-    name: colors
-    label: Colors
-    options:
-      - label: Base foreground on white background
-        value: colors-a
-      - label: Primary foreground on white background
-        value: colors-b
-      - label: White foreground on base background
-        value: colors-c
-      - label: Primary foreground on base background
-        value: colors-d
-      - label: Base foreground on primary background
-        value: colors-e
-      - label: Base foreground on secondary background
-        value: colors-f
-      - label: Primary foreground on secondary background
-        value: colors-g
-      - label: Base foreground on complimentary 1 background
-        value: colors-h
-      - label: Base foreground on complimentary 2 background
-        value: colors-i
-    default: colors-a
-  - type: enum
-    name: width
-    label: Width
-    options:
-      - wide
-      - full
-    default: wide
-  - type: enum
-    name: height
-    label: Height
-    options:
-      - short
-      - tall
-      - viewport
-    default: short
-  - type: enum
-    name: topGap
-    label: Top gap
-    options:
-      - none
-      - small
-      - large
-    default: small
-  - type: enum
-    name: bottomGap
-    label: Bottom gap
-    options:
-      - none
-      - small
-      - large
-    default: small
-  - type: enum
-    name: alignHoriz
-    label: Horizontal alignment
-    options:
-      - left
-      - right
-      - center
-    default: left
-  - type: string
+  - type: model
     name: badge
     label: Badge
+    models:
+      - Badge
   - type: string
     name: title
     label: Title
@@ -93,6 +35,5 @@ fields:
   - type: model
     name: backgroundImage
     label: Background image
-    models: [ImageBlock]
-  - type: string
-    name: elementId
+    models:
+      - ImageBlock