Skip to content

Commit

Permalink
feat(code-connect): connect additional components (#16971)
Browse files Browse the repository at this point in the history 
* feat(code-connect): connect textarea, textinput and dropdown

* feat: add slider, progress indicator update cc version

* feat(code-connec): slider, datepicker, timepicker, tooltip, toggletip

* feat(code-connect): modal, form, popover

* feat: add menu

* chore: remove unfinished timepicker

* chore: cleanup datepicker

* chore: cleanup composedmodal

---------

Co-authored-by: Ariella Gilmore <[email protected]>
  • Loading branch information
@alisonjoseph @ariellalgilmore
alisonjoseph and ariellalgilmore authored Jul 23, 2024
1 parent 8fe1ee3 commit 351525d
Show file tree
Hide file tree
Showing 12 changed files with 918 additions and 24 deletions.
62 changes: 62 additions & 0 deletions packages/react/code-connect/ComposedModal/ComposedModal.figma.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/**
* 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, { useState } from 'react';
import { ComposedModal } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
ComposedModal,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4080-55366&t=kgHdN1kQbk04e5Jv-4',
{
props: {
title: figma.string('Title text'),
label: figma.boolean('Label', {
true: figma.string('Label text'),
}),
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
'Extra small': 'xs',
}),
progress: figma.boolean('Progress', {
true: figma.children('Progress indicator'),
}),
descriptionText: figma.boolean('Description', {
true: '<p>' + figma.string('Description text') + '</p>',
}),
children: figma.instance('Swap slot'),
modalFooter: figma.boolean('Actions', {
true: figma.children('Actions'),
}),
},
example: ({
size,
title,
label,
modalFooter,
children,
descriptionText,
progress,
}) => {
const [open, setOpen] = useState(true);
return (
<ComposedModal open onClose={() => setOpen(false)}>
<ModalHeader label={label} title={title} />
<ModalBody>
{progress}
{descriptionText}
{children}
</ModalBody>
{modalFooter}
</ComposedModal>
);
},
}
);
22 changes: 22 additions & 0 deletions packages/react/code-connect/ComposedModal/ModalFooter.figma.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* 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 { ModalFooter } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
ModalFooter,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3906-50587&t=SbIuH3RAJeFPjXmN-4',
{
props: {
children: figma.children('*'),
},
example: ({ children }) => <ModalFooter>{children}</ModalFooter>,
}
);
182 changes: 182 additions & 0 deletions packages/react/code-connect/DatePicker/DatePicker.figma.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
/**
* 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 { DatePicker, DatePickerInput, DatePickerSkeleton } from '@carbon/react';
import figma from '@figma/code-connect';

//simple
figma.connect(
DatePicker,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-266985&t=hgJuU7m9Y6EM076g-4',
{
props: {
placeholder: figma.string('Date unselected'),
labelText: figma.string('Label text'),
disabled: figma.enum('State', {
Disabled: true,
}),
invalid: figma.enum('State', {
Error: true,
}),
warn: figma.enum('State', {
Warning: true,
}),
warnText: figma.string('Warning text'),
helperText: figma.boolean('Show helper', {
true: figma.string('Helper text'),
}),
invalidText: figma.string('Error text'),
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
}),
readOnly: figma.enum('State', {
'Read-only': true,
}),
// hideLabel: figma.boolean('Show label ', { // extra space after label in Figma property name causing code connect to break
// true: false,
// false: true,
// }),
},
example: ({ ...props }) => (
<DatePicker type="simple">
<DatePickerInput {...props} id="date-picker-simple" />
</DatePicker>
),
}
);

figma.connect(
DatePickerSkeleton,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-266985&t=hgJuU7m9Y6EM076g-4',
{
variant: { State: 'Skeleton' },
example: () => <DatePickerSkeleton />, //missing showLabel
}
);

// single
figma.connect(
DatePicker,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267504&t=hgJuU7m9Y6EM076g-4',
{
props: {
placeholder: figma.string('Date unselected'),
labelText: figma.string('Label text'),
disabled: figma.enum('State', {
Disabled: true,
}),
invalid: figma.enum('State', {
Error: true,
}),
warn: figma.enum('State', {
Warning: true,
}),
warnText: figma.string('Warning text'),
helperText: figma.boolean('Show helper', {
true: figma.string('Helper text'),
}),
invalidText: figma.string('Error text'),
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
}),
readOnly: figma.enum('State', {
'Read-only': true,
}),
// hideLabel: missing from Figma component
},
example: (props) => (
<DatePicker type="single">
<DatePickerInput {...props} id="date-picker-single" />
</DatePicker>
),
}
);

figma.connect(
DatePickerSkeleton,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267504&t=hgJuU7m9Y6EM076g-4',
{
variant: { State: 'Skeleton' },
example: () => <DatePickerSkeleton />, //missing showLabel
}
);

//range
figma.connect(
DatePicker,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268170&t=hgJuU7m9Y6EM076g-4',
{
props: {
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
}),
readOnly: figma.enum('State', {
'Read-only': true,
}),
datePickerInput: figma.nestedProps(
'Date picker - Single calendar - Default',
{
placeholder: figma.string('Date unselected'),
disabled: figma.enum('State', {
Disabled: true,
}),
invalid: figma.enum('State', {
Error: true,
}),
warn: figma.enum('State', {
Warning: true,
}),
warnText: figma.string('Warning text'),
invalidText: figma.string('Error text'),
}
),
},
example: ({ size, readOnly, datePickerInput }) => (
<DatePicker datePickerType="range" readOnly={readOnly}>
<DatePickerInput
id="date-picker-input-id-start"
placeholder={datePickerInput.placeholder}
labelText="Start date"
size={size}
warn={datePickerInput.warn}
warnText={datePickerInput.warnText}
invalid={datePickerInput.invalid}
invalidText={datePickerInput.invalidText}
disabled={datePickerInput.disabled}
/>
<DatePickerInput
id="date-picker-input-id-finish"
placeholder={datePickerInput.placeholder}
labelText="End date"
size={size}
warn={datePickerInput.warn}
warnText={datePickerInput.warnText}
invalid={datePickerInput.invalid}
invalidText={datePickerInput.invalidText}
disabled={datePickerInput.disabled}
/>
</DatePicker>
),
}
);

figma.connect(
DatePickerSkeleton,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268170&t=hgJuU7m9Y6EM076g-4',
{
variant: { State: 'Skeleton' },
example: () => <DatePickerSkeleton range />, //missing showLabel
}
);
Loading

0 comments on commit 351525d

Please sign in to comment.