feat: add compound 1.10.6 components

.storybook/preview.js

@@ -27,8 +27,10 @@ export const parameters = {
       order: [
         'Cover',
         'Docs',
-        'Examples',
+        'Pages',
+        'Templates',
         'Components',
+        ['Base', 'Atoms', "Molecules", "Organisms", "*"],
         'Tokens',
         '*',
         'WIP',

.storybook/setupTwig.js

@@ -18,11 +18,37 @@ const fetchVariantConfig = () => {
         name: 'components',
         directory: './src/components/components',
       },
+      {
+        name: 'base',
+        directory: './src/components/components/00-base',
+      },
+      {
+        name: 'atoms',
+        directory: './src/components/components/01-atoms',
+      },
+      {
+        name: 'molecules',
+        directory: './src/components/components/02-molecules',
+      },
+      {
+        name: 'organisms',
+        directory: './src/components/components/03-organisms',
+      },
+      {
+        name: 'templates',
+        directory: './src/components/components/04-templates',
+      },
     ];
   }
 };
 
-module.exports.namespaces = {};
+module.exports.namespaces = {
+  atoms: resolve(__dirname, '../', 'components/components/01-atoms'),
+  molecules: resolve(__dirname, '../', 'components/components/02-molecules'),
+  organisms: resolve(__dirname, '../', 'components/components/03-organisms'),
+  templates: resolve(__dirname, '../', 'components/components/04-templates'),
+};
+
 for (const { name, directory } of fetchVariantConfig()) {
   module.exports.namespaces[name] = resolve(__dirname, '../', directory);
 }

src/components/components/00-base/00-defaults/_01-variables.scss

@@ -0,0 +1,39 @@
+/*
+ * General Variables
+ * Note: colors should go into
+ * components/00-base/01-colors/_color-vars.css
+ * and breakpoint related vars into
+ * components/00-base/base/_breakpoints.css
+*/
+
+// Fonts
+$font-body: georgia, times, 'Times New Roman', serif;
+$font-heading: 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;
+
+// Spacing
+$space: 1rem;
+
+// Times
+$space-double: calc($space * 2);
+$space-triple: calc($space * 3);
+$space-quadruple: calc($space * 4);
+$space-quintuple: calc($space * 5);
+$space-sextuple: calc($space * 6);
+$space-septuple: calc($space * 7);
+
+// Divided
+$space-one-half: calc($space / 2);
+$space-one-third: calc($space / 3);
+$space-one-fourth: calc($space / 4);
+$space-one-fifth: calc($space / 5);
+$space-one-sixth: calc($space / 6);
+$space-one-seventh: calc($space / 7);
+$space-one-eighth: calc($space / 8);
+
+/*
+ * Use this on the outer wrapper of page-level elements.
+ * It ensures consistent spacing between elements on the page.
+ */
+@mixin space-stack-page {
+  margin-bottom: $space-double;
+}

src/components/components/00-base/00-defaults/_02-breakpoints.scss

@@ -0,0 +1,69 @@
+/**
+ * Breakpoint Configuration
+ * @see https://github.com/Team-Sass/breakpoint/wiki
+ *
+ */
+
+/////////////////////
+// Global Breakpoints
+
+// Avoid using in favor of atomic, content-specific, breakpoints.
+// These should be used for generic code, like layouts and typography, only.
+
+$xs: 320px;
+$small: 480px;
+$medium: 720px;
+$large: 920px;
+$xl: 1224px;
+
+// The max-width breakpoint is used when the design should be applied at whatever the
+// largest breakpoint is regardless of actual pixel value. e.g. removing outer margin on body wrapper
+$max-width: $xl;
+
+/// Mixin - xs Breakpoint
+/// Allows easier @include xs {} syntax
+@mixin xs {
+  @include breakpoint($xs) {
+    @content;
+  }
+}
+
+/// Mixin - small Breakpoint
+/// Allows easier @include small {} syntax
+@mixin small {
+  @include breakpoint($small) {
+    @content;
+  }
+}
+
+/// Mixin - medium Breakpoint
+/// Allows easier @include medium {} syntax
+@mixin medium {
+  @include breakpoint($medium) {
+    @content;
+  }
+}
+
+/// Mixin - large Breakpoint
+/// Allows easier @include large {} syntax
+@mixin large {
+  @include breakpoint($large) {
+    @content;
+  }
+}
+
+/// Mixin - xl Breakpoint
+/// Allows easier @include xl {} syntax
+@mixin xl {
+  @include breakpoint($xl) {
+    @content;
+  }
+}
+
+/// Mixin - max-width Breakpoint
+/// Allows easier @include max-width {} syntax
+@mixin max-width {
+  @include breakpoint($max-width) {
+    @content;
+  }
+}

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

@@ -0,0 +1,68 @@
+/*
+ * General Mixins (put specific ones in component files where applicable)
+*/
+
+/* Mixin - Clearfix.
+ * Adds clearfix based on http://bourbon.io/docs/#clearfix
+ * use example =   @include cleafix
+*/
+
+@mixin body-copy {
+  font-family: $font-body;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+}
+
+$outer-container-break: $small;
+
+/// Mixin - Wrapper
+/// Outer container mixin for large screens
+@mixin wrapper(
+  $container-max-width: $max-width,
+  $outer-container-break: $small,
+  $v-margin: 0,
+  $v-padding: 0,
+  $h-padding: $space,
+  $h-padding-large: $h-padding
+) {
+  max-width: #{$container-max-width};
+  width: 100%;
+  margin: #{$v-margin} auto;
+  padding: #{$v-padding} #{$h-padding};
+
+  @include breakpoint($outer-container-break) {
+    padding: #{$v-padding} #{$h-padding-large};
+  }
+
+  @include breakpoint($container-max-width) {
+    padding-left: calc(
+      #{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2))
+    );
+    padding-right: calc(
+      #{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2))
+    );
+  }
+}
+
+// Mixin - Standard Margin
+@mixin margin {
+  margin-bottom: 1em;
+}
+
+@mixin no-bottom {
+  margin-bottom: 0;
+}
+
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

src/components/components/00-base/01-colors/_colors-component-library.scss

@@ -0,0 +1,58 @@
+@use 'colors-used';
+
+// These styles only affect the colors "Usage" page in the component library
+.cl-colors {
+  padding: 1rem;
+}
+
+.cl-colors__list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 2rem;
+  padding: 0;
+}
+
+.cl-colors__item {
+  list-style: none;
+  padding: 1rem 2rem;
+  transition: all 0.4s;
+  flex: 1 1 20%;
+  min-width: 150px;
+  min-height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+// Dynamically set swatch text color based on the lightness of the background color
+@function set-color(
+  $color,
+  $text-primary: accent-high,
+  $text-secondary: muted
+) {
+  @if lightness($color) > 50 {
+    @return clr($text-primary);
+  } @else {
+    @return clr($text-secondary);
+  }
+}
+
+// Style default color swatches
+@each $name, $color in colors-used.$default-colors {
+  .cl-colors__item--default {
+    &-#{$name} {
+      background-color: clr($name);
+      color: set-color($color);
+    }
+  }
+}
+
+// Style dark color swatches
+@each $name, $color in colors-used.$dark-colors {
+  .cl-colors__item--dark {
+    &-#{$name} {
+      background-color: clr($name);
+      color: set-color($color, muted, accent-high);
+    }
+  }
+}

src/components/components/00-base/01-colors/_colors-vars.scss

@@ -0,0 +1,24 @@
+// Color variables - it is better to use the colors in
+// components/00-base/01-colors/_01-colors-used.scss rather than
+// these colors directly.
+
+// Grayscale
+$white: white;
+$near-white: #f2f2f2;
+$gray-lightest: #e5e5e5;
+$gray-lighter: #ccc;
+$gray-light: #888;
+$gray: #666;
+$gray-dark: #4c4c4c;
+$gray-darker: #333;
+$black: black;
+
+// Status
+$yellow-light: #f9fb93;
+$red-light: #fbe3e4;
+$green-light: #cfefc2;
+
+// Project
+$purple: #610c63;
+$blue: #005de0;
+$blue-light: #5692e6;