aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/forms/flipping-label/flipping-label.stories.tsx')
-rw-r--r--src/components/molecules/forms/flipping-label/flipping-label.stories.tsx12
1 files changed, 7 insertions, 5 deletions
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
index bf5724e..c3c4f9a 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
@@ -1,6 +1,6 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { useCallback, useState } from 'react';
-import { Icon } from '../../../atoms';
+import { Button, Icon } from '../../../atoms';
import { FlippingLabel } from './flipping-label';
export default {
@@ -78,20 +78,22 @@ const Template: ComponentStory<typeof FlippingLabel> = ({
const updateState = useCallback(() => setActive((prev) => !prev), []);
return (
- <button onClick={updateState} type="button">
+ <Button kind="neutral" onClick={updateState} shape="initial" type="button">
<FlippingLabel {...args} isActive={active} />
- </button>
+ </Button>
);
};
export const Active = Template.bind({});
Active.args = {
- children: <Icon shape="magnifying-glass" />,
+ icon: <Icon shape="magnifying-glass" />,
isActive: true,
+ label: 'Close the search',
};
export const Inactive = Template.bind({});
Inactive.args = {
- children: <Icon shape="magnifying-glass" />,
+ icon: <Icon shape="magnifying-glass" />,
isActive: false,
+ label: 'Open the search',
};