Add responsive images to Storybook

source/00-config/storybook.global-data.yml

@@ -16,11 +16,271 @@ url: '#0'
 file_name: 'File name'
 file_mime: 'application/pdf'
 file_size: '115.83 KB'
+responsive_image_gutters: '2rem'
 img_thumbnail:
-  src: 'http://fpoimg.com/140x105?text=Thumbnail 4:3'
-  alt: 'Thumbnail 4:3'
-  height: '105'
-  width: '140'
+  src: 'http://fpoimg.com/96x96?text=Thumbnail'
+  alt: 'Thumbnail'
+  height: '96'
+  width: '96'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/192x192?text=Thumbnail'
+      width: '192'
+    2:
+      src: 'https://fpoimg.com/288x288?text=Thumbnail'
+      width: '288'
+img_thumbnail_16x9:
+  src: 'https://fpoimg.com/96x54?text=Thumbnail%2016:9'
+  alt: 'Thumbnail'
+  height: '54'
+  width: '96'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/192x108?text=Thumbnail%2016:9'
+      width: '192'
+    2:
+      src: 'https://fpoimg.com/288x162?text=Thumbnail%2016:9'
+      width: '288'
+img_thumbnail_4x3:
+  src: 'https://fpoimg.com/96x72?text=Thumbnail%204:3'
+  alt: 'Thumbnail'
+  height: '72'
+  width: '96'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/192x144?text=Thumbnail%204:3'
+      width: '192'
+    2:
+      src: 'https://fpoimg.com/288x216?text=Thumbnail%204:3'
+      width: '288'
+img_thumbnail_3x4:
+  src: 'https://fpoimg.com/96x128?text=Thumbnail%203:4'
+  alt: 'Thumbnail'
+  height: '128'
+  width: '96'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/192x256?text=Thumbnail%203:4'
+      width: '192'
+    2:
+      src: 'https://fpoimg.com/288x384?text=Thumbnail%203:4'
+      width: '288'
+img_small:
+  src: 'http://fpoimg.com/192x192?text=Small'
+  alt: 'Small'
+  height: '192'
+  width: '192'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/384x384?text=Small'
+      width: '384'
+    2:
+      src: 'https://fpoimg.com/576x576?text=Small'
+      width: '576'
+img_small_16x9:
+  src: 'https://fpoimg.com/192x108?text=Small%2016:9'
+  alt: 'Small'
+  height: '108'
+  width: '192'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/384x216?text=Small%2016:9'
+      width: '384'
+    2:
+      src: 'https://fpoimg.com/576x324?text=Small%2016:9'
+      width: '576'
+img_small_4x3:
+  src: 'https://fpoimg.com/192x144?text=Small%204:3'
+  alt: 'Small'
+  height: '72'
+  width: '192'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/384x288?text=Small%204:3'
+      width: '384'
+    2:
+      src: 'https://fpoimg.com/576x432?text=Small%204:3'
+      width: '576'
+img_small_3x4:
+  src: 'https://fpoimg.com/192x256?text=Small%203:4'
+  alt: 'Small'
+  height: '128'
+  width: '192'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/384x512?text=Small%203:4'
+      width: '384'
+    2:
+      src: 'https://fpoimg.com/576x768?text=Small%203:4'
+      width: '576'
+img_medium:
+  src: 'http://fpoimg.com/384x384?text=Medium'
+  alt: 'Medium'
+  height: '384'
+  width: '384'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x288?text=Medium'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/576x576?text=Medium'
+      width: '576'
+    3:
+      src: 'https://fpoimg.com/768x768?text=Medium'
+      width: '768'
+    4:
+      src: 'https://fpoimg.com/1152x1152?text=Medium'
+      width: '1152'
+img_medium_16x9:
+  src: 'https://fpoimg.com/384x216?text=Medium%2016:9'
+  alt: 'Medium'
+  height: '216'
+  width: '384'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x162?text=Medium%2016:9'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/576x324?text=Medium%2016:9'
+      width: '576'
+    3:
+      src: 'https://fpoimg.com/768x432?text=Medium%2016:9'
+      width: '768'
+    4:
+      src: 'https://fpoimg.com/1152x648?text=Medium%2016:9'
+      width: '1152'
+img_medium_4x3:
+  src: 'https://fpoimg.com/384x288?text=Medium%204:3'
+  alt: 'Medium'
+  height: '288'
+  width: '384'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x216?text=Medium%204:3'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/576x432?text=Medium%204:3'
+      width: '576'
+    3:
+      src: 'https://fpoimg.com/768x576?text=Medium%204:3'
+      width: '768'
+    4:
+      src: 'https://fpoimg.com/1152x864?text=Medium%204:3'
+      width: '1152'
+img_medium_3x4:
+  src: 'https://fpoimg.com/384x512?text=Medium%203:4'
+  alt: 'Medium'
+  height: '512'
+  width: '384'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x384?text=Medium%203:4'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/576x768?text=Medium%203:4'
+      width: '576'
+    3:
+      src: 'https://fpoimg.com/768x1024?text=Medium%203:4'
+      width: '768'
+    4:
+      src: 'https://fpoimg.com/1152x1536?text=Medium%203:4'
+      width: '1152'
+img_large:
+  src: 'http://fpoimg.com/768x768?text=Large'
+  alt: 'Large'
+  height: '768'
+  width: '768'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x288?text=Large'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/384x384?text=Large'
+      width: '384'
+    3:
+      src: 'https://fpoimg.com/576x576?text=Large'
+      width: '576'
+    4:
+      src: 'https://fpoimg.com/1152x1152?text=Large'
+      width: '1152'
+    5:
+      src: 'https://fpoimg.com/1536x1536?text=Large'
+      width: '1536'
+    6:
+      src: 'https://fpoimg.com/2304x2304?text=Large'
+      width: '2304'
+img_large_16x9:
+  src: 'https://fpoimg.com/768x432?text=Large%2016:9'
+  alt: 'Large'
+  height: '432'
+  width: '768'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x162?text=Large%2016:9'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/384x216?text=Large%2016:9'
+      width: '384'
+    3:
+      src: 'https://fpoimg.com/576x324?text=Large%2016:9'
+      width: '576'
+    4:
+      src: 'https://fpoimg.com/1152x648?text=Large%2016:9'
+      width: '1152'
+    5:
+      src: 'https://fpoimg.com/1536x864?text=Large%2016:9'
+      width: '1536'
+    6:
+      src: 'https://fpoimg.com/2304x1296?text=Large%2016:9'
+      width: '2304'
+img_large_4x3:
+  src: 'https://fpoimg.com/768x576?text=Large%204:3'
+  alt: 'Large'
+  height: '576'
+  width: '768'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x216?text=Large%204:3'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/384x288?text=Large%204:3'
+      width: '384'
+    3:
+      src: 'https://fpoimg.com/576x432?text=Large%204:3'
+      width: '576'
+    4:
+      src: 'https://fpoimg.com/1152x864?text=Large%204:3'
+      width: '1152'
+    5:
+      src: 'https://fpoimg.com/1536x1152?text=Large%204:3'
+      width: '1536'
+    6:
+      src: 'https://fpoimg.com/2304x1728?text=Large%204:3'
+      width: '2304'
+img_large_3x4:
+  src: 'https://fpoimg.com/768x1024?text=Large%203:4'
+  alt: 'Large'
+  height: '1024'
+  width: '768'
+  responsive:
+    1:
+      src: 'https://fpoimg.com/288x384?text=Large%203:4'
+      width: '288'
+    2:
+      src: 'https://fpoimg.com/384x512?text=Large%203:4'
+      width: '384'
+    3:
+      src: 'https://fpoimg.com/576x768?text=Large%203:4'
+      width: '576'
+    4:
+      src: 'https://fpoimg.com/1152x1536?text=Large%203:4'
+      width: '1152'
+    5:
+      src: 'https://fpoimg.com/1536x2048?text=Large%203:4'
+      width: '1536'
+    6:
+      src: 'https://fpoimg.com/2304x3072?text=Large%203:4'
+      width: '2304'
 img_hero:
   src: 'http://fpoimg.com/1600x800?text=Hero 2:1'
   alt: 'Hero 2:1'

