From d20ef59a6cb33c58a98a84d1a894620495582ec7 Mon Sep 17 00:00:00 2001
From: Danielle Romo <danielle@cloudfour.com>
Date: Wed, 14 Jul 2021 10:36:22 -0700
Subject: [PATCH 1/6] Add column modifier to lists

---
 src/objects/list/list.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/objects/list/list.scss b/src/objects/list/list.scss
index 1cff2e52e..eba164e97 100644
--- a/src/objects/list/list.scss
+++ b/src/objects/list/list.scss
@@ -1,5 +1,8 @@
 @use "sass:math";
+@use "../../compiled/tokens/scss/breakpoint";
 @use "../../compiled/tokens/scss/size";
+@use '../../mixins/fluid';
+@use '../../mixins/media-query';
 
 /**
  * Override browser defaults. Note that this means it's very important to
@@ -40,3 +43,17 @@
   margin-left: math.div(size.$spacing-list-inline-gap, 2);
   margin-right: math.div(size.$spacing-list-inline-gap, 2);
 }
+
+@for $i from 2 through 3 {
+  .o-list--#{$i}-column {
+    @include media-query.breakpoint-classes($from: s, $to: xl) {
+      columns: #{$i};
+      @include fluid.grid-gap(
+        breakpoint.$s,
+        breakpoint.$xl,
+        size.$spacing-gap-fluid-min,
+        size.$spacing-gap-fluid-max
+      );
+    }
+  }
+}

From 702365f06e6ca345b51cfdb6f3469499c8ae75c3 Mon Sep 17 00:00:00 2001
From: Danielle Romo <danielle@cloudfour.com>
Date: Thu, 15 Jul 2021 11:39:40 -0700
Subject: [PATCH 2/6] Update example and controls

---
 src/objects/list/demo/columns.twig | 15 ++++++++++++
 src/objects/list/list.stories.mdx  | 37 +++++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/objects/list/demo/columns.twig

diff --git a/src/objects/list/demo/columns.twig b/src/objects/list/demo/columns.twig
new file mode 100644
index 000000000..9dfacedf1
--- /dev/null
+++ b/src/objects/list/demo/columns.twig
@@ -0,0 +1,15 @@
+{% if columns and columns > 1 and columnsBreakpoint and columnsBreakpoint != 'none' %}
+  {% set _list_class = 'o-list--' ~ columns ~ '-column' ~ columnsBreakpoint %}
+{% else %}
+  {% set _list_class = '' %}
+{% endif %}
+
+{% embed '@cloudfour/objects/list/list.twig' with {
+  class: _list_class,
+} %}
+  {% block content %}
+    {% for item in items %}
+      <li>{{item}}</li>
+    {% endfor %}
+  {% endblock %}
+{% endembed %}
diff --git a/src/objects/list/list.stories.mdx b/src/objects/list/list.stories.mdx
index f45c5c4c9..b48d10140 100644
--- a/src/objects/list/list.stories.mdx
+++ b/src/objects/list/list.stories.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import template from './list.twig';
+import columnsDemo from './demo/columns.twig';
 const defaultItems = [
   'Design Tokens',
   'Objects',
@@ -12,8 +13,26 @@ const tagNames = ['ul', 'ol'];
 
 <Meta
   title="Objects/List"
+  parameters={{ docs: { inlineStories: false } }}
   argTypes={{
     class: { type: { name: 'string' } },
+    columns: {
+      control: {
+        type: 'range',
+        min: 2,
+        max: 3,
+        step: 1,
+      },
+      defaultValue: 3,
+    },
+    columnsBreakpoint: {
+      type: { name: 'string' },
+      control: {
+        type: 'inline-radio',
+        options: ['none', '@s', '@m', '@l', '@xl'],
+      },
+      defaultValue: 'none',
+    },
     items: { type: { name: 'array' }, defaultValue: defaultItems },
     tag_name: {
       type: { name: 'enum' },
@@ -32,7 +51,7 @@ The `o-list` object presents list items in a straightforward and unopinionated m
 By default, `o-list` removes default spacing and list item decorators:
 
 <Canvas>
-  <Story name="Default">{(args) => template(args)}</Story>
+  <Story name="Default" height="200px">{(args) => template(args)}</Story>
 </Canvas>
 
 ## Inline List
@@ -44,3 +63,19 @@ The `o-list--inline` modifier arranges items in a horizontal row, wrapping to ne
     {(args) => template(args)}
   </Story>
 </Canvas>
+
+## Columns
+
+Lists can be displayed in multiple columns using a modifier class. Use the format `o-list--X-column@Y`, where `X` is the desired column count (from 2 to 3) and `Y` is the desired [breakpoint](/docs/design-tokens-breakpoint--page) (from `s` to `xl`).
+
+<Canvas>
+  <Story
+    name="Column"
+    args={{
+      columns: 3,
+      columnsBreakpoint: '@m',
+    }}
+  >
+    {(args) => columnsDemo(args)}
+  </Story>
+</Canvas>

From 8a24a935337397509c2e3c8b7fe0a1daeb20ab47 Mon Sep 17 00:00:00 2001
From: Danielle Romo <danielle@cloudfour.com>
Date: Thu, 15 Jul 2021 11:44:28 -0700
Subject: [PATCH 3/6] Update changelog

---
 .changeset/fresh-houses-smell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fresh-houses-smell.md

diff --git a/.changeset/fresh-houses-smell.md b/.changeset/fresh-houses-smell.md
new file mode 100644
index 000000000..ef9130771
--- /dev/null
+++ b/.changeset/fresh-houses-smell.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add layout modifier to the List object

From 3f3a1a5d3dd9c3b5234aa692e8d29433f4983e45 Mon Sep 17 00:00:00 2001
From: Danielle Romo <danielle@cloudfour.com>
Date: Thu, 15 Jul 2021 11:56:15 -0700
Subject: [PATCH 4/6] Fix linting

---
 src/objects/list/list.stories.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/objects/list/list.stories.mdx b/src/objects/list/list.stories.mdx
index b48d10140..10fc2b2bb 100644
--- a/src/objects/list/list.stories.mdx
+++ b/src/objects/list/list.stories.mdx
@@ -51,7 +51,9 @@ The `o-list` object presents list items in a straightforward and unopinionated m
 By default, `o-list` removes default spacing and list item decorators:
 
 <Canvas>
-  <Story name="Default" height="200px">{(args) => template(args)}</Story>
+  <Story name="Default" height="200px">
+    {(args) => template(args)}
+  </Story>
 </Canvas>
 
 ## Inline List

From 13b55aafe27846ab0f1435ab22d60335aada3c40 Mon Sep 17 00:00:00 2001
From: Danielle Romo <danielle@cloudfour.com>
Date: Thu, 15 Jul 2021 13:30:56 -0700
Subject: [PATCH 5/6] Add column-gap mixin

---
 src/mixins/_fluid.scss     | 14 ++++++++++++++
 src/objects/list/list.scss |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/mixins/_fluid.scss b/src/mixins/_fluid.scss
index 13c5bdae9..d63f31a3c 100644
--- a/src/mixins/_fluid.scss
+++ b/src/mixins/_fluid.scss
@@ -40,6 +40,20 @@
  * Fluid properties
  */
 
