feat-CC-simple-components

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

@@ -0,0 +1,28 @@
+import { AboutModal } from '@patternfly/react-core/dist/js/components/AboutModal';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  AboutModal,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2879-13973&m=dev',
+  {
+    // reserve variables for mapping
+    // use props for Figma design file properties
+    props: {
+      productName: figma.string('Product name'),
+
+      // use `Content` ubiquitiously
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <AboutModal
+        backgroundImageSrc="/assets/background_image_src.jpg"
+        brandImageAlt="image alt text"
+        brandImageSrc="/assets/brand_image_src.jpg"
+        productName={props.productName}
+        trademark={'Sample footer trademark text'}
+      >
+        {props.children}
+      </AboutModal>
+    )
+  }
+);

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

@@ -0,0 +1,27 @@
+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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?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/codeConnect/components/BackToTop.figma.tsx

@@ -0,0 +1,12 @@
+import { BackToTop } from '@patternfly/react-core/dist/js/components/BackToTop';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1521-958&m=dev',
+  {
+    props: {
+      title: figma.string('Text')
+    },
+    example: (props) => <BackToTop title={props.title} />
+  }
+);

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

@@ -0,0 +1,19 @@
+import { BackgroundImage } from 'src/components/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/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2722-13543&m=dev',
+  {
+    props: {},
+    example: () => <BackgroundImage src="/assets/images/pf-background.svg" />
+  }
+);

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

@@ -0,0 +1,47 @@
+import { Banner } from 'src/components/Banner';
+import figma from '@figma/code-connect';
+
+/** Status banner example */
+figma.connect(
+  Banner,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Success: 'success',
+        Warning: 'warning',
+        Danger: 'danger',
+        Info: 'info',
+        Custom: 'custom'
+      })
+    },
+    example: (props) => {
+      <Banner status={props.status} />;
+    }
+  }
+);
+
+/** Non-Status banner example */
+figma.connect(
+  Banner,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-1443&m=dev',
+  {
+    props: {
+      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 color={props.color} />;
+    }
+  }
+);

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

@@ -0,0 +1,19 @@
+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',
+  {
+    example: () => <Brand alt="Brand" />
+  }
+);
+
+figma.connect(
+  Brand,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev',
+  {
+    example: () => <Brand alt="Brand" />
+  }
+);

packages/react-core/figma.config.json

@@ -0,0 +1,31 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "label": "PF-React",
+    "include": [
+      "codeConnect/*.tsx",
+      "codeConnect/components/*.tsx"
+    ],
+    "paths": {
+      "src/components": "src/components"
+    },
+    "aliases": {
+      "@patternfly/react-core": "."
+    },
+    "importPaths": {
+      "src/components": "src/components"
+    },
+    "options": {
+      "instanceSwapper": {
+        "enabled": true
+      },
+      "development": {
+        "enabled": true,
+        "verbose": true
+      },
+      "production": {
+        "enabled": false
+      }
+    }
+  }
+}