From 7b8fbff0dd22252f75a2807f9c0abd619a34e157 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20PR=C3=89VOT?= Date: Thu, 20 Jul 2023 19:27:56 +0200 Subject: [PATCH] refactor: uniformize and reorganize the stories BREAKING CHANGE TextInput no longer takes an `icon` and `iconPosition` property, but `prefix` and `suffix` instead. This means that now you can have two icons/whatever as prefix/suffix --- packages/fractal/.eslintrc.cjs | 4 + packages/fractal/.storybook/main.ts | 2 +- packages/fractal/.storybook/manager-head.html | 1 - packages/fractal/.storybook/preview.ts | 20 +- packages/fractal/fractal-panda.preset.ts | 4 +- .../Autocomplete/Autocomplete.stories.tsx | 131 +++- .../components/Autocomplete/Autocomplete.tsx | 389 +++++------ .../Autocomplete/Autocomplete.types.ts | 23 +- .../Autocomplete/AutocompleteEmpty.tsx | 17 +- .../Autocomplete/AutocompleteItem.tsx | 19 +- .../Autocomplete/AutocompleteLoading.tsx | 19 +- .../src/components/Autocomplete/index.ts | 5 + .../src/components/Button/Button.stories.tsx | 35 +- .../fractal/src/components/Button/Button.tsx | 95 +-- .../InputCheckbox/InputCheckbox.recipe.ts | 2 +- .../InputCheckbox/InputCheckbox.stories.tsx | 212 ++++-- .../InputCheckbox/InputCheckbox.tsx | 130 ++-- .../components/InputDate/InputDate.recipe.ts | 2 +- .../InputDate/InputDate.stories.tsx | 156 ++++- .../src/components/InputDate/InputDate.tsx | 441 ++++++------ .../components/InputDate/InputDate.types.ts | 6 + .../InputPhone/InputPhone.recipe.ts | 4 +- .../InputPhone/InputPhone.stories.tsx | 118 +++- .../src/components/InputPhone/InputPhone.tsx | 642 +++++++++--------- .../components/InputPhone/InputPhone.types.ts | 20 +- .../src/components/InputRadio/InputRadio.mdx | 3 +- .../InputRadio/InputRadio.stories.tsx | 213 +++--- .../src/components/InputRadio/InputRadio.tsx | 91 +-- .../components/InputRadio/InputRadioGroup.tsx | 11 +- .../components/InputText/InputText.recipe.ts | 95 +-- .../InputText/InputText.stories.tsx | 385 ++++++----- .../src/components/InputText/InputText.tsx | 251 +++---- .../components/InputText/InputText.types.ts | 27 +- .../src/components/Select/Select.recipe.ts | 16 +- .../src/components/Select/Select.stories.tsx | 107 ++- .../fractal/src/components/Select/Select.tsx | 359 +++++----- .../src/components/Select/Select.types.ts | 4 + .../src/components/Select/SelectItem.tsx | 18 +- .../src/components/Select/SelectItemGroup.tsx | 11 +- .../components/Select/SelectItemSeparator.tsx | 11 +- .../Typography/Typography.stories.tsx | 69 +- .../src/components/Typography/Typography.tsx | 11 +- packages/fractal/src/conditions.ts | 22 +- packages/fractal/src/mocks.tsx | 23 + 44 files changed, 2453 insertions(+), 1771 deletions(-) create mode 100644 packages/fractal/src/mocks.tsx diff --git a/packages/fractal/.eslintrc.cjs b/packages/fractal/.eslintrc.cjs index 48331c372..9ad7c0899 100644 --- a/packages/fractal/.eslintrc.cjs +++ b/packages/fractal/.eslintrc.cjs @@ -22,6 +22,10 @@ module.exports = { tsconfigRootDir: __dirname, }, + rules: { + 'import/no-named-as-default': 'off', + }, + settings: { 'import/resolver': { typescript: { diff --git a/packages/fractal/.storybook/main.ts b/packages/fractal/.storybook/main.ts index 8f9d7b13b..6cfb8870f 100644 --- a/packages/fractal/.storybook/main.ts +++ b/packages/fractal/.storybook/main.ts @@ -37,7 +37,7 @@ const config: StorybookConfig = { // See https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react#typescript-props-with-react-docgen reactDocgen: 'react-docgen-typescript', reactDocgenTypescriptOptions: { - include: ['./src/**/**.ts', './src/**/**.tsx'], + include: ['./src/**/*.ts', './src/**/*.tsx'], shouldExtractLiteralValuesFromEnum: true, shouldRemoveUndefinedFromOptional: true, skipChildrenPropWithoutDoc: false, diff --git a/packages/fractal/.storybook/manager-head.html b/packages/fractal/.storybook/manager-head.html index df80c9016..4e5ec6567 100644 --- a/packages/fractal/.storybook/manager-head.html +++ b/packages/fractal/.storybook/manager-head.html @@ -117,7 +117,6 @@ .sidebar-subheading { margin-top: 0 !important; padding-top: 8px !important; - border-top: 1px solid #e2e2e2; } #fractal--documentation > svg { diff --git a/packages/fractal/.storybook/preview.ts b/packages/fractal/.storybook/preview.ts index 30e6cb998..5bc6ad207 100644 --- a/packages/fractal/.storybook/preview.ts +++ b/packages/fractal/.storybook/preview.ts @@ -9,7 +9,7 @@ import fractalTheme from './theme' import '../src/styles/global.css' -const preview = { +const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -23,6 +23,9 @@ const preview = { }, docs: { + argTypes: { + sort: 'requiredFirst', + }, controls: { sort: 'requiredFirst', }, @@ -34,7 +37,20 @@ const preview = { textInverseColor: ColorBaseWhite, }, }, + + options: { + storySort: { + order: [ + 'Guidelines', + 'Atoms', + 'Molecules', + 'Organisms', + 'Templates', + 'Pages', + ], + }, + }, }, -} as Preview +} export default preview diff --git a/packages/fractal/fractal-panda.preset.ts b/packages/fractal/fractal-panda.preset.ts index 0b82d2abd..199d2b551 100644 --- a/packages/fractal/fractal-panda.preset.ts +++ b/packages/fractal/fractal-panda.preset.ts @@ -118,7 +118,9 @@ const fractalPreset = definePreset({ inputText: InputTextRecipes.inputText, inputTextContainer: InputTextRecipes.inputTextContainer, inputTextDescription: InputTextRecipes.inputTextDescription, - inputTextIcon: InputTextRecipes.inputTextIcon, + inputTextAddendum: InputTextRecipes.inputTextAddendum, + inputTextPrefix: InputTextRecipes.inputTextPrefix, + inputTextSuffix: InputTextRecipes.inputTextSuffix, inputTextLabel: InputTextRecipes.inputTextLabel, inputTextMessage: InputTextRecipes.inputTextMessage, inputTextWrapper: InputTextRecipes.inputTextWrapper, diff --git a/packages/fractal/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/fractal/src/components/Autocomplete/Autocomplete.stories.tsx index c5dd7b2e6..79dff3cda 100644 --- a/packages/fractal/src/components/Autocomplete/Autocomplete.stories.tsx +++ b/packages/fractal/src/components/Autocomplete/Autocomplete.stories.tsx @@ -1,9 +1,18 @@ -import { UilSearchAlt as SearchIcon } from '@iconscout/react-unicons' +import { + UilCancel as CancelIcon, + UilCheckCircle as CheckCircleIcon, + UilExclamationCircle as ExclamationCircleIcon, + UilMessage as SendIcon, + UilEnvelopeStar as StarIcon, +} from '@iconscout/react-unicons' import { action } from '@storybook/addon-actions' import { useArgs } from '@storybook/preview-api' import type { Meta, StoryObj } from '@storybook/react' import isEmpty from 'lodash/fp/isEmpty' -import { type ComponentProps } from 'react' +import kebabCase from 'lodash/fp/kebabCase' +import type { ComponentProps, ReactNode } from 'react' + +import { jedis, others, siths } from '@/mocks' import Autocomplete from './Autocomplete' import AutocompleteEmpty from './AutocompleteEmpty' @@ -14,21 +23,117 @@ import AutocompleteLoading from './AutocompleteLoading' type AutocompleteProps = ComponentProps +function asItem(list: Array, withDisabled = false): ReactNode { + return list.map((item, index) => { + const value = kebabCase(item) + const disabled = (index + 1) % 3 === 0 && withDisabled + + return ( + + {item} + + ) + }) +} + +const jedisItems = asItem(jedis) +const sithsItems = asItem(siths) +const othersItems = asItem(others, true) + +const items = ( + <> + {jedisItems} + {sithsItems} + {othersItems} + +) + +const itemsWithGroups = ( + <> + {jedisItems} + {sithsItems} + {othersItems} + +) + +const itemsWithGroupsAndSeparators = ( + <> + {jedisItems} + {sithsItems} + + {othersItems} + +) + const meta: Meta = { argTypes: { - onChange: { control: false }, - onClose: { control: false }, - onInputChange: { - control: false, + children: { + control: 'radio', + mapping: { + Empty: ( + + This indicates that there are no item matching your search! + + ), + 'Grouped items': itemsWithGroups, + Loading: ( + + This indicates that your search is loading... + + ), + 'Mixed items': itemsWithGroupsAndSeparators, + 'Simple items': items, + }, + options: [ + 'Empty', + 'Loading', + 'Simple items', + 'Grouped items', + 'Mixed items', + ], + table: { + type: { + summary: + 'AutocompleteEmpty | AutocompleteLoading | AutocompleteItem | AutocompleteItemGroup | AutocompleteItemSeparator | Array', + }, + }, + }, + defaultValue: { control: 'text' }, + onRawChange: { + table: { disable: true }, + }, + prefix: { + mapping: { + Cancel: , + Check: , + Error: , + None: undefined, + Send: , + Star: , + }, + options: ['None', 'Cancel', 'Check', 'Error', 'Send', 'Star'], + }, + suffix: { + mapping: { + Cancel: , + Check: , + Error: , + None: undefined, + Send: , + Star: , + }, + options: ['None', 'Cancel', 'Check', 'Error', 'Send', 'Star'], }, - onOpen: { control: false }, + type: { table: { disable: true } }, }, args: { autoFocus: false, - description: 'This is a description', + description: 'Find any character or planet in Star Wars', disabled: false, - label: 'This is the label', - placeholder: 'This is the placeholder', + fullWidth: false, + label: 'Search the Star Wars universe', + placeholder: 'Enter your search', + prefix: 'Search', readOnly: false, required: false, }, @@ -135,16 +240,16 @@ const meta: Meta = { componentSubtitle: '🧑‍🚀 Our mission with Andy is complete, Woody - Buzz Lightyear - Toy Story 3', controls: { - exclude: ['value'], + exclude: ['dropdown', 'open', 'type', 'value'], }, }, - title: 'Autocomplete', + title: 'Molecules/Autocomplete', } satisfies Meta export default meta type Story = StoryObj export const Playground: Story = { - args: { icon: , value: '' }, + args: { value: '' }, } diff --git a/packages/fractal/src/components/Autocomplete/Autocomplete.tsx b/packages/fractal/src/components/Autocomplete/Autocomplete.tsx index c6b7a9780..0a5dac91c 100644 --- a/packages/fractal/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/fractal/src/components/Autocomplete/Autocomplete.tsx @@ -41,222 +41,231 @@ import type { AutocompleteProps } from './Autocomplete.types' * `Autocomplete` component is used to allow the user to enter text and offer * them suggestion as they type. */ -function Autocomplete( - { - autoFocus = false, - children, - defaultValue, - description, - disabled = false, - dropdown = {}, - error, - fullWidth = false, - icon, - id = uniqueId('fractal-autocomplete-'), - label, - name, - onChange, - onClose, - onInputChange, - onOpen, - open, - placeholder, - readOnly = false, - required = false, - success, - value, - ...props - }: AutocompleteProps, - ref: ForwardedRef, -) { - const inputRef = useRef(null) - const combinedRef = composeRefs(ref, inputRef) - const containerRef = useRef(null) +export const Autocomplete = forwardRef( + ( + { + autoFocus = false, + children, + defaultValue, + description, + disabled = false, + dropdown = {}, + error, + fullWidth = false, + icon, + id = uniqueId('fractal-autocomplete-'), + label, + name, + onChange, + onClose, + onInputChange, + onOpen, + open, + placeholder, + readOnly = false, + required = false, + success, + value, + ...props + }: AutocompleteProps, + ref: ForwardedRef, + ) => { + const inputRef = useRef(null) + const combinedRef = composeRefs(ref, inputRef) + const containerRef = useRef(null) - const [keepFocus, setKeepFocus] = useState(false) - const [isOpen, setIsOpen] = useState(open || Boolean(children)) + const [keepFocus, setKeepFocus] = useState(false) + const [isOpen, setIsOpen] = useState( + open === true || (Boolean(children) && open !== false), + ) - useEffect(() => { - setIsOpen(open || Boolean(children)) - }, [open, children]) + useEffect(() => { + setIsOpen(open === true || (Boolean(children) && open !== false)) + }, [open, children]) - const hasErrorMessage = !isEmpty(error) - const hasSuccessMessage = !isEmpty(success) + const hasErrorMessage = !isEmpty(error) + const hasSuccessMessage = !isEmpty(success) - const isInError = hasErrorMessage - const isSuccessful = hasSuccessMessage && !isInError + const isInError = hasErrorMessage + const isSuccessful = hasSuccessMessage && !isInError - const groupClassNames = cx( - `${PREFIX}-${GROUP_NAME}`, - autocompleteContainer(), - props.className, - disabled ? 'disabled' : '', - fullWidth ? 'full-width' : '', - isInError ? 'error' : '', - readOnly ? 'readonly' : '', - required ? 'required' : '', - isSuccessful ? 'success' : '', - ) + const groupClassNames = cx( + `${PREFIX}-${GROUP_NAME}`, + autocompleteContainer(), + props.className, + disabled ? 'disabled' : '', + fullWidth ? 'full-width' : '', + isInError ? 'error' : '', + readOnly ? 'readonly' : '', + required ? 'required' : '', + isSuccessful ? 'success' : '', + ) - const handleInputChange = (newValue: string) => { - if (!isOpen) { - setKeepFocus(true) - } + const handleInputChange = (newValue: string) => { + if (!isOpen) { + setKeepFocus(true) + } - if (isFunction(onInputChange)) { - onInputChange(newValue) - } + if (isFunction(onInputChange)) { + onInputChange(newValue) + } - if (isFunction(onChange)) { - onChange(newValue) + if (isFunction(onChange)) { + onChange(newValue) + } } - } - const handleDropdownToggle = (isOpened: boolean) => { - setIsOpen(isOpened) + const handleDropdownToggle = (isOpened: boolean) => { + setIsOpen(isOpened) - if (isOpened && isFunction(onOpen)) { - onOpen() - } + if (isOpened && isFunction(onOpen)) { + onOpen() + } - if (!isOpened && isFunction(onClose)) { - onClose() + if (!isOpened && isFunction(onClose)) { + onClose() + } } - } - const handleInteractOutside: DismissableLayerProps['onInteractOutside'] = ( - event, - ) => { - const { target } = event - if (target === window || target === null || target === undefined) { - return - } + const handleInteractOutside: DismissableLayerProps['onInteractOutside'] = ( + event, + ) => { + const { target } = event + if (target === window || target === null || target === undefined) { + return + } - if (containerRef?.current?.contains(target as Element)) { - event.preventDefault() + if (containerRef?.current?.contains(target as Element)) { + event.preventDefault() + } } - } - const handleInputBlur = () => { - if (keepFocus) { - if (inputRef.current) { - inputRef.current.focus() - } + const handleInputBlur = () => { + if (keepFocus) { + if (inputRef.current) { + inputRef.current.focus() + } - setKeepFocus(false) + setKeepFocus(false) + } } - } - return ( -
- {!isEmpty(label) ? ( - - {label} - - ) : ( - false - )} - - + return ( +
+ {!isEmpty(label) ? ( + + {label} + + ) : ( + false + )} - - - - + - - {children} - + + {children} + - - - - - - + + + + + + - {!isEmpty(description) && !hasErrorMessage && !hasSuccessMessage ? ( -
- {description} -
- ) : ( - false - )} + {!isEmpty(description) && !hasErrorMessage && !hasSuccessMessage ? ( +
+ {description} +
+ ) : ( + false + )} - {hasErrorMessage || hasSuccessMessage ? ( -
- {isInError ? error : success} -
- ) : ( - false - )} -
- ) -} + {hasErrorMessage || hasSuccessMessage ? ( +
+ {isInError ? error : success} +
+ ) : ( + false + )} +
+ ) + }, +) +Autocomplete.displayName = 'Autocomplete' -export default forwardRef(Autocomplete) +export default Autocomplete diff --git a/packages/fractal/src/components/Autocomplete/Autocomplete.types.ts b/packages/fractal/src/components/Autocomplete/Autocomplete.types.ts index 76b03c4ba..8ce6ef9bd 100644 --- a/packages/fractal/src/components/Autocomplete/Autocomplete.types.ts +++ b/packages/fractal/src/components/Autocomplete/Autocomplete.types.ts @@ -6,8 +6,7 @@ import type { AllHTMLAttributes, ReactNode } from 'react' import { InputTextProps } from '../InputText/InputText.types' -export interface AutocompleteProps - extends Omit { +export interface AutocompleteProps extends Omit { /** Indicates if the autocomplete input must be focused on render. */ autoFocus?: boolean /** The elements to display in the autocomplete dropdown. */ @@ -49,16 +48,11 @@ export interface AutocompleteProps * Note that the description (if there is one) will be replaced by the error * message when provided. * - * The icon (if there is one) will also be replaced by a specific error icon. + * The suffix (if there is one) will also be replaced by a specific error icon. */ error?: string /** Indicates if the autocomplete should take all the available width. */ fullWidth?: boolean - /** - * The icon to display in the autocomplete input (if any) at the left - * position. - */ - icon?: ReactNode /** * A unique HTML id for the autocomplete. * @@ -77,7 +71,10 @@ export interface AutocompleteProps * If none is given, the ID (provided or auto-generated) will be used. */ name?: string - /** Event handler called when the input is changed or a value is selected. */ + /** + * Event handler called when the autocomplete input value is changed or a + * value is selected. + */ onChange?: (newValue: string) => void /** Event handler called when the autocomplete dropdown is closed. */ onClose?: () => void @@ -92,6 +89,8 @@ export interface AutocompleteProps open?: boolean /** A string to display when the autocomplete is empty. */ placeholder?: string + /** The prefix (icon or text) to display to the left of the autocomplete. */ + prefix?: ReactNode /** Prevents the user to change the value of the autocomplete. */ readOnly?: boolean /** Indicates if the autocomplete must be filled. */ @@ -105,13 +104,15 @@ export interface AutocompleteProps * Note that the description (if there is one) will be replaced by the success * message when provided. * - * The icon (if there is one) will be replaced by a specific success icon. + * The suffix (if there is one) will be replaced by a specific success icon. */ success?: string + /** The suffix (icon or text) to display to the right of the autocomplete. */ + suffix?: ReactNode /** * The controlled value of the autocomplete. * - * Must be used in conjunction with `onInputChange`. + * Must be used in conjunction with `onChange`. */ value?: number | string } diff --git a/packages/fractal/src/components/Autocomplete/AutocompleteEmpty.tsx b/packages/fractal/src/components/Autocomplete/AutocompleteEmpty.tsx index 243c98246..d916a9284 100644 --- a/packages/fractal/src/components/Autocomplete/AutocompleteEmpty.tsx +++ b/packages/fractal/src/components/Autocomplete/AutocompleteEmpty.tsx @@ -5,18 +5,17 @@ import { typography, } from '@snowball-tech/fractal-panda/recipes' import omit from 'lodash/fp/omit' -import { type ForwardedRef, forwardRef } from 'react' import type { AutocompleteEmptyProps } from './Autocomplete.types' /** - * `AutocompleteLoading` component is used to display a loader in the - * `Autocomplete` dropdown when data is loading. + * `AutocompleteEmpty` component is used to display an empty state inside of the + * dropdown of an `Autocomplete` component. */ -function AutocompleteEmpty( - { children, ...props }: AutocompleteEmptyProps, - ref: ForwardedRef, -) { +export const AutocompleteEmpty = ({ + children, + ...props +}: AutocompleteEmptyProps) => { const emptyClassNames = cx( typography({ variant: 'body-1' }), autocompleteEmpty(), @@ -25,7 +24,6 @@ function AutocompleteEmpty( return ( event.preventDefault()} {...omit(['className', 'disabled', 'onSelect'], props)} @@ -34,5 +32,6 @@ function AutocompleteEmpty( ) } +AutocompleteEmpty.displayName = 'AutocompleteEmpty' -export default forwardRef(AutocompleteEmpty) +export default AutocompleteEmpty diff --git a/packages/fractal/src/components/Autocomplete/AutocompleteItem.tsx b/packages/fractal/src/components/Autocomplete/AutocompleteItem.tsx index 993c0ba83..aec1512f0 100644 --- a/packages/fractal/src/components/Autocomplete/AutocompleteItem.tsx +++ b/packages/fractal/src/components/Autocomplete/AutocompleteItem.tsx @@ -6,18 +6,19 @@ import { typography, } from '@snowball-tech/fractal-panda/recipes' import omit from 'lodash/fp/omit' -import { type ForwardedRef, forwardRef } from 'react' import type { AutocompleteItemProps } from './Autocomplete.types' /** - * `AutocompleteItem` component is used to display choices of an `Autocomplete` - * component. + * `AutocompleteItem` component is used to display choices inside of the + * dropdown of an `Autocomplete` component. */ -function AutocompleteItem( - { children: item, disabled = false, value, ...props }: AutocompleteItemProps, - ref: ForwardedRef, -) { +export const AutocompleteItem = ({ + children: item, + disabled = false, + value, + ...props +}: AutocompleteItemProps) => { const itemClassNames = cx( typography({ variant: 'body-1' }), selectItem(), @@ -28,7 +29,6 @@ function AutocompleteItem( return ( ) } +AutocompleteItem.displayName = 'AutocompleteItem' -export default forwardRef(AutocompleteItem) +export default AutocompleteItem diff --git a/packages/fractal/src/components/Autocomplete/AutocompleteLoading.tsx b/packages/fractal/src/components/Autocomplete/AutocompleteLoading.tsx index f89cfd414..c3948c1bf 100644 --- a/packages/fractal/src/components/Autocomplete/AutocompleteLoading.tsx +++ b/packages/fractal/src/components/Autocomplete/AutocompleteLoading.tsx @@ -10,18 +10,19 @@ import { } from '@snowball-tech/fractal-panda/recipes' import isBoolean from 'lodash/fp/isBoolean' import omit from 'lodash/fp/omit' -import { type ForwardedRef, forwardRef } from 'react' import type { AutocompleteLoadingProps } from './Autocomplete.types' /** - * `AutocompleteLoading` component is used to display a loader in the - * `Autocomplete` dropdown when data is loading. + * `AutocompleteLoading` component is used to display a loader in the dropdown + * of an `Autocomplete` component. */ -function AutocompleteLoading( - { children, icon = true, spin = true, ...props }: AutocompleteLoadingProps, - ref: ForwardedRef, -) { +export const AutocompleteLoading = ({ + children, + icon = true, + spin = true, + ...props +}: AutocompleteLoadingProps) => { const loadingClassNames = cx( typography({ variant: 'body-1' }), autocompleteLoading(), @@ -32,7 +33,6 @@ function AutocompleteLoading( return ( event.preventDefault()} {...omit(['className', 'disabled', 'onSelect'], props)} @@ -54,5 +54,6 @@ function AutocompleteLoading( ) } +AutocompleteLoading.displayName = 'AutocompleteLoading' -export default forwardRef(AutocompleteLoading) +export default AutocompleteLoading diff --git a/packages/fractal/src/components/Autocomplete/index.ts b/packages/fractal/src/components/Autocomplete/index.ts index 031f55014..24216fa71 100644 --- a/packages/fractal/src/components/Autocomplete/index.ts +++ b/packages/fractal/src/components/Autocomplete/index.ts @@ -1 +1,6 @@ export { default as Autocomplete } from './Autocomplete.js' +export { default as AutocompleteEmpty } from './AutocompleteEmpty.js' +export { default as AutocompleteItem } from './AutocompleteItem.js' +export { default as AutocompleteItemGroup } from './AutocompleteItemGroup.js' +export { default as AutocompleteItemSeparator } from './AutocompleteItemSeparator.js' +export { default as AutocompleteLoading } from './AutocompleteLoading.js' diff --git a/packages/fractal/src/components/Button/Button.stories.tsx b/packages/fractal/src/components/Button/Button.stories.tsx index 39a640248..5b60d9197 100644 --- a/packages/fractal/src/components/Button/Button.stories.tsx +++ b/packages/fractal/src/components/Button/Button.stories.tsx @@ -13,9 +13,6 @@ type ButtonProps = ComponentProps const meta = { argTypes: { - dir: { table: { disable: true } }, - onClick: { control: false }, - onLongClick: { control: false }, variant: { options: Object.values(Variants), table: { @@ -26,9 +23,10 @@ const meta = { }, args: { disabled: false, + fullWidth: false, icon: 'Send', iconPosition: 'right', - label: 'Click me please!', + label: 'Punch it, Chewie!', type: 'button', }, component: Button, @@ -37,7 +35,7 @@ const meta = { "🧑‍✈️ Hey, Auto, what's that flashing button? - Axiom's Captain B. McCrea - Wall-E", }, - title: 'Button', + title: 'Atoms/Button', } satisfies Meta export default meta @@ -68,15 +66,6 @@ export const Playground: StoryObj = { }, } -const separator = ( -
-) - const Wrapper = ({ children }: { children: ReactNode }) => (
(
) -export const Buttons: Story = { +export const Display: Story = { render: () => ( <> @@ -132,9 +121,13 @@ export const Buttons: Story = { variant="display" /> + + ), +} - {separator} - +export const Primary: Story = { + render: () => ( + <>