Migrate FieldGroup (#4108)

* WIP migration

* feat(FieldGroup): Add FieldGroup component

* update test and clean up stories

* add changeset

* update inline story example, remove redundant test and housekeeping

* remove unused code

* update story inline vs default examples

* update mdx link to use the LinkTo component

.changeset/silly-scissors-punch.md

@@ -0,0 +1,3 @@
+
+---
+---

packages/components/src/FieldGroup/FieldGroup.module.scss

@@ -0,0 +1,10 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.group {
+  margin-bottom: $spacing-6;
+}
+
+.inline {
+  display: inline;
+  margin-bottom: 0;
+}

packages/components/src/FieldGroup/FieldGroup.tsx

@@ -0,0 +1,29 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./FieldGroup.module.scss"
+
+export type FieldGroupProps = {
+  children?: React.ReactNode
+  inline?: boolean
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const FieldGroup = ({
+  children,
+  inline = false,
+  classNameOverride,
+  ...restProps
+}: FieldGroupProps): JSX.Element => (
+  <div
+    className={classnames(
+      styles.group,
+      classNameOverride,
+      inline && styles.inline
+    )}
+    {...restProps}
+  >
+    {children}
+  </div>
+)
+
+FieldGroup.displayName = "FieldGroup"

packages/components/src/FieldGroup/_docs/FieldGroup.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import { LinkTo } from "~storybook/components/LinkTo"
+import * as FieldGroupStories from "./FieldGroup.stories"
+
+<Meta of={FieldGroupStories} />
+
+# FieldGroup
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FieldGroup"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { FieldGroup } from "@kaizen/components"'
+/>
+
+## Overview
+
+A simple wrapper to wrap form field components and their related siblings. This is a primitive used in components like `TextField`, `TextArea`, `Slider`, etc.
+
+<Canvas of={FieldGroupStories.Playground} />
+<Controls of={FieldGroupStories.Playground} />
+
+## API
+
+### Inline
+Changes the FieldGroup to an inline element with no bottom margin. This can be seen in the `Slider`<LinkTo pageId="components-slider--docs">component</LinkTo>. You can see inline vs block scope in the following stories:
+
+#### Inline
+<Canvas of={FieldGroupStories.Inline} />
+
+#### Default (block)
+
+<Canvas of={FieldGroupStories.Default} />
+
+

packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx

@@ -0,0 +1,70 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { Label } from "~components/Label"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { FieldGroup } from "../index"
+
+export default {
+  title: "KAIO-Staging/FieldGroup",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const FieldGroupTemplate = ({
+  id,
+  inline = false,
+}: {
+  id: string
+  inline?: boolean
+}): JSX.Element => (
+  <div>
+    <FieldGroup inline={inline} classNameOverride="mr-6">
+      <Label htmlFor={`id--field-${id}`}>Email</Label>
+      <input
+        className="ms-6"
+        placeholder="Native text input..."
+        type="text"
+        id="id--field-2"
+      />
+    </FieldGroup>
+    <FieldGroup inline={inline}>
+      <Label htmlFor={`id--field-${id}`}>Username</Label>
+      <input
+        className="ms-6"
+        placeholder="Native text input..."
+        type="text"
+        id="id--field-2"
+      />
+    </FieldGroup>
+  </div>
+)
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed}>
+      <StickerSheet.Header headings={["Default", "Inline"]} />
+      <StickerSheet.Body>
+        <StickerSheet.Row>
+          <FieldGroupTemplate id="1" />
+          <FieldGroupTemplate id="2" inline={true} />
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}

packages/components/src/FieldGroup/_docs/FieldGroup.stories.tsx

@@ -0,0 +1,88 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Label } from "~components/Label"
+import { FieldGroup } from "../index"
+
+const meta = {
+  title: "KAIO-Staging/FieldGroup",
+  component: FieldGroup,
+  args: {
+    children: (
+      <>
+        <Label htmlFor="id--field-1">Email</Label>
+        <input
+          className="ms-6"
+          placeholder="Native text input..."
+          type="text"
+          id="id--field-1"
+        />
+      </>
+    ),
+  },
+} satisfies Meta<typeof FieldGroup>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Inline: Story = {
+  args: { inline: true },
+  render: () => (
+    <>
+      <FieldGroup classNameOverride="mr-6" inline>
+        <Label htmlFor="id--field-1">Email</Label>
+        <input
+          className="ms-6"
+          placeholder="Native text input..."
+          type="text"
+          id="id--field-2"
+        />
+      </FieldGroup>
+      <FieldGroup inline>
+        <Label htmlFor="id--field-1">Username</Label>
+        <input
+          className="ms-6"
+          placeholder="Native text input..."
+          type="text"
+          id="id--field-2"
+        />
+      </FieldGroup>
+    </>
+  ),
+}
+
+export const Default: Story = {
+  args: { inline: true },
+  render: () => (
+    <>
+      <FieldGroup>
+        <Label htmlFor="id--field-1">Email</Label>
+        <input
+          className="ms-6"
+          placeholder="Native text input..."
+          type="text"
+          id="id--field-2"
+        />
+      </FieldGroup>
+      <FieldGroup>
+        <Label htmlFor="id--field-1">Username</Label>
+        <input
+          className="ms-6"
+          placeholder="Native text input..."
+          type="text"
+          id="id--field-2"
+        />
+      </FieldGroup>
+    </>
+  ),
+}

packages/components/src/FieldGroup/index.ts

@@ -0,0 +1 @@
+export * from "./FieldGroup"

packages/components/src/index.ts

@@ -15,3 +15,4 @@ export * from "./Icons"
 export * from "./InputSearch"
 export * from "./KaizenProvider"
 export * from "./Workflow"
+export * from "./FieldGroup"