Rename React Components to Components

packages/css/src/components/card/README.md

@@ -7,15 +7,15 @@ The link is mandatory.
 ## Guidelines
 
 - The title of a card is a link within a heading.
-  The same guidelines as for regular [links](/docs/react-components-navigation-link--docs) and [headings](/docs/react-components-text-heading--docs) apply here.
+  The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here.
   The link is active across the entire area of the card.
 - A card needs more content than just a title.
   Supplement this with textual and/or visual content.
 - Place the text in a regular paragraph.
   Only use the smallest text size for a tagline or date.
 - This component may not be the best option if the content does not represent a detailed page.
-  For referencing a thematic page, use a [top task link](/docs/react-components-navigation-top-task-link--docs).
-  You can also use a [regular link](/docs/react-components-navigation-link--docs).
+  For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
+  You can also use a [regular link](/docs/components-navigation-link--docs).
 
 ## Screen Readers
 

packages/css/src/components/grid/README.md

@@ -5,9 +5,9 @@ Divides the screen into columns to align the elements of a page.
 ## Usage
 
 Every page should use the grid as the foundation for its layout.
-It is placed directly within the [Screen](/docs/react-components-layout-screen--docs).
+It is placed directly within the [Screen](/docs/components-layout-screen--docs).
 
-A [Footer](/docs/react-components-containers-footer--docs) and a [Spotlight](/docs/react-components-containers-spotlight--docs) are slightly wider than the grid.
+A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid.
 You close one instance of the grid before these components.
 Inside and optionally after them, you start a new one.
 Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely.

packages/css/src/components/icon-button/README.md

@@ -11,4 +11,4 @@ A button containing only an icon.
 
 ## Relevant WCAG Requirements
 
-The Icon Button follows [the same requirements and guidelines as a regular button](/docs/react-components-buttons-button--docs).
+The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs).

packages/css/src/components/image/README.md

@@ -13,7 +13,7 @@ Displays an image.
   For example, provide small, medium, and large variants for various screen sizes.
   This prevents unnecessary downloading of large files.
   Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant.
-- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/react-components-layout-aspect-ratio--docs) component.
+- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/components-layout-aspect-ratio--docs) component.
 
 ## Relevant WCAG Requirements
 

packages/css/src/components/link-list/README.md

@@ -13,4 +13,4 @@ Therefore, it is blue and clickable.
 
 Use a Link List to present multiple links within a theme.
 
-For additional guidelines, refer to the [Link](/docs/react-components-navigation-link--docs) component.
+For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

packages/css/src/components/page-heading/README.md

@@ -14,4 +14,4 @@ Use this component for a name, title, or motto.
 The page heading component is a variant of a heading level 1 with a distinct style.
 When using this component, ensure that the heading hierarchy of the page remains logical.
 
-For this component, the same WCAG requirements apply as for [the heading component](/docs/react-components-text-heading--docs).
+For this component, the same WCAG requirements apply as for [the heading component](/docs/components-text-heading--docs).

packages/css/src/components/screen/README.md

@@ -6,10 +6,10 @@ Manages the maximum width and alignment of the entire website or application.
 
 This should be the outermost component of your website or application.
 Within it, combine components such as
-[Grid](/docs/react-components-layout-grid--docs),
-[Header](/docs/react-components-containers-header--docs),
-[Footer](/docs/react-components-containers-footer--docs),
-[Spotlight](/docs/react-components-containers-spotlight--docs),
+[Grid](/docs/components-layout-grid--docs),
+[Header](/docs/components-containers-header--docs),
+[Footer](/docs/components-containers-footer--docs),
+[Spotlight](/docs/components-containers-spotlight--docs),
 and Figure.
 
 ## Design

packages/css/src/components/table/README.md

@@ -8,4 +8,4 @@ Table is used to display simple information that does not need to be filtered or
 - Use `<Table.Caption>` to describe a table in the same way you would use a heading.
   A caption helps users find, navigate and understand tables.
 - Never use the table component to layout content on a page.
-  Instead, use [Grid](/docs/react-components-layout-grid--docs).
+  Instead, use [Grid](/docs/components-layout-grid--docs).

packages/css/src/components/top-task-link/README.md

@@ -10,12 +10,12 @@ A prominent navigation element to quickly start a task.
 - Keep both texts concise.
   A title consists of a few words, and the description consists of 1 or 2 short sentences.
   The description should end with a period or another appropriate punctuation mark.
-- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/react-components-layout-grid--docs).
+- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/components-layout-grid--docs).
   If you have more Top Task Links, place them in the next row.
   Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
   If this is not possible, leave the last cells of the grid empty.
-- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/react-components-navigation-link--docs).
+- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
 
 ## Relevant WCAG requirements
 
-The Top Task Link is subject to the same requirements as [regular links](/docs/react-components-navigation-link--docs).
+The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).

plopfile.mjs

@@ -60,12 +60,12 @@ export default function (plop) {
       {
         type: 'add',
         data: { curlyBefore: '{' },
-        path: 'storybook/src/react-components/{{pascalCase name}}/{{pascalCase name}}.docs.mdx',
+        path: 'storybook/src/components/{{pascalCase name}}/{{pascalCase name}}.docs.mdx',
         templateFile: 'plop-templates/storybook.docs.mdx.hbs',
       },
       {
         type: 'add',
-        path: 'storybook/src/react-components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
+        path: 'storybook/src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
         templateFile: 'plop-templates/storybook.stories.tsx.hbs',
       },
     ],

storybook/src/react-components/Accordion/Accordion.stories.tsx → storybook/src/components/Accordion/Accordion.stories.tsx

@@ -12,7 +12,7 @@ const paragraph2 = exampleParagraph()
 const paragraph3 = exampleParagraph()
 
 const meta = {
-  title: 'React Components/Containers/Accordion',
+  title: 'Components/Containers/Accordion',
   component: Accordion,
   args: {
     headingLevel: 1,

storybook/src/react-components/Alert/Alert.stories.tsx → storybook/src/components/Alert/Alert.stories.tsx

@@ -7,7 +7,7 @@ import { Alert, Link, Paragraph, UnorderedList } from '@amsterdam/design-system-
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Feedback/Alert',
+  title: 'Components/Feedback/Alert',
   component: Alert,
   args: {
     title: 'Let op',

storybook/src/react-components/AspectRatio/AspectRatio.stories.tsx → storybook/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -7,7 +7,7 @@ import { AspectRatio, Image } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Layout/Aspect Ratio',
+  title: 'Components/Layout/Aspect Ratio',
   component: AspectRatio,
   args: {
     ratio: 'square',

storybook/src/react-components/Badge/Badge.stories.tsx → storybook/src/components/Badge/Badge.stories.tsx

@@ -7,7 +7,7 @@ import { Badge } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Feedback/Badge',
+  title: 'Components/Feedback/Badge',
   component: Badge,
   args: {
     label: 'Tip',

storybook/src/react-components/Blockquote/Blockquote.stories.tsx → storybook/src/components/Blockquote/Blockquote.stories.tsx

@@ -10,7 +10,7 @@ import { exampleQuote } from '../shared/exampleContent'
 const quote = exampleQuote()
 
 const meta = {
-  title: 'React Components/Text/Blockquote',
+  title: 'Components/Text/Blockquote',
   component: Blockquote,
   args: {
     children: quote,

storybook/src/react-components/Breadcrumb/Breadcrumb.stories.tsx → storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -7,7 +7,7 @@ import { Breadcrumb } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Navigation/Breadcrumb',
+  title: 'Components/Navigation/Breadcrumb',
   component: Breadcrumb,
 } satisfies Meta<typeof Breadcrumb>
 

storybook/src/react-components/Button/Button.stories.tsx → storybook/src/components/Button/Button.stories.tsx

@@ -8,7 +8,7 @@ import { ShareIcon } from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Buttons/Button',
+  title: 'Components/Buttons/Button',
   component: Button,
   args: {
     children: 'Button label',

storybook/src/react-components/Card/Card.stories.tsx → storybook/src/components/Card/Card.stories.tsx

@@ -14,7 +14,7 @@ const dateFormat = new Intl.DateTimeFormat('nl', {
 const today = dateFormat.format(Date.now())
 
 const meta = {
-  title: 'React Components/Navigation/Card',
+  title: 'Components/Navigation/Card',
   component: Card,
   decorators: [
     (Story) => (

storybook/src/react-components/Checkbox/Checkbox.stories.tsx → storybook/src/components/Checkbox/Checkbox.stories.tsx

@@ -7,7 +7,7 @@ import { Checkbox } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Forms/Checkbox',
+  title: 'Components/Forms/Checkbox',
   component: Checkbox,
   args: {
     children: 'Checkbox label',

storybook/src/react-components/Column/Column.stories.tsx → storybook/src/components/Column/Column.stories.tsx

@@ -13,7 +13,7 @@ const ThreeBoxes = Array.from(Array(3).keys()).map((i) => (
 ))
 
 const meta = {
-  title: 'React Components/Layout/Column',
+  title: 'Components/Layout/Column',
   component: Column,
   args: {
     children: ThreeBoxes,

storybook/src/react-components/Dialog/Dialog.stories.tsx → storybook/src/components/Dialog/Dialog.stories.tsx

@@ -7,7 +7,7 @@ import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-rea
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Containers/Dialog',
+  title: 'Components/Containers/Dialog',
   component: Dialog,
   args: {
     title: 'Weet u het zeker?',

storybook/src/react-components/Fieldset/Fieldset.stories.tsx → storybook/src/components/Fieldset/Fieldset.stories.tsx

@@ -7,7 +7,7 @@ import { Checkbox, Fieldset } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Forms/Fieldset',
+  title: 'Components/Forms/Fieldset',
   component: Fieldset,
   args: {
     children: 'Body van de fieldset',

storybook/src/react-components/Footer/Footer.stories.tsx → storybook/src/components/Footer/Footer.stories.tsx

@@ -8,7 +8,7 @@ import { EmailIcon, PhoneIcon } from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Containers/Footer',
+  title: 'Components/Containers/Footer',
   component: Footer,
 } satisfies Meta<typeof Footer>
 

storybook/src/react-components/FormLabel/FormLabel.stories.tsx → storybook/src/components/FormLabel/FormLabel.stories.tsx

@@ -7,7 +7,7 @@ import { FormLabel } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Forms/Form Label',
+  title: 'Components/Forms/Form Label',
   component: FormLabel,
   args: {
     children: 'Form label',

storybook/src/react-components/Grid/Grid.docs.mdx → storybook/src/components/Grid/Grid.docs.mdx

@@ -20,7 +20,7 @@ On narrow screens, you will see three rows of four columns; on medium-wide scree
 
 Unlike the horizontal margins between columns, the vertical ones above and below are adjustable.
 The options `paddingVertical`, `paddingTop`, and `paddingBottom` add white space.
-This is useful in a coloured area like [Footer](/docs/react-components-containers-footer--docs) or [Spotlight](/docs/react-components-containers-spotlight--docs) or between two consecutive grids.
+This is useful in a coloured area like [Footer](/docs/components-containers-footer--docs) or [Spotlight](/docs/components-containers-spotlight--docs) or between two consecutive grids.
 
 Specify a value of `medium` for vertical white space as wide as the horizontal.
 Use `small` for half of that width and `large` for double.

storybook/src/react-components/Grid/Grid.stories.tsx → storybook/src/components/Grid/Grid.stories.tsx

@@ -9,7 +9,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { paddingArgType } from '../shared/argTypes'
 
 const meta = {
-  title: 'React Components/Layout/Grid',
+  title: 'Components/Layout/Grid',
   component: Grid,
   argTypes: {
     gapVertical: {

storybook/src/react-components/Header/Header.stories.tsx → storybook/src/components/Header/Header.stories.tsx

@@ -8,7 +8,7 @@ import { SearchIcon } from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Containers/Header',
+  title: 'Components/Containers/Header',
   component: Header,
   argTypes: {
     logoBrand: {

storybook/src/react-components/Heading/Heading.stories.tsx → storybook/src/components/Heading/Heading.stories.tsx

@@ -10,7 +10,7 @@ import { exampleHeading } from '../shared/exampleContent'
 const heading = exampleHeading()
 
 const meta = {
-  title: 'React Components/Text/Heading',
+  title: 'Components/Text/Heading',
   component: Heading,
   args: {
     children: heading,

storybook/src/react-components/Icon/Icon.docs.mdx → storybook/src/components/Icon/Icon.docs.mdx

@@ -37,7 +37,7 @@ Using the same text levels for both the icon and text aligns them perfectly.
 
 ### Square
 
-Sometimes it’s useful for the icon to take up square space, for example, with the [Icon Button](/docs/react-components-buttons-icon-button--docs).
+Sometimes it’s useful for the icon to take up square space, for example, with the [Icon Button](/docs/components-buttons-icon-button--docs).
 
 <Canvas of={IconStories.Square} />
 

storybook/src/react-components/Icon/Icon.stories.tsx → storybook/src/components/Icon/Icon.stories.tsx

@@ -8,7 +8,7 @@ import * as Icons from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Media/Icon',
+  title: 'Components/Media/Icon',
   component: Icon,
   argTypes: {
     size: {

storybook/src/react-components/IconButton/IconButton.stories.tsx → storybook/src/components/IconButton/IconButton.stories.tsx

@@ -8,7 +8,7 @@ import * as Icons from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Buttons/Icon Button',
+  title: 'Components/Buttons/Icon Button',
   component: IconButton,
   args: {
     label: 'Sluiten',

storybook/src/react-components/Image/Image.stories.tsx → storybook/src/components/Image/Image.stories.tsx

@@ -7,7 +7,7 @@ import { Image } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Media/Image',
+  title: 'Components/Media/Image',
   component: Image,
 } satisfies Meta<typeof Image>
 

storybook/src/react-components/Link/Link.stories.tsx → storybook/src/components/Link/Link.stories.tsx

@@ -9,7 +9,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 type Story = StoryObj<typeof Link>
 
 const meta = {
-  title: 'React Components/Navigation/Link',
+  title: 'Components/Navigation/Link',
   component: Link,
   args: {
     children: 'Link label',

storybook/src/react-components/LinkList/LinkList.docs.mdx → storybook/src/components/LinkList/LinkList.docs.mdx

@@ -24,7 +24,7 @@ Avoid using both semantic and list icons in the same list.
 
 ### Small Text
 
-In the [Footer](/docs/react-components-containers-footer--docs), we use small text, also for lists.
+In the [Footer](/docs/components-containers-footer--docs), we use small text, also for lists.
 Specify this for each item in the list.
 
 <Canvas of={LinkListStories.SmallText} />

storybook/src/react-components/LinkList/LinkList.stories.tsx → storybook/src/components/LinkList/LinkList.stories.tsx

@@ -11,7 +11,7 @@ import { exampleLinkList } from '../shared/exampleContent'
 const links = exampleLinkList()
 
 const meta = {
-  title: 'React Components/Navigation/Link List',
+  title: 'Components/Navigation/Link List',
   component: LinkList,
   args: {
     children: links.map((text, index) => (
@@ -25,7 +25,7 @@ const meta = {
 export default meta
 
 const linkMeta = {
-  title: 'React Components/Navigation/Link List Link',
+  title: 'Components/Navigation/Link List Link',
   component: LinkList.Link,
   argTypes: {
     icon: {

storybook/src/react-components/Logo/Logo.stories.tsx → storybook/src/components/Logo/Logo.stories.tsx

@@ -7,7 +7,7 @@ import { Logo } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Media/Logo',
+  title: 'Components/Media/Logo',
   component: Logo,
   argTypes: {
     brand: {

storybook/src/react-components/Mark/Mark.stories.tsx → storybook/src/components/Mark/Mark.stories.tsx

@@ -7,7 +7,7 @@ import { Mark, Paragraph } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Text/Mark',
+  title: 'Components/Text/Mark',
   component: Mark,
   args: {
     children: 'Nieuw component',

storybook/src/react-components/MegaMenu/MegaMenu.stories.tsx → storybook/src/components/MegaMenu/MegaMenu.stories.tsx

@@ -7,7 +7,7 @@ import { Grid, Heading, LinkList, MegaMenu, Screen } from '@amsterdam/design-sys
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'React Components/Navigation/Mega Menu',
+  title: 'Components/Navigation/Mega Menu',
   component: MegaMenu,
   parameters: {
     layout: 'fullscreen',

storybook/src/react-components/OrderedList/OrderedList.stories.tsx → storybook/src/components/OrderedList/OrderedList.stories.tsx

@@ -12,7 +12,7 @@ const orderedListItems = exampleOrderedList().map((text, index) => (
 ))
 
 const meta = {
-  title: 'React Components/Text/Ordered List',
+  title: 'Components/Text/Ordered List',
   component: OrderedList,
   args: {
     children: orderedListItems,

storybook/src/react-components/Overlap/Overlap.docs.mdx → storybook/src/components/Overlap/Overlap.docs.mdx

@@ -11,14 +11,14 @@ import README from "../../../../packages/css/src/components/overlap/README.md?ra
 ### Hero Image with Search Field
 
 This allows for the use of a mood-setting image as a background.
-A [Grid](/docs/react-components-layout-grid--docs) provides horizontal spacing on both sides and columns for layout.
+A [Grid](/docs/components-layout-grid--docs) provides horizontal spacing on both sides and columns for layout.
 Note: the library does not yet offer an option to vertically center the form.
 
 <Primary />
 
 #### Guidelines
 
 - First, implement the underlying component.
-- Follow [the general guidelines for images](/docs/react-components-media-image--docs#guidelines).
+- Follow [the general guidelines for images](/docs/components-media-image--docs#guidelines).
 - Use a sufficiently large image.
   The aspect ratio of 32:9 is most suitable.