Merge pull request #118 from emulsify-ds/fix-add-missing-components

Feat: Update emulsify core to latest release, adjust stylint/prettier complaints

components/00-base/00-defaults/_03-mixins.scss

@@ -11,9 +11,11 @@
 */
 
 @mixin body-copy {
-  font-family: $font-body;
-  font-size: 1rem;
-  line-height: 1.6;
+  & {
+    font-family: $font-body;
+    font-size: 1rem;
+    line-height: 1.6;
+  }
 }
 
 @mixin clearfix {
@@ -55,15 +57,21 @@
 
 // Mixin - Standard Margin
 @mixin margin {
-  margin-bottom: 1em;
+  & {
+    margin-bottom: 1em;
+  }
 }
 
 @mixin no-bottom {
-  margin-bottom: 0;
+  & {
+    margin-bottom: 0;
+  }
 }
 
 @mixin list-reset {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  & {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }

components/00-base/01-colors/colors.js

@@ -4,7 +4,7 @@ Drupal.behaviors.displayColorDefinitions = {
      * Converts a number to a two-digit hexadecimal string.
      *
      * @param {number} x The number to convert.
-     * @returns {string} Two-digit hexadecimal representation of the number.
+     * @return {string} Two-digit hexadecimal representation of the number.
      */
     function hex(x) {
       return `0${parseInt(x, 10).toString(16)}`.slice(-2);
@@ -14,21 +14,21 @@ Drupal.behaviors.displayColorDefinitions = {
      * Converts an rgb color string to a hex color string.
      *
      * @param {string} color The RGB color string (e.g., 'rgb(255, 255, 255)').
-     * @returns {string} The hexadecimal color string (e.g., '#ffffff').
+     * @return {string} The hexadecimal color string (e.g., '#ffffff').
      */
     function rgb2hex(color) {
       const rgb = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
       return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`;
     }
 
-    const swatches = document.querySelectorAll('.cl-colors__item');
+    const swatches = document.querySelectorAll(".cl-colors__item");
     if (swatches) {
       swatches.forEach((swatch) => {
         const color = window
-          .getComputedStyle(swatch.querySelector('.cl-colors__swatch'), null)
-          .getPropertyValue('background-color');
+          .getComputedStyle(swatch.querySelector(".cl-colors__swatch"), null)
+          .getPropertyValue("background-color");
 
-        const definition = swatch.querySelector('.cl-colors__definition');
+        const definition = swatch.querySelector(".cl-colors__definition");
         definition.textContent = rgb2hex(color);
       });
     }

components/00-base/01-colors/colors.stories.js

@@ -1,13 +1,13 @@
-import colors from './colors.twig';
+import colors from "./colors.twig";
 
-import colorsData from './colors.yml';
-import './colors';
+import colorsData from "./colors.yml";
+import "./colors";
 
 /**
  * Storybook Definition.
  */
 export default {
-  title: 'Base/Colors',
+  title: "Base/Colors",
 };
 
 export const Palettes = () => colors(colorsData);

components/00-base/02-motion/motion.stories.js

@@ -1,10 +1,10 @@
-import motion from './motion.twig';
+import motion from "./motion.twig";
 
-import motionData from './motion.yml';
+import motionData from "./motion.yml";
 
 /**
  * Add storybook definition for Animations.
  */
-export default { title: 'Base/Motion' };
+export default { title: "Base/Motion" };
 
 export const Usage = () => motion(motionData);

components/00-base/03-site/_base.scss

@@ -21,7 +21,9 @@ body {
 .main {
   @include wrapper;
 
-  display: block; /* Fix for IE weirdness */
+  & {
+    display: block;
+  }
 }
 
 .visually-hidden {

components/00-base/04-spacing/spacing.stories.js

@@ -1,8 +1,8 @@
-import spacingTwig from './spacing.twig';
-import spacingData from './spacing.yml';
+import spacingTwig from "./spacing.twig";
+import spacingData from "./spacing.yml";
 
 export default {
-  title: 'Base/Spacing',
+  title: "Base/Spacing",
 };
 
 export const Spacing = () => spacingTwig(spacingData);

components/01-atoms/atoms.scss

@@ -1,14 +1,14 @@
-@forward "./buttons/buttons";
-@forward "./forms/checkbox/checkbox";
-@forward "./forms/radio/radio";
-@forward "./forms/select/select";
-@forward "./forms/textfields/textfields";
-@forward "./images/image/image";
-@forward "./images/icons/icons";
-@forward "./links/link/link";
-@forward "./lists/list";
-@forward "./tables/tables";
-@forward "./text/headings/headings";
-@forward "./text/text/text";
-@forward "./tooltip/tooltip";
-@forward "./videos/video";
+@forward "buttons/buttons";
+@forward "forms/checkbox/checkbox";
+@forward "forms/radio/radio";
+@forward "forms/select/select";
+@forward "forms/textfields/textfields";
+@forward "images/image/image";
+@forward "images/icons/icons";
+@forward "links/link/link";
+@forward "lists/list";
+@forward "tables/tables";
+@forward "text/headings/headings";
+@forward "text/text/text";
+@forward "tooltip/tooltip";
+@forward "videos/video";

components/01-atoms/buttons/_buttons.scss

@@ -83,13 +83,17 @@ $button-colors: (
 
 // Button size variations
 @mixin button-medium {
-  line-height: 1.4;
-  padding: $space-one-half $space;
+  & {
+    line-height: 1.4;
+    padding: $space-one-half $space;
+  }
 }
 
 @mixin button-large {
-  line-height: 2;
-  padding: $space $space-double;
+  & {
+    line-height: 2;
+    padding: $space $space-double;
+  }
 }
 
 .button {

components/01-atoms/buttons/buttons.stories.js

@@ -1,13 +1,13 @@
 // Buttons Stories
-import button from './button.twig';
+import button from "./button.twig";
 
-import buttonData from './button.yml';
-import buttonAltData from './button-alt.yml';
+import buttonData from "./button.yml";
+import buttonAltData from "./button-alt.yml";
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Button' };
+export default { title: "Atoms/Button" };
 
 export const twig = () => button(buttonData);
 

components/01-atoms/forms/forms.stories.js

@@ -1,16 +1,16 @@
-import checkbox from './checkbox/checkbox.twig';
-import radio from './radio/radio.twig';
-import select from './select/select.twig';
-import textfields from './textfields/textfields.twig';
+import checkbox from "./checkbox/checkbox.twig";
+import radio from "./radio/radio.twig";
+import select from "./select/select.twig";
+import textfields from "./textfields/textfields.twig";
 
-import checkboxData from './checkbox/checkbox.yml';
-import radioData from './radio/radio.yml';
-import selectOptionsData from './select/select.yml';
+import checkboxData from "./checkbox/checkbox.yml";
+import radioData from "./radio/radio.yml";
+import selectOptionsData from "./select/select.yml";
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Forms' };
+export default { title: "Atoms/Forms" };
 
 export const checkboxes = () => checkbox(checkboxData);
 

components/01-atoms/images/images.stories.js

@@ -1,21 +1,21 @@
-import image from './image/responsive-image.twig';
-import figure from './image/figure.twig';
-import iconTwig from './icons/icons.twig';
+import image from "./image/responsive-image.twig";
+import figure from "./image/figure.twig";
+import iconTwig from "./icons/icons.twig";
 
-import imageData from './image/image.yml';
-import figureData from './image/figure.yml';
+import imageData from "./image/image.yml";
+import figureData from "./image/figure.yml";
 
-const svgIcons = require.context('../../../assets/icons/', true, /\.svg$/);
+const svgIcons = require.context("../../../assets/icons/", true, /\.svg$/);
 const icons = [];
 svgIcons.keys().forEach((key) => {
-  const icon = key.split('./')[1].split('.')[0];
+  const icon = key.split("./")[1].split(".")[0];
   icons.push(icon);
 });
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Images' };
+export default { title: "Atoms/Images" };
 
 export const images = () => image(imageData);
 

components/01-atoms/links/link/links.stories.js

@@ -1,10 +1,10 @@
-import link from './link.twig';
+import link from "./link.twig";
 
-import linkData from './link.yml';
+import linkData from "./link.yml";
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Links' };
+export default { title: "Atoms/Links" };
 
 export const links = () => link(linkData);

components/01-atoms/lists/_list.scss

@@ -4,13 +4,17 @@
 ul {
   @include list-reset;
 
-  list-style-type: disc;
+  & {
+    list-style-type: disc;
+  }
 }
 
 ol {
   @include list-reset;
 
-  list-style-type: decimal;
+  & {
+    list-style-type: decimal;
+  }
 }
 
 .text-field {

components/01-atoms/lists/list.stories.js

@@ -1,13 +1,13 @@
-import listTwig from './list.twig';
-import dlTwig from './dl.twig';
+import listTwig from "./list.twig";
+import dlTwig from "./dl.twig";
 
-import listData from './list.yml';
-import dlData from './dl.yml';
+import listData from "./list.yml";
+import dlData from "./dl.yml";
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Lists' };
+export default { title: "Atoms/Lists" };
 
 export const UnorderedList = () => `
   <div class="text-field">
@@ -16,15 +16,15 @@ export const UnorderedList = () => `
 `;
 export const OrderedList = () => `
 <div class="text-field">
-  ${listTwig({ list__items: listData.ordered__list__items, list__type: 'ol' })}
+  ${listTwig({ list__items: listData.ordered__list__items, list__type: "ol" })}
 </div>
 `;
 export const DescriptionList = () => `
 <div class="text-field">
   ${dlTwig({
     dl__items: dlData.dl__items,
-    list__type: 'dl',
-    list__base_class: 'description',
+    list__type: "dl",
+    list__base_class: "description",
   })}
 </div>
 `;

components/01-atoms/tables/tables.stories.js

@@ -1,9 +1,9 @@
-import tableTwig from './tables.twig';
-import tableData from './tables.yml';
+import tableTwig from "./tables.twig";
+import tableData from "./tables.yml";
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Tables' };
+export default { title: "Atoms/Tables" };
 
 export const tables = () => tableTwig(tableData);

components/01-atoms/text/text.stories.js

@@ -1,20 +1,20 @@
-import heading from './headings/_heading.twig';
-import blockquote from './text/02-blockquote.twig';
-import pre from './text/05-pre.twig';
-import paragraph from './text/03-inline-elements.twig';
-import code from './text/07-code.twig';
+import heading from "./headings/_heading.twig";
+import blockquote from "./text/02-blockquote.twig";
+import pre from "./text/05-pre.twig";
+import paragraph from "./text/03-inline-elements.twig";
+import code from "./text/07-code.twig";
 
-import blockquoteData from './text/blockquote.yml';
-import headingData from './headings/headings.yml';
-import codeData from './text/code.yml';
+import blockquoteData from "./text/blockquote.yml";
+import headingData from "./headings/headings.yml";
+import codeData from "./text/code.yml";
 
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Text' };
+export default { title: "Atoms/Text" };
 
 // Loop over items in headingData to show each one in the example below.
-const headings = headingData.map((d) => heading(d)).join('');
+const headings = headingData.map((d) => heading(d)).join("");
 
 export const headingsExamples = () => headings;