source/01-global/images/_responsive-image.twig

@@ -0,0 +1,7 @@
+<img {% if modifier_classes %}class="{{ modifier_classes }}" {% endif %}
+  src="{{ image_src }}"
+  alt="{{ image_alt }}"
+  {%- if image_height %} height="{{ image_height }}"{% endif -%}
+  {%- if image_width %} width="{{ image_width }}"{% endif -%}
+  sizes="{{ image_sizes }}"
+  srcset="{{ image_srcset }}">

source/01-global/images/large-image-16x9.twig

@@ -0,0 +1,15 @@
+{% extends "@global/images/large-image.twig" %}
+
+{% set image_src = img_large_16x9.src %}
+{% set image_alt = img_large_16x9.alt %}
+{% set image_height = img_large_16x9.height %}
+{% set image_width = img_large_16x9.width %}
+{% set image_srcset -%}
+  {{ img_large_16x9.responsive.1.src }} {{ img_large_16x9.responsive.1.width }}w,
+  {{ img_large_16x9.responsive.2.src }} {{ img_large_16x9.responsive.2.width }}w,
+  {{ img_large_16x9.responsive.3.src }} {{ img_large_16x9.responsive.3.width }}w,
+  {{ img_large_16x9.src }} {{ img_large_16x9.width }}w,
+  {{ img_large_16x9.responsive.4.src }} {{ img_large_16x9.responsive.4.width }}w,
+  {{ img_large_16x9.responsive.5.src }} {{ img_large_16x9.responsive.5.width }}w,
+  {{ img_large_16x9.responsive.6.src }} {{ img_large_16x9.responsive.6.width }}w
+{%- endset %}

