Skip to content

Commit

Permalink
feat: add figma code connect (#16730)
Browse files Browse the repository at this point in the history
* feat: add figma code connect (#16348)

* chore: update gitignore

* feat: add figma code connect

* chore: update readme

* feat(code-connect): update Link and Notification

* feat: code connect updates

* chore: update disclaimer text

* feat: add checkbox

* feat: contentswitcher

* feat: add breadcrumb checkbox and grid

* feat: codesnippet

* feat: wip tooltip and contained list

* chore: update to 0.1.2

* chore: add code comments to accordion

* docs: update readma

* feat(code-connect): connect toggle

* feat(code-connect): connect NumberInput

* chore: add basic config file

* chore: ignore ts and exclude from ts build

* chore: update config file

* chore: update readme

* chore: fix versions from merge conflict

* chore: yarn dedupe

* chore: fix yarn

* chore: yarn

* chore: yarn

* chore: yarn dedupe
  • Loading branch information
alisonjoseph authored Jun 12, 2024
1 parent e582548 commit 47b909e
Show file tree
Hide file tree
Showing 106 changed files with 1,903 additions and 218 deletions.
13 changes: 13 additions & 0 deletions .github/workflows/code-connect.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
on:
push:
paths:
- src/packages/react/code-connect/**/*.figma.tsx
branches:
- main

jobs:
code-connect:
name: Code Connect
runs-on: ubuntu-latest
steps:
- run: npx figma connect publish
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,6 @@ package-lock.json

# Playwright
.playwright

# Local token
.env
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
11 changes: 11 additions & 0 deletions figma.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"codeConnect": {
"include": ["packages/react/code-connect/**"],
"react": {
"importPaths": {
"packages/react/src/*": "@carbon/react"
},
"paths": {}
}
}
}
30 changes: 30 additions & 0 deletions packages/react/code-connect/Accordion/Accordion.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { Accordion } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
Accordion,
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2490-17019&mode=design&t=0hF8pirV0i9mofd1-4',
{
props: {
// missing props, set on Accordion item within Figma
// size
// isFlush
// align
children: figma.children(['Accordion item']),
},
example: ({ children }) => (
// Disclaimer: Code Connect is currently in beta and integration with Carbon
// React is in an exploratory phase. Code sample below may be incomplete.
<Accordion>{children}</Accordion>
),
}
);
70 changes: 70 additions & 0 deletions packages/react/code-connect/Accordion/AccordionItem.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { AccordionItem } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
AccordionItem,
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2154-8478&mode=design&t=0hF8pirV0i9mofd1-4',
{
props: {
title: figma.string('Title text'),
disabled: figma.enum('State', {
Disabled: true,
}),
open: figma.boolean('Expanded'),
content: figma.string('Content text'),
children: figma.instance('Swap slot'),
// Props below are on accordion item in Figma and accordion in React
// size: figma.enum('Size', {
// Large: 'lg',
// Medium: 'md',
// Small: 'sm',
// }),
// isFlush: figma.boolean('Flush'),
// align: figma.enum('Alignment', {
// Left: 'start',
// }),
},
example: ({
title,
disabled,
open,
content,
children,
// size, needs to be set on Accordion
// isFlush, needs to be set on Accordion
// align, needs to be set on Accordion
}) => (
<AccordionItem title={title} disabled={disabled} open={open}>
<p>{content}</p>
{children}
</AccordionItem>
),
}
);

// figma.connect(
// AccordionSkeleton,
// 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=14032-290635&mode=dev',
// {
// variant: { State: 'Skeleton' },
// props: {
// open: figma.boolean('Expanded'),
// isFlush: figma.boolean('Flush'),
// align: figma.enum('Alignment', {
// Left: 'start',
// }),
// },
// example: ({ size, hideLabel }) => {
// return <AccordionSkeleton align={align} />;
// },
// }
// );
29 changes: 29 additions & 0 deletions packages/react/code-connect/Breadcrumb/Breadcrumb.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { Breadcrumb } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
Breadcrumb,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3155-31030&t=U57NnoohldL54XAl-4',
{
props: {
//noTrailingSlash: needs to come from child item component in figma
children: figma.children(['_Breadcrumb item']),
},
example: ({ children }) => (
// Disclaimer: Code Connect is currently in beta and integration with Carbon
// React is in an exploratory phase. Code sample below may be incomplete.
<Breadcrumb>{children}</Breadcrumb>
),
}
);

