From 12bcd7094a536cadbee289637f919e6086a56017 Mon Sep 17 00:00:00 2001 From: TomasBankauskas Date: Sun, 10 Oct 2021 22:48:37 +0300 Subject: [PATCH 1/2] added styles to HeroSection --- models/HeroSection.yaml | 22 ++++- public/models/HeroSection.yaml | 22 ++++- .../HeroSection/hero-section.stories.js | 25 ++++++ src/components/HeroSection/index.js | 87 ++++++++++++------- src/utils/map-styles-to-class-names.js | 46 ++++++++++ styles/default/style.css | 2 +- styles/retro/style.css | 2 +- 7 files changed, 169 insertions(+), 37 deletions(-) create mode 100644 src/utils/map-styles-to-class-names.js diff --git a/models/HeroSection.yaml b/models/HeroSection.yaml index ab307431..dae06e55 100644 --- a/models/HeroSection.yaml +++ b/models/HeroSection.yaml @@ -94,4 +94,24 @@ fields: label: Background image models: - ImageBlock - + - type: style + name: styles + styles: + badge: + fontSize: ['x-small', 'small', 'medium', 'large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + title: + fontSize: ['xx-large', 'xxx-large', 'xxxx-large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + subtitle: + fontSize: ['small', 'medium', 'large', 'x-large', 'xx-large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + text: + fontSize: ['small', 'medium', 'large', 'x-large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + actions: + justifyContent: ['start', 'center', 'end'] diff --git a/public/models/HeroSection.yaml b/public/models/HeroSection.yaml index ab307431..dae06e55 100644 --- a/public/models/HeroSection.yaml +++ b/public/models/HeroSection.yaml @@ -94,4 +94,24 @@ fields: label: Background image models: - ImageBlock - + - type: style + name: styles + styles: + badge: + fontSize: ['x-small', 'small', 'medium', 'large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + title: + fontSize: ['xx-large', 'xxx-large', 'xxxx-large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + subtitle: + fontSize: ['small', 'medium', 'large', 'x-large', 'xx-large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + text: + fontSize: ['small', 'medium', 'large', 'x-large'] + fontWeight: [300, 400, 500] + textAlign: ['left', 'center', 'right'] + actions: + justifyContent: ['start', 'center', 'end'] diff --git a/src/components/HeroSection/hero-section.stories.js b/src/components/HeroSection/hero-section.stories.js index 25f65ed7..78c4ea95 100644 --- a/src/components/HeroSection/hero-section.stories.js +++ b/src/components/HeroSection/hero-section.stories.js @@ -140,6 +140,31 @@ const args = { url: '/images/hero.png', altText: 'Image alt text', caption: 'Image caption' + }, + styles: { + badge: { + fontSize: 'x-small', + fontWeight: '400', + textAlign: 'left' + }, + title: { + fontSize: 'xxxx-large', + fontWeight: '500', + textAlign: 'left' + }, + subtitle: { + fontSize: 'xx-large', + fontWeight: '300', + textAlign: 'left' + }, + text: { + fontSize: 'large', + fontWeight: '400', + textAlign: 'left' + }, + actions: { + justifyContent: 'start' + } } }; diff --git a/src/components/HeroSection/index.js b/src/components/HeroSection/index.js index 5bb58156..7539b025 100644 --- a/src/components/HeroSection/index.js +++ b/src/components/HeroSection/index.js @@ -2,6 +2,7 @@ import * as React from 'react'; import Markdown from 'markdown-to-jsx'; import classNames from 'classnames'; import { getDynamicComponent } from '../../components-registry'; +import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names'; import Badge from '../Badge'; import Action from '../Action'; @@ -98,7 +99,6 @@ function heroVariants(props) { function heroFeatureRight(props) { const contentAlignVert = props.contentAlignVert || 'middle'; - const textAlign = props.textAlign || 'left'; return (
- {props.feature &&
{heroFeature(props.feature, textAlign)}
} + {props.feature &&
{heroFeature(props.feature)}
}
); } function heroFeatureLeft(props) { const contentAlignVert = props.contentAlignVert || 'middle'; - const textAlign = props.textAlign || 'left'; return (
- {props.feature &&
{heroFeature(props.feature, textAlign)}
} + {props.feature &&
{heroFeature(props.feature)}
}
{heroBody(props)} {heroActions(props)} @@ -137,12 +136,11 @@ function heroFeatureLeft(props) { } function heroFeatureTop(props) { - const textAlign = props.textAlign || 'left'; return ( <> {props.feature && (
- {heroFeature(props.feature, textAlign)} + {heroFeature(props.feature)}
)}
@@ -154,7 +152,6 @@ function heroFeatureTop(props) { } function heroFeatureBottom(props) { - const textAlign = props.textAlign || 'left'; return ( <>
@@ -163,14 +160,14 @@ function heroFeatureBottom(props) {
{props.feature && (
- {heroFeature(props.feature, textAlign)} + {heroFeature(props.feature)}
)} ); } -function heroFeature(feature, align) { +function heroFeature(feature) { const featureType = feature.type; if (!featureType) { throw new Error(`hero section feature does not have the 'type' property`); @@ -180,13 +177,7 @@ function heroFeature(feature, align) { throw new Error(`no component matching the hero section feature type: ${featureType}`); } return ( - + ); } @@ -211,27 +202,55 @@ function heroBackgroundImage(image) { } function heroBody(props) { - const textAlign = props.textAlign || 'left'; + return ( -
- {props.badge && } +
+ {props.badge && ( +
+ +
+ )} {props.title && ( -

+

{props.title}

)} {props.subtitle && ( -

+

{props.subtitle}

)} {props.text && ( - + {props.text} )} @@ -240,18 +259,20 @@ function heroBody(props) { } function heroActions(props) { - const textAlign = props.textAlign || 'left'; const actions = props.actions || []; if (actions.length === 0) { return null; } return (
{actions.map((action, index) => ( diff --git a/src/utils/map-styles-to-class-names.js b/src/utils/map-styles-to-class-names.js new file mode 100644 index 00000000..87921684 --- /dev/null +++ b/src/utils/map-styles-to-class-names.js @@ -0,0 +1,46 @@ +const TAILWIND_MAP = { + fontSize: { + 'x-small': 'text-xs', + 'small': 'text-sm', + 'medium': 'text-base', + 'large': 'text-lg', + 'x-large': 'text-xl', + 'xx-large': 'text-2xl', + 'xxx-large': 'text-3xl', + 'xxxx-large': 'text-4xl' + }, + fontWeight: { + '100': 'font-thin', + '200': 'font-extralight', + '300': 'font-light', + '400': 'font-normal', + '500': 'font-medium', + '600': 'font-semibold', + '700': 'font-bold', + '800': 'font-extrabold' + }, + justifyContent: { + 'start': 'justify-start', + 'end': 'justify-end', + 'center': 'justify-center', + 'between': 'justify-between' + }, + textAlign: { + left: 'text-left', + center: 'text-center', + right: 'text-right', + justify: 'text-justify' + } +}; + +export function mapStylesToClassNames(styles) { + return Object.entries(styles).map(([prop, value]) => { + if (prop in TAILWIND_MAP && value in TAILWIND_MAP[prop]) { + return TAILWIND_MAP[prop][value]; + } else { + // if prop or value don't exist in the map, use the value as is, + // useful for direct color values. + return value; + } + }).join(' '); +} diff --git a/styles/default/style.css b/styles/default/style.css index 8bda23cd..304c2d47 100644 --- a/styles/default/style.css +++ b/styles/default/style.css @@ -29,7 +29,7 @@ } } .sb-component-badge { - @apply bg-info font-medium px-2 py-0.5 text-white tracking-wider; + @apply bg-info px-2 py-0.5 text-white tracking-wider; } .sb-component-button { @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in; diff --git a/styles/retro/style.css b/styles/retro/style.css index d55b80fc..a3f7173c 100644 --- a/styles/retro/style.css +++ b/styles/retro/style.css @@ -29,7 +29,7 @@ } } .sb-component-badge { - @apply bg-info font-medium px-2 py-0.5 text-white tracking-wider; + @apply bg-info px-2 py-0.5 text-white tracking-wider; } .sb-component-button { @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in; From 66a1c73232194692bb1d5cf2ec90eb3f9e90426d Mon Sep 17 00:00:00 2001 From: TomasBankauskas Date: Sun, 10 Oct 2021 22:55:43 +0300 Subject: [PATCH 2/2] removed variantField from models --- models/ContactSection.yaml | 1 - models/CtaSection.yaml | 1 - models/FeaturedPeopleSection.yaml | 1 - models/FeaturedPostsSection.yaml | 1 - models/HeroSection.yaml | 1 - models/TestimonialsSection.yaml | 1 - public/models/ContactSection.yaml | 1 - public/models/CtaSection.yaml | 1 - public/models/FeaturedPeopleSection.yaml | 1 - public/models/FeaturedPostsSection.yaml | 1 - public/models/HeroSection.yaml | 1 - public/models/TestimonialsSection.yaml | 1 - 12 files changed, 12 deletions(-) diff --git a/models/ContactSection.yaml b/models/ContactSection.yaml index 7e2915be..2cd4ddcb 100644 --- a/models/ContactSection.yaml +++ b/models/ContactSection.yaml @@ -1,7 +1,6 @@ type: object name: ContactSection label: Contact section -variantField: variant extends: - Section groups: diff --git a/models/CtaSection.yaml b/models/CtaSection.yaml index a4c74399..69410798 100644 --- a/models/CtaSection.yaml +++ b/models/CtaSection.yaml @@ -1,7 +1,6 @@ type: object name: CtaSection label: CTA section -variantField: variant extends: - Section groups: diff --git a/models/FeaturedPeopleSection.yaml b/models/FeaturedPeopleSection.yaml index 15da23a0..a0fbbceb 100644 --- a/models/FeaturedPeopleSection.yaml +++ b/models/FeaturedPeopleSection.yaml @@ -1,7 +1,6 @@ type: object name: FeaturedPeopleSection label: Featured people section -variantField: variant extends: - Section groups: diff --git a/models/FeaturedPostsSection.yaml b/models/FeaturedPostsSection.yaml index c39f3eb1..68b3bdda 100644 --- a/models/FeaturedPostsSection.yaml +++ b/models/FeaturedPostsSection.yaml @@ -1,7 +1,6 @@ type: object name: FeaturedPostsSection label: Featured posts section -variantField: variant extends: - Section groups: diff --git a/models/HeroSection.yaml b/models/HeroSection.yaml index dae06e55..934d9e88 100644 --- a/models/HeroSection.yaml +++ b/models/HeroSection.yaml @@ -1,7 +1,6 @@ type: object name: HeroSection label: Hero section -variantField: variant extends: - Section groups: diff --git a/models/TestimonialsSection.yaml b/models/TestimonialsSection.yaml index c7eb3b02..e9f1522c 100644 --- a/models/TestimonialsSection.yaml +++ b/models/TestimonialsSection.yaml @@ -1,7 +1,6 @@ type: object name: TestimonialsSection label: Testimonials section -variantField: variant extends: - Section groups: diff --git a/public/models/ContactSection.yaml b/public/models/ContactSection.yaml index 7e2915be..2cd4ddcb 100644 --- a/public/models/ContactSection.yaml +++ b/public/models/ContactSection.yaml @@ -1,7 +1,6 @@ type: object name: ContactSection label: Contact section -variantField: variant extends: - Section groups: diff --git a/public/models/CtaSection.yaml b/public/models/CtaSection.yaml index a4c74399..69410798 100644 --- a/public/models/CtaSection.yaml +++ b/public/models/CtaSection.yaml @@ -1,7 +1,6 @@ type: object name: CtaSection label: CTA section -variantField: variant extends: - Section groups: diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml index 15da23a0..a0fbbceb 100644 --- a/public/models/FeaturedPeopleSection.yaml +++ b/public/models/FeaturedPeopleSection.yaml @@ -1,7 +1,6 @@ type: object name: FeaturedPeopleSection label: Featured people section -variantField: variant extends: - Section groups: diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml index c39f3eb1..68b3bdda 100644 --- a/public/models/FeaturedPostsSection.yaml +++ b/public/models/FeaturedPostsSection.yaml @@ -1,7 +1,6 @@ type: object name: FeaturedPostsSection label: Featured posts section -variantField: variant extends: - Section groups: diff --git a/public/models/HeroSection.yaml b/public/models/HeroSection.yaml index dae06e55..934d9e88 100644 --- a/public/models/HeroSection.yaml +++ b/public/models/HeroSection.yaml @@ -1,7 +1,6 @@ type: object name: HeroSection label: Hero section -variantField: variant extends: - Section groups: diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml index c7eb3b02..e9f1522c 100644 --- a/public/models/TestimonialsSection.yaml +++ b/public/models/TestimonialsSection.yaml @@ -1,7 +1,6 @@ type: object name: TestimonialsSection label: Testimonials section -variantField: variant extends: - Section groups: