Update AnchorNav playground story

Adds controls for actions, removes controls from default story.
primer · Jul 23, 2024 · f1eaba3 · f1eaba3
1 parent 3a8b899
commit f1eaba3
Showing 1 changed file with 85 additions and 61 deletions.
diff --git a/packages/react/src/AnchorNav/AnchorNav.stories.tsx b/packages/react/src/AnchorNav/AnchorNav.stories.tsx
@@ -14,66 +14,20 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    enableDefaultBgColor: true,
-    data: {
-      ['GitHub vs Jenkins']: 'githubvsjenkins',
-      ['GitHub vs GitLab']: 'githubvsgitlab',
-      ['GitHub vs CircleCI']: 'githubvscircleci',
-      ['GitHub vs BitBucket']: 'githubvsvsbitbucket',
-      ['GitHub vs TravisCI']: 'githubvsvstravis',
-    },
-    sectionHeight: 1000,
-    offset: 100,
-  },
-  argTypes: {
-    data: {
-      name: 'Data',
-      description: 'Test data',
-      control: {
-        type: 'object',
-      },
-      table: {
-        category: 'Story customization',
-      },
-    },
-    sectionHeight: {
-      name: 'Section height',
-      description: 'Section height',
-      control: {
-        type: 'number',
-      },
-      table: {
-        category: 'Story customization',
-      },
-    },
-    offset: {
-      name: 'Offset',
-      description: 'Offset from the top of the page',
-      control: {
-        type: 'number',
-      },
-      table: {
-        category: 'Story customization',
-      },
-    },
-  },
 } as Meta<typeof AnchorNav>
 
-export const Default = ({data, ...args}: {data: MockData}) => {
-  return (
-    <AnchorNav {...args}>
-      <AnchorNav.Link href="#section">Section one</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section two</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section three</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section four</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section five</AnchorNav.Link>
-      <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
-    </AnchorNav>
-  )
-}
+export const Default = () => (
+  <AnchorNav>
+    <AnchorNav.Link href="#section">Section one</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section two</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section three</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section four</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section five</AnchorNav.Link>
+    <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
+  </AnchorNav>
+)
 
-export const Playground = ({data, ...args}: {data: MockData; offset: number; sectionHeight: number}) => {
+export const Playground = ({data, sectionHeight, actionText, secondaryAction, secondaryActionText, ...args}) => {
   return (
     <div style={{backgroundColor: 'var(--base-color-scale-red-0)'}}>
       <RedlineBackground height={args.offset}>
@@ -87,12 +41,13 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
         </Stack>
       </RedlineBackground>
       <AnchorNav {...args}>
-        {Object.entries(data).map(([key, value]) => (
+        {Object.entries(data as MockData).map(([key, value]) => (
           <AnchorNav.Link href={value} key={value}>
             {key}
           </AnchorNav.Link>
         ))}
-        <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
+        <AnchorNav.Action href="#">{actionText}</AnchorNav.Action>
+        {secondaryAction && <AnchorNav.SecondaryAction href="#">{secondaryActionText}</AnchorNav.SecondaryAction>}
       </AnchorNav>
       {/**
        *  The following markup is provided for demonstration purposes only.
@@ -105,15 +60,15 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
         style={{marginBottom: '100px'}}
         padding="none"
       >
-        {Object.entries(data).map(([key, value]) => (
+        {Object.entries(data as MockData).map(([key, value]) => (
           <RedlineBackground key={value}>
             <Stack
               key={value}
               id={value}
               direction="vertical"
               alignItems="flex-start"
               style={{
-                padding: `${args.sectionHeight / 2}px var(--base-size-24)`,
+                padding: `${sectionHeight / 2}px var(--base-size-24)`,
               }}
             >
               <Heading>{key}</Heading>
@@ -128,3 +83,72 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
     </div>
   )
 }
+Playground.argTypes = {
+  actionText: {
+    name: 'text',
+    control: {type: 'text'},
+    table: {
+      category: 'AnchorNav.Action',
+    },
+  },
+  secondaryAction: {
+    name: 'visible',
+    control: {type: 'boolean'},
+    table: {
+      category: 'AnchorNav.SecondaryAction',
+    },
+  },
+  secondaryActionText: {
+    name: 'text',
+    control: {type: 'text'},
+    table: {
+      category: 'AnchorNav.SecondaryAction',
+    },
+  },
+  data: {
+    name: 'Data',
+    description: 'Test data',
+    control: {
+      type: 'object',
+    },
+    table: {
+      category: 'Story customization',
+    },
+  },
+  sectionHeight: {
+    name: 'Section height',
+    description: 'Section height',
+    control: {
+      type: 'number',
+    },
+    table: {
+      category: 'Story customization',
+    },
+  },
+  offset: {
+    name: 'Offset',
+    description: 'Offset from the top of the page',
+    control: {
+      type: 'number',
+    },
+    table: {
+      category: 'Story customization',
+    },
+  },
+}
+Playground.args = {
+  hideUntilSticky: false,
+  enableDefaultBgColor: false,
+  actionText: 'Sign up',
+  secondaryAction: false,
+  secondaryActionText: 'Learn more',
+  data: {
+    ['GitHub vs Jenkins']: 'githubvsjenkins',
+    ['GitHub vs GitLab']: 'githubvsgitlab',
+    ['GitHub vs CircleCI']: 'githubvscircleci',
+    ['GitHub vs BitBucket']: 'githubvsvsbitbucket',
+    ['GitHub vs TravisCI']: 'githubvsvstravis',
+  },
+  sectionHeight: 1000,
+  offset: 100,
+}