feat(CC-button): added and validated button

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

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+// TODO: DESIGN: Define Icon left/right intent
+// Ex: Are the icons different or just on different sides?
+// The current configuration renders two icons separately
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1259-800&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // string
+      buttonText: figma.string('Text'),
+
+      // boolean
+      hasIcon: figma.boolean('Icon Left', {
+        true: <PlusCircleIcon />,
+        false: undefined
+      }),
+      iconPosition: figma.boolean('Icon Right', {
+        true: 'end',
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true })
+    },
+    example: (props) => (
+      <Button iconPosition={props.iconPosition} isBlock isDisabled={props.isDisabled} icon={props.hasIcon}>
+        {props.buttonText}
+      </Button>
+    )
+  }
+);

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

@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+// TODO: DESIGN: Define Icon left/right intent
+// Ex: Are the icons different or just on different sides?
+// The current configuration renders two icons separately
+
+// TODO: DESIGN: Add count options to the button
+// TODO: DESIGN: Add isRead options to the button
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1259-678',
+  {
+    props: {
+      // string
+      buttonText: figma.string('Button text'),
+
+      // boolean
+      hasIcon: figma.boolean('Icon left', {
+        true: <PlusCircleIcon />,
+        false: undefined
+      }),
+      iconPosition: figma.boolean('Icon right', {
+        true: 'end',
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true }),
+      size: figma.enum('Size', { Small: 'sm' }),
+      variant: figma.enum('Type', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary',
+        Danger: 'danger',
+        Warning: 'warning'
+      }),
+
+      // Count options - handle logic at props level
+      countOptions: figma.boolean('Show Count', {
+        true: {
+          count: 0,
+          isRead: false
+        },
+        false: undefined
+      })
+    },
+    example: (props) => (
+      <Button
+        iconPosition={props.iconPosition}
+        isDisabled={props.isDisabled}
+        size={props.size}
+        variant={props.variant}
+        countOptions={props.countOptions}
+        icon={props.hasIcon}
+      >
+        {props.buttonText}
+      </Button>
+    )
+  }
+);

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1259-778&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // string
+      text: figma.string('Text'),
+
+      // enum
+      variant: figma.enum('Type', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary'
+      }),
+      isInline: figma.enum('Type', { Inline: true })
+    },
+    example: (props) => (
+      <Button size="lg" variant={props.variant}>
+        {props.text}
+      </Button>
+    )
+  }
+);

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

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1259-736&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // enum
+      isClicked: figma.enum('State', { Clicked: true }),
+      isDisabled: figma.enum('State', { Disabled: true }),
+
+      // variant
+      hasNoPadding: figma.enum('Type', { 'No padding': true })
+    },
+    example: (props) => (
+      <Button
+        aria-label="Icon button"
+        hasNoPadding={props.hasNoPadding}
+        icon={<TimesIcon />}
+        isClicked={props.isClicked}
+        isDisabled={props.isDisabled}
+        variant="plain"
+      />
+    )
+  }
+);

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

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1291-2153&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // strings
+      text: figma.string('Text'),
+
+      // boolean
+      hasIcon: figma.enum('Type', {
+        'Inline link external': <ExternalLinkSquareAltIcon />,
+        false: undefined
+      }),
+
+      // state
+      isDisabled: figma.enum('State', { Disabled: true })
+    },
+    example: (props) => (
+      <Button icon={props.hasIcon} isInline isDisabled={props.isDisabled} variant="link">
+        {props.text}
+      </Button>
+    )
+  }
+);

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

@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+// TODO: DESIGN: Define Icon left/right intent
+// Ex: Are the icons different or just on different sides?
+// The current configuration renders two icons separately
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1259-745&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // string
+      buttonText: figma.string('Text'),
+
+      // boolean
+      hasIcon: figma.boolean('Icon left', {
+        true: <PlusCircleIcon />,
+        false: undefined
+      }),
+      iconPosition: figma.boolean('Icon right', {
+        true: 'end',
+        false: undefined
+      }),
+
+      // enum
+      isClicked: figma.enum('State', { Clicked: true }),
+      isDanger: figma.enum('Type', { Danger: true }),
+      isDisabled: figma.enum('State', { Disabled: true }),
+      size: figma.enum('Size', { Small: 'sm' }),
+
+      variant: figma.enum('Type', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary'
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Button
+        icon={props.hasIcon}
+        isClicked={props.isClicked}
+        isDanger={props.isDanger}
+        isDisabled={props.isDisabled}
+        iconPosition={props.iconPosition}
+        size={props.size}
+        variant="link"
+      >
+        {props.buttonText}
+      </Button>
+    )
+  }
+);

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

@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3102-7154&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // enum
+      isClicked: figma.enum('State', { Clicked: true }),
+      isDisabled: figma.enum('State', { Disabled: true }),
+      leftOrRight: figma.enum('Left or Right', {
+        Left: 'left',
+        Right: 'right'
+      }),
+      variant: figma.enum('Type', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary'
+      }),
+
+      // string
+      text: figma.string('Text')
+    },
+    example: (props) => (
+      <Button isClicked={props.isClicked} isDisabled={props.isDisabled} variant={props.variant}>
+        {props.text}
+      </Button>
+    )
+  }
+);

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

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5805-20130&t=TMTA4Fpy1ljK4qQP-11',
+  {
+    props: {
+      // boolean
+      showIcon: figma.boolean('Show Icon', {
+        true: <BellIcon />,
+        false: undefined
+      }),
+      showText: figma.boolean('Show text', {
+        true: figma.string('Text ✏️'),
+        false: undefined
+      }),
+
+      // enum
+      state: figma.enum('Type', {
+        Read: 'read',
+        Unread: 'unread',
+        'Unread - Needs attention': 'attention'
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Button icon={props.showIcon} state={props.state} variant="stateful">
+        {props.showText}
+      </Button>
+    )
+  }
+);