feat: new FieldValue component (#14)

src/forms/FieldValue.scss

@@ -0,0 +1,38 @@
+.field-value {
+  /* Theme Variables */
+  --field-value-label-spacer: var(--bloom-spacer-label);
+  --field-value-content-spacer: var(--bloom-s1);
+  --field-value-font: var(--bloom-font-alt-sans);
+  --field-value-label-font-size: var(--bloom-type-label);
+  --field-value-help-text-font-size: var(--bloom-type-label);
+  --field-value-label-color: var(--bloom-input-text-label-color);
+  --field-value-value-color: var(--bloom-input-text-highlight-color);
+  --field-value-help-text-color: var(--bloom-text-color-light);
+
+  font-family: var(--field-value-font);
+
+  /* Reset child margins */
+  > * {
+    margin: 0;
+  }
+
+  /* Owl selector for flow margins */
+  > * + * {
+    margin-block-start: var(--field-value-content-spacer);
+  }
+
+  > [data-part="label"] {
+    color: var(--field-value-label-color);
+    font-size: var(--field-value-label-font-size);
+    margin-block-end: var(--field-value-label-spacer);
+  }
+
+  > [data-part="value"] {
+    color: var(--field-value-value-color);
+  }
+
+  > [data-part="help-text"] {
+    color: var(--field-value-help-text-color);
+    font-size: var(--field-value-help-text-font-size);
+  }
+}

src/forms/FieldValue.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+
+import "./FieldValue.scss"
+
+export interface FieldValueProps {
+  /** Label content */
+  label?: string
+  /** Value content */
+  children: React.ReactNode
+  /** Additional help text below the content */
+  helpText?: string
+  /** Element ID */
+  id?: string
+  /** Additional CSS classes */
+  className?: string
+}
+
+const FieldValue = (props: FieldValueProps) => {
+  const classNames = ["field-value"]
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <div id={props.id} className={classNames.join(" ")} role="gridcell">
+      {props.label && <p data-part="label">{props.label}</p>}
+      <p data-part="value">{props.children}</p>
+      {props.helpText && <p data-part="help-text">{props.helpText}</p>}
+    </div>
+  )
+}
+
+export default FieldValue

src/forms/__stories_/FieldValue.docs.mdx

@@ -0,0 +1,22 @@
+import { ArgsTable } from "@storybook/addon-docs"
+import FieldValue from "../FieldValue"
+import { Swatch } from "../../../documentation/components/Swatch.tsx"
+
+# <FieldValue />
+
+## Properties
+
+<ArgsTable of={FieldValue} />
+
+## Theme Variables
+
+| Name                                | Description                                                      | Default                              |
+| ----------------------------------- | ---------------------------------------------------------------- | ------------------------------------ |
+| `--field-value-label-spacer`        | Space between the label and the value                            | `--bloom-spacer-label`               |
+| `--field-value-content-spacer`      | Space between the value and help text | `--bloom-s1`                         |
+| `--field-value-font`                | Font used in the component                                       | `--bloom-font-alt-sans`              |
+| `--field-value-label-font-size`     | Font size of the label                                           | `--bloom-type-label`                 |
+| `--field-value-help-text-font-size` | Font size of the help text                                       | `--bloom-type-label`                 |
+| `--field-value-label-color`         | <Swatch color="bloom-input-text-label-color" /> Color of the label                                                | `--bloom-input-text-label-color`      |
+| `--field-value-value-color`         | <Swatch color="bloom-input-text-highlight-color" /> Color of the value                                                | `--bloom-input-text-highlight-color` |
+| `--field-value-help-text-color`     | <Swatch color="bloom-text-color-light" /> Color of the help text                                            | `--bloom-text-color-light`           |

src/forms/__stories_/FieldValue.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { Story } from "@storybook/react"
+import FieldValue from "../FieldValue"
+
+import MDXDocs from "./FieldValue.docs.mdx"
+
+export default {
+  title: "Forms/FieldValue",
+  component: FieldValue,
+  parameters: {
+    docs: {
+      page: MDXDocs,
+    },
+  },
+}
+
+export const standalone = () => <FieldValue>Pool, BBQ, Rooftop View</FieldValue>
+
+export const withLabel = () => (
+  <FieldValue label="Property Amenities">Pool, BBQ, Rooftop View</FieldValue>
+)
+
+export const withHelperText = () => (
+  <FieldValue label="Property Amenities" helpText="All good stuff">
+    Pool, BBQ, Rooftop View
+  </FieldValue>
+)
+
+export const inAGrid = () => (
+  <div role="grid" style={{maxWidth: "var(--bloom-width-4xl)"}}>
+    <div role="row" style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr"}}>
+      <FieldValue label="Property Amenities" helpText="All good stuff">
+        Pool, BBQ, Rooftop View
+      </FieldValue>
+      <FieldValue label="Property Amenities" helpText="All good stuff">
+        Pool, BBQ, Rooftop View
+      </FieldValue>
+      <FieldValue label="Property Amenities" helpText="All good stuff">
+        Pool, BBQ, Rooftop View
+      </FieldValue>
+    </div>
+  </div>
+)

src/forms/__tests__/FieldValue.test.tsx

@@ -0,0 +1,22 @@
+import { render, cleanup } from "@testing-library/react"
+import FieldValue from "../FieldValue"
+
+afterEach(cleanup)
+
+describe("<FieldValue>", () => {
+  it("displays the field value", () => {
+    const content = "Value content"
+    const label = "Label text"
+    const helpText = "Help text"
+    const { getByText, container } = render(
+      <FieldValue id="fv" className="test-class" label={label} helpText={helpText}>
+        {content}
+      </FieldValue>
+    )
+    expect(getByText(content)).toBeInTheDocument()
+    expect(getByText(label)).toBeInTheDocument()
+    expect(getByText(helpText)).toBeInTheDocument()
+    expect(container.querySelector("#fv")).not.toBeNull()
+    expect(container.querySelector("#fv.test-class")).not.toBeNull()
+  })
+})