feat(CC): updated prop mapping

Author: mattnolting

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

@@ -1,26 +1,27 @@
-import { Avatar } from '@patternfly/react-core/dist/js/components/Avatar';
-import figma from '@figma/code-connect/react';
+import { Avatar } from 'src/components/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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1561-4342&m=dev',
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=1561-4342&m=dev',
   {
-    // reserve variables for mapping
-    // use props for Figma design file properties
     props: {
-      className: figma.className([
-        // automate size class application
-        figma.enum('Size', {
-          XL: 'pf-m-xl',
-          lg: 'pf-m-lg',
-          med: 'pf-m-md',
-          small: 'pf-m-sm'
-        }),
-
-        // automate bordered class application
-        figma.boolean('Bordered', { true: 'pf-m-bordered', false: '' })
-      ])
+      isBordered: figma.boolean('Bordered'),
+      size: figma.enum('Size', {
+        small: 'sm',
+        med: 'md',
+        lg: 'lg',
+        XL: 'xl'
+      })
     },
-    example: (props) => <Avatar alt="Avatar image" className={props.className} />
+    example: (props) => <Avatar alt="avatar" {...props} />
   }
 );

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

@@ -1,4 +1,4 @@
-import { BackgroundImage } from '@patternfly/react-core/dist/js/components/BackgroundImage';
+import { BackgroundImage } from 'src/components/BackgroundImage';
 import figma from '@figma/code-connect';
 
 /**
@@ -11,8 +11,9 @@ import figma from '@figma/code-connect';
 
 figma.connect(
   BackgroundImage,
-  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2722-13543&t=7hKW0DzmfHGhNQnn-11',
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2722-13543&m=dev',
   {
-    example: () => <BackgroundImage {...props} />
+    props: {},
+    example: () => <BackgroundImage src="/assets/images/pf-background.svg" />
   }
 );

packages/react-core/codeConnect/components/Banner.figma.tsx

@@ -1,4 +1,4 @@
-import { Banner } from '@patternfly/react-core/dist/js/components/Banner';
+import { Banner } from 'src/components/Banner';
 import figma from '@figma/code-connect';
 
 /** Status banner example */
@@ -7,19 +7,16 @@ figma.connect(
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev',
   {
     props: {
-      className: figma.className([
-        // automate size class application
-        figma.enum('Status', {
-          Success: 'success',
-          Warning: 'warning',
-          Danger: 'danger',
-          Info: 'info',
-          Custom: 'custom'
-        })
-      ])
+      status: figma.enum('Status', {
+        Success: 'success',
+        Warning: 'warning',
+        Danger: 'danger',
+        Info: 'info',
+        Custom: 'custom'
+      })
     },
     example: (props) => {
-      <Banner className={props.className} />;
+      <Banner status={props.status} />;
     }
   }
 );
@@ -30,23 +27,21 @@ figma.connect(
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-1443&m=dev',
   {
     props: {
-      className: figma.className([
-        // automate size class application
-        figma.enum('Color', {
-          Red: 'red',
-          Orangered: 'orangered',
-          Orange: 'orange',
-          Gold: 'gold',
-          Green: 'green',
-          Cyan: 'cyan',
-          Blue: 'blue',
-          Purple: 'purple',
-          Gray: 'gray'
-        })
-      ])
+      className: figma.className([]),
+      color: figma.enum('Color', {
+        Red: 'red',
+        Orangered: 'orangered',
+        Orange: 'orange',
+        Gold: 'gold',
+        Green: 'green',
+        Cyan: 'cyan',
+        Blue: 'blue',
+        Purple: 'purple',
+        Gray: 'gray'
+      })
     },
     example: (props) => {
-      <Banner className={props.className} />;
+      <Banner color={props.color} />;
     }
   }
-);
+);

packages/react-core/codeConnect/components/Brand.figma.tsx

@@ -1,6 +1,7 @@
-import { Brand } from '@patternfly/react-core/dist/js/components/Brand';
+import { Brand } from 'src/components/Brand';
 import figma from '@figma/code-connect';
 
+// Masthead logo
 figma.connect(
   Brand,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3644&m=dev',
@@ -9,14 +10,6 @@ figma.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(
   Brand,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev',