From d252d72476b2c9ddc5f378cdbf9519d5d4df9712 Mon Sep 17 00:00:00 2001
From: Michael Winter <36558508+mcwinter07@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:49:02 +1000
Subject: [PATCH] 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            |  3 +
 .../src/FieldGroup/FieldGroup.module.scss     | 10 +++
 .../components/src/FieldGroup/FieldGroup.tsx  | 29 ++++++
 .../src/FieldGroup/_docs/FieldGroup.mdx       | 41 +++++++++
 .../_docs/FieldGroup.stickersheet.stories.tsx | 70 +++++++++++++++
 .../FieldGroup/_docs/FieldGroup.stories.tsx   | 88 +++++++++++++++++++
 packages/components/src/FieldGroup/index.ts   |  1 +
 packages/components/src/index.ts              |  1 +
 8 files changed, 243 insertions(+)
 create mode 100644 .changeset/silly-scissors-punch.md
 create mode 100644 packages/components/src/FieldGroup/FieldGroup.module.scss
 create mode 100644 packages/components/src/FieldGroup/FieldGroup.tsx
 create mode 100644 packages/components/src/FieldGroup/_docs/FieldGroup.mdx
 create mode 100644 packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx
 create mode 100644 packages/components/src/FieldGroup/_docs/FieldGroup.stories.tsx
 create mode 100644 packages/components/src/FieldGroup/index.ts

diff --git a/.changeset/silly-scissors-punch.md b/.changeset/silly-scissors-punch.md
new file mode 100644
index 00000000000..70543439eb6
--- /dev/null
+++ b/.changeset/silly-scissors-punch.md
@@ -0,0 +1,3 @@
+
+---
+---
\ No newline at end of file
diff --git a/packages/components/src/FieldGroup/FieldGroup.module.scss b/packages/components/src/FieldGroup/FieldGroup.module.scss
new file mode 100644
index 00000000000..85e9dff92f7
--- /dev/null
+++ b/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;
+}
diff --git a/packages/components/src/FieldGroup/FieldGroup.tsx b/packages/components/src/FieldGroup/FieldGroup.tsx
new file mode 100644
index 00000000000..43e35a7b6fa
--- /dev/null
+++ b/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"
diff --git a/packages/components/src/FieldGroup/_docs/FieldGroup.mdx b/packages/components/src/FieldGroup/_docs/FieldGroup.mdx
new file mode 100644
index 00000000000..855315aaba6
--- /dev/null
+++ b/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} />
+
+
diff --git a/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx b/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx
new file mode 100644
index 00000000000..ec73598f6b4
--- /dev/null
+++ b/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" },
+}
diff --git a/packages/components/src/FieldGroup/_docs/FieldGroup.stories.tsx b/packages/components/src/FieldGroup/_docs/FieldGroup.stories.tsx
new file mode 100644
index 00000000000..e218a005bc3
--- /dev/null
+++ b/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>
+    </>
+  ),
+}
diff --git a/packages/components/src/FieldGroup/index.ts b/packages/components/src/FieldGroup/index.ts
new file mode 100644
index 00000000000..90440002500
--- /dev/null
+++ b/packages/components/src/FieldGroup/index.ts
@@ -0,0 +1 @@
+export * from "./FieldGroup"
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index c842fe26243..938ed6c380c 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -15,3 +15,4 @@ export * from "./Icons"
 export * from "./InputSearch"
 export * from "./KaizenProvider"
 export * from "./Workflow"
+export * from "./FieldGroup"