Skip to content

Commit cdcd7ac

Browse files
samyak3009samyak3009
authored
Merge pull request #2531 from anuradha9712/feat-organisms-figma-connect
feat(organisms): add figma code connect for organisms component
2 parents 5334fd6 + e8cfb1c commit cdcd7ac

17 files changed

+744
-3
lines changed

‎figma/Calendar.figma.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Calendar } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(Calendar, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1308-5244', {
6+
imports: ["import { Calendar } from '@innovaccer/design-system'"],
7+
props: {
8+
view: figma.enum('View', {
9+
Month: 'date',
10+
Year: 'month',
11+
Decade: 'year',
12+
}),
13+
size: figma.enum('Size', {
14+
Regular: 'large',
15+
Small: 'small',
16+
}),
17+
},
18+
example: (props) => <Calendar {...props} />,
19+
});

‎figma/ChatBubble.figma.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { Chat, Text } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
// Outgoing Chat Bubble
6+
figma.connect(Chat, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=59053-13610', {
7+
imports: ["import { Chat, Text } from '@innovaccer/design-system'"],
8+
props: {
9+
status: figma.boolean('Status'),
10+
time: figma.enum('Message Type', {
11+
'With Metadata': '01:00 AM',
12+
}),
13+
},
14+
example: ({ status, time, ...rest }) => (
15+
<Chat>
16+
<Chat.ChatBubble type="outgoing" {...rest} outgoingOptions={{ status, time }}>
17+
<Text>Hello, I'd like to schedule an appointment with my cardiologist. Can you help me with that?</Text>
18+
</Chat.ChatBubble>
19+
</Chat>
20+
),
21+
});
22+
23+
// Incoming Chat Bubble
24+
figma.connect(Chat, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=59053-14022', {
25+
imports: ["import { Chat, Text } from '@innovaccer/design-system'"],
26+
props: {
27+
time: figma.enum('Message Type', {
28+
'With Metadata': '01:00 AM',
29+
}),
30+
},
31+
example: ({ time, ...rest }) => (
32+
<Chat>
33+
<Chat.ChatBubble type="incoming" {...rest} incomingOptions={{ time }}>
34+
<Text>I am happy to provide you with an appointment tomorrow afternoon.</Text>
35+
</Chat.ChatBubble>
36+
</Chat>
37+
),
38+
});

‎figma/ChoiceList.figma.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import { ChoiceList } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(ChoiceList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1614-9929', {
6+
imports: ["import { ChoiceList } from '@innovaccer/design-system'"],
7+
example: (props) => (
8+
<ChoiceList
9+
{...props}
10+
title="Label"
11+
choices={[
12+
{
13+
label: 'Male',
14+
name: 'gender',
15+
value: 'Male',
16+
},
17+
{
18+
label: 'Female',
19+
name: 'gender',
20+
value: 'Female',
21+
},
22+
{
23+
label: 'Other',
24+
name: 'gender',
25+
value: 'Other',
26+
},
27+
]}
28+
/>
29+
),
30+
});
31+
32+
figma.connect(ChoiceList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1583-10825', {
33+
imports: ["import { ChoiceList } from '@innovaccer/design-system'"],
34+
example: (props) => (
35+
<ChoiceList
36+
{...props}
37+
title="Label"
38+
allowMultiple={true}
39+
choices={[
40+
{
41+
label: 'Male',
42+
name: 'gender',
43+
value: 'Male',
44+
},
45+
{
46+
label: 'Female',
47+
name: 'gender',
48+
value: 'Female',
49+
},
50+
{
51+
label: 'Other',
52+
name: 'gender',
53+
value: 'Other',
54+
},
55+
]}
56+
/>
57+
),
58+
});

‎figma/Combobox.figma.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Combobox } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(Combobox, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=14373-48206', {
6+
imports: ["import { Combobox } from '@innovaccer/design-system'"],
7+
props: {
8+
size: figma.enum('Input size', {
9+
Regular: 'regular',
10+
Small: 'tiny',
11+
Large: 'large',
12+
}),
13+
},
14+
example: (props) => {
15+
return (
16+
<Combobox {...props}>
17+
<Combobox.List>
18+
<Combobox.Option option={{ label: 'label 1', value: 'value 1' }}>label 1</Combobox.Option>
19+
<Combobox.Option option={{ label: 'label 2', value: 'value 1' }}>label 2</Combobox.Option>
20+
<Combobox.Option option={{ label: 'label 3', value: 'value 1' }}>label 3</Combobox.Option>
21+
</Combobox.List>
22+
</Combobox>
23+
);
24+
},
25+
});

‎figma/DatePicker.figma.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { DatePicker } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(DatePicker, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1271-9152', {
6+
imports: ["import { DatePicker } from '@innovaccer/design-system'"],
7+
props: {
8+
size: figma.enum('Size', {
9+
Regular: 'large',
10+
Small: 'small',
11+
}),
12+
view: figma.enum('View', {
13+
Month: 'date',
14+
Year: 'month',
15+
Decade: 'year',
16+
}),
17+
},
18+
example: (props) => <DatePicker {...props} />,
19+
});

‎figma/DateRangePicker.figma.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { DateRangePicker } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(DateRangePicker, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1321-6336', {
6+
imports: ["import { DateRangePicker } from '@innovaccer/design-system'"],
7+
props: {
8+
size: figma.enum('Size', {
9+
Regular: 'large',
10+
Small: 'small',
11+
}),
12+
monthsInView: figma.enum('Range', {
13+
'Across months': 2,
14+
'Within a month': 1,
15+
}),
16+
},
17+
example: (props) => <DateRangePicker {...props} />,
18+
});

‎figma/HorizontalNav.figma.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { HorizontalNav } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(HorizontalNav, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1878-14928', {
6+
imports: ["import { HorizontalNav } from '@innovaccer/design-system'"],
7+
props: {
8+
menus: figma.enum('Variant', {
9+
Default: [
10+
{
11+
name: 'page_1',
12+
label: 'Page 1',
13+
},
14+
{
15+
name: 'page_2',
16+
label: 'Page 2',
17+
},
18+
{
19+
name: 'page_3',
20+
label: 'Page 3',
21+
},
22+
],
23+
24+
'With icon': [
25+
{
26+
name: 'text',
27+
label: 'Text',
28+
icon: 'message',
29+
},
30+
{
31+
name: 'voice',
32+
label: 'Voice',
33+
icon: 'mic',
34+
},
35+
{
36+
name: 'mail',
37+
label: 'Mail',
38+
icon: 'email',
39+
},
40+
],
41+
42+
'With count': [
43+
{
44+
name: 'text',
45+
label: 'Text',
46+
count: 15,
47+
},
48+
{
49+
name: 'voice',
50+
label: 'Voice',
51+
count: 10,
52+
},
53+
{
54+
name: 'mail',
55+
label: 'Mail',
56+
count: 5,
57+
},
58+
],
59+
}),
60+
},
61+
example: (props) => <HorizontalNav {...props} />,
62+
});

‎figma/InlineMessage.figma.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { InlineMessage } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(InlineMessage, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=2584-28807', {
6+
imports: ["import { InlineMessage, LinkButton } from '@innovaccer/design-system'"],
7+
props: {
8+
appearance: figma.enum('Appearance', {
9+
Info: 'info',
10+
Success: 'success',
11+
Warning: 'warning',
12+
Alert: 'alert',
13+
}),
14+
size: figma.enum('Size', {
15+
Regular: 'regular',
16+
Small: 'small',
17+
}),
18+
},
19+
example: (props) => <InlineMessage description="InlineMessage goes here" {...props} />,
20+
});

‎figma/Listbox.figma.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Listbox } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(Listbox, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=44079-22596', {
6+
imports: ["import { Listbox } from '@innovaccer/design-system'"],
7+
props: {
8+
size: figma.enum('Size', {
9+
Standard: 'standard',
10+
Compressed: 'compressed',
11+
Tight: 'tight',
12+
}),
13+
},
14+
example: (props) => (
15+
<Listbox {...props}>
16+
<Listbox.Item>List Item 1</Listbox.Item>
17+
<Listbox.Item>List Item 2</Listbox.Item>
18+
<Listbox.Item>List Item 3</Listbox.Item>
19+
</Listbox>
20+
),
21+
});

‎figma/Menu.figma.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { Menu } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(Menu, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1481-10464', {
6+
imports: ["import { Menu } from '@innovaccer/design-system'"],
7+
props: {
8+
size: figma.enum('Size', {
9+
Regular: 'regular',
10+
Small: 'tiny',
11+
}),
12+
},
13+
example: ({ size, ...rest }) => {
14+
return (
15+
<Menu {...rest} trigger={<Menu.Trigger size={size} />}>
16+
<Menu.List>
17+
<Menu.Item>Edit</Menu.Item>
18+
<Menu.Item>Export</Menu.Item>
19+
<Menu.Item>Copy</Menu.Item>
20+
</Menu.List>
21+
</Menu>
22+
);
23+
},
24+
});
25+
26+
// Grouping in Menu
27+
figma.connect(Menu, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=33767-6251', {
28+
imports: ["import { Menu } from '@innovaccer/design-system'"],
29+
props: {
30+
showDivider: figma.enum('Divider', {
31+
True: true,
32+
False: false,
33+
}),
34+
},
35+
example: ({ showDivider, ...props }) => {
36+
return (
37+
<Menu trigger={<Menu.Trigger />} {...props}>
38+
<Menu.Group showDivider={showDivider}>
39+
<Menu.List>
40+
<Menu.Item>Menu Item 1</Menu.Item>
41+
</Menu.List>
42+
</Menu.Group>
43+
44+
<Menu.Group showDivider={showDivider}>
45+
<Menu.List>
46+
<Menu.Item>Menu Item 1</Menu.Item>
47+
<Menu.Item>Menu Item 2</Menu.Item>
48+
<Menu.Item>Menu Item 3</Menu.Item>
49+
</Menu.List>
50+
</Menu.Group>
51+
52+
<Menu.Group showDivider={showDivider}>
53+
<Menu.List>
54+
<Menu.Item>Menu Item 1</Menu.Item>
55+
<Menu.Item>Menu Item 2</Menu.Item>
56+
<Menu.Item>Menu Item 3</Menu.Item>
57+
</Menu.List>
58+
</Menu.Group>
59+
</Menu>
60+
);
61+
},
62+
});

‎figma/Meter.figma.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Meter } from '@/index';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(Meter, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=53851-1643', {
6+
imports: ["import { Meter } from '@innovaccer/design-system'"],
7+
props: {
8+
meterSize: figma.enum('Size', {
9+
Regular: 'regular',
10+
Small: 'small',
11+
Large: 'large',
12+
}),
13+
},
14+
example: (props) => <Meter {...props} />,
15+
});

0 commit comments

Comments
 (0)