diff --git a/packages/core/.storybook/logo.svg b/packages/core/.storybook/logo.svg index 282a6162b8..1a3d8e5964 100644 --- a/packages/core/.storybook/logo.svg +++ b/packages/core/.storybook/logo.svg @@ -1,8 +1,6 @@ - - - - - - - + + + + + diff --git a/packages/core/.storybook/manager-head.html b/packages/core/.storybook/manager-head.html index 72a4dd04a3..35af4d6f7d 100644 --- a/packages/core/.storybook/manager-head.html +++ b/packages/core/.storybook/manager-head.html @@ -7,37 +7,131 @@
- The element the counter refers to should include Tooltip + The element the counter refers to should include{" "} + Tooltip {" , where necessary, to enhance user understanding. For example, a badge is used in conjunction with an icon."}
]} diff --git a/packages/core/src/components/Counter/__stories__/Counter.stories.tsx b/packages/core/src/components/Counter/__stories__/Counter.stories.tsx index 92ad8cddd4..e85842e7dd 100644 --- a/packages/core/src/components/Counter/__stories__/Counter.stories.tsx +++ b/packages/core/src/components/Counter/__stories__/Counter.stories.tsx @@ -16,7 +16,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const counterTemplate = createComponentTemplate(Counter); export default { - title: "Feedback/Counter", + title: "Components/Counter", component: Counter, argTypes: { ...metaSettings.argTypes, diff --git a/packages/core/src/components/DatePicker/__stories__/DatePicker.stories.tsx b/packages/core/src/components/DatePicker/__stories__/DatePicker.stories.tsx index 15c49c9fe4..46dbb5f6ad 100644 --- a/packages/core/src/components/DatePicker/__stories__/DatePicker.stories.tsx +++ b/packages/core/src/components/DatePicker/__stories__/DatePicker.stories.tsx @@ -12,7 +12,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Pickers/DatePicker", + title: "Components/DatePicker", component: DatePicker, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Dialog/__stories__/Dialog.mdx b/packages/core/src/components/Dialog/__stories__/Dialog.mdx index 182a07efdc..f0894d0252 100644 --- a/packages/core/src/components/Dialog/__stories__/Dialog.mdx +++ b/packages/core/src/components/Dialog/__stories__/Dialog.mdx @@ -53,8 +53,8 @@ import { Dialog } from "@vibe/core"; "Usually, the dialog will be positioned next to the triggered element.", <> The Dialog component is mainly used to create customized menus that cannot be developed using the{" "} - Menu and{" "} - MenuButton components. + Menu and{" "} + MenuButton components. ]} /> diff --git a/packages/core/src/components/Dialog/__stories__/Dialog.stories.helpers.tsx b/packages/core/src/components/Dialog/__stories__/Dialog.stories.helpers.tsx index 0190c99f93..665f96cfc9 100644 --- a/packages/core/src/components/Dialog/__stories__/Dialog.stories.helpers.tsx +++ b/packages/core/src/components/Dialog/__stories__/Dialog.stories.helpers.tsx @@ -24,7 +24,7 @@ export const TipDevTipPopperJs = () => ( export const TipModal = () => ( Exactly for this purpose, we created the{" "} - + Modal {" "} component! Check it out. @@ -34,7 +34,7 @@ export const TipModal = () => ( export const TipDevTipTechnicalPattern = () => ( If you wish to implement a{" "} - + Dropdown {" "} inside a Dialog container and need help displaying the Dropdowns popovers correctly, read more about our Dropdown in diff --git a/packages/core/src/components/Dialog/__stories__/Dialog.stories.tsx b/packages/core/src/components/Dialog/__stories__/Dialog.stories.tsx index dbcf1eb659..8ad8442d5e 100644 --- a/packages/core/src/components/Dialog/__stories__/Dialog.stories.tsx +++ b/packages/core/src/components/Dialog/__stories__/Dialog.stories.tsx @@ -32,7 +32,7 @@ const showHideArgTypes = { }; export default { - title: "Popover/Dialog", + title: "Components/Dialog", component: Dialog, argTypes: { ...metaSettings.argTypes, diff --git a/packages/core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx b/packages/core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx index 45d97b0213..1cd0556f43 100644 --- a/packages/core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx +++ b/packages/core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx @@ -12,7 +12,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const dialogContentContainerTemplate = createComponentTemplate(DialogContentContainer); export default { - title: "Popover/DialogContentContainer", + title: "Components/DialogContentContainer", component: DialogContentContainer, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Divider/__stories__/Divider.stories.tsx b/packages/core/src/components/Divider/__stories__/Divider.stories.tsx index a6e88181cd..6bfd50252f 100644 --- a/packages/core/src/components/Divider/__stories__/Divider.stories.tsx +++ b/packages/core/src/components/Divider/__stories__/Divider.stories.tsx @@ -14,7 +14,7 @@ const dividerTemplate = (args: DividerProps) => ( ); export default { - title: "Data display/Divider", + title: "Components/Divider", component: Divider, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx index 290b887c92..5cc24bd86b 100644 --- a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx +++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx @@ -133,7 +133,7 @@ The Dropdown component supports async loading of options. description: ( <> Don't keep the dropdown component in open mode as permanent state. If this is a design requirement consider - use Combo box instead. + use Combo box instead. ) } diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx index 09f0305d9d..83fef5d0b5 100644 --- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx +++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx @@ -7,7 +7,7 @@ export const TipDevTipPopover = () => ( Dialogs, {" "} - + Modals {" "} and other popovers click{" "} diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js index 563e034514..10b332ed39 100644 --- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js +++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js @@ -30,7 +30,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/Dropdown", + title: "Components/Dropdown", component: Dropdown, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.helpers.tsx b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.helpers.tsx index 83435f7406..e35c5c5469 100644 --- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.helpers.tsx +++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipEditableText = () => ( This component is used for editing text size 18px and up. For editing smaller text sizes, consider using{" "} - + EditableText diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.tsx b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.tsx index f6507504b3..bfcb8861a9 100644 --- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.tsx +++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.tsx @@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/EditableHeading", + title: "Components/EditableHeading", component: EditableHeading, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.helpers.tsx b/packages/core/src/components/EditableText/__stories__/EditableText.stories.helpers.tsx index e6b3d6d86a..c2ae60aa15 100644 --- a/packages/core/src/components/EditableText/__stories__/EditableText.stories.helpers.tsx +++ b/packages/core/src/components/EditableText/__stories__/EditableText.stories.helpers.tsx @@ -5,7 +5,7 @@ export const TipTextField = () => ( This component is used for editing existing text. To allow users to fill empty text fields, for example in a form, consider using{" "} - + TextField diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.tsx b/packages/core/src/components/EditableText/__stories__/EditableText.stories.tsx index e895ca9d3b..28ef017660 100644 --- a/packages/core/src/components/EditableText/__stories__/EditableText.stories.tsx +++ b/packages/core/src/components/EditableText/__stories__/EditableText.stories.tsx @@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/EditableText", + title: "Components/EditableText", component: EditableText, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.helpers.tsx b/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.helpers.tsx index 9b58749ee4..5616410c7c 100644 --- a/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.helpers.tsx +++ b/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipCombineMultiple = () => ( Use our{" "} - + Accordion {" "} component diff --git a/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.tsx b/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.tsx index 798c58db4f..55f0ccf767 100644 --- a/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.tsx +++ b/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.tsx @@ -14,7 +14,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Data Display/ExpandCollapse", + title: "Components/ExpandCollapse", component: ExpandCollapse, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Heading/__stories__/Heading.stories.helpers.tsx b/packages/core/src/components/Heading/__stories__/Heading.stories.helpers.tsx index a75ce6c07a..0cb14ec0cc 100644 --- a/packages/core/src/components/Heading/__stories__/Heading.stories.helpers.tsx +++ b/packages/core/src/components/Heading/__stories__/Heading.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipEditableHeading = () => ( Check out our{" "} - + EditableHeading {" "} component if you would like to allow users to edit the title text. diff --git a/packages/core/src/components/Icon/__stories__/Icon.stories.tsx b/packages/core/src/components/Icon/__stories__/Icon.stories.tsx index 1765da6b46..13960417d6 100644 --- a/packages/core/src/components/Icon/__stories__/Icon.stories.tsx +++ b/packages/core/src/components/Icon/__stories__/Icon.stories.tsx @@ -14,7 +14,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const iconTemplate = createComponentTemplate(Icon); export default { - title: "Media/Icon", + title: "Components/Icon", component: Icon, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.mdx b/packages/core/src/components/IconButton/__stories__/IconButton.mdx index fd48dcbfcc..39854a415d 100644 --- a/packages/core/src/components/IconButton/__stories__/IconButton.mdx +++ b/packages/core/src/components/IconButton/__stories__/IconButton.mdx @@ -40,7 +40,7 @@ import { IconButton } from "@vibe/core"; - Icon button will always appear with a tooltip while + Icon button will always appear with a tooltip while hovering, defining the icon’s meaning. , "Use an icon button when a user can perform an inline action on this page and there's no room for a default button.", @@ -99,7 +99,7 @@ Set disable button for something that isn’t usable. Use a tooltip on hover in description: ( <> Don’t use Icon button as the main action on the page. Instead, use the{" "} - Button component with an icon. + Button component with an icon. ) } diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.helpers.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.helpers.tsx index 0b69a83760..dbf03ebdb1 100644 --- a/packages/core/src/components/IconButton/__stories__/IconButton.stories.helpers.tsx +++ b/packages/core/src/components/IconButton/__stories__/IconButton.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipCheckYourself = () => ( To display icons that do not have actions associated with them, use the{" "} - + Icon component . @@ -14,7 +14,7 @@ export const TipCheckYourself = () => ( export const TipMenuButton = () => ( If you need to use an icon as a button that opens dialog or menu next to it, check out{" "} - + Menu button {" "} component. diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx index 2d61897b70..466413f079 100644 --- a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx +++ b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx @@ -23,7 +23,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const iconButtonTemplate = createComponentTemplate(IconButton); export default { - title: "Buttons/IconButton", + title: "Components/IconButton", component: IconButton, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Label/__stories__/Label.mdx b/packages/core/src/components/Label/__stories__/Label.mdx index 490fc5a4d5..a8f0629505 100644 --- a/packages/core/src/components/Label/__stories__/Label.mdx +++ b/packages/core/src/components/Label/__stories__/Label.mdx @@ -80,7 +80,7 @@ Label can appear in 2 sizes: small and medium. description: ( <> Don’t use the label component in order to indicate numbers, instead use the{" "} - Counter. + Counter. ) } @@ -109,7 +109,7 @@ Label can appear in 2 sizes: small and medium. description: ( <> Don’t use multiple labels for one item. Instead, use{" "} - Chips. + Chips. ) } diff --git a/packages/core/src/components/Label/__stories__/Label.stories.helpers.tsx b/packages/core/src/components/Label/__stories__/Label.stories.helpers.tsx index 1c5c64a399..25f37d7dc2 100644 --- a/packages/core/src/components/Label/__stories__/Label.stories.helpers.tsx +++ b/packages/core/src/components/Label/__stories__/Label.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipCheckYourself = () => ( Need to count or indicate numbers? Use the{" "} - + Counter {" "} component instead. diff --git a/packages/core/src/components/Label/__stories__/Label.stories.tsx b/packages/core/src/components/Label/__stories__/Label.stories.tsx index e064767fbf..0b03437333 100644 --- a/packages/core/src/components/Label/__stories__/Label.stories.tsx +++ b/packages/core/src/components/Label/__stories__/Label.stories.tsx @@ -15,7 +15,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Data display/Label", + title: "Components/Label", component: Label, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Link/__stories__/Link.stories.helpers.tsx b/packages/core/src/components/Link/__stories__/Link.stories.helpers.tsx index 9aecfdc8ce..67d23a7716 100644 --- a/packages/core/src/components/Link/__stories__/Link.stories.helpers.tsx +++ b/packages/core/src/components/Link/__stories__/Link.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipButton = () => ( If you need an action that does not have context with text{" "} - + Button . diff --git a/packages/core/src/components/Link/__stories__/Link.stories.tsx b/packages/core/src/components/Link/__stories__/Link.stories.tsx index 1c3b3d20ba..44836e8f22 100644 --- a/packages/core/src/components/Link/__stories__/Link.stories.tsx +++ b/packages/core/src/components/Link/__stories__/Link.stories.tsx @@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/Link", + title: "Components/Link", component: Link, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/List/__stories__/List.mdx b/packages/core/src/components/List/__stories__/List.mdx index 284c9c7ebc..cfded348ba 100644 --- a/packages/core/src/components/List/__stories__/List.mdx +++ b/packages/core/src/components/List/__stories__/List.mdx @@ -144,7 +144,7 @@ better user experience. description: ( <> Do not use the list to implement a menu displayed inside a dialog. See{" "} - Menu. + Menu. ) } diff --git a/packages/core/src/components/List/__stories__/List.stories.helpers.tsx b/packages/core/src/components/List/__stories__/List.stories.helpers.tsx index bb5930fbcb..722d7cabee 100644 --- a/packages/core/src/components/List/__stories__/List.stories.helpers.tsx +++ b/packages/core/src/components/List/__stories__/List.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipCheckYourself = () => ( For implementing a menu inside a dialog, please use our{" "} - + Menu {" "} component diff --git a/packages/core/src/components/List/__stories__/List.stories.tsx b/packages/core/src/components/List/__stories__/List.stories.tsx index cf0ce2b1e3..fe717e58f1 100644 --- a/packages/core/src/components/List/__stories__/List.stories.tsx +++ b/packages/core/src/components/List/__stories__/List.stories.tsx @@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/List/List", + title: "Components/List/List", component: List, subcomponents: { ListItem, diff --git a/packages/core/src/components/ListItem/__stories__/ListItem.stories.tsx b/packages/core/src/components/ListItem/__stories__/ListItem.stories.tsx index b1bd75deb2..c97111e638 100644 --- a/packages/core/src/components/ListItem/__stories__/ListItem.stories.tsx +++ b/packages/core/src/components/ListItem/__stories__/ListItem.stories.tsx @@ -12,7 +12,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/List/ListItem", + title: "Components/List/ListItem", component: ListItem, subcomponents: { ListItemIcon, diff --git a/packages/core/src/components/Loader/__stories__/Loader.stories.helpers.tsx b/packages/core/src/components/Loader/__stories__/Loader.stories.helpers.tsx index 398ebe84de..b0f1bbeb72 100644 --- a/packages/core/src/components/Loader/__stories__/Loader.stories.helpers.tsx +++ b/packages/core/src/components/Loader/__stories__/Loader.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipSkeleton = () => ( While loading content consider using{" "} - + Skeleton loading diff --git a/packages/core/src/components/Loader/__stories__/Loader.stories.tsx b/packages/core/src/components/Loader/__stories__/Loader.stories.tsx index 91b819e220..3d2e794a9c 100644 --- a/packages/core/src/components/Loader/__stories__/Loader.stories.tsx +++ b/packages/core/src/components/Loader/__stories__/Loader.stories.tsx @@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Feedback/Loader", + title: "Components/Loader", component: Loader, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Menu/Menu/__stories__/Menu.mdx b/packages/core/src/components/Menu/Menu/__stories__/Menu.mdx index 560965bc80..1e18bc930d 100644 --- a/packages/core/src/components/Menu/Menu/__stories__/Menu.mdx +++ b/packages/core/src/components/Menu/Menu/__stories__/Menu.mdx @@ -81,7 +81,7 @@ import { Menu } from "@vibe/core"; description: ( <> Don’t place a search component near to menu for implement a filter capability. See{" "} - Combobox. + Combobox. ) } diff --git a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx index 3e1ca323bb..79032b6149 100644 --- a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx +++ b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx @@ -10,7 +10,7 @@ import React from "react"; export const TipCombobox = () => ( Need to place a search field to filter results? Use the{" "} - + Combobox {" "} component instead diff --git a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx index bece9ee39b..21b0e1a2d2 100644 --- a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx +++ b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx @@ -7,7 +7,7 @@ import styles from "./Menu.stories.module.scss"; import { MenuProps } from "../../.."; export default { - title: "Navigation/Menu/Menu", + title: "Components/Menu/Menu", component: Menu }; diff --git a/packages/core/src/components/Menu/MenuDivider/__stories__/MenuDivider.stories.tsx b/packages/core/src/components/Menu/MenuDivider/__stories__/MenuDivider.stories.tsx index 62a5b2ce61..2323d80faf 100644 --- a/packages/core/src/components/Menu/MenuDivider/__stories__/MenuDivider.stories.tsx +++ b/packages/core/src/components/Menu/MenuDivider/__stories__/MenuDivider.stories.tsx @@ -5,7 +5,7 @@ import Menu from "../../Menu/Menu"; import MenuItem from "../../MenuItem/MenuItem"; export default { - title: "Navigation/Menu/MenuDivider", + title: "Components/Menu/MenuDivider", component: MenuDivider }; diff --git a/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.tsx b/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.tsx index 80e127b62c..e338018fe1 100644 --- a/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.tsx +++ b/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.tsx @@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/Menu/MenuGridItem", + title: "Components/Menu/MenuGridItem", component: MenuGridItem, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx b/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx index efffe7a35e..4299f214a8 100644 --- a/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx +++ b/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx @@ -13,7 +13,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/Menu/MenuItem", + title: "Components/Menu/MenuItem", component: MenuItem, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Menu/MenuItemButton/__stories__/MenuItemButton.stories.tsx b/packages/core/src/components/Menu/MenuItemButton/__stories__/MenuItemButton.stories.tsx index 522aee6422..d5a2af1765 100644 --- a/packages/core/src/components/Menu/MenuItemButton/__stories__/MenuItemButton.stories.tsx +++ b/packages/core/src/components/Menu/MenuItemButton/__stories__/MenuItemButton.stories.tsx @@ -13,7 +13,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const menuItemButtonTemplate = createComponentTemplate(MenuItemButton); export default { - title: "Navigation/Menu/MenuItemButton", + title: "Components/Menu/MenuItemButton", component: MenuItemButton, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Menu/MenuTitle/__stories__/MenuTitle.stories.tsx b/packages/core/src/components/Menu/MenuTitle/__stories__/MenuTitle.stories.tsx index a86746f914..0e850fc85c 100644 --- a/packages/core/src/components/Menu/MenuTitle/__stories__/MenuTitle.stories.tsx +++ b/packages/core/src/components/Menu/MenuTitle/__stories__/MenuTitle.stories.tsx @@ -10,7 +10,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/Menu/MenuTitle", + title: "Components/Menu/MenuTitle", component: MenuTitle, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx index e58c3a3ea1..66bc58fd7a 100644 --- a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx +++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx @@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Buttons/MenuButton", + title: "Components/MenuButton", component: MenuButton, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx b/packages/core/src/components/Modal/__stories__/Modal.stories.tsx index 3b215c8dc8..50c264c961 100644 --- a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx +++ b/packages/core/src/components/Modal/__stories__/Modal.stories.tsx @@ -53,7 +53,7 @@ const modalTemplate = ({ onClose, ...modalProps }: ModalProps) => { }; export default { - title: "Feedback/Modal", + title: "Components/Modal", component: Modal, subcomponents: { ModalHeader, diff --git a/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.helpers.tsx b/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.helpers.tsx index 4ca1e1f60d..597947f365 100644 --- a/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.helpers.tsx +++ b/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.helpers.tsx @@ -59,11 +59,11 @@ export const thirdSteps: Step[] = [ export const TipNotWhatYouAreLookingFor = () => ( In order to navigate between content without a linear progress, use the{" "} - + Tabs {" "} or{" "} - + Button group {" "} component. diff --git a/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx b/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx index 48ae8db78b..2ae0e2f9dc 100644 --- a/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx +++ b/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx @@ -9,7 +9,7 @@ import "./MultiStepIndicator.stories.scss"; import { Step } from "../MultiStep.types"; export default { - title: "Navigation/MultiStepIndicator", + title: "Components/MultiStepIndicator", component: MultiStepIndicator }; diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.helpers.tsx b/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.helpers.tsx index 362237f4eb..f03929df96 100644 --- a/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.helpers.tsx +++ b/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.helpers.tsx @@ -6,7 +6,7 @@ import LinearProgressBar from "../LinearProgressBar"; export const TipMultiStepIndicator = () => ( If you need to lead a user through a progress, use the{" "} - + MultiStepIndicator {" "} instead. diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.tsx b/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.tsx index 931d315370..b605b88c51 100644 --- a/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.tsx +++ b/packages/core/src/components/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.tsx @@ -13,7 +13,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Feedback/LinearProgressBar", + title: "Components/LinearProgressBar", component: LinearProgressBar, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/RadioButton/__stories__/RadioButton.mdx b/packages/core/src/components/RadioButton/__stories__/RadioButton.mdx index 131281bb20..66131659f0 100644 --- a/packages/core/src/components/RadioButton/__stories__/RadioButton.mdx +++ b/packages/core/src/components/RadioButton/__stories__/RadioButton.mdx @@ -79,7 +79,7 @@ Radio buttons have 3 states: regular, selected, and disabled. description: ( <> Don't use radio buttons when allowing the user to select more than one item from a list. In this case, use{" "} - checkboxes instead. + checkboxes instead. ) } @@ -106,7 +106,7 @@ Radio buttons have 3 states: regular, selected, and disabled. description: ( <> Don’t leave all radio buttons unselcted. If you can’t offer a smart default, consider using the{" "} - dropdown component. + dropdown component. ) } diff --git a/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.helpers.tsx b/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.helpers.tsx index 02ac653a69..aae3e0b232 100644 --- a/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.helpers.tsx +++ b/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipDropdown = () => ( When there’s limited space or no default selection, consider using a select{" "} - + Dropdown {" "} instead. diff --git a/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.tsx b/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.tsx index b51a60c79a..db308bb032 100644 --- a/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.tsx +++ b/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.tsx @@ -9,7 +9,7 @@ import Button from "../../Button/Button"; const radioButtonTemplate = createComponentTemplate(RadioButton); export default { - title: "Inputs/RadioButton", + title: "Components/RadioButton", component: RadioButton }; diff --git a/packages/core/src/components/Search/__stories__/Search.mdx b/packages/core/src/components/Search/__stories__/Search.mdx index 716ab8f781..25dcb2c169 100644 --- a/packages/core/src/components/Search/__stories__/Search.mdx +++ b/packages/core/src/components/Search/__stories__/Search.mdx @@ -54,7 +54,7 @@ import { Search } from "@vibe/core"; If you need to filter results from a long list, consider using the - + Combobox component. diff --git a/packages/core/src/components/Search/__stories__/Search.stories.tsx b/packages/core/src/components/Search/__stories__/Search.stories.tsx index 3185208744..837bae52c4 100644 --- a/packages/core/src/components/Search/__stories__/Search.stories.tsx +++ b/packages/core/src/components/Search/__stories__/Search.stories.tsx @@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const searchTemplate = createComponentTemplate(Search); export default { - title: "Inputs/Search", + title: "Components/Search", component: Search, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.helpers.tsx b/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.helpers.tsx index 4d6fd466ff..8b1191a537 100644 --- a/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.helpers.tsx +++ b/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipLoader = () => ( Using loader after the pages are fully loaded consider using the{" "} - + loader component. diff --git a/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.tsx b/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.tsx index fb58c43fbe..b109b76056 100644 --- a/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.tsx +++ b/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.tsx @@ -8,7 +8,7 @@ import "./Skeleton.stories.scss"; import { Flex } from "../../Flex"; export default { - title: "Feedback/Skeleton", + title: "Components/Skeleton", component: Skeleton }; diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.helpers.tsx b/packages/core/src/components/Slider/__stories__/Slider.stories.helpers.tsx index 130f0638d1..0ab6d24357 100644 --- a/packages/core/src/components/Slider/__stories__/Slider.stories.helpers.tsx +++ b/packages/core/src/components/Slider/__stories__/Slider.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipMultiStepIndicator = () => ( If you need to visualize progress use{" "} - + MultiStepIndicator {" "} component instead diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.tsx b/packages/core/src/components/Slider/__stories__/Slider.stories.tsx index 7bfda0726d..ad92bb7897 100644 --- a/packages/core/src/components/Slider/__stories__/Slider.stories.tsx +++ b/packages/core/src/components/Slider/__stories__/Slider.stories.tsx @@ -11,7 +11,7 @@ const argTypes = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/Slider", + title: "Components/Slider", component: Slider, argTypes: argTypes }; diff --git a/packages/core/src/components/SplitButton/__stories__/SplitButton.mdx b/packages/core/src/components/SplitButton/__stories__/SplitButton.mdx index 7fafd20b96..a961beeb90 100644 --- a/packages/core/src/components/SplitButton/__stories__/SplitButton.mdx +++ b/packages/core/src/components/SplitButton/__stories__/SplitButton.mdx @@ -114,7 +114,8 @@ The split button has supports multiple sizes: small, medium and large. description: ( <> Don’t use split button if there’s only one option within the menu. Use{" "} - Button instead (see example in the secondary dialog). + Button instead (see example in the secondary + dialog). ) } diff --git a/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.helpers.tsx b/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.helpers.tsx index 7fa56ed88d..bbe66796d3 100644 --- a/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.helpers.tsx +++ b/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.helpers.tsx @@ -7,7 +7,7 @@ import React from "react"; export const TipMenu = () => ( If the actions in the menu are not related to each other, consider using a{" "} - + Menu {" "} component. diff --git a/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.tsx b/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.tsx index a240d9d43b..326f5cadf8 100644 --- a/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.tsx +++ b/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.tsx @@ -19,7 +19,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Buttons/SplitButton", + title: "Components/SplitButton", component: SplitButton, subcomponents: { diff --git a/packages/core/src/components/Steps/__stories__/Steps.stories.tsx b/packages/core/src/components/Steps/__stories__/Steps.stories.tsx index 162c4edb22..392790fcda 100644 --- a/packages/core/src/components/Steps/__stories__/Steps.stories.tsx +++ b/packages/core/src/components/Steps/__stories__/Steps.stories.tsx @@ -15,7 +15,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ const steps5 = [
,
,
,
,
]; export default { - title: "Data display/Steps", + title: "Components/Steps", component: Steps, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx index 153829d146..b332839cf4 100644 --- a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx +++ b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx @@ -32,7 +32,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Data display/Table", + title: "Components/Table", component: Table, subcomponents: { TableHeader, diff --git a/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx b/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx index a811c01bdd..acdf75c623 100644 --- a/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx +++ b/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx @@ -4,7 +4,7 @@ import Tab from "../../Tab/Tab"; import { Email } from "@vibe/icons"; export default { - title: "Navigation/Tabs/Tab", + title: "Components/Tabs/Tab", component: Tab }; diff --git a/packages/core/src/components/Tabs/TabList/__stories__/TabList.stories.tsx b/packages/core/src/components/Tabs/TabList/__stories__/TabList.stories.tsx index 3a5a90139f..0d2ad40a12 100644 --- a/packages/core/src/components/Tabs/TabList/__stories__/TabList.stories.tsx +++ b/packages/core/src/components/Tabs/TabList/__stories__/TabList.stories.tsx @@ -5,7 +5,7 @@ import { Flex } from "../../../Flex"; import { Heading } from "../../../Heading"; export default { - title: "Navigation/Tabs/TabList", + title: "Components/Tabs/TabList", component: TabList }; diff --git a/packages/core/src/components/Tabs/TabPanel/__stories__/TabPanel.stories.tsx b/packages/core/src/components/Tabs/TabPanel/__stories__/TabPanel.stories.tsx index 8ae4d4a7b9..aa29a1d8c7 100644 --- a/packages/core/src/components/Tabs/TabPanel/__stories__/TabPanel.stories.tsx +++ b/packages/core/src/components/Tabs/TabPanel/__stories__/TabPanel.stories.tsx @@ -2,7 +2,7 @@ import { createComponentTemplate } from "vibe-storybook-components"; import TabPanel from "../TabPanel"; export default { - title: "Navigation/Tabs/TabPanel", + title: "Components/Tabs/TabPanel", component: TabPanel }; diff --git a/packages/core/src/components/Tabs/TabPanels/__stories__/TabPanels.stories.tsx b/packages/core/src/components/Tabs/TabPanels/__stories__/TabPanels.stories.tsx index be4705ad97..70cb11cea3 100644 --- a/packages/core/src/components/Tabs/TabPanels/__stories__/TabPanels.stories.tsx +++ b/packages/core/src/components/Tabs/TabPanels/__stories__/TabPanels.stories.tsx @@ -8,7 +8,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Navigation/Tabs/TabPanels", + title: "Components/Tabs/TabPanels", component: TabPanels, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Tabs/__stories__/Tabs.stories.helpers.tsx b/packages/core/src/components/Tabs/__stories__/Tabs.stories.helpers.tsx index c0822c857e..185207c7ab 100644 --- a/packages/core/src/components/Tabs/__stories__/Tabs.stories.helpers.tsx +++ b/packages/core/src/components/Tabs/__stories__/Tabs.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipButtonGroup = () => ( Use tabs to navigate between different contents, if switching between states within the same content use{" "} - + Button group {" "} instead diff --git a/packages/core/src/components/Tabs/__stories__/Tabs.stories.tsx b/packages/core/src/components/Tabs/__stories__/Tabs.stories.tsx index a87f92f1fa..ea4cae6429 100644 --- a/packages/core/src/components/Tabs/__stories__/Tabs.stories.tsx +++ b/packages/core/src/components/Tabs/__stories__/Tabs.stories.tsx @@ -16,7 +16,7 @@ const ExampleTabContent = ({ children }: { children: string }) => ( ); export default { - title: "Navigation/Tabs/Tabs", + title: "Components/Tabs/Tabs", component: Tab, subcomponents: { TabPanel, diff --git a/packages/core/src/components/Text/__stories__/Text.stories.helpers.tsx b/packages/core/src/components/Text/__stories__/Text.stories.helpers.tsx index 171443d3ea..4a387b8bb9 100644 --- a/packages/core/src/components/Text/__stories__/Text.stories.helpers.tsx +++ b/packages/core/src/components/Text/__stories__/Text.stories.helpers.tsx @@ -14,7 +14,7 @@ export const TipHeading = () => ( export const TipLink = () => ( If you need to place a link outside of the textual flow, please use our{" "} - + Link {" "} component. diff --git a/packages/core/src/components/TextArea/__stories__/TextArea.stories.tsx b/packages/core/src/components/TextArea/__stories__/TextArea.stories.tsx index 55a42ea397..6f79e92271 100644 --- a/packages/core/src/components/TextArea/__stories__/TextArea.stories.tsx +++ b/packages/core/src/components/TextArea/__stories__/TextArea.stories.tsx @@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/TextArea", + title: "Components/TextArea", component: TextArea, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx index de9556ee7e..630d2075de 100644 --- a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx +++ b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx @@ -15,7 +15,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/TextField", + title: "Components/TextField", component: TextField, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx b/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx index 6ea807a1bf..a7a5efa012 100644 --- a/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx +++ b/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx @@ -173,8 +173,8 @@ In this case, the Tipseen position will be the right corner of the screen and wi description: ( <> Don’t use tipseen to provide additional information on a familiar UI. Use a{" "} - Tooltip or{" "} - Attention box instead. + Tooltip or{" "} + Attention box instead. ) } diff --git a/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.helpers.tsx b/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.helpers.tsx index f2406a8985..1c7af85c68 100644 --- a/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.helpers.tsx +++ b/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.helpers.tsx @@ -28,11 +28,11 @@ export const wizardContent = [ export const TipCheckYourself = () => ( If you need to provide additional information about a component, use the{" "} - + Tooltip {" "} or{" "} - + Attention box. diff --git a/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx b/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx index 189ac4c251..bf29b1db6d 100644 --- a/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx +++ b/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx @@ -14,7 +14,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Popover/Tipseen", + title: "Components/Tipseen", component: Tipseen, subcomponents: { TipseenMedia, diff --git a/packages/core/src/components/Toast/__stories__/Toast.stories.helpers.tsx b/packages/core/src/components/Toast/__stories__/Toast.stories.helpers.tsx index 81f6a1686a..62a1337e88 100644 --- a/packages/core/src/components/Toast/__stories__/Toast.stories.helpers.tsx +++ b/packages/core/src/components/Toast/__stories__/Toast.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipAlertBanner = () => ( Need to inform the user about a system’s action? Use an{" "} - + AlertBanner {" "} instead. diff --git a/packages/core/src/components/Toast/__stories__/Toast.stories.tsx b/packages/core/src/components/Toast/__stories__/Toast.stories.tsx index 5011f61928..a1f4356251 100644 --- a/packages/core/src/components/Toast/__stories__/Toast.stories.tsx +++ b/packages/core/src/components/Toast/__stories__/Toast.stories.tsx @@ -13,7 +13,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Feedback/Toast", + title: "Components/Toast", component: Toast, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.mdx b/packages/core/src/components/Toggle/__stories__/Toggle.mdx index 5d45402b07..194e2df7fa 100644 --- a/packages/core/src/components/Toggle/__stories__/Toggle.mdx +++ b/packages/core/src/components/Toggle/__stories__/Toggle.mdx @@ -47,7 +47,7 @@ import { Toggle } from "@vibe/core"; "Let users know what happens when the toggle is switched by using a tooltip.", <> Toggle can either be selected or not selected. They cannot be in an indeterminate state (unlike{" "} - checkboxes). + checkboxes). , "Use labels such as “on” and “off” or “enable” and “disable” to communicate the state of the toggle." ]} @@ -93,8 +93,8 @@ Toggle appear in 2 sizes: small and medium. description: ( <> Don’t use toggle for configurations. Instead, use{" "} - Checkboxes or{" "} - Radio buttons.{" "} + Checkboxes or{" "} + Radio buttons.{" "} ) } diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.stories.helpers.tsx b/packages/core/src/components/Toggle/__stories__/Toggle.stories.helpers.tsx index 55316aef22..deb9c35edd 100644 --- a/packages/core/src/components/Toggle/__stories__/Toggle.stories.helpers.tsx +++ b/packages/core/src/components/Toggle/__stories__/Toggle.stories.helpers.tsx @@ -4,11 +4,11 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipOtherComponents = () => ( If the user needs to choose an item from a set of options, use{" "} - + Radio button {" "} or{" "} - + Checkboxes {" "} instead. diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx index 54a92a52ca..4a4e4d5d1d 100644 --- a/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx +++ b/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx @@ -13,7 +13,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Inputs/Toggle", + title: "Components/Toggle", component: Toggle, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.helpers.tsx b/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.helpers.tsx index 971fd7c28a..4639c02e4f 100644 --- a/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.helpers.tsx +++ b/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.helpers.tsx @@ -21,11 +21,11 @@ export const TipOtherComponents = () => ( As tooltips only surface from a hover, never include links or buttons in the copy. If your tooltip requires either of these, considers putting your content in a{" "} - + Attention box {" "} or{" "} - + Dialog. diff --git a/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx b/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx index fbc7835c45..db5465f95a 100644 --- a/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx +++ b/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx @@ -15,7 +15,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Popover/Tooltip", + title: "Components/Tooltip", component: Tooltip, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators diff --git a/packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.js b/packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.js index bfae2e85f2..0e0426fd02 100644 --- a/packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.js +++ b/packages/core/src/components/VirtualizedGrid/__stories__/VirtualizedGrid.stories.js @@ -4,7 +4,7 @@ import Button from "../../Button/Button"; import { generateItems, itemRenderer } from "./VirtualizedGrid.stories.helpers"; export default { - title: "Navigation/VirtualizedGrid", + title: "Components/VirtualizedGrid", component: VirtualizedGrid }; diff --git a/packages/core/src/components/VirtualizedList/__stories__/VirtualizedList.stories.js b/packages/core/src/components/VirtualizedList/__stories__/VirtualizedList.stories.js index 6ea01a39ea..f9b27ac29a 100644 --- a/packages/core/src/components/VirtualizedList/__stories__/VirtualizedList.stories.js +++ b/packages/core/src/components/VirtualizedList/__stories__/VirtualizedList.stories.js @@ -5,7 +5,7 @@ import { Flex } from "../../"; import styles from "./VirtualizedList.module.scss"; export default { - title: "Navigation/VirtualizedList", + title: "Components/VirtualizedList", component: VirtualizedList }; diff --git a/packages/core/src/hooks/useIsOverflowing/__stories__/useIsOverflowing.stories.helpers.tsx b/packages/core/src/hooks/useIsOverflowing/__stories__/useIsOverflowing.stories.helpers.tsx index e2ecf37a57..d9d5276f07 100644 --- a/packages/core/src/hooks/useIsOverflowing/__stories__/useIsOverflowing.stories.helpers.tsx +++ b/packages/core/src/hooks/useIsOverflowing/__stories__/useIsOverflowing.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const TipTooltip = () => ( You might want to use{" "} - + Tooltip {" "} to display all the content. diff --git a/packages/core/src/storybook/stand-alone-documentaion/colors/colors.stories.tsx b/packages/core/src/storybook/stand-alone-documentaion/colors/colors.stories.tsx index d635c0acdf..d450913b2f 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/colors/colors.stories.tsx +++ b/packages/core/src/storybook/stand-alone-documentaion/colors/colors.stories.tsx @@ -6,7 +6,8 @@ import { BorderColors } from "./border-colors/border-colors"; import { ContentColors } from "./content-colors/content-colors"; const meta: Meta = { - title: "Foundations/Colors" + title: "Foundations/Colors", + tags: ["internal"] }; export default meta; diff --git a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx index 88a844ee18..03fdf41318 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx +++ b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx @@ -51,7 +51,7 @@ By removing CommonJS support, dividing the library into packages, and optimizing ### New Typography System -New and improved Heading, EditableHeading components. For more info, check the [Typography](#typography) section. +New and improved Heading, EditableHeading components. For more info, check the [Typography](#typography) section. ### Enhanced Typescript Support @@ -185,16 +185,16 @@ For more information, refer to the The following components have been **removed** and are no longer available: -- `Input` - use TextField instead -- `EditableInput` - use EditableText instead -- `SearchComponent` - use Search instead +- `Input` - use TextField instead +- `EditableInput` - use EditableText instead +- `SearchComponent` - use Search instead - `ResponsiveList` - use useIsOverflowing hook instead, to show/hide content based on overflow These components were **rewritten from scratch** with new API and style, offering better accessibility and usability: - Heading -- EditableHeading -- Search +- EditableHeading +- Search Make sure to import them from `@vibe/core` instead of the `/next` entry: diff --git a/packages/core/src/storybook/stand-alone-documentaion/spacing/spacing.stories.tsx b/packages/core/src/storybook/stand-alone-documentaion/spacing/spacing.stories.tsx index 1e255bce1c..308e64b819 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/spacing/spacing.stories.tsx +++ b/packages/core/src/storybook/stand-alone-documentaion/spacing/spacing.stories.tsx @@ -2,7 +2,8 @@ import { SpacingSizes } from "./spacing-sizes/spacing-sizes"; import { StoryObj, Meta } from "@storybook/react"; const meta: Meta = { - title: "Foundations/Spacing" + title: "Foundations/Spacing", + tags: ["internal"] }; export default meta; diff --git a/packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Founders.tsx b/packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Founders.tsx index 342b5ca295..19c012eaac 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Founders.tsx +++ b/packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Founders.tsx @@ -4,8 +4,6 @@ import Evgeniy from "../assets/contributors/Evgeniy.png"; import Orr from "../assets/contributors/Orr.png"; import Meytal from "../assets/contributors/Meytal.png"; import styles from "./Founders.module.scss"; -import Flex from "../../../../components/Flex/Flex"; -import Icon from "../../../../components/Icon/Icon"; const FOUNDERS = [ { diff --git a/packages/testkit/__TESTS__/utils/url-helper.js b/packages/testkit/__TESTS__/utils/url-helper.js index 22817cb5a6..ed2c8c73c7 100644 --- a/packages/testkit/__TESTS__/utils/url-helper.js +++ b/packages/testkit/__TESTS__/utils/url-helper.js @@ -1,8 +1,7 @@ -export const buttonStory = "/?path=/story/buttons-button--overview"; -export const buttonGroupStory = "/?path=/story/buttons-buttongroup--overview"; -export const checkboxStory = "/?path=/story/inputs-checkbox--overview"; -export const dropdownStory = "/?path=/story/inputs-dropdown--overview"; -export const menuButtonStory = "/?path=/story/buttons-menubutton--overview"; -export const textAreaStory = "/?path=/story/inputs-textarea--overview"; -export const textfieldStory = "/?path=/story/inputs-textfield--overview"; - +export const buttonStory = "/?path=/story/components-button--overview"; +export const buttonGroupStory = "/?path=/story/components-buttongroup--overview"; +export const checkboxStory = "/?path=/story/components-checkbox--overview"; +export const dropdownStory = "/?path=/story/components-dropdown--overview"; +export const menuButtonStory = "/?path=/story/components-menubutton--overview"; +export const textAreaStory = "/?path=/story/components-textarea--overview"; +export const textfieldStory = "/?path=/story/components-textfield--overview";