aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/colophon
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/colophon')
-rw-r--r--src/components/molecules/colophon/colophon.stories.tsx102
1 files changed, 33 insertions, 69 deletions
diff --git a/src/components/molecules/colophon/colophon.stories.tsx b/src/components/molecules/colophon/colophon.stories.tsx
index 7baecad..83db4f4 100644
--- a/src/components/molecules/colophon/colophon.stories.tsx
+++ b/src/components/molecules/colophon/colophon.stories.tsx
@@ -1,83 +1,47 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
import { Icon } from '../../atoms';
import { Copyright } from '../copyright';
import { Colophon } from './colophon';
-/**
- * Colophon - Storybook Meta
- */
-export default {
- title: 'Molecules/Colophon',
+const meta = {
component: Colophon,
- argTypes: {
- copyright: {
- description: 'The website copyright.',
- type: {
- name: 'object',
- required: true,
- value: {},
- },
- },
- links: {
- control: {
- type: 'object',
- },
- description:
- 'Adds links to the colophon (a Legal Notice link for example).',
- table: {
- category: 'Options',
- },
- type: {
- name: 'object',
- required: false,
- value: {},
- },
- },
- },
-} as ComponentMeta<typeof Colophon>;
+ title: 'Molecules/Colophon',
+} satisfies Meta<typeof Colophon>;
+
+export default meta;
-const Template: ComponentStory<typeof Colophon> = (args) => (
- <Colophon {...args} />
-);
+type Story = StoryObj<typeof meta>;
-/**
- * Colophon Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
- copyright: <Copyright from="2021" owner="Brand" to="2023" />,
+export const Default: Story = {
+ args: {
+ copyright: <Copyright from="2021" owner="Brand" to="2023" />,
+ },
};
-/**
- * Colophon Stories - WithLicense
- */
-export const WithLicense = Template.bind({});
-WithLicense.args = {
- copyright: <Copyright from="2021" owner="Brand" to="2023" />,
- license: <Icon heading="CC BY SA" shape="cc-by-sa" />,
+export const WithLicense: Story = {
+ args: {
+ copyright: <Copyright from="2021" owner="Brand" to="2023" />,
+ license: <Icon heading="CC BY SA" shape="cc-by-sa" />,
+ },
};
-/**
- * Colophon Stories - WithLinks
- */
-export const WithLinks = Template.bind({});
-WithLinks.args = {
- copyright: <Copyright from="2021" owner="Brand" to="2023" />,
- links: [
- { href: '#legal', id: 'item-1', label: 'Legal notice' },
- { href: '#credits', id: 'item-2', label: 'Credits' },
- ],
+export const WithLinks: Story = {
+ args: {
+ copyright: <Copyright from="2021" owner="Brand" to="2023" />,
+ links: [
+ { href: '#legal', id: 'item-1', label: 'Legal notice' },
+ { href: '#credits', id: 'item-2', label: 'Credits' },
+ ],
+ },
};
-/**
- * Colophon Stories - WithLicenseAndLinks
- */
-export const WithLicenseAndLinks = Template.bind({});
-WithLicenseAndLinks.args = {
- copyright: <Copyright from="2021" owner="Brand" to="2023" />,
- license: <Icon heading="CC BY SA" shape="cc-by-sa" />,
- links: [
- { href: '#legal', id: 'item-1', label: 'Legal notice' },
- { href: '#credits', id: 'item-2', label: 'Credits' },
- ],
+export const WithLicenseAndLinks: Story = {
+ args: {
+ copyright: <Copyright from="2021" owner="Brand" to="2023" />,
+ license: <Icon heading="CC BY SA" shape="cc-by-sa" />,
+ links: [
+ { href: '#legal', id: 'item-1', label: 'Legal notice' },
+ { href: '#credits', id: 'item-2', label: 'Credits' },
+ ],
+ },
};