#57 Dependency Improvements & Refactoring & Renaming

.storybook/preview.js

@@ -4,7 +4,7 @@ import Twig from 'twig';
 import { setupTwig } from './setupTwig';
 
 // GLOBAL CSS
-import '../components/style.scss';
+import '../components/global.scss';
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
 import './_drupal.js';

.storybook/webpack.config.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const globImporter = require('node-sass-glob-importer');
 const { namespaces } = require('./setupTwig');
 
@@ -35,6 +36,7 @@ module.exports = async ({ config }) => {
           sassOptions: {
             importer: globImporter(),
           },
+          additionalData: `@import "${path.resolve(__dirname, '../components/_import.scss')}";`,
         },
       },
     ],

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

@@ -66,3 +66,20 @@ $outer-container-break: $small;
   margin: 0;
   padding: 0;
 }
+
+///////////
+// Usage //
+///////////
+// This color function makes it easy for you to call a color by it's functional
+// name anywhere you need.
+// E.g. to use the `text` color, you type: `color: clr(text);`
+//
+// How it works:
+// This function works in conjunction with the dynamic css custom properties
+// declarations below. The item called in the function is prefixed with
+// `var(--c-` to call the custom property for that color.
+// E.g. `color: clr(text);` will return `color: var(--c-text);`
+// Note: (The `--c-` is added via the `@each` loops below)
+@function clr($colorChoice) {
+  @return var(--c-#{$colorChoice});
+}

components/00-base/01-colors/colors-used.scss

@@ -37,23 +37,6 @@ $darkColors: (
   message: colors-vars.$green-light,
 );
 
-///////////
-// Usage //
-///////////
-// This color function makes it easy for you to call a color by it's functional
-// name anywhere you need.
-// E.g. to use the `text` color, you type: `color: clr(text);`
-//
-// How it works:
-// This function works in conjunction with the dynamic css custom properties
-// declarations below. The item called in the function is prefixed with
-// `var(--c-` to call the custom property for that color.
-// E.g. `color: clr(text);` will return `color: var(--c-text);`
-// Note: (The `--c-` is added via the `@each` loops below)
-@function clr($colorChoice) {
-  @return var(--c-#{$colorChoice});
-}
-
 // Create CSS custom properties
 // This is what powers the built-in OS light/dark mode switching.
 // For each color variable above (e.g. `text` and `background`) a css custom

components/00-base/02-motion/_motion.mixin.scss

@@ -0,0 +1,8 @@
+@mixin transition(
+  $transition-property: all,
+  $transition-duration: $transition-duration-base,
+  $transition-timing-function: $transition-timing-function-base
+) {
+  transition: $transition-property $transition-duration
+    $transition-timing-function;
+}

components/00-base/02-motion/_motion.scss

@@ -2,15 +2,6 @@
 $transition-duration-base: 0.3s;
 $transition-timing-function-base: ease-in-out;
 
-@mixin transition(
-  $transition-property: all,
-  $transition-duration: $transition-duration-base,
-  $transition-timing-function: $transition-timing-function-base
-) {
-  transition: $transition-property $transition-duration
-    $transition-timing-function;
-}
-
 // Demo UI
 .motion {
   padding: 0 1rem;

components/01-atoms/buttons/_buttons.component.scss

@@ -0,0 +1,12 @@
+@import '../../import';
+
+.button {
+  @include button-base;
+  @include button-color-primary;
+  @include button-medium;
+
+  &--alt {
+    @include button-color-secondary;
+    @include button-large;
+  }
+}

components/01-atoms/buttons/_buttons.scss → components/01-atoms/buttons/_buttons.mixin.scss

@@ -87,14 +87,3 @@ $button-colors: (
   line-height: 2;
   padding: $space $space-double;
 }
-
-.button {
-  @include button-base;
-  @include button-color-primary;
-  @include button-medium;
-
-  &--alt {
-    @include button-color-secondary;
-    @include button-large;
-  }
-}

components/01-atoms/buttons/button.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.buttons') }}
+
 {#
 /**
  * Available variables:

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

@@ -4,6 +4,8 @@ import button from './button.twig';
 import buttonData from './button.yml';
 import buttonAltData from './button-alt.yml';
 
+import './_buttons.component.scss';
+
 /**
  * Storybook Definition.
  */

components/01-atoms/buttons/libraries.yml

@@ -0,0 +1,5 @@
+atoms.buttons:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/buttons/_buttons.css: {}

components/01-atoms/forms/checkbox/checkbox.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.forms.checkbox') }}
+
 {% if not attributes %}
 <fieldset class="form-item form-item--checkbox">
   <legend class="h3">Options as Checkboxes</legend>

components/01-atoms/forms/checkbox/libraries.yml

@@ -0,0 +1,5 @@
+atoms.forms.checkbox:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/forms/checkbox/_checkbox.css: {}

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

@@ -7,6 +7,11 @@ import checkboxData from './checkbox/checkbox.yml';
 import radioData from './radio/radio.yml';
 import selectOptionsData from './select/select.yml';
 
+import './checkbox/_checkbox.component.scss';
+import './radio/_radio.component.scss';
+import './select/_select.component.scss';
+import './textfields/_textfields.component.scss';
+
 /**
  * Storybook Definition.
  */

components/01-atoms/forms/radio/libraries.yml

@@ -0,0 +1,5 @@
+atoms.forms.radio:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/forms/radio/_radio.css: {}

components/01-atoms/forms/select/_select-item.twig

@@ -1 +1,3 @@
+{{ attach_library('emulsify/atoms.forms.select') }}
+
 <option>{{ select_item }}</option>

components/01-atoms/forms/select/libraries.yml

@@ -0,0 +1,5 @@
+atoms.forms.select:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/forms/select/_select.css: {}

components/01-atoms/forms/textfields/libraries.yml

@@ -0,0 +1,5 @@
+atoms.forms.textfields:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/forms/textfields/_textfields.css: {}

components/01-atoms/forms/textfields/textfields.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.forms.textfields') }}
+
 <div class="form-item">
   <label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield">Name</label>
   <input id="edit-name" autocorrect="none" autocapitalize="none" spellcheck="false" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" placeholder="First, Middle, Last">

components/01-atoms/images/icons/icons.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.images.icons') }}
+
 <div class="icons-demo" id="icons">
   {% for item in icons %}
     <div class="icons-demo__item">

components/01-atoms/images/icons/libraries.yml

@@ -0,0 +1,5 @@
+atoms.images.icons:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/images/icons/_icons.css: {}

components/01-atoms/images/image/_image.scss → components/01-atoms/images/image/_image.component.scss

@@ -1,9 +1,3 @@
-@mixin image {
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
-
 img,
 picture {
   @include image;

components/01-atoms/images/image/_image.mixin.scss

@@ -0,0 +1,5 @@
+@mixin image {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}

components/01-atoms/images/image/_image.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.images.image') }}
+
 {% set image_base_class = image_base_class|default('image') %}
 
 <img

components/01-atoms/images/image/_picture.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.images.image') }}
+
 {% set picture_base_class = picture_base_class|default('picture') %}
 
 <picture

components/01-atoms/images/image/libraries.yml

@@ -0,0 +1,5 @@
+atoms.images.image:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/images/image/_image.css: {}

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

@@ -5,6 +5,9 @@ import iconTwig from './icons/icons.twig';
 import imageData from './image/image.yml';
 import figureData from './image/figure.yml';
 
+import './icons/_icons.component.scss';
+import './image/_image.component.scss';
+
 const svgIcons = require.context('../../../images/icons/', true, /\.svg$/);
 const icons = [];
 svgIcons.keys().forEach((key) => {

components/01-atoms/links/link/_link.component.scss

@@ -0,0 +1,3 @@
+.link {
+  @include link;
+}

components/01-atoms/links/link/_link.scss → components/01-atoms/links/link/_link.mixin.scss

@@ -5,7 +5,3 @@
     color: clr(accent-high);
   }
 }
-
-.link {
-  @include link;
-}

components/01-atoms/links/link/libraries.yml

@@ -0,0 +1,5 @@
+atoms.links.link:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/links/link/_link.css: {}

components/01-atoms/links/link/link.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.links.link') }}
+
 {#
 /**
  * Available variables:

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

@@ -2,6 +2,8 @@ import link from './link.twig';
 
 import linkData from './link.yml';
 
+import './_link.component.scss';
+
 /**
  * Storybook Definition.
  */

components/01-atoms/lists/_list.scss → components/01-atoms/lists/_list.component.scss

@@ -9,9 +9,3 @@ ol {
 
   list-style-type: decimal;
 }
-
-.text-field {
-  li {
-    padding-left: $space;
-  }
-}

components/01-atoms/lists/libraries.yml

@@ -0,0 +1,5 @@
+atoms.lists.list:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/lists/_list.css: {}

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

@@ -2,6 +2,8 @@ import listTwig from './list.twig';
 
 import listData from './list.yml';
 
+import './_list.component.scss';
+
 /**
  * Storybook Definition.
  */

components/01-atoms/lists/list.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.lists.list') }}
+
 {#
  # Available variables:
  # - list__items - the array of list items

components/01-atoms/tables/_tables.scss → components/01-atoms/tables/_tables.component.scss

@@ -1,34 +1,3 @@
-$table-border-width: 1px;
-
-@mixin table-header-footer {
-  background-color: clr(highlight-high);
-
-  > * {
-    border-color: clr(highlight);
-  }
-}
-
-@mixin table-cell {
-  border: 0;
-  border-right-width: $table-border-width;
-  border-bottom-width: $table-border-width;
-  border-style: solid;
-  border-color: inherit;
-  padding: $space;
-
-  &:last-child {
-    border-right: 0;
-  }
-
-  :last-child > & {
-    border-bottom: 0;
-  }
-
-  &[data-cell-highlight] {
-    background-color: clr(highlight);
-  }
-}
-
 .table {
   border: $table-border-width solid clr(highlight-high);
   border-spacing: 0;

components/01-atoms/tables/_tables.mixin.scss

@@ -0,0 +1,30 @@
+$table-border-width: 1px;
+
+@mixin table-header-footer {
+  background-color: clr(highlight-high);
+
+  > * {
+    border-color: clr(highlight);
+  }
+}
+
+@mixin table-cell {
+  border: 0;
+  border-right-width: $table-border-width;
+  border-bottom-width: $table-border-width;
+  border-style: solid;
+  border-color: inherit;
+  padding: $space;
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  :last-child > & {
+    border-bottom: 0;
+  }
+
+  &[data-cell-highlight] {
+    background-color: clr(highlight);
+  }
+}

components/01-atoms/tables/libraries.yml

@@ -0,0 +1,5 @@
+atoms.tables:
+  version: 0.1
+  css:
+    component:
+      dist/css/01-atoms/tables/_tables.css: {}

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

@@ -1,6 +1,8 @@
 import tableTwig from './tables.twig';
 import tableData from './tables.yml';
 
+import './_tables.component.scss';
+
 /**
  * Storybook Definition.
  */

components/01-atoms/tables/tables.twig

@@ -1,3 +1,5 @@
+{{ attach_library('emulsify/atoms.tables') }}
+
 {#
 /**
  * Available variables: