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

packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { JumpLinksItem } from '@patternfly/react-core';
+
+// TODO: DESIGN: FIGMA: Remove icons, help popup, and close button
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinksItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5286-5330',
+  {
+    props: {
+      // string
+      tabText: figma.string('Tab Text'),
+
+      // enum
+      isActive: figma.enum('State', { Selected: true })
+    },
+    example: (props) => (
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+      </JumpLinksItem>
+    )
+  }
+);

packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx

@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect';
+import { JumpLinksItem } from '@patternfly/react-core';
+
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinksItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8306',
+  {
+    props: {
+      // string
+      tabText: figma.string('Tab Text'),
+
+      // enum
+      isActive: figma.enum('State', { Selected: true })
+    },
+    example: (props) => (
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+      </JumpLinksItem>
+    )
+  }
+);

packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { JumpLinks } from '@patternfly/react-core';
+
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinks,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8644-150823',
+  {
+    props: {
+      // boolean
+      label: figma.boolean('Show label', {
+        true: 'Jump to section',
+        false: undefined
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <JumpLinks aria-label={props.label} label={props.label}>
+        {props.children}
+      </JumpLinks>
+    )
+  }
+);

packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { JumpLinks } from '@patternfly/react-core';
+
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinks,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8542',
+  {
+    props: {
+      // boolean
+      label: figma.boolean('Show Label', {
+        true: 'Jump to section',
+        false: undefined
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <JumpLinks aria-label={props.label} isVertical label={props.label}>
+        {props.children}
+      </JumpLinks>
+    )
+  }
+);

packages/code-connect/components/Label/LabelGroups.figma.tsx

@@ -0,0 +1,230 @@
+import figma from '@figma/code-connect';
+import { Label, LabelGroup } from '@patternfly/react-core';
+
+// Documentation for LabelGroups can be found at https://www.patternfly.org/components/label
+
+const sharedProps = {
+  closableLabels: (
+    <>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+    </>
+  ),
+  editableLabels: (
+    <>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label1'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label1'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label2'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label3'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label4'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label5'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label6'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label7'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label8'
+        }}
+      >
+        Label
+      </Label>
+    </>
+  )
+};
+
+figma.connect(
+  LabelGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
+  {
+    props: {
+      ...sharedProps,
+      // boolean
+      numLabels: figma.boolean('Has collapsed labels', {
+        true: 6,
+        false: undefined
+      }),
+
+      // enum
+      addLabelControl: figma.enum('Type', {
+        'Label management': (
+          <Label variant="add" onClick={() => {}}>
+            Add label
+          </Label>
+        )
+      })
+    },
+    example: (props) => (
+      <LabelGroup
+        addLabelControl={props.addLabelControl}
+        categoryName="Group label"
+        isClosable
+        numLabels={props.numLabels}
+        onClick={() => {}}
+      >
+        {props.closableLabels}
+      </LabelGroup>
+    )
+  }
+);
+
+figma.connect(
+  LabelGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
+  {
+    variant: { Type: 'Label management' },
+    props: {
+      ...sharedProps,
+      // boolean
+      numLabels: figma.boolean('Has collapsed labels', {
+        true: 6,
+        false: undefined
+      }),
+
+      // enum
+      addLabelControl: figma.enum('Type', {
+        'Label management': (
+          <Label variant="add" onClick={() => {}}>
+            Add label
+          </Label>
+        )
+      })
+    },
+    example: (props) => (
+      <LabelGroup
+        addLabelControl={props.addLabelControl}
+        categoryName="Group label"
+        isClosable
+        numLabels={props.numLabels}
+        onClick={() => {}}
+      >
+        {props.editableLabels}
+      </LabelGroup>
+    )
+  }
+);

packages/code-connect/components/Label/LabelInGroup.figma.tsx

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Badge, Label } from '@patternfly/react-core';
+
+// TODO: DESIGN: Reconfigure how numlabels is set. Currently, the text string "more" is not customizable
+// TODO: DESIGN: Label group should contain label components
+
+// NOTE: "Label overflow" doesn't appear to be necessary
+// Documentation for Label can be found at https://www.patternfly.org/components/label-group
+
+figma.connect(Label, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1067', {
+  props: {
+    labelText: figma.string('Label text'),
+    isCloseable: figma.boolean('Has Close button', {
+      true: `{() => {}}`,
+      false: undefined
+    }),
+    badge: figma.boolean('Has counter', {
+      true: <Badge>06</Badge>,
+      false: undefined
+    })
+  },
+  example: (props) => (
+    <Label onClose={props.isCloseable}>
+      {props.labelText}
+      {props.badge}
+    </Label>
+  )
+});