From 7b709c62812850748b0e1c291833d0c0bd407153 Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Wed, 4 Oct 2023 17:09:25 -0400 Subject: [PATCH 1/2] feat: text and fill divider classes --- .../components/typography/divider.stories.js | 49 ++++++++++++ .../src/sass/typography/_dividers.scss | 75 +++++++++++++++++++ .../vanilla/src/sass/typography/_index.scss | 1 + 3 files changed, 125 insertions(+) create mode 100644 packages/vanilla/src/components/typography/divider.stories.js create mode 100644 packages/vanilla/src/sass/typography/_dividers.scss diff --git a/packages/vanilla/src/components/typography/divider.stories.js b/packages/vanilla/src/components/typography/divider.stories.js new file mode 100644 index 00000000..56ffd3f9 --- /dev/null +++ b/packages/vanilla/src/components/typography/divider.stories.js @@ -0,0 +1,49 @@ +export default { + title: 'Foundations/Typography/Divider', + argTypes: { + title: { + name: 'Divider Title', + description: 'Title of the divider', + control: 'text' + }, + dividerLevel: { + name: 'Divider Level', + description: 'Select a divider level', + control: 'select', + options: ['xl', 'lg', 'md', 'sm', 'xs'] + }, + headingLevel: { + name: 'Heading Level', + description: 'Select a heading level', + control: 'select', + options: ['h2', 'h3', 'h4', 'h5', 'h6'] + } + }, +}; + +const DividerTemplate = ({ title, dividerLevel, headingLevel }) => { + return ` + <${headingLevel} class="cbp-divider-text cbp-divider-text--${dividerLevel}">${title} + `; +}; + +const DividerFillTemplate = ({ title, dividerLevel, headingLevel }) => { + return ` + <${headingLevel} class="cbp-divider-fill cbp-divider-fill--${dividerLevel}">${title} + `; +}; + +export const Text = DividerTemplate.bind({}); +Text.args = { + title: 'Example Text Divider', + dividerLevel: 'xl', + headingLevel: 'h2' +}; + +export const Fill = DividerFillTemplate.bind({}); +Fill.args = { + title: 'Example Text Divider w/ Fill', + dividerLevel: 'xl', + headingLevel: 'h2' +}; +Fill.storyName = "Text w/ Fill"; diff --git a/packages/vanilla/src/sass/typography/_dividers.scss b/packages/vanilla/src/sass/typography/_dividers.scss new file mode 100644 index 00000000..f3fa4cc5 --- /dev/null +++ b/packages/vanilla/src/sass/typography/_dividers.scss @@ -0,0 +1,75 @@ +.cbp-divider-text { + border-bottom-color: var(--cbp-color-gray-cool-30); + border-bottom-style: solid; + border-bottom-width: var(--cbp-border-size-md); + color: var(--cbp-color-text-darker); + font-weight: var(--cbp-font-weight-regular); + padding: var(--cbp-space-3x) var(--cbp-space-3x) var(--cbp-space-3x) 0; +} + +.cbp-divider-text--xl { + font-size: var(--cbp-font-size-heading-xl); +} + +.cbp-divider-text--lg { + font-size: var(--cbp-font-size-heading-lg); +} + +.cbp-divider-text--md { + font-size: var(--cbp-font-size-heading-md); + font-weight: var(--cbp-font-weight-medium); + padding-top: var(--cbp-space-2x); + padding-bottom: var(--cbp-space-2x); +} + +.cbp-divider-text--sm { + border-bottom-width: var(--cbp-border-size-sm); + font-size: var(--cbp-font-size-heading-sm); + font-weight: var(--cbp-font-weight-medium); + padding-top: var(--cbp-space-1x); + padding-bottom: var(--cbp-space-1x); +} +.cbp-divider-text--xs { + border-bottom-width: var(--cbp-border-size-sm); + font-size: var(--cbp-font-size-heading-xs); + font-weight: var(--cbp-font-weight-bold); + padding-top: var(--cbp-space-1x); + padding-bottom: var(--cbp-space-1x); + padding-right: var(--cbp-space-2x); +} + +.cbp-divider-fill { + background-color: var(--cbp-color-gray-cool-10); + border-radius: var(--cbp-border-radius-soft); + color: var(--cbp-color-text-darker); + font-size: var(--cbp-font-size-heading-xl); + font-weight: var(--cbp-font-weight-regular); + padding: var(--cbp-space-3x); +} + +.cbp-divider-fill--xl { + font-size: var(--cbp-font-size-heading-xl); +} + +.cbp-divider-fill--lg { + font-size: var(--cbp-font-size-heading-lg); +} + +.cbp-divider-fill--md { + font-size: var(--cbp-font-size-heading-md); + font-weight: var(--cbp-font-weight-medium); + padding-top: var(--cbp-space-2x); + padding-bottom: var(--cbp-space-2x); +} +.cbp-divider-fill--sm { + font-size: var(--cbp-font-size-heading-sm); + font-weight: var(--cbp-font-weight-medium); + padding-top: var(--cbp-space-1x); + padding-bottom: var(--cbp-space-1x); +} + +.cbp-divider-fill--xs { + font-size: var(--cbp-font-size-heading-xs); + font-weight: var(--cbp-font-weight-bold); + padding: var(--cbp-space-1x) var(--cbp-space-2x); +} \ No newline at end of file diff --git a/packages/vanilla/src/sass/typography/_index.scss b/packages/vanilla/src/sass/typography/_index.scss index d551ff06..051cd3c1 100644 --- a/packages/vanilla/src/sass/typography/_index.scss +++ b/packages/vanilla/src/sass/typography/_index.scss @@ -1,4 +1,5 @@ @use './fonts'; +@use 'dividers'; @use './font-face/roboto'; @use './font-face/roboto-italic'; \ No newline at end of file From ec0b1c055c88cf21aa270a7bb7065e54784b00d6 Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Tue, 10 Oct 2023 09:21:33 -0400 Subject: [PATCH 2/2] chore: dry up divider classes --- .../components/typography/divider.stories.js | 2 +- .../src/sass/typography/_dividers.scss | 49 +++++++------------ 2 files changed, 19 insertions(+), 32 deletions(-) diff --git a/packages/vanilla/src/components/typography/divider.stories.js b/packages/vanilla/src/components/typography/divider.stories.js index 56ffd3f9..810e1b8a 100644 --- a/packages/vanilla/src/components/typography/divider.stories.js +++ b/packages/vanilla/src/components/typography/divider.stories.js @@ -1,5 +1,5 @@ export default { - title: 'Foundations/Typography/Divider', + title: 'Patterns/Divider', argTypes: { title: { name: 'Divider Title', diff --git a/packages/vanilla/src/sass/typography/_dividers.scss b/packages/vanilla/src/sass/typography/_dividers.scss index f3fa4cc5..ec8db850 100644 --- a/packages/vanilla/src/sass/typography/_dividers.scss +++ b/packages/vanilla/src/sass/typography/_dividers.scss @@ -7,37 +7,6 @@ padding: var(--cbp-space-3x) var(--cbp-space-3x) var(--cbp-space-3x) 0; } -.cbp-divider-text--xl { - font-size: var(--cbp-font-size-heading-xl); -} - -.cbp-divider-text--lg { - font-size: var(--cbp-font-size-heading-lg); -} - -.cbp-divider-text--md { - font-size: var(--cbp-font-size-heading-md); - font-weight: var(--cbp-font-weight-medium); - padding-top: var(--cbp-space-2x); - padding-bottom: var(--cbp-space-2x); -} - -.cbp-divider-text--sm { - border-bottom-width: var(--cbp-border-size-sm); - font-size: var(--cbp-font-size-heading-sm); - font-weight: var(--cbp-font-weight-medium); - padding-top: var(--cbp-space-1x); - padding-bottom: var(--cbp-space-1x); -} -.cbp-divider-text--xs { - border-bottom-width: var(--cbp-border-size-sm); - font-size: var(--cbp-font-size-heading-xs); - font-weight: var(--cbp-font-weight-bold); - padding-top: var(--cbp-space-1x); - padding-bottom: var(--cbp-space-1x); - padding-right: var(--cbp-space-2x); -} - .cbp-divider-fill { background-color: var(--cbp-color-gray-cool-10); border-radius: var(--cbp-border-radius-soft); @@ -47,20 +16,25 @@ padding: var(--cbp-space-3x); } +.cbp-divider-text--xl, .cbp-divider-fill--xl { font-size: var(--cbp-font-size-heading-xl); } +.cbp-divider-text--lg, .cbp-divider-fill--lg { font-size: var(--cbp-font-size-heading-lg); } +.cbp-divider-text--md, .cbp-divider-fill--md { font-size: var(--cbp-font-size-heading-md); font-weight: var(--cbp-font-weight-medium); padding-top: var(--cbp-space-2x); padding-bottom: var(--cbp-space-2x); } + +.cbp-divider-text--sm, .cbp-divider-fill--sm { font-size: var(--cbp-font-size-heading-sm); font-weight: var(--cbp-font-weight-medium); @@ -68,6 +42,19 @@ padding-bottom: var(--cbp-space-1x); } +.cbp-divider-text--sm { + border-bottom-width: var(--cbp-border-size-sm); +} + +.cbp-divider-text--xs { + border-bottom-width: var(--cbp-border-size-sm); + font-size: var(--cbp-font-size-heading-xs); + font-weight: var(--cbp-font-weight-bold); + padding-top: var(--cbp-space-1x); + padding-bottom: var(--cbp-space-1x); + padding-right: var(--cbp-space-2x); +} + .cbp-divider-fill--xs { font-size: var(--cbp-font-size-heading-xs); font-weight: var(--cbp-font-weight-bold);