From b786d9d739211a77084c14ebd565f968e0ddcb9d Mon Sep 17 00:00:00 2001 From: Kyle Huggins Date: Tue, 8 Oct 2024 13:51:35 +0100 Subject: [PATCH 1/6] feat: oakfieldset component --- .../atoms/OakFieldset/OakFieldset.stories.tsx | 67 +++++++++++++++++++ .../atoms/OakFieldset/OakFieldset.test.tsx | 19 ++++++ .../atoms/OakFieldset/OakFieldset.tsx | 38 +++++++++++ .../__snapshots__/OakFieldset.test.tsx.snap | 37 ++++++++++ src/components/atoms/OakFieldset/index.ts | 1 + 5 files changed, 162 insertions(+) create mode 100644 src/components/atoms/OakFieldset/OakFieldset.stories.tsx create mode 100644 src/components/atoms/OakFieldset/OakFieldset.test.tsx create mode 100644 src/components/atoms/OakFieldset/OakFieldset.tsx create mode 100644 src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap create mode 100644 src/components/atoms/OakFieldset/index.ts diff --git a/src/components/atoms/OakFieldset/OakFieldset.stories.tsx b/src/components/atoms/OakFieldset/OakFieldset.stories.tsx new file mode 100644 index 00000000..5bf9bfd0 --- /dev/null +++ b/src/components/atoms/OakFieldset/OakFieldset.stories.tsx @@ -0,0 +1,67 @@ +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 = { + // "title" is the title of the story and where to look for component in the storybook + 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; + +export const Default: Story = { + render: (args) => ( + + + Legend + + + Input 1 + + + + Input 2 + + + + ), + args: { + // $ba: "border-solid-s", + $pa: "inner-padding-s", + }, +}; diff --git a/src/components/atoms/OakFieldset/OakFieldset.test.tsx b/src/components/atoms/OakFieldset/OakFieldset.test.tsx new file mode 100644 index 00000000..1adca529 --- /dev/null +++ b/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(); + expect(getByTestId("test")).toBeInTheDocument(); + }); + + it("matches snapshot", () => { + const tree = create().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/atoms/OakFieldset/OakFieldset.tsx b/src/components/atoms/OakFieldset/OakFieldset.tsx new file mode 100644 index 00000000..2a151b15 --- /dev/null +++ b/src/components/atoms/OakFieldset/OakFieldset.tsx @@ -0,0 +1,38 @@ +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"; + +export type OakFieldsetProps = ColorStyleProps & + OpacityStyleProps & + MarginStyleProps & + PaddingStyleProps & + BorderStyleProps & + TypographyStyleProps; + +/** + * OakFieldset renders a custom `fieldset` (inline text) component, exposing all the typography props. + * ## Usage + */ +export const OakFieldset = styled.fieldset` + border: 0px; + margin: 0; + padding: 0; + ${colorStyle} + ${opacityStyle} + ${marginStyle} + ${paddingStyle} + ${borderStyle} + ${typographyStyle} +`; diff --git a/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap b/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap new file mode 100644 index 00000000..215c9e1a --- /dev/null +++ b/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CopyPasteThisComponent matches snapshot 1`] = ` +.c0 { + font-family: --var(google-font),Lexend,sans-serif; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c2 { + width: 1.5rem; +} + +
+ Click Me +
+`; + +exports[`OakFieldset matches snapshot 1`] = ` +.c0 { + border: 0px; + margin: 0; + padding: 0; + font-family: --var(google-font),Lexend,sans-serif; +} + +
+`; diff --git a/src/components/atoms/OakFieldset/index.ts b/src/components/atoms/OakFieldset/index.ts new file mode 100644 index 00000000..9402719b --- /dev/null +++ b/src/components/atoms/OakFieldset/index.ts @@ -0,0 +1 @@ +export * from "./OakFieldset"; From da9d5fbc8eebd94b47c46bb65320b176827f0c49 Mon Sep 17 00:00:00 2001 From: Kyle Huggins Date: Tue, 8 Oct 2024 13:55:44 +0100 Subject: [PATCH 2/6] fix: generate snapshot --- .../__snapshots__/OakFieldset.test.tsx.snap | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap b/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap index 215c9e1a..1d57c20a 100644 --- a/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap +++ b/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap @@ -1,28 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CopyPasteThisComponent matches snapshot 1`] = ` -.c0 { - font-family: --var(google-font),Lexend,sans-serif; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c2 { - width: 1.5rem; -} - -
- Click Me -
-`; - exports[`OakFieldset matches snapshot 1`] = ` .c0 { border: 0px; From 555b3c281a95c3d0d29ecb4e3c6982b0b94b2ce7 Mon Sep 17 00:00:00 2001 From: Kyle Huggins Date: Tue, 8 Oct 2024 14:01:11 +0100 Subject: [PATCH 3/6] fix: remove comment --- src/components/atoms/OakFieldset/OakFieldset.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/atoms/OakFieldset/OakFieldset.stories.tsx b/src/components/atoms/OakFieldset/OakFieldset.stories.tsx index 5bf9bfd0..f106a4d5 100644 --- a/src/components/atoms/OakFieldset/OakFieldset.stories.tsx +++ b/src/components/atoms/OakFieldset/OakFieldset.stories.tsx @@ -14,7 +14,6 @@ import { OakLabel } from "@/components/atoms/OakLabel"; import { OakHeading } from "@/components/atoms/OakHeading"; const meta: Meta = { - // "title" is the title of the story and where to look for component in the storybook title: "Components/atoms/OakFieldset", component: OakFieldset, tags: ["autodocs"], @@ -61,7 +60,6 @@ export const Default: Story = { ), args: { - // $ba: "border-solid-s", $pa: "inner-padding-s", }, }; From fc54f8b6973338a0a80188fefd27917cd44a6d5e Mon Sep 17 00:00:00 2001 From: Kyle Huggins Date: Tue, 8 Oct 2024 14:19:03 +0100 Subject: [PATCH 4/6] feat: update component description --- src/components/atoms/OakFieldset/OakFieldset.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/OakFieldset/OakFieldset.tsx b/src/components/atoms/OakFieldset/OakFieldset.tsx index 2a151b15..3e4168a4 100644 --- a/src/components/atoms/OakFieldset/OakFieldset.tsx +++ b/src/components/atoms/OakFieldset/OakFieldset.tsx @@ -13,8 +13,10 @@ import { 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 & @@ -22,14 +24,15 @@ export type OakFieldsetProps = ColorStyleProps & TypographyStyleProps; /** - * OakFieldset renders a custom `fieldset` (inline text) component, exposing all the typography props. - * ## Usage + * 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` border: 0px; margin: 0; padding: 0; ${colorStyle} + ${sizeStyle} ${opacityStyle} ${marginStyle} ${paddingStyle} From 21123176cdb2e3d32f2a8f4c39b1ad5c91bf4238 Mon Sep 17 00:00:00 2001 From: Kyle Huggins Date: Tue, 8 Oct 2024 15:56:27 +0100 Subject: [PATCH 5/6] fix: refactor fieldset component --- .../atoms/OakFieldset/OakFieldset.tsx | 35 +++---------------- 1 file changed, 4 insertions(+), 31 deletions(-) diff --git a/src/components/atoms/OakFieldset/OakFieldset.tsx b/src/components/atoms/OakFieldset/OakFieldset.tsx index 3e4168a4..6217078f 100644 --- a/src/components/atoms/OakFieldset/OakFieldset.tsx +++ b/src/components/atoms/OakFieldset/OakFieldset.tsx @@ -1,41 +1,14 @@ 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; - +import { OakBoxProps, oakBoxCss } from "@/components/atoms/OakBox"; +export type OakFieldsetProps = OakBoxProps; /** * 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` - border: 0px; + border: 0; margin: 0; padding: 0; - ${colorStyle} - ${sizeStyle} - ${opacityStyle} - ${marginStyle} - ${paddingStyle} - ${borderStyle} - ${typographyStyle} + ${oakBoxCss}; `; From 33eec0070708b09930e3c87a13cfd991f14d2fef Mon Sep 17 00:00:00 2001 From: Kyle Huggins Date: Tue, 8 Oct 2024 16:19:31 +0100 Subject: [PATCH 6/6] fix: snapshot test --- .../atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap b/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap index 1d57c20a..75e364f8 100644 --- a/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap +++ b/src/components/atoms/OakFieldset/__snapshots__/OakFieldset.test.tsx.snap @@ -2,7 +2,7 @@ exports[`OakFieldset matches snapshot 1`] = ` .c0 { - border: 0px; + border: 0; margin: 0; padding: 0; font-family: --var(google-font),Lexend,sans-serif;