+@mixin column-gap($min-width, $max-width, $min, $max, $include-min: true) {
+  @if $include-min {
+    column-gap: $min;
+  }
+
+  @media (min-width: $min-width) {
+    column-gap: fluid-calc($min-width, $max-width, $min, $max);
+  }
+
+  @media (min-width: $max-width) {
+    column-gap: $max;
+  }
+}
+
 @mixin font-size($min-width, $max-width, $min, $max) {
   font-size: $min;
 
diff --git a/src/objects/list/list.scss b/src/objects/list/list.scss
index eba164e97..3d70c3ceb 100644
--- a/src/objects/list/list.scss
+++ b/src/objects/list/list.scss
@@ -48,7 +48,7 @@
   .o-list--#{$i}-column {
     @include media-query.breakpoint-classes($from: s, $to: xl) {
       columns: #{$i};
-      @include fluid.grid-gap(
+      @include fluid.column-gap(
         breakpoint.$s,
         breakpoint.$xl,
         size.$spacing-gap-fluid-min,

From 4d7527b8e9e74ff019f44542ffc8dc39862e276d Mon Sep 17 00:00:00 2001
From: Danielle Romo <danielle@cloudfour.com>
Date: Thu, 15 Jul 2021 15:18:40 -0700
Subject: [PATCH 6/6] Use class in example

---
 src/objects/list/demo/columns.twig | 15 ---------------
 src/objects/list/list.stories.mdx  | 28 ++--------------------------
 2 files changed, 2 insertions(+), 41 deletions(-)
 delete mode 100644 src/objects/list/demo/columns.twig

diff --git a/src/objects/list/demo/columns.twig b/src/objects/list/demo/columns.twig
deleted file mode 100644
index 9dfacedf1..000000000
--- a/src/objects/list/demo/columns.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-{% if columns and columns > 1 and columnsBreakpoint and columnsBreakpoint != 'none' %}
-  {% set _list_class = 'o-list--' ~ columns ~ '-column' ~ columnsBreakpoint %}
-{% else %}
-  {% set _list_class = '' %}
-{% endif %}
-
-{% embed '@cloudfour/objects/list/list.twig' with {
-  class: _list_class,
-} %}
-  {% block content %}
-    {% for item in items %}
-      <li>{{item}}</li>
-    {% endfor %}
-  {% endblock %}
-{% endembed %}
diff --git a/src/objects/list/list.stories.mdx b/src/objects/list/list.stories.mdx
index 10fc2b2bb..3490b9fb5 100644
--- a/src/objects/list/list.stories.mdx
+++ b/src/objects/list/list.stories.mdx
@@ -1,6 +1,5 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import template from './list.twig';
-import columnsDemo from './demo/columns.twig';
 const defaultItems = [
   'Design Tokens',
   'Objects',
@@ -16,23 +15,6 @@ const tagNames = ['ul', 'ol'];
   parameters={{ docs: { inlineStories: false } }}
   argTypes={{
     class: { type: { name: 'string' } },
-    columns: {
-      control: {
-        type: 'range',
-        min: 2,
-        max: 3,
-        step: 1,
-      },
-      defaultValue: 3,
-    },
-    columnsBreakpoint: {
-      type: { name: 'string' },
-      control: {
-        type: 'inline-radio',
-        options: ['none', '@s', '@m', '@l', '@xl'],
-      },
-      defaultValue: 'none',
-    },
     items: { type: { name: 'array' }, defaultValue: defaultItems },
     tag_name: {
       type: { name: 'enum' },
@@ -71,13 +53,7 @@ The `o-list--inline` modifier arranges items in a horizontal row, wrapping to ne
 Lists can be displayed in multiple columns using a modifier class. Use the format `o-list--X-column@Y`, where `X` is the desired column count (from 2 to 3) and `Y` is the desired [breakpoint](/docs/design-tokens-breakpoint--page) (from `s` to `xl`).
 
 <Canvas>
-  <Story
-    name="Column"
-    args={{
-      columns: 3,
-      columnsBreakpoint: '@m',
-    }}
-  >
-    {(args) => columnsDemo(args)}
+  <Story name="Column" args={{ class: 'o-list--3-column@l' }}>
+    {(args) => template(args)}
   </Story>
 </Canvas>