From b4f6addeac0b11b9047e9f912bef333b3d0a7ca8 Mon Sep 17 00:00:00 2001 From: Emircan ERKUL Date: Fri, 16 Sep 2022 14:39:12 +0300 Subject: [PATCH 1/8] refactor(webpack): library dependency --- .../{_buttons.scss => _buttons.component.scss} | 2 ++ components/01-atoms/buttons/button.twig | 2 ++ components/01-atoms/buttons/libraries.yml | 5 +++++ .../card/{_card.scss => _card.component.scss} | 16 +++++++++------- components/02-molecules/card/card.twig | 2 ++ components/02-molecules/card/libraries.yml | 5 +++++ .../cta/{_cta.scss => _cta.component.scss} | 2 ++ components/02-molecules/cta/cta.twig | 2 ++ components/02-molecules/cta/libraries.yml | 5 +++++ components/_import.scss | 4 ++++ components/{style.scss => global.scss} | 4 ---- webpack/css.js | 1 - webpack/global.js | 1 + webpack/plugins.js | 2 +- webpack/webpack.common.js | 14 ++++++++++++-- 15 files changed, 52 insertions(+), 15 deletions(-) rename components/01-atoms/buttons/{_buttons.scss => _buttons.component.scss} (98%) create mode 100644 components/01-atoms/buttons/libraries.yml rename components/02-molecules/card/{_card.scss => _card.component.scss} (52%) create mode 100644 components/02-molecules/card/libraries.yml rename components/02-molecules/cta/{_cta.scss => _cta.component.scss} (83%) create mode 100644 components/02-molecules/cta/libraries.yml create mode 100644 components/_import.scss rename components/{style.scss => global.scss} (60%) delete mode 100644 webpack/css.js create mode 100644 webpack/global.js diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.component.scss similarity index 98% rename from components/01-atoms/buttons/_buttons.scss rename to components/01-atoms/buttons/_buttons.component.scss index 5df5faa5..292ba917 100644 --- a/components/01-atoms/buttons/_buttons.scss +++ b/components/01-atoms/buttons/_buttons.component.scss @@ -1,3 +1,5 @@ +@import '../../import'; + // Sass map to define colors. Each set should have a "Dark" variation when required. // e.g. `default` and `default-dark`. Or `purple` and `purple-dark`. $button-colors: ( 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/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/02-molecules/card/_card.scss b/components/02-molecules/card/_card.component.scss similarity index 52% rename from components/02-molecules/card/_card.scss rename to components/02-molecules/card/_card.component.scss index 640b996b..d9e46746 100644 --- a/components/02-molecules/card/_card.scss +++ b/components/02-molecules/card/_card.component.scss @@ -1,14 +1,16 @@ +@import '../../import'; + .card__heading { - @include heading-large($font-size: 1.3rem); + // @include heading-large($font-size: 1.3rem); @include no-bottom; &-link { - @include link; + // @include link; } } .card__subheading { - @include heading-medium($font-size: 1rem); + // @include heading-medium($font-size: 1rem); @include no-bottom; color: clr(text); @@ -19,13 +21,13 @@ } .card__link { - @include link; + // @include link; } .card__button { - @include button-base; - @include button-color-primary; - @include button-medium; + // @include button-base; + // @include button-color-primary; + // @include button-medium; } /* Variations */ 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/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 83% rename from components/02-molecules/cta/_cta.scss rename to components/02-molecules/cta/_cta.component.scss index 04fe925d..025c74bb 100644 --- a/components/02-molecules/cta/_cta.scss +++ b/components/02-molecules/cta/_cta.component.scss @@ -1,3 +1,5 @@ +@import '../../import'; + .cta { background-color: clr(background-section); padding: $space-triple; 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/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/_import.scss b/components/_import.scss new file mode 100644 index 00000000..b323d5bc --- /dev/null +++ b/components/_import.scss @@ -0,0 +1,4 @@ +// Variables & Mixins +@import '00-base/00-defaults/01-variables'; +@import '00-base/00-defaults/02-breakpoints'; +@import '00-base/00-defaults/03-mixins'; diff --git a/components/style.scss b/components/global.scss similarity index 60% rename from components/style.scss rename to components/global.scss index 78afef35..185e9b20 100644 --- a/components/style.scss +++ b/components/global.scss @@ -4,8 +4,4 @@ // Components @import '00-base/**/*.scss'; -@import '01-atoms/**/*.scss'; -@import '02-molecules/**/*.scss'; -@import '03-organisms/**/*.scss'; -@import '04-templates/**/*.scss'; @import '00-base/01-colors/colors-used.scss'; diff --git a/webpack/css.js b/webpack/css.js deleted file mode 100644 index f470d234..00000000 --- a/webpack/css.js +++ /dev/null @@ -1 +0,0 @@ -import '../components/style.scss'; diff --git a/webpack/global.js b/webpack/global.js new file mode 100644 index 00000000..d2ddbeec --- /dev/null +++ b/webpack/global.js @@ -0,0 +1 @@ +import '../components/global.scss'; diff --git a/webpack/plugins.js b/webpack/plugins.js index c5568761..11693d46 100644 --- a/webpack/plugins.js +++ b/webpack/plugins.js @@ -13,7 +13,7 @@ const _ESLintPlugin = require('eslint-webpack-plugin'); const imagePath = path.resolve(__dirname, '../images'); const MiniCssExtractPlugin = new _MiniCssExtractPlugin({ - filename: 'style.css', + filename: '[name].css', chunkFilename: '[id].css', }); diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js index bc504f5f..eee3d73b 100644 --- a/webpack/webpack.common.js +++ b/webpack/webpack.common.js @@ -7,7 +7,7 @@ const webpackDir = path.resolve(__dirname); const rootDir = path.resolve(__dirname, '..'); const distDir = path.resolve(rootDir, 'dist'); -function getEntries(pattern) { +function getEntries(pattern, patternCss) { const entries = {}; glob.sync(pattern).forEach((file) => { @@ -16,8 +16,14 @@ function getEntries(pattern) { entries[newfilePath] = file; }); + glob.sync(patternCss).forEach((file) => { + const filePath = file.split('components/')[1]; + const newfilePath = `css/${filePath.replace('.component.scss', '')}`; + entries[newfilePath] = file; + }); + entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js'); - entries.css = path.resolve(webpackDir, 'css.js'); + entries.global = path.resolve(webpackDir, 'global.js'); return entries; } @@ -31,6 +37,10 @@ module.exports = { rootDir, 'components/**/!(*.stories|*.component|*.min|*.test).js', ), + path.resolve( + rootDir, + 'components/**/*.component.scss', + ), ), module: { rules: [ From a5df91673203598fef5983a868ae03484e2da202 Mon Sep 17 00:00:00 2001 From: Emircan ERKUL Date: Fri, 16 Sep 2022 14:55:53 +0300 Subject: [PATCH 2/8] fix: build now --- build.now.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 build.now.md diff --git a/build.now.md b/build.now.md new file mode 100644 index 00000000..e69de29b From 548f04d1f44cf63bf85697c6ccba1ce13a136a01 Mon Sep 17 00:00:00 2001 From: Emircan ERKUL Date: Fri, 16 Sep 2022 15:36:33 +0300 Subject: [PATCH 3/8] fix: global style naming --- system.emulsify.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/system.emulsify.json b/system.emulsify.json index d4daa2bb..5851d49b 100644 --- a/system.emulsify.json +++ b/system.emulsify.json @@ -79,10 +79,10 @@ ], "files": [ { - "name": "style", - "path": "./components/style.scss", - "destinationPath": "./components/style.scss", - "description": "Primary style scss file" + "name": "global", + "path": "./components/global.scss", + "destinationPath": "./components/global.scss", + "description": "Primary global scss file" } ], "components": [ From 798780a5bbaccc8133e1fbe90c97d6ad30758070 Mon Sep 17 00:00:00 2001 From: Emircan ERKUL Date: Fri, 16 Sep 2022 17:18:45 +0300 Subject: [PATCH 4/8] feat: include imports scss file --- system.emulsify.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/system.emulsify.json b/system.emulsify.json index 5851d49b..ab9ac823 100644 --- a/system.emulsify.json +++ b/system.emulsify.json @@ -83,6 +83,12 @@ "path": "./components/global.scss", "destinationPath": "./components/global.scss", "description": "Primary global scss file" + }, + { + "name": "imports", + "path": "./components/_import.scss", + "destinationPath": "./components/_import.scss", + "description": "Primary global vars and mixings" } ], "components": [ From 48c215ee356c127c1efd8239e81b8f47cdcb96c7 Mon Sep 17 00:00:00 2001 From: Emircan ERKUL Date: Fri, 16 Sep 2022 22:04:31 +0300 Subject: [PATCH 5/8] feat: refactor, dependency improvements for drupal and storybook --- .storybook/preview.js | 2 +- .storybook/webpack.config.js | 2 + .../00-base/00-defaults/_03-mixins.scss | 17 ++++ components/00-base/01-colors/colors-used.scss | 17 ---- .../00-base/02-motion/_motion.mixin.scss | 8 ++ components/00-base/02-motion/_motion.scss | 9 -- .../01-atoms/buttons/_buttons.component.scss | 90 ------------------- .../01-atoms/buttons/_buttons.mixin.scss | 89 ++++++++++++++++++ .../01-atoms/buttons/buttons.stories.js | 2 + ...checkbox.scss => _checkbox.component.scss} | 0 .../01-atoms/forms/checkbox/checkbox.twig | 2 + .../01-atoms/forms/checkbox/libraries.yml | 5 ++ components/01-atoms/forms/forms.stories.js | 5 ++ .../{_radio.scss => _radio.component.scss} | 0 components/01-atoms/forms/radio/libraries.yml | 5 ++ .../01-atoms/forms/select/_select-item.twig | 2 + .../{_select.scss => _select.component.scss} | 0 .../01-atoms/forms/select/libraries.yml | 5 ++ ...fields.scss => _textfields.component.scss} | 0 .../01-atoms/forms/textfields/libraries.yml | 5 ++ .../01-atoms/forms/textfields/textfields.twig | 2 + .../{_icons.scss => _icons.component.scss} | 0 components/01-atoms/images/icons/icons.twig | 2 + .../01-atoms/images/icons/libraries.yml | 5 ++ .../{_image.scss => _image.component.scss} | 6 -- .../01-atoms/images/image/_image.mixin.scss | 5 ++ components/01-atoms/images/image/_image.twig | 2 + .../01-atoms/images/image/_picture.twig | 2 + .../01-atoms/images/image/libraries.yml | 5 ++ components/01-atoms/images/images.stories.js | 3 + .../01-atoms/links/link/_link.component.scss | 3 + .../link/{_link.scss => _link.mixin.scss} | 4 - components/01-atoms/links/link/libraries.yml | 5 ++ components/01-atoms/links/link/link.twig | 2 + .../01-atoms/links/link/links.stories.js | 2 + .../{_list.scss => _list.component.scss} | 6 -- components/01-atoms/lists/libraries.yml | 5 ++ components/01-atoms/lists/list.stories.js | 2 + components/01-atoms/lists/list.twig | 2 + .../{_tables.scss => _tables.component.scss} | 31 ------- components/01-atoms/tables/_tables.mixin.scss | 30 +++++++ components/01-atoms/tables/libraries.yml | 5 ++ components/01-atoms/tables/tables.stories.js | 2 + components/01-atoms/tables/tables.twig | 2 + .../01-atoms/text/headings/_heading.twig | 2 + .../text/headings/_headings.component.scss | 48 ++++++++++ .../{_headings.scss => _headings.mixin.scss} | 49 ---------- .../01-atoms/text/headings/libraries.yml | 5 ++ components/01-atoms/text/text.stories.js | 3 + .../01-atoms/text/text/01-paragraph.twig | 2 + .../01-atoms/text/text/02-blockquote.twig | 2 + .../text/text/03-inline-elements.twig | 2 + components/01-atoms/text/text/05-pre.twig | 2 + components/01-atoms/text/text/06-hr.twig | 2 + .../text/{_text.scss => _text.component.scss} | 7 -- .../01-atoms/text/text/_text.mixin.scss | 6 ++ components/01-atoms/text/text/libraries.yml | 5 ++ .../{_video.scss => _video.component.scss} | 0 components/01-atoms/video/libraries.yml | 5 ++ components/01-atoms/video/video.twig | 2 + components/01-atoms/video/videos.stories.js | 2 + .../02-molecules/card/_card.component.scss | 6 +- components/02-molecules/card/cards.stories.js | 2 + .../02-molecules/cta/_cta.component.scss | 2 - components/02-molecules/cta/ctas.stories.js | 2 + ...rumbs.scss => _breadcrumbs.component.scss} | 0 .../menus/breadcrumbs/breadcrumbs.twig | 2 + .../menus/breadcrumbs/libraries.yml | 5 ++ ...-menu.scss => _inline-menu.component.scss} | 0 .../menus/inline/inline-menu.twig | 2 + .../02-molecules/menus/inline/libraries.yml | 5 ++ ...menu.scss => _00-main-menu.component.scss} | 0 ...scss => _01-main-menu-item.component.scss} | 0 ...scss => _02-main-menu-link.component.scss} | 0 ...ss => _03-main-menu-toggle.component.scss} | 0 .../menus/main-menu/libraries.yml | 30 +++++++ .../menus/main-menu/main-menu.twig | 2 +- .../02-molecules/menus/menus.stories.js | 9 ++ ...-menu.scss => _social-menu.component.scss} | 0 .../02-molecules/menus/social/libraries.yml | 5 ++ .../menus/social/social-menu.twig | 2 + .../pager/_pager.component.mixin.scss | 24 +++++ .../{_pager.scss => _pager.component.scss} | 25 ------ components/02-molecules/pager/libraries.yml | 5 ++ .../02-molecules/pager/pager.stories.js | 2 + components/02-molecules/pager/pager.twig | 2 + ...-quote.scss => _pull-quote.component.scss} | 0 .../02-molecules/pull-quote/libraries.yml | 5 ++ .../pull-quote/pull-quote.stories.js | 2 + .../02-molecules/pull-quote/pull-quote.twig | 2 + .../{_status.scss => _status.component.scss} | 0 components/02-molecules/status/libraries.yml | 5 ++ .../02-molecules/status/status.stories.js | 2 + components/02-molecules/status/status.twig | 2 + .../tabs/{_tab.scss => _tab.component.scss} | 0 components/02-molecules/tabs/_tab.twig | 2 + .../tabs/{_tabs.scss => _tabs.component.scss} | 0 components/02-molecules/tabs/libraries.yml | 11 +++ components/02-molecules/tabs/tabs.stories.js | 3 + components/02-molecules/tabs/tabs.twig | 2 + .../03-organisms/grid/_grid-examples.twig | 2 + .../grid/_grid-item.component.scss | 9 ++ ...{_grid-item.scss => _grid-item.mixin.scss} | 10 --- .../grid/{_grid.scss => _grid.component.scss} | 5 -- components/03-organisms/grid/_grid.mixin.scss | 4 + components/03-organisms/grid/grid.twig | 2 + components/03-organisms/grid/grids.stories.js | 5 +- components/03-organisms/grid/libraries.yml | 6 ++ ...ooter.scss => _site-footer.component.scss} | 0 .../site/site-footer/libraries.yml | 5 ++ .../site/site-footer/site-footer.twig | 2 + .../site-header/_site-header-branding.twig | 2 + ...eader.scss => _site-header.component.scss} | 0 .../site/site-header/libraries.yml | 5 ++ .../site/site-header/site-header.twig | 2 + components/03-organisms/site/site.stories.js | 3 + ...{_default.scss => _default.component.scss} | 0 components/04-templates/_default.twig | 2 + components/04-templates/layouts.stories.js | 2 + components/04-templates/libraries.yml | 5 ++ ...lder.scss => _place-holder.component.scss} | 2 - .../04-templates/placeholder/libraries.yml | 5 ++ .../placeholder/place-holder.stories.js | 2 + .../placeholder/place-holder.twig | 2 + components/_import.scss | 7 +- components/global.scss | 2 + webpack/loaders.js | 2 + webpack/webpack.common.js | 2 +- 128 files changed, 532 insertions(+), 273 deletions(-) create mode 100644 components/00-base/02-motion/_motion.mixin.scss create mode 100644 components/01-atoms/buttons/_buttons.mixin.scss rename components/01-atoms/forms/checkbox/{_checkbox.scss => _checkbox.component.scss} (100%) create mode 100644 components/01-atoms/forms/checkbox/libraries.yml rename components/01-atoms/forms/radio/{_radio.scss => _radio.component.scss} (100%) create mode 100644 components/01-atoms/forms/radio/libraries.yml rename components/01-atoms/forms/select/{_select.scss => _select.component.scss} (100%) create mode 100644 components/01-atoms/forms/select/libraries.yml rename components/01-atoms/forms/textfields/{_textfields.scss => _textfields.component.scss} (100%) create mode 100644 components/01-atoms/forms/textfields/libraries.yml rename components/01-atoms/images/icons/{_icons.scss => _icons.component.scss} (100%) create mode 100644 components/01-atoms/images/icons/libraries.yml rename components/01-atoms/images/image/{_image.scss => _image.component.scss} (64%) create mode 100644 components/01-atoms/images/image/_image.mixin.scss create mode 100644 components/01-atoms/images/image/libraries.yml create mode 100644 components/01-atoms/links/link/_link.component.scss rename components/01-atoms/links/link/{_link.scss => _link.mixin.scss} (75%) create mode 100644 components/01-atoms/links/link/libraries.yml rename components/01-atoms/lists/{_list.scss => _list.component.scss} (68%) create mode 100644 components/01-atoms/lists/libraries.yml rename components/01-atoms/tables/{_tables.scss => _tables.component.scss} (66%) create mode 100644 components/01-atoms/tables/_tables.mixin.scss create mode 100644 components/01-atoms/tables/libraries.yml create mode 100644 components/01-atoms/text/headings/_headings.component.scss rename components/01-atoms/text/headings/{_headings.scss => _headings.mixin.scss} (85%) create mode 100644 components/01-atoms/text/headings/libraries.yml rename components/01-atoms/text/text/{_text.scss => _text.component.scss} (72%) create mode 100644 components/01-atoms/text/text/_text.mixin.scss create mode 100644 components/01-atoms/text/text/libraries.yml rename components/01-atoms/video/{_video.scss => _video.component.scss} (100%) create mode 100644 components/01-atoms/video/libraries.yml rename components/02-molecules/menus/breadcrumbs/{_breadcrumbs.scss => _breadcrumbs.component.scss} (100%) create mode 100644 components/02-molecules/menus/breadcrumbs/libraries.yml rename components/02-molecules/menus/inline/{_inline-menu.scss => _inline-menu.component.scss} (100%) create mode 100644 components/02-molecules/menus/inline/libraries.yml rename components/02-molecules/menus/main-menu/{_00-main-menu.scss => _00-main-menu.component.scss} (100%) rename components/02-molecules/menus/main-menu/{_01-main-menu-item.scss => _01-main-menu-item.component.scss} (100%) rename components/02-molecules/menus/main-menu/{_02-main-menu-link.scss => _02-main-menu-link.component.scss} (100%) rename components/02-molecules/menus/main-menu/{_03-main-menu-toggle.scss => _03-main-menu-toggle.component.scss} (100%) create mode 100644 components/02-molecules/menus/main-menu/libraries.yml rename components/02-molecules/menus/social/{_social-menu.scss => _social-menu.component.scss} (100%) create mode 100644 components/02-molecules/menus/social/libraries.yml create mode 100644 components/02-molecules/pager/_pager.component.mixin.scss rename components/02-molecules/pager/{_pager.scss => _pager.component.scss} (62%) create mode 100644 components/02-molecules/pager/libraries.yml rename components/02-molecules/pull-quote/{_pull-quote.scss => _pull-quote.component.scss} (100%) create mode 100644 components/02-molecules/pull-quote/libraries.yml rename components/02-molecules/status/{_status.scss => _status.component.scss} (100%) create mode 100644 components/02-molecules/status/libraries.yml rename components/02-molecules/tabs/{_tab.scss => _tab.component.scss} (100%) rename components/02-molecules/tabs/{_tabs.scss => _tabs.component.scss} (100%) create mode 100644 components/02-molecules/tabs/libraries.yml create mode 100644 components/03-organisms/grid/_grid-item.component.scss rename components/03-organisms/grid/{_grid-item.scss => _grid-item.mixin.scss} (50%) rename components/03-organisms/grid/{_grid.scss => _grid.component.scss} (58%) create mode 100644 components/03-organisms/grid/_grid.mixin.scss create mode 100644 components/03-organisms/grid/libraries.yml rename components/03-organisms/site/site-footer/{_site-footer.scss => _site-footer.component.scss} (100%) create mode 100644 components/03-organisms/site/site-footer/libraries.yml rename components/03-organisms/site/site-header/{_site-header.scss => _site-header.component.scss} (100%) create mode 100644 components/03-organisms/site/site-header/libraries.yml rename components/04-templates/{_default.scss => _default.component.scss} (100%) create mode 100644 components/04-templates/libraries.yml rename components/04-templates/placeholder/{_place-holder.scss => _place-holder.component.scss} (87%) create mode 100644 components/04-templates/placeholder/libraries.yml 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/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 index 292ba917..921bc48b 100644 --- a/components/01-atoms/buttons/_buttons.component.scss +++ b/components/01-atoms/buttons/_buttons.component.scss @@ -1,95 +1,5 @@ @import '../../import'; -// Sass map to define colors. Each set should have a "Dark" variation when required. -// e.g. `default` and `default-dark`. Or `purple` and `purple-dark`. -$button-colors: ( - primary: ( - text: clr(text-inverse), - bg: clr(primary), - text-hover: clr(primary), - bg-hover: clr(highlight), - ), - primary-dark: ( - text: clr(text), - bg: clr(primary), - text-hover: clr(text), - bg-hover: clr(highlight-high), - ), - secondary: ( - text: clr(text-inverse), - bg: clr(secondary), - text-hover: clr(secondary), - bg-hover: clr(highlight), - ), - secondary-dark: ( - text: clr(text), - bg: clr(secondary), - text-hover: clr(text), - bg-hover: clr(highlight-high), - ), -); - -// Mixin to define colors for one or more schemes. -// Simply pass the color scheme to the mixin to get the colors defined in the map. -// e.g. @include buttonColors(default) will get all of the colors defined in the "default" section. -@mixin buttonColors( - $scheme, - $pallate: map-get($button-colors, $scheme), - $map: $button-colors -) { - color: map-get($pallate, text); - background-color: map-get($pallate, bg); - - &:visited { - color: map-get($pallate, text); - } - - &:hover { - color: map-get($pallate, text-hover); - background-color: map-get($pallate, bg-hover); - } -} - -// The button-base mixin contains styles that apply to all buttons -// regardless of color or size. -@mixin button-base { - border: none; - cursor: pointer; - display: inline-block; - text-decoration: none; - text-align: center; - text-transform: uppercase; -} - -// Button color variations -// Note how we include dark mode options for each -@mixin button-color-primary { - @include buttonColors(primary); - - @media (prefers-color-scheme: dark) { - @include buttonColors(primary-dark); - } -} - -@mixin button-color-secondary { - @include buttonColors(secondary); - - @media (prefers-color-scheme: dark) { - @include buttonColors(secondary-dark); - } -} - -// Button size variations -@mixin button-medium { - line-height: 1.4; - padding: $space-one-half $space; -} - -@mixin button-large { - line-height: 2; - padding: $space $space-double; -} - .button { @include button-base; @include button-color-primary; diff --git a/components/01-atoms/buttons/_buttons.mixin.scss b/components/01-atoms/buttons/_buttons.mixin.scss new file mode 100644 index 00000000..41c9ff52 --- /dev/null +++ b/components/01-atoms/buttons/_buttons.mixin.scss @@ -0,0 +1,89 @@ +// Sass map to define colors. Each set should have a "Dark" variation when required. +// e.g. `default` and `default-dark`. Or `purple` and `purple-dark`. +$button-colors: ( + primary: ( + text: clr(text-inverse), + bg: clr(primary), + text-hover: clr(primary), + bg-hover: clr(highlight), + ), + primary-dark: ( + text: clr(text), + bg: clr(primary), + text-hover: clr(text), + bg-hover: clr(highlight-high), + ), + secondary: ( + text: clr(text-inverse), + bg: clr(secondary), + text-hover: clr(secondary), + bg-hover: clr(highlight), + ), + secondary-dark: ( + text: clr(text), + bg: clr(secondary), + text-hover: clr(text), + bg-hover: clr(highlight-high), + ), +); + +// Mixin to define colors for one or more schemes. +// Simply pass the color scheme to the mixin to get the colors defined in the map. +// e.g. @include buttonColors(default) will get all of the colors defined in the "default" section. +@mixin buttonColors( + $scheme, + $pallate: map-get($button-colors, $scheme), + $map: $button-colors +) { + color: map-get($pallate, text); + background-color: map-get($pallate, bg); + + &:visited { + color: map-get($pallate, text); + } + + &:hover { + color: map-get($pallate, text-hover); + background-color: map-get($pallate, bg-hover); + } +} + +// The button-base mixin contains styles that apply to all buttons +// regardless of color or size. +@mixin button-base { + border: none; + cursor: pointer; + display: inline-block; + text-decoration: none; + text-align: center; + text-transform: uppercase; +} + +// Button color variations +// Note how we include dark mode options for each +@mixin button-color-primary { + @include buttonColors(primary); + + @media (prefers-color-scheme: dark) { + @include buttonColors(primary-dark); + } +} + +@mixin button-color-secondary { + @include buttonColors(secondary); + + @media (prefers-color-scheme: dark) { + @include buttonColors(secondary-dark); + } +} + +// Button size variations +@mixin button-medium { + line-height: 1.4; + padding: $space-one-half $space; +} + +@mixin button-large { + line-height: 2; + padding: $space $space-double; +} 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/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..88c6812d --- /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.scss: {} 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..d0adefa6 --- /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.scss: {} 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..1ea54963 --- /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.scss: {} 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..5d65c87f --- /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.scss: {} \ No newline at end of file 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..16053484 --- /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.scss: {} \ No newline at end of file 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..ec8e0d0b --- /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.scss: {} \ No newline at end of file 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..ee776511 --- /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.scss: {} \ No newline at end of file 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..0f50a122 --- /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.scss: {} \ No newline at end of file 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..63ec79f8 --- /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.scss: {} \ No newline at end of file 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..8a18d899 --- /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.scss: {} \ No newline at end of file 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..14b39378 --- /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.scss: {} \ No newline at end of file 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.component.scss b/components/02-molecules/card/_card.component.scss index d9e46746..69279f5f 100644 --- a/components/02-molecules/card/_card.component.scss +++ b/components/02-molecules/card/_card.component.scss @@ -1,11 +1,9 @@ -@import '../../import'; - .card__heading { // @include heading-large($font-size: 1.3rem); @include no-bottom; &-link { - // @include link; + @include link; } } @@ -21,7 +19,7 @@ } .card__link { - // @include link; + @include link; } .card__button { 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/cta/_cta.component.scss b/components/02-molecules/cta/_cta.component.scss index 025c74bb..04fe925d 100644 --- a/components/02-molecules/cta/_cta.component.scss +++ b/components/02-molecules/cta/_cta.component.scss @@ -1,5 +1,3 @@ -@import '../../import'; - .cta { background-color: clr(background-section); padding: $space-triple; 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/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..076eee8a --- /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.scss: {} \ No newline at end of file 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..a0a51424 --- /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.scss: {} 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..b581cc0d --- /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.scss: {} + 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.scss: {} + +molecules.menus.main_menu.main_menu_link: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/main-menu/_02-main-menu-link.scss: {} + +molecules.menus.main_menu.main_menu_toggle: + version: 0.1 + css: + component: + dist/css/02-molecules/menus/main-menu/_03-main-menu-toggle.scss: {} 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') }}