From 02b1d8d370cf63a3e55e8ac3839edbdd9b21c92a Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 21 Mar 2024 16:54:11 -0500 Subject: [PATCH 01/16] feat(YSP-413): re-named stat component to infographic, re-named stats component infographic__group --- .../_yds-infographic.scss} | 55 +++++----- .../infographic/infographic.stories.js | 100 ++++++++++++++++++ .../02-molecules/infographic/infographic.yml | 2 + .../infographic/yds-infographic.twig | 50 +++++++++ components/02-molecules/molecules.scss | 2 +- components/02-molecules/stat/stat.stories.js | 100 ------------------ components/02-molecules/stat/stat.yml | 2 - components/02-molecules/stat/yds-stat.twig | 50 --------- .../_yds-infographic-group.scss} | 57 +++++----- .../infographic-group.stories.js} | 58 +++++----- .../infographic-group/infographic-group.yml | 17 +++ .../yds-infographic-group.twig | 86 +++++++++++++++ components/03-organisms/organisms.scss | 2 +- components/03-organisms/stats/stats.yml | 17 --- components/03-organisms/stats/yds-stats.twig | 86 --------------- 15 files changed, 344 insertions(+), 340 deletions(-) rename components/02-molecules/{stat/_yds-stat.scss => infographic/_yds-infographic.scss} (70%) create mode 100644 components/02-molecules/infographic/infographic.stories.js create mode 100644 components/02-molecules/infographic/infographic.yml create mode 100644 components/02-molecules/infographic/yds-infographic.twig delete mode 100644 components/02-molecules/stat/stat.stories.js delete mode 100644 components/02-molecules/stat/stat.yml delete mode 100644 components/02-molecules/stat/yds-stat.twig rename components/03-organisms/{stats/_yds-stats.scss => infographic-group/_yds-infographic-group.scss} (72%) rename components/03-organisms/{stats/stats.stories.js => infographic-group/infographic-group.stories.js} (58%) create mode 100644 components/03-organisms/infographic-group/infographic-group.yml create mode 100644 components/03-organisms/infographic-group/yds-infographic-group.twig delete mode 100644 components/03-organisms/stats/stats.yml delete mode 100644 components/03-organisms/stats/yds-stats.twig diff --git a/components/02-molecules/stat/_yds-stat.scss b/components/02-molecules/infographic/_yds-infographic.scss similarity index 70% rename from components/02-molecules/stat/_yds-stat.scss rename to components/02-molecules/infographic/_yds-infographic.scss index 2b29295ff..4fbc70c6c 100644 --- a/components/02-molecules/stat/_yds-stat.scss +++ b/components/02-molecules/infographic/_yds-infographic.scss @@ -1,10 +1,10 @@ @use '../../00-tokens/tokens'; @use '../../00-tokens/functions/map'; -$global-stat-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); +$global-infographic-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); -.stat { +.infographic { display: flex; flex-flow: column nowrap; align-items: center; @@ -14,7 +14,7 @@ $stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $stat-component-themes { + @each $theme, $value in $infographic-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -25,11 +25,11 @@ $stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-slot-six: var(--component-themes-#{$theme}-slot-six); --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-stat-theme: var(--color-slot-one); - --color-stat-content: var(--color-slot-eight); + --color-infographic-theme: var(--color-slot-one); + --color-infographic-content: var(--color-slot-eight); - background-color: var(--color-stat-theme); - color: var(--color-stat-content); + background-color: var(--color-infographic-theme); + color: var(--color-infographic-content); } } @@ -37,7 +37,7 @@ $stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // This establishes `--color-slot-` variables name-spaced to the selector // in which it is used. We can map component-level variables to global-level // `--color-slot-` variables. - @each $globalTheme, $value in $global-stat-themes { + @each $globalTheme, $value in $global-infographic-themes { [data-global-theme='#{$globalTheme}'] & { --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); @@ -59,18 +59,18 @@ $stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component theme overrides: set specific component themes overrides /// define component name spaced variables and map them to global theme slots. &[data-component-theme='one'] { - --color-stat-theme: var(--color-slot-one); - --color-stat-content: var(--color-slot-eight); + --color-infographic-theme: var(--color-slot-one); + --color-infographic-content: var(--color-slot-eight); } &[data-component-theme='two'] { - --color-stat-theme: var(--color-slot-two); - --color-stat-content: var(--color-slot-eight); + --color-infographic-theme: var(--color-slot-two); + --color-infographic-content: var(--color-slot-eight); } &[data-component-theme='three'] { - --color-stat-theme: var(--color-slot-three); - --color-stat-content: var(--color-slot-seven); + --color-infographic-theme: var(--color-slot-three); + --color-infographic-content: var(--color-slot-seven); } &__inner { @@ -90,43 +90,44 @@ $stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); text-align: center; } - // if we're using a single stat, add padding to the stat item inner - [data-stat-collection-type='single'] & { + // if we're using a single infographic, add padding to the infographic item inner + [data-infographic-collection-type='single'] & { padding: var(--size-spacing-8); } } } -.stat__stat { +.infographic__stat { @include tokens.h3-yale-new; width: 100%; position: relative; // change font-variant-numeric to normal from the default of oldstyle-nums in the h3-yale-new mixin - [data-stat-font-style='normal'] & { + [data-infographic-font-style='normal'] & { font-variant-numeric: normal; } - // add eyebrow above stat - [data-stat-style='basic'] & { + // add eyebrow above infographic + [data-infographic-style='basic'] & { &::before { content: ''; display: block; position: relative; width: var(--eyebrow-width); - border-bottom: var(--size-spacing-1) solid var(--color-stat-content); + border-bottom: var(--size-spacing-1) solid + var(--color-infographic-content); margin-bottom: var(--size-spacing-4); } } - // set eyebrow width var to 100% if stat is centered + // set eyebrow width var to 100% if infographic is centered [data-component-alignment='center'] & { --eyebrow-width: 100%; } } -.stat__icon { +.infographic__icon { align-self: flex-start; margin-bottom: var(--size-spacing-2); @@ -136,13 +137,13 @@ $stat-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } // svg -.stat__stat-icon { +.infographic__infographic-icon { max-width: var(--size-spacing-9); // max-width 48px max-height: var(--size-spacing-9); // max-height 48px - fill: var(--color-stat-content); + fill: var(--color-infographic-content); } -.stat__content { +.infographic__content { @include tokens.body-default; width: 100%; diff --git a/components/02-molecules/infographic/infographic.stories.js b/components/02-molecules/infographic/infographic.stories.js new file mode 100644 index 000000000..173ddc131 --- /dev/null +++ b/components/02-molecules/infographic/infographic.stories.js @@ -0,0 +1,100 @@ +import infographicTwig from './yds-infographic.twig'; + +import infographicData from './infographic.yml'; + +/** + * Storybook Definition. + */ +export default { + title: 'Molecules/Infographic', + argTypes: { + infographic: { + name: 'infographic', + type: 'string', + defaultValue: infographicData.infographic__stat, + }, + content: { + name: 'Content', + type: 'string', + defaultValue: infographicData.infographic__content, + }, + presentationStyle: { + name: 'Presentation Style', + options: ['basic', 'icon-only'], + type: 'select', + defaultValue: 'basic', + }, + fontStyle: { + name: 'Font Style', + options: ['normal', 'numeric-oldstyle'], + type: 'select', + defaultValue: 'normal', + }, + alignment: { + name: 'Alignment', + options: ['left', 'center'], + type: 'select', + defaultValue: 'left', + }, + themeColor: { + name: 'Component Theme (dial)', + options: ['one', 'two', 'three'], + type: 'select', + defaultValue: 'one', + }, + infographicIcon: { + name: 'infographic Icon', + type: 'boolean', + defaultValue: false, + }, + }, +}; + +export const Infographic = ({ + infographic, + content, + presentationStyle, + fontStyle, + alignment, + themeColor, + infographicIcon, +}) => ` + + +
+

Playground

+

Use the StoryBook controls to see the infographic below implement the available variations.

+ +
+`; diff --git a/components/02-molecules/infographic/infographic.yml b/components/02-molecules/infographic/infographic.yml new file mode 100644 index 000000000..7493d0d75 --- /dev/null +++ b/components/02-molecules/infographic/infographic.yml @@ -0,0 +1,2 @@ +infographic__stat: $52,000 +infographic__content: Annual grant of Undergraduate students diff --git a/components/02-molecules/infographic/yds-infographic.twig b/components/02-molecules/infographic/yds-infographic.twig new file mode 100644 index 000000000..6f9563745 --- /dev/null +++ b/components/02-molecules/infographic/yds-infographic.twig @@ -0,0 +1,50 @@ +{# + # Available Props: + # - infographic__presentation_style: basic, with-icon, icon-only + # - infographic__font_style: numeric-oldstyle, normal + # - infographic__has_icon: true, false + # - infographic__icon_name: string + # - infographic__alignment: left, center + # + # Available Variables: + # - infographic__infographic (required) + # - infographic__content + #} + +{% set infographic__base_class = 'infographic' %} +{% set infographic__presentation_style = infographic__presentation_style|default('basic') %} +{% set infographic__font_style = infographic__font_style|default('numeric-oldstyle') %} + +{# If infographic__attributes is not defined, set it to an empty object by default #} +{% set infographic__attributes = infographic__attributes|default({}) %} + +{% set infographic__attributes = infographic__attributes|merge({ + 'data-infographic-style': infographic__presentation_style, + 'data-infographic-font-style': infographic__font_style, + 'data-infographic-has-icon': infographic__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': infographic__alignment|default('center'), + 'data-component-theme': infographic__theme|default('one'), + class: bem(infographic__base_class, infographic__modifiers), +}) %} + +
  • +
    + {% if infographic__has_icon == 'true' %} + {% block infographic__icon %} +
    + {% include "@atoms/images/icons/_yds-icon.twig" with { + icon__name: infographic__icon_name|default('sack-dollar-solid'), + icon__base_class: 'infographic-icon', + icon__blockname: infographic__base_class, + } %} +
    + {% endblock %} + {% endif %} +
    + {{ infographic__stat }} +
    +
    + {{ infographic__content }} +
    +
    +
    • diff --git a/components/02-molecules/molecules.scss b/components/02-molecules/molecules.scss index 186af7fab..3036a3c22 100644 --- a/components/02-molecules/molecules.scss +++ b/components/02-molecules/molecules.scss @@ -29,4 +29,4 @@ @forward './banner/grand-hero/yds-grand-hero'; @forward './standalone-quote/yds-standalone-quote'; @forward './content-spotlight-portrait/yds-content-spotlight-portrait'; -@forward './stat/yds-stat'; +@forward './infographic/yds-infographic'; diff --git a/components/02-molecules/stat/stat.stories.js b/components/02-molecules/stat/stat.stories.js deleted file mode 100644 index b78e34ce2..000000000 --- a/components/02-molecules/stat/stat.stories.js +++ /dev/null @@ -1,100 +0,0 @@ -import statTwig from './yds-stat.twig'; - -import statData from './stat.yml'; - -/** - * Storybook Definition. - */ -export default { - title: 'Molecules/Stat', - argTypes: { - stat: { - name: 'Stat', - type: 'string', - defaultValue: statData.stat__stat, - }, - content: { - name: 'Content', - type: 'string', - defaultValue: statData.stat__content, - }, - presentationStyle: { - name: 'Presentation Style', - options: ['basic', 'icon-only'], - type: 'select', - defaultValue: 'basic', - }, - fontStyle: { - name: 'Font Style', - options: ['normal', 'numeric-oldstyle'], - type: 'select', - defaultValue: 'normal', - }, - alignment: { - name: 'Alignment', - options: ['left', 'center'], - type: 'select', - defaultValue: 'left', - }, - themeColor: { - name: 'Component Theme (dial)', - options: ['one', 'two', 'three'], - type: 'select', - defaultValue: 'one', - }, - statIcon: { - name: 'Stat Icon', - type: 'boolean', - defaultValue: false, - }, - }, -}; - -export const Stat = ({ - stat, - content, - presentationStyle, - fontStyle, - alignment, - themeColor, - statIcon, -}) => ` - - -
    -

    Playground

    -

    Use the StoryBook controls to see the stat below implement the available variations.

    - -
    -`; diff --git a/components/02-molecules/stat/stat.yml b/components/02-molecules/stat/stat.yml deleted file mode 100644 index 42eb6f790..000000000 --- a/components/02-molecules/stat/stat.yml +++ /dev/null @@ -1,2 +0,0 @@ -stat__stat: $52,000 -stat__content: Annual grant of Undergraduate students diff --git a/components/02-molecules/stat/yds-stat.twig b/components/02-molecules/stat/yds-stat.twig deleted file mode 100644 index ded62b5ef..000000000 --- a/components/02-molecules/stat/yds-stat.twig +++ /dev/null @@ -1,50 +0,0 @@ -{# - # Available Props: - # - stat__presentation_style: basic, with-icon, icon-only - # - stat__font_style: numeric-oldstyle, normal - # - stat__has_icon: true, false - # - stat__icon_name: string - # - stat__alignment: left, center - # - # Available Variables: - # - stat__stat (required) - # - stat__content - #} - -{% set stat__base_class = 'stat' %} -{% set stat__presentation_style = stat__presentation_style|default('basic') %} -{% set stat__font_style = stat__font_style|default('numeric-oldstyle') %} - -{# If stat__attributes is not defined, set it to an empty object by default #} -{% set stat__attributes = stat__attributes|default({}) %} - -{% set stat__attributes = stat__attributes|merge({ - 'data-stat-style': stat__presentation_style, - 'data-stat-font-style': stat__font_style, - 'data-stat-has-icon': stat__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': stat__alignment|default('center'), - 'data-component-theme': stat__theme|default('one'), - class: bem(stat__base_class, stat__modifiers), -}) %} - -
  • -
    - {% if stat__has_icon == 'true' %} - {% block stat__icon %} -
    - {% include "@atoms/images/icons/_yds-icon.twig" with { - icon__name: stat__icon_name|default('sack-dollar-solid'), - icon__base_class: 'stat-icon', - icon__blockname: stat__base_class, - } %} -
    - {% endblock %} - {% endif %} -
    - {{ stat__stat }} -
    -
    - {{ stat__content }} -
    -
    -
    • diff --git a/components/03-organisms/stats/_yds-stats.scss b/components/03-organisms/infographic-group/_yds-infographic-group.scss similarity index 72% rename from components/03-organisms/stats/_yds-stats.scss rename to components/03-organisms/infographic-group/_yds-infographic-group.scss index 81b64d44a..ece182a1a 100644 --- a/components/03-organisms/stats/_yds-stats.scss +++ b/components/03-organisms/infographic-group/_yds-infographic-group.scss @@ -3,10 +3,13 @@ @use '../../01-atoms/atoms'; @use '../grid-mixins' as grid; -$global-stats-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); +$global-infographic-group-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$infographic-group-component-themes: map.deep-get( + tokens.$tokens, + 'component-themes' +); -.stats { +.infographic__group { @include tokens.spacing-page-section($banner-spacing: true); padding-block: var(--size-spacing-11); @@ -15,7 +18,7 @@ $stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $stats-component-themes { + @each $theme, $value in $infographic-group-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -26,11 +29,11 @@ $stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-slot-six: var(--component-themes-#{$theme}-slot-six); --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-stat-theme: var(--color-slot-one); - --color-stat-content: var(--color-slot-eight); + --color-infographic-theme: var(--color-slot-one); + --color-infographic-content: var(--color-slot-eight); - background-color: var(--color-stat-theme); - color: var(--color-stat-content); + background-color: var(--color-infographic-theme); + color: var(--color-infographic-content); } } @@ -38,7 +41,7 @@ $stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // This establishes `--color-slot-` variables name-spaced to the selector // in which it is used. We can map component-level variables to global-level // `--color-slot-` variables. - @each $globalTheme, $value in $global-stats-themes { + @each $globalTheme, $value in $global-infographic-group-themes { [data-global-theme='#{$globalTheme}'] & { --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); @@ -60,31 +63,31 @@ $stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component theme overrides: set specific component themes overrides /// define component name spaced variables and map them to global theme slots. &[data-component-theme='one'] { - --color-stat-theme: var(--color-slot-one); - --color-stat-content: var(--color-slot-eight); + --color-infographic-theme: var(--color-slot-one); + --color-infographic-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); } &[data-component-theme='two'] { - --color-stat-theme: var(--color-slot-four); - --color-stat-content: var(--color-slot-seven); + --color-infographic-theme: var(--color-slot-four); + --color-infographic-content: var(--color-slot-seven); } &[data-component-theme='three'] { - --color-stat-theme: var(--color-slot-five); - --color-stat-content: var(--color-slot-eight); + --color-infographic-theme: var(--color-slot-five); + --color-infographic-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); } } -.stats__inner { +.infographic__group__inner { width: 100%; max-width: var(--component-width); } -.stats__stats { +.infographic__group__wrap { @include grid.base; // position relative added to use z-index and make sure the image is behind the content @@ -108,14 +111,14 @@ $stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } } -.stats__image { +.infographic__group__image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-blend-mode: multiply; - background-color: var(--color-stat-theme); + background-color: var(--color-infographic-theme); opacity: 0.15; img { @@ -125,30 +128,30 @@ $stats-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } } -.stats__content-wrap { +.infographic__group__content-wrap { position: relative; z-index: 1; margin-bottom: var(--size-spacing-8); } -.stats__heading { +.infographic__group__heading { @include tokens.h2-yale-new; - color: var(--color-stat-content); + color: var(--color-infographic-content); } -.stats__content { +.infographic__group__content { @include tokens.body-default; - color: var(--color-stat-content); + color: var(--color-infographic-content); } -.stats__cta { +.infographic__group__cta { @include atoms.plain-link; - color: var(--color-stat-content); + color: var(--color-infographic-content); &:hover { - color: var(--color-stat-content); + color: var(--color-infographic-content); } } diff --git a/components/03-organisms/stats/stats.stories.js b/components/03-organisms/infographic-group/infographic-group.stories.js similarity index 58% rename from components/03-organisms/stats/stats.stories.js rename to components/03-organisms/infographic-group/infographic-group.stories.js index 4ddc39c38..5a8eac77a 100644 --- a/components/03-organisms/stats/stats.stories.js +++ b/components/03-organisms/infographic-group/infographic-group.stories.js @@ -2,11 +2,11 @@ import tokens from '@yalesites-org/tokens/build/json/tokens.json'; // get global themes as `label` : `key` values to pass into options as array. import getGlobalThemes from '../../00-tokens/colors/color-global-themes'; -// stats twig -import statsTwig from './yds-stats.twig'; +// infographic__group twig +import infographicGroupTwig from './yds-infographic-group.twig'; // Stat default data -import statsData from './stats.yml'; +import infographicGroupData from './infographic-group.yml'; // Image atom component - generic images for demo import imageData from '../../01-atoms/images/image/image.yml'; @@ -18,7 +18,7 @@ const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); * Storybook Definition. */ export default { - title: 'Organisms/Stats', + title: 'Organisms/Infographic Group', parameters: { layout: 'fullscreen', }, @@ -35,28 +35,28 @@ export default { type: 'select', defaultValue: 'one', }, - statsHeading: { - name: 'Stats Heading', + infographicGroupHeading: { + name: 'Infographic Group Heading', type: 'string', - defaultValue: statsData.stats__heading, + defaultValue: infographicGroupData.infographic__group__heading, }, - statsContent: { - name: 'Stats Content', + infographicGroupContent: { + name: 'Infographic Group Content', type: 'string', - defaultValue: statsData.stats__content, + defaultValue: infographicGroupData.infographic__group__content, }, - statsLink: { - name: 'Stats Link', + infographicGroupLink: { + name: 'Infographic Group Link', type: 'string', - defaultValue: statsData.stats__link__content, + defaultValue: infographicGroupData.infographic__group__link__content, }, image: { name: 'With image', type: 'boolean', defaultValue: true, }, - statsIcons: { - name: 'Stats Icons', + infographicGroupIcons: { + name: 'Infographic Group Icons', type: 'boolean', defaultValue: false, }, @@ -81,10 +81,10 @@ export default { }, }; -export const Stats = ({ - statsHeading, - statsContent, - statsIcons, +export const InfographicGroup = ({ + infographicGroupHeading, + infographicGroupContent, + infographicGroupIcons, globalTheme, presentationStyle, fontStyle, @@ -94,17 +94,17 @@ export const Stats = ({ }) => { return `
    - ${statsTwig({ + ${infographicGroupTwig({ site_global__theme: globalTheme, - stats__heading: statsHeading, - stats__content: statsContent, - stats__has_icon: statsIcons ? 'true' : 'false', - stats__alignment: alignment, - stats__presentation_style: presentationStyle, - stats__font_style: fontStyle, - stats__theme: themeColor, - stats__bg_image: image, - ...statsData, + infographic__group__heading: infographicGroupHeading, + infographic__group__content: infographicGroupContent, + infographic__group__has_icon: infographicGroupIcons ? 'true' : 'false', + infographic__group__alignment: alignment, + infographic__group__presentation_style: presentationStyle, + infographic__group__font_style: fontStyle, + infographic__group__theme: themeColor, + infographic__group__bg_image: image, + ...infographicGroupData, ...imageData.responsive_images['16x9'], })}
    diff --git a/components/03-organisms/infographic-group/infographic-group.yml b/components/03-organisms/infographic-group/infographic-group.yml new file mode 100644 index 000000000..3f5f6e008 --- /dev/null +++ b/components/03-organisms/infographic-group/infographic-group.yml @@ -0,0 +1,17 @@ +infographic__group__heading: 'Infographic Group' +infographic__group__content: 'This is a group of infographics' +infographic__group__link__content: 'This is a link' +infographic__group__link__url: 'https://www.bing.com' +infographic__group: + - infographic__group__stat: '$52,300' + infographic__group__content: 'Card 1 content goes here.' + - infographic__group__stat: '$100,000' + infographic__group__content: 'Card 2 content goes here.' + - infographic__group__stat: '150%' + infographic__group__content: 'Card 3 content goes here.' + - infographic__group__stat: '200%' + infographic__group__content: 'Card 4 content goes here.' + - infographic__group__stat: '$3,000' + infographic__group__content: 'Card 5 content goes here.' + - infographic__group__stat: '$25,200' + infographic__group__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/infographic-group/yds-infographic-group.twig b/components/03-organisms/infographic-group/yds-infographic-group.twig new file mode 100644 index 000000000..3dfe8a887 --- /dev/null +++ b/components/03-organisms/infographic-group/yds-infographic-group.twig @@ -0,0 +1,86 @@ +{# + # Available Variables: + # - infographic__group__heading + # - infographic__group__bg_image: (boolean) false by default + + # Available Blocks: + # - infographic__group__cards + #} + +{% set infographic__group__base_class = 'infographic__group' %} + +{% set infographic__group__width = infographic__group__width|default('site') %} + +{% if infographic__collection__type %} + {% set infographic__group__attributes = infographic__group__attributes|merge({ + 'data-stat-collection-type': infographic__collection__type, + }) %} +{% endif %} + +{% set infographic__group__attributes = { + 'data-component-width': infographic__group__width, + 'data-stat-style': infographic__group__presentation_style|default('basic'), + 'data-stat-font-style': infographic__group__font_style|default('normal'), + 'data-stat-has-icon': infographic__group__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': infographic__group__alignment|default('center'), + 'data-component-theme': infographic__group__theme|default('one'), + 'class': bem(infographic__group__base_class), +} %} + +
    + {% block prefix_suffix %} + {% endblock %} +
    + {% if infographic__group__heading is not empty or infographic__group__content is not empty or infographic__group__link__url is not empty %} +
    + {% if infographic__group__heading is not empty %} + {% include "@atoms/typography/headings/yds-heading.twig" with { + heading__level: '2', + heading__blockname: infographic__group__base_class, + heading: infographic__group__heading, + } %} + {% endif %} + {% if infographic__group__content is not empty %} + {% include "@atoms/typography/text/yds-text.twig" with { + text__blockname: infographic__group__base_class, + text__content: infographic__group__content, + text__base_class: 'content', + } %} + {% endif %} + {% if infographic__group__link__url %} + {% include "@atoms/controls/cta/yds-cta.twig" with { + cta__content: infographic__group__link__content|default(infographic__group__link__content), + cta__href: infographic__group__link__url|default(infographic__group__link__url), + cta__blockname: infographic__group__base_class, + cta__style: 'outline', + } %} + {% endif %} +
    + {% endif %} +
      + {% block infographic__group__items %} + {% for stat in infographic__group %} + {# Set stat attributes based on infographic__group attributes so all stat items within that infographic__group group are consistent #} + {# infographic__theme: 'default' is set to default as the theme is set on the infographic__group component, we don't want the individual stat to have a bg color #} + {% include "@molecules/infographic/yds-infographic.twig" with { + infographic__stat: stat.infographic__group__stat, + infographic__content: stat.infographic__group__content, + infographic__has_icon: infographic__group__has_icon, + infographic__font_style: infographic__group__font_style, + infographic__alignment: infographic__group__alignment, + infographic__presentation_style: infographic__group__presentation_style, + infographic__theme: 'default', + } + %} + {% endfor %} + {% endblock %} +
    + {% if infographic__group__bg_image %} +
    + {% block infographic__group__image %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endblock %} +
    + {% endif %} +
    +
    diff --git a/components/03-organisms/organisms.scss b/components/03-organisms/organisms.scss index d0c2182e3..d2b193736 100644 --- a/components/03-organisms/organisms.scss +++ b/components/03-organisms/organisms.scss @@ -10,4 +10,4 @@ @forward './menu/utility-nav/yds-utility-nav'; @forward './site-footer/yds-site-footer'; @forward './site-header/yds-site-header'; -@forward './stats/yds-stats'; +@forward './infographic-group/yds-infographic-group'; diff --git a/components/03-organisms/stats/stats.yml b/components/03-organisms/stats/stats.yml deleted file mode 100644 index bf4b33841..000000000 --- a/components/03-organisms/stats/stats.yml +++ /dev/null @@ -1,17 +0,0 @@ -stats__heading: 'Stats' -stats__content: 'This is a group of Stats' -stats__link__content: 'This is a link' -stats__link__url: 'https://www.bing.com' -stats: - - stat__stat: '$52,300' - stat__content: 'Card 1 content goes here.' - - stat__stat: '$100,000' - stat__content: 'Card 2 content goes here.' - - stat__stat: '150%' - stat__content: 'Card 3 content goes here.' - - stat__stat: '200%' - stat__content: 'Card 4 content goes here.' - - stat__stat: '$3,000' - stat__content: 'Card 5 content goes here.' - - stat__stat: '$25,200' - stat__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/stats/yds-stats.twig b/components/03-organisms/stats/yds-stats.twig deleted file mode 100644 index 2a99fb935..000000000 --- a/components/03-organisms/stats/yds-stats.twig +++ /dev/null @@ -1,86 +0,0 @@ -{# - # Available Variables: - # - stats__heading - # - stats__bg_image: (boolean) false by default - - # Available Blocks: - # - stats__cards - #} - -{% set stats__base_class = 'stats' %} - -{% set stats__width = stats__width|default('site') %} - -{% if stat__collection__type %} - {% set stats__attributes = stats__attributes|merge({ - 'data-stat-collection-type': stat__collection__type, - }) %} -{% endif %} - -{% set stats__attributes = { - 'data-component-width': stats__width, - 'data-stat-style': stats__presentation_style|default('basic'), - 'data-stat-font-style': stats__font_style|default('normal'), - 'data-stat-has-icon': stats__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': stats__alignment|default('center'), - 'data-component-theme': stats__theme|default('one'), - 'class': bem(stats__base_class), -} %} - -
    - {% block prefix_suffix %} - {% endblock %} -
    - {% if stats__heading is not empty or stats__content is not empty or stats__link__url is not empty %} -
    - {% if stats__heading is not empty %} - {% include "@atoms/typography/headings/yds-heading.twig" with { - heading__level: '2', - heading__blockname: stats__base_class, - heading: stats__heading, - } %} - {% endif %} - {% if stats__content is not empty %} - {% include "@atoms/typography/text/yds-text.twig" with { - text__blockname: stats__base_class, - text__content: stats__content, - text__base_class: 'content', - } %} - {% endif %} - {% if stats__link__url %} - {% include "@atoms/controls/cta/yds-cta.twig" with { - cta__content: stats__link__content|default(stats__link__content), - cta__href: stats__link__url|default(stats__link__url), - cta__blockname: stats__base_class, - cta__style: 'outline', - } %} - {% endif %} -
    - {% endif %} -
      - {% block stats__items %} - {% for stat in stats %} - {# Set stat attributes based on stats attributes so all stat items within that stats group are consistent #} - {# stat__theme: 'default' is set to default as the theme is set on the stats component, we don't want the individual stat to have a bg color #} - {% include "@molecules/stat/yds-stat.twig" with { - stat__stat: stat.stat__stat, - stat__content: stat.stat__content, - stat__has_icon: stats__has_icon, - stat__font_style: stats__font_style, - stat__alignment: stats__alignment, - stat__presentation_style: stats__presentation_style, - stat__theme: 'default', - } - %} - {% endfor %} - {% endblock %} -
    - {% if stats__bg_image %} -
    - {% block stats__image %} - {% include "@atoms/images/image/_responsive-image.twig" %} - {% endblock %} -
    - {% endif %} -
    -
    From 7086b6dd579b09495d6fcb39f86430d15e1bde90 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 22 Mar 2024 10:19:04 -0500 Subject: [PATCH 02/16] feat(YSP-413): add initial stats-item component --- components/02-molecules/molecules.scss | 1 + .../stats-item/_yds-stats-item.scss | 111 ++++++++++++++++++ .../stats-item/stats-item.stories.js | 92 +++++++++++++++ .../02-molecules/stats-item/stats-item.yml | 2 + .../stats-item/yds-stats-item.twig | 49 ++++++++ 5 files changed, 255 insertions(+) create mode 100644 components/02-molecules/stats-item/_yds-stats-item.scss create mode 100644 components/02-molecules/stats-item/stats-item.stories.js create mode 100644 components/02-molecules/stats-item/stats-item.yml create mode 100644 components/02-molecules/stats-item/yds-stats-item.twig diff --git a/components/02-molecules/molecules.scss b/components/02-molecules/molecules.scss index 3036a3c22..8b97e5608 100644 --- a/components/02-molecules/molecules.scss +++ b/components/02-molecules/molecules.scss @@ -30,3 +30,4 @@ @forward './standalone-quote/yds-standalone-quote'; @forward './content-spotlight-portrait/yds-content-spotlight-portrait'; @forward './infographic/yds-infographic'; +@forward './stats-item/yds-stats-item'; diff --git a/components/02-molecules/stats-item/_yds-stats-item.scss b/components/02-molecules/stats-item/_yds-stats-item.scss new file mode 100644 index 000000000..7c79d3fca --- /dev/null +++ b/components/02-molecules/stats-item/_yds-stats-item.scss @@ -0,0 +1,111 @@ +@use '../../00-tokens/tokens'; +@use '../../00-tokens/functions/map'; + +$global-stats-item-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); + +.stats__item { + display: flex; + flex-flow: column nowrap; + align-items: center; + width: 100%; + + [data-stats-item-collection-type='single'] & { + max-width: 30%; + } + + // Component themes defaults: iterate over each component theme to establish + // default variables. + @each $theme, $value in $stats-item-component-themes { + &[data-component-theme='#{$theme}'] { + // prettier-ignore + --color-slot-one: var(--component-themes-#{$theme}-slot-one); + --color-slot-two: var(--component-themes-#{$theme}-slot-two); + --color-slot-three: var(--component-themes-#{$theme}-slot-three); + --color-slot-four: var(--component-themes-#{$theme}-slot-four); + --color-slot-five: var(--component-themes-#{$theme}-slot-five); + --color-slot-six: var(--component-themes-#{$theme}-slot-six); + --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); + --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); + --color-stats-item-theme: var(--color-slot-one); + --color-stats-item-content: var(--color-slot-eight); + + background-color: var(--color-stats-item-theme); + color: var(--color-stats-item-content); + } + } + + // Global themes: set color slots for each theme + // This establishes `--color-slot-` variables name-spaced to the selector + // in which it is used. We can map component-level variables to global-level + // `--color-slot-` variables. + @each $globalTheme, $value in $global-stats-item-themes { + [data-global-theme='#{$globalTheme}'] & { + --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); + --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); + --color-slot-three: var( + --global-themes-#{$globalTheme}-colors-slot-three + ); + --color-slot-four: var(--global-themes-#{$globalTheme}-colors-slot-four); + --color-slot-five: var(--global-themes-#{$globalTheme}-colors-slot-five); + --color-slot-six: var(--global-themes-#{$globalTheme}-colors-slot-six); + --color-slot-seven: var( + --global-themes-#{$globalTheme}-colors-slot-seven + ); + --color-slot-eight: var( + --global-themes-#{$globalTheme}-colors-slot-eight + ); + } + } + + // Component theme overrides: set specific component themes overrides + /// define component name spaced variables and map them to global theme slots. + &[data-component-theme='one'] { + --color-stats-item-theme: var(--color-slot-one); + --color-stats-item-content: var(--color-slot-eight); + } + + &[data-component-theme='two'] { + --color-stats-item-theme: var(--color-slot-two); + --color-stats-item-content: var(--color-slot-eight); + } + + &[data-component-theme='three'] { + --color-stats-item-theme: var(--color-slot-three); + --color-stats-item-content: var(--color-slot-seven); + } + + &__inner { + display: flex; + flex-flow: column nowrap; + padding: var(--size-spacing-8); + height: 100%; + align-items: flex-start; + + [data-component-alignment='right'] & { + align-items: flex-end; + } + } +} + +.stats__item__number { + @include tokens.h3-yale-new; + + width: 100%; + position: relative; +} + +.stats__item__icon { + margin-bottom: var(--size-spacing-2); +} + +// svg +.stats__item__stats__item-icon { + max-width: var(--size-spacing-9); // max-width 48px + max-height: var(--size-spacing-9); // max-height 48px + fill: var(--color-stats-item-content); +} + +.stats__item__content { + @include tokens.body-default; +} diff --git a/components/02-molecules/stats-item/stats-item.stories.js b/components/02-molecules/stats-item/stats-item.stories.js new file mode 100644 index 000000000..6438c0667 --- /dev/null +++ b/components/02-molecules/stats-item/stats-item.stories.js @@ -0,0 +1,92 @@ +import statsItemTwig from './yds-stats-item.twig'; + +import statsItemData from './stats-item.yml'; + +/** + * Storybook Definition. + */ +export default { + title: 'Molecules/Stats Item', + argTypes: { + number: { + name: 'Number', + type: 'string', + defaultValue: statsItemData.stats__item__number, + }, + content: { + name: 'Content', + type: 'string', + defaultValue: statsItemData.stats__item__content, + }, + presentationStyle: { + name: 'Presentation Style', + options: ['basic', 'icon-only'], + type: 'select', + defaultValue: 'basic', + }, + alignment: { + name: 'Alignment', + options: ['left', 'right'], + type: 'select', + defaultValue: 'left', + }, + themeColor: { + name: 'Component Theme (dial)', + options: ['one', 'two', 'three'], + type: 'select', + defaultValue: 'one', + }, + statsItemIcon: { + name: 'Stats Item Icon', + type: 'boolean', + defaultValue: false, + }, + }, +}; + +export const StatsItem = ({ + number, + content, + presentationStyle, + themeColor, + statsItemIcon, + alignment, +}) => ` + + +
    +

    Playground

    +

    Use the StoryBook controls to see the stats item below implement the available variations.

    +
      + ${statsItemTwig({ + stats__item__number: number, + stats__item__content: content, + stats__item__alignment: alignment, + stats__item__presentation_style: presentationStyle, + stats__item__theme: themeColor, + stats__item__has_icon: statsItemIcon ? 'true' : 'false', + })} +
    +
    +`; diff --git a/components/02-molecules/stats-item/stats-item.yml b/components/02-molecules/stats-item/stats-item.yml new file mode 100644 index 000000000..6a39360e2 --- /dev/null +++ b/components/02-molecules/stats-item/stats-item.yml @@ -0,0 +1,2 @@ +stats__item__number: '01' +stats__item__content: This is a new component! diff --git a/components/02-molecules/stats-item/yds-stats-item.twig b/components/02-molecules/stats-item/yds-stats-item.twig new file mode 100644 index 000000000..7465998c7 --- /dev/null +++ b/components/02-molecules/stats-item/yds-stats-item.twig @@ -0,0 +1,49 @@ +{# + # Available Props: + # - stats__item__presentation_style: basic, with-icon, icon-only + # - stats__item__font_style: numeric-oldstyle, normal + # - stats__item__has_icon: true, false + # - stats__item__icon_name: string + # - stats__item__alignment: left, center + # + # Available Variables: + # - stats__item__stats__item (required) + # - stats__item__content + #} + +{% set stats__item__base_class = 'stats__item' %} +{% set stats__item__presentation_style = stats__item__presentation_style|default('basic') %} +{% set stats__item__font_style = stats__item__font_style|default('numeric-oldstyle') %} + +{# If stats__item__attributes is not defined, set it to an empty object by default #} +{% set stats__item__attributes = stats__item__attributes|default({}) %} + +{% set stats__item__attributes = stats__item__attributes|merge({ + 'data-stats__item-style': stats__item__presentation_style, + 'data-stats__item-has-icon': stats__item__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': stats__item__alignment|default('left'), + 'data-component-theme': stats__item__theme|default('one'), + class: bem(stats__item__base_class, stats__item__modifiers), +}) %} + +
  • +
    + {% if stats__item__has_icon == 'true' %} + {% block stats__item__icon %} +
    + {% include "@atoms/images/icons/_yds-icon.twig" with { + icon__name: stats__item__icon_name|default('sack-dollar-solid'), + icon__base_class: 'stats__item-icon', + icon__blockname: stats__item__base_class, + } %} +
    + {% endblock %} + {% endif %} +
    + {{ stats__item__number }} +
    +
    + {{ stats__item__content }} +
    +
    +
    • From f38443a0c492c03bdb61e15312ef36388035031d Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 22 Mar 2024 10:44:16 -0500 Subject: [PATCH 03/16] feat(YSP-413): add initial stats component, add bg-image option to stat-item --- .../stats-item/_yds-stats-item.scss | 29 +++++ .../stats-item/stats-item.stories.js | 15 ++- .../stats-item/yds-stats-item.twig | 7 ++ components/03-organisms/stats/_yds-stats.scss | 109 ++++++++++++++++++ .../03-organisms/stats/stats.stories.js | 92 +++++++++++++++ components/03-organisms/stats/stats.yml | 17 +++ components/03-organisms/stats/yds-stats.twig | 86 ++++++++++++++ 7 files changed, 353 insertions(+), 2 deletions(-) create mode 100644 components/03-organisms/stats/_yds-stats.scss create mode 100644 components/03-organisms/stats/stats.stories.js create mode 100644 components/03-organisms/stats/stats.yml create mode 100644 components/03-organisms/stats/yds-stats.twig diff --git a/components/02-molecules/stats-item/_yds-stats-item.scss b/components/02-molecules/stats-item/_yds-stats-item.scss index 7c79d3fca..3d08eb194 100644 --- a/components/02-molecules/stats-item/_yds-stats-item.scss +++ b/components/02-molecules/stats-item/_yds-stats-item.scss @@ -8,7 +8,9 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); display: flex; flex-flow: column nowrap; align-items: center; + position: relative; width: 100%; + z-index: 0; [data-stats-item-collection-type='single'] & { max-width: 30%; @@ -109,3 +111,30 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); .stats__item__content { @include tokens.body-default; } + +.stats__item__image { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + z-index: -1; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--color-stats-item-theme); + opacity: 0.85; + } +} diff --git a/components/02-molecules/stats-item/stats-item.stories.js b/components/02-molecules/stats-item/stats-item.stories.js index 6438c0667..2baca9d33 100644 --- a/components/02-molecules/stats-item/stats-item.stories.js +++ b/components/02-molecules/stats-item/stats-item.stories.js @@ -2,6 +2,9 @@ import statsItemTwig from './yds-stats-item.twig'; import statsItemData from './stats-item.yml'; +// Image atom component - generic images for demo +import imageData from '../../01-atoms/images/image/image.yml'; + /** * Storybook Definition. */ @@ -41,6 +44,11 @@ export default { type: 'boolean', defaultValue: false, }, + image: { + name: 'With image', + type: 'boolean', + defaultValue: true, + }, }, }; @@ -51,9 +59,10 @@ export const StatsItem = ({ themeColor, statsItemIcon, alignment, + image, }) => ` -
      +
        ${statsItemTwig({ stats__item__number: statsItemData.stats__item__number, stats__item__content: statsItemData.stats__item__content, @@ -78,7 +87,7 @@ export const StatsItem = ({

        Playground

        Use the StoryBook controls to see the stats item below implement the available variations.

        -
          +
            ${statsItemTwig({ stats__item__number: number, stats__item__content: content, @@ -86,6 +95,8 @@ export const StatsItem = ({ stats__item__presentation_style: presentationStyle, stats__item__theme: themeColor, stats__item__has_icon: statsItemIcon ? 'true' : 'false', + stats__item__bg_image: image, + ...imageData.responsive_images['1x1'], })}
        diff --git a/components/02-molecules/stats-item/yds-stats-item.twig b/components/02-molecules/stats-item/yds-stats-item.twig index 7465998c7..8fdeb5f48 100644 --- a/components/02-molecules/stats-item/yds-stats-item.twig +++ b/components/02-molecules/stats-item/yds-stats-item.twig @@ -45,5 +45,12 @@
        {{ stats__item__content }}
        + {% if stats__item__bg_image %} +
        + {% block stats__item__image %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endblock %} +
        + {% endif %} diff --git a/components/03-organisms/stats/_yds-stats.scss b/components/03-organisms/stats/_yds-stats.scss new file mode 100644 index 000000000..b2042fc6e --- /dev/null +++ b/components/03-organisms/stats/_yds-stats.scss @@ -0,0 +1,109 @@ +@use '../../00-tokens/tokens'; +@use '../../00-tokens/functions/map'; +@use '../../01-atoms/atoms'; +@use '../grid-mixins' as grid; + +$global-stats-group-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$stats-group-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); + +.stats { + @include tokens.spacing-page-section($banner-spacing: true); + + padding-block: var(--size-spacing-11); + width: 100%; + position: relative; + + // Component themes defaults: iterate over each component theme to establish + // default variables. + @each $theme, $value in $stats-group-component-themes { + &[data-component-theme='#{$theme}'] { + // prettier-ignore + --color-slot-one: var(--component-themes-#{$theme}-slot-one); + --color-slot-two: var(--component-themes-#{$theme}-slot-two); + --color-slot-three: var(--component-themes-#{$theme}-slot-three); + --color-slot-four: var(--component-themes-#{$theme}-slot-four); + --color-slot-five: var(--component-themes-#{$theme}-slot-five); + --color-slot-six: var(--component-themes-#{$theme}-slot-six); + --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); + --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); + --color-stats-theme: var(--color-slot-one); + --color-stats-content: var(--color-slot-eight); + + background-color: var(--color-stats-theme); + color: var(--color-stats-content); + } + } + + // Global themes: set color slots for each theme + // This establishes `--color-slot-` variables name-spaced to the selector + // in which it is used. We can map component-level variables to global-level + // `--color-slot-` variables. + @each $globalTheme, $value in $global-stats-group-themes { + [data-global-theme='#{$globalTheme}'] & { + --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); + --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); + --color-slot-three: var( + --global-themes-#{$globalTheme}-colors-slot-three + ); + --color-slot-four: var(--global-themes-#{$globalTheme}-colors-slot-four); + --color-slot-five: var(--global-themes-#{$globalTheme}-colors-slot-five); + --color-slot-six: var(--global-themes-#{$globalTheme}-colors-slot-six); + --color-slot-seven: var( + --global-themes-#{$globalTheme}-colors-slot-seven + ); + --color-slot-eight: var( + --global-themes-#{$globalTheme}-colors-slot-eight + ); + } + } + + // Component theme overrides: set specific component themes overrides + /// define component name spaced variables and map them to global theme slots. + &[data-component-theme='one'] { + --color-stats-theme: var(--color-slot-one); + --color-stats-content: var(--color-slot-eight); + --color-link-visited-base: var(--color-link-visited-light); + --color-link-visited-hover: var(--color-link-visited-light-hover); + } + + &[data-component-theme='two'] { + --color-stats-theme: var(--color-slot-four); + --color-stats-content: var(--color-slot-seven); + } + + &[data-component-theme='three'] { + --color-stats-theme: var(--color-slot-five); + --color-stats-content: var(--color-slot-eight); + --color-link-visited-base: var(--color-link-visited-light); + --color-link-visited-hover: var(--color-link-visited-light-hover); + } +} + +.stats__inner { + width: 100%; + max-width: var(--component-width); +} + +.stats__wrap { + @include grid.base; + + // position relative added to use z-index and make sure the image is behind the content + position: relative; + z-index: 1; + + --grid-gutter: var(--spacing-component-gutter-secondary); + + > * { + @media (min-width: tokens.$break-s) { + flex: 0 1 calc(50% - calc(var(--grid-gutter) * 2 / 3)); + } + + @media (min-width: tokens.$break-m) { + flex: 0 1 calc(33.33% - calc(var(--grid-gutter) * 2 / 3)); + } + + @media (min-width: tokens.$break-l) { + flex: 0 1 calc(25% - calc(var(--grid-gutter) * 3 / 4)); + } + } +} diff --git a/components/03-organisms/stats/stats.stories.js b/components/03-organisms/stats/stats.stories.js new file mode 100644 index 000000000..1ed618fb2 --- /dev/null +++ b/components/03-organisms/stats/stats.stories.js @@ -0,0 +1,92 @@ +import tokens from '@yalesites-org/tokens/build/json/tokens.json'; +// get global themes as `label` : `key` values to pass into options as array. +import getGlobalThemes from '../../00-tokens/colors/color-global-themes'; + +// stats twig +import statsTwig from './yds-stats.twig'; + +// Stat default data +import statsData from './stats.yml'; + +// Image atom component - generic images for demo +import imageData from '../../01-atoms/images/image/image.yml'; + +// Get global theme options +const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); + +/** + * Storybook Definition. + */ +export default { + title: 'Organisms/Infographic Group', + parameters: { + layout: 'fullscreen', + }, + argTypes: { + globalTheme: { + name: 'Global Theme (lever)', + options: siteGlobalThemeOptions, + type: 'select', + defaultValue: 'one', + }, + themeColor: { + name: 'Component Theme (dial)', + options: ['one', 'two', 'three'], + type: 'select', + defaultValue: 'one', + }, + statsIcons: { + name: 'Infographic Group Icons', + type: 'boolean', + defaultValue: false, + }, + presentationStyle: { + name: 'Presentation Style', + options: ['basic', 'icon-only'], + type: 'select', + defaultValue: 'basic', + }, + fontStyle: { + name: 'Font Style', + options: ['normal', 'numeric-oldstyle'], + type: 'select', + defaultValue: 'normal', + }, + alignment: { + name: 'Alignment', + options: ['left', 'center'], + type: 'select', + defaultValue: 'left', + }, + }, +}; + +export const InfographicGroup = ({ + statsHeading, + statsContent, + statsIcons, + globalTheme, + presentationStyle, + fontStyle, + alignment, + themeColor, + image, +}) => { + return ` +
        + ${statsTwig({ + site_global__theme: globalTheme, + stats__heading: statsHeading, + stats__content: statsContent, + stats__has_icon: statsIcons ? 'true' : 'false', + stats__alignment: alignment, + stats__presentation_style: presentationStyle, + stats__font_style: fontStyle, + stats__theme: themeColor, + stats__bg_image: image, + ...statsData, + ...imageData.responsive_images['16x9'], + })} +
        + `; +}; diff --git a/components/03-organisms/stats/stats.yml b/components/03-organisms/stats/stats.yml new file mode 100644 index 000000000..3f5f6e008 --- /dev/null +++ b/components/03-organisms/stats/stats.yml @@ -0,0 +1,17 @@ +infographic__group__heading: 'Infographic Group' +infographic__group__content: 'This is a group of infographics' +infographic__group__link__content: 'This is a link' +infographic__group__link__url: 'https://www.bing.com' +infographic__group: + - infographic__group__stat: '$52,300' + infographic__group__content: 'Card 1 content goes here.' + - infographic__group__stat: '$100,000' + infographic__group__content: 'Card 2 content goes here.' + - infographic__group__stat: '150%' + infographic__group__content: 'Card 3 content goes here.' + - infographic__group__stat: '200%' + infographic__group__content: 'Card 4 content goes here.' + - infographic__group__stat: '$3,000' + infographic__group__content: 'Card 5 content goes here.' + - infographic__group__stat: '$25,200' + infographic__group__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/stats/yds-stats.twig b/components/03-organisms/stats/yds-stats.twig new file mode 100644 index 000000000..3dfe8a887 --- /dev/null +++ b/components/03-organisms/stats/yds-stats.twig @@ -0,0 +1,86 @@ +{# + # Available Variables: + # - infographic__group__heading + # - infographic__group__bg_image: (boolean) false by default + + # Available Blocks: + # - infographic__group__cards + #} + +{% set infographic__group__base_class = 'infographic__group' %} + +{% set infographic__group__width = infographic__group__width|default('site') %} + +{% if infographic__collection__type %} + {% set infographic__group__attributes = infographic__group__attributes|merge({ + 'data-stat-collection-type': infographic__collection__type, + }) %} +{% endif %} + +{% set infographic__group__attributes = { + 'data-component-width': infographic__group__width, + 'data-stat-style': infographic__group__presentation_style|default('basic'), + 'data-stat-font-style': infographic__group__font_style|default('normal'), + 'data-stat-has-icon': infographic__group__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': infographic__group__alignment|default('center'), + 'data-component-theme': infographic__group__theme|default('one'), + 'class': bem(infographic__group__base_class), +} %} + +
        + {% block prefix_suffix %} + {% endblock %} +
        + {% if infographic__group__heading is not empty or infographic__group__content is not empty or infographic__group__link__url is not empty %} +
        + {% if infographic__group__heading is not empty %} + {% include "@atoms/typography/headings/yds-heading.twig" with { + heading__level: '2', + heading__blockname: infographic__group__base_class, + heading: infographic__group__heading, + } %} + {% endif %} + {% if infographic__group__content is not empty %} + {% include "@atoms/typography/text/yds-text.twig" with { + text__blockname: infographic__group__base_class, + text__content: infographic__group__content, + text__base_class: 'content', + } %} + {% endif %} + {% if infographic__group__link__url %} + {% include "@atoms/controls/cta/yds-cta.twig" with { + cta__content: infographic__group__link__content|default(infographic__group__link__content), + cta__href: infographic__group__link__url|default(infographic__group__link__url), + cta__blockname: infographic__group__base_class, + cta__style: 'outline', + } %} + {% endif %} +
        + {% endif %} +
          + {% block infographic__group__items %} + {% for stat in infographic__group %} + {# Set stat attributes based on infographic__group attributes so all stat items within that infographic__group group are consistent #} + {# infographic__theme: 'default' is set to default as the theme is set on the infographic__group component, we don't want the individual stat to have a bg color #} + {% include "@molecules/infographic/yds-infographic.twig" with { + infographic__stat: stat.infographic__group__stat, + infographic__content: stat.infographic__group__content, + infographic__has_icon: infographic__group__has_icon, + infographic__font_style: infographic__group__font_style, + infographic__alignment: infographic__group__alignment, + infographic__presentation_style: infographic__group__presentation_style, + infographic__theme: 'default', + } + %} + {% endfor %} + {% endblock %} +
        + {% if infographic__group__bg_image %} +
        + {% block infographic__group__image %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endblock %} +
        + {% endif %} +
        +
        From 95de87e0fe05062a48b2fa9ad82736dc5508a94d Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 22 Mar 2024 11:57:55 -0500 Subject: [PATCH 04/16] feat(YSP-413): wip - theming stats --- components/03-organisms/organisms.scss | 1 + .../03-organisms/stats/stats.stories.js | 14 +-- components/03-organisms/stats/stats.yml | 30 +++--- components/03-organisms/stats/yds-stats.twig | 93 +++++++------------ 4 files changed, 51 insertions(+), 87 deletions(-) diff --git a/components/03-organisms/organisms.scss b/components/03-organisms/organisms.scss index d2b193736..0ebf2baf7 100644 --- a/components/03-organisms/organisms.scss +++ b/components/03-organisms/organisms.scss @@ -11,3 +11,4 @@ @forward './site-footer/yds-site-footer'; @forward './site-header/yds-site-header'; @forward './infographic-group/yds-infographic-group'; +@forward './stats/yds-stats'; diff --git a/components/03-organisms/stats/stats.stories.js b/components/03-organisms/stats/stats.stories.js index 1ed618fb2..be95a6639 100644 --- a/components/03-organisms/stats/stats.stories.js +++ b/components/03-organisms/stats/stats.stories.js @@ -18,7 +18,7 @@ const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); * Storybook Definition. */ export default { - title: 'Organisms/Infographic Group', + title: 'Organisms/Stats', parameters: { layout: 'fullscreen', }, @@ -36,7 +36,7 @@ export default { defaultValue: 'one', }, statsIcons: { - name: 'Infographic Group Icons', + name: 'Stats Icons', type: 'boolean', defaultValue: false, }, @@ -54,20 +54,17 @@ export default { }, alignment: { name: 'Alignment', - options: ['left', 'center'], + options: ['left', 'right'], type: 'select', defaultValue: 'left', }, }, }; -export const InfographicGroup = ({ - statsHeading, - statsContent, +export const Stats = ({ statsIcons, globalTheme, presentationStyle, - fontStyle, alignment, themeColor, image, @@ -76,12 +73,9 @@ export const InfographicGroup = ({
        ${statsTwig({ site_global__theme: globalTheme, - stats__heading: statsHeading, - stats__content: statsContent, stats__has_icon: statsIcons ? 'true' : 'false', stats__alignment: alignment, stats__presentation_style: presentationStyle, - stats__font_style: fontStyle, stats__theme: themeColor, stats__bg_image: image, ...statsData, diff --git a/components/03-organisms/stats/stats.yml b/components/03-organisms/stats/stats.yml index 3f5f6e008..b7b8542aa 100644 --- a/components/03-organisms/stats/stats.yml +++ b/components/03-organisms/stats/stats.yml @@ -1,17 +1,13 @@ -infographic__group__heading: 'Infographic Group' -infographic__group__content: 'This is a group of infographics' -infographic__group__link__content: 'This is a link' -infographic__group__link__url: 'https://www.bing.com' -infographic__group: - - infographic__group__stat: '$52,300' - infographic__group__content: 'Card 1 content goes here.' - - infographic__group__stat: '$100,000' - infographic__group__content: 'Card 2 content goes here.' - - infographic__group__stat: '150%' - infographic__group__content: 'Card 3 content goes here.' - - infographic__group__stat: '200%' - infographic__group__content: 'Card 4 content goes here.' - - infographic__group__stat: '$3,000' - infographic__group__content: 'Card 5 content goes here.' - - infographic__group__stat: '$25,200' - infographic__group__content: 'Card 6 content goes here.' +stats: + - stats__item__number: '$52,300' + stats__item__content: 'Card 1 content goes here.' + - stats__item__number: '$100,000' + stats__item__content: 'Card 2 content goes here.' + - stats__item__number: '150%' + stats__item__content: 'Card 3 content goes here.' + - stats__item__number: '200%' + stats__item__content: 'Card 4 content goes here.' + - stats__item__number: '$3,000' + stats__item__content: 'Card 5 content goes here.' + - stats__item__number: '$25,200' + stats__item__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/stats/yds-stats.twig b/components/03-organisms/stats/yds-stats.twig index 3dfe8a887..9f87da43f 100644 --- a/components/03-organisms/stats/yds-stats.twig +++ b/components/03-organisms/stats/yds-stats.twig @@ -1,83 +1,56 @@ {# # Available Variables: - # - infographic__group__heading - # - infographic__group__bg_image: (boolean) false by default + # - stats__heading + # - stats__bg_image: (boolean) false by default # Available Blocks: - # - infographic__group__cards + # - stats__cards #} -{% set infographic__group__base_class = 'infographic__group' %} +{% set stats__base_class = 'stats' %} -{% set infographic__group__width = infographic__group__width|default('site') %} +{% set stats__width = stats__width|default('site') %} -{% if infographic__collection__type %} - {% set infographic__group__attributes = infographic__group__attributes|merge({ - 'data-stat-collection-type': infographic__collection__type, +{% if stats__collection__type %} + {% set stats__attributes = stats__attributes|merge({ + 'data-stat-collection-type': stats__collection__type, }) %} {% endif %} -{% set infographic__group__attributes = { - 'data-component-width': infographic__group__width, - 'data-stat-style': infographic__group__presentation_style|default('basic'), - 'data-stat-font-style': infographic__group__font_style|default('normal'), - 'data-stat-has-icon': infographic__group__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': infographic__group__alignment|default('center'), - 'data-component-theme': infographic__group__theme|default('one'), - 'class': bem(infographic__group__base_class), +{% set stats__attributes = { + 'data-component-width': stats__width, + 'data-stat-style': stats__presentation_style|default('basic'), + 'data-stat-font-style': stats__font_style|default('normal'), + 'data-stat-has-icon': stats__item__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': stats__alignment|default('center'), + 'data-component-theme': stats__theme|default('one'), + 'class': bem(stats__base_class), } %} -
        +
        {% block prefix_suffix %} {% endblock %} -
        - {% if infographic__group__heading is not empty or infographic__group__content is not empty or infographic__group__link__url is not empty %} -
        - {% if infographic__group__heading is not empty %} - {% include "@atoms/typography/headings/yds-heading.twig" with { - heading__level: '2', - heading__blockname: infographic__group__base_class, - heading: infographic__group__heading, - } %} - {% endif %} - {% if infographic__group__content is not empty %} - {% include "@atoms/typography/text/yds-text.twig" with { - text__blockname: infographic__group__base_class, - text__content: infographic__group__content, - text__base_class: 'content', - } %} - {% endif %} - {% if infographic__group__link__url %} - {% include "@atoms/controls/cta/yds-cta.twig" with { - cta__content: infographic__group__link__content|default(infographic__group__link__content), - cta__href: infographic__group__link__url|default(infographic__group__link__url), - cta__blockname: infographic__group__base_class, - cta__style: 'outline', - } %} - {% endif %} -
        - {% endif %} -
          - {% block infographic__group__items %} - {% for stat in infographic__group %} - {# Set stat attributes based on infographic__group attributes so all stat items within that infographic__group group are consistent #} - {# infographic__theme: 'default' is set to default as the theme is set on the infographic__group component, we don't want the individual stat to have a bg color #} - {% include "@molecules/infographic/yds-infographic.twig" with { - infographic__stat: stat.infographic__group__stat, - infographic__content: stat.infographic__group__content, - infographic__has_icon: infographic__group__has_icon, - infographic__font_style: infographic__group__font_style, - infographic__alignment: infographic__group__alignment, - infographic__presentation_style: infographic__group__presentation_style, - infographic__theme: 'default', +
          +
            + {% block stats__items %} + {% for stat in stats %} + {# Set stat attributes based on stats attributes so all stat items within that stats group are consistent #} + {# stats__theme: 'default' is set to default as the theme is set on the stats component, we don't want the individual stat to have a bg color #} + {% include "@molecules/stats-item/yds-stats-item.twig" with { + stats__item__number: stat.stats__item__number, + stats__item__content: stat.stats__item__content, + stats__item__has_icon: stats__item__has_icon, + stats__item__alignment: stats__alignment, + stats__item__presentation_style: stats__presentation_style, + stats__item__theme: 'default', } %} {% endfor %} {% endblock %}
          - {% if infographic__group__bg_image %} -
          - {% block infographic__group__image %} + {% if stats__bg_image %} +
          + {% block stats__image %} {% include "@atoms/images/image/_responsive-image.twig" %} {% endblock %}
          From 9d95c2fd09407fd734da5bd90a55832276f67e09 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 25 Mar 2024 14:23:38 -0500 Subject: [PATCH 05/16] feat(YSP-413): re-name stat-item to tile-item, stats to tiles, tile images working --- components/02-molecules/molecules.scss | 2 +- .../stats-item/stats-item.stories.js | 103 ----------------- .../02-molecules/stats-item/stats-item.yml | 2 - .../stats-item/yds-stats-item.twig | 56 --------- .../_yds-tile-item.scss} | 49 ++++---- .../tile-item/tile-item.stories.js | 98 ++++++++++++++++ .../02-molecules/tile-item/tile-item.yml | 2 + .../02-molecules/tile-item/yds-tile-item.twig | 56 +++++++++ components/03-organisms/organisms.scss | 2 +- components/03-organisms/stats/_yds-stats.scss | 109 ------------------ components/03-organisms/stats/stats.yml | 13 --- components/03-organisms/stats/yds-stats.twig | 59 ---------- components/03-organisms/tiles/_yds-tiles.scss | 89 ++++++++++++++ .../tiles.stories.js} | 60 +++++----- components/03-organisms/tiles/tiles.yml | 19 +++ components/03-organisms/tiles/yds-tiles.twig | 46 ++++++++ 16 files changed, 362 insertions(+), 403 deletions(-) delete mode 100644 components/02-molecules/stats-item/stats-item.stories.js delete mode 100644 components/02-molecules/stats-item/stats-item.yml delete mode 100644 components/02-molecules/stats-item/yds-stats-item.twig rename components/02-molecules/{stats-item/_yds-stats-item.scss => tile-item/_yds-tile-item.scss} (72%) create mode 100644 components/02-molecules/tile-item/tile-item.stories.js create mode 100644 components/02-molecules/tile-item/tile-item.yml create mode 100644 components/02-molecules/tile-item/yds-tile-item.twig delete mode 100644 components/03-organisms/stats/_yds-stats.scss delete mode 100644 components/03-organisms/stats/stats.yml delete mode 100644 components/03-organisms/stats/yds-stats.twig create mode 100644 components/03-organisms/tiles/_yds-tiles.scss rename components/03-organisms/{stats/stats.stories.js => tiles/tiles.stories.js} (59%) create mode 100644 components/03-organisms/tiles/tiles.yml create mode 100644 components/03-organisms/tiles/yds-tiles.twig diff --git a/components/02-molecules/molecules.scss b/components/02-molecules/molecules.scss index 8b97e5608..418199b0d 100644 --- a/components/02-molecules/molecules.scss +++ b/components/02-molecules/molecules.scss @@ -30,4 +30,4 @@ @forward './standalone-quote/yds-standalone-quote'; @forward './content-spotlight-portrait/yds-content-spotlight-portrait'; @forward './infographic/yds-infographic'; -@forward './stats-item/yds-stats-item'; +@forward './tile-item/yds-tile-item'; diff --git a/components/02-molecules/stats-item/stats-item.stories.js b/components/02-molecules/stats-item/stats-item.stories.js deleted file mode 100644 index 2baca9d33..000000000 --- a/components/02-molecules/stats-item/stats-item.stories.js +++ /dev/null @@ -1,103 +0,0 @@ -import statsItemTwig from './yds-stats-item.twig'; - -import statsItemData from './stats-item.yml'; - -// Image atom component - generic images for demo -import imageData from '../../01-atoms/images/image/image.yml'; - -/** - * Storybook Definition. - */ -export default { - title: 'Molecules/Stats Item', - argTypes: { - number: { - name: 'Number', - type: 'string', - defaultValue: statsItemData.stats__item__number, - }, - content: { - name: 'Content', - type: 'string', - defaultValue: statsItemData.stats__item__content, - }, - presentationStyle: { - name: 'Presentation Style', - options: ['basic', 'icon-only'], - type: 'select', - defaultValue: 'basic', - }, - alignment: { - name: 'Alignment', - options: ['left', 'right'], - type: 'select', - defaultValue: 'left', - }, - themeColor: { - name: 'Component Theme (dial)', - options: ['one', 'two', 'three'], - type: 'select', - defaultValue: 'one', - }, - statsItemIcon: { - name: 'Stats Item Icon', - type: 'boolean', - defaultValue: false, - }, - image: { - name: 'With image', - type: 'boolean', - defaultValue: true, - }, - }, -}; - -export const StatsItem = ({ - number, - content, - presentationStyle, - themeColor, - statsItemIcon, - alignment, - image, -}) => ` - -
            - ${statsItemTwig({ - stats__item__number: statsItemData.stats__item__number, - stats__item__content: statsItemData.stats__item__content, - stats__item__presentation_style: 'basic', - stats__item__has_icon: 'false', - stats__item__alignment: 'left', - })} - ${statsItemTwig({ - stats__item__number: statsItemData.stats__item__number, - stats__item__presentation_style: 'basic', - stats__item__has_icon: 'true', - stats__item__alignment: 'right', - })} - ${statsItemTwig({ - stats__item__number: statsItemData.stats__item__number, - stats__item__content: statsItemData.stats__item__content, - stats__item__presentation_style: 'basic', - stats__item__has_icon: 'false', - stats__item__alignment: 'left', - })} -
          -
          -

          Playground

          -

          Use the StoryBook controls to see the stats item below implement the available variations.

          -
            - ${statsItemTwig({ - stats__item__number: number, - stats__item__content: content, - stats__item__alignment: alignment, - stats__item__presentation_style: presentationStyle, - stats__item__theme: themeColor, - stats__item__has_icon: statsItemIcon ? 'true' : 'false', - stats__item__bg_image: image, - ...imageData.responsive_images['1x1'], - })} -
          -
          -`; diff --git a/components/02-molecules/stats-item/stats-item.yml b/components/02-molecules/stats-item/stats-item.yml deleted file mode 100644 index 6a39360e2..000000000 --- a/components/02-molecules/stats-item/stats-item.yml +++ /dev/null @@ -1,2 +0,0 @@ -stats__item__number: '01' -stats__item__content: This is a new component! diff --git a/components/02-molecules/stats-item/yds-stats-item.twig b/components/02-molecules/stats-item/yds-stats-item.twig deleted file mode 100644 index 8fdeb5f48..000000000 --- a/components/02-molecules/stats-item/yds-stats-item.twig +++ /dev/null @@ -1,56 +0,0 @@ -{# - # Available Props: - # - stats__item__presentation_style: basic, with-icon, icon-only - # - stats__item__font_style: numeric-oldstyle, normal - # - stats__item__has_icon: true, false - # - stats__item__icon_name: string - # - stats__item__alignment: left, center - # - # Available Variables: - # - stats__item__stats__item (required) - # - stats__item__content - #} - -{% set stats__item__base_class = 'stats__item' %} -{% set stats__item__presentation_style = stats__item__presentation_style|default('basic') %} -{% set stats__item__font_style = stats__item__font_style|default('numeric-oldstyle') %} - -{# If stats__item__attributes is not defined, set it to an empty object by default #} -{% set stats__item__attributes = stats__item__attributes|default({}) %} - -{% set stats__item__attributes = stats__item__attributes|merge({ - 'data-stats__item-style': stats__item__presentation_style, - 'data-stats__item-has-icon': stats__item__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': stats__item__alignment|default('left'), - 'data-component-theme': stats__item__theme|default('one'), - class: bem(stats__item__base_class, stats__item__modifiers), -}) %} - -
        • -
          - {% if stats__item__has_icon == 'true' %} - {% block stats__item__icon %} -
          - {% include "@atoms/images/icons/_yds-icon.twig" with { - icon__name: stats__item__icon_name|default('sack-dollar-solid'), - icon__base_class: 'stats__item-icon', - icon__blockname: stats__item__base_class, - } %} -
          - {% endblock %} - {% endif %} -
          - {{ stats__item__number }} -
          -
          - {{ stats__item__content }} -
          - {% if stats__item__bg_image %} -
          - {% block stats__item__image %} - {% include "@atoms/images/image/_responsive-image.twig" %} - {% endblock %} -
          - {% endif %} -
          -
          • diff --git a/components/02-molecules/stats-item/_yds-stats-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss similarity index 72% rename from components/02-molecules/stats-item/_yds-stats-item.scss rename to components/02-molecules/tile-item/_yds-tile-item.scss index 3d08eb194..3cd2cbcb7 100644 --- a/components/02-molecules/stats-item/_yds-stats-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -1,10 +1,10 @@ @use '../../00-tokens/tokens'; @use '../../00-tokens/functions/map'; -$global-stats-item-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); +$global-tile-item-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); -.stats__item { +.tile__item { display: flex; flex-flow: column nowrap; align-items: center; @@ -12,13 +12,13 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); width: 100%; z-index: 0; - [data-stats-item-collection-type='single'] & { + [data-tile-item-collection-type='single'] & { max-width: 30%; } // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $stats-item-component-themes { + @each $theme, $value in $tile-item-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -29,11 +29,11 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-slot-six: var(--component-themes-#{$theme}-slot-six); --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-stats-item-theme: var(--color-slot-one); - --color-stats-item-content: var(--color-slot-eight); + --color-tile-item-theme: var(--color-slot-one); + --color-tile-item-content: var(--color-slot-eight); - background-color: var(--color-stats-item-theme); - color: var(--color-stats-item-content); + background-color: var(--color-tile-item-theme); + color: var(--color-tile-item-content); } } @@ -41,7 +41,7 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // This establishes `--color-slot-` variables name-spaced to the selector // in which it is used. We can map component-level variables to global-level // `--color-slot-` variables. - @each $globalTheme, $value in $global-stats-item-themes { + @each $globalTheme, $value in $global-tile-item-themes { [data-global-theme='#{$globalTheme}'] & { --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); @@ -63,18 +63,18 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component theme overrides: set specific component themes overrides /// define component name spaced variables and map them to global theme slots. &[data-component-theme='one'] { - --color-stats-item-theme: var(--color-slot-one); - --color-stats-item-content: var(--color-slot-eight); + --color-tile-item-theme: var(--color-slot-one); + --color-tile-item-content: var(--color-slot-eight); } &[data-component-theme='two'] { - --color-stats-item-theme: var(--color-slot-two); - --color-stats-item-content: var(--color-slot-eight); + --color-tile-item-theme: var(--color-slot-two); + --color-tile-item-content: var(--color-slot-eight); } &[data-component-theme='three'] { - --color-stats-item-theme: var(--color-slot-three); - --color-stats-item-content: var(--color-slot-seven); + --color-tile-item-theme: var(--color-slot-three); + --color-tile-item-content: var(--color-slot-seven); } &__inner { @@ -90,29 +90,28 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } } -.stats__item__number { - @include tokens.h3-yale-new; +.tile__item__number { + @include tokens.h1-yale-new; - width: 100%; position: relative; } -.stats__item__icon { +.tile__item__icon { margin-bottom: var(--size-spacing-2); } // svg -.stats__item__stats__item-icon { +.tile__item__tile__item-icon { max-width: var(--size-spacing-9); // max-width 48px max-height: var(--size-spacing-9); // max-height 48px - fill: var(--color-stats-item-content); + fill: var(--color-tile-item-content); } -.stats__item__content { +.tile__item__content { @include tokens.body-default; } -.stats__item__image { +.tile__item__image { position: absolute; top: 0; left: 0; @@ -134,7 +133,7 @@ $stats-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); left: 0; height: 100%; width: 100%; - background-color: var(--color-stats-item-theme); + background-color: var(--color-tile-item-theme); opacity: 0.85; } } diff --git a/components/02-molecules/tile-item/tile-item.stories.js b/components/02-molecules/tile-item/tile-item.stories.js new file mode 100644 index 000000000..3f89cccd6 --- /dev/null +++ b/components/02-molecules/tile-item/tile-item.stories.js @@ -0,0 +1,98 @@ +import tileItemTwig from './yds-tile-item.twig'; + +import tileItemData from './tile-item.yml'; + +// Image atom component - generic images for demo +import imageData from '../../01-atoms/images/image/image.yml'; + +/** + * Storybook Definition. + */ +export default { + title: 'Molecules/Tile Item', + argTypes: { + number: { + name: 'Number', + type: 'string', + defaultValue: tileItemData.tile__item__number, + }, + content: { + name: 'Content', + type: 'string', + defaultValue: tileItemData.tile__item__content, + }, + presentationStyle: { + name: 'Presentation Style', + options: ['number', 'icon-only'], + type: 'select', + defaultValue: 'number', + }, + alignment: { + name: 'Alignment', + options: ['left', 'right'], + type: 'select', + defaultValue: 'left', + }, + themeColor: { + name: 'Component Theme (dial)', + options: ['one', 'two', 'three'], + type: 'select', + defaultValue: 'one', + }, + image: { + name: 'With image', + type: 'boolean', + defaultValue: true, + }, + }, +}; + +export const TileItem = ({ + number, + content, + presentationStyle, + themeColor, + alignment, + image, +}) => ` + +
            + ${tileItemTwig({ + tile__item__number: tileItemData.tile__item__number, + tile__item__content: tileItemData.tile__item__content, + tile__item__presentation_style: 'number', + tile__item__alignment: 'left', + tile__item__bg_image: 'true', + ...imageData.responsive_images['1x1'], + })} + ${tileItemTwig({ + tile__item__number: tileItemData.tile__item__number, + tile__item__presentation_style: 'icon-only', + tile__item__alignment: 'right', + tile__item__bg_image: 'false', + })} + ${tileItemTwig({ + tile__item__number: tileItemData.tile__item__number, + tile__item__content: tileItemData.tile__item__content, + tile__item__presentation_style: 'number', + tile__item__alignment: 'left', + tile__item__bg_image: 'true', + ...imageData.responsive_images['1x1'], + })} +
          +
          +

          Playground

          +

          Use the StoryBook controls to see the tile item below implement the available variations.

          +
            + ${tileItemTwig({ + tile__item__number: number, + tile__item__content: content, + tile__item__alignment: alignment, + tile__item__presentation_style: presentationStyle, + tile__item__theme: themeColor, + tile__item__bg_image: image ? 'true' : 'false', + ...imageData.responsive_images['1x1'], + })} +
          +
          +`; diff --git a/components/02-molecules/tile-item/tile-item.yml b/components/02-molecules/tile-item/tile-item.yml new file mode 100644 index 000000000..0850b09d2 --- /dev/null +++ b/components/02-molecules/tile-item/tile-item.yml @@ -0,0 +1,2 @@ +tile__item__number: '01' +tile__item__content: This is a new component! diff --git a/components/02-molecules/tile-item/yds-tile-item.twig b/components/02-molecules/tile-item/yds-tile-item.twig new file mode 100644 index 000000000..ebc3b3829 --- /dev/null +++ b/components/02-molecules/tile-item/yds-tile-item.twig @@ -0,0 +1,56 @@ +{# + # Available Props: + # - tile__item__presentation_style: basic, with-icon, icon-only + # - tile__item__has_icon: true, false + # - tile__item__icon_name: string + # - tile__item__alignment: left, center + # + # Available Variables: + # - tile__item__tile__item (required) + # - tile__item__content + #} + +{% set tile__item__base_class = 'tile__item' %} +{% set tile__item__presentation_style = tile__item__presentation_style|default('basic') %} + +{# If tile__item__attributes is not defined, set it to an empty object by default #} +{% set tile__item__attributes = tile__item__attributes|default({}) %} + +{% set tile__item__attributes = tile__item__attributes|merge({ + 'data-tile__item-style': tile__item__presentation_style, + 'data-component-alignment': tile__item__alignment|default('left'), + 'data-component-theme': tile__item__theme|default('one'), + 'data-component-has-image': tile__item__bg_image|default('false'), + class: bem(tile__item__base_class, tile__item__modifiers), +}) %} + +
        • +
          + {% if tile__item__presentation_style == 'icon-only' %} + {% block tile__item__icon %} +
          + {% include "@atoms/images/icons/_yds-icon.twig" with { + icon__name: tile__item__icon_name|default('sack-dollar-solid'), + icon__base_class: 'tile__item-icon', + icon__blockname: tile__item__base_class, + } %} +
          + {% endblock %} + {% endif %} + {% if tile__item__presentation_style == 'number' %} +
          + {{ tile__item__number }} +
          + {% endif %} +
          + {{ tile__item__content }} +
          + {% if tile__item__bg_image == 'true' %} +
          + {% block tile__item__image %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endblock %} +
          + {% endif %} +
          +
          • diff --git a/components/03-organisms/organisms.scss b/components/03-organisms/organisms.scss index 0ebf2baf7..b0960dbb3 100644 --- a/components/03-organisms/organisms.scss +++ b/components/03-organisms/organisms.scss @@ -11,4 +11,4 @@ @forward './site-footer/yds-site-footer'; @forward './site-header/yds-site-header'; @forward './infographic-group/yds-infographic-group'; -@forward './stats/yds-stats'; +@forward './tiles/yds-tiles'; diff --git a/components/03-organisms/stats/_yds-stats.scss b/components/03-organisms/stats/_yds-stats.scss deleted file mode 100644 index b2042fc6e..000000000 --- a/components/03-organisms/stats/_yds-stats.scss +++ /dev/null @@ -1,109 +0,0 @@ -@use '../../00-tokens/tokens'; -@use '../../00-tokens/functions/map'; -@use '../../01-atoms/atoms'; -@use '../grid-mixins' as grid; - -$global-stats-group-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$stats-group-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); - -.stats { - @include tokens.spacing-page-section($banner-spacing: true); - - padding-block: var(--size-spacing-11); - width: 100%; - position: relative; - - // Component themes defaults: iterate over each component theme to establish - // default variables. - @each $theme, $value in $stats-group-component-themes { - &[data-component-theme='#{$theme}'] { - // prettier-ignore - --color-slot-one: var(--component-themes-#{$theme}-slot-one); - --color-slot-two: var(--component-themes-#{$theme}-slot-two); - --color-slot-three: var(--component-themes-#{$theme}-slot-three); - --color-slot-four: var(--component-themes-#{$theme}-slot-four); - --color-slot-five: var(--component-themes-#{$theme}-slot-five); - --color-slot-six: var(--component-themes-#{$theme}-slot-six); - --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); - --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-stats-theme: var(--color-slot-one); - --color-stats-content: var(--color-slot-eight); - - background-color: var(--color-stats-theme); - color: var(--color-stats-content); - } - } - - // Global themes: set color slots for each theme - // This establishes `--color-slot-` variables name-spaced to the selector - // in which it is used. We can map component-level variables to global-level - // `--color-slot-` variables. - @each $globalTheme, $value in $global-stats-group-themes { - [data-global-theme='#{$globalTheme}'] & { - --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); - --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); - --color-slot-three: var( - --global-themes-#{$globalTheme}-colors-slot-three - ); - --color-slot-four: var(--global-themes-#{$globalTheme}-colors-slot-four); - --color-slot-five: var(--global-themes-#{$globalTheme}-colors-slot-five); - --color-slot-six: var(--global-themes-#{$globalTheme}-colors-slot-six); - --color-slot-seven: var( - --global-themes-#{$globalTheme}-colors-slot-seven - ); - --color-slot-eight: var( - --global-themes-#{$globalTheme}-colors-slot-eight - ); - } - } - - // Component theme overrides: set specific component themes overrides - /// define component name spaced variables and map them to global theme slots. - &[data-component-theme='one'] { - --color-stats-theme: var(--color-slot-one); - --color-stats-content: var(--color-slot-eight); - --color-link-visited-base: var(--color-link-visited-light); - --color-link-visited-hover: var(--color-link-visited-light-hover); - } - - &[data-component-theme='two'] { - --color-stats-theme: var(--color-slot-four); - --color-stats-content: var(--color-slot-seven); - } - - &[data-component-theme='three'] { - --color-stats-theme: var(--color-slot-five); - --color-stats-content: var(--color-slot-eight); - --color-link-visited-base: var(--color-link-visited-light); - --color-link-visited-hover: var(--color-link-visited-light-hover); - } -} - -.stats__inner { - width: 100%; - max-width: var(--component-width); -} - -.stats__wrap { - @include grid.base; - - // position relative added to use z-index and make sure the image is behind the content - position: relative; - z-index: 1; - - --grid-gutter: var(--spacing-component-gutter-secondary); - - > * { - @media (min-width: tokens.$break-s) { - flex: 0 1 calc(50% - calc(var(--grid-gutter) * 2 / 3)); - } - - @media (min-width: tokens.$break-m) { - flex: 0 1 calc(33.33% - calc(var(--grid-gutter) * 2 / 3)); - } - - @media (min-width: tokens.$break-l) { - flex: 0 1 calc(25% - calc(var(--grid-gutter) * 3 / 4)); - } - } -} diff --git a/components/03-organisms/stats/stats.yml b/components/03-organisms/stats/stats.yml deleted file mode 100644 index b7b8542aa..000000000 --- a/components/03-organisms/stats/stats.yml +++ /dev/null @@ -1,13 +0,0 @@ -stats: - - stats__item__number: '$52,300' - stats__item__content: 'Card 1 content goes here.' - - stats__item__number: '$100,000' - stats__item__content: 'Card 2 content goes here.' - - stats__item__number: '150%' - stats__item__content: 'Card 3 content goes here.' - - stats__item__number: '200%' - stats__item__content: 'Card 4 content goes here.' - - stats__item__number: '$3,000' - stats__item__content: 'Card 5 content goes here.' - - stats__item__number: '$25,200' - stats__item__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/stats/yds-stats.twig b/components/03-organisms/stats/yds-stats.twig deleted file mode 100644 index 9f87da43f..000000000 --- a/components/03-organisms/stats/yds-stats.twig +++ /dev/null @@ -1,59 +0,0 @@ -{# - # Available Variables: - # - stats__heading - # - stats__bg_image: (boolean) false by default - - # Available Blocks: - # - stats__cards - #} - -{% set stats__base_class = 'stats' %} - -{% set stats__width = stats__width|default('site') %} - -{% if stats__collection__type %} - {% set stats__attributes = stats__attributes|merge({ - 'data-stat-collection-type': stats__collection__type, - }) %} -{% endif %} - -{% set stats__attributes = { - 'data-component-width': stats__width, - 'data-stat-style': stats__presentation_style|default('basic'), - 'data-stat-font-style': stats__font_style|default('normal'), - 'data-stat-has-icon': stats__item__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': stats__alignment|default('center'), - 'data-component-theme': stats__theme|default('one'), - 'class': bem(stats__base_class), -} %} - -
          - {% block prefix_suffix %} - {% endblock %} -
          -
            - {% block stats__items %} - {% for stat in stats %} - {# Set stat attributes based on stats attributes so all stat items within that stats group are consistent #} - {# stats__theme: 'default' is set to default as the theme is set on the stats component, we don't want the individual stat to have a bg color #} - {% include "@molecules/stats-item/yds-stats-item.twig" with { - stats__item__number: stat.stats__item__number, - stats__item__content: stat.stats__item__content, - stats__item__has_icon: stats__item__has_icon, - stats__item__alignment: stats__alignment, - stats__item__presentation_style: stats__presentation_style, - stats__item__theme: 'default', - } - %} - {% endfor %} - {% endblock %} -
          - {% if stats__bg_image %} -
          - {% block stats__image %} - {% include "@atoms/images/image/_responsive-image.twig" %} - {% endblock %} -
          - {% endif %} -
          -
          diff --git a/components/03-organisms/tiles/_yds-tiles.scss b/components/03-organisms/tiles/_yds-tiles.scss new file mode 100644 index 000000000..1be4748ec --- /dev/null +++ b/components/03-organisms/tiles/_yds-tiles.scss @@ -0,0 +1,89 @@ +@use '../../00-tokens/tokens'; +@use '../../00-tokens/functions/map'; +@use '../../01-atoms/atoms'; +@use '../grid-mixins' as grid; + +.tiles { + @include tokens.spacing-page-section($banner-spacing: true); + + padding-block: var(--size-spacing-11); + width: 100%; + position: relative; +} + +.tiles__inner { + width: 100%; + max-width: var(--component-width); +} + +.tiles__wrap { + @include grid.base; + + // position relative added to use z-index and make sure the image is behind the content + position: relative; + z-index: 1; + + --grid-gutter: var(--spacing-component-gutter-secondary); + + > * { + @media (min-width: tokens.$break-s) { + flex: 0 1 calc(50% - calc(var(--grid-gutter) * 2 / 3)); + } + + @media (min-width: tokens.$break-m) { + flex: 0 1 calc(33.33% - calc(var(--grid-gutter) * 2 / 3)); + } + + @media (min-width: tokens.$break-l) { + flex: 0 1 calc(25% - calc(var(--grid-gutter) * 3 / 4)); + } + } + + [data-component-grid-count='two'] & { + > * { + @media (min-width: tokens.$break-s) { + flex: 0 1 calc(50% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-m) { + flex: 0 1 calc(25% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-l) { + flex: 0 1 calc(50% - var(--grid-gutter)); + } + } + } + + [data-component-grid-count='three'] & { + > * { + @media (min-width: tokens.$break-s) { + flex: 0 1 calc(50% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-m) { + flex: 0 1 calc(25% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-l) { + flex: 0 1 calc(33.33% - var(--grid-gutter)); + } + } + } + + [data-component-grid-count='four'] & { + > * { + @media (min-width: tokens.$break-s) { + flex: 0 1 calc(50% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-m) { + flex: 0 1 calc(25% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-l) { + flex: 0 1 calc(25% - var(--grid-gutter)); + } + } + } +} diff --git a/components/03-organisms/stats/stats.stories.js b/components/03-organisms/tiles/tiles.stories.js similarity index 59% rename from components/03-organisms/stats/stats.stories.js rename to components/03-organisms/tiles/tiles.stories.js index be95a6639..66c225146 100644 --- a/components/03-organisms/stats/stats.stories.js +++ b/components/03-organisms/tiles/tiles.stories.js @@ -2,11 +2,11 @@ import tokens from '@yalesites-org/tokens/build/json/tokens.json'; // get global themes as `label` : `key` values to pass into options as array. import getGlobalThemes from '../../00-tokens/colors/color-global-themes'; -// stats twig -import statsTwig from './yds-stats.twig'; +// tiles twig +import tilesTwig from './yds-tiles.twig'; // Stat default data -import statsData from './stats.yml'; +import tilesData from './tiles.yml'; // Image atom component - generic images for demo import imageData from '../../01-atoms/images/image/image.yml'; @@ -18,7 +18,7 @@ const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); * Storybook Definition. */ export default { - title: 'Organisms/Stats', + title: 'Organisms/Tiles', parameters: { layout: 'fullscreen', }, @@ -29,28 +29,11 @@ export default { type: 'select', defaultValue: 'one', }, - themeColor: { - name: 'Component Theme (dial)', - options: ['one', 'two', 'three'], - type: 'select', - defaultValue: 'one', - }, - statsIcons: { - name: 'Stats Icons', - type: 'boolean', - defaultValue: false, - }, presentationStyle: { name: 'Presentation Style', - options: ['basic', 'icon-only'], + options: ['number', 'icon-only'], type: 'select', - defaultValue: 'basic', - }, - fontStyle: { - name: 'Font Style', - options: ['normal', 'numeric-oldstyle'], - type: 'select', - defaultValue: 'normal', + defaultValue: 'number', }, alignment: { name: 'Alignment', @@ -58,28 +41,37 @@ export default { type: 'select', defaultValue: 'left', }, + gridCount: { + name: 'Grid Count', + options: ['two', 'three', 'four'], + type: 'select', + defaultValue: 'three', + }, + image: { + name: 'With image', + type: 'boolean', + defaultValue: false, + }, }, }; -export const Stats = ({ - statsIcons, +export const Tiles = ({ globalTheme, presentationStyle, alignment, - themeColor, + gridCount, image, }) => { return `
          - ${statsTwig({ + ${tilesTwig({ site_global__theme: globalTheme, - stats__has_icon: statsIcons ? 'true' : 'false', - stats__alignment: alignment, - stats__presentation_style: presentationStyle, - stats__theme: themeColor, - stats__bg_image: image, - ...statsData, - ...imageData.responsive_images['16x9'], + tiles__alignment: alignment, + tiles__presentation_style: presentationStyle, + tiles__grid__count: gridCount, + tiles__with__image: image ? 'true' : 'false', + ...tilesData, + ...imageData.responsive_images['1x1'], })}
          `; diff --git a/components/03-organisms/tiles/tiles.yml b/components/03-organisms/tiles/tiles.yml new file mode 100644 index 000000000..c620b6fa8 --- /dev/null +++ b/components/03-organisms/tiles/tiles.yml @@ -0,0 +1,19 @@ +tiles: + - tile__item__number: '$52,300' + tile__item__content: 'Card 1 content goes here.' + tile__item__theme: 'one' + - tile__item__number: '$100,000' + tile__item__content: 'Card 2 content goes here.' + tile__item__theme: 'two' + - tile__item__number: '150%' + tile__item__content: 'Card 3 content goes here.' + tile__item__theme: 'one' + - tile__item__number: '200%' + tile__item__content: 'Card 4 content goes here.' + tile__item__theme: 'three' + - tile__item__number: '$3,000' + tile__item__content: 'Card 5 content goes here.' + tile__item__theme: 'two' + - tile__item__number: '$25,200' + tile__item__content: 'Card 6 content goes here.' + tile__item__theme: 'one' diff --git a/components/03-organisms/tiles/yds-tiles.twig b/components/03-organisms/tiles/yds-tiles.twig new file mode 100644 index 000000000..97d796fb1 --- /dev/null +++ b/components/03-organisms/tiles/yds-tiles.twig @@ -0,0 +1,46 @@ +{# + # Available Variables: + # - tiles__width + # - tiles__presentation_style: 'number' (default) or 'icon-only' + # - tiles__alignment: 'left' (default) or 'right' + # - tiles__theme: 'one' (default), 'two', 'three' + # Available Blocks: + # - tiles__items + #} + +{% set tiles__base_class = 'tiles' %} + +{% set tiles__width = tiles__width|default('site') %} + +{% set tiles__attributes = { + 'data-component-width': tiles__width, + 'data-tile-style': tiles__presentation_style|default('number'), + 'data-component-alignment': tiles__alignment|default('left'), + 'data-component-grid-count': tiles__grid_count|default('three'), + 'data-component-tiles-have-images': tiles__with__image|default('false'), + 'class': bem(tiles__base_class), +} %} + +
          + {% block prefix_suffix %} + {% endblock %} +
          +
            + {% block tiles__items %} + {% for tile in tiles %} + {# Set tile attributes based on tiles attributes so all tile items within that tiles group are consistent #} + {# tiles__theme: 'default' is set to default as the theme is set on the tiles component, we don't want the individual tile to have a bg color #} + {% include "@molecules/tile-item/yds-tile-item.twig" with { + tile__item__number: tile.tile__item__number, + tile__item__content: tile.tile__item__content, + tile__item__alignment: tiles__alignment, + tile__item__presentation_style: tiles__presentation_style, + tile__item__theme: tile.tile__item__theme, + tile__item__bg_image: tiles__with__image, + } + %} + {% endfor %} + {% endblock %} +
          +
          +
          From 5548420e20f6800b917cad85111af501a9dfddaa Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 25 Mar 2024 14:35:15 -0500 Subject: [PATCH 06/16] feat(YSP-413): add wrapping divs --- .../tile-item/tile-item.stories.js | 80 ++++++++++--------- .../03-organisms/tiles/tiles.stories.js | 2 +- 2 files changed, 45 insertions(+), 37 deletions(-) diff --git a/components/02-molecules/tile-item/tile-item.stories.js b/components/02-molecules/tile-item/tile-item.stories.js index 3f89cccd6..4fdd0f9d5 100644 --- a/components/02-molecules/tile-item/tile-item.stories.js +++ b/components/02-molecules/tile-item/tile-item.stories.js @@ -55,44 +55,52 @@ export const TileItem = ({ alignment, image, }) => ` - -
            - ${tileItemTwig({ - tile__item__number: tileItemData.tile__item__number, - tile__item__content: tileItemData.tile__item__content, - tile__item__presentation_style: 'number', - tile__item__alignment: 'left', - tile__item__bg_image: 'true', - ...imageData.responsive_images['1x1'], - })} - ${tileItemTwig({ - tile__item__number: tileItemData.tile__item__number, - tile__item__presentation_style: 'icon-only', - tile__item__alignment: 'right', - tile__item__bg_image: 'false', - })} - ${tileItemTwig({ - tile__item__number: tileItemData.tile__item__number, - tile__item__content: tileItemData.tile__item__content, - tile__item__presentation_style: 'number', - tile__item__alignment: 'left', - tile__item__bg_image: 'true', - ...imageData.responsive_images['1x1'], - })} -
          +
          +
          +
            + ${tileItemTwig({ + tile__item__number: tileItemData.tile__item__number, + tile__item__content: tileItemData.tile__item__content, + tile__item__presentation_style: 'number', + tile__item__alignment: 'left', + tile__item__bg_image: 'true', + ...imageData.responsive_images['1x1'], + })} + ${tileItemTwig({ + tile__item__number: tileItemData.tile__item__number, + tile__item__presentation_style: 'icon-only', + tile__item__alignment: 'right', + tile__item__bg_image: 'false', + })} + ${tileItemTwig({ + tile__item__number: tileItemData.tile__item__number, + tile__item__content: tileItemData.tile__item__content, + tile__item__presentation_style: 'number', + tile__item__alignment: 'left', + tile__item__bg_image: 'true', + ...imageData.responsive_images['1x1'], + })} +
          +
          +

          Playground

          Use the StoryBook controls to see the tile item below implement the available variations.

          -
            - ${tileItemTwig({ - tile__item__number: number, - tile__item__content: content, - tile__item__alignment: alignment, - tile__item__presentation_style: presentationStyle, - tile__item__theme: themeColor, - tile__item__bg_image: image ? 'true' : 'false', - ...imageData.responsive_images['1x1'], - })} -
          + +
          +
          +
            + ${tileItemTwig({ + tile__item__number: number, + tile__item__content: content, + tile__item__alignment: alignment, + tile__item__presentation_style: presentationStyle, + tile__item__theme: themeColor, + tile__item__bg_image: image ? 'true' : 'false', + ...imageData.responsive_images['1x1'], + })} +
          +
          +
          `; diff --git a/components/03-organisms/tiles/tiles.stories.js b/components/03-organisms/tiles/tiles.stories.js index 66c225146..1a76974bc 100644 --- a/components/03-organisms/tiles/tiles.stories.js +++ b/components/03-organisms/tiles/tiles.stories.js @@ -68,7 +68,7 @@ export const Tiles = ({ site_global__theme: globalTheme, tiles__alignment: alignment, tiles__presentation_style: presentationStyle, - tiles__grid__count: gridCount, + tiles__grid_count: gridCount, tiles__with__image: image ? 'true' : 'false', ...tilesData, ...imageData.responsive_images['1x1'], From 29419b7f4d00520f5b16ce80a5ed0f36ed551853 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 25 Mar 2024 17:29:36 -0500 Subject: [PATCH 07/16] feat(YSP-413): add optional content link --- .../tile-item/_yds-tile-item.scss | 61 ++++++++++++++++++- .../tile-item/tile-item.stories.js | 23 ++++++- .../02-molecules/tile-item/yds-tile-item.twig | 17 ++++-- .../03-organisms/tiles/tiles.stories.js | 10 ++- components/03-organisms/tiles/tiles.yml | 2 + components/03-organisms/tiles/yds-tiles.twig | 7 ++- 6 files changed, 109 insertions(+), 11 deletions(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 3cd2cbcb7..ff33c7d12 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -1,5 +1,6 @@ @use '../../00-tokens/tokens'; @use '../../00-tokens/functions/map'; +@use '../../01-atoms/atoms'; $global-tile-item-themes: map.deep-get(tokens.$tokens, 'global-themes'); $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); @@ -7,15 +8,25 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); .tile__item { display: flex; flex-flow: column nowrap; - align-items: center; + justify-content: flex-start; position: relative; width: 100%; z-index: 0; + aspect-ratio: 3/2; [data-tile-item-collection-type='single'] & { max-width: 30%; } + [data-component-grid-count='two'] & { + aspect-ratio: 4 / 2; + } + + // if in a 4-column grid, make the aspect ratio 1:1 + [data-component-grid-count='four'] & { + aspect-ratio: 1 / 1; + } + // Component themes defaults: iterate over each component theme to establish // default variables. @each $theme, $value in $tile-item-component-themes { @@ -31,6 +42,10 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); --color-tile-item-theme: var(--color-slot-one); --color-tile-item-content: var(--color-slot-eight); + --color-link-base: var(--color-tile-item-content); + --color-link-hover: var(--color-tile-item-content); + --color-link-visited-base: var(--color-link-visited-light); + --color-link-visited-hover: var(--color-link-visited-light-hover); background-color: var(--color-tile-item-theme); color: var(--color-tile-item-content); @@ -87,6 +102,15 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); [data-component-alignment='right'] & { align-items: flex-end; } + + [data-component-tile-style='text-only'] & { + justify-content: flex-start; + } + + [data-component-tile-style='text-only'][data-component-vertical-alignment='bottom'] + & { + justify-content: flex-end; + } } } @@ -94,10 +118,20 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); @include tokens.h1-yale-new; position: relative; + flex: 0 auto; + + [data-component-vertical-alignment='bottom'] & { + flex: 1 auto; + } } .tile__item__icon { margin-bottom: var(--size-spacing-2); + flex: 0 auto; + + [data-component-vertical-alignment='bottom'] & { + flex: 1 auto; + } } // svg @@ -108,7 +142,18 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } .tile__item__content { - @include tokens.body-default; + @include tokens.h4-yale-new; + + flex: 1 auto; + text-align: left; + + [data-component-vertical-alignment='bottom'] & { + flex: 0 auto; + } + + [data-component-alignment='right'] & { + text-align: right; + } } .tile__item__image { @@ -135,5 +180,17 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); width: 100%; background-color: var(--color-tile-item-theme); opacity: 0.85; + + .tile__item:hover & { + opacity: 0.95; + } + } +} + +.tile__item__link { + @include atoms.plain-link; + + &:hover { + --color-link-hover: var(--color-tile-item-content); } } diff --git a/components/02-molecules/tile-item/tile-item.stories.js b/components/02-molecules/tile-item/tile-item.stories.js index 4fdd0f9d5..c18de125c 100644 --- a/components/02-molecules/tile-item/tile-item.stories.js +++ b/components/02-molecules/tile-item/tile-item.stories.js @@ -21,9 +21,14 @@ export default { type: 'string', defaultValue: tileItemData.tile__item__content, }, + contentLink: { + name: 'Content Link', + type: 'string', + defaultValue: '', + }, presentationStyle: { name: 'Presentation Style', - options: ['number', 'icon-only'], + options: ['number', 'icon', 'text-only'], type: 'select', defaultValue: 'number', }, @@ -33,6 +38,12 @@ export default { type: 'select', defaultValue: 'left', }, + verticalAlignment: { + name: 'Vertical Alignment', + options: ['top', 'bottom'], + type: 'select', + defaultValue: 'top', + }, themeColor: { name: 'Component Theme (dial)', options: ['one', 'two', 'three'], @@ -50,9 +61,11 @@ export default { export const TileItem = ({ number, content, + contentLink, presentationStyle, themeColor, alignment, + verticalAlignment, image, }) => `
          @@ -61,20 +74,24 @@ export const TileItem = ({ ${tileItemTwig({ tile__item__number: tileItemData.tile__item__number, tile__item__content: tileItemData.tile__item__content, + tile__item__content_link: 'https://www.yale.edu', tile__item__presentation_style: 'number', tile__item__alignment: 'left', + tile__item__vertical_alignment: 'top', tile__item__bg_image: 'true', ...imageData.responsive_images['1x1'], })} ${tileItemTwig({ tile__item__number: tileItemData.tile__item__number, - tile__item__presentation_style: 'icon-only', + tile__item__presentation_style: 'icon', tile__item__alignment: 'right', tile__item__bg_image: 'false', })} ${tileItemTwig({ tile__item__number: tileItemData.tile__item__number, tile__item__content: tileItemData.tile__item__content, + tile__item__content_link: 'https://www.yale.edu', + tile__item__vertical_alignment: 'bottom', tile__item__presentation_style: 'number', tile__item__alignment: 'left', tile__item__bg_image: 'true', @@ -93,7 +110,9 @@ export const TileItem = ({ ${tileItemTwig({ tile__item__number: number, tile__item__content: content, + tile__item__content_link: contentLink, tile__item__alignment: alignment, + tile__item__vertical_alignment: verticalAlignment, tile__item__presentation_style: presentationStyle, tile__item__theme: themeColor, tile__item__bg_image: image ? 'true' : 'false', diff --git a/components/02-molecules/tile-item/yds-tile-item.twig b/components/02-molecules/tile-item/yds-tile-item.twig index ebc3b3829..014c2f72a 100644 --- a/components/02-molecules/tile-item/yds-tile-item.twig +++ b/components/02-molecules/tile-item/yds-tile-item.twig @@ -1,7 +1,6 @@ {# # Available Props: - # - tile__item__presentation_style: basic, with-icon, icon-only - # - tile__item__has_icon: true, false + # - tile__item__presentation_style: number, icon, text-only # - tile__item__icon_name: string # - tile__item__alignment: left, center # @@ -17,8 +16,9 @@ {% set tile__item__attributes = tile__item__attributes|default({}) %} {% set tile__item__attributes = tile__item__attributes|merge({ - 'data-tile__item-style': tile__item__presentation_style, + 'data-component-tile-style': tile__item__presentation_style, 'data-component-alignment': tile__item__alignment|default('left'), + 'data-component-vertical-alignment': tile__item__vertical_alignment|default('top'), 'data-component-theme': tile__item__theme|default('one'), 'data-component-has-image': tile__item__bg_image|default('false'), class: bem(tile__item__base_class, tile__item__modifiers), @@ -26,7 +26,7 @@
        • - {% if tile__item__presentation_style == 'icon-only' %} + {% if tile__item__presentation_style == 'icon' %} {% block tile__item__icon %}
          {% include "@atoms/images/icons/_yds-icon.twig" with { @@ -42,9 +42,18 @@ {{ tile__item__number }}
          {% endif %} + {% if tile__item__content_link and tile__item__content %} + {% include "@atoms/controls/text-link/yds-text-link.twig" with { + link__content: tile__item__content, + link__url: tile__item__content_link, + link__blockname: tile__item__base_class, + link__base_class: 'link', + } %} + {% elseif tile__item__content %}
          {{ tile__item__content }}
          + {% endif %} {% if tile__item__bg_image == 'true' %}
          {% block tile__item__image %} diff --git a/components/03-organisms/tiles/tiles.stories.js b/components/03-organisms/tiles/tiles.stories.js index 1a76974bc..1e340330c 100644 --- a/components/03-organisms/tiles/tiles.stories.js +++ b/components/03-organisms/tiles/tiles.stories.js @@ -31,7 +31,7 @@ export default { }, presentationStyle: { name: 'Presentation Style', - options: ['number', 'icon-only'], + options: ['number', 'icon', 'text-only'], type: 'select', defaultValue: 'number', }, @@ -41,6 +41,12 @@ export default { type: 'select', defaultValue: 'left', }, + verticalAlignment: { + name: 'Vertical Alignment', + options: ['top', 'bottom'], + type: 'select', + defaultValue: 'top', + }, gridCount: { name: 'Grid Count', options: ['two', 'three', 'four'], @@ -59,6 +65,7 @@ export const Tiles = ({ globalTheme, presentationStyle, alignment, + verticalAlignment, gridCount, image, }) => { @@ -67,6 +74,7 @@ export const Tiles = ({ ${tilesTwig({ site_global__theme: globalTheme, tiles__alignment: alignment, + tiles__vertical_alignment: verticalAlignment, tiles__presentation_style: presentationStyle, tiles__grid_count: gridCount, tiles__with__image: image ? 'true' : 'false', diff --git a/components/03-organisms/tiles/tiles.yml b/components/03-organisms/tiles/tiles.yml index c620b6fa8..812e37308 100644 --- a/components/03-organisms/tiles/tiles.yml +++ b/components/03-organisms/tiles/tiles.yml @@ -8,9 +8,11 @@ tiles: - tile__item__number: '150%' tile__item__content: 'Card 3 content goes here.' tile__item__theme: 'one' + tile__item__content_link: 'https://www.yale.edu/' - tile__item__number: '200%' tile__item__content: 'Card 4 content goes here.' tile__item__theme: 'three' + tile__item__content_link: '#' - tile__item__number: '$3,000' tile__item__content: 'Card 5 content goes here.' tile__item__theme: 'two' diff --git a/components/03-organisms/tiles/yds-tiles.twig b/components/03-organisms/tiles/yds-tiles.twig index 97d796fb1..4076e2f0c 100644 --- a/components/03-organisms/tiles/yds-tiles.twig +++ b/components/03-organisms/tiles/yds-tiles.twig @@ -1,8 +1,9 @@ {# # Available Variables: # - tiles__width - # - tiles__presentation_style: 'number' (default) or 'icon-only' + # - tiles__presentation_style: 'number' (default), 'icon', 'text-only' # - tiles__alignment: 'left' (default) or 'right' + # - tiles__vertical_alignment: 'top' (default) or 'bottom' # - tiles__theme: 'one' (default), 'two', 'three' # Available Blocks: # - tiles__items @@ -14,8 +15,9 @@ {% set tiles__attributes = { 'data-component-width': tiles__width, - 'data-tile-style': tiles__presentation_style|default('number'), + 'data-component-tile-style': tiles__presentation_style|default('number'), 'data-component-alignment': tiles__alignment|default('left'), + 'data-component-vertical-alignment': tiles__vertical_alignment|default('left'), 'data-component-grid-count': tiles__grid_count|default('three'), 'data-component-tiles-have-images': tiles__with__image|default('false'), 'class': bem(tiles__base_class), @@ -33,6 +35,7 @@ {% include "@molecules/tile-item/yds-tile-item.twig" with { tile__item__number: tile.tile__item__number, tile__item__content: tile.tile__item__content, + tile__item__content_link: tile.tile__item__content_link, tile__item__alignment: tiles__alignment, tile__item__presentation_style: tiles__presentation_style, tile__item__theme: tile.tile__item__theme, From de05f034bc01c128b0a5d111cb7fce31ad3eae98 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Mar 2024 13:48:52 -0500 Subject: [PATCH 08/16] feat(YSP-413): adjust responsiveness and grid sizing --- .../tile-item/_yds-tile-item.scss | 16 +++++++++---- components/03-organisms/tiles/_yds-tiles.scss | 23 ++++++++----------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index ff33c7d12..9f0ccaacf 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -11,20 +11,28 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); justify-content: flex-start; position: relative; width: 100%; + max-width: 100%; z-index: 0; - aspect-ratio: 3/2; + + @media (min-width: tokens.$break-l) { + aspect-ratio: 3/2; + } [data-tile-item-collection-type='single'] & { max-width: 30%; } [data-component-grid-count='two'] & { - aspect-ratio: 4 / 2; + @media (min-width: tokens.$break-l) { + aspect-ratio: 4 / 2; + } } // if in a 4-column grid, make the aspect ratio 1:1 [data-component-grid-count='four'] & { - aspect-ratio: 1 / 1; + @media (min-width: tokens.$break-s) { + aspect-ratio: 1 / 1; + } } // Component themes defaults: iterate over each component theme to establish @@ -95,7 +103,7 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); &__inner { display: flex; flex-flow: column nowrap; - padding: var(--size-spacing-8); + padding: var(--size-spacing-6); height: 100%; align-items: flex-start; diff --git a/components/03-organisms/tiles/_yds-tiles.scss b/components/03-organisms/tiles/_yds-tiles.scss index 1be4748ec..a4255f250 100644 --- a/components/03-organisms/tiles/_yds-tiles.scss +++ b/components/03-organisms/tiles/_yds-tiles.scss @@ -43,14 +43,7 @@ > * { @media (min-width: tokens.$break-s) { flex: 0 1 calc(50% - var(--grid-gutter)); - } - - @media (min-width: tokens.$break-m) { - flex: 0 1 calc(25% - var(--grid-gutter)); - } - - @media (min-width: tokens.$break-l) { - flex: 0 1 calc(50% - var(--grid-gutter)); + max-width: calc(50% - var(--grid-gutter)); } } } @@ -58,15 +51,16 @@ [data-component-grid-count='three'] & { > * { @media (min-width: tokens.$break-s) { - flex: 0 1 calc(50% - var(--grid-gutter)); + flex: 0 calc(50% - var(--grid-gutter)); } @media (min-width: tokens.$break-m) { - flex: 0 1 calc(25% - var(--grid-gutter)); + flex: 1 0 calc(25% - var(--grid-gutter)); } @media (min-width: tokens.$break-l) { - flex: 0 1 calc(33.33% - var(--grid-gutter)); + flex: 1 0 calc(33.33% - var(--grid-gutter)); + max-width: calc(33.33% - var(--grid-gutter)); } } } @@ -74,15 +68,16 @@ [data-component-grid-count='four'] & { > * { @media (min-width: tokens.$break-s) { - flex: 0 1 calc(50% - var(--grid-gutter)); + flex: 0 calc(50% - var(--grid-gutter)); } @media (min-width: tokens.$break-m) { - flex: 0 1 calc(25% - var(--grid-gutter)); + flex: 1 0 calc(25% - var(--grid-gutter)); } @media (min-width: tokens.$break-l) { - flex: 0 1 calc(25% - var(--grid-gutter)); + flex: 1 0 calc(25% - var(--grid-gutter)); + max-width: calc(25% - var(--grid-gutter)); } } } From 4581d945ba426fffa04aba03a4403b86971581a4 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Mar 2024 16:56:21 -0500 Subject: [PATCH 09/16] feat(YSP-413): cleanup --- components/02-molecules/tile-item/_yds-tile-item.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 9f0ccaacf..9b61c757a 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -18,10 +18,6 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); aspect-ratio: 3/2; } - [data-tile-item-collection-type='single'] & { - max-width: 30%; - } - [data-component-grid-count='two'] & { @media (min-width: tokens.$break-l) { aspect-ratio: 4 / 2; @@ -111,10 +107,6 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); align-items: flex-end; } - [data-component-tile-style='text-only'] & { - justify-content: flex-start; - } - [data-component-tile-style='text-only'][data-component-vertical-alignment='bottom'] & { justify-content: flex-end; From bbfc019663fff5d2f23728cf8618661c713c8b8e Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Mar 2024 17:29:56 -0500 Subject: [PATCH 10/16] feat(YSP-413): simplify grid responsiveness --- components/02-molecules/tile-item/_yds-tile-item.scss | 2 +- components/03-organisms/tiles/_yds-tiles.scss | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 9b61c757a..1569201ff 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -99,7 +99,7 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); &__inner { display: flex; flex-flow: column nowrap; - padding: var(--size-spacing-6); + padding: var(--size-spacing-8) var(--size-spacing-6); height: 100%; align-items: flex-start; diff --git a/components/03-organisms/tiles/_yds-tiles.scss b/components/03-organisms/tiles/_yds-tiles.scss index a4255f250..58f4898dd 100644 --- a/components/03-organisms/tiles/_yds-tiles.scss +++ b/components/03-organisms/tiles/_yds-tiles.scss @@ -55,10 +55,6 @@ } @media (min-width: tokens.$break-m) { - flex: 1 0 calc(25% - var(--grid-gutter)); - } - - @media (min-width: tokens.$break-l) { flex: 1 0 calc(33.33% - var(--grid-gutter)); max-width: calc(33.33% - var(--grid-gutter)); } From d811a944ee98adc7ed7370d45d229837805fbb43 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 27 Mar 2024 13:07:32 -0500 Subject: [PATCH 11/16] feat(YSP-413): if the tile item has a link, make entire tile clickable --- .../tile-item/_yds-tile-item.scss | 6 ++++ .../tile-item/tile-item.stories.js | 2 ++ .../02-molecules/tile-item/tile-item.yml | 2 +- .../02-molecules/tile-item/yds-tile-item.js | 36 +++++++++++++++++++ .../02-molecules/tile-item/yds-tile-item.twig | 6 ++++ 5 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 components/02-molecules/tile-item/yds-tile-item.js diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 1569201ff..f68228a99 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -103,6 +103,12 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); height: 100%; align-items: flex-start; + // if the tile item is a link, make the whole tile item clickable + [data-component-linked-tile='true'] & { + @include atoms.clickable-component-heading-link; + @include atoms.clickable-component-image; + } + [data-component-alignment='right'] & { align-items: flex-end; } diff --git a/components/02-molecules/tile-item/tile-item.stories.js b/components/02-molecules/tile-item/tile-item.stories.js index c18de125c..6c637b8ad 100644 --- a/components/02-molecules/tile-item/tile-item.stories.js +++ b/components/02-molecules/tile-item/tile-item.stories.js @@ -5,6 +5,8 @@ import tileItemData from './tile-item.yml'; // Image atom component - generic images for demo import imageData from '../../01-atoms/images/image/image.yml'; +import './yds-tile-item'; + /** * Storybook Definition. */ diff --git a/components/02-molecules/tile-item/tile-item.yml b/components/02-molecules/tile-item/tile-item.yml index 0850b09d2..ab6f035bc 100644 --- a/components/02-molecules/tile-item/tile-item.yml +++ b/components/02-molecules/tile-item/tile-item.yml @@ -1,2 +1,2 @@ tile__item__number: '01' -tile__item__content: This is a new component! +tile__item__content: This is a tile item component! diff --git a/components/02-molecules/tile-item/yds-tile-item.js b/components/02-molecules/tile-item/yds-tile-item.js new file mode 100644 index 000000000..213e37060 --- /dev/null +++ b/components/02-molecules/tile-item/yds-tile-item.js @@ -0,0 +1,36 @@ +Drupal.behaviors.tileItem = { + attach(context) { + // Inspiration and reasoning for this JavaScript can be found in the Cards + // chapter of the book linked below: + // https://inclusive-components.design/cards/#theredundantclickevent + // Selectors + const tileItems = context.querySelectorAll('.tile__item'); + + tileItems.forEach((tileItem) => { + const tile = tileItem; + const link = tile.querySelector('.tile__item__link'); + + // If the tile has a link, make the whole tile clickable. However, allow + // users to select text by only triggering the link if the "click up" is + // less than 200ms from the "click down". + if (link) { + let down; + let up; + + tile.style.cursor = 'pointer'; + tile.onmousedown = () => { + // Calculate when the "click" starts. + down = +new Date(); + }; + tile.onmouseup = () => { + // Calculate when the "click" ends. + up = +new Date(); + // If the click "duration" is less than 200ms, trigger a click. + if (up - down < 200) { + link.click(); + } + }; + } + }); + }, +}; diff --git a/components/02-molecules/tile-item/yds-tile-item.twig b/components/02-molecules/tile-item/yds-tile-item.twig index 014c2f72a..623ff487b 100644 --- a/components/02-molecules/tile-item/yds-tile-item.twig +++ b/components/02-molecules/tile-item/yds-tile-item.twig @@ -15,6 +15,12 @@ {# If tile__item__attributes is not defined, set it to an empty object by default #} {% set tile__item__attributes = tile__item__attributes|default({}) %} +{% if tile__item__content_link and tile__item__content %} +{% set tile__item__attributes = tile__item__attributes|merge({ + 'data-component-linked-tile': 'true', +}) %} +{% endif %} + {% set tile__item__attributes = tile__item__attributes|merge({ 'data-component-tile-style': tile__item__presentation_style, 'data-component-alignment': tile__item__alignment|default('left'), From 717316cc48f90d2555374f035eff301c9ae43ecb Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 27 Mar 2024 13:12:54 -0500 Subject: [PATCH 12/16] feat(YSP-413): if content is linked make it the same size and style as unlinked content --- components/02-molecules/tile-item/_yds-tile-item.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index f68228a99..0893468a2 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -195,6 +195,7 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); .tile__item__link { @include atoms.plain-link; + @include tokens.h4-yale-new; &:hover { --color-link-hover: var(--color-tile-item-content); From 905a63badabff62548be5dc658a9d77ede161ed6 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 27 Mar 2024 13:57:26 -0500 Subject: [PATCH 13/16] feat(YSP-413): add visited states and tile-item:hover and :visited no underline --- components/02-molecules/tile-item/_yds-tile-item.scss | 9 +++++++-- components/02-molecules/tile-item/tile-item.yml | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 0893468a2..28d7fae59 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -197,7 +197,12 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); @include atoms.plain-link; @include tokens.h4-yale-new; - &:hover { - --color-link-hover: var(--color-tile-item-content); + // when hovering over the tile item, remove the underline on the link + .tile__item:hover & { + text-decoration: none; } } + +.tile__item:hover .tile__item__link:visited { + color: var(--color-link-visited-hover); +} diff --git a/components/02-molecules/tile-item/tile-item.yml b/components/02-molecules/tile-item/tile-item.yml index ab6f035bc..eb3998920 100644 --- a/components/02-molecules/tile-item/tile-item.yml +++ b/components/02-molecules/tile-item/tile-item.yml @@ -1,2 +1,2 @@ tile__item__number: '01' -tile__item__content: This is a tile item component! +tile__item__content: This is a tile item with content! From 4026f6dac63d2049f8e98a8ebf22cffd5dcba1a6 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 27 Mar 2024 13:59:16 -0500 Subject: [PATCH 14/16] feat(YSP-413): removed clickable-heading mixin since none of the selectors match --- components/02-molecules/tile-item/_yds-tile-item.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 28d7fae59..a71d8a4f5 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -105,7 +105,6 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // if the tile item is a link, make the whole tile item clickable [data-component-linked-tile='true'] & { - @include atoms.clickable-component-heading-link; @include atoms.clickable-component-image; } From 7b0453cd465550f9b0d9145a95f42f90c2e9700b Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 29 Mar 2024 08:45:25 -0500 Subject: [PATCH 15/16] feat(YSP-413): update link:hover color --- components/02-molecules/tile-item/_yds-tile-item.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index a71d8a4f5..780b28dd8 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -196,6 +196,10 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); @include atoms.plain-link; @include tokens.h4-yale-new; + &:hover { + color: var(--color-tile-item-content); + } + // when hovering over the tile item, remove the underline on the link .tile__item:hover & { text-decoration: none; From c14576f639eee62af891ae43cb8afd2c2f9c51fe Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 2 Apr 2024 11:27:28 -0500 Subject: [PATCH 16/16] feat(YSP-413): update hover styles to only apply to tile items that are linked --- components/02-molecules/tile-item/_yds-tile-item.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 780b28dd8..d0e0b4421 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -186,7 +186,7 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); background-color: var(--color-tile-item-theme); opacity: 0.85; - .tile__item:hover & { + .tile__item[data-component-linked-tile='true']:hover & { opacity: 0.95; } }