Radio component (#2200)

* Radio component

* Support radios in Jetpack contact forms

Author: tylersticka

.changeset/moody-bottles-agree.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Style radio inputs in Jetpack contact forms.

.changeset/poor-icons-tan.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Radio component to style `input type="radio"` elements.

src/components/checkbox/checkbox.stories.mdx

@@ -11,12 +11,11 @@ import './demo/styles.scss';
 
 # Checkbox
 
-`c-checkbox` may be applied to any `<input type="checkbox">` element. They are larger than native checkboxes and more visually consistent with our [input](/docs/components-input--text-elements) and [button](/docs/components-button--elements) components.
+`c-checkbox` may be applied to any `<input type="checkbox">` element. They are larger than native checkboxes and more visually consistent with our [radio](/docs/components-radio--Enabled), [input](/docs/components-input--text-elements) and [button](/docs/components-button--elements) components.
 
 <Canvas>
   <Story
     name="Enabled"
-    height="120px"
     args={{ disabled: false }}
     parameters={{
       docs: {
@@ -42,7 +41,6 @@ Checkboxes appear more subtle and less actionable when the `disabled` attribute
 <Canvas>
   <Story
     name="Disabled"
-    height="120px"
     args={{ disabled: true }}
     parameters={{
       docs: {

src/components/checkbox/checkbox.twig

@@ -1,3 +1,11 @@
+{#
+This all might be a little overengineered? We're basically recreating all of
+the HTML attributes manually. See the radio component for another example.
+
+Leaving in for now since I'm not really interested in another breaking change
+so soon after our last one.
+#}
+
 {% set attributes %}
   type="checkbox"
   class="c-checkbox{% if class %} {{ class }}{% endif %}"

src/components/radio/demo/styles.scss

@@ -0,0 +1,13 @@
+@use '../../../mixins/ms';
+
+.demo-radio-labels {
+  display: grid;
+  grid-gap: ms.step(1);
+}
+
+.demo-radio-label {
+  display: grid;
+  grid-gap: ms.step(-2);
+  grid-template-columns: auto 1fr;
+  user-select: none;
+}

src/components/radio/demo/with-label.twig

@@ -0,0 +1,11 @@
+<div class="demo-radio-labels">
+  {% for i in 1..3 %}
+    <label class="demo-radio-label">
+      {% include '@cloudfour/components/radio/radio.twig' with {
+        checked: loop.first,
+        name: disabled ? 'demo-radio-disabled' : 'demo-radio-enabled',
+      } %}
+      Option {{i}}
+    </label>
+  {% endfor %}
+</div>

src/components/radio/radio.scss

@@ -0,0 +1,5 @@
+@use '../../mixins/toggle-input';
+
+.c-radio {
+  @include toggle-input.radio;
+}

src/components/radio/radio.stories.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import withLabelDemo from './demo/with-label.twig';
+import './demo/styles.scss';
+
+<Meta
+  title="Components/Radio"
+  argTypes={{
+    disabled: { type: { name: 'boolean' } },
+  }}
+/>
+
+# Radio
+
+`c-radio` may be applied to any `<input type="radio">` element. They are larger than native radio elements and more visually consistent with our [checkbox](/docs/components-checkbox--Enabled), [input](/docs/components-input--text-elements) and [button](/docs/components-button--elements) components.
+
+<Canvas>
+  <Story
+    name="Enabled"
+    parameters={{
+      docs: {
+        source: {
+          code: `{% include '@cloudfour/components/radio/radio.twig' with {
+  name: 'demo-radio-enabled',
+  value: 'example',
+  checked: true,
+} only %}`,
+        },
+      },
+    }}
+  >
+    {(args) => withLabelDemo(args)}
+  </Story>
+</Canvas>
+
+Radios appear more subtle and less actionable when the `disabled` attribute is set.
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{ disabled: true }}
+    parameters={{
+      docs: {
+        source: {
+          code: `{% include '@cloudfour/components/radio/radio.twig' with {
+  name: 'demo-radio-disabled',
+  value: 'example',
+  checked: true,
+  disabled: true,
+} only %}`,
+        },
+      },
+    }}
+  >
+    {(args) => withLabelDemo(args)}
+  </Story>
+</Canvas>

src/components/radio/radio.twig

@@ -0,0 +1,28 @@
+{#
+This all might be a little overengineered? Leaving in for now for consistency
+with the checkbox component.
+#}
+
+{% set attributes %}
+  type="radio"
+  class="c-radio{% if class %} {{ class }}{% endif %}"
+  {% for attribute_name in [
+    'value',
+    'id',
+    'name',
+    'autocomplete'
+  ] %}
+    {% set attribute_value = attribute(_context, attribute_name) %}
+    {% if attribute_value %}{{ attribute_name }}="{{ attribute_value }}"{% endif %}
+  {% endfor %}
+  {% for attribute_name in [
+    'checked',
+    'required',
+    'disabled'
+  ] %}
+    {% set attribute_value = attribute(_context, attribute_name) %}
+    {% if attribute_value %}{{ attribute_name }}{% endif %}
+  {% endfor %}
+{% endset %}
+
+<input {{ attributes }}>