diff --git a/figma/figma.config.json b/figma/figma.config.json index 2ea399ff..4fe8ceb3 100644 --- a/figma/figma.config.json +++ b/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/*" } } } diff --git a/figma/package.json b/figma/package.json index 54a022fa..2f15ed75 100644 --- a/figma/package.json +++ b/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" }, diff --git a/figma/src/iconButton.figma.tsx b/figma/src/iconButton.figma.tsx new file mode 100644 index 00000000..4f88e3de --- /dev/null +++ b/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 ( + + {props.icon} + + ) + }, +}) + +figma.connect(IconButton, SELECTION, { + imports, + variant: { + Usage: 'text-alt', + }, + props, + example: (props) => { + return ( + + {props.icon} + + ) + }, +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f41fd0fc..4f2c3197 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -197,6 +197,9 @@ importers: '@cerberus-design/react': specifier: workspace:* version: link:../packages/react + '@cerberus-design/styled-system': + specifier: workspace:* + version: link:../packages/styled-system react: specifier: ^18 version: 18.3.1 @@ -228,7 +231,7 @@ importers: version: link:../../configs '@microsoft/api-extractor': specifier: ^7.46.2 - version: 7.46.2(@types/node@20.12.10) + version: 7.46.2(@types/node@20.14.10) tsup: specifier: ^8.0.2 version: 8.0.2(@microsoft/api-extractor@7.46.2)(postcss@8.4.38)(typescript@5.4.5) @@ -247,7 +250,7 @@ importers: version: link:../../configs '@microsoft/api-extractor': specifier: ^7.46.2 - version: 7.46.2(@types/node@20.12.10) + version: 7.46.2(@types/node@20.14.10) '@pandacss/dev': specifier: ^0.40.1 version: 0.40.1(typescript@5.4.5) @@ -256,7 +259,7 @@ importers: version: 0.40.1 tsup: specifier: ^8.0.2 - version: 8.0.2(@microsoft/api-extractor@7.46.2(@types/node@20.12.10))(postcss@8.4.35)(typescript@5.4.5) + version: 8.0.2(@microsoft/api-extractor@7.46.2(@types/node@20.14.10))(postcss@8.4.35)(typescript@5.4.5) packages/react: dependencies: @@ -281,7 +284,7 @@ importers: version: link:../styled-system '@microsoft/api-extractor': specifier: ^7.46.2 - version: 7.46.2(@types/node@20.12.10) + version: 7.46.2(@types/node@20.14.10) '@types/react': specifier: ^18 version: 18.3.1 @@ -293,7 +296,7 @@ importers: version: 18.3.1(react@18.3.1) tsup: specifier: ^8.1.0 - version: 8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.12.10))(postcss@8.4.38)(typescript@5.4.5) + version: 8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.14.10))(postcss@8.4.35)(typescript@5.4.5) packages/styled-system: devDependencies: @@ -2134,7 +2137,6 @@ packages: bun@1.1.6: resolution: {integrity: sha512-0oKx5dVZ8LpsAvXdW2DTR5Zt3KS81Ifjx9T2ma7RjDPKbvGIlDXOPt++tr1SndxhFNFsMFeE4i6VKvlL7IR0Zw==} - cpu: [arm64, x64] os: [darwin, linux, win32] hasBin: true @@ -5590,23 +5592,23 @@ snapshots: '@types/react': 18.3.1 react: 18.3.1 - '@microsoft/api-extractor-model@7.29.2(@types/node@20.12.10)': + '@microsoft/api-extractor-model@7.29.2(@types/node@20.14.10)': dependencies: '@microsoft/tsdoc': 0.15.0 '@microsoft/tsdoc-config': 0.17.0 - '@rushstack/node-core-library': 5.4.1(@types/node@20.12.10) + '@rushstack/node-core-library': 5.4.1(@types/node@20.14.10) transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor@7.46.2(@types/node@20.12.10)': + '@microsoft/api-extractor@7.46.2(@types/node@20.14.10)': dependencies: - '@microsoft/api-extractor-model': 7.29.2(@types/node@20.12.10) + '@microsoft/api-extractor-model': 7.29.2(@types/node@20.14.10) '@microsoft/tsdoc': 0.15.0 '@microsoft/tsdoc-config': 0.17.0 - '@rushstack/node-core-library': 5.4.1(@types/node@20.12.10) + '@rushstack/node-core-library': 5.4.1(@types/node@20.14.10) '@rushstack/rig-package': 0.5.2 - '@rushstack/terminal': 0.13.0(@types/node@20.12.10) - '@rushstack/ts-command-line': 4.22.0(@types/node@20.12.10) + '@rushstack/terminal': 0.13.0(@types/node@20.14.10) + '@rushstack/ts-command-line': 4.22.0(@types/node@20.14.10) lodash: 4.17.21 minimatch: 3.0.8 resolve: 1.22.8 @@ -6152,7 +6154,7 @@ snapshots: '@rushstack/eslint-patch@1.10.2': {} - '@rushstack/node-core-library@5.4.1(@types/node@20.12.10)': + '@rushstack/node-core-library@5.4.1(@types/node@20.14.10)': dependencies: ajv: 8.13.0 ajv-draft-04: 1.0.0(ajv@8.13.0) @@ -6163,23 +6165,23 @@ snapshots: resolve: 1.22.8 semver: 7.5.4 optionalDependencies: - '@types/node': 20.12.10 + '@types/node': 20.14.10 '@rushstack/rig-package@0.5.2': dependencies: resolve: 1.22.8 strip-json-comments: 3.1.1 - '@rushstack/terminal@0.13.0(@types/node@20.12.10)': + '@rushstack/terminal@0.13.0(@types/node@20.14.10)': dependencies: - '@rushstack/node-core-library': 5.4.1(@types/node@20.12.10) + '@rushstack/node-core-library': 5.4.1(@types/node@20.14.10) supports-color: 8.1.1 optionalDependencies: - '@types/node': 20.12.10 + '@types/node': 20.14.10 - '@rushstack/ts-command-line@4.22.0(@types/node@20.12.10)': + '@rushstack/ts-command-line@4.22.0(@types/node@20.14.10)': dependencies: - '@rushstack/terminal': 0.13.0(@types/node@20.12.10) + '@rushstack/terminal': 0.13.0(@types/node@20.14.10) '@types/argparse': 1.0.38 argparse: 1.0.10 string-argv: 0.3.2 @@ -7502,8 +7504,8 @@ snapshots: '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.34.1(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -7545,13 +7547,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0): dependencies: debug: 4.3.4 enhanced-resolve: 5.16.0 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.3 is-core-module: 2.13.1 @@ -7562,14 +7564,24 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + transitivePeerDependencies: + - supports-color + + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): + dependencies: + debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 7.11.0(eslint@9.1.1)(typescript@5.4.5) + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: - supports-color @@ -7590,7 +7602,7 @@ snapshots: eslint: 9.1.1 eslint-compat-utils: 0.5.1(eslint@9.1.1) - eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -7600,7 +7612,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -7611,7 +7623,7 @@ snapshots: semver: 6.3.1 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/parser': 7.11.0(eslint@9.1.1)(typescript@5.4.5) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack @@ -10280,7 +10292,7 @@ snapshots: tslib@2.6.2: {} - tsup@8.0.2(@microsoft/api-extractor@7.46.2(@types/node@20.12.10))(postcss@8.4.35)(typescript@5.4.5): + tsup@8.0.2(@microsoft/api-extractor@7.46.2(@types/node@20.14.10))(postcss@8.4.35)(typescript@5.4.5): dependencies: bundle-require: 4.0.3(esbuild@0.19.12) cac: 6.7.14 @@ -10297,7 +10309,7 @@ snapshots: sucrase: 3.35.0 tree-kill: 1.2.2 optionalDependencies: - '@microsoft/api-extractor': 7.46.2(@types/node@20.12.10) + '@microsoft/api-extractor': 7.46.2(@types/node@20.14.10) postcss: 8.4.35 typescript: 5.4.5 transitivePeerDependencies: @@ -10321,14 +10333,14 @@ snapshots: sucrase: 3.35.0 tree-kill: 1.2.2 optionalDependencies: - '@microsoft/api-extractor': 7.46.2(@types/node@20.12.10) + '@microsoft/api-extractor': 7.46.2(@types/node@20.14.10) postcss: 8.4.38 typescript: 5.4.5 transitivePeerDependencies: - supports-color - ts-node - tsup@8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.12.10))(postcss@8.4.38)(typescript@5.4.5): + tsup@8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.14.10))(postcss@8.4.35)(typescript@5.4.5): dependencies: bundle-require: 4.2.1(esbuild@0.21.5) cac: 6.7.14 @@ -10338,15 +10350,15 @@ snapshots: execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss-load-config: 4.0.2(postcss@8.4.38) + postcss-load-config: 4.0.2(postcss@8.4.35) resolve-from: 5.0.0 rollup: 4.18.1 source-map: 0.8.0-beta.0 sucrase: 3.35.0 tree-kill: 1.2.2 optionalDependencies: - '@microsoft/api-extractor': 7.46.2(@types/node@20.12.10) - postcss: 8.4.38 + '@microsoft/api-extractor': 7.46.2(@types/node@20.14.10) + postcss: 8.4.35 typescript: 5.4.5 transitivePeerDependencies: - supports-color