Component/input group

.changeset/chatty-papayas-juggle.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Input Group component

src/components/input-group/demo/input-group-demo.twig

@@ -0,0 +1,17 @@
+{% embed '@cloudfour/objects/rhythm/rhythm.twig' %}
+  {% block content %}
+    {% embed '@cloudfour/components/input-group/input-group.twig' %}
+      {% block content %}
+        {% include '@cloudfour/components/button/button.twig' %}
+        {% include '@cloudfour/components/input/input.twig' %}
+      {% endblock %}
+    {% endembed %}
+
+    {% embed '@cloudfour/components/input-group/input-group.twig' %}
+      {% block content %}
+        {% include '@cloudfour/components/input/input.twig' %}
+        {% include '@cloudfour/components/button/button.twig' %}
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}

src/components/input-group/input-group.scss

@@ -0,0 +1,19 @@
+@use "../../compiled/tokens/scss/size";
+
+.c-input-group {
+  display: flex;
+
+  & > :not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > :not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  & > * + * {
+    margin-left: -(size.$edge-medium);
+  }
+}

src/components/input-group/input-group.stories.mdx

@@ -0,0 +1,35 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import inputGroupDemoSource from '!!raw-loader!./demo/input-group-demo.twig';
+import inputGroupDemo from './demo/input-group-demo.twig';
+import './input-group.scss';
+
+<Meta title="Components/Input Group" />
+
+## Input Group
+
+The Input Group combines the [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements) components. This would work well in creating design elements like search bars.
+
+Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly.
+
+<Canvas>
+  <Story
+    name="Example"
+    parameters={{
+      docs: {
+        source: {
+          code: inputGroupDemoSource,
+        },
+      },
+    }}
+  >
+    {inputGroupDemo}
+  </Story>
+</Canvas>

src/components/input-group/input-group.twig

@@ -0,0 +1,3 @@
+<div class="c-input-group">
+  {% block content %} {% endblock %}
+</div>

src/mixins/_button.scss

@@ -68,6 +68,7 @@
     transform transition.$quick ease.$out;
   user-select: none;
   vertical-align: middle;
+  white-space: nowrap;
 
   /**
    * Transform, opacity and filter changes are performant and will work across