Merge pull request #619 from omnifed/618-feat-make-fieldset-legend-co…

…mponents

618 feat make fieldset legend components

.vscode/settings.json

@@ -7,6 +7,7 @@
     "cerb",
     "Checkmark",
     "csstools",
+    "Fieldset",
     "frontmatter",
     "hljs",
     "Killa",

docs/app/data/categories.react.json

@@ -44,8 +44,15 @@
   "inputs": {
     "name": "Inputs",
     "description": "Components that allow users to input data.",
-    "items": ["Input", "Textarea", "Label", "Field Message", "File Uploader"],
-    "next": [],
+    "items": [
+      "Input",
+      "Textarea",
+      "Label",
+      "Fieldset",
+      "Field Message",
+      "File Uploader"
+    ],
+    "next": ["Fieldset"],
     "new": []
   }
 }

docs/app/preset/customizing/doc.mdx

@@ -185,7 +185,7 @@ In your entry file, call `defineIcons` with an object that maps icon names to ic
 
 The following code replaces all instances of the `invalid` icon with a custom Lucide icon.
 
-```tsx title="app/layout.tsx" {1, 21-23}
+```tsx title="app/layout.tsx" {1, 22-24}
 import { defineIcons } from '@cerberus/react'
 import { cx } from '@cerberus/styled-system/css'
 import { Poppins, Recursive } from 'next/font/google'

docs/app/react/fieldset/a11y.mdx

@@ -0,0 +1,31 @@
+---
+---
+
+import {
+  WhenToUseAdmonition
+} from '@/app/components/Admonition'
+import OverviewList from '@/app/components/OverviewList'
+
+## Use Cases
+
+<OverviewList intro="Users should be able to:" rules={[
+  'Navigate to and activate a input field with assistive technology',
+  'Receive and understand supporting text and error messages',
+  'Navigate to and select interactive icons',
+]} />
+
+## Interaction &amp; Style
+
+The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.
+
+## Keyboard Navigation
+
+| Keys     | Actions                                                         |
+| -------- | --------------------------------------------------------------- |
+| Tab      | Focus lands on (non-disabled) input       |
+
+## Labeling Elements
+
+If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
+
+The accessibility label for a textfield is typically the same as the label for the textfield.

docs/app/react/fieldset/components/label-preview.tsx

@@ -0,0 +1,135 @@
+import {
+  Field,
+  Fieldset,
+  FieldsetLabel,
+  Legend,
+  Radio,
+} from '@cerberus-design/react'
+import { css } from '@cerberus-design/styled-system/css'
+import { hstack } from '@cerberus-design/styled-system/patterns'
+import { vstack } from '@cerberus/styled-system/patterns'
+
+export function OverviewRadioGroup() {
+  return (
+    <Field>
+      <Fieldset
+        className={hstack({
+          gap: '4',
+          rounded: 'xl',
+        })}
+        name="pet"
+        role="radiogroup"
+      >
+        <Legend>What pets do you have?</Legend>
+        <Radio id="dog" name="pet" value="dog" defaultChecked>
+          <FieldsetLabel htmlFor="dog">🐶 Dog</FieldsetLabel>
+        </Radio>
+
+        <Radio id="cat" name="pet" value="cat">
+          <FieldsetLabel htmlFor="cat">😸 Cat</FieldsetLabel>
+        </Radio>
+
+        <Radio id="both" name="pet" value="both">
+          <FieldsetLabel htmlFor="both">🐶😸 Both</FieldsetLabel>
+        </Radio>
+      </Fieldset>
+    </Field>
+  )
+}
+
+export function DisabledRadioGroup() {
+  return (
+    <Field disabled>
+      <Fieldset
+        className={hstack({
+          gap: '4',
+          rounded: 'xl',
+        })}
+        name="pet"
+        role="radiogroup"
+      >
+        <Legend>What pets do you have?</Legend>
+        <Radio id="dog" name="pet" value="dog" defaultChecked>
+          <FieldsetLabel htmlFor="dog">🐶 Dog</FieldsetLabel>
+        </Radio>
+
+        <Radio id="cat" name="pet" value="cat">
+          <FieldsetLabel htmlFor="cat">😸 Cat</FieldsetLabel>
+        </Radio>
+
+        <Radio id="both" name="pet" value="both">
+          <FieldsetLabel htmlFor="both">🐶😸 Both</FieldsetLabel>
+        </Radio>
+      </Fieldset>
+    </Field>
+  )
+}
+
+export function RequiredRadioGroup() {
+  return (
+    <Field required>
+      <Fieldset
+        className={hstack({
+          gap: '4',
+          rounded: 'xl',
+        })}
+        name="pet"
+        role="radiogroup"
+      >
+        <Legend>What pets do you have?</Legend>
+        <Radio id="dog" name="pet" value="dog" defaultChecked>
+          <FieldsetLabel htmlFor="dog">🐶 Dog</FieldsetLabel>
+        </Radio>
+
+        <Radio id="cat" name="pet" value="cat">
+          <FieldsetLabel htmlFor="cat">😸 Cat</FieldsetLabel>
+        </Radio>
+
+        <Radio id="both" name="pet" value="both">
+          <FieldsetLabel htmlFor="both">🐶😸 Both</FieldsetLabel>
+        </Radio>
+      </Fieldset>
+    </Field>
+  )
+}
+
+export function CustomFieldset() {
+  return (
+    <Field>
+      <Fieldset
+        className={vstack({
+          alignItems: 'flex-start',
+          gap: '4',
+          rounded: 'xl',
+        })}
+        name="pet"
+        role="radiogroup"
+        style={{
+          border: '2px solid',
+          borderColor: 'yellow',
+          padding: '16px',
+        }}
+      >
+        <Legend
+          className={css({
+            color: 'yellow',
+            textStyle: 'h3',
+          })}
+        >
+          What is Wu-Tang?
+        </Legend>
+        <Radio id="dog" name="pet" value="dog" defaultChecked>
+          <FieldsetLabel htmlFor="dog">Forever</FieldsetLabel>
+        </Radio>
+
+        <Radio id="cat" name="pet" value="cat">
+          <FieldsetLabel htmlFor="cat">Forever</FieldsetLabel>
+        </Radio>
+
+        <Radio id="both" name="pet" value="both">
+          <FieldsetLabel htmlFor="both">Forever</FieldsetLabel>
+        </Radio>
+      </Fieldset>
+    </Field>
+  )
+}