Add clearfix utility (#1949)

Author: calebeby

.changeset/cool-dolls-raise.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add clearfix utility

package-lock.json

@@ -0,0 +1,3 @@
+<div class="u-clearfix" style="border: 3px solid black; padding: 15px">
+  <div style="width: 500px; height: 500px; background: green; float: right">I'm floating!</div>
+</div>

src/utilities/display/demo/clearfix.twig

@@ -7,3 +7,13 @@
 .u-hidden-visually {
   @include a11y.sr-only($important: true);
 }
+
+/**
+ * Clearfix: forces a container to expand to fit floated children
+ * https://www.cssmojo.com/latest-new-clearfix-so-far/
+ */
+.u-clearfix::after {
+  clear: both;
+  content: '';
+  display: block;
+}

src/utilities/display/display.scss

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import hiddenVisuallyDemo from './demo/hidden-visually.twig';
+import clearfixDemo from './demo/clearfix.twig';
 
 <Meta title="Utilities/Display" />
 
@@ -21,3 +22,11 @@ In this example, the link will include text when read aloud:
 <Canvas>
   <Story name="Hidden Visually">{hiddenVisuallyDemo}</Story>
 </Canvas>
+
+## Clearfix
+
+The `u-clearfix` class forces a container to expand to fit floated children.
+
+<Canvas>
+  <Story name="Clearfix">{clearfixDemo}</Story>
+</Canvas>