Add float utilities (#2177)

Author: tylersticka

.changeset/metal-crabs-pretend.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add float utilities

src/utilities/float/demo/float.twig

@@ -0,0 +1,14 @@
+{% set float_class -%}
+  u-float-{{float|default('none')}}
+  {%- if breakpoint -%}
+    @{{breakpoint}}
+  {%- endif -%}
+{%- endset %}
+
+<div class="{{float_class}} u-rounded t-dark u-pad-1">
+  {{float_class}}
+</div>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>

src/utilities/float/float.scss

@@ -0,0 +1,31 @@
+@use '../../mixins/media-query';
+
+// Set the float styles in a mixin. The suffix will let us easily append
+// breakpoint suffixes.
+@mixin _float-utilities($suffix: '') {
+  .u-float-inline-start#{$suffix} {
+    float: left;
+    float: inline-start;
+  }
+
+  .u-float-inline-end#{$suffix} {
+    float: right;
+    float: inline-end;
+  }
+
+  .u-float-none#{$suffix} {
+    float: none;
+  }
+}
+
+// Include the default versions (no media queries)
+@include _float-utilities;
+
+// Include responsive versions. This would be simpler if we could use the
+// `breakpoint-classes` mixin instead, but in this case we want all of the
+// responsive versions to be grouped by breakpoint so larger breakpoints will
+// naturally override smaller ones.
+@include media-query.breakpoint-loop using ($key) {
+  $suffix: \@#{$key};
+  @include _float-utilities($suffix);
+}

src/utilities/float/float.stories.mdx

@@ -0,0 +1,53 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import floatDemo from './demo/float.twig';
+
+<Meta
+  title="Utilities/Float"
+  argTypes={{
+    float: {
+      options: ['inline-start', 'inline-end', 'none'],
+      control: {
+        type: 'select',
+      },
+    },
+    breakpoint: {
+      options: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+  }}
+/>
+
+# Float
+
+Utilities for controlling the float of an element. Useful for responsively arranging imagery or other content adjacent to medium-to-long sections of text.
+
+## Flow-Relative Properties
+
+These utilities use flow-relative values instead of specific directions [in supported browsers](https://caniuse.com/mdn-css_properties_float_flow_relative_values) to simplify potential localization projects.
+
+The following table maps the traditional directional property for `direction: ltr` and `writing-mode: horizontal-tb` to its equivalent flow-relative property:
+
+| Directional Property | Flow-relative Property |
+| -------------------- | ---------------------- |
+| `left`               | `inline-start`         |
+| `right`              | `inline-end`           |
+
+## Float Direction
+
+The following float utilities are available:
+
+- `u-float-inline-start`
+- `u-float-inline-end`
+- `u-float-none`
+
+Appending `@{breakpoint}` to the end of these class names (example: `u-float-inline-end@m`) will apply the float utility at the specified breakpoint and above.
+
+<Canvas>
+  <Story name="Direction" args={{ float: 'inline-end' }}>
+    {(args) => floatDemo(args)}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Direction" />