refactor(components): rewrite form components

5 files changed, 72 insertions, 0 deletions

diff --git a/src/components/atoms/forms/legend/index.ts b/src/components/atoms/forms/legend/index.ts
new file mode 100644
index 0000000..a0482ef
--- /dev/null
+++ b/src/components/atoms/forms/legend/index.ts
@@ -0,0 +1 @@
+export * from './legend';
diff --git a/src/components/atoms/forms/legend/legend.module.scss b/src/components/atoms/forms/legend/legend.module.scss
new file mode 100644
index 0000000..705e3fe
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.module.scss
@@ -0,0 +1,6 @@
+.legend {
+  float: left;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-primary-darker);
+}
diff --git a/src/components/atoms/forms/legend/legend.stories.tsx b/src/components/atoms/forms/legend/legend.stories.tsx
new file mode 100644
index 0000000..cda7f09
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.stories.tsx
@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Legend as LegendComponent } from './legend';
+import { Fieldset } from '../fieldset';
+
+/**
+ * Legend - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms',
+  component: LegendComponent,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof LegendComponent>;
+
+const Template: ComponentStory<typeof LegendComponent> = (args) => (
+  <Fieldset>
+    <LegendComponent {...args} />
+  </Fieldset>
+);
+
+/**
+ * Legend Story
+ */
+export const Legend = Template.bind({});
+Legend.args = {
+  children: 'A fieldset legend',
+};
diff --git a/src/components/atoms/forms/legend/legend.test.tsx b/src/components/atoms/forms/legend/legend.test.tsx
new file mode 100644
index 0000000..7abb996
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Fieldset } from '../fieldset';
+import { Legend } from './legend';
+
+describe('legend', () => {
+  it('renders the fieldset legend', () => {
+    const body = 'deserunt';
+
+    render(
+      <Fieldset>
+        <Legend>{body}</Legend>
+      </Fieldset>
+    );
+
+    expect(screen.getByRole('group')).toHaveTextContent(body);
+  });
+});
diff --git a/src/components/atoms/forms/legend/legend.tsx b/src/components/atoms/forms/legend/legend.tsx
new file mode 100644
index 0000000..b517855
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.tsx
@@ -0,0 +1,21 @@
+import type { FC, HTMLAttributes } from 'react';
+import styles from './legend.module.scss';
+
+export type LegendProps = HTMLAttributes<HTMLLegendElement>;
+
+/**
+ * Legend component.
+ */
+export const Legend: FC<LegendProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
+  const legendClass = `${styles.legend} ${className}`;
+
+  return (
+    <legend {...props} className={legendClass}>
+      {children}
+    </legend>
+  );
+};