Skip to content

Commit

Permalink
feat: add slider, progress indicator update cc version
Browse files Browse the repository at this point in the history
  • Loading branch information
alisonjoseph committed Jul 11, 2024
1 parent 91f985c commit 8dd9617
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 6 deletions.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* 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.
*/

import React from 'react';
import { ProgressIndicator } from '@carbon/react';
// import { ProgressIndicatorSkeleton } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
ProgressIndicator,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3925-58667&m=dev',
{
props: {
children: figma.children(['_Progress indicator item']),
vertical: figma.enum('Direction', {
Vertical: true,
}),
},
example: ({ children, vertical }) => (
<ProgressIndicator vertical={vertical}>{children}</ProgressIndicator>
),
}
);

// figma.connect(
// ProgressIndicatorSkeleton,
// 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3925-58667&m=dev',
// {
// variant: need nested variant selector here, https://github.com/figma/code-connect/issues/91
// props: {
// vertical: figma.enum('Direction', {
// Vertical: true,
// }),
// },
// example: ({ children, vertical }) => (
// <ProgressIndicatorSkeleton vertical={vertical} />
// ),
// }
// );
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* 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 { ProgressStep } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
ProgressStep,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3377-31707&m=dev',
{
props: {
complete: figma.enum('State', {
Completed: true,
}),
current: figma.enum('State', {
Current: true,
}),
disabled: figma.enum('State', {
Disabled: true,
}),
invalid: figma.enum('State', {
Error: true,
}),
secondaryLabel: figma.boolean('Optional label', {
true: figma.textContent('Optional label'),
}),
label: figma.string('Label text'),
},
example: ({ ...props }) => <ProgressStep {...props} />,
}
);
102 changes: 102 additions & 0 deletions packages/react/code-connect/Slider/Slider.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/**
* 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 { Slider, SliderSkeleton } from '@carbon/react';
import figma from '@figma/code-connect';

//single
figma.connect(
Slider,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3673-40574&m=dev',
{
props: {
slider: figma.nestedProps('_Slider base', {
labelText: figma.textContent('Label'),
}),
invalidText: figma.string('Error text'),
warnText: figma.string('Warning text'),
disabled: figma.enum('Status', {
Disabled: true,
}),
invalid: figma.enum('Status', {
Error: true,
}),
readOnly: figma.enum('Status', {
'Read-only': true,
}),
warn: figma.enum('Status', {
Warning: true,
}),
textInput: figma.nestedProps('Text input - Default', {
value: figma.string('Input text'),
}),
},
example: ({ slider, textInput, ...props }) => (
<Slider value={textInput.value} labelText={slider.labelText} {...props} />
),
}
);

//two handle
figma.connect(
Slider,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev',
{
props: {
max: figma.string('Max range text'),
min: figma.string('Min range text'),
invalidText: figma.string('Error text'),
warnText: figma.string('Warning text'),
labelText: figma.string('Label text'),
hideTextInput: figma.boolean('Inputs', {
false: true,
true: false,
}),
invalidText: figma.string('Error text'),
warnText: figma.string('Warning text'),
disabled: figma.enum('State', {
Disabled: true,
}),
invalid: figma.enum('State', {
'Hover + Error': true,
'Active + Error': true,
'Focused + Error': true,
}),
readOnly: figma.enum('State', {
'Read-only': true,
}),
warn: figma.enum('State', {
'Hover + Warning': true,
'Active + Warning': true,
'Focused + Warning': true,
}),
},
example: ({ ...props }) => <Slider twoHandles {...props} />,
}
);

//single
figma.connect(
SliderSkeleton,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3673-40574&m=dev',
{
variant: { Status: 'Skeleton' },
example: () => <SliderSkeleton />,
}
);

//two handle
figma.connect(
SliderSkeleton,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev',
{
variant: { State: 'Skeleton' },
example: () => <SliderSkeleton twoHandles />,
}
);
47 changes: 47 additions & 0 deletions packages/react/code-connect/Slider/SliderRange.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// /**
// * 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 { Slider, SliderSkeleton } from '@carbon/react';
// import figma from '@figma/code-connect';

// figma.connect(
// SliderRange,
// "https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev",
// {
// props: {
// maxrangetext3836123: figma.string("Max range text"),
// minrangetext383610: figma.string("Min range text"),
// errortext97969: figma.string("Error text"),
// warningtext97992: figma.string("Warning text"),
// labeltext9790: figma.string("Label text"),
// inputs: figma.boolean("Inputs"),
// state: figma.enum("State", {
// Enabled: "enabled",
// Hover: "hover",
// Active: "active",
// Disabled: "disabled",
// Focused: "focused",
// Skeleton: "skeleton",
// "Read only": "read-only",
// "Hover + Error": "hover---error",
// "Active + Error": "active---error",
// "Focused + Error": "focused---error",
// "Hover + Warning": "hover---warning",
// "Active + Warning": "active---warning",
// "Focused + Warning": "focused---warning",
// }),
// handle: figma.enum("Handle", {
// None: "none",
// Left: "left",
// Right: "right",
// }),
// },
// example: (props) => <SliderRange />,
// },
// )
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"@babel/preset-typescript": "^7.21.5",
"@carbon/test-utils": "^10.30.0",
"@carbon/themes": "^11.37.0",
"@figma/code-connect": "^1.0.1",
"@figma/code-connect": "^1.0.2",
"@rollup/plugin-babel": "^6.0.0",
"@rollup/plugin-commonjs": "^26.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
Expand Down
11 changes: 6 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2035,7 +2035,7 @@ __metadata:
"@carbon/styles": "npm:^1.61.0"
"@carbon/test-utils": "npm:^10.30.0"
"@carbon/themes": "npm:^11.37.0"
"@figma/code-connect": "npm:^1.0.1"
"@figma/code-connect": "npm:^1.0.2"
"@floating-ui/react": "npm:^0.26.0"
"@ibm/telemetry-js": "npm:^1.5.0"
"@rollup/plugin-babel": "npm:^6.0.0"
Expand Down Expand Up @@ -3085,9 +3085,9 @@ __metadata:
languageName: node
linkType: hard

"@figma/code-connect@npm:^1.0.1":
version: 1.0.1
resolution: "@figma/code-connect@npm:1.0.1"
"@figma/code-connect@npm:^1.0.2":
version: 1.0.2
resolution: "@figma/code-connect@npm:1.0.2"
dependencies:
"@babel/core": "npm:^7.24.7"
"@babel/generator": "npm:^7.24.7"
Expand All @@ -3106,6 +3106,7 @@ __metadata:
glob: "npm:^10.3.10"
lodash: "npm:^4.17.21"
minimatch: "npm:^9.0.3"
ora: "npm:^5.4.1"
prettier: "npm:^2.8.8"
prompts: "npm:^2.4.2"
strip-ansi: "npm:^6.0.0"
Expand All @@ -3114,7 +3115,7 @@ __metadata:
zod-validation-error: "npm:^3.2.0"
bin:
figma: bin/figma
checksum: 10/1fceaee82890955d91806bed145d62a9ffeee4603e266ba908c9bc6ad1fde317fd83fdbaad5ea69e2d8cfe8cc2f6d5f432a376e3299dc21ac255c5b163077331
checksum: 10/28de9e30705e987bb2de035bd4033a061edcae094edd37cd0116d1a666369f3fb248164b39c79a648e8a832ccd0ed84873027e8b56cdc9b1832764c80ba06ca0
languageName: node
linkType: hard

Expand Down

0 comments on commit 8dd9617

Please sign in to comment.