aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-06-01 19:34:43 +0200
committerArmand Philippot <git@armandphilippot.com>2022-06-01 22:32:16 +0200
commit6be20422494e3806fba3d1c5ad5c3e98bd6e67e5 (patch)
tree7c679e54ba4bbadaf0a59bbde780f5742e3b875d /src/components/atoms
parent8320b1d39ea6402c32e907dbb35082efc6af9f5a (diff)
chore: replace the Ackee select by a toggle component
Diffstat (limited to 'src/components/atoms')
-rw-r--r--src/components/atoms/forms/fieldset.fixture.tsx2
-rw-r--r--src/components/atoms/forms/fieldset.module.scss28
-rw-r--r--src/components/atoms/forms/fieldset.stories.tsx116
-rw-r--r--src/components/atoms/forms/fieldset.test.tsx11
-rw-r--r--src/components/atoms/forms/fieldset.tsx59
5 files changed, 0 insertions, 216 deletions
diff --git a/src/components/atoms/forms/fieldset.fixture.tsx b/src/components/atoms/forms/fieldset.fixture.tsx
deleted file mode 100644
index b533dfb..0000000
--- a/src/components/atoms/forms/fieldset.fixture.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export const body = 'doloribus magni aut';
-export const legend = 'maiores autem est';
diff --git a/src/components/atoms/forms/fieldset.module.scss b/src/components/atoms/forms/fieldset.module.scss
deleted file mode 100644
index d1b5956..0000000
--- a/src/components/atoms/forms/fieldset.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.wrapper {
- max-width: 100%;
- padding: 0;
- border: none;
-
- &--inline {
- display: flex;
- flex-flow: row wrap;
- align-items: center;
-
- .legend {
- float: left;
- margin-right: var(--spacing-2xs);
- }
- }
-
- &--stacked {
- .legend {
- padding: 0 var(--spacing-xs) 0 0;
- }
- }
-}
-
-.legend {
- color: var(--color-primary-darker);
- font-size: var(--font-size-md);
- font-weight: 600;
-}
diff --git a/src/components/atoms/forms/fieldset.stories.tsx b/src/components/atoms/forms/fieldset.stories.tsx
deleted file mode 100644
index 0353c13..0000000
--- a/src/components/atoms/forms/fieldset.stories.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FieldsetComponent from './fieldset';
-import { body, legend } from './fieldset.fixture';
-
-/**
- * Fieldset - Storybook Meta
- */
-export default {
- title: 'Atoms/Forms/Fieldset',
- component: FieldsetComponent,
- args: {
- legendPosition: 'stacked',
- role: 'group',
- },
- argTypes: {
- children: {
- control: {
- type: null,
- },
- description: 'The fieldset body.',
- type: {
- name: 'string',
- required: true,
- },
- },
- className: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the fieldset.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- legend: {
- control: {
- type: 'text',
- },
- description: 'The fieldset legend.',
- type: {
- name: 'string',
- required: true,
- },
- },
- legendClassName: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the legend.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- legendPosition: {
- control: {
- type: 'select',
- },
- description: 'Determine the legend position.',
- options: ['inline', 'stacked'],
- table: {
- category: 'Options',
- defaultValue: { summary: 'inline' },
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- role: {
- control: {
- type: 'select',
- },
- description: 'An accessible role.',
- table: {
- category: 'Accessibility',
- defaultValue: { summary: 'group' },
- },
- options: ['group', 'radiogroup', 'presentation', 'none'],
- type: {
- name: 'string',
- required: false,
- },
- },
- },
-} as ComponentMeta<typeof FieldsetComponent>;
-
-const Template: ComponentStory<typeof FieldsetComponent> = (args) => (
- <FieldsetComponent {...args} />
-);
-
-/**
- * Fieldset Stories - Stacked legend
- */
-export const StackedLegend = Template.bind({});
-StackedLegend.args = {
- children: body,
- legend: legend,
-};
-
-/**
- * Fieldset Stories - Inlined legend
- */
-export const InlinedLegend = Template.bind({});
-InlinedLegend.args = {
- children: body,
- legend: legend,
- legendPosition: 'inline',
-};
diff --git a/src/components/atoms/forms/fieldset.test.tsx b/src/components/atoms/forms/fieldset.test.tsx
deleted file mode 100644
index 1d1d246..0000000
--- a/src/components/atoms/forms/fieldset.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { render, screen } from '@test-utils';
-import Fieldset from './fieldset';
-import { body, legend } from './fieldset.fixture';
-
-describe('Fieldset', () => {
- it('renders a legend and a body', () => {
- render(<Fieldset legend={legend}>{body}</Fieldset>);
- expect(screen.findByRole('group', { name: legend })).toBeTruthy();
- expect(screen.findByText(body)).toBeTruthy();
- });
-});
diff --git a/src/components/atoms/forms/fieldset.tsx b/src/components/atoms/forms/fieldset.tsx
deleted file mode 100644
index 99d31e7..0000000
--- a/src/components/atoms/forms/fieldset.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { FC, ReactNode } from 'react';
-import styles from './fieldset.module.scss';
-
-export type FieldsetProps = {
- /**
- * The fieldset body.
- */
- children: ReactNode | ReactNode[];
- /**
- * Set additional classnames to the fieldset wrapper.
- */
- className?: string;
- /**
- * The fieldset legend.
- */
- legend: string;
- /**
- * Set additional classnames to the legend.
- */
- legendClassName?: string;
- /**
- * The legend position. Default: stacked.
- */
- legendPosition?: 'inline' | 'stacked';
- /**
- * An accessible role. Default: group.
- */
- role?: 'group' | 'radiogroup' | 'presentation' | 'none';
-};
-
-/**
- * Fieldset component
- *
- * Render a fieldset with a legend.
- */
-const Fieldset: FC<FieldsetProps> = ({
- children,
- className = '',
- legend,
- legendClassName = '',
- legendPosition = 'stacked',
- ...props
-}) => {
- const wrapperModifier = `wrapper--${legendPosition}`;
-
- return (
- <fieldset
- className={`${styles.wrapper} ${styles[wrapperModifier]} ${className}`}
- {...props}
- >
- <legend className={`${styles.legend} ${legendClassName}`}>
- {legend}
- </legend>
- {children}
- </fieldset>
- );
-};
-
-export default Fieldset;