chore(code-connect): test setup & basic implementation

.gitignore

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

figma.config.json

@@ -0,0 +1,20 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "label": "PF-React",
+    "importPaths": {
+      "packages/react-core/src/*": "@patternfly/react-core"
+    },
+    "paths": {
+      "./next": ["packages/react-core/src/next"],
+      "./deprecated": ["packages/react-core/src/deprecated"]
+    },
+    "include": ["packages/react-core/src/components/**/*"],
+    "exclude": [
+      "packages/react-core/src/components/**/__tests__/*",
+      "packages/react-core/src/components/**/_tests_/*",
+      "packages/react-core/src/components/**/examples/*",
+      "packages/react-core/src/components/assets/*"
+    ]
+  }
+}

package.json

@@ -120,5 +120,8 @@
       "packages/*",
       "packages/react-integration/demo-app-ts"
     ]
+  },
+  "dependencies": {
+    "@figma/code-connect": "^1.2.4"
   }
 }

packages/react-core/src/components/AboutModal/AboutModal.figma.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { AboutModal } from './AboutModal';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  AboutModal,
+  'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=2879-13973&t=JTehBU2pTTE3vVQx-4',
+  {
+    props: {
+      productName: figma.string('Product name')
+    },
+    example: ({ productName }) => (
+      <AboutModal
+        isOpen={true}
+        onClose={() => {}}
+        brandImageAlt="image alt text"
+        brandImageSrc="/assets/brand_image_src.jpg"
+        backgroundImageSrc="/assets/background_image_src.jpg"
+        productName={productName}
+        trademark={'Sample footer trademark text'}
+      >
+        {'About modal children content here'}
+      </AboutModal>
+    )
+  }
+);

packages/react-core/src/components/ActionList/ActionList.figma.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ActionList, ActionListGroup, ActionListItem } from './index';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+// default original
+// figma.connect(
+//   ActionList,
+//   'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=6780-15839&m=dev',
+//   {
+//     props: {
+//       withOptionalSteps: figma.boolean('With optional steps'),
+//       type: figma.enum('Type', {
+//         'Single group': 'single-group',
+//         'Single w Kebab': 'single-w-kebab',
+//         'Action icons only': 'action-icons-only',
+//         'Wizard (Default)': 'wizard--default-',
+//         'modal form list': 'modal-form-list',
+//         'Multiple groups': 'multiple-groups'
+//       })
+//     },
+//     example: (props) => <ActionList />
+//   }
+// );
+
+figma.connect(
+  ActionList,
+  'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=6780-15839&m=dev',
+  {
+    // variant: { Type: 'Single group' },
+    props: {
+      children: figma.children('*')
+    },
+    example: ({ children }) => (
+      <ActionList>
+        {/* Example code, note each button should be wrapped
+          in an ActionListItem and groups of ActionListItems
+          should be contained in separate ActionListGroup */}
+        <ActionListGroup>
+          <ActionListItem>{children}</ActionListItem>
+        </ActionListGroup>
+      </ActionList>
+    )
+  }
+);

packages/react-core/src/components/Avatar/Avatar.figma.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Avatar } from './Avatar';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Avatar, 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1561-4342&m=dev', {
+  props: {
+    isBordered: figma.boolean('Bordered'),
+    size: figma.enum('Size', {
+      small: 'sm',
+      med: 'md',
+      lg: 'lg',
+      XL: 'xl'
+    })
+  },
+  example: (props) => <Avatar alt="avatar" {...props} />
+});

packages/react-core/src/components/BackToTop/BackToTop.figma.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BackToTop } from './BackToTop';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  BackToTop,
+  'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1521-958&m=dev',
+  {
+    props: {
+      title: figma.string('Text')
+    },
+    example: ({ title }) => <BackToTop title={title} />
+  }
+);

packages/react-core/src/components/Backdrop/Backdrop.figma.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Backdrop } from './Backdrop';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Backdrop,
+  'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=2873-2900&m=dev',
+  {
+    props: {},
+    example: () => <Backdrop />
+  }
+);

packages/react-core/src/components/BackgroundImage/BackgroundImage.figma.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BackgroundImage } from './BackgroundImage';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  BackgroundImage,
+  'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=2722-13543&m=dev',
+  {
+    props: {},
+    example: () => <BackgroundImage src="/assets/images/pf-background.svg" />
+  }
+);

packages/react-core/src/components/Badge/Badge.figma.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Badge } from './Badge';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Badge, 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1259-1132&m=dev', {
+  props: {
+    text: figma.string('Text'),
+    isDisabled: figma.enum('Type', { disabled: true }),
+    isRead: figma.enum('Type', { Read: true }),
+    screenReaderText: figma.enum('Type', { Unread: 'Unread Messages' })
+  },
+  example: ({ text, ...props }) => <Badge {...props}>{text}</Badge>
+});

packages/react-core/src/components/Button/BlockButton.figma.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from './Button';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Button, 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1259-800&m=dev', {
+  props: {
+    text: figma.string('Text'),
+    isDisabled: figma.enum('State', {
+      Disabled: true
+    }),
+    icon: figma.children(['IconWrapper', 'Icon'])
+  },
+  example: ({ text, ...props }) => (
+    <Button isBlock {...props}>
+      {text}
+    </Button>
+  )
+});

packages/react-core/src/components/Button/Button.figma.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button } from './Button';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Button, 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1259-678&m=dev', {
+  props: {
+    variant: figma.enum('Type', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      'Secondary Danger': 'secondary',
+      'Secondary Progress': 'secondary',
+      Tertiary: 'tertiary',
+      Danger: 'danger',
+      Warning: 'warning'
+    }),
+    size: figma.enum('Size', {
+      Default: undefined,
+      Small: 'sm'
+    }),
+    isDanger: figma.enum('Type', {
+      'Secondary Danger': true
+    }),
+    isDisabled: figma.enum('State', {
+      Disabled: true
+    }),
+    iconPosition: figma.boolean('Icon right', {
+      true: 'end',
+      false: undefined
+    }),
+    icon: figma.children(['IconWrapper', 'Icon']),
+    text: figma.string('✏️ Text'),
+    isLoading: figma.enum('Type', {
+      Progress: true,
+      'Secondary Progress': true
+    }),
+    spinnerAriaValueText: figma.enum('Type', {
+      Progress: 'Loading',
+      'Secondary Progress': 'Loading'
+    }),
+    spinnerAriaLabel: figma.enum('Type', {
+      Progress: 'Content being loaded',
+      'Secondary Progress': 'Content being loaded'
+    })
+  },
+  example: ({ text, ...props }) => <Button {...props}>{text}</Button>
+});

packages/react-core/src/components/Button/CTAButton.figma.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button } from './Button';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Button, 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1259-778&m=dev', {
+  props: {
+    text: figma.string('Text'),
+    variant: figma.enum('Type', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Tertiary: 'tertiary',
+      Inline: 'link'
+    }),
+    isInline: figma.enum('Type', {
+      Inline: true
+    }),
+    icon: figma.children(['IconWrapper', 'Icon'])
+  },
+  example: ({ text, ...props }) => (
+    <Button {...props} size="lg">
+      {text}
+    </Button>
+  )
+});

packages/react-core/src/components/Button/IconButtonPlainButton.figma.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from './Button';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Button, 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=1259-736&m=dev', {
+  props: {
+    noPadding: figma.enum('Type', {
+      'No padding': true
+    }),
+    isDisabled: figma.enum('State', {
+      Disabled: true
+    }),
+    icon: figma.children(['IconWrapper', 'Icon'])
+  },
+  example: (props) => <Button variant="plain" aria-label="Action" {...props} />
+});