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

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

@@ -0,0 +1,48 @@
+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: FIGMA: 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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3155-97956&t=IzSunfrnw18ti37Y-11',
+  {
+    props: {
+      // boolean
+      isInputVisible: figma.boolean('Value input'),
+      minmaxValues: figma.boolean('Min/max values'),
+      valueInput: figma.boolean('Value input'),
+      startActions: figma.boolean('Left action', {
+        true: <Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<MinusIcon />} />,
+        false: undefined
+      }),
+      endActions: figma.boolean('Right action', {
+        true: <Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<PlusIcon />} />,
+        false: undefined
+      }),
+      // enum
+      isActive: figma.enum('State', { Active: true }),
+      isContinuous: figma.enum('Type', { Continuous: true }),
+      isDisabled: figma.enum('State', { Disabled: true }),
+      showTicks: figma.enum('Type', { Discrete: true })
+    },
+    example: (props) => (
+      <Slider
+        areCustomStepsContinuous={props.isContinuous}
+        isActive={props.isActive}
+        isInputVisible={props.isInputVisible}
+        isDisabled={props.isDisabled}
+        max={200}
+        step={50}
+        value={100}
+        showBoundaries={props.minmaxValues}
+        showTicks={props.showTicks}
+        startActions={props.startActions}
+        endActions={props.endActions}
+      />
+    )
+  }
+);

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

@@ -0,0 +1,21 @@
+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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-332&t=IzSunfrnw18ti37Y-11',
+  {
+    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/Splitter/Splitter.figma.tsx

@@ -0,0 +1,14 @@
+import figma from '@figma/code-connect';
+
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
+figma.connect('https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230', {
+  props: {
+    // enum
+    type: figma.enum('Type', {
+      Overlay: 'overlay',
+      Vertical: 'vertical'
+    })
+  },
+  example: (props) => <>{props.type}</>
+});

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

@@ -0,0 +1,29 @@
+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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583',
+  {
+    props: {
+      children: figma.children('*'),
+      isBox: figma.enum('Type', {
+        Boxed: true,
+        'Boxed Light': true
+      })
+    },
+    example: (props) => (
+      <Tabs
+        aria-label="Horizontal subtabs example"
+        isSubtab={true}
+        isBox={props.isBox}
+        onSelect={() => {}}
+        role="region"
+      >
+        {props.children}
+      </Tabs>
+    )
+  }
+);

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

@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect';
+import { Tab, TabAction, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-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
+
+figma.connect(
+  Tab,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6161',
+  {
+    props: {
+      // string
+      tabText: figma.string('Tab Text'),
+      // eventKey: figma.string('Event key'), // TODO: FIGMA: Add event key
+
+      // boolean
+      actions: figma.boolean('Help button', {
+        true: (ref: React.RefObject<HTMLDivElement>) => (
+          <>
+            <TabAction aria-label="Help action for tab" ref={ref}>
+              <HelpIcon />
+            </TabAction>
+            {helpPopover('Help popover for tab')}
+          </>
+        ),
+        false: undefined
+      }),
+      onClose: figma.boolean('Close button', {
+        true: () => {},
+        false: undefined
+      }),
+      hasIcon: figma.boolean('Has icon', {
+        true: (
+          <TabTitleIcon>
+            <UsersIcon />
+          </TabTitleIcon>
+        ),
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true })
+    },
+    example: (props) => (
+      <Tab
+        actions={props.actions}
+        aria-label="Tab context"
+        eventKey={0}
+        isDisabled={props.isDisabled}
+        onClose={props.onClose}
+        title={
+          <>
+            <TabTitleText>{props.tabText}</TabTitleText>
+            {props.hasIcon}
+          </>
+        }
+      >
+        {props.tabText} Content
+      </Tab>
+    )
+  }
+);

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

@@ -0,0 +1,23 @@
+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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6503',
+  {
+    props: {
+      children: figma.children('*'),
+      isBox: figma.enum('Type', {
+        Boxed: true,
+        'Boxed Light': true
+      })
+    },
+    example: (props) => (
+      <Tabs onSelect={() => {}} isBox={props.isBox} aria-label="Tabs example" role="region">
+        {props.children}
+      </Tabs>
+    )
+  }
+);

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

@@ -0,0 +1,62 @@
+import figma from '@figma/code-connect';
+import { Tab, TabAction, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-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
+
+figma.connect(
+  Tab,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6407',
+  {
+    props: {
+      // string
+      tabText: figma.string('Text'),
+
+      // boolean
+      actions: figma.boolean('Help icon', {
+        true: (ref: React.RefObject<HTMLDivElement>) => (
+          <>
+            <TabAction aria-label="Help action for tab" ref={ref}>
+              <HelpIcon />
+            </TabAction>
+            {helpPopover(`Help popover for tab`)}
+          </>
+        ),
+        false: undefined
+      }),
+      onClose: figma.boolean('Close Icon', {
+        true: () => {},
+        false: undefined
+      }),
+      hasIcon: figma.boolean('Has icon', {
+        true: (
+          <TabTitleIcon>
+            <UsersIcon />
+          </TabTitleIcon>
+        ),
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true })
+      // eventKey: figma.string('Event key'), // TODO: FIGMA: Add event key
+    },
+    example: (props) => (
+      <Tab
+        eventKey={0}
+        isDisabled={props.isDisabled}
+        onClose={props.onClose}
+        title={
+          <>
+            <TabTitleText>{props.tabText}</TabTitleText>
+            {props.hasIcon}
+          </>
+        }
+      >
+        {props.tabText} Content
+      </Tab>
+    )
+  }
+);

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

@@ -0,0 +1,33 @@
+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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6656',
+  {
+    props: {
+      children: figma.children('*'),
+      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' }
+      })
+    },
+    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,48 @@
+import figma from '@figma/code-connect';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+// TODO: FIGMA: 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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7472-6718',
+  {
+    props: {
+      // string
+      defaultTimestampContent: figma.string('✏️ Default timestamp content'),
+
+      // boolean
+      hasTooltip: figma.boolean('With tooltip underline', {
+        true: {
+          tooltip: { variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time (UTC)' }
+        },
+        false: undefined
+      }),
+
+      // enum
+      dateFormat: figma.enum('Format', {
+        Default: 'full',
+        'Without time': 'medium',
+        'Without day': undefined,
+        Abbreviated: 'short',
+        Numeric: 'numeric'
+      }),
+      timeFormat: figma.enum('Format', {
+        'Without time': undefined,
+        Abbreviated: 'short',
+        Numeric: 'numeric'
+      }),
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Timestamp
+        date={props.defaultTimestampContent}
+        timeFormat={props.timeFormat}
+        dateFormat={props.dateFormat}
+        dateContent={props.dateFormat}
+        tooltip={props.hasTooltip}
+      />
+    )
+  }
+);

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

@@ -0,0 +1,35 @@
+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
+      size: figma.enum('Size', {
+        Default: undefined,
+        Compact: 'compact'
+      }),
+
+      // nested props
+      leftItem: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+      middleItem1: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+      middleItem2: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+      rightItem: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => <ToggleGroup aria-label="Toggle group example">{props.children}</ToggleGroup>
+  }
+);