diff --git a/.storybook/preview.js b/.storybook/preview.js index a30f1def..462d7e9d 100644 --- a/.storybook/preview.js +++ b/.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'; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index cbb90f7f..3ac197d2 100644 --- a/.storybook/webpack.config.js +++ b/.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')}";`, }, }, ], diff --git a/build.now.md b/build.now.md new file mode 100644 index 00000000..e69de29b diff --git a/components/00-base/00-defaults/_03-mixins.scss b/components/00-base/00-defaults/_03-mixins.scss index c36b6965..f198d1ca 100644 --- a/components/00-base/00-defaults/_03-mixins.scss +++ b/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}); +} diff --git a/components/00-base/01-colors/colors-used.scss b/components/00-base/01-colors/colors-used.scss index 22f9eda5..45306915 100644 --- a/components/00-base/01-colors/colors-used.scss +++ b/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 diff --git a/components/00-base/02-motion/_motion.mixin.scss b/components/00-base/02-motion/_motion.mixin.scss new file mode 100644 index 00000000..acf28dc9 --- /dev/null +++ b/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; +} diff --git a/components/00-base/02-motion/_motion.scss b/components/00-base/02-motion/_motion.scss index 67d41b60..c83a7a0e 100644 --- a/components/00-base/02-motion/_motion.scss +++ b/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; diff --git a/components/01-atoms/buttons/_buttons.component.scss b/components/01-atoms/buttons/_buttons.component.scss new file mode 100644 index 00000000..921bc48b --- /dev/null +++ b/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; + } +} diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.mixin.scss similarity index 92% rename from components/01-atoms/buttons/_buttons.scss rename to components/01-atoms/buttons/_buttons.mixin.scss index 5df5faa5..41c9ff52 100644 --- a/components/01-atoms/buttons/_buttons.scss +++ b/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; - } -} diff --git a/components/01-atoms/buttons/button.twig b/components/01-atoms/buttons/button.twig index ba6c3fa2..928cfe8b 100644 --- a/components/01-atoms/buttons/button.twig +++ b/components/01-atoms/buttons/button.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.buttons') }} + {# /** * Available variables: diff --git a/components/01-atoms/buttons/buttons.stories.js b/components/01-atoms/buttons/buttons.stories.js index dbc9dc87..5ffd7211 100644 --- a/components/01-atoms/buttons/buttons.stories.js +++ b/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. */ diff --git a/components/01-atoms/buttons/libraries.yml b/components/01-atoms/buttons/libraries.yml new file mode 100644 index 00000000..5260e577 --- /dev/null +++ b/components/01-atoms/buttons/libraries.yml @@ -0,0 +1,5 @@ +atoms.buttons: + version: 0.1 + css: + component: + dist/css/01-atoms/buttons/_buttons.css: {} diff --git a/components/01-atoms/forms/checkbox/_checkbox.scss b/components/01-atoms/forms/checkbox/_checkbox.component.scss similarity index 100% rename from components/01-atoms/forms/checkbox/_checkbox.scss rename to components/01-atoms/forms/checkbox/_checkbox.component.scss diff --git a/components/01-atoms/forms/checkbox/checkbox.twig b/components/01-atoms/forms/checkbox/checkbox.twig index 2f4d67ef..8bd98693 100644 --- a/components/01-atoms/forms/checkbox/checkbox.twig +++ b/components/01-atoms/forms/checkbox/checkbox.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.forms.checkbox') }} + {% if not attributes %}
Options as Checkboxes diff --git a/components/01-atoms/forms/checkbox/libraries.yml b/components/01-atoms/forms/checkbox/libraries.yml new file mode 100644 index 00000000..8902e085 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/forms/forms.stories.js b/components/01-atoms/forms/forms.stories.js index 0105aa0d..3e2e0e2e 100644 --- a/components/01-atoms/forms/forms.stories.js +++ b/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. */ diff --git a/components/01-atoms/forms/radio/_radio.scss b/components/01-atoms/forms/radio/_radio.component.scss similarity index 100% rename from components/01-atoms/forms/radio/_radio.scss rename to components/01-atoms/forms/radio/_radio.component.scss diff --git a/components/01-atoms/forms/radio/libraries.yml b/components/01-atoms/forms/radio/libraries.yml new file mode 100644 index 00000000..ac70d9e3 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/forms/select/_select-item.twig b/components/01-atoms/forms/select/_select-item.twig index a38afcbf..de087572 100644 --- a/components/01-atoms/forms/select/_select-item.twig +++ b/components/01-atoms/forms/select/_select-item.twig @@ -1 +1,3 @@ +{{ attach_library('emulsify/atoms.forms.select') }} + diff --git a/components/01-atoms/forms/select/_select.scss b/components/01-atoms/forms/select/_select.component.scss similarity index 100% rename from components/01-atoms/forms/select/_select.scss rename to components/01-atoms/forms/select/_select.component.scss diff --git a/components/01-atoms/forms/select/libraries.yml b/components/01-atoms/forms/select/libraries.yml new file mode 100644 index 00000000..bc4c6010 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/forms/textfields/_textfields.scss b/components/01-atoms/forms/textfields/_textfields.component.scss similarity index 100% rename from components/01-atoms/forms/textfields/_textfields.scss rename to components/01-atoms/forms/textfields/_textfields.component.scss diff --git a/components/01-atoms/forms/textfields/libraries.yml b/components/01-atoms/forms/textfields/libraries.yml new file mode 100644 index 00000000..58748304 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/forms/textfields/textfields.twig b/components/01-atoms/forms/textfields/textfields.twig index b848d040..e429c076 100644 --- a/components/01-atoms/forms/textfields/textfields.twig +++ b/components/01-atoms/forms/textfields/textfields.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.forms.textfields') }} +
diff --git a/components/01-atoms/images/icons/_icons.scss b/components/01-atoms/images/icons/_icons.component.scss similarity index 100% rename from components/01-atoms/images/icons/_icons.scss rename to components/01-atoms/images/icons/_icons.component.scss diff --git a/components/01-atoms/images/icons/icons.twig b/components/01-atoms/images/icons/icons.twig index 9e6bd8e1..3901ca11 100644 --- a/components/01-atoms/images/icons/icons.twig +++ b/components/01-atoms/images/icons/icons.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.images.icons') }} +
{% for item in icons %}
diff --git a/components/01-atoms/images/icons/libraries.yml b/components/01-atoms/images/icons/libraries.yml new file mode 100644 index 00000000..2bbd98d3 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/images/image/_image.scss b/components/01-atoms/images/image/_image.component.scss similarity index 64% rename from components/01-atoms/images/image/_image.scss rename to components/01-atoms/images/image/_image.component.scss index 6a6d253c..3b42efb2 100644 --- a/components/01-atoms/images/image/_image.scss +++ b/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; diff --git a/components/01-atoms/images/image/_image.mixin.scss b/components/01-atoms/images/image/_image.mixin.scss new file mode 100644 index 00000000..e89eed22 --- /dev/null +++ b/components/01-atoms/images/image/_image.mixin.scss @@ -0,0 +1,5 @@ +@mixin image { + display: block; + height: auto; + max-width: 100%; +} diff --git a/components/01-atoms/images/image/_image.twig b/components/01-atoms/images/image/_image.twig index 0bba3f4e..c459d8ba 100644 --- a/components/01-atoms/images/image/_image.twig +++ b/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') %} { diff --git a/components/01-atoms/links/link/_link.component.scss b/components/01-atoms/links/link/_link.component.scss new file mode 100644 index 00000000..d7aed5aa --- /dev/null +++ b/components/01-atoms/links/link/_link.component.scss @@ -0,0 +1,3 @@ +.link { + @include link; +} diff --git a/components/01-atoms/links/link/_link.scss b/components/01-atoms/links/link/_link.mixin.scss similarity index 75% rename from components/01-atoms/links/link/_link.scss rename to components/01-atoms/links/link/_link.mixin.scss index 1637caf3..491f6f54 100644 --- a/components/01-atoms/links/link/_link.scss +++ b/components/01-atoms/links/link/_link.mixin.scss @@ -5,7 +5,3 @@ color: clr(accent-high); } } - -.link { - @include link; -} diff --git a/components/01-atoms/links/link/libraries.yml b/components/01-atoms/links/link/libraries.yml new file mode 100644 index 00000000..63bb2054 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/links/link/link.twig b/components/01-atoms/links/link/link.twig index e181bf61..60e193c1 100644 --- a/components/01-atoms/links/link/link.twig +++ b/components/01-atoms/links/link/link.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.links.link') }} + {# /** * Available variables: diff --git a/components/01-atoms/links/link/links.stories.js b/components/01-atoms/links/link/links.stories.js index 6538e518..0788fc10 100644 --- a/components/01-atoms/links/link/links.stories.js +++ b/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. */ diff --git a/components/01-atoms/lists/_list.scss b/components/01-atoms/lists/_list.component.scss similarity index 68% rename from components/01-atoms/lists/_list.scss rename to components/01-atoms/lists/_list.component.scss index c58c2aab..a64fc3b6 100644 --- a/components/01-atoms/lists/_list.scss +++ b/components/01-atoms/lists/_list.component.scss @@ -9,9 +9,3 @@ ol { list-style-type: decimal; } - -.text-field { - li { - padding-left: $space; - } -} diff --git a/components/01-atoms/lists/libraries.yml b/components/01-atoms/lists/libraries.yml new file mode 100644 index 00000000..11f8cd26 --- /dev/null +++ b/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: {} diff --git a/components/01-atoms/lists/list.stories.js b/components/01-atoms/lists/list.stories.js index 4eac0c3e..aa87951d 100644 --- a/components/01-atoms/lists/list.stories.js +++ b/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. */ diff --git a/components/01-atoms/lists/list.twig b/components/01-atoms/lists/list.twig index 78d3bf78..59087331 100644 --- a/components/01-atoms/lists/list.twig +++ b/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 diff --git a/components/01-atoms/tables/_tables.scss b/components/01-atoms/tables/_tables.component.scss similarity index 66% rename from components/01-atoms/tables/_tables.scss rename to components/01-atoms/tables/_tables.component.scss index 160c0f40..79d60d5d 100644 --- a/components/01-atoms/tables/_tables.scss +++ b/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; diff --git a/components/01-atoms/tables/_tables.mixin.scss b/components/01-atoms/tables/_tables.mixin.scss new file mode 100644 index 00000000..a058b665 --- /dev/null +++ b/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); + } +} diff --git a/components/01-atoms/tables/libraries.yml b/components/01-atoms/tables/libraries.yml new file mode 100644 index 00000000..b0a4592a --- /dev/null +++ b/components/01-atoms/tables/libraries.yml @@ -0,0 +1,5 @@ +atoms.tables: + version: 0.1 + css: + component: + dist/css/01-atoms/tables/_tables.css: {} diff --git a/components/01-atoms/tables/tables.stories.js b/components/01-atoms/tables/tables.stories.js index 2ebff39c..a975a150 100644 --- a/components/01-atoms/tables/tables.stories.js +++ b/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. */ diff --git a/components/01-atoms/tables/tables.twig b/components/01-atoms/tables/tables.twig index 8c7f8c0d..ac6ede5e 100644 --- a/components/01-atoms/tables/tables.twig +++ b/components/01-atoms/tables/tables.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.tables') }} + {# /** * Available variables: diff --git a/components/01-atoms/text/headings/_heading.twig b/components/01-atoms/text/headings/_heading.twig index 367b2cba..7c3282a4 100644 --- a/components/01-atoms/text/headings/_heading.twig +++ b/components/01-atoms/text/headings/_heading.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.text.headings') }} + {# /** * Available variables: diff --git a/components/01-atoms/text/headings/_headings.component.scss b/components/01-atoms/text/headings/_headings.component.scss new file mode 100644 index 00000000..e49063aa --- /dev/null +++ b/components/01-atoms/text/headings/_headings.component.scss @@ -0,0 +1,48 @@ +.h1 { + @include heading-xl; +} + +.h2 { + @include heading-large; +} + +.h3 { + @include heading-medium; +} + +.h4 { + @include heading-small; +} + +.h5, +.h6 { + @include heading-xs; +} + +/* TODO: BEM selectors should be applied to wysiwyg-created content */ + +.text-long { + h1 { + @extend .h1; + } + + h2 { + @extend .h2; + } + + h3 { + @extend .h3; + } + + h4 { + @extend .h4; + } + + h5 { + @extend .h5; + } + + h6 { + @extend .h6; + } +} diff --git a/components/01-atoms/text/headings/_headings.scss b/components/01-atoms/text/headings/_headings.mixin.scss similarity index 85% rename from components/01-atoms/text/headings/_headings.scss rename to components/01-atoms/text/headings/_headings.mixin.scss index 4108c3b4..fa544aea 100644 --- a/components/01-atoms/text/headings/_headings.scss +++ b/components/01-atoms/text/headings/_headings.mixin.scss @@ -144,52 +144,3 @@ $color-heading: clr(accent); } } } - -.h1 { - @include heading-xl; -} - -.h2 { - @include heading-large; -} - -.h3 { - @include heading-medium; -} - -.h4 { - @include heading-small; -} - -.h5, -.h6 { - @include heading-xs; -} - -/* TODO: BEM selectors should be applied to wysiwyg-created content */ - -.text-long { - h1 { - @extend .h1; - } - - h2 { - @extend .h2; - } - - h3 { - @extend .h3; - } - - h4 { - @extend .h4; - } - - h5 { - @extend .h5; - } - - h6 { - @extend .h6; - } -} diff --git a/components/01-atoms/text/headings/libraries.yml b/components/01-atoms/text/headings/libraries.yml new file mode 100644 index 00000000..cf8b3d6d --- /dev/null +++ b/components/01-atoms/text/headings/libraries.yml @@ -0,0 +1,5 @@ +atoms.text.headings: + version: 0.1 + css: + component: + dist/css/01-atoms/text/headings/_headings.css: {} diff --git a/components/01-atoms/text/text.stories.js b/components/01-atoms/text/text.stories.js index 3b968c9b..3914caf2 100644 --- a/components/01-atoms/text/text.stories.js +++ b/components/01-atoms/text/text.stories.js @@ -6,6 +6,9 @@ import paragraph from './text/03-inline-elements.twig'; import blockquoteData from './text/blockquote.yml'; import headingData from './headings/headings.yml'; +import './headings/_headings.component.scss'; +import './text/_text.component.scss'; + /** * Storybook Definition. */ diff --git a/components/01-atoms/text/text/01-paragraph.twig b/components/01-atoms/text/text/01-paragraph.twig index c91dce1e..76c9d689 100644 --- a/components/01-atoms/text/text/01-paragraph.twig +++ b/components/01-atoms/text/text/01-paragraph.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.text.text') }} + {# /** * Available variables: diff --git a/components/01-atoms/text/text/02-blockquote.twig b/components/01-atoms/text/text/02-blockquote.twig index afb25497..1acd77a7 100644 --- a/components/01-atoms/text/text/02-blockquote.twig +++ b/components/01-atoms/text/text/02-blockquote.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.text.text') }} + {# /** * Available variables: diff --git a/components/01-atoms/text/text/03-inline-elements.twig b/components/01-atoms/text/text/03-inline-elements.twig index 8c100172..61cb40d9 100644 --- a/components/01-atoms/text/text/03-inline-elements.twig +++ b/components/01-atoms/text/text/03-inline-elements.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.text.text') }} + {# /** * This is strictly an exmaple file to demonstrate markup in Storybook. diff --git a/components/01-atoms/text/text/05-pre.twig b/components/01-atoms/text/text/05-pre.twig index cdebd17a..ecbdb9ed 100644 --- a/components/01-atoms/text/text/05-pre.twig +++ b/components/01-atoms/text/text/05-pre.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.text.text') }} + {# /** * This is strictly an exmaple file to demonstrate markup in Storybook. diff --git a/components/01-atoms/text/text/06-hr.twig b/components/01-atoms/text/text/06-hr.twig index 50e14d62..d219180e 100644 --- a/components/01-atoms/text/text/06-hr.twig +++ b/components/01-atoms/text/text/06-hr.twig @@ -1 +1,3 @@ +{{ attach_library('emulsify/atoms.text.text') }} +
diff --git a/components/01-atoms/text/text/_text.scss b/components/01-atoms/text/text/_text.component.scss similarity index 72% rename from components/01-atoms/text/text/_text.scss rename to components/01-atoms/text/text/_text.component.scss index a4bdda77..50e9cd1c 100644 --- a/components/01-atoms/text/text/_text.scss +++ b/components/01-atoms/text/text/_text.component.scss @@ -1,10 +1,3 @@ -/* Create a mixin for paragraph styles that can be implemented - * in components with other classnames. -*/ -@mixin paragraph($margin: 0 0 1em) { - margin: $margin; -} - .paragraph { @include paragraph; } diff --git a/components/01-atoms/text/text/_text.mixin.scss b/components/01-atoms/text/text/_text.mixin.scss new file mode 100644 index 00000000..c4167728 --- /dev/null +++ b/components/01-atoms/text/text/_text.mixin.scss @@ -0,0 +1,6 @@ +/* Create a mixin for paragraph styles that can be implemented + * in components with other classnames. +*/ +@mixin paragraph($margin: 0 0 1em) { + margin: $margin; +} diff --git a/components/01-atoms/text/text/libraries.yml b/components/01-atoms/text/text/libraries.yml new file mode 100644 index 00000000..77930af7 --- /dev/null +++ b/components/01-atoms/text/text/libraries.yml @@ -0,0 +1,5 @@ +atoms.text.text: + version: 0.1 + css: + component: + dist/css/01-atoms/text/text/_text.css: {} diff --git a/components/01-atoms/video/_video.scss b/components/01-atoms/video/_video.component.scss similarity index 100% rename from components/01-atoms/video/_video.scss rename to components/01-atoms/video/_video.component.scss diff --git a/components/01-atoms/video/libraries.yml b/components/01-atoms/video/libraries.yml new file mode 100644 index 00000000..c2e44d02 --- /dev/null +++ b/components/01-atoms/video/libraries.yml @@ -0,0 +1,5 @@ +atoms.video: + version: 0.1 + css: + component: + dist/css/01-atoms/video/_video.css: {} diff --git a/components/01-atoms/video/video.twig b/components/01-atoms/video/video.twig index 1c46b429..bf6bd966 100644 --- a/components/01-atoms/video/video.twig +++ b/components/01-atoms/video/video.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/atoms.video') }} + {# /** * Available variables: diff --git a/components/01-atoms/video/videos.stories.js b/components/01-atoms/video/videos.stories.js index c2eddf09..deaa1f17 100644 --- a/components/01-atoms/video/videos.stories.js +++ b/components/01-atoms/video/videos.stories.js @@ -3,6 +3,8 @@ import video from './video.twig'; import videoData from './video.yml'; import videoFullData from './video-full.yml'; +import './_video.component.scss'; + /** * Storybook Definition. */ diff --git a/components/02-molecules/card/_card.scss b/components/02-molecules/card/_card.component.scss similarity index 100% rename from components/02-molecules/card/_card.scss rename to components/02-molecules/card/_card.component.scss diff --git a/components/02-molecules/card/card.twig b/components/02-molecules/card/card.twig index f37f5963..0b628b21 100644 --- a/components/02-molecules/card/card.twig +++ b/components/02-molecules/card/card.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/molecules.card') }} + {# # Available variables: # - card__base_class - base classname of the wrapper. diff --git a/components/02-molecules/card/cards.stories.js b/components/02-molecules/card/cards.stories.js index 623604cc..7497ebfd 100644 --- a/components/02-molecules/card/cards.stories.js +++ b/components/02-molecules/card/cards.stories.js @@ -3,6 +3,8 @@ import card from './card.twig'; import cardData from './card.yml'; import cardBgData from './card-bg.yml'; +import './_card.component.scss'; + /** * Storybook Definition. */ diff --git a/components/02-molecules/card/libraries.yml b/components/02-molecules/card/libraries.yml new file mode 100644 index 00000000..979e8fc5 --- /dev/null +++ b/components/02-molecules/card/libraries.yml @@ -0,0 +1,5 @@ +molecules.card: + version: 0.1 + css: + component: + dist/css/02-molecules/card/_card.css: {} diff --git a/components/02-molecules/cta/_cta.scss b/components/02-molecules/cta/_cta.component.scss similarity index 100% rename from components/02-molecules/cta/_cta.scss rename to components/02-molecules/cta/_cta.component.scss diff --git a/components/02-molecules/cta/cta.twig b/components/02-molecules/cta/cta.twig index 996298ba..65e4b30c 100644 --- a/components/02-molecules/cta/cta.twig +++ b/components/02-molecules/cta/cta.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/molecules.cta') }} + {% set cta__base_class = 'cta' %}

{{ cta__heading }}

diff --git a/components/02-molecules/cta/ctas.stories.js b/components/02-molecules/cta/ctas.stories.js index cee7fd36..74d07ed9 100644 --- a/components/02-molecules/cta/ctas.stories.js +++ b/components/02-molecules/cta/ctas.stories.js @@ -2,6 +2,8 @@ import cta from './cta.twig'; import ctaData from './cta.yml'; +import './_cta.component.scss'; + /** * Storybook Definition. */ diff --git a/components/02-molecules/cta/libraries.yml b/components/02-molecules/cta/libraries.yml new file mode 100644 index 00000000..945f3395 --- /dev/null +++ b/components/02-molecules/cta/libraries.yml @@ -0,0 +1,5 @@ +molecules.cta: + version: 0.1 + css: + component: + dist/css/02-molecules/cta/_cta.css: {} diff --git a/components/02-molecules/menus/breadcrumbs/_breadcrumbs.scss b/components/02-molecules/menus/breadcrumbs/_breadcrumbs.component.scss similarity index 100% rename from components/02-molecules/menus/breadcrumbs/_breadcrumbs.scss rename to components/02-molecules/menus/breadcrumbs/_breadcrumbs.component.scss diff --git a/components/02-molecules/menus/breadcrumbs/breadcrumbs.twig b/components/02-molecules/menus/breadcrumbs/breadcrumbs.twig index 6ce88dc2..ce2e97e1 100644 --- a/components/02-molecules/menus/breadcrumbs/breadcrumbs.twig +++ b/components/02-molecules/menus/breadcrumbs/breadcrumbs.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/molecules.menus.breadcrumbs') }} + {# /** * @file diff --git a/components/02-molecules/menus/breadcrumbs/libraries.yml b/components/02-molecules/menus/breadcrumbs/libraries.yml new file mode 100644 index 00000000..c2227bed --- /dev/null +++ b/components/02-molecules/menus/breadcrumbs/libraries.yml @@ -0,0 +1,5 @@ +molecules.menus.breadcrumbs: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/breadcrumbs/_breadcrumbs.css: {} diff --git a/components/02-molecules/menus/inline/_inline-menu.scss b/components/02-molecules/menus/inline/_inline-menu.component.scss similarity index 100% rename from components/02-molecules/menus/inline/_inline-menu.scss rename to components/02-molecules/menus/inline/_inline-menu.component.scss diff --git a/components/02-molecules/menus/inline/inline-menu.twig b/components/02-molecules/menus/inline/inline-menu.twig index d39cb66e..d2d8758f 100644 --- a/components/02-molecules/menus/inline/inline-menu.twig +++ b/components/02-molecules/menus/inline/inline-menu.twig @@ -1,3 +1,5 @@ +{{ attach_library('emulsify/molecules.menus.inline') }} + {% include "@molecules/menus/_menu.twig" with { menu_class: 'inline-menu', items: inline_menu_items, diff --git a/components/02-molecules/menus/inline/libraries.yml b/components/02-molecules/menus/inline/libraries.yml new file mode 100644 index 00000000..7d524586 --- /dev/null +++ b/components/02-molecules/menus/inline/libraries.yml @@ -0,0 +1,5 @@ +molecules.menus.inline: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/inline/_inline-menu.css: {} diff --git a/components/02-molecules/menus/main-menu/_00-main-menu.scss b/components/02-molecules/menus/main-menu/_00-main-menu.component.scss similarity index 100% rename from components/02-molecules/menus/main-menu/_00-main-menu.scss rename to components/02-molecules/menus/main-menu/_00-main-menu.component.scss diff --git a/components/02-molecules/menus/main-menu/_01-main-menu-item.scss b/components/02-molecules/menus/main-menu/_01-main-menu-item.component.scss similarity index 100% rename from components/02-molecules/menus/main-menu/_01-main-menu-item.scss rename to components/02-molecules/menus/main-menu/_01-main-menu-item.component.scss diff --git a/components/02-molecules/menus/main-menu/_02-main-menu-link.scss b/components/02-molecules/menus/main-menu/_02-main-menu-link.component.scss similarity index 100% rename from components/02-molecules/menus/main-menu/_02-main-menu-link.scss rename to components/02-molecules/menus/main-menu/_02-main-menu-link.component.scss diff --git a/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss b/components/02-molecules/menus/main-menu/_03-main-menu-toggle.component.scss similarity index 100% rename from components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss rename to components/02-molecules/menus/main-menu/_03-main-menu-toggle.component.scss diff --git a/components/02-molecules/menus/main-menu/libraries.yml b/components/02-molecules/menus/main-menu/libraries.yml new file mode 100644 index 00000000..94a8abc2 --- /dev/null +++ b/components/02-molecules/menus/main-menu/libraries.yml @@ -0,0 +1,30 @@ +molecules.menus.main_menu: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/main-menu/_00-main-menu.css: {} + js: + dist/js/02-molecules/menus/main-menu/main-menu.js: {} + dependencies: + - core/drupal + - emulsify/molecules.menus.main_menu.main_menu_item + - emulsify/molecules.menus.main_menu.main_menu_link + - emulsify/molecules.menus.main_menu.main_menu_toggle + +molecules.menus.main_menu.main_menu_item: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/main-menu/_01-main-menu-item.css: {} + +molecules.menus.main_menu.main_menu_link: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/main-menu/_02-main-menu-link.css: {} + +molecules.menus.main_menu.main_menu_toggle: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/main-menu/_03-main-menu-toggle.css: {} diff --git a/components/02-molecules/menus/main-menu/main-menu.twig b/components/02-molecules/menus/main-menu/main-menu.twig index 87eba67d..20726c1d 100644 --- a/components/02-molecules/menus/main-menu/main-menu.twig +++ b/components/02-molecules/menus/main-menu/main-menu.twig @@ -1,4 +1,4 @@ -{{ attach_library('emulsify/main-menu') }} +{{ attach_library('emulsify/molecules.menus.main_menu') }}