// BreadcrumbSkeleton missing from Figma, can only be set on individual items
64 changes: 64 additions & 0 deletions packages/react/code-connect/Breadcrumb/BreadcrumbItem.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { BreadcrumbItem, OverflowMenu, OverflowMenuItem } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
BreadcrumbItem,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
{
variant: { Type: 'Link' },
props: {
// state: figma.enum('State', { // in react skeleton state replaces the entire Breadcrumb component , not BreadcrumbItem
// Skeleton: 'skeleton',
// }),
children: figma.string('Link text'),
},
example: ({ children }) => (
<BreadcrumbItem href="#">{children}</BreadcrumbItem>
),
}
);

figma.connect(
BreadcrumbItem,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
{
variant: { Type: 'Current page' },
props: {
children: figma.string('Link text'),
isCurrentPage: figma.boolean('Current'),
},
example: ({ children, isCurrentPage }) => (
<BreadcrumbItem isCurrentPage={isCurrentPage}>{children}</BreadcrumbItem>
),
}
);

figma.connect(
BreadcrumbItem,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
{
variant: { Type: 'Overflow' },
props: {
isCurrentPage: figma.boolean('Current'),
},
example: ({ isCurrentPage }) => (
<BreadcrumbItem
isCurrentPage={isCurrentPage}
data-floating-menu-container>
<OverflowMenu aria-label="Overflow menu in a breadcrumb">
<OverflowMenuItem itemText="Breadcrumb 3" />
<OverflowMenuItem itemText="Breadcrumb 4" />
</OverflowMenu>
</BreadcrumbItem>
),
}
);
94 changes: 94 additions & 0 deletions packages/react/code-connect/Button/Button.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { Button, ButtonSkeleton } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
Button,
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=1854-1776&mode=dev',
{
props: {
disabled: figma.enum('State', {
Disabled: true,
}),
buttonText: figma.string('Button text'),
kind: figma.enum('Style', {
Primary: 'primary',
Secondary: 'secondary',
Tertiary: 'tertiary',
Ghost: 'ghost',
'Danger primary': 'danger',
'Danger tertiary': 'danger--tertiary',
'Danger ghost': 'danger--ghost',
}),
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
'Extra large': 'xl',
'2x large': '2xl',
}),
isExpressive: figma.enum('Size', {
Expressive: true,
}),
hasIconOnly: figma.enum('Type', {
'Icon only': true,
}),
renderIcon: figma.instance('Swap icon'),
},
example: ({
size,
kind,
isExpressive,
hasIconOnly,
renderIcon,
disabled,
buttonText,
}) => {
return (
// Disclaimer: Code Connect is currently in beta and integration with Carbon
// React is in an exploratory phase. Code sample below may be incomplete.
<Button
size={size}
kind={kind}
isExpressive={isExpressive}
hasIconOnly={hasIconOnly}
renderIcon={renderIcon}
disabled={disabled}>
{buttonText}
</Button>
);
},
}
);

figma.connect(
ButtonSkeleton,
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=1854-1776&mode=dev',
{
variant: { State: 'Skeleton' },
props: {
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
'Extra large': 'xl',
'2x large': '2xl',
}),
},
example: ({ size }) => {
return (
// Disclaimer: Code Connect is currently in beta and integration with Carbon
// React is in an exploratory phase. Code sample below may be incomplete.
<ButtonSkeleton size={size} />
);
},
}
);
Loading

0 comments on commit 47b909e

Please sign in to comment.