From 055206a85bc3921e95a554ecb83d3d2f746a6d8b Mon Sep 17 00:00:00 2001 From: tomasbankauskas Date: Sun, 19 Sep 2021 16:24:55 +0300 Subject: [PATCH 1/4] updated components and models --- .storybook/preview.js | 4 +- models/AdvancedLayout.yaml | 4 +- models/{BadgeBlock.yaml => Badge.yaml} | 9 +- models/Button.yaml | 49 ++++--- models/ContactSection.yaml | 87 ++---------- models/CtaSection.yaml | 73 +--------- models/FeaturedPeopleSection.yaml | 73 +--------- models/FeaturedPostsSection.yaml | 73 +--------- models/Footer.yaml | 3 +- models/HeroSection.yaml | 79 +---------- models/ImageBlock.yaml | 8 +- models/Link.yaml | 49 ++++--- models/PostLayout.yaml | 8 +- models/QuoteSection.yaml | 67 +-------- models/{ContentSection.yaml => Section.yaml} | 68 ++++++--- models/Social.yaml | 45 ++++++ models/TestimonialsSection.yaml | 71 +--------- models/TextSection.yaml | 20 +++ models/VideoBlock.yaml | 7 +- public/models/AdvancedLayout.yaml | 4 +- public/models/Badge.yaml | 13 ++ public/models/BadgeBlock.yaml | 9 +- public/models/Button.yaml | 49 ++++--- public/models/ContactSection.yaml | 87 ++---------- public/models/CtaSection.yaml | 73 +--------- public/models/FeaturedPeopleSection.yaml | 73 +--------- public/models/FeaturedPostsSection.yaml | 73 +--------- public/models/Footer.yaml | 3 +- public/models/HeroSection.yaml | 79 +---------- public/models/ImageBlock.yaml | 8 +- public/models/Link.yaml | 49 ++++--- public/models/PostLayout.yaml | 8 +- public/models/QuoteSection.yaml | 67 +-------- .../{ContentSection.yaml => Section.yaml} | 68 ++++++--- public/models/Social.yaml | 45 ++++++ public/models/TestimonialsSection.yaml | 71 +--------- public/models/TextSection.yaml | 20 +++ public/models/VideoBlock.yaml | 7 +- src/components-manifest.json | 30 ++-- src/components/Action/action.stories.js | 36 ++++- src/components/Action/index.js | 57 +++++--- src/components/Badge/index.js | 2 +- .../ContactSection/contact-section.stories.js | 35 +++-- src/components/ContactSection/index.js | 2 +- .../CtaSection/cta-section.stories.js | 47 ++++--- src/components/CtaSection/index.js | 4 +- .../featured-people-section.stories.js | 47 +++++-- src/components/FeaturedPeopleSection/index.js | 2 +- .../featured-posts-section.stories.js | 2 +- src/components/FeaturedPostsSection/index.js | 2 +- src/components/Footer/footer.stories.js | 31 ++-- src/components/Footer/index.js | 49 ++----- src/components/FormBlock/index.js | 2 +- .../HeroSection/hero-section.stories.js | 133 ++++++++---------- src/components/HeroSection/index.js | 4 +- src/components/QuoteSection/index.js | 2 +- .../QuoteSection/quote-section.stories.js | 38 +++-- src/components/Social/index.js | 51 +++++++ src/components/Social/social.stories.js | 32 +++++ src/components/TestimonialsSection/index.js | 2 +- .../testimonials-section.stories.js | 37 +++-- .../{ContentSection => TextSection}/index.js | 4 +- .../text-section.stories.js} | 54 ++++--- src/components/index.js | 8 +- .../AdvancedLayout/advanced-layout.stories.js | 8 +- src/svgs/arrow-left.js | 7 + src/svgs/arrow-right.js | 2 +- styles/default/style.css | 42 +++--- styles/retro/style.css | 42 +++--- 69 files changed, 998 insertions(+), 1419 deletions(-) rename models/{BadgeBlock.yaml => Badge.yaml} (55%) rename models/{ContentSection.yaml => Section.yaml} (50%) create mode 100644 models/Social.yaml create mode 100644 models/TextSection.yaml create mode 100644 public/models/Badge.yaml rename public/models/{ContentSection.yaml => Section.yaml} (50%) create mode 100644 public/models/Social.yaml create mode 100644 public/models/TextSection.yaml create mode 100644 src/components/Social/index.js create mode 100644 src/components/Social/social.stories.js rename src/components/{ContentSection => TextSection}/index.js (95%) rename src/components/{ContentSection/content-section.stories.js => TextSection/text-section.stories.js} (60%) create mode 100644 src/svgs/arrow-left.js diff --git a/.storybook/preview.js b/.storybook/preview.js index 11bb3511..89b4712d 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -14,13 +14,13 @@ export const parameters = { 'NavBar', 'Footer', 'ContactSection', - 'ContentSection', 'CtaSection', 'FeaturedPeopleSection', 'FeaturedPostsSection', 'HeroSection', 'QuoteSection', - 'TestimonialsSection' + 'TestimonialsSection', + 'TextSection' ], 'Blocks' ] diff --git a/models/AdvancedLayout.yaml b/models/AdvancedLayout.yaml index 7aa667f3..65f175cb 100644 --- a/models/AdvancedLayout.yaml +++ b/models/AdvancedLayout.yaml @@ -14,10 +14,10 @@ fields: type: model models: - ContactSection - - ContentSection - CtaSection - FeaturedPeopleSection - FeaturedPostsSection - HeroSection - - TestimonialsSection - QuoteSection + - TestimonialsSection + - TextSection diff --git a/models/BadgeBlock.yaml b/models/Badge.yaml similarity index 55% rename from models/BadgeBlock.yaml rename to models/Badge.yaml index f1e1172b..605b310b 100644 --- a/models/BadgeBlock.yaml +++ b/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 diff --git a/models/Button.yaml b/models/Button.yaml index b9d2842c..c064cde1 100644 --- a/models/Button.yaml +++ b/models/Button.yaml @@ -2,31 +2,31 @@ 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 @@ -34,5 +34,22 @@ fields: - instagram - linkedin - twitter - - type: string - name: elementId \ No newline at end of file + 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 diff --git a/models/ContactSection.yaml b/models/ContactSection.yaml index d5314786..58f2ee92 100644 --- a/models/ContactSection.yaml +++ b/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 \ No newline at end of file diff --git a/models/CtaSection.yaml b/models/CtaSection.yaml index e3bd4af0..0279cf85 100644 --- a/models/CtaSection.yaml +++ b/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 \ No newline at end of file + models: + - ImageBlock diff --git a/models/FeaturedPeopleSection.yaml b/models/FeaturedPeopleSection.yaml index 34a5f642..523f6d0b 100644 --- a/models/FeaturedPeopleSection.yaml +++ b/models/FeaturedPeopleSection.yaml @@ -1,6 +1,8 @@ type: object name: FeaturedPeopleSection label: Featured people section +extends: + - Section fields: - type: enum name: variant @@ -13,71 +15,11 @@ fields: - label: Two columns, person info with image at the top value: variant-c 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 @@ -97,6 +39,5 @@ fields: label: People items: type: reference - models: [Person] - - type: string - name: elementId \ No newline at end of file + models: + - Person diff --git a/models/FeaturedPostsSection.yaml b/models/FeaturedPostsSection.yaml index 8bb86b17..d949289a 100644 --- a/models/FeaturedPostsSection.yaml +++ b/models/FeaturedPostsSection.yaml @@ -1,6 +1,8 @@ type: object name: FeaturedPostsSection label: Featured posts section +extends: + - Section fields: - type: enum name: variant @@ -11,71 +13,11 @@ fields: - label: Two columns, post thumbnail on the left 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 @@ -95,6 +37,5 @@ fields: label: Posts items: type: reference - models: [PostLayout] - - type: string - name: elementId \ No newline at end of file + models: + - PostLayout diff --git a/models/Footer.yaml b/models/Footer.yaml index 6e169db9..981ceec4 100644 --- a/models/Footer.yaml +++ b/models/Footer.yaml @@ -66,8 +66,7 @@ fields: items: type: model models: - - Button - - Link + - Social - type: list name: legalLinks label: Legal navigation links diff --git a/models/HeroSection.yaml b/models/HeroSection.yaml index 981238b0..c4b4ae59 100644 --- a/models/HeroSection.yaml +++ b/models/HeroSection.yaml @@ -1,6 +1,8 @@ type: object name: HeroSection label: Hero section +extends: + - Section fields: - type: enum name: variant @@ -15,83 +17,11 @@ fields: - label: Hero with feature at the bottom value: variant-d 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: string - name: elementId - - 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: model name: badge label: Badge models: - - BadgeBlock + - Badge - type: string name: title label: Title @@ -116,4 +46,5 @@ fields: - type: model name: backgroundImage label: Background image - models: [ImageBlock] + models: + - ImageBlock diff --git a/models/ImageBlock.yaml b/models/ImageBlock.yaml index af9791c9..f77e6ba8 100644 --- a/models/ImageBlock.yaml +++ b/models/ImageBlock.yaml @@ -2,6 +2,11 @@ type: object name: ImageBlock label: Image fields: + - type: string + name: elementId + label: Element ID + description: The unique ID for an HTML element, must not contain whitespace + default: '' - type: image name: url label: URL @@ -18,5 +23,4 @@ fields: name: opacity label: Opacity description: The opacity of the image - - type: string - name: elementId \ No newline at end of file + default: 100 diff --git a/models/Link.yaml b/models/Link.yaml index 1a6b335b..af4337e3 100644 --- a/models/Link.yaml +++ b/models/Link.yaml @@ -2,31 +2,31 @@ type: object name: Link label: Link 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: link + - type: boolean + name: showIcon + label: Show icon + default: false - type: enum name: icon label: Icon options: + - arrowLeft - arrowRight - cart - facebook @@ -34,5 +34,22 @@ fields: - instagram - linkedin - twitter - - type: string - name: elementId \ No newline at end of file + 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: link diff --git a/models/PostLayout.yaml b/models/PostLayout.yaml index cdf18b38..23c07f12 100644 --- a/models/PostLayout.yaml +++ b/models/PostLayout.yaml @@ -23,13 +23,13 @@ fields: type: model models: - ContactSection - - ContentSection - CtaSection - FeaturedPeopleSection - FeaturedPostsSection - HeroSection - - TestimonialsSection - QuoteSection + - TestimonialsSection + - TextSection - type: list name: bottomSections label: Bottom sections @@ -37,10 +37,10 @@ fields: type: model models: - ContactSection - - ContentSection - CtaSection - FeaturedPeopleSection - FeaturedPostsSection - HeroSection - - TestimonialsSection - QuoteSection + - TestimonialsSection + - TextSection diff --git a/models/QuoteSection.yaml b/models/QuoteSection.yaml index 33b5ac61..a1798400 100644 --- a/models/QuoteSection.yaml +++ b/models/QuoteSection.yaml @@ -2,68 +2,6 @@ type: object name: QuoteSection label: Quote section fields: - - 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: markdown name: quote label: Quote @@ -76,6 +14,5 @@ fields: - type: model name: backgroundImage label: Background image - models: [ImageBlock] - - type: string - name: elementId \ No newline at end of file + models: + - ImageBlock diff --git a/models/ContentSection.yaml b/models/Section.yaml similarity index 50% rename from models/ContentSection.yaml rename to models/Section.yaml index 179752a2..402a5ff6 100644 --- a/models/ContentSection.yaml +++ b/models/Section.yaml @@ -1,10 +1,16 @@ type: object -name: ContentSection -label: Content section +name: Section +label: Section fields: + - type: string + name: elementId + label: Element ID + description: The unique ID for an HTML element, must not contain whitespace + default: '' - type: enum name: colors label: Colors + description: The color theme of the section options: - label: Base foreground on white background value: colors-a @@ -28,6 +34,7 @@ fields: - type: enum name: width label: Width + description: The width of the section options: - wide - full @@ -35,46 +42,65 @@ fields: - type: enum name: height label: Height + description: The height of the section options: - short - tall - viewport - default: short + default: tall - type: enum name: topGap label: Top gap + description: The margin area on the top of the section options: - none - small + - medium - large - default: small + default: medium - type: enum name: bottomGap label: Bottom gap + description: The margin area on the bottom of the section options: - none - small + - medium + - large + default: medium + - type: enum + name: contentWidth + label: Content width + description: The width of the section content + options: + - small + - medium - large - default: small + default: large - type: enum - name: alignHoriz - label: Horizontal alignment + name: contentAlignHoriz + label: Content horizontal alignment + description: The horizontal position of the section content relative to the section container options: - left + - center - right + default: left + - type: enum + name: contentAlignVert + label: Content vertical alignment + description: The vertical position of the section content relative to the section container + options: + - top + - middle + - bottom + default: middle + - type: enum + name: textAlign + label: Text alignment + description: The horizontal alignment of the section text + options: + - left - center + - right default: left - - type: string - name: badge - label: Badge - - type: string - name: title - label: Title - - type: string - name: subtitle - label: Subtitle - - type: markdown - name: text - label: Text - - type: string - name: elementId \ No newline at end of file diff --git a/models/Social.yaml b/models/Social.yaml new file mode 100644 index 00000000..c34c71e3 --- /dev/null +++ b/models/Social.yaml @@ -0,0 +1,45 @@ +type: object +name: Social +label: Social +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: boolean + name: showIcon + label: Show icon + default: false + - type: enum + name: icon + label: Icon + options: + - facebook + - github + - instagram + - linkedin + - twitter + default: facebook + - type: enum + name: style + label: Style + options: + - label: Link + value: link + - label: Primary + value: primary + - label: Secondary + value: secondary + default: secondary diff --git a/models/TestimonialsSection.yaml b/models/TestimonialsSection.yaml index 23de4cca..2be798bb 100644 --- a/models/TestimonialsSection.yaml +++ b/models/TestimonialsSection.yaml @@ -11,71 +11,11 @@ fields: - label: Testimonial with author image on the left 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 @@ -87,6 +27,5 @@ fields: label: Testimonials items: type: model - models: [Testimonial] - - type: string - name: elementId \ No newline at end of file + models: + - Testimonial diff --git a/models/TextSection.yaml b/models/TextSection.yaml new file mode 100644 index 00000000..c837dc5c --- /dev/null +++ b/models/TextSection.yaml @@ -0,0 +1,20 @@ +type: object +name: TextSection +label: Text section +extends: + - Section +fields: + - type: model + name: badge + label: Badge + models: + - Badge + - type: string + name: title + label: Title + - type: string + name: subtitle + label: Subtitle + - type: markdown + name: text + label: Text diff --git a/models/VideoBlock.yaml b/models/VideoBlock.yaml index 90921ea3..f46e112f 100644 --- a/models/VideoBlock.yaml +++ b/models/VideoBlock.yaml @@ -2,6 +2,11 @@ type: object name: VideoBlock label: Video fields: + - type: string + name: elementId + label: Element ID + description: The unique ID for an HTML element, must not contain whitespace + default: '' - type: string name: videoUrl label: Video URL (.mp4) @@ -24,5 +29,3 @@ fields: name: controls label: Controls default: false - - type: string - name: elementId \ No newline at end of file diff --git a/public/models/AdvancedLayout.yaml b/public/models/AdvancedLayout.yaml index 7aa667f3..65f175cb 100644 --- a/public/models/AdvancedLayout.yaml +++ b/public/models/AdvancedLayout.yaml @@ -14,10 +14,10 @@ fields: type: model models: - ContactSection - - ContentSection - CtaSection - FeaturedPeopleSection - FeaturedPostsSection - HeroSection - - TestimonialsSection - QuoteSection + - TestimonialsSection + - TextSection diff --git a/public/models/Badge.yaml b/public/models/Badge.yaml new file mode 100644 index 00000000..605b310b --- /dev/null +++ b/public/models/Badge.yaml @@ -0,0 +1,13 @@ +type: object +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 diff --git a/public/models/BadgeBlock.yaml b/public/models/BadgeBlock.yaml index f1e1172b..605b310b 100644 --- a/public/models/BadgeBlock.yaml +++ b/public/models/BadgeBlock.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 diff --git a/public/models/Button.yaml b/public/models/Button.yaml index b9d2842c..c064cde1 100644 --- a/public/models/Button.yaml +++ b/public/models/Button.yaml @@ -2,31 +2,31 @@ 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 @@ -34,5 +34,22 @@ fields: - instagram - linkedin - twitter - - type: string - name: elementId \ No newline at end of file + 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 diff --git a/public/models/ContactSection.yaml b/public/models/ContactSection.yaml index d5314786..58f2ee92 100644 --- a/public/models/ContactSection.yaml +++ b/public/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 \ No newline at end of file diff --git a/public/models/CtaSection.yaml b/public/models/CtaSection.yaml index e3bd4af0..0279cf85 100644 --- a/public/models/CtaSection.yaml +++ b/public/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 \ No newline at end of file + models: + - ImageBlock diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml index 34a5f642..523f6d0b 100644 --- a/public/models/FeaturedPeopleSection.yaml +++ b/public/models/FeaturedPeopleSection.yaml @@ -1,6 +1,8 @@ type: object name: FeaturedPeopleSection label: Featured people section +extends: + - Section fields: - type: enum name: variant @@ -13,71 +15,11 @@ fields: - label: Two columns, person info with image at the top value: variant-c 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 @@ -97,6 +39,5 @@ fields: label: People items: type: reference - models: [Person] - - type: string - name: elementId \ No newline at end of file + models: + - Person diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml index 8bb86b17..d949289a 100644 --- a/public/models/FeaturedPostsSection.yaml +++ b/public/models/FeaturedPostsSection.yaml @@ -1,6 +1,8 @@ type: object name: FeaturedPostsSection label: Featured posts section +extends: + - Section fields: - type: enum name: variant @@ -11,71 +13,11 @@ fields: - label: Two columns, post thumbnail on the left 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 @@ -95,6 +37,5 @@ fields: label: Posts items: type: reference - models: [PostLayout] - - type: string - name: elementId \ No newline at end of file + models: + - PostLayout diff --git a/public/models/Footer.yaml b/public/models/Footer.yaml index 6e169db9..981ceec4 100644 --- a/public/models/Footer.yaml +++ b/public/models/Footer.yaml @@ -66,8 +66,7 @@ fields: items: type: model models: - - Button - - Link + - Social - type: list name: legalLinks label: Legal navigation links diff --git a/public/models/HeroSection.yaml b/public/models/HeroSection.yaml index 981238b0..c4b4ae59 100644 --- a/public/models/HeroSection.yaml +++ b/public/models/HeroSection.yaml @@ -1,6 +1,8 @@ type: object name: HeroSection label: Hero section +extends: + - Section fields: - type: enum name: variant @@ -15,83 +17,11 @@ fields: - label: Hero with feature at the bottom value: variant-d 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: string - name: elementId - - 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: model name: badge label: Badge models: - - BadgeBlock + - Badge - type: string name: title label: Title @@ -116,4 +46,5 @@ fields: - type: model name: backgroundImage label: Background image - models: [ImageBlock] + models: + - ImageBlock diff --git a/public/models/ImageBlock.yaml b/public/models/ImageBlock.yaml index af9791c9..f77e6ba8 100644 --- a/public/models/ImageBlock.yaml +++ b/public/models/ImageBlock.yaml @@ -2,6 +2,11 @@ type: object name: ImageBlock label: Image fields: + - type: string + name: elementId + label: Element ID + description: The unique ID for an HTML element, must not contain whitespace + default: '' - type: image name: url label: URL @@ -18,5 +23,4 @@ fields: name: opacity label: Opacity description: The opacity of the image - - type: string - name: elementId \ No newline at end of file + default: 100 diff --git a/public/models/Link.yaml b/public/models/Link.yaml index 1a6b335b..af4337e3 100644 --- a/public/models/Link.yaml +++ b/public/models/Link.yaml @@ -2,31 +2,31 @@ type: object name: Link label: Link 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: link + - type: boolean + name: showIcon + label: Show icon + default: false - type: enum name: icon label: Icon options: + - arrowLeft - arrowRight - cart - facebook @@ -34,5 +34,22 @@ fields: - instagram - linkedin - twitter - - type: string - name: elementId \ No newline at end of file + 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: link diff --git a/public/models/PostLayout.yaml b/public/models/PostLayout.yaml index cdf18b38..23c07f12 100644 --- a/public/models/PostLayout.yaml +++ b/public/models/PostLayout.yaml @@ -23,13 +23,13 @@ fields: type: model models: - ContactSection - - ContentSection - CtaSection - FeaturedPeopleSection - FeaturedPostsSection - HeroSection - - TestimonialsSection - QuoteSection + - TestimonialsSection + - TextSection - type: list name: bottomSections label: Bottom sections @@ -37,10 +37,10 @@ fields: type: model models: - ContactSection - - ContentSection - CtaSection - FeaturedPeopleSection - FeaturedPostsSection - HeroSection - - TestimonialsSection - QuoteSection + - TestimonialsSection + - TextSection diff --git a/public/models/QuoteSection.yaml b/public/models/QuoteSection.yaml index 33b5ac61..a1798400 100644 --- a/public/models/QuoteSection.yaml +++ b/public/models/QuoteSection.yaml @@ -2,68 +2,6 @@ type: object name: QuoteSection label: Quote section fields: - - 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: markdown name: quote label: Quote @@ -76,6 +14,5 @@ fields: - type: model name: backgroundImage label: Background image - models: [ImageBlock] - - type: string - name: elementId \ No newline at end of file + models: + - ImageBlock diff --git a/public/models/ContentSection.yaml b/public/models/Section.yaml similarity index 50% rename from public/models/ContentSection.yaml rename to public/models/Section.yaml index 179752a2..402a5ff6 100644 --- a/public/models/ContentSection.yaml +++ b/public/models/Section.yaml @@ -1,10 +1,16 @@ type: object -name: ContentSection -label: Content section +name: Section +label: Section fields: + - type: string + name: elementId + label: Element ID + description: The unique ID for an HTML element, must not contain whitespace + default: '' - type: enum name: colors label: Colors + description: The color theme of the section options: - label: Base foreground on white background value: colors-a @@ -28,6 +34,7 @@ fields: - type: enum name: width label: Width + description: The width of the section options: - wide - full @@ -35,46 +42,65 @@ fields: - type: enum name: height label: Height + description: The height of the section options: - short - tall - viewport - default: short + default: tall - type: enum name: topGap label: Top gap + description: The margin area on the top of the section options: - none - small + - medium - large - default: small + default: medium - type: enum name: bottomGap label: Bottom gap + description: The margin area on the bottom of the section options: - none - small + - medium + - large + default: medium + - type: enum + name: contentWidth + label: Content width + description: The width of the section content + options: + - small + - medium - large - default: small + default: large - type: enum - name: alignHoriz - label: Horizontal alignment + name: contentAlignHoriz + label: Content horizontal alignment + description: The horizontal position of the section content relative to the section container options: - left + - center - right + default: left + - type: enum + name: contentAlignVert + label: Content vertical alignment + description: The vertical position of the section content relative to the section container + options: + - top + - middle + - bottom + default: middle + - type: enum + name: textAlign + label: Text alignment + description: The horizontal alignment of the section text + options: + - left - center + - right default: left - - type: string - name: badge - label: Badge - - type: string - name: title - label: Title - - type: string - name: subtitle - label: Subtitle - - type: markdown - name: text - label: Text - - type: string - name: elementId \ No newline at end of file diff --git a/public/models/Social.yaml b/public/models/Social.yaml new file mode 100644 index 00000000..c34c71e3 --- /dev/null +++ b/public/models/Social.yaml @@ -0,0 +1,45 @@ +type: object +name: Social +label: Social +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: boolean + name: showIcon + label: Show icon + default: false + - type: enum + name: icon + label: Icon + options: + - facebook + - github + - instagram + - linkedin + - twitter + default: facebook + - type: enum + name: style + label: Style + options: + - label: Link + value: link + - label: Primary + value: primary + - label: Secondary + value: secondary + default: secondary diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml index 23de4cca..2be798bb 100644 --- a/public/models/TestimonialsSection.yaml +++ b/public/models/TestimonialsSection.yaml @@ -11,71 +11,11 @@ fields: - label: Testimonial with author image on the left 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 @@ -87,6 +27,5 @@ fields: label: Testimonials items: type: model - models: [Testimonial] - - type: string - name: elementId \ No newline at end of file + models: + - Testimonial diff --git a/public/models/TextSection.yaml b/public/models/TextSection.yaml new file mode 100644 index 00000000..c837dc5c --- /dev/null +++ b/public/models/TextSection.yaml @@ -0,0 +1,20 @@ +type: object +name: TextSection +label: Text section +extends: + - Section +fields: + - type: model + name: badge + label: Badge + models: + - Badge + - type: string + name: title + label: Title + - type: string + name: subtitle + label: Subtitle + - type: markdown + name: text + label: Text diff --git a/public/models/VideoBlock.yaml b/public/models/VideoBlock.yaml index 90921ea3..f46e112f 100644 --- a/public/models/VideoBlock.yaml +++ b/public/models/VideoBlock.yaml @@ -2,6 +2,11 @@ type: object name: VideoBlock label: Video fields: + - type: string + name: elementId + label: Element ID + description: The unique ID for an HTML element, must not contain whitespace + default: '' - type: string name: videoUrl label: Video URL (.mp4) @@ -24,5 +29,3 @@ fields: name: controls label: Controls default: false - - type: string - name: elementId \ No newline at end of file diff --git a/src/components-manifest.json b/src/components-manifest.json index 0f2fff43..e1a1e4a1 100644 --- a/src/components-manifest.json +++ b/src/components-manifest.json @@ -2,13 +2,13 @@ "Action": { "path": "components/Action", "className": "Action", - "modelName": "button", + "modelName": null, "isDynamic": false }, "Badge": { "path": "components/Badge", "className": "Badge", - "modelName": "badge", + "modelName": "Badge", "isDynamic": false }, "CheckboxFormControl": { @@ -23,12 +23,6 @@ "modelName": "ContactSection", "isDynamic": true }, - "ContentSection": { - "path": "components/ContentSection", - "className": "ContentSection", - "modelName": "ContentSection", - "isDynamic": true - }, "CtaSection": { "path": "components/CtaSection", "className": "CtaSection", @@ -101,22 +95,34 @@ "modelName": "SelectFormControl", "isDynamic": true }, + "Social": { + "path": "components/Social", + "className": "Social", + "modelName": "Social", + "isDynamic": false + }, "TestimonialsSection": { "path": "components/TestimonialsSection", "className": "TestimonialsSection", "modelName": "TestimonialsSection", "isDynamic": true }, + "TextareaFormControl": { + "path": "components/TextareaFormControl", + "className": "TextareaFormControl", + "modelName": "TextareaFormControl", + "isDynamic": true + }, "TextFormControl": { "path": "components/TextFormControl", "className": "TextFormControl", "modelName": "TextFormControl", "isDynamic": true }, - "TextareaFormControl": { - "path": "components/TextareaFormControl", - "className": "TextareaFormControl", - "modelName": "TextareaFormControl", + "TextSection": { + "path": "components/TextSection", + "className": "TextSection", + "modelName": "TextSection", "isDynamic": true }, "VideoBlock": { diff --git a/src/components/Action/action.stories.js b/src/components/Action/action.stories.js index 562621e9..f21519b0 100644 --- a/src/components/Action/action.stories.js +++ b/src/components/Action/action.stories.js @@ -10,11 +10,11 @@ const Template = (args) => ; const args = { type: 'Button', + elementId: '', label: 'Stackbit', - url: 'https://www.stackbit.com', altText: 'Stackbit', - style: 'primary', - elementId: '' + url: 'https://www.stackbit.com', + style: 'primary' }; export const Primary = Template.bind({}); @@ -22,9 +22,33 @@ Primary.storyName = 'Primary button'; Primary.args = { ...args }; export const ButtonIcon = Template.bind({}); -ButtonIcon.storyName = 'Secondary button with icon'; -ButtonIcon.args = { ...args, style: 'secondary', icon: 'cart' }; +ButtonIcon.storyName = 'Primary button with icon'; +ButtonIcon.args = { + ...args, + showIcon: true, + icon: 'arrowRight', + iconPosition: 'right' +}; + +export const ButtonIconOnly = Template.bind({}); +ButtonIconOnly.storyName = 'Secondary button with icon only'; +ButtonIconOnly.args = { + ...args, + label: null, + altText: 'Cart', + showIcon: true, + icon: 'cart', + iconPosition: 'right', + style: 'secondary' +}; export const LinkIcon = Template.bind({}); LinkIcon.storyName = 'Link with icon'; -LinkIcon.args = { ...args, type: 'Link', style: 'link', icon: 'arrowRight' }; +LinkIcon.args = { + ...args, + type: 'Link', + showIcon: true, + icon: 'arrowLeft', + iconPosition: 'left', + style: 'link', +}; diff --git a/src/components/Action/index.js b/src/components/Action/index.js index 9f2e3dc2..e3fb2b6e 100644 --- a/src/components/Action/index.js +++ b/src/components/Action/index.js @@ -1,6 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import Link from '../../utils/link'; +import ArrowLeft from '../../svgs/arrow-left'; import ArrowRight from '../../svgs/arrow-right'; import Cart from '../../svgs/cart'; import Facebook from '../../svgs/facebook'; @@ -9,29 +10,32 @@ import Instagram from '../../svgs/instagram'; import LinkedIn from '../../svgs/linkedin'; import Twitter from '../../svgs/twitter'; +const iconMap = { + arrowLeft: ArrowLeft, + arrowRight: ArrowRight, + cart: Cart, + facebook: Facebook, + github: GitHub, + instagram: Instagram, + linkedin: LinkedIn, + twitter: Twitter +}; + export default function Action(props) { - const { type, label, url, icon, altText, style, annotationPrefix = '' } = props; - const iconMap = { - arrowRight: ArrowRight, - cart: Cart, - facebook: Facebook, - github: GitHub, - instagram: Instagram, - linkedin: LinkedIn, - twitter: Twitter - }; - const IconComponent = icon ? iconMap[icon] : null; + const { type, label, altText, url, showIcon } = props; + const icon = props.icon || 'arrowLeft'; + const iconPosition = props.iconPosition || 'right'; + const IconComponent = iconMap[icon]; + const annotationPrefix = props.annotationPrefix || ''; const annotations = [ `${annotationPrefix}`, `${annotationPrefix}.url#@href`, - `${annotationPrefix}.altText#@title`, - `${annotationPrefix}.label${IconComponent ? '#text()[1]' : ''}`, - IconComponent ? `${annotationPrefix}.icon#svg[1]` : '' + `${annotationPrefix}.altText#@aria-label`, + `${annotationPrefix}.label${(showIcon && IconComponent) ? '#text()[1]' : ''}`, + (showIcon && IconComponent) ? `${annotationPrefix}.icon#svg[1]` : '' ]; - - const defaultLinkStyle = type === 'Link' ? 'link' : 'secondary'; - const linkStyle = style || defaultLinkStyle; - + const defaultStyle = type === 'Link' ? 'link' : 'secondary'; + const style = props.style || defaultStyle; const cssClasses = props.className || null; const cssId = props.elementId || null; @@ -39,16 +43,23 @@ export default function Action(props) { {label} - {IconComponent && } + {showIcon && IconComponent && ( + + )} ); } diff --git a/src/components/Badge/index.js b/src/components/Badge/index.js index b82edc1a..0b49e1b9 100644 --- a/src/components/Badge/index.js +++ b/src/components/Badge/index.js @@ -11,7 +11,7 @@ export default function Badge(props) { } return ( -
+
{label}
); diff --git a/src/components/ContactSection/contact-section.stories.js b/src/components/ContactSection/contact-section.stories.js index dd214df5..c89ca0f4 100644 --- a/src/components/ContactSection/contact-section.stories.js +++ b/src/components/ContactSection/contact-section.stories.js @@ -6,6 +6,9 @@ export default { component: ContactSection, argTypes: { type: { table: { disable: true } }, + elementId: { + defaultValue: '' + }, variant: { options: ['variant-a', 'variant-b'], defaultValue: 'variant-a', @@ -16,9 +19,6 @@ export default { defaultValue: 'colors-a', control: { type: 'select' } }, - elementId: { - defaultValue: '' - }, width: { options: ['wide', 'full'], defaultValue: 'wide', @@ -30,24 +30,34 @@ export default { control: { type: 'select' } }, topGap: { - options: ['none', 'small', 'large'], - defaultValue: 'small', + options: ['none', 'small', 'medium', 'large'], + defaultValue: 'medium', control: { type: 'select' } }, bottomGap: { - options: ['none', 'small', 'large'], - defaultValue: 'small', + options: ['none', 'small', 'medium', 'large'], + defaultValue: 'medium', control: { type: 'select' } }, - alignHoriz: { - options: ['left', 'right', 'center'], + contentWidth: { + options: ['small', 'medium', 'large'], + defaultValue: 'large', + control: { type: 'select' } + }, + contentAlignHoriz: { + options: ['left', 'center', 'right'], defaultValue: 'left', control: { type: 'select' } }, - alignVert: { + contentAlignVert: { options: ['top', 'middle', 'bottom'], defaultValue: 'middle', control: { type: 'select' } + }, + textAlign: { + options: ['left', 'center', 'right'], + defaultValue: 'left', + control: { type: 'select' } } } }; @@ -56,14 +66,13 @@ const Template = (args) => ; const args = { type: 'ContactSection', + elementId: '', variant: 'variant-b', colors: 'colors-e', - elementId: '', width: 'wide', height: 'short', topGap: 'none', bottomGap: 'none', - alignHoriz: 'left', title: 'Join our club', text: 'We will notify you every time a shipment is heading to your neighborhood, and you could immediatly let us know if you want in or not.', feature: { @@ -120,6 +129,6 @@ ContactRightImage.args = { ...args, variant: 'variant-a', colors: 'colors-h', - alignHoriz: 'center', + textAlign: 'center', title: 'Join our **club**' }; diff --git a/src/components/ContactSection/index.js b/src/components/ContactSection/index.js index 8c672456..a8b1f2ed 100644 --- a/src/components/ContactSection/index.js +++ b/src/components/ContactSection/index.js @@ -166,7 +166,7 @@ function contactContent(props) { 'text-center': alignHoriz === 'center' })} > - {props.badge && } + {props.badge && } {props.title && (

{props.title} diff --git a/src/components/CtaSection/cta-section.stories.js b/src/components/CtaSection/cta-section.stories.js index a01b20e1..bab64ac0 100644 --- a/src/components/CtaSection/cta-section.stories.js +++ b/src/components/CtaSection/cta-section.stories.js @@ -6,19 +6,14 @@ export default { component: CtaSection, argTypes: { type: { table: { disable: true } }, - variant: { - options: ['variant-a', 'variant-b'], - defaultValue: 'variant-a', - control: { type: 'select' } + elementId: { + defaultValue: '' }, colors: { options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e', 'colors-f', 'colors-g', 'colors-h', 'colors-i'], defaultValue: 'colors-a', control: { type: 'select' } }, - elementId: { - defaultValue: '' - }, width: { options: ['wide', 'full'], defaultValue: 'wide', @@ -30,19 +25,39 @@ export default { control: { type: 'select' } }, topGap: { - options: ['none', 'small', 'large'], - defaultValue: 'small', + options: ['none', 'small', 'medium', 'large'], + defaultValue: 'medium', control: { type: 'select' } }, bottomGap: { - options: ['none', 'small', 'large'], - defaultValue: 'small', + options: ['none', 'small', 'medium', 'large'], + defaultValue: 'medium', control: { type: 'select' } }, - alignHoriz: { - options: ['left', 'right', 'center'], + contentWidth: { + options: ['small', 'medium', 'large'], + defaultValue: 'large', + control: { type: 'select' } + }, + contentAlignHoriz: { + options: ['left', 'center', 'right'], defaultValue: 'left', control: { type: 'select' } + }, + contentAlignVert: { + options: ['top', 'middle', 'bottom'], + defaultValue: 'middle', + control: { type: 'select' } + }, + textAlign: { + options: ['left', 'center', 'right'], + defaultValue: 'left', + control: { type: 'select' } + }, + variant: { + options: ['variant-a', 'variant-b'], + defaultValue: 'variant-a', + control: { type: 'select' } } } }; @@ -51,14 +66,14 @@ const Template = (args) => ; const args = { type: 'CtaSection', + elementId: '', variant: 'variant-a', colors: 'colors-h', - elementId: '', width: 'wide', height: 'short', topGap: 'none', bottomGap: 'none', - alignHoriz: 'center', + textAlign: 'center', title: "Let's do this", text: 'The Stackbit theme is flexible and scalable to every need. It can manage any layout and any screen.', actions: [ @@ -82,7 +97,7 @@ CtaButtonsRight.args = { variant: 'variant-b', colors: 'colors-c', width: 'full', - alignHoriz: 'left', + textAlign: 'left', backgroundImage: { type: 'ImageBlock', url: '/images/water.jpg', diff --git a/src/components/CtaSection/index.js b/src/components/CtaSection/index.js index 63ee6b50..14b47de6 100644 --- a/src/components/CtaSection/index.js +++ b/src/components/CtaSection/index.js @@ -174,7 +174,7 @@ function ctaBackgroundImage(image) { if (!imageUrl) { return null; } - const imageOpacity = (image.opacity || 1) * 0.01; + const imageOpacity = (image.opacity || 100) * 0.01; return ( - {props.badge && } + {props.badge && } {props.title && (

{props.title} diff --git a/src/components/FeaturedPeopleSection/featured-people-section.stories.js b/src/components/FeaturedPeopleSection/featured-people-section.stories.js index a02c7b3c..9ae2f76c 100644 --- a/src/components/FeaturedPeopleSection/featured-people-section.stories.js +++ b/src/components/FeaturedPeopleSection/featured-people-section.stories.js @@ -6,6 +6,9 @@ export default { component: FeaturedPeopleSection, argTypes: { type: { table: { disable: true } }, + elementId: { + defaultValue: '' + }, variant: { options: ['variant-a', 'variant-b', 'variant-c'], defaultValue: 'variant-a', @@ -16,9 +19,6 @@ export default { defaultValue: 'colors-a', control: { type: 'select' } }, - elementId: { - defaultValue: '' - }, width: { options: ['wide', 'full'], defaultValue: 'wide', @@ -30,17 +30,32 @@ export default { control: { type: 'select' } }, topGap: { - options: ['none', 'small', 'large'], - defaultValue: 'small', + options: ['none', 'small', 'medium', 'large'], + defaultValue: 'medium', control: { type: 'select' } }, bottomGap: { - options: ['none', 'small', 'large'], - defaultValue: 'small', + options: ['none', 'small', 'medium', 'large'], + defaultValue: 'medium', + control: { type: 'select' } + }, + contentWidth: { + options: ['small', 'medium', 'large'], + defaultValue: 'large', control: { type: 'select' } }, - alignHoriz: { - options: ['left', 'right', 'center'], + contentAlignHoriz: { + options: ['left', 'center', 'right'], + defaultValue: 'left', + control: { type: 'select' } + }, + contentAlignVert: { + options: ['top', 'middle', 'bottom'], + defaultValue: 'middle', + control: { type: 'select' } + }, + textAlign: { + options: ['left', 'center', 'right'], defaultValue: 'left', control: { type: 'select' } } @@ -51,12 +66,16 @@ const Template = (args) => ; const args = { type: 'FeaturedPeopleSection', + elementId: '', variant: 'variant-a', colors: 'colors-a', width: 'wide', height: 'short', - alignHoriz: 'center', - badge: 'Know Our Team', + textAlign: 'center', + badge: { + type: 'Badge', + label: 'Know Our Team' + }, title: 'The Team', subtitle: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.', people: [ @@ -117,9 +136,8 @@ VariantB.args = { ...args, variant: 'variant-b', colors: 'colors-c', - elementId: '', width: 'full', - alignHoriz: 'left', + textAlign: 'left', actions: [ { type: 'Button', @@ -135,6 +153,5 @@ VariantC.storyName = 'Two Cols, Info Under the Image'; VariantC.args = { ...args, variant: 'variant-c', - colors: 'colors-i', - alignHoriz: 'center' + colors: 'colors-i' }; diff --git a/src/components/FeaturedPeopleSection/index.js b/src/components/FeaturedPeopleSection/index.js index 022b654d..a00ac10a 100644 --- a/src/components/FeaturedPeopleSection/index.js +++ b/src/components/FeaturedPeopleSection/index.js @@ -103,7 +103,7 @@ function featuredPeopleHeader(props) { 'ml-auto text-right': alignHoriz === 'right' })} > - {props.badge && } + {props.badge && } {props.title && (

{props.title} diff --git a/src/components/FeaturedPostsSection/featured-posts-section.stories.js b/src/components/FeaturedPostsSection/featured-posts-section.stories.js index 74e0f8ed..aa449d58 100644 --- a/src/components/FeaturedPostsSection/featured-posts-section.stories.js +++ b/src/components/FeaturedPostsSection/featured-posts-section.stories.js @@ -51,9 +51,9 @@ const Template = (args) => ; const args = { type: 'FeaturedPostsSection', + elementId: '', variant: 'variant-a', colors: 'colors-a', - elementId: '', width: 'full', height: 'short', alignHoriz: 'center', diff --git a/src/components/FeaturedPostsSection/index.js b/src/components/FeaturedPostsSection/index.js index 5a8b7d46..c77329d1 100644 --- a/src/components/FeaturedPostsSection/index.js +++ b/src/components/FeaturedPostsSection/index.js @@ -105,7 +105,7 @@ function featuredPostsHeader(props) { 'ml-auto text-right': alignHoriz === 'right' })} > - {props.badge && } + {props.badge && } {props.title && (

{props.title} diff --git a/src/components/Footer/footer.stories.js b/src/components/Footer/footer.stories.js index f94898c0..fd1ce9b1 100644 --- a/src/components/Footer/footer.stories.js +++ b/src/components/Footer/footer.stories.js @@ -45,46 +45,45 @@ const args = { { type: 'Link', label: 'About us', - url: '/about', - altText: 'About us' + url: '/about' }, { type: 'Link', label: 'Product', - url: '/', - altText: 'Product' + url: '/' }, { type: 'Link', label: 'Features', - url: '/', - altText: 'Features' + url: '/' }, { type: 'Link', label: 'Pricing', - url: '/', - altText: 'Pricing' + url: '/' } ], socialLinks: [ { - type: 'Link', - label: 'Twitter', + type: 'Social', + altText: 'Twitter', url: '/', + showIcon: true, icon: 'twitter' }, { - type: 'Link', - label: 'Instagram', + type: 'Social', + altText: 'Instagram', url: '/', - icon: 'instagram', + showIcon: true, + icon: 'instagram' }, { - type: 'Link', - label: 'Facebook', + type: 'Social', + altText: 'Facebook', url: '/', - icon: 'facebook', + showIcon: true, + icon: 'facebook' } ], legalLinks: [ diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index fc6db4ed..b7a9881b 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -3,23 +3,12 @@ import Markdown from 'markdown-to-jsx'; import classNames from 'classnames'; import Action from '../Action'; import ImageBlock from '../ImageBlock'; +import Social from '../Social'; import Link from '../../utils/link'; -import Facebook from '../../svgs/facebook'; -import GitHub from '../../svgs/github'; -import Instagram from '../../svgs/instagram'; -import LinkedIn from '../../svgs/linkedin'; -import Twitter from '../../svgs/twitter'; export default function Footer(props) { const colors = props.colors || 'colors-a'; const width = props.width || 'wide'; - const iconMap = { - facebook: Facebook, - github: GitHub, - instagram: Instagram, - linkedin: LinkedIn, - twitter: Twitter - }; const primaryLinks = props.primaryLinks || []; const socialLinks = props.socialLinks || []; const legalLinks = props.legalLinks || []; @@ -51,8 +40,8 @@ export default function Footer(props) { {(primaryLinks.length > 0 || socialLinks.length > 0 || props.contacts) && (
{primaryLinks.length > 0 && ( -
-