Add column modifier to list object (#1399)

* Add column modifier to lists

* Update example and controls

* Update changelog

* Fix linting

* Add column-gap mixin

* Use class in example

.changeset/fresh-houses-smell.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add layout modifier to the List object

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;
 

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.column-gap(
+        breakpoint.$s,
+        breakpoint.$xl,
+        size.$spacing-gap-fluid-min,
+        size.$spacing-gap-fluid-max
+      );
+    }
+  }
+}

src/objects/list/list.stories.mdx

@@ -12,6 +12,7 @@ const tagNames = ['ul', 'ol'];
 
 <Meta
   title="Objects/List"
+  parameters={{ docs: { inlineStories: false } }}
   argTypes={{
     class: { type: { name: 'string' } },
     items: { type: { name: 'array' }, defaultValue: defaultItems },
@@ -32,7 +33,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">{(args) => template(args)}</Story>
+  <Story name="Default" height="200px">
+    {(args) => template(args)}
+  </Story>
 </Canvas>
 
 ## Inline List
@@ -44,3 +47,13 @@ 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={{ class: 'o-list--3-column@l' }}>
+    {(args) => template(args)}
+  </Story>
+</Canvas>