YSP-413: Stats component | YSP-428: Tiles Components

components/02-molecules/stat/_yds-stat.scss → 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,19 +25,19 @@ $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);
     }
   }
 
   // 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-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%;

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,
+}) => `
+
+  <ul class='infographic__group__wrap' data-infographic-collection-type='single'>
+    ${infographicTwig({
+      infographic__stat: infographicData.infographic__stat,
+      infographic__content: infographicData.infographic__content,
+      infographic__presentation_style: 'basic',
+      infographic__has_icon: 'false',
+      infographic__alignment: 'center',
+    })}
+    ${infographicTwig({
+      infographic__stat: infographicData.infographic__stat,
+      infographic__presentation_style: 'basic',
+      infographic__has_icon: 'true',
+      infographic__alignment: 'left',
+    })}
+    ${infographicTwig({
+      infographic__stat: infographicData.infographic__stat,
+      infographic__content: infographicData.infographic__content,
+      infographic__presentation_style: 'basic',
+      infographic__alignment: 'center',
+      infographic__has_icon: 'true',
+    })}
+  </ul>
+  <div class="wrap-for-global-theme" data-global-theme="one">
+  <h2>Playground</h2>
+    <p>Use the StoryBook controls to see the infographic below implement the available variations.</p>
+    <ul class='infographic__group__wrap' data-infographic-collection-type='single'>
+      ${infographicTwig({
+        infographic__stat: infographic,
+        infographic__content: content,
+        infographic__presentation_style: presentationStyle,
+        infographic__font_style: fontStyle,
+        infographic__alignment: alignment,
+        infographic__theme: themeColor,
+        infographic__has_icon: infographicIcon ? 'true' : 'false',
+      })}
+    </ul>
+  </div>
+`;

components/02-molecules/infographic/infographic.yml

@@ -0,0 +1,2 @@
+infographic__stat: $52,000
+infographic__content: Annual grant of Undergraduate students

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),
+}) %}
+
+<li {{ add_attributes(infographic__attributes) }}>
+	<div {{ bem('inner', [], infographic__base_class) }}>
+		{% if infographic__has_icon == 'true' %}
+			{% block infographic__icon %}
+				<div {{ bem('icon', [], infographic__base_class) }}>
+					{% 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,
+          } %}
+				</div>		
+			{% endblock %}
+		{% endif %}	
+			<div {{ bem('stat', [], infographic__base_class) }}>
+				{{ infographic__stat }}
+			</div>
+      <div {{ bem('content', [], infographic__base_class) }}>
+				{{ infographic__content }}
+			</div>
+	</div>
+</li>

components/02-molecules/molecules.scss

@@ -29,4 +29,5 @@
 @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';
+@forward './tile-item/yds-tile-item';