diff --git a/docs/guide/02-theme.md b/docs/guide/02-theme.md index a9db7ff..c577fdc 100644 --- a/docs/guide/02-theme.md +++ b/docs/guide/02-theme.md @@ -31,9 +31,9 @@ The code might look like this: ...}> - + - + diff --git a/docs/haring-react/components/action-bar.mdx b/docs/haring-react/components/action-bar.mdx index 874426d..0737dd0 100644 --- a/docs/haring-react/components/action-bar.mdx +++ b/docs/haring-react/components/action-bar.mdx @@ -5,7 +5,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo'; , }, @@ -31,9 +31,9 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo'; ## Props -ActionBar takes a `` generic type that extends `Record`, to be used by [ActionRowOverflow](./action-row-overflow). +ActionBar takes a `` generic type that extends `Record`, to be used by [ActionList](./action-row-overflow). | Name | Type | Default | Description | | --------------------------------- | -------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | selectedElementsLabel | `(selectedElements: number) => string` | ``(selectedElements: number) => `${selectedElements} file(s) selected`` | Function used to generate the string that displays how many elements are currently selected, it gives the current number of elements in the `selectedElements` array as a parameter | -| ... | - | - | extends [`ActionRowOverflow props`](./action-row-overflow#props) | +| ... | - | - | extends [`ActionList props`](./action-row-overflow#props) | diff --git a/docs/haring-react/components/action-row-overflow.mdx b/docs/haring-react/components/action-list.mdx similarity index 93% rename from docs/haring-react/components/action-row-overflow.mdx rename to docs/haring-react/components/action-list.mdx index 8736f6e..42b2bae 100644 --- a/docs/haring-react/components/action-row-overflow.mdx +++ b/docs/haring-react/components/action-list.mdx @@ -1,4 +1,4 @@ -# Action Row Overflow +# Action List Renders an array of [`IAction`s](../../shared-types/actions#iactiont) as [ActionIcons](https://v6.mantine.dev/core/action-icon/), with an option to @@ -24,10 +24,7 @@ ## Storybook Docs - + ## Props diff --git a/docs/haring-react/components/button-list-or-dropdown.mdx b/docs/haring-react/components/button-list.mdx similarity index 73% rename from docs/haring-react/components/button-list-or-dropdown.mdx rename to docs/haring-react/components/button-list.mdx index 3052c7a..806b6e2 100644 --- a/docs/haring-react/components/button-list-or-dropdown.mdx +++ b/docs/haring-react/components/button-list.mdx @@ -1,6 +1,6 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo'; -# Button list or dropdown +# Button list - ButtonListOrDropdown component displays a list of buttons. When the number of - buttons exceeds a specified threshold (controlled by the maxButtonItems prop), - the component dynamically transforms into a dropdown menu. + ButtonList component displays a list of buttons. When the number of buttons + exceeds a specified threshold (controlled by the maxButtonItems prop), the + component dynamically transforms into a dropdown menu. ## Storybook Docs - + ## Props -| Name | Type | Default | Description | -| -------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -| defaultCurrent | `string` | - | The default selected value | -| items | `IItems` | - | Is the list of items of type `IItems` | -| maxButtonItems | `number` | `0` | The value of the maximum number to display. If the number is exceeded, the button list transforms into a dropdown menu | -| buttonProps | `ButtonProps` | - | Props extend from the Mantine [Button](https://v6.mantine.dev/core/button/) component, used to modify the buttons of ButtonListOrDropdown component | -| current | `string` | - | Currently selected value. Props used to make the component controlled | -| onAction | `(() => void)` | - | Function called each time an item is clicked | -| .... | | - | Extend props from the Mantine [Menu](https://v6.mantine.dev/core/menu/) component. Used to modify Menu component | +| Name | Type | Default | Description | +| -------------------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| defaultCurrent | `string` | - | The default selected value | +| items | `IItems` | - | Is the list of items of type `IItems` | +| maxButtonItems | `number` | `0` | The value of the maximum number to display. If the number is exceeded, the button list transforms into a dropdown menu | +| buttonProps | `ButtonProps` | - | Props extend from the Mantine [Button](https://v6.mantine.dev/core/button/) component, used to modify the buttons of ButtonList component | +| current | `string` | - | Currently selected value. Props used to make the component controlled | +| onAction | `(() => void)` | - | Function called each time an item is clicked | +| .... | | - | Extend props from the Mantine [Menu](https://v6.mantine.dev/core/menu/) component. Used to modify Menu component | diff --git a/docs/haring-react/components/filter-list.mdx b/docs/haring-react/components/filter-list.mdx index 3c39868..4a99c51 100644 --- a/docs/haring-react/components/filter-list.mdx +++ b/docs/haring-react/components/filter-list.mdx @@ -15,8 +15,8 @@ link: 'https://v6.mantine.dev/core/modal/', }, { - label: 'SearchableCheckboxList', - link: 'https://smile-sa.github.io/haring/?path=/docs/3-custom-components-searchablecheckboxlist--docs', + label: 'SearchableList', + link: 'https://smile-sa.github.io/haring/?path=/docs/3-custom-components-SearchableList--docs', }, ]} importExample="import { FilterList } from '@smile/haring-react';" @@ -31,7 +31,7 @@ > Renders a list of filters with text inputs and a manage filters button which displays the component - [SearchableCheckboxList](../components/searchable-checkbox-list) + [SearchableList](../components/searchable-checkbox-list) ## Storybook Docs diff --git a/docs/haring-react/components/header-menu.mdx b/docs/haring-react/components/header-menu.mdx new file mode 100644 index 0000000..1628dbe --- /dev/null +++ b/docs/haring-react/components/header-menu.mdx @@ -0,0 +1,37 @@ +# Header Menu + + + Renders a list of menus as either a horizontal list of NavLink components or a + vertical SidebarMenu in mobile mode + + +## Storybook Docs + + + +## Props + +| Name | Type | Default | Description | +| ----------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| menus | `IHeaderMenuMenu[]` | - | Array of menu objets to be rendered in vertical or horizontal lists | +| isMobile | `boolean` | `false` | Determines if the menus will be displayed as a horizontal list of NavLink components (desktop) or as a vertical SidebarMenu (mobile) | +| navLinkComponent | `ElementType` | `"a"` | Type of Element tag used for the NavLink components | + +## IHeaderMenuMenu + +`IHeaderMenuMenu` has a generic `T` that extend of `number | string` and it extend of `IMenuItem` + +| Name | Type | Description | +| -------- | ---------------------- | ------------------------------------------------ | +| children | `IHeaderMenuMenu[]` | Object array to be rendered in a header sub-menu | +| url | `string` | the url of the navigation link | diff --git a/docs/haring-react/components/header-nav.mdx b/docs/haring-react/components/header-nav.mdx deleted file mode 100644 index 770e9a9..0000000 --- a/docs/haring-react/components/header-nav.mdx +++ /dev/null @@ -1,37 +0,0 @@ -# Header Nav - - - Renders a list of menus as either a horizontal list of NavLink components or a - vertical SidebarMenu in mobile mode - - -## Storybook Docs - - - -## Props - -| Name | Type | Default | Description | -| ----------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| menus | `IHeaderNavMenu[]` | - | Array of menu objets to be rendered in vertical or horizontal lists | -| isMobile | `boolean` | `false` | Determines if the menus will be displayed as a horizontal list of NavLink components (desktop) or as a vertical SidebarMenu (mobile) | -| navLinkComponent | `ElementType` | `"a"` | Type of Element tag used for the NavLink components | - -## IHeaderNavMenu - -`IHeaderNavMenu` has a generic `T` that extend of `number | string` and it extend of `IMenuItem` - -| Name | Type | Description | -| -------- | --------------------- | ------------------------------------------------ | -| children | `IHeaderNavMenu[]` | Object array to be rendered in a header sub-menu | -| url | `string` | the url of the navigation link | diff --git a/docs/haring-react/components/info-card.mdx b/docs/haring-react/components/info-box.mdx similarity index 91% rename from docs/haring-react/components/info-card.mdx rename to docs/haring-react/components/info-box.mdx index 2c28dc4..74f8f3f 100644 --- a/docs/haring-react/components/info-card.mdx +++ b/docs/haring-react/components/info-box.mdx @@ -1,23 +1,23 @@ -# Info Card +# Info Box Render a card with title, content, content blocks and background motif ## Storybook Docs - + ## Props diff --git a/docs/haring-react/components/menu-languages.mdx b/docs/haring-react/components/language-menu.mdx similarity index 61% rename from docs/haring-react/components/menu-languages.mdx rename to docs/haring-react/components/language-menu.mdx index 499374c..5de3212 100644 --- a/docs/haring-react/components/menu-languages.mdx +++ b/docs/haring-react/components/language-menu.mdx @@ -1,48 +1,45 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo'; -# Menu languages +# Language Menu , }, ]} - importExample="import { MenuLanguages } from '@smile/haring-react';" + importExample="import { LanguageMenu } from '@smile/haring-react';" packageInfo={{ label: '@smile/haring-react', link: 'https://www.npmjs.com/package/@smile/haring-react', }} sourceInfo={{ - link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/MenuLanguages/MenuLanguages.tsx', + link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/LanguageMenu/LanguageMenu.tsx', }} - storybookInfo="3-custom-components-menulanguages--docs" + storybookInfo="3-custom-components-languagemenu--docs" > - It inherits from the [ButtonListOrDropdown](./button-list-or-dropdown) - component. It displays a list of language buttons with or without flags in a - 4x3 or 1x1 format. When the number of buttons exceeds a specified threshold - (controlled by the maxButtonItems property), the component dynamically - transforms into a dropdown menu. + It inherits from the [ButtonList](./button-list-or-dropdown) component. It + displays a list of language buttons with or without flags in a 4x3 or 1x1 + format. When the number of buttons exceeds a specified threshold (controlled + by the maxButtonItems property), the component dynamically transforms into a + dropdown menu. ## Storybook Docs - + ## Props -MenuLanguages takes a `` generic type that extends `Record`, to be used by [ActionRowOverflow](./action-row-overflow). +LanguageMenu takes a `` generic type that extends `Record`, to be used by [ActionList](./action-row-overflow). | Name | Type | Default | Description | | --------------------- | --------- | ------- | -------------------------------------------------------------------------------------------- | | languages | `ILang[]` | - | Is the array of langs of type `ILang` displayed into the component | | squareFormat | `boolean` | `false` | Displays the default 4x3 format, If this prop is set to true, it shows flags in a 1x1 format | -| ... | | - | Extend props from [ButtonListOrDropdown](./button-list-or-dropdown) component | +| ... | | - | Extend props from [ButtonList](./button-list-or-dropdown) component | ## `ILang` diff --git a/docs/haring-react/components/searchable-checkbox-list.mdx b/docs/haring-react/components/searchable-list.mdx similarity index 87% rename from docs/haring-react/components/searchable-checkbox-list.mdx rename to docs/haring-react/components/searchable-list.mdx index 42214e5..6b22922 100644 --- a/docs/haring-react/components/searchable-checkbox-list.mdx +++ b/docs/haring-react/components/searchable-list.mdx @@ -1,16 +1,16 @@ -# Searchable Checkbox List +# Searchable List Renders a search bar with checkboxes and a validation button @@ -18,7 +18,7 @@ ## Storybook Docs