storybook updates

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.Tab.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import type {Meta, StoryFn} from '@storybook/react'
+import UnderlinePanels from './UnderlinePanels'
+import {PeopleIcon, TerminalIcon, CodespacesIcon} from '@primer/octicons-react'
+import {OcticonArgType} from '../../utils/story-helpers'
+
+export default {
+  title: 'Experimental/Components/UnderlinePanels.Tab',
+  component: UnderlinePanels.Tab,
+  decorators: [
+    Story => {
+      return (
+        <UnderlinePanels aria-label="Select a tab">
+          <Story />
+        </UnderlinePanels>
+      )
+    },
+  ],
+  parameters: {
+    controls: {
+      expanded: true,
+      exclude: ['as'],
+    },
+  },
+  args: {
+    'aria-selected': true,
+    counter: '14K',
+    icon: PeopleIcon,
+  },
+  argTypes: {
+    'aria-selected': {
+      control: {
+        type: 'boolean',
+      },
+    },
+    counter: {
+      type: 'string',
+    },
+    icon: OcticonArgType([PeopleIcon, TerminalIcon, CodespacesIcon]),
+  },
+} as Meta<typeof UnderlinePanels.Tab>
+
+export const Playground: StoryFn = args => {
+  return <UnderlinePanels.Tab {...args}>Users{args.children}</UnderlinePanels.Tab>
+}

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.stories.tsx

@@ -1,20 +1,75 @@
 import React from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import UnderlinePanels from './UnderlinePanels'
-import type {ComponentProps} from '../../utils/types'
 
-export default {
+const meta: Meta<typeof UnderlinePanels> = {
   title: 'Experimental/Components/UnderlinePanels',
   component: UnderlinePanels,
-} as Meta<ComponentProps<typeof UnderlinePanels>>
+  parameters: {
+    controls: {
+      expanded: true,
+    },
+  },
+  argTypes: {
+    'aria-label': {
+      type: {
+        name: 'string',
+      },
+    },
+    'aria-labelledby': {
+      type: {
+        name: 'string',
+      },
+    },
+    id: {
+      type: {
+        name: 'string',
+      },
+    },
+    loadingCounters: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    'aria-label': 'Select a tab',
+    'aria-labelledby': 'tab',
+    id: 'test',
+    loadingCounters: false,
+  },
+}
 
-export const Default = () => (
-  <UnderlinePanels aria-label="Select a tab">
-    <UnderlinePanels.Tab>Tab 1</UnderlinePanels.Tab>
-    <UnderlinePanels.Tab>Tab 2</UnderlinePanels.Tab>
-    <UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab>
-    <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>
-    <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
-    <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>
-  </UnderlinePanels>
-)
+export default meta
+
+export const Default: StoryFn<typeof UnderlinePanels> = () => {
+  const tabs = ['Terminal', 'Output', 'Problems', 'Ports', 'Comments']
+  return (
+    <UnderlinePanels aria-label="Select a tab">
+      {tabs.map((tab: string, index: number) => (
+        <UnderlinePanels.Tab key={index} aria-selected={index === 0 ? true : undefined}>
+          {tab}
+        </UnderlinePanels.Tab>
+      ))}
+      {tabs.map((tab: string, index: number) => (
+        <UnderlinePanels.Panel key={index}>{tab}</UnderlinePanels.Panel>
+      ))}
+    </UnderlinePanels>
+  )
+}
+
+export const Playgound: StoryFn<typeof UnderlinePanels> = args => {
+  const tabs = ['Terminal', 'Output', 'Problems', 'Ports', 'Comments']
+  return (
+    <UnderlinePanels {...args}>
+      {tabs.map((tab: string, index: number) => (
+        <UnderlinePanels.Tab key={index} aria-selected={index === 0 ? true : undefined}>
+          {tab}
+        </UnderlinePanels.Tab>
+      ))}
+      {tabs.map((tab: string, index: number) => (
+        <UnderlinePanels.Panel key={index}>{tab}</UnderlinePanels.Panel>
+      ))}
+    </UnderlinePanels>
+  )
+}