feat(CC-batch-8): added batch 8

.gitignore

@@ -10,6 +10,7 @@ coverage
 .tmp
 .eslintcache
 package-lock.json
+.env
 
 # package managers
 yarn-error.log

packages/code-connect/components/Slider/Slider.figma.tsx

@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect';
+import { Button, Slider } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+// TODO: DESIGN: Define left/right actions
+// Documentation for Slider can be found at https://www.patternfly.org/components/slider
+
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3155-97956',
+  {
+    props: {
+      // boolean
+      isInputVisible: figma.boolean('Value input'),
+      endActions: figma.boolean('Right action', {
+        true: <Button variant="plain" aria-label="Plus" onClick={() => {}} icon={<PlusIcon />} />,
+        false: undefined
+      }),
+      startActions: figma.boolean('Left action', {
+        true: <Button variant="plain" aria-label="Minus" onClick={() => {}} icon={<MinusIcon />} />,
+        false: undefined
+      }),
+
+      // enum
+      areCustomStepsContinuous: figma.enum('Type', { Continuous: true }),
+      isDisabled: figma.enum('State', { Disabled: true }),
+      showTicks: figma.enum('Type', { Discrete: true })
+    },
+    example: (props) => (
+      <Slider
+        isInputVisible={props.isInputVisible}
+        showBoundaries={true}
+        startActions={props.startActions}
+        endActions={props.endActions}
+        areCustomStepsContinuous={props.areCustomStepsContinuous}
+        isDisabled={props.isDisabled}
+        showTicks={props.showTicks}
+        max={200}
+        min={0}
+        step={50}
+        value={100}
+      />
+    )
+  }
+);

packages/code-connect/components/Spinner/Spinner.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Spinner } from '@patternfly/react-core';
+
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
+figma.connect(Spinner, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=790-332', {
+  props: {
+    // enum
+    size: figma.enum('Size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+      xl: 'xl'
+    })
+  },
+  example: (props) => <Spinner aria-label="Loading..." size={props.size} />
+});

packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(Tabs, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6503', {
+  props: {
+    // boolean
+    inset: figma.boolean('Inset', {
+      true: {
+        default: 'insetMd'
+      },
+      false: {
+        default: 'insetNone'
+      }
+    }),
+
+    // enum
+    isBox: figma.enum('Type', {
+      Boxed: true,
+      'Boxed Light': true
+    }),
+
+    children: figma.children('Tab items - Horizontal')
+  },
+  example: (props) => (
+    <Tabs
+      activeKey="activeTabKey"
+      aria-label="Tabs example"
+      inset={props.inset}
+      isBox={props.isBox}
+      onSelect={() => {}}
+      role="region"
+    >
+      {props.children}
+    </Tabs>
+  )
+});

packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(
+  Tabs,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6284&m=dev',
+  {
+    props: {
+      // enum
+      isBox: figma.enum('Type', {
+        Boxed: true,
+        'Boxed Light': true
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Tabs
+        aria-label="Horizontal subtabs example"
+        isSubtab={true}
+        isBox={props.isBox}
+        onSelect={() => {}}
+        role="region"
+      >
+        {props.children}
+      </Tabs>
+    )
+  }
+);

packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx

@@ -0,0 +1,61 @@
+import figma from '@figma/code-connect';
+import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+const shareProps = {
+  icon: figma.boolean('Icon', {
+    true: (
+      <>
+        <TabTitleIcon>
+          <HelpIcon />
+        </TabTitleIcon>{' '}
+      </>
+    ),
+    false: undefined
+  }),
+  popover: figma.boolean('Help button', {
+    true: (
+      <Popover
+        headerContent={<div>Help popover</div>}
+        bodyContent={
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
+        }
+        footerContent="Popover footer"
+        triggerRef={ref}
+      />
+    ),
+    false: undefined
+  })
+};
+
+figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6161', {
+  props: {
+    ...shareProps,
+
+    // string
+    tabText: figma.string('Tab text'),
+
+    // enum
+    isDisabled: figma.enum('State', { Disabled: true })
+  },
+  example: (props) => (
+    <Tab
+      eventKey={0}
+      isDisabled={props.isDisabled}
+      actions={props.popover}
+      title={
+        <>
+          {props.icon}
+          <TabTitleText>{props.tabText}</TabTitleText>
+        </>
+      }
+    >
+      {props.tabText}
+    </Tab>
+  )
+});

packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx

@@ -0,0 +1,61 @@
+import figma from '@figma/code-connect';
+import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+const shareProps = {
+  popover: figma.boolean('Help icon', {
+    true: (
+      <Popover
+        headerContent={<div>Help popover</div>}
+        bodyContent={
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
+        }
+        footerContent="Popover footer"
+        triggerRef={ref}
+      />
+    ),
+    false: undefined
+  }),
+  icon: figma.boolean('Icon at start', {
+    true: (
+      <>
+        <TabTitleIcon>
+          <HelpIcon />
+        </TabTitleIcon>{' '}
+      </>
+    ),
+    false: undefined
+  })
+};
+
+figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6407', {
+  props: {
+    ...shareProps,
+
+    // string
+    tabText: figma.string('Text'),
+
+    // enum
+    isDisabled: figma.enum('State', { Disabled: true })
+  },
+  example: (props) => (
+    <Tab
+      eventKey={0}
+      isDisabled={props.isDisabled}
+      actions={props.popover}
+      title={
+        <>
+          {props.icon}
+          <TabTitleText>{props.tabText}</TabTitleText>
+        </>
+      }
+    >
+      {props.tabText}
+    </Tab>
+  )
+});

packages/code-connect/components/Tabs/VerticalTabs.figma.tsx

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(Tabs, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6656', {
+  props: {
+    // enum
+    isExpandable: figma.enum('Type', {
+      Expandable: {
+        default: 'expandable'
+      },
+      false: undefined
+    }),
+    isBox: figma.enum('Type', {
+      Boxed: true,
+      'Boxed Light': true
+    }),
+    inset: figma.enum('Type', {
+      Inset: { default: 'insetMd' },
+      'Inset Boxed': { default: 'insetMd' }
+    }),
+
+    children: figma.children('Tab items - Vertical')
+  },
+  example: (props) => (
+    <Tabs isBox={props.isBox} isVertical={true} onSelect={() => {}} role="region">
+      {props.children}
+    </Tabs>
+  )
+});

packages/code-connect/components/TimeStamp/Timestamp.figma.tsx

@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+// TODO: DESIGN: Refine intent, enum/dropdown options confuse date and time formats. They shoudd be separated
+// Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
+
+figma.connect(
+  Timestamp,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7472-6718',
+  {
+    props: {
+      // string
+      defaultTimestampContent: figma.string('✏️ Default timestamp content'),
+
+      // boolean
+      tooltip: figma.boolean('With tooltip underline', {
+        true: { variant: TimestampTooltipVariant.default },
+        false: undefined
+      }),
+
+      // enum
+      date: figma.enum('Format', {
+        Default: figma.string('✏️ Default timestamp content'),
+        'Without time': figma.string('✏️ Without time'),
+        'Without day': figma.string('✏️ Without day'),
+        Abbreviated: figma.string('✏️ Without time'),
+        Numberic: figma.string('✏️ Without time'),
+        'Custom content': figma.string('✏️ Without time')
+      })
+    },
+    example: (props) => <Timestamp tooltip={props.tooltip} date={props.date} />
+  }
+);

packages/code-connect/components/ToggleGroup/BaseComponentsToggleGroupsParts.figma.tsx

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { ToggleGroupItem } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
+figma.connect(
+  ToggleGroupItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2089-5606&m=dev',
+  {
+    props: {
+      // boolean
+      icon: figma.boolean('Has icon', {
+        true: <BellIcon />,
+        false: undefined
+      }),
+      text: figma.boolean('Has text', {
+        true: figma.string('Text'),
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true }),
+      isSelected: figma.enum('State', { Selected: true })
+    },
+    example: (props) => (
+      <ToggleGroupItem
+        buttonId="toggle-group-single"
+        icon={props.icon}
+        isDisabled={props.isDisabled}
+        isSelected={props.isSelected}
+        text={props.text}
+        onChange={() => {}}
+      />
+    )
+  }
+);

packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { ToggleGroup } from '@patternfly/react-core';
+
+// Documentation for ToggleGroup can be found at https://www.patternfly.org/components/toggle-group
+
+figma.connect(
+  ToggleGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7644-56919',
+  {
+    props: {
+      // enum
+      isCompact: figma.enum('Size', {
+        Default: undefined,
+        Compact: 'compact'
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <ToggleGroup aria-label="Toggle group example" isCompact={props.isCompact}>
+        {props.children}
+      </ToggleGroup>
+    )
+  }
+);