From 47ebf06e8ff50c138054831cf84a3b8c999692fb Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Thu, 12 Dec 2024 11:00:11 -0500 Subject: [PATCH 01/15] fix description of content, and make sure they are added to the page's metadata --- apps/docs/app/components/[...slug]/page.tsx | 17 +++++++++++------ .../docs/app/getting-started/[...slug]/page.tsx | 17 +++++++++++++++-- apps/docs/app/icons/[...slug]/page.tsx | 17 +++++++++++++++-- apps/docs/app/tokens/[...slug]/page.tsx | 13 ++++++++++--- .../components/concepts/controlled-mode.mdx | 1 + apps/docs/content/components/layout/Inline.mdx | 2 +- .../getting-started/overview/installation.mdx | 2 +- .../icons/SVG-icons/rich-icon-library.mdx | 2 +- .../icons/overview/designing-an-icon.mdx | 2 +- .../content/icons/overview/introduction.mdx | 2 +- .../content/icons/react-icons/icon-library.mdx | 2 +- .../icons/react-icons/rich-icon-library.mdx | 2 +- apps/docs/content/tokens/core/border-radius.mdx | 2 +- apps/docs/content/tokens/core/color.mdx | 2 +- apps/docs/content/tokens/core/dimensions.mdx | 2 +- apps/docs/content/tokens/core/font-family.mdx | 2 +- apps/docs/content/tokens/core/font-size.mdx | 2 +- apps/docs/content/tokens/core/font-weight.mdx | 2 +- apps/docs/content/tokens/core/line-height.mdx | 2 +- apps/docs/content/tokens/core/motion.mdx | 4 ++-- apps/docs/content/tokens/core/shadow.mdx | 2 +- apps/docs/content/tokens/semantic/color.mdx | 2 +- apps/docs/content/tokens/semantic/elevation.mdx | 2 +- apps/docs/content/tokens/semantic/shape.mdx | 2 +- apps/docs/content/tokens/semantic/space.mdx | 2 +- .../docs/content/tokens/semantic/typography.mdx | 2 +- .../src/HopperProvider/src/HopperProvider.tsx | 2 +- 27 files changed, 75 insertions(+), 36 deletions(-) diff --git a/apps/docs/app/components/[...slug]/page.tsx b/apps/docs/app/components/[...slug]/page.tsx index 83edce006..0a2194dcb 100644 --- a/apps/docs/app/components/[...slug]/page.tsx +++ b/apps/docs/app/components/[...slug]/page.tsx @@ -11,7 +11,7 @@ interface PageProps { }; } -async function findComponentFromSlug(params : { slug: string[] }) { +function findComponentFromSlug(params : { slug: string[] }) { const [type] = params.slug; const component = allComponents.find(x => x.slug === type); @@ -73,14 +73,19 @@ export default async function ComponentPage({ params }: PageProps) { } export async function generateMetadata({ params }: PageProps) { - const component = await findComponentFromSlug(params); + const component = findComponentFromSlug(params); if (component) { - const title = component?.title; - - return { - title: `${title}` + const metadata: Record = { + title: component.title }; + + if (component.description) { + metadata.description = component.description; + } + + + return metadata; } return { diff --git a/apps/docs/app/getting-started/[...slug]/page.tsx b/apps/docs/app/getting-started/[...slug]/page.tsx index a146f4842..03ef98541 100644 --- a/apps/docs/app/getting-started/[...slug]/page.tsx +++ b/apps/docs/app/getting-started/[...slug]/page.tsx @@ -45,9 +45,22 @@ export async function generateStaticParams() { } export async function generateMetadata({ params }: PageProps) { - const page = await findPageFromSlug(params.slug); + const page = findPageFromSlug(params.slug); + + if (page) { + const metadata: Record = { + title: page.title + }; + + if (page.description) { + metadata.description = page.description; + } + + + return metadata; + } return { - title: page ? `${page.title}` : null + title: null }; } diff --git a/apps/docs/app/icons/[...slug]/page.tsx b/apps/docs/app/icons/[...slug]/page.tsx index 22be07efb..235d6d47f 100644 --- a/apps/docs/app/icons/[...slug]/page.tsx +++ b/apps/docs/app/icons/[...slug]/page.tsx @@ -44,9 +44,22 @@ export async function generateStaticParams() { } export async function generateMetadata({ params }: PageProps) { - const page = await findPageFromSlug(params.slug); + const page = findPageFromSlug(params.slug); + + if (page) { + const metadata: Record = { + title: page.title + }; + + if (page.description) { + metadata.description = page.description; + } + + + return metadata; + } return { - title: page ? `${page.title}` : null + title: null }; } diff --git a/apps/docs/app/tokens/[...slug]/page.tsx b/apps/docs/app/tokens/[...slug]/page.tsx index eddf0aa12..066cfd33b 100644 --- a/apps/docs/app/tokens/[...slug]/page.tsx +++ b/apps/docs/app/tokens/[...slug]/page.tsx @@ -44,7 +44,7 @@ export async function generateStaticParams() { // The sections are Overview, Semantic and Core. we want all title in "Core" to be "Core " + "Color"(the token type) + " Tokens" export async function generateMetadata({ params }: PageProps) { - const page = await findPageFromSlug(params.slug); + const page = findPageFromSlug(params.slug); if (!page) { return { @@ -52,7 +52,7 @@ export async function generateMetadata({ params }: PageProps) { }; } - const { title, section } = page; + const { title, section, description } = page; let pageTitle = `${title}`; if (section === "core") { @@ -61,7 +61,14 @@ export async function generateMetadata({ params }: PageProps) { pageTitle = `Semantic ${title} Tokens`; } - return { + const metadata: Record = { title: pageTitle }; + + if (description) { + metadata.description = description; + } + + + return metadata; } diff --git a/apps/docs/content/components/concepts/controlled-mode.mdx b/apps/docs/content/components/concepts/controlled-mode.mdx index b61d1a5cc..a78dddedf 100644 --- a/apps/docs/content/components/concepts/controlled-mode.mdx +++ b/apps/docs/content/components/concepts/controlled-mode.mdx @@ -1,5 +1,6 @@ --- title: Controlled Mode +description: Learn how to use controlled and uncontrolled modes to customize Hopper components. order: 5 --- When working with Hopper components, you can customize a component's behavior using **controlled** or **uncontrolled** properties, depending on your needs. This flexibility is the foundation for **building custom components** on top of Hopper, enabling you to implement interactive features or modify the default behavior of components while preserving their visual style and structure. diff --git a/apps/docs/content/components/layout/Inline.mdx b/apps/docs/content/components/layout/Inline.mdx index 3619ce5a6..d5d486e31 100644 --- a/apps/docs/content/components/layout/Inline.mdx +++ b/apps/docs/content/components/layout/Inline.mdx @@ -1,6 +1,6 @@ --- title: Inline -description: An inline compononent is a layout primitive used to arrange elements horizontally. +description: An inline component is a layout primitive used to arrange elements horizontally. category: "layout" links: source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/layout/src/Inline.tsx diff --git a/apps/docs/content/getting-started/overview/installation.mdx b/apps/docs/content/getting-started/overview/installation.mdx index ba6d386b4..4a32882ba 100644 --- a/apps/docs/content/getting-started/overview/installation.mdx +++ b/apps/docs/content/getting-started/overview/installation.mdx @@ -1,6 +1,6 @@ --- title: Installation -description: How to install and set up Hopper in your project +description: Learn how to install and set up Hopper in your project order: 1 status: ready --- diff --git a/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx b/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx index f36603d1d..bdfba59de 100644 --- a/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx +++ b/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx @@ -1,6 +1,6 @@ --- title: Rich Icon Library -description: Getting started with Workleap Design Icons +description: Getting started with Hopper's Rich SVG Icons library order: 3 --- diff --git a/apps/docs/content/icons/overview/designing-an-icon.mdx b/apps/docs/content/icons/overview/designing-an-icon.mdx index e9957dbe1..4b90e9613 100644 --- a/apps/docs/content/icons/overview/designing-an-icon.mdx +++ b/apps/docs/content/icons/overview/designing-an-icon.mdx @@ -1,6 +1,6 @@ --- title: Designing an Icon -description: Learn how to create consistent and high-quality icons for the Workleap platform by following these guidelines. +description: Learn how to create consistent and high-quality icons by following these guidelines. --- import { iconData } from './data.ts'; diff --git a/apps/docs/content/icons/overview/introduction.mdx b/apps/docs/content/icons/overview/introduction.mdx index d638b43ab..0d1b4df3e 100644 --- a/apps/docs/content/icons/overview/introduction.mdx +++ b/apps/docs/content/icons/overview/introduction.mdx @@ -1,6 +1,6 @@ --- title: Introduction -description: Getting started with Workleap Design Icons +description: Getting started with Hopper's Icons order: 1 --- diff --git a/apps/docs/content/icons/react-icons/icon-library.mdx b/apps/docs/content/icons/react-icons/icon-library.mdx index f5e4b572d..6cc2ef638 100644 --- a/apps/docs/content/icons/react-icons/icon-library.mdx +++ b/apps/docs/content/icons/react-icons/icon-library.mdx @@ -1,6 +1,6 @@ --- title: Icon Library -description: Getting started with Workleap Design Icons +description: Getting started with Hopper's Icons library order: 3 --- diff --git a/apps/docs/content/icons/react-icons/rich-icon-library.mdx b/apps/docs/content/icons/react-icons/rich-icon-library.mdx index d2d4cb9dc..9b05a4049 100644 --- a/apps/docs/content/icons/react-icons/rich-icon-library.mdx +++ b/apps/docs/content/icons/react-icons/rich-icon-library.mdx @@ -1,6 +1,6 @@ --- title: Rich Icons Library -description: Getting started with Workleap Design Rich Icons +description: Getting started with Hopper's Rich Icons library order: 4 --- diff --git a/apps/docs/content/tokens/core/border-radius.mdx b/apps/docs/content/tokens/core/border-radius.mdx index 0bab3961e..931c827cb 100644 --- a/apps/docs/content/tokens/core/border-radius.mdx +++ b/apps/docs/content/tokens/core/border-radius.mdx @@ -1,6 +1,6 @@ --- title: Border Radius -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core border-radius design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/core/color.mdx b/apps/docs/content/tokens/core/color.mdx index dbf41fc80..1bae95514 100644 --- a/apps/docs/content/tokens/core/color.mdx +++ b/apps/docs/content/tokens/core/color.mdx @@ -1,6 +1,6 @@ --- title: Color -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core color design tokens. --- import tokensDark from '../../../datas/tokens-dark.json'; diff --git a/apps/docs/content/tokens/core/dimensions.mdx b/apps/docs/content/tokens/core/dimensions.mdx index 5bae52be1..7bd1a5531 100644 --- a/apps/docs/content/tokens/core/dimensions.mdx +++ b/apps/docs/content/tokens/core/dimensions.mdx @@ -1,6 +1,6 @@ --- title: Dimensions -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core dimensions design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/core/font-family.mdx b/apps/docs/content/tokens/core/font-family.mdx index de0ea533e..5ea97b63b 100644 --- a/apps/docs/content/tokens/core/font-family.mdx +++ b/apps/docs/content/tokens/core/font-family.mdx @@ -1,6 +1,6 @@ --- title: Font Family -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core font-family design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/core/font-size.mdx b/apps/docs/content/tokens/core/font-size.mdx index f79f6cf76..bda5a3adc 100644 --- a/apps/docs/content/tokens/core/font-size.mdx +++ b/apps/docs/content/tokens/core/font-size.mdx @@ -1,6 +1,6 @@ --- title: Font Size -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core font-size design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/core/font-weight.mdx b/apps/docs/content/tokens/core/font-weight.mdx index 9571a0776..cf68e5e4a 100644 --- a/apps/docs/content/tokens/core/font-weight.mdx +++ b/apps/docs/content/tokens/core/font-weight.mdx @@ -1,6 +1,6 @@ --- title: Font Weight -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core font-weight design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/core/line-height.mdx b/apps/docs/content/tokens/core/line-height.mdx index ac88b8a4c..9c96237ac 100644 --- a/apps/docs/content/tokens/core/line-height.mdx +++ b/apps/docs/content/tokens/core/line-height.mdx @@ -1,6 +1,6 @@ --- title: Line Height -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core line-height design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/core/motion.mdx b/apps/docs/content/tokens/core/motion.mdx index c23044a38..5db5bdd8e 100644 --- a/apps/docs/content/tokens/core/motion.mdx +++ b/apps/docs/content/tokens/core/motion.mdx @@ -1,11 +1,11 @@ --- title: Motion -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core motion design tokens. --- import tokens from '../../../datas/tokens.json'; -Our motion utilities consists of two set of values, *durations* and *easings*. +Motion brings meaning and a sense of life to the experience. It should be purposeful, intuitive, and seamless. Our motion utilities consists of two set of values, *durations* and *easings*. ## Usage diff --git a/apps/docs/content/tokens/core/shadow.mdx b/apps/docs/content/tokens/core/shadow.mdx index f6f8faa1a..9b8f55fa6 100644 --- a/apps/docs/content/tokens/core/shadow.mdx +++ b/apps/docs/content/tokens/core/shadow.mdx @@ -1,6 +1,6 @@ --- title: Shadow -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the core box-shadow design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx index e282a686c..96298cfd4 100644 --- a/apps/docs/content/tokens/semantic/color.mdx +++ b/apps/docs/content/tokens/semantic/color.mdx @@ -1,6 +1,6 @@ --- title: Color -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the semantic color design tokens. --- import tokensDark from '../../../datas/tokens-dark.json'; import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/semantic/elevation.mdx b/apps/docs/content/tokens/semantic/elevation.mdx index c83b18064..e16645ccb 100644 --- a/apps/docs/content/tokens/semantic/elevation.mdx +++ b/apps/docs/content/tokens/semantic/elevation.mdx @@ -1,6 +1,6 @@ --- title: Elevation -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the semantic elevation design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/semantic/shape.mdx b/apps/docs/content/tokens/semantic/shape.mdx index 321ab39f9..49c11ddf5 100644 --- a/apps/docs/content/tokens/semantic/shape.mdx +++ b/apps/docs/content/tokens/semantic/shape.mdx @@ -1,6 +1,6 @@ --- title: Shape -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the semantic shape design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/semantic/space.mdx b/apps/docs/content/tokens/semantic/space.mdx index ce2b6df8d..5eb42c52d 100644 --- a/apps/docs/content/tokens/semantic/space.mdx +++ b/apps/docs/content/tokens/semantic/space.mdx @@ -1,6 +1,6 @@ --- title: Space -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the semantic space design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/apps/docs/content/tokens/semantic/typography.mdx b/apps/docs/content/tokens/semantic/typography.mdx index 7534417a4..6537239be 100644 --- a/apps/docs/content/tokens/semantic/typography.mdx +++ b/apps/docs/content/tokens/semantic/typography.mdx @@ -1,6 +1,6 @@ --- title: Typography -description: Getting started with Workleap Design Tokens +description: Design tokens are design decisions, translated into data. Explore the semantic typography design tokens. --- import tokens from '../../../datas/tokens.json'; diff --git a/packages/components/src/HopperProvider/src/HopperProvider.tsx b/packages/components/src/HopperProvider/src/HopperProvider.tsx index b93897cfc..c16949866 100644 --- a/packages/components/src/HopperProvider/src/HopperProvider.tsx +++ b/packages/components/src/HopperProvider/src/HopperProvider.tsx @@ -8,7 +8,7 @@ export const GlobalHopperProviderCssSelector = "hop-HopperProvider"; export interface HopperProviderProps extends StyledSystemProviderProps { /** - * The The BCP47 language code for the locale. + * The BCP47 language code for the locale. * @example "en-US" */ locale?: string; From b8b5f05b251c6a95dfe5215c9809d4f983780181 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Thu, 12 Dec 2024 11:00:19 -0500 Subject: [PATCH 02/15] add description to component-list --- apps/docs/content/components/overview/component-list.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/content/components/overview/component-list.mdx b/apps/docs/content/components/overview/component-list.mdx index 541cda8c2..6953fba0a 100644 --- a/apps/docs/content/components/overview/component-list.mdx +++ b/apps/docs/content/components/overview/component-list.mdx @@ -1,5 +1,6 @@ --- title: Component List +description: A list of all the components available in the design system. order: 2 --- From 7ac5a38d0def851f5cc2a2a01353aa1db37ab9f9 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Thu, 12 Dec 2024 11:01:57 -0500 Subject: [PATCH 03/15] update description --- apps/docs/content/icons/SVG-icons/icon-library.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/icons/SVG-icons/icon-library.mdx b/apps/docs/content/icons/SVG-icons/icon-library.mdx index 5d31f2e0a..c910c9d47 100644 --- a/apps/docs/content/icons/SVG-icons/icon-library.mdx +++ b/apps/docs/content/icons/SVG-icons/icon-library.mdx @@ -1,6 +1,6 @@ --- title: Icon Library -description: Getting started with Workleap Design Icons +description: Getting started with Hopper's SVG Icons library order: 2 --- From d65bc6a681b52a2b886535b1648b3d9437906fff Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Thu, 12 Dec 2024 12:59:46 -0500 Subject: [PATCH 04/15] update documentation and code sampels --- .../content/components/buttons/Button.mdx | 12 ++----- .../components/buttons/ButtonGroup.mdx | 22 ++++++------ .../content/components/buttons/LinkButton.mdx | 12 +++---- .../components/collections/Listbox.mdx | 2 +- .../components/collections/TagGroup.mdx | 2 +- apps/docs/content/components/content/Card.mdx | 2 +- .../components/content/IllustratedMessage.mdx | 2 +- .../content/components/forms/Checkbox.mdx | 2 +- .../components/forms/CheckboxGroup.mdx | 2 +- apps/docs/content/components/forms/Form.mdx | 2 +- .../content/components/forms/RadioGroup.mdx | 2 +- apps/docs/content/components/forms/Switch.mdx | 2 +- .../content/components/icons/IconList.mdx | 2 +- .../components/navigation/Disclosure.mdx | 2 +- .../content/components/navigation/Link.mdx | 2 +- .../content/components/overlays/Popover.mdx | 2 +- .../content/components/pickers/ComboBox.mdx | 2 +- .../content/components/pickers/Select.mdx | 2 +- .../src/ComboBox/docs/allowCustomValue.tsx | 4 +-- .../src/ComboBox/docs/controlled.tsx | 4 +-- .../components/src/Select/docs/controlled.tsx | 4 +-- .../src/Select/docs/customValue.tsx | 6 ++-- .../src/buttons/docs/button/endIcon.tsx | 12 +++---- .../src/buttons/docs/button/icon.tsx | 6 ++-- .../src/buttons/docs/button/icons.tsx | 12 +++---- .../src/buttons/docs/button/layout.tsx | 4 ++- .../src/buttons/docs/button/size.tsx | 2 +- .../src/buttons/docs/buttonGroup/sizes.tsx | 20 +++++------ .../src/buttons/docs/linkButton/endIcon.tsx | 10 +++--- .../src/buttons/docs/linkButton/icon.tsx | 6 ++-- .../src/buttons/docs/linkButton/icons.tsx | 10 +++--- .../src/inputs/docs/numberField/sizes.tsx | 8 ++--- .../src/inputs/docs/passwordField/sizes.tsx | 8 ++--- .../src/inputs/docs/searchField/sizes.tsx | 9 ++--- .../src/inputs/docs/textArea/sizes.tsx | 9 ++--- .../src/inputs/docs/textField/sizes.tsx | 9 ++--- .../src/tag/docs/tagGroup/sizes.tsx | 34 +++++++++---------- .../src/typography/Heading/docs/levels.tsx | 14 ++++---- .../src/typography/Heading/docs/sizes.tsx | 16 ++++----- .../src/typography/Text/docs/text/size.tsx | 18 ++++------ 40 files changed, 130 insertions(+), 171 deletions(-) diff --git a/apps/docs/content/components/buttons/Button.mdx b/apps/docs/content/components/buttons/Button.mdx index 84ff0d31a..eee4c4167 100644 --- a/apps/docs/content/components/buttons/Button.mdx +++ b/apps/docs/content/components/buttons/Button.mdx @@ -21,17 +21,9 @@ links: ## Anatomy - - TODO: We have anatomy screenshots from the Figma, we could most likely use them here - - ### Concepts - - - [Client Side Routing](./client-side-routing) - - ### Composed Components -A `Button` uses the following components. +A `Button` uses the following components: @@ -74,7 +66,7 @@ A button can be expanded to full width to fill its parent container. ### Icon Only -A button can contain only an icon. +A button can contain only an icon. An accessible name must be provided through [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) prop. See also [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html). diff --git a/apps/docs/content/components/buttons/ButtonGroup.mdx b/apps/docs/content/components/buttons/ButtonGroup.mdx index c8b96853b..4ae754b17 100644 --- a/apps/docs/content/components/buttons/ButtonGroup.mdx +++ b/apps/docs/content/components/buttons/ButtonGroup.mdx @@ -33,20 +33,10 @@ links: A `ButtonGroup` uses the following component. - + ## Usage -### Disabled -A button group can be disabled. - - - -### Fluid -A button group can be fluid. - - - ### Orientation A button group can render his items vertically. @@ -57,6 +47,16 @@ A button group can change the alignment of his items. +### Disabled +A button group can be disabled. + + + +### Fluid +A button group can be fluid. + + + ### Sizes A button group can be of different sizes. diff --git a/apps/docs/content/components/buttons/LinkButton.mdx b/apps/docs/content/components/buttons/LinkButton.mdx index 6d9d5f06e..f951b6e60 100644 --- a/apps/docs/content/components/buttons/LinkButton.mdx +++ b/apps/docs/content/components/buttons/LinkButton.mdx @@ -21,17 +21,15 @@ links: ## Anatomy - - TODO: We have anatomy screenshots from the Figma, we could most likely use them here +### Concepts - ### Concepts +*LinkButton* makes use of the following concepts: - - [Client Side Routing](./client-side-routing) - +- [Client Side Routing](./client-side-routing) ### Composed Components -A `LinkButton` uses the following components. +A *LinkButton* uses the following components: @@ -64,13 +62,11 @@ A link button can be disabled. ### External - Add `rel="noopener noreferrer"` and `target="_blank"` attributes to render and external link button. ### No Href - When a link button link does not have an href prop, it is rendered as a `` instead of an ``. Events will need to be handled in JavaScript with the `onPress` prop. Note: this will not behave like a native link. Browser features like context menus and open in a new tab will not apply. diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx index f57446e5c..3c1b5ccb8 100644 --- a/apps/docs/content/components/collections/Listbox.mdx +++ b/apps/docs/content/components/collections/Listbox.mdx @@ -33,7 +33,7 @@ links: #### ListBox -A `ListBox` uses the following components. +A `ListBox` uses the following components: diff --git a/apps/docs/content/components/collections/TagGroup.mdx b/apps/docs/content/components/collections/TagGroup.mdx index 1b87a8518..886ab55c8 100644 --- a/apps/docs/content/components/collections/TagGroup.mdx +++ b/apps/docs/content/components/collections/TagGroup.mdx @@ -32,7 +32,7 @@ links: ### Composed Components -A `TagGroup` uses the following components. +A `TagGroup` uses the following components: diff --git a/apps/docs/content/components/content/Card.mdx b/apps/docs/content/components/content/Card.mdx index 4116b0911..3933bc9f0 100644 --- a/apps/docs/content/components/content/Card.mdx +++ b/apps/docs/content/components/content/Card.mdx @@ -22,7 +22,7 @@ links: ### Composed Components -A `Card` uses the following components. +A `Card` uses the following components: diff --git a/apps/docs/content/components/content/IllustratedMessage.mdx b/apps/docs/content/components/content/IllustratedMessage.mdx index bc274a678..c93c3a334 100644 --- a/apps/docs/content/components/content/IllustratedMessage.mdx +++ b/apps/docs/content/components/content/IllustratedMessage.mdx @@ -12,7 +12,7 @@ links: ### Composed Components -A `IllustratedMessage` uses the following components. +A `IllustratedMessage` uses the following components: diff --git a/apps/docs/content/components/forms/Checkbox.mdx b/apps/docs/content/components/forms/Checkbox.mdx index 27787cc8d..721885613 100644 --- a/apps/docs/content/components/forms/Checkbox.mdx +++ b/apps/docs/content/components/forms/Checkbox.mdx @@ -32,7 +32,7 @@ links: ### Composed Components -A `Checkbox` uses the following components. +A `Checkbox` uses the following components: diff --git a/apps/docs/content/components/forms/CheckboxGroup.mdx b/apps/docs/content/components/forms/CheckboxGroup.mdx index 787385c87..1d88833e4 100644 --- a/apps/docs/content/components/forms/CheckboxGroup.mdx +++ b/apps/docs/content/components/forms/CheckboxGroup.mdx @@ -31,7 +31,7 @@ links: ### Composed Components -A `CheckboxGroup` uses the following components. +A `CheckboxGroup` uses the following components: diff --git a/apps/docs/content/components/forms/Form.mdx b/apps/docs/content/components/forms/Form.mdx index e3e8ffb16..18adc1804 100644 --- a/apps/docs/content/components/forms/Form.mdx +++ b/apps/docs/content/components/forms/Form.mdx @@ -30,7 +30,7 @@ links: ### Composed Components -A `Form` uses the following components. +A `Form` uses the following components: diff --git a/apps/docs/content/components/forms/RadioGroup.mdx b/apps/docs/content/components/forms/RadioGroup.mdx index 15df6d82c..6afa1d632 100644 --- a/apps/docs/content/components/forms/RadioGroup.mdx +++ b/apps/docs/content/components/forms/RadioGroup.mdx @@ -32,7 +32,7 @@ links: ### Composed Components -A `RadioGroup` uses the following components. +A `RadioGroup` uses the following components: diff --git a/apps/docs/content/components/forms/Switch.mdx b/apps/docs/content/components/forms/Switch.mdx index b46baece6..8313120d2 100644 --- a/apps/docs/content/components/forms/Switch.mdx +++ b/apps/docs/content/components/forms/Switch.mdx @@ -32,7 +32,7 @@ links: ### Composed Components -A `Switch` uses the following components. +A `Switch` uses the following components: diff --git a/apps/docs/content/components/icons/IconList.mdx b/apps/docs/content/components/icons/IconList.mdx index de8c60771..6fd6de05b 100644 --- a/apps/docs/content/components/icons/IconList.mdx +++ b/apps/docs/content/components/icons/IconList.mdx @@ -30,7 +30,7 @@ links: ### Composed Components -An `IconList` uses the following components. +An `IconList` uses the following components: diff --git a/apps/docs/content/components/navigation/Disclosure.mdx b/apps/docs/content/components/navigation/Disclosure.mdx index a7f7bf806..e85743024 100644 --- a/apps/docs/content/components/navigation/Disclosure.mdx +++ b/apps/docs/content/components/navigation/Disclosure.mdx @@ -31,7 +31,7 @@ links: ### Composed Components -A `Disclosure` uses the following components. +A `Disclosure` uses the following components: diff --git a/apps/docs/content/components/navigation/Link.mdx b/apps/docs/content/components/navigation/Link.mdx index 3860024c3..d601569c9 100644 --- a/apps/docs/content/components/navigation/Link.mdx +++ b/apps/docs/content/components/navigation/Link.mdx @@ -31,7 +31,7 @@ links: ### Composed Components -A `Link` uses the following components. +A `Link` uses the following components: diff --git a/apps/docs/content/components/overlays/Popover.mdx b/apps/docs/content/components/overlays/Popover.mdx index 0053dbf63..4356b92e2 100644 --- a/apps/docs/content/components/overlays/Popover.mdx +++ b/apps/docs/content/components/overlays/Popover.mdx @@ -30,7 +30,7 @@ links: ### Composed Components -A `Popover` uses the following components. +A `Popover` uses the following components: diff --git a/apps/docs/content/components/pickers/ComboBox.mdx b/apps/docs/content/components/pickers/ComboBox.mdx index 6c39f259b..8c89735b1 100644 --- a/apps/docs/content/components/pickers/ComboBox.mdx +++ b/apps/docs/content/components/pickers/ComboBox.mdx @@ -40,7 +40,7 @@ The Section component represents a `section` within a Hopper container. ### Composed Components -A `ComboBox` uses the following components. +A `ComboBox` uses the following components: diff --git a/apps/docs/content/components/pickers/Select.mdx b/apps/docs/content/components/pickers/Select.mdx index b36b72a3f..83f92e744 100644 --- a/apps/docs/content/components/pickers/Select.mdx +++ b/apps/docs/content/components/pickers/Select.mdx @@ -39,7 +39,7 @@ The Section component represents a `section` within a Hopper container. ### Composed Components -A `Select` uses the following components. +A `Select` uses the following components: diff --git a/packages/components/src/ComboBox/docs/allowCustomValue.tsx b/packages/components/src/ComboBox/docs/allowCustomValue.tsx index 78562b830..6f9135116 100644 --- a/packages/components/src/ComboBox/docs/allowCustomValue.tsx +++ b/packages/components/src/ComboBox/docs/allowCustomValue.tsx @@ -3,12 +3,12 @@ import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/comp export default function Example() { return ( - +
Creative Department
Designer Content creator - Manager + Manager ); } diff --git a/packages/components/src/ComboBox/docs/controlled.tsx b/packages/components/src/ComboBox/docs/controlled.tsx index 032be4c3a..9803aae29 100644 --- a/packages/components/src/ComboBox/docs/controlled.tsx +++ b/packages/components/src/ComboBox/docs/controlled.tsx @@ -14,12 +14,12 @@ export default function Example() { return ( - +
Operations
Project Coordinator QA Specialist - Manager + Manager ); } diff --git a/packages/components/src/Select/docs/controlled.tsx b/packages/components/src/Select/docs/controlled.tsx index a4d67ce26..60c9be95e 100644 --- a/packages/components/src/Select/docs/controlled.tsx +++ b/packages/components/src/Select/docs/controlled.tsx @@ -14,12 +14,12 @@ export default function Example() { return ( ); } diff --git a/packages/components/src/Select/docs/customValue.tsx b/packages/components/src/Select/docs/customValue.tsx index 95ead47d6..7d21bbed9 100644 --- a/packages/components/src/Select/docs/customValue.tsx +++ b/packages/components/src/Select/docs/customValue.tsx @@ -4,11 +4,11 @@ import { users, type User } from "./data.ts"; const renderValue = ({ defaultChildren, selectedItem }: ValueRenderProps) => { if (selectedItem) { - const { id, name, avatar } = selectedItem as User; + const { name, avatar } = selectedItem as User; return ( <> - + {name} ); @@ -21,7 +21,7 @@ export default function Example() { const [firstUser] = users; return ( -