Oakfieldset component

src/components/atoms/OakFieldset/OakFieldset.stories.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { StoryObj, Meta } from "@storybook/react";
+
+import { OakFieldset } from "./OakFieldset";
+
+import { colorArgTypes } from "@/storybook-helpers/colorStyleHelpers";
+import { sizeArgTypes } from "@/storybook-helpers/sizeStyleHelpers";
+import { spacingArgTypes } from "@/storybook-helpers/spacingStyleHelpers";
+import { typographyArgTypes } from "@/storybook-helpers/typographyStyleHelpers";
+import { borderArgTypes } from "@/storybook-helpers/borderStyleHelpers";
+import { positionArgTypes } from "@/storybook-helpers/positionStyleHelpers";
+import { OakBox } from "@/components/atoms/OakBox";
+import { OakLabel } from "@/components/atoms/OakLabel";
+import { OakHeading } from "@/components/atoms/OakHeading";
+
+const meta: Meta<typeof OakFieldset> = {
+  title: "Components/atoms/OakFieldset",
+  component: OakFieldset,
+  tags: ["autodocs"],
+  argTypes: {
+    ...colorArgTypes,
+    ...sizeArgTypes,
+    ...spacingArgTypes,
+    ...typographyArgTypes,
+    ...borderArgTypes,
+    ...positionArgTypes,
+  },
+  parameters: {
+    controls: {
+      include: [
+        ...Object.keys(typographyArgTypes),
+        "$overflow",
+        "$ba",
+        "$ph",
+        "$pv",
+        ...Object.keys(colorArgTypes),
+      ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OakFieldset>;
+
+export const Default: Story = {
+  render: (args) => (
+    <OakFieldset {...args}>
+      <OakHeading as={"legend"} $font={"body-2-bold"} tag="h3">
+        Legend
+      </OakHeading>
+      <OakBox>
+        <OakLabel htmlFor="input1">Input 1</OakLabel>
+        <input type="text" id="input1" />
+      </OakBox>
+      <OakBox>
+        <OakLabel htmlFor="input2">Input 2</OakLabel>
+        <input type="text" id="input2" />
+      </OakBox>
+    </OakFieldset>
+  ),
+  args: {
+    $pa: "inner-padding-s",
+  },
+};

src/components/atoms/OakFieldset/OakFieldset.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+
+import { OakFieldset } from "./OakFieldset";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+
+describe("OakFieldset", () => {
+  it("renders", () => {
+    const { getByTestId } = renderWithTheme(<OakFieldset data-testid="test" />);
+    expect(getByTestId("test")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(<OakFieldset />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/atoms/OakFieldset/OakFieldset.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+import { colorStyle, ColorStyleProps } from "@/styles/utils/colorStyle";
+import { opacityStyle, OpacityStyleProps } from "@/styles/utils/opacityStyle";
+import {
+  marginStyle,
+  MarginStyleProps,
+  paddingStyle,
+  PaddingStyleProps,
+} from "@/styles/utils/spacingStyle";
+import {
+  typographyStyle,
+  TypographyStyleProps,
+} from "@/styles/utils/typographyStyle";
+import { borderStyle, BorderStyleProps } from "@/styles/utils/borderStyle";
+import { sizeStyle, SizeStyleProps } from "@/styles/utils/sizeStyle";
+
+export type OakFieldsetProps = ColorStyleProps &
+  SizeStyleProps &
+  OpacityStyleProps &
+  MarginStyleProps &
+  PaddingStyleProps &
+  BorderStyleProps &
+  TypographyStyleProps;
+
+/**
+ * OakFieldset renders a custom `fieldset` component, removes default styling of fieldset.
+  color, opacity, margin, padding, border and typography styles can be passed in also.
+ */
+export const OakFieldset = styled.fieldset<OakFieldsetProps>`
+  border: 0px;
+  margin: 0;
+  padding: 0;
+  ${colorStyle}
+  ${sizeStyle}
+  ${opacityStyle}
+  ${marginStyle}
+  ${paddingStyle}
+  ${borderStyle}
+  ${typographyStyle}
+`;

src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakFieldset matches snapshot 1`] = `
+.c0 {
+  border: 0px;
+  margin: 0;
+  padding: 0;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+<fieldset
+  className="c0"
+/>
+`;

src/components/atoms/OakFieldset/index.ts

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