Add subcomponent controls

Amsterdam · Dec 6, 2023 · afdfbfb · afdfbfb
1 parent 577bc2f
commit afdfbfb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/storybook/storybook-react/src/SearchField/SearchField.docs.mdx b/storybook/storybook-react/src/SearchField/SearchField.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as SearchFieldStories from "./SearchField.stories.tsx";
 import README from "../../../../packages/css/src/components/search-field/README.md?raw";
 
@@ -8,6 +8,8 @@ import README from "../../../../packages/css/src/components/search-field/README.
 
 <Primary />
 
+<Controls />
+
 ### Met placeholder
 
 Een zoekveld kan een placeholder hebben.

diff --git a/storybook/storybook-react/src/SearchField/SearchField.stories.tsx b/storybook/storybook-react/src/SearchField/SearchField.stories.tsx
@@ -3,33 +3,46 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-import { SearchField } from '@amsterdam/design-system-react'
+import { SearchField, SearchFieldProps } from '@amsterdam/design-system-react'
 import { useArgs } from '@storybook/preview-api'
 import { Meta, StoryObj } from '@storybook/react'
 
+type InputProps = { label?: string; placeholder?: string }
+type StoryProps = SearchFieldProps & InputProps
+
 const meta = {
   title: 'Forms/Search Field',
   component: SearchField,
   args: {
-    children: [<SearchField.Input key={1} />, <SearchField.Button key={2} />],
     onSubmit: (e) => {
       e.preventDefault()
     },
   },
   argTypes: {
-    // TODO: add label and placeholder controls once we figure out an approach for subcomponent controls
     children: {
       table: {
         disable: true,
       },
     },
+    label: {
+      control: 'text',
+    },
     onSubmit: {
       table: {
         disable: true,
       },
     },
+    placeholder: {
+      control: 'text',
+    },
   },
-} satisfies Meta<typeof SearchField>
+  render: ({ label, placeholder, ...args }) => (
+    <SearchField {...args}>
+      <SearchField.Input label={label} placeholder={placeholder} />
+      <SearchField.Button />
+    </SearchField>
+  ),
+} satisfies Meta<StoryProps>
 
 export default meta
 
@@ -39,18 +52,15 @@ export const Default: Story = {}
 
 export const WithPlaceholder: Story = {
   args: {
-    children: [
-      <SearchField.Input key={1} placeholder="Wat kunnen we voor u vinden?" />,
-      <SearchField.Button key={2} />,
-    ],
+    placeholder: 'Wat kunnen we voor u vinden?',
   },
 }
 
 export const Controlled: any = {
   args: {
     value: '',
   },
-  render: function Component() {
+  render: function Component({ label, placeholder }: InputProps) {
     const [args, setArgs] = useArgs()
 
     const onValueChange = (event: any) => {
@@ -70,7 +80,13 @@ export const Controlled: any = {
           }
         }}
       >
-        <SearchField.Input name="search-box" value={args['value']} onChange={onValueChange} />
+        <SearchField.Input
+          name="search-box"
+          value={args['value']}
+          label={label}
+          onChange={onValueChange}
+          placeholder={placeholder}
+        />
         <SearchField.Button />
       </SearchField>
     )