From d75b9a1e150ab211c1052fb49bede9bd16320aca Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 7 Oct 2023 18:44:14 +0200 Subject: feat(components): add a generic Flip component The flipping animation is used at several places so it makes sense to use a single component to handle the animation. It will avoid styles duplication. --- .../forms/flipping-label/flipping-label.stories.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'src/components/molecules/forms/flipping-label/flipping-label.stories.tsx') 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 = ({ const updateState = useCallback(() => setActive((prev) => !prev), []); return ( - + ); }; export const Active = Template.bind({}); Active.args = { - children: , + icon: , isActive: true, + label: 'Close the search', }; export const Inactive = Template.bind({}); Inactive.args = { - children: , + icon: , isActive: false, + label: 'Open the search', }; -- cgit v1.2.3