feat(CC-button): added and validated button

packages/code-connect/components/Button/BlockButton.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Block Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-800', {
+  props: {
+    buttonText: figma.string('Text'),
+    isClicked: figma.enum('State', { Clicked: true }),
+    isDisabled: figma.enum('State', { Disabled: true }),
+    iconPosition: figma.boolean('Icon at end', { true: 'end', false: undefined })
+  },
+  example: (props) => (
+    <Button isClicked={props.isClicked} isDisabled={props.isDisabled} iconPosition={props.iconPosition} isBlock>
+      {props.buttonText}
+    </Button>
+  )
+});

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

@@ -0,0 +1,87 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-678', {
+  props: {
+    // string
+    buttonText: figma.string('Text'),
+
+    // boolean
+    icon: figma.boolean('Icon at start', {
+      true: <ArrowRightIcon />,
+      false: undefined
+    }),
+    iconPosition: figma.boolean('Icon at end', {
+      true: 'end',
+      false: undefined
+    }),
+    countOptions: figma.boolean('Count', {
+      true: {
+        count: '00',
+        isRead: false,
+        className: 'custom-badge-unread'
+      }
+    }),
+
+    // enum
+    isClicked: figma.enum('State', { Clicked: true }),
+    id: figma.enum('Type', {
+      Progress: 'loading-button',
+      'Secondary progress': 'loading-button'
+    }),
+    isDanger: figma.enum('Type', {
+      Danger: true,
+      'Secondary danger': true
+    }),
+    isDisabled: figma.enum('State', { Disabled: true }),
+    isExpanded: figma.enum('State', { Expanded: true }),
+    isLoading: figma.enum('State', {
+      Progress: {
+        loadingProps: {
+          spinnerAriaValueText: 'Spinner aria value text',
+          spinnerAriaLabelledBy: 'Spinner aria labelled by',
+          spinnerAriaLabel: 'Spinner aria label',
+          isLoading: true
+        },
+        onClick: () => {}
+      },
+      'Secondary progress': {
+        loadingProps: {
+          spinnerAriaValueText: 'Spinner aria value text',
+          spinnerAriaLabelledBy: 'Spinner aria labelled by',
+          spinnerAriaLabel: 'Spinner aria label',
+          isLoading: true
+        },
+        onClick: () => {}
+      }
+    }),
+    size: figma.enum('Size', { Small: 'sm' }),
+    variant: figma.enum('Type', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Tertiary: 'tertiary',
+      Warning: 'warning',
+      'Secondary danger': 'secondary',
+      'Secondary progress': 'secondary'
+    })
+  },
+  example: (props) => (
+    <Button
+      countOptions={props.countOptions}
+      icon={props.icon}
+      iconPosition={props.icon}
+      id={props.id}
+      isClicked={props.isClicked}
+      isDisabled={props.isDisabled}
+      isDanger={props.isDanger}
+      isLoading={props.isLoading}
+      size={props.size}
+      variant={props.variant}
+    >
+      {props.buttonText}
+    </Button>
+  )
+});

packages/code-connect/components/Button/CTAButton.figma.tsx

@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+
+// CTA Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-778', {
+  props: {
+    buttonText: figma.string('Text'),
+    icon: figma.enum('Type', { Inline: <ArrowRightIcon /> }),
+    iconPosition: figma.enum('Type', { Inline: 'end' }),
+    variant: figma.enum('Type', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Tertiary: 'tertiary',
+      Link: 'link'
+    })
+  },
+  example: (props) => (
+    <Button icon={props.icon} iconPosition={props.iconPosition} variant={props.variant} size="lg">
+      {props.buttonText}
+    </Button>
+  )
+});

packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+// Icon Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-736', {
+  props: {
+    isClicked: figma.enum('State', { Clicked: true }),
+    isDisabled: figma.enum('State', { Disabled: true }),
+    noPadding: figma.enum('Type', { 'No padding': true })
+  },
+  example: (props) => (
+    <Button
+      icon={<EllipsisIcon />}
+      isClicked={props.isClicked}
+      isDisabled={props.isDisabled}
+      hasNoPadding={props.noPadding}
+    />
+  )
+});

packages/code-connect/components/Button/InlineLink.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Inline Link
+figma.connect(
+  Button,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1291-2153',
+  {
+    props: {
+      buttonText: figma.string('Text'),
+      isClicked: figma.enum('State', { Visited: 'clicked' }),
+      isDisabled: figma.enum('State', { Disabled: true })
+    },
+    example: (props) => (
+      <Button
+        component="span"
+        isClicked={props.isClicked}
+        isDisabled={props.isDisabled}
+        isInline={true}
+        variant="link"
+        onKeyDown={() => {}}
+      >
+        {props.buttonText}
+      </Button>
+    )
+  }
+);

packages/code-connect/components/Button/LinkButton.figma.tsx

@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Link Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-745', {
+  props: {
+    countOptions: figma.enum('Type', {
+      'Button with count': {
+        count: '00',
+        isRead: false
+      }
+    }),
+    isClicked: figma.enum('State', { Clicked: true }),
+    isDisabled: figma.enum('State', { Disabled: true }),
+    isDanger: figma.enum('Type', { Danger: true }),
+    icon: figma.boolean('Icon at start', {
+      true: figma.children('IconWrapper'),
+      false: undefined
+    }),
+    iconPosition: figma.boolean('Icon at end', {
+      true: 'end',
+      false: undefined
+    }),
+    isLoading: figma.enum('Type', { Progress: true }),
+    size: figma.enum('Size', { Small: 'sm' }),
+    variant: figma.enum('Type', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Tertiary: 'tertiary',
+      Warning: 'warning',
+      'Secondary danger': 'secondary',
+      'Secondary progress': 'secondary'
+    })
+  },
+  example: (props) => (
+    <Button
+      countOptions={props.countOptions}
+      icon={props.icon}
+      iconPosition={props.iconPosition}
+      isClicked={props.isClicked}
+      isDisabled={props.isDisabled}
+      isDanger={props.isDanger}
+      isLoading={props.isLoading}
+      size={props.size}
+      variant={props.variant}
+    >
+      Button
+    </Button>
+  )
+});

packages/code-connect/components/Button/StatefulButton.figma.tsx

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+// Stateful Button
+figma.connect(
+  Button,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5805-20130',
+  {
+    props: {
+      state: figma.enum('Type', {
+        Read: 'read',
+        Unread: 'unread',
+        'Unread - Needs attention': 'attention'
+      }),
+      icon: figma.boolean('Icon', {
+        true: <BellIcon />,
+        false: undefined
+      }),
+      count: figma.string('Value')
+    },
+    example: (props) => (
+      <Button icon={props.icon} state={props.state} variant="stateful">
+        {props.count} <span className="pf-v6-screen-reader">items</span>
+      </Button>
+    )
+  }
+);

packages/code-connect/figma.config.json

@@ -1,13 +1,10 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
-    ],
+    "include": ["components/Button/*.tsx"],
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
+    },
     "paths": {
       "src/components": "src/components"
     },
@@ -30,4 +27,4 @@
       }
     }
   }
-}
+}