Merge pull request #254 from omnifed/253-feature-code-connect-icon-bu…

…ttons

feat(figma): add IconButton CC

figma/figma.config.json

@@ -8,11 +8,13 @@
     ],
     "importPaths": {
       "@cerberus-design/react": "@cerberus/react",
-      "@cerberus-design/icons": "@cerberus/icons"
+      "@cerberus-design/icons": "@cerberus/icons",
+      "@cerberus-design/styled-system/*": "@cerberus/styled-system/*"
     },
     "paths": {
       "@cerberus-design/react": "node_modules/@cerberus/react",
-      "@cerberus-design/icons": "node_modules/@cerberus/icons"
+      "@cerberus-design/icons": "node_modules/@cerberus/icons",
+      "@cerberus-design/styled-system/*": "node_modules/@cerberus/styled-system/*"
     }
   }
 }

figma/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@cerberus-design/icons": "workspace:*",
     "@cerberus-design/react": "workspace:*",
+    "@cerberus-design/styled-system": "workspace:*",
     "react": "^18",
     "react-dom": "^18"
   },

figma/src/iconButton.figma.tsx

@@ -0,0 +1,72 @@
+import figma from '@figma/code-connect'
+import { IconButton } from '@cerberus-design/react'
+import { css } from '@cerberus-design/styled-system/css'
+
+const SELECTION =
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=7705-20494&m=dev'
+
+const imports = [
+  "import { IconButton } from '@cerberus/react'",
+  "import { css } from '@cerberus/styled-system/css'",
+]
+
+const props = {
+  palette: figma.enum('Palette', {
+    action: 'action',
+    danger: 'danger',
+  }),
+  usage: figma.enum('Usage', {
+    filled: 'filled',
+    outlined: 'outlined',
+    text: 'text',
+  }),
+  size: figma.enum('Size', {
+    sm: 'sm',
+    lg: 'lg',
+  }),
+  // Figma specific
+  icon: figma.children('*'),
+}
+
+figma.connect(IconButton, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return (
+      <IconButton
+        ariaLabel="ADD DESCRIPTIVE LABEL"
+        palette={props.palette}
+        usage={props.usage}
+        size={props.size}
+      >
+        {props.icon}
+      </IconButton>
+    )
+  },
+})
+
+figma.connect(IconButton, SELECTION, {
+  imports,
+  variant: {
+    Usage: 'text-alt',
+  },
+  props,
+  example: (props) => {
+    return (
+      <IconButton
+        ariaLabel="ADD DESCRIPTIVE LABEL"
+        className={css({
+          bgColor: 'action.bg.100.initial',
+          _hover: {
+            bgColor: 'action.bg.100.hover',
+          },
+        })}
+        palette="action"
+        usage={props.usage}
+        size={props.size}
+      >
+        {props.icon}
+      </IconButton>
+    )
+  },
+})