source/01-global/images/large-image-3x4.twig

@@ -0,0 +1,15 @@
+{% extends "@global/images/large-image.twig" %}
+
+{% set image_src = img_large_3x4.src %}
+{% set image_alt = img_large_3x4.alt %}
+{% set image_height = img_large_3x4.height %}
+{% set image_width = img_large_3x4.width %}
+{% set image_srcset -%}
+  {{ img_large_3x4.responsive.1.src }} {{ img_large_3x4.responsive.1.width }}w,
+  {{ img_large_3x4.responsive.2.src }} {{ img_large_3x4.responsive.2.width }}w,
+  {{ img_large_3x4.responsive.3.src }} {{ img_large_3x4.responsive.3.width }}w,
+  {{ img_large_3x4.src }} {{ img_large_3x4.width }}w,
+  {{ img_large_3x4.responsive.4.src }} {{ img_large_3x4.responsive.4.width }}w,
+  {{ img_large_3x4.responsive.5.src }} {{ img_large_3x4.responsive.5.width }}w,
+  {{ img_large_3x4.responsive.6.src }} {{ img_large_3x4.responsive.6.width }}w
+{%- endset %}

source/01-global/images/large-image-4x3.twig

@@ -0,0 +1,15 @@
+{% extends "@global/images/large-image.twig" %}
+
+{% set image_src = img_large_4x3.src %}
+{% set image_alt = img_large_4x3.alt %}
+{% set image_height = img_large_4x3.height %}
+{% set image_width = img_large_4x3.width %}
+{% set image_srcset -%}
+  {{ img_large_4x3.responsive.1.src }} {{ img_large_4x3.responsive.1.width }}w,
+  {{ img_large_4x3.responsive.2.src }} {{ img_large_4x3.responsive.2.width }}w,
+  {{ img_large_4x3.responsive.3.src }} {{ img_large_4x3.responsive.3.width }}w,
+  {{ img_large_4x3.src }} {{ img_large_4x3.width }}w,
+  {{ img_large_4x3.responsive.4.src }} {{ img_large_4x3.responsive.4.width }}w,
+  {{ img_large_4x3.responsive.5.src }} {{ img_large_4x3.responsive.5.width }}w,
+  {{ img_large_4x3.responsive.6.src }} {{ img_large_4x3.responsive.6.width }}w
+{%- endset %}

source/01-global/images/large-image.stories.jsx

@@ -0,0 +1,41 @@
+import parse from 'html-react-parser';
+
+import { withGlobalWrapper } from '../../../.storybook/decorators';
+import defaultTemplate from './large-image.twig';
+import ratio16x9Template from './large-image-16x9.twig';
+import ratio4x3Template from './large-image-4x3.twig';
+import ratio3x4Template from './large-image-3x4.twig';
+import globalData from '../../00-config/storybook.global-data.yml';
+
+const settings = {
+  title: 'Global/Responsive Images/Large Image',
+  decorators: [withGlobalWrapper],
+  parameters: {
+    controls: {
+      include: ['modifier_classes'],
+    },
+  },
+};
+
+const Default = {
+  render: args => parse(defaultTemplate(args)),
+  args: { ...globalData },
+};
+
+const Ratio16x9 = {
+  render: args => parse(ratio16x9Template(args)),
+  args: { ...globalData },
+};
+
+const Ratio4x3 = {
+  render: args => parse(ratio4x3Template(args)),
+  args: { ...globalData },
+};
+
+const Ratio3x4 = {
+  render: args => parse(ratio3x4Template(args)),
+  args: { ...globalData },
+};
+
+export default settings;
+export { Default, Ratio16x9, Ratio4x3, Ratio3x4 };