Merge branch 'main' of github.com:emulsify-ds/emulsify-ui-kit into em…

…ulsify-74-fieldset
emulsify-ds · May 10, 2024 · 676e4e4 · 676e4e4
2 parents 312e4d4 + ce1bf64
commit 676e4e4
Show file tree

Hide file tree

Showing 14 changed files with 325 additions and 62 deletions.
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -1,7 +1,9 @@
 /* stylelint-disable no-descending-specificity */
 @use '../../stylesheets/mixins.scss';
 
-$accordion_icon_size: var(--size-xl);
+$accordion_icon_size: var(--font-size-lead);
+$accordion_padding_x: calc(var(--spacing-lg) * 5);
+$accordion_padding_y: calc(var(--spacing-lg) * 1.25);
 
 // The accordion group.
 .accordion {
@@ -34,6 +36,7 @@ $accordion_icon_size: var(--size-xl);
   gap: var(--spacing-sm);
   align-items: center;
   width: 100%;
+  padding-right: var(--spacing-lg);
 
   &:hover {
     color: var(--accordion-color-header-hover);
@@ -49,7 +52,7 @@ $accordion_icon_size: var(--size-xl);
   outline: inherit;
   display: flex;
   color: var(--colors-text-body);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-body);
   gap: var(--spacing-sm);
   align-items: center;
 
@@ -81,16 +84,16 @@ $accordion_icon_size: var(--size-xl);
 // Individual accordion items.
 .accordion-item {
   border-bottom: 1px solid var(--accordion-divider-color);
-  padding-top: var(--spacing-lg);
+  padding-top: calc(var(--spacing-lg) * 1.125);
 }
 
 .accordion-item__heading {
-  @include heading-medium;
+  @include heading-small;
 
   font-weight: normal;
   display: flex;
-  margin: 0 0 var(--spacing-lg);
   color: var(--accordion-color-header);
+  margin: 0 0 $accordion_padding_y;
 
   &:hover {
     color: var(--accordion-color-header-hover);
@@ -99,13 +102,18 @@ $accordion_icon_size: var(--size-xl);
       fill: var(--accordion-color-header-hover);
     }
   }
+
+  [data-accordion-expanded='false'] & {
+    color: var(--accordion-color-body);
+  }
 }
 
 .accordion-item__icon {
   margin-left: auto;
   height: $accordion_icon_size;
   width: $accordion_icon_size;
-  fill: var(--accordion-color-header);
+  fill: var(--accordion-color-body);
+  transition: transform 0.3s;
 
   [aria-expanded='true'] > & {
     transform: rotate(180deg);
@@ -114,14 +122,21 @@ $accordion_icon_size: var(--size-xl);
 
 .accordion-item__content {
   overflow: hidden;
+  padding: 0 var(--spacing-lg);
+  color: var(--accordion-color-body);
+  font-family: var(--font-family-body);
 
   [data-accordion-expanded='true'] & {
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: $accordion_padding_y;
   }
 
   [data-accordion-expanded='false'] & {
     max-height: 0;
   }
+
+  @include medium {
+    padding: 0 $accordion_padding_x;
+  }
 }
 
 /* stylelint-enable no-descending-specificity */
diff --git a/src/components/accordion/accordion.stories.js b/src/components/accordion/accordion.stories.js
@@ -23,7 +23,7 @@ export default {
   },
   decorators: [
     (story) =>
-      `<div style="max-width: 700px; margin: 0 auto;">${story()}</div>`,
+      `<div style="max-width: 890px; margin: 0 auto;">${story()}</div>`,
   ],
 };
 

diff --git a/src/components/accordion/accordion.yml b/src/components/accordion/accordion.yml
@@ -1,2 +1,2 @@
-accordion__item__heading: 'Art Collections'
-accordion__item__content: 'The Yale Center for British Art will present <em><a href="https://britishart.yale.edu/exhibitions-programs/bridget-riley-perceptual-abstraction">Bridget Riley: Perceptual Abstraction</a></em> from March 3 through July 24, 2022. Born in Britain in 1931, Riley is among the most important and influential painters in Britain and the world. Displayed on two floors, this major survey traces Riley’s oeuvre from the 1960s through the present by featuring over fifty works that were selected by the artist in collaboration with the YCBA. Also, revisit an exhibition hosted at the Yale University Art Gallery, <a href="https://artgallery.yale.edu/exhibitions/exhibition/basis-art-150-years-women-yale">On the Basis of Art: 150 Years of Women at Yale</a>, including a related audio guide, publication, and more.'
+accordion__item__heading: 'Header label text'
+accordion__item__content: 'Enim eget nec sit scelerisque lacus. Porttitor senectus vulputate mattis tortor odio vitae. Dui et, ut ipsum aliquet sit tempor. Amet consectetur purus justo feugiat mattis sit ultricies odio.  Pellentesque pellentesque sit sed porttitor duis interdum. Bibendum nisl, eu, ornare non. Enim consequat in quisque vestibulum facilisi odio. Elementum elit est, vitae feugiat enim odio cursus. Enim cum dictum gravida amet id eget. Ut ac velit sed nulla leo id. Ante duis pellentesque aliquam massa amet, neque cum. Vitae mi purus placerat nibh purus faucibus imperdiet quisque diam. Elementum urna feugiat rhoncus purus. Consectetur neque auctor eite commodo consequat. '
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -13,8 +13,9 @@
 .card__heading {
   @include heading-large($font-size: var(--font-size-h3));
 
+  color: var(--color-text-heading);
   margin: 0;
-  line-height: var(--line-heights-tight);
+  line-height: var(--line-height-tight);
 
   &-link {
     @include link;
@@ -26,12 +27,16 @@
 .card__subheading {
   @include heading-medium($font-size: var(--font-size-small));
 
-  color: var(--colors-grays-500);
+  color: var(--color-grays-500);
   margin: 0 0 var(--spacing-md);
-  line-height: var(--line-heights-tight);
+  line-height: var(--line-height-tight);
   text-transform: uppercase;
 }
 
+.card__body {
+  color: var(--color-text-body);
+}
+
 .card__link {
   @include link;
 }

diff --git a/src/components/forms/checkbox/_checkbox-item.twig b/src/components/forms/checkbox/_checkbox-item.twig
@@ -1,8 +1,8 @@
 {% set labelClasses = checkbox_item_disabled ? 'form-item--checkbox__item--label__disabled' : '' %}
 
 <li class="form-item--checkbox__item">
+	<input id="checkbox{{ key }}" name="checkbox" type="checkbox" {% if checkbox_item_checked %} checked="{{ checkbox_item_checked }}" {% endif %} {% if checkbox_item_disabled %} disabled="{{ checkbox_item_disabled }}" {% endif %}>
 	<label for="checkbox{{ key }}" class="form-item--checkbox__item--label {{ labelClasses }}">
-		<input id="checkbox{{ key }}" name="checkbox" type="checkbox" {% if checkbox_item_checked %} checked="{{ checkbox_item_checked }}" {% endif %} {% if checkbox_item_disabled %} disabled="{{ checkbox_item_disabled }}" {% endif %}>
 		{{ checkbox_item }}
 	</label>
 </li>
diff --git a/src/components/forms/checkbox/_checkbox.scss b/src/components/forms/checkbox/_checkbox.scss
@@ -6,13 +6,61 @@
 .form-item--checkboxes {
   display: flex;
   flex-flow: column nowrap;
-  gap: var(--checkbox-gap);
+  gap: var(--checkbox-spacing-gap);
 }
 
 .form-item--checkbox__item--label {
-  color: var(--checkbox-label);
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: calc(var(--spacing-lg) + var(--spacing-sm));
+  color: var(--checkbox-color-label);
+  font-size: var(--font-size-caption);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 5px;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--checkbox-button-stroke);
+    background-color: transparent;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 7px;
+    width: 5px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+    display: none;
+  }
 }
 
 .form-item--checkbox__item--label__disabled {
-  color: var(--checkbox-label-disabled);
+  color: var(--checkbox-color-label-disabled);
+
+  &::before {
+    border-color: var(--checkbox-button-stroke-disabled);
+  }
+}
+
+.form-item--checkbox__item {
+  input[type='checkbox'] {
+    @include sr-only;
+  }
+
+  input[type='checkbox']:checked + .form-item--checkbox__item--label::before {
+    background-color: var(--checkbox-button-fill);
+  }
+
+  input[type='checkbox']:checked + .form-item--checkbox__item--label::after {
+    display: block;
+    border-color: white;
+  }
 }
diff --git a/src/components/forms/radio/_radio-item.twig b/src/components/forms/radio/_radio-item.twig
@@ -1,8 +1,8 @@
 {% set labelClasses = radio_item_disabled ? 'form-item--radio__item--label__disabled' : '' %}
 
-<li class="form-item--radio__item {{ labelClasses }}">
-	<label for="radio{{ key }}">
-		<input id="radio{{ key }}" name="radio" type="radio" class="radio" {% if radio_item_checked %} checked="{{ radio_item_checked }}" {% endif %} {% if radio_item_disabled %} disabled="{{ radio_item_disabled }}" {% endif %}>
+<li class="form-item--radio__item">
+	<input id="radio{{ key }}" name="radio" type="radio" class="radio" {% if radio_item_checked %} checked="{{ radio_item_checked }}" {% endif %} {% if radio_item_disabled %} disabled="{{ radio_item_disabled }}" {% endif %}>
+	<label for="radio{{ key }}" class="form-item--radio__item--label {{ labelClasses }}">
 		{{ radio_item }}
 	</label>
 </li>
diff --git a/src/components/forms/radio/_radio.scss b/src/components/forms/radio/_radio.scss
@@ -10,9 +10,52 @@
 }
 
 .form-item--radio__item--label {
-  color: var(--radio-label);
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: calc(var(--spacing-lg) + var(--spacing-sm));
+  color: var(--radio-color-label);
+  font-size: var(--font-size-caption);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 5px;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--checkbox-button-stroke);
+    background-color: transparent;
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 9px;
+    width: 8px;
+    height: 8px;
+    display: none;
+    background-color: var(--radio-color-button-fill);
+    border-radius: 50%;
+  }
 }
 
 .form-item--radio__item--label__disabled {
-  color: var(--radio-label-disabled);
+  color: var(--radio-color-button-fill-disabled);
+
+  &::before {
+    border-color: var(--radio-button-stroke-disabled);
+  }
+}
+
+.form-item--radio__item {
+  input[type='radio'] {
+    @include sr-only;
+  }
+
+  input[type='radio']:checked + .form-item--radio__item--label::after {
+    display: block;
+  }
 }
diff --git a/src/components/text/text/_text.scss b/src/components/text/text/_text.scss
@@ -2,7 +2,7 @@
  * in components with other classnames.
 */
 @mixin paragraph($margin: 0 0 var(--spacing-lg)) {
-  line-height: var(--line-heights-normal);
+  line-height: var(--line-height-normal);
   margin: $margin;
 }
 

diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Mar 2024 19:50:05 GMT
+ * Generated on Fri, 10 May 2024 20:46:35 GMT
  */
 
 :root {
@@ -16,7 +16,7 @@
   --tabs-color-bg-hover: #ffffff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
-  --tabs-color-text-hover: #33b2e9;
+  --tabs-color-text-hover: #009fe4;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
   --table-color-cell-bg: #ffffff;
@@ -97,7 +97,16 @@
   --radius-lg: 1.25rem;
   --cta-header: [object Object];
   --cta-body: [object Object];
-  --cta-fill: #00202e;
+  --cta-eyebrow: [object Object];
+  --cta-button: [object Object];
+  --cta-color-heading: #006089;
+  --cta-color-heading-darker: #006089;
+  --cta-color-eyebrow: #006089;
+  --cta-color-body: #00202e;
+  --cta-color-button: #ffffff;
+  --cta-background: #9ce1ff;
+  --cta-button-background: #009fe4;
+  --cta-button-background-darker: #006089;
   --checkbox-color-label: #00202e;
   --checkbox-color-label-disabled: #a9afb1;
   --checkbox-button-fill: #009fe4;
@@ -140,19 +149,21 @@
   --accordion-header: [object Object];
   --accordion-p: [object Object];
   --accordion-color-body: #00202e;
-  --accordion-color-header: #0080b7;
-  --accordion-color-header-hover: #33b2e9;
+  --accordion-color-header: #006089;
+  --accordion-color-header-hover: #009fe4;
   --accordion-divider-color: #545f64;
   --color-primary-default: #009fe4;
   --color-primary-light: #1ebbff;
   --color-primary-lighter: #9ce1ff;
   --color-primary-dark: #0080b7;
   --color-primary-darker: #006089;
   --color-text-body: #00202e;
-  --color-text-heading: #0080b7;
+  --color-text-body-lighter: #006089;
+  --color-text-heading: #006089;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
-  --color-link: #33b2e9;
-  --color-link-hover: #009fe4;
+  --color-link: #009fe4;
+  --color-link-hover: #007fb6;
   --color-black: #000000;
   --color-white: #ffffff;
   --color-emulsify-blue-100: #e6f5fc;

diff --git a/src/style.scss b/src/style.scss
@@ -10,7 +10,7 @@ body {
   color: var(--colors-text-body);
   font-family: var(--font-family-body);
   font-size: var(--font-size-body);
-  line-height: var(--line-heights-normal);
+  line-height: var(--line-height-normal);
 }
 
 *,
@@ -20,8 +20,9 @@ body {
 }
 
 // Components
+
 @import 'tokens/**/*.scss';
 @import 'stylesheets/**/*.scss';
 @import 'storybook-styles/**/*.scss';
 @import 'docs/**/*.scss';
-@import 'components/**/*.scss';
+@import 'components/**/*.scss';
diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
@@ -186,10 +186,22 @@ $outer-container-break: var(--breakpoint-sm);
 }
 
 @mixin link {
-  color: var(--link-default);
+  color: var(--link-color-default);
   transition: all .15s;
 
   &:hover {
-    color: var(--link-hover);
+    color: var(--link-color-hover);
   }
-}
+}
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}