fix: wip

.storybook/preview.js

@@ -22,6 +22,7 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   options: {
     storySort: {
+      method: 'alphabetical',
       order: [
         'Cover',
         'Docs',
@@ -33,6 +34,7 @@ export const parameters = {
         '*',
         'WIP',
       ],
+      includeNames: true
     },
   },
 };

compound/00-base/00-defaults/_01-variables.scss

@@ -8,7 +8,10 @@
 
 // Fonts
 $font-body: georgia, times, 'Times New Roman', serif;
-$font-heading: 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;
+var(--font-families-secondary): 'HelveticaNeue',
+'Helvetica',
+'Arial',
+sans-serif;
 
 // Spacing
 $space: 1rem;
@@ -36,4 +39,4 @@ $space-one-eighth: calc($space/8);
  */
 @mixin space-stack-page {
   margin-bottom: $space-double;
-}
+}

src/components/button/button.stories.js

@@ -3,18 +3,16 @@ import figma from '../../../.storybook/configma.json';
 
 export default {
   title: 'Components/Button',
-  decorators: [
-    (story) => `<div><h2 class="sb-title">Button</h2>${story()}</div>`,
-  ],
+  decorators: [(story) => `${story()}`],
 };
 
 export const Button = () => `
   <p>Default:</p>
   ${template()}
   <p>Hover:</p>
-  ${template({ buttonAdditionalClasses: ['button--hover'] })}
+  ${template({ button__additional_classes: ['button--hover'] })}
   <p>Focus:</p>
-  ${template({ buttonAdditionalClasses: ['button--focus'] })}
+  ${template({ button__additional_classes: ['button--focus'] })}
 `;
 
 Button.parameters = {

src/components/button/button.twig

@@ -1,7 +1,13 @@
-{% set buttonClasses = ['button'] %}
-{% if buttonAdditionalClasses %}
-  {% set buttonClasses = buttonClasses|merge(buttonAdditionalClasses) %}
-{% endif %}
-{% set buttonLabel = buttonLabel|default('Button') %}
+{% set button__tag = button__tag|default('button') %}
+{% set button__base_class = button__base_class|default('button') %}
+{% set button__attributes = button__attributes|default([]) %}
+{% set button__attributes = button__attributes|merge({
+  'class': bem(button__base_class, button__modifiers, button__blockname, button__additional_classes),
+}) %}
+{% set button__content = button__content|default('Button Label') %}
 
-<a href="#" class="{{buttonClasses|join(' ')}}">{{buttonLabel}}</a>
+<{{button__tag}} {{ add_attributes(button__attributes) }}>
+	{% block button__content %}
+		{{ button__content }}
+	{% endblock %}
+</{{button__tag}}>

src/components/images/image/_picture.twig

@@ -0,0 +1,19 @@
+{% set picture_base_class = picture_base_class|default('picture') %}
+
+<picture {{ bem(picture_base_class, picture_modifiers, picture_blockname) }}>
+	{% if sources %}
+		{#
+		    Internet Explorer 9 doesn't recognise source elements that are wrapped in
+		    picture tags. See http://scottjehl.github.io/picturefill/#ie9
+		    #}
+		<!--[if IE 9]><video style="display: none;"><![endif]-->
+			{% for source_attributes in sources %}
+		<source{{source_attributes}}/>
+	{% endfor %}
+		<!--[if IE 9]></video><![endif]-->
+	{% endif %}
+	{# The controlling image, with the fallback image in srcset. #}
+	{% include "@components/images/image/_image.twig" with {
+    image_blockname: picture_image_blockname|default(picture_blockname),
+  } %}
+</picture>

src/components/images/image/figure.twig

@@ -0,0 +1,22 @@
+{% set image_figure_base_class = image_figure_base_class|default('figure') %}
+{% set image_link_base_class = image_link_base_class|default('link') %}
+
+<figure {{ bem(image_figure_base_class, image_figure_modifiers, image_figure_blockname) }}>
+	{% if image_url %}
+		<a {{ bem(image_link_base_class, image_link_modifiers, image_link_blockname|default(image_figure_base_class)) }} href="{{ image_url }}">
+		{% endif %}
+		{% block figure_content %}
+			{% include "@components/images/image/responsive-image.twig" with {
+        responsive_image_blockname: responsive_image_blockname|default(image_figure_base_class),
+      } %}
+		{% endblock %}
+		{% if image_url %}
+		</a>
+	{% endif %}
+
+	{% if image_caption %}
+		<figcaption {{ bem('caption', figcaption_modifiers, figcaption_blockname|default(image_figure_base_class)) }}>
+			{{ image_caption }}
+		</figcaption>
+	{% endif %}
+</figure>

compound/01-atoms/images/image/figure.yml → src/components/images/image/figure.yml

@@ -1,5 +1,5 @@
 output_image_tag: true
 image_url: '#'
-image_src: 'https://placeimg.com/1200/200/tech'
+image_src: 'https://placehold.co/1200x200'
 image_alt: 'This is the alt text'
 image_caption: 'This is an image caption.'

src/components/images/image/image.yml

@@ -0,0 +1,5 @@
+output_image_tag: true
+image_srcset: 'https://placehold.co/320x180 320w, https://placehold.co/480x270 480w, https://placehold.co/640x360 640w, https://placehold.co/800x450 800w, https://placehold.co/960x540 960w, https://placehold.co/1120x630 1120w, https://placehold.co/1280x720 1280w, https://placehold.co/1440x810 1440w, https://placehold.co/1600x900 1600w, https://placehold.co/1760x990 1760w, https://placehold.co/1920x1080 1920w, https://placehold.co/2080x1170 2080w, https://placehold.co/2240x1260 2240w'
+image_sizes: '100vw'
+image_src: 'https://placehold.co/320x180'
+image_alt: 'A 16 by 9 image'

compound/01-atoms/images/image/responsive-image.twig → src/components/images/image/responsive-image.twig

@@ -8,7 +8,7 @@
 {% set responsive_image_base_class = responsive_image_base_class|default('image') %}
 
 {% if output_image_tag %}
-  {% include "@atoms/images/image/_image.twig" with {
+	{% include "@components/images/image/_image.twig" with {
     image_base_class: responsive_image_base_class,
     image_modifiers: responsive_image_modifiers,
     image_blockname: responsive_image_blockname,
@@ -19,7 +19,7 @@
     image_title: image_title|default(img_element['#title']),
   } %}
 {% else %}
-  {% include "@atoms/images/image/_picture.twig" with {
+	{% include "@components/images/image/_picture.twig" with {
     picture_base_class: responsive_image_base_class,
     picture_modifiers: responsive_image_modifiers,
     picture_blockname: responsive_image_blockname,

compound/01-atoms/images/images.stories.js → src/components/images/images.stories.js

@@ -1,6 +1,5 @@
 import image from './image/responsive-image.twig';
 import figure from './image/figure.twig';
-import iconTwig from './icons/icons.twig';
 
 import imageData from './image/image.yml';
 import figureData from './image/figure.yml';
@@ -15,10 +14,8 @@ svgIcons.keys().forEach((key) => {
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Images' };
+export default { title: 'Components/Media' };
 
 export const images = () => image(imageData);
 
 export const figures = () => figure(figureData);
-
-export const Icons = () => iconTwig({ icons });

src/components/input/input.stories.js

@@ -2,7 +2,7 @@ import template from './input.twig';
 import figma from '../../../.storybook/configma.json';
 
 export default {
-  title: 'Components/Input',
+  title: 'Components/Forms/Input',
   decorators: [
     (story) => `<div><h2 class="sb-title">Input</h2>${story()}</div>`,
   ],

compound/01-atoms/links/link/links.stories.js → src/components/links/link/links.stories.js

@@ -5,6 +5,6 @@ import linkData from './link.yml';
 /**
  * Storybook Definition.
  */
-export default { title: 'Atoms/Links' };
+export default { title: 'Components/Typography' };
 
 export const links = () => link(linkData);