@cdx-ui/components 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/coverage.svg +1 -1
- package/lib/commonjs/components/ToggleButton/index.js +249 -0
- package/lib/commonjs/components/ToggleButton/index.js.map +1 -0
- package/lib/commonjs/components/ToggleButton/styles.js +155 -0
- package/lib/commonjs/components/ToggleButton/styles.js.map +1 -0
- package/lib/commonjs/components/index.js +12 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/figma/Calendar.figma.js +28 -0
- package/lib/commonjs/figma/Calendar.figma.js.map +1 -0
- package/lib/commonjs/figma/Carousel.NextButton.figma.js +27 -0
- package/lib/commonjs/figma/Carousel.NextButton.figma.js.map +1 -0
- package/lib/commonjs/figma/Carousel.Pagination.figma.js +22 -0
- package/lib/commonjs/figma/Carousel.Pagination.figma.js.map +1 -0
- package/lib/commonjs/figma/Carousel.PrevButton.figma.js +27 -0
- package/lib/commonjs/figma/Carousel.PrevButton.figma.js.map +1 -0
- package/lib/commonjs/figma/Carousel.figma.js +37 -0
- package/lib/commonjs/figma/Carousel.figma.js.map +1 -0
- package/lib/commonjs/figma/Checkbox.Group.figma.js +24 -0
- package/lib/commonjs/figma/Checkbox.Group.figma.js.map +1 -0
- package/lib/commonjs/figma/CurrencyInput.figma.js +54 -0
- package/lib/commonjs/figma/CurrencyInput.figma.js.map +1 -0
- package/lib/commonjs/figma/DateField.figma.js +58 -0
- package/lib/commonjs/figma/DateField.figma.js.map +1 -0
- package/lib/commonjs/figma/DatePicker.figma.js +88 -0
- package/lib/commonjs/figma/DatePicker.figma.js.map +1 -0
- package/lib/commonjs/figma/DateRangePicker.figma.js +85 -0
- package/lib/commonjs/figma/DateRangePicker.figma.js.map +1 -0
- package/lib/commonjs/figma/DateTimeField.figma.js +69 -0
- package/lib/commonjs/figma/DateTimeField.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Checkbox.figma.js +52 -0
- package/lib/commonjs/figma/Field.Checkbox.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.DateField.figma.js +57 -0
- package/lib/commonjs/figma/Field.DateField.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.DateTimeField.figma.js +57 -0
- package/lib/commonjs/figma/Field.DateTimeField.figma.js.map +1 -0
- package/lib/commonjs/figma/Image.figma.js +22 -0
- package/lib/commonjs/figma/Image.figma.js.map +1 -0
- package/lib/commonjs/figma/MonthCalendar.figma.js +18 -0
- package/lib/commonjs/figma/MonthCalendar.figma.js.map +1 -0
- package/lib/commonjs/figma/ProgressBar.figma.js +54 -0
- package/lib/commonjs/figma/ProgressBar.figma.js.map +1 -0
- package/lib/commonjs/figma/ProgressCircle.figma.js +73 -0
- package/lib/commonjs/figma/ProgressCircle.figma.js.map +1 -0
- package/lib/commonjs/figma/RangeCalendar.figma.js +36 -0
- package/lib/commonjs/figma/RangeCalendar.figma.js.map +1 -0
- package/lib/commonjs/figma/Skeleton.figma.js +31 -0
- package/lib/commonjs/figma/Skeleton.figma.js.map +1 -0
- package/lib/commonjs/figma/Slider.Marker.figma.js +21 -0
- package/lib/commonjs/figma/Slider.Marker.figma.js.map +1 -0
- package/lib/commonjs/figma/Slider.MarkerGroup.figma.js +22 -0
- package/lib/commonjs/figma/Slider.MarkerGroup.figma.js.map +1 -0
- package/lib/commonjs/figma/Slider.Thumb.figma.js +22 -0
- package/lib/commonjs/figma/Slider.Thumb.figma.js.map +1 -0
- package/lib/commonjs/figma/Slider.figma.js +69 -0
- package/lib/commonjs/figma/Slider.figma.js.map +1 -0
- package/lib/commonjs/figma/Switch.figma.js +36 -0
- package/lib/commonjs/figma/Switch.figma.js.map +1 -0
- package/lib/commonjs/figma/Tabs.SegmentedControl.Segment.figma.js +34 -0
- package/lib/commonjs/figma/Tabs.SegmentedControl.Segment.figma.js.map +1 -0
- package/lib/commonjs/figma/Tabs.SegmentedControl.figma.js +43 -0
- package/lib/commonjs/figma/Tabs.SegmentedControl.figma.js.map +1 -0
- package/lib/commonjs/figma/Tabs.Tab.figma.js +34 -0
- package/lib/commonjs/figma/Tabs.Tab.figma.js.map +1 -0
- package/lib/commonjs/figma/Tabs.figma.js +39 -0
- package/lib/commonjs/figma/Tabs.figma.js.map +1 -0
- package/lib/commonjs/figma/Tile.Description.figma.js +23 -0
- package/lib/commonjs/figma/Tile.Description.figma.js.map +1 -0
- package/lib/commonjs/figma/Tile.Group.figma.js +45 -0
- package/lib/commonjs/figma/Tile.Group.figma.js.map +1 -0
- package/lib/commonjs/figma/Tile.LeadingSlot.figma.js +23 -0
- package/lib/commonjs/figma/Tile.LeadingSlot.figma.js.map +1 -0
- package/lib/commonjs/figma/Tile.Title.figma.js +23 -0
- package/lib/commonjs/figma/Tile.Title.figma.js.map +1 -0
- package/lib/commonjs/figma/Tile.TrailingSlot.figma.js +23 -0
- package/lib/commonjs/figma/Tile.TrailingSlot.figma.js.map +1 -0
- package/lib/commonjs/figma/Tile.figma.js +57 -0
- package/lib/commonjs/figma/Tile.figma.js.map +1 -0
- package/lib/commonjs/figma/Toast.Button.figma.js +32 -0
- package/lib/commonjs/figma/Toast.Button.figma.js.map +1 -0
- package/lib/commonjs/figma/Toast.Close.figma.js +20 -0
- package/lib/commonjs/figma/Toast.Close.figma.js.map +1 -0
- package/lib/commonjs/figma/Toast.figma.js +81 -0
- package/lib/commonjs/figma/Toast.figma.js.map +1 -0
- package/lib/commonjs/figma/Tooltip.Content.figma.js +30 -0
- package/lib/commonjs/figma/Tooltip.Content.figma.js.map +1 -0
- package/lib/commonjs/figma/Tooltip.figma.js +46 -0
- package/lib/commonjs/figma/Tooltip.figma.js.map +1 -0
- package/lib/commonjs/figma/VirtualizedList.figma.js +31 -0
- package/lib/commonjs/figma/VirtualizedList.figma.js.map +1 -0
- package/lib/module/components/ToggleButton/index.js +245 -0
- package/lib/module/components/ToggleButton/index.js.map +1 -0
- package/lib/module/components/ToggleButton/styles.js +152 -0
- package/lib/module/components/ToggleButton/styles.js.map +1 -0
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/figma/Calendar.figma.js +22 -0
- package/lib/module/figma/Calendar.figma.js.map +1 -0
- package/lib/module/figma/Carousel.NextButton.figma.js +21 -0
- package/lib/module/figma/Carousel.NextButton.figma.js.map +1 -0
- package/lib/module/figma/Carousel.Pagination.figma.js +18 -0
- package/lib/module/figma/Carousel.Pagination.figma.js.map +1 -0
- package/lib/module/figma/Carousel.PrevButton.figma.js +21 -0
- package/lib/module/figma/Carousel.PrevButton.figma.js.map +1 -0
- package/lib/module/figma/Carousel.figma.js +31 -0
- package/lib/module/figma/Carousel.figma.js.map +1 -0
- package/lib/module/figma/Checkbox.Group.figma.js +18 -0
- package/lib/module/figma/Checkbox.Group.figma.js.map +1 -0
- package/lib/module/figma/CurrencyInput.figma.js +48 -0
- package/lib/module/figma/CurrencyInput.figma.js.map +1 -0
- package/lib/module/figma/DateField.figma.js +52 -0
- package/lib/module/figma/DateField.figma.js.map +1 -0
- package/lib/module/figma/DatePicker.figma.js +82 -0
- package/lib/module/figma/DatePicker.figma.js.map +1 -0
- package/lib/module/figma/DateRangePicker.figma.js +79 -0
- package/lib/module/figma/DateRangePicker.figma.js.map +1 -0
- package/lib/module/figma/DateTimeField.figma.js +63 -0
- package/lib/module/figma/DateTimeField.figma.js.map +1 -0
- package/lib/module/figma/Field.Checkbox.figma.js +46 -0
- package/lib/module/figma/Field.Checkbox.figma.js.map +1 -0
- package/lib/module/figma/Field.DateField.figma.js +51 -0
- package/lib/module/figma/Field.DateField.figma.js.map +1 -0
- package/lib/module/figma/Field.DateTimeField.figma.js +51 -0
- package/lib/module/figma/Field.DateTimeField.figma.js.map +1 -0
- package/lib/module/figma/Image.figma.js +18 -0
- package/lib/module/figma/Image.figma.js.map +1 -0
- package/lib/module/figma/MonthCalendar.figma.js +14 -0
- package/lib/module/figma/MonthCalendar.figma.js.map +1 -0
- package/lib/module/figma/ProgressBar.figma.js +48 -0
- package/lib/module/figma/ProgressBar.figma.js.map +1 -0
- package/lib/module/figma/ProgressCircle.figma.js +67 -0
- package/lib/module/figma/ProgressCircle.figma.js.map +1 -0
- package/lib/module/figma/RangeCalendar.figma.js +30 -0
- package/lib/module/figma/RangeCalendar.figma.js.map +1 -0
- package/lib/module/figma/Skeleton.figma.js +25 -0
- package/lib/module/figma/Skeleton.figma.js.map +1 -0
- package/lib/module/figma/Slider.Marker.figma.js +17 -0
- package/lib/module/figma/Slider.Marker.figma.js.map +1 -0
- package/lib/module/figma/Slider.MarkerGroup.figma.js +18 -0
- package/lib/module/figma/Slider.MarkerGroup.figma.js.map +1 -0
- package/lib/module/figma/Slider.Thumb.figma.js +18 -0
- package/lib/module/figma/Slider.Thumb.figma.js.map +1 -0
- package/lib/module/figma/Slider.figma.js +63 -0
- package/lib/module/figma/Slider.figma.js.map +1 -0
- package/lib/module/figma/Switch.figma.js +30 -0
- package/lib/module/figma/Switch.figma.js.map +1 -0
- package/lib/module/figma/Tabs.SegmentedControl.Segment.figma.js +28 -0
- package/lib/module/figma/Tabs.SegmentedControl.Segment.figma.js.map +1 -0
- package/lib/module/figma/Tabs.SegmentedControl.figma.js +37 -0
- package/lib/module/figma/Tabs.SegmentedControl.figma.js.map +1 -0
- package/lib/module/figma/Tabs.Tab.figma.js +28 -0
- package/lib/module/figma/Tabs.Tab.figma.js.map +1 -0
- package/lib/module/figma/Tabs.figma.js +33 -0
- package/lib/module/figma/Tabs.figma.js.map +1 -0
- package/lib/module/figma/Tile.Description.figma.js +17 -0
- package/lib/module/figma/Tile.Description.figma.js.map +1 -0
- package/lib/module/figma/Tile.Group.figma.js +39 -0
- package/lib/module/figma/Tile.Group.figma.js.map +1 -0
- package/lib/module/figma/Tile.LeadingSlot.figma.js +17 -0
- package/lib/module/figma/Tile.LeadingSlot.figma.js.map +1 -0
- package/lib/module/figma/Tile.Title.figma.js +17 -0
- package/lib/module/figma/Tile.Title.figma.js.map +1 -0
- package/lib/module/figma/Tile.TrailingSlot.figma.js +17 -0
- package/lib/module/figma/Tile.TrailingSlot.figma.js.map +1 -0
- package/lib/module/figma/Tile.figma.js +51 -0
- package/lib/module/figma/Tile.figma.js.map +1 -0
- package/lib/module/figma/Toast.Button.figma.js +26 -0
- package/lib/module/figma/Toast.Button.figma.js.map +1 -0
- package/lib/module/figma/Toast.Close.figma.js +15 -0
- package/lib/module/figma/Toast.Close.figma.js.map +1 -0
- package/lib/module/figma/Toast.figma.js +75 -0
- package/lib/module/figma/Toast.figma.js.map +1 -0
- package/lib/module/figma/Tooltip.Content.figma.js +24 -0
- package/lib/module/figma/Tooltip.Content.figma.js.map +1 -0
- package/lib/module/figma/Tooltip.figma.js +40 -0
- package/lib/module/figma/Tooltip.figma.js.map +1 -0
- package/lib/module/figma/VirtualizedList.figma.js +25 -0
- package/lib/module/figma/VirtualizedList.figma.js.map +1 -0
- package/lib/typescript/components/ToggleButton/index.d.ts +78 -0
- package/lib/typescript/components/ToggleButton/index.d.ts.map +1 -0
- package/lib/typescript/components/ToggleButton/styles.d.ts +30 -0
- package/lib/typescript/components/ToggleButton/styles.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +1 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/figma/Calendar.figma.d.ts +8 -0
- package/lib/typescript/figma/Calendar.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Carousel.NextButton.figma.d.ts +11 -0
- package/lib/typescript/figma/Carousel.NextButton.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Carousel.Pagination.figma.d.ts +11 -0
- package/lib/typescript/figma/Carousel.Pagination.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Carousel.PrevButton.figma.d.ts +11 -0
- package/lib/typescript/figma/Carousel.PrevButton.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Carousel.figma.d.ts +8 -0
- package/lib/typescript/figma/Carousel.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Checkbox.Group.figma.d.ts +8 -0
- package/lib/typescript/figma/Checkbox.Group.figma.d.ts.map +1 -0
- package/lib/typescript/figma/CurrencyInput.figma.d.ts +8 -0
- package/lib/typescript/figma/CurrencyInput.figma.d.ts.map +1 -0
- package/lib/typescript/figma/DateField.figma.d.ts +8 -0
- package/lib/typescript/figma/DateField.figma.d.ts.map +1 -0
- package/lib/typescript/figma/DatePicker.figma.d.ts +8 -0
- package/lib/typescript/figma/DatePicker.figma.d.ts.map +1 -0
- package/lib/typescript/figma/DateRangePicker.figma.d.ts +8 -0
- package/lib/typescript/figma/DateRangePicker.figma.d.ts.map +1 -0
- package/lib/typescript/figma/DateTimeField.figma.d.ts +8 -0
- package/lib/typescript/figma/DateTimeField.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Checkbox.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Checkbox.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.DateField.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.DateField.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.DateTimeField.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.DateTimeField.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Image.figma.d.ts +11 -0
- package/lib/typescript/figma/Image.figma.d.ts.map +1 -0
- package/lib/typescript/figma/MonthCalendar.figma.d.ts +8 -0
- package/lib/typescript/figma/MonthCalendar.figma.d.ts.map +1 -0
- package/lib/typescript/figma/ProgressBar.figma.d.ts +8 -0
- package/lib/typescript/figma/ProgressBar.figma.d.ts.map +1 -0
- package/lib/typescript/figma/ProgressCircle.figma.d.ts +11 -0
- package/lib/typescript/figma/ProgressCircle.figma.d.ts.map +1 -0
- package/lib/typescript/figma/RangeCalendar.figma.d.ts +8 -0
- package/lib/typescript/figma/RangeCalendar.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Skeleton.figma.d.ts +11 -0
- package/lib/typescript/figma/Skeleton.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Slider.Marker.figma.d.ts +11 -0
- package/lib/typescript/figma/Slider.Marker.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Slider.MarkerGroup.figma.d.ts +8 -0
- package/lib/typescript/figma/Slider.MarkerGroup.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Slider.Thumb.figma.d.ts +11 -0
- package/lib/typescript/figma/Slider.Thumb.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Slider.figma.d.ts +8 -0
- package/lib/typescript/figma/Slider.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Switch.figma.d.ts +8 -0
- package/lib/typescript/figma/Switch.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tabs.SegmentedControl.Segment.figma.d.ts +8 -0
- package/lib/typescript/figma/Tabs.SegmentedControl.Segment.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tabs.SegmentedControl.figma.d.ts +8 -0
- package/lib/typescript/figma/Tabs.SegmentedControl.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tabs.Tab.figma.d.ts +8 -0
- package/lib/typescript/figma/Tabs.Tab.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tabs.figma.d.ts +8 -0
- package/lib/typescript/figma/Tabs.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tile.Description.figma.d.ts +11 -0
- package/lib/typescript/figma/Tile.Description.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tile.Group.figma.d.ts +8 -0
- package/lib/typescript/figma/Tile.Group.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tile.LeadingSlot.figma.d.ts +8 -0
- package/lib/typescript/figma/Tile.LeadingSlot.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tile.Title.figma.d.ts +11 -0
- package/lib/typescript/figma/Tile.Title.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tile.TrailingSlot.figma.d.ts +8 -0
- package/lib/typescript/figma/Tile.TrailingSlot.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tile.figma.d.ts +8 -0
- package/lib/typescript/figma/Tile.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Toast.Button.figma.d.ts +14 -0
- package/lib/typescript/figma/Toast.Button.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Toast.Close.figma.d.ts +11 -0
- package/lib/typescript/figma/Toast.Close.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Toast.figma.d.ts +8 -0
- package/lib/typescript/figma/Toast.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tooltip.Content.figma.d.ts +8 -0
- package/lib/typescript/figma/Tooltip.Content.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Tooltip.figma.d.ts +8 -0
- package/lib/typescript/figma/Tooltip.figma.d.ts.map +1 -0
- package/lib/typescript/figma/VirtualizedList.figma.d.ts +8 -0
- package/lib/typescript/figma/VirtualizedList.figma.d.ts.map +1 -0
- package/package.json +6 -6
- package/src/components/ToggleButton/index.tsx +346 -0
- package/src/components/ToggleButton/styles.ts +191 -0
- package/src/components/index.ts +1 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12010-27571
|
|
4
|
+
// source=packages/components/src/components/MonthCalendar/index.tsx
|
|
5
|
+
// component=MonthCalendar
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
|
|
8
|
+
// Figma `view` (month / year) is internal navigation state toggled from the header at runtime.
|
|
9
|
+
export default {
|
|
10
|
+
id: 'month-calendar',
|
|
11
|
+
imports: ["import { MonthCalendar } from '@cdx-ui/components'"],
|
|
12
|
+
example: figma.code`<MonthCalendar value={value} onValueChange={setValue} aria-label="Month" />`
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=MonthCalendar.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/MonthCalendar.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA,eAAe;EACbC,EAAE,EAAE,gBAAgB;EACpBC,OAAO,EAAE,CAAC,oDAAoD,CAAC;EAC/DC,OAAO,EAAEH,KAAK,CAACI,IAAI;AACrB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=4927-541
|
|
4
|
+
// source=packages/components/src/components/ProgressBar/index.tsx
|
|
5
|
+
// component=ProgressBar
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// Figma expresses progress as a 0–1 fraction; the code's `value` is on the default 0–100 `max`.
|
|
10
|
+
// Figma `color=inherit` has no code equivalent (ProgressBar exposes no color prop), so it is not mapped.
|
|
11
|
+
const value = instance.getEnum('value', {
|
|
12
|
+
'0': 0,
|
|
13
|
+
'0.05': 5,
|
|
14
|
+
'0.1': 10,
|
|
15
|
+
'0.15': 15,
|
|
16
|
+
'0.2': 20,
|
|
17
|
+
'0.25': 25,
|
|
18
|
+
'0.3': 30,
|
|
19
|
+
'0.333': 33,
|
|
20
|
+
'0.35': 35,
|
|
21
|
+
'0.4': 40,
|
|
22
|
+
'0.45': 45,
|
|
23
|
+
'0.5': 50,
|
|
24
|
+
'0.55': 55,
|
|
25
|
+
'0.6': 60,
|
|
26
|
+
'0.65': 65,
|
|
27
|
+
'0.666': 67,
|
|
28
|
+
'0.7': 70,
|
|
29
|
+
'0.75': 75,
|
|
30
|
+
'0.8': 80,
|
|
31
|
+
'0.85': 85,
|
|
32
|
+
'0.9': 90,
|
|
33
|
+
'0.95': 95,
|
|
34
|
+
'1': 100
|
|
35
|
+
});
|
|
36
|
+
const isIndeterminate = instance.getEnum('isIndeterminate', {
|
|
37
|
+
true: true,
|
|
38
|
+
false: false
|
|
39
|
+
});
|
|
40
|
+
export default {
|
|
41
|
+
id: 'progress-bar',
|
|
42
|
+
imports: ["import { ProgressBar } from '@cdx-ui/components'"],
|
|
43
|
+
example: figma.code`
|
|
44
|
+
<ProgressBar value={${isIndeterminate ? 'null' : value}} accessibilityLabel="Progress">
|
|
45
|
+
<ProgressBar.Indicator />
|
|
46
|
+
</ProgressBar>`
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=ProgressBar.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","value","getEnum","isIndeterminate","true","false","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/ProgressBar.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,KAAK,GAAGF,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtC,GAAG,EAAE,CAAC;EACN,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,GAAG,EAAE;AACP,CAAC,CAAC;AACF,MAAMC,eAAe,GAAGJ,QAAQ,CAACG,OAAO,CAAC,iBAAiB,EAAE;EAC1DE,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,eAAe;EACbC,EAAE,EAAE,cAAc;EAClBC,OAAO,EAAE,CAAC,kDAAkD,CAAC;EAC7DC,OAAO,EAAEV,KAAK,CAACW,IAAI;AACrB,sBAAsBN,eAAe,GAAG,MAAM,GAAGF,KAAK;AACtD;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=2616-182
|
|
4
|
+
// source=packages/components/src/components/ProgressCircle/index.tsx
|
|
5
|
+
// component=ProgressCircle
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const color = instance.getEnum('color', {
|
|
9
|
+
default: undefined,
|
|
10
|
+
inherit: 'inherit'
|
|
11
|
+
});
|
|
12
|
+
// The code only ships `large` and `small`; Figma `tiny` has no code size, so the snippet flags it
|
|
13
|
+
// instead of silently substituting another size.
|
|
14
|
+
const size = instance.getEnum('size', {
|
|
15
|
+
large: undefined,
|
|
16
|
+
small: 'small',
|
|
17
|
+
tiny: undefined
|
|
18
|
+
});
|
|
19
|
+
const isTiny = instance.getEnum('size', {
|
|
20
|
+
large: false,
|
|
21
|
+
small: false,
|
|
22
|
+
tiny: true
|
|
23
|
+
});
|
|
24
|
+
// Figma expresses progress as a 0–1 fraction; the code's `value` is on the default 0–100 `max`.
|
|
25
|
+
// `isComplete` only adds a checkmark overlay in Figma; the code renders a full ring at value 100.
|
|
26
|
+
const value = instance.getEnum('value', {
|
|
27
|
+
'0': 0,
|
|
28
|
+
'0.05': 5,
|
|
29
|
+
'0.1': 10,
|
|
30
|
+
'0.15': 15,
|
|
31
|
+
'0.2': 20,
|
|
32
|
+
'0.25': 25,
|
|
33
|
+
'0.3': 30,
|
|
34
|
+
'0.35': 35,
|
|
35
|
+
'0.4': 40,
|
|
36
|
+
'0.45': 45,
|
|
37
|
+
'0.5': 50,
|
|
38
|
+
'0.55': 55,
|
|
39
|
+
'0.6': 60,
|
|
40
|
+
'0.65': 65,
|
|
41
|
+
'0.7': 70,
|
|
42
|
+
'0.75': 75,
|
|
43
|
+
'0.8': 80,
|
|
44
|
+
'0.85': 85,
|
|
45
|
+
'0.9': 90,
|
|
46
|
+
'0.95': 95,
|
|
47
|
+
'1': 100
|
|
48
|
+
});
|
|
49
|
+
const isIndeterminate = instance.getEnum('isIndeterminate', {
|
|
50
|
+
true: true,
|
|
51
|
+
false: false
|
|
52
|
+
});
|
|
53
|
+
const sizeProp = figma.helpers.react.renderProp('size', size);
|
|
54
|
+
const colorProp = figma.helpers.react.renderProp('color', color);
|
|
55
|
+
export default {
|
|
56
|
+
id: 'progress-circle',
|
|
57
|
+
imports: ["import { ProgressCircle } from '@cdx-ui/components'"],
|
|
58
|
+
example: figma.code`
|
|
59
|
+
${isTiny ? figma.code`{/* Figma size "tiny" has no code equivalent; ProgressCircle supports "large" and "small". */}` : null}
|
|
60
|
+
<ProgressCircle value={${isIndeterminate ? 'null' : value}}${sizeProp}${colorProp} accessibilityLabel="Progress">
|
|
61
|
+
<ProgressCircle.Indicator />
|
|
62
|
+
</ProgressCircle>`,
|
|
63
|
+
metadata: {
|
|
64
|
+
nestable: true
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=ProgressCircle.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","color","getEnum","default","undefined","inherit","size","large","small","tiny","isTiny","value","isIndeterminate","true","false","sizeProp","helpers","react","renderProp","colorProp","id","imports","example","code","metadata","nestable"],"sourceRoot":"../../../src","sources":["figma/ProgressCircle.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,KAAK,GAAGF,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCC,OAAO,EAAEC,SAAS;EAClBC,OAAO,EAAE;AACX,CAAC,CAAC;AACF;AACA;AACA,MAAMC,IAAI,GAAGP,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCK,KAAK,EAAEH,SAAS;EAChBI,KAAK,EAAE,OAAO;EACdC,IAAI,EAAEL;AACR,CAAC,CAAC;AACF,MAAMM,MAAM,GAAGX,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACtCK,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE;AACR,CAAC,CAAC;AACF;AACA;AACA,MAAME,KAAK,GAAGZ,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtC,GAAG,EAAE,CAAC;EACN,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,EAAE;EACV,GAAG,EAAE;AACP,CAAC,CAAC;AACF,MAAMU,eAAe,GAAGb,QAAQ,CAACG,OAAO,CAAC,iBAAiB,EAAE;EAC1DW,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMC,QAAQ,GAAGjB,KAAK,CAACkB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,MAAM,EAAEZ,IAAI,CAAC;AAC7D,MAAMa,SAAS,GAAGrB,KAAK,CAACkB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAEjB,KAAK,CAAC;AAEhE,eAAe;EACbmB,EAAE,EAAE,iBAAiB;EACrBC,OAAO,EAAE,CAAC,qDAAqD,CAAC;EAChEC,OAAO,EAAExB,KAAK,CAACyB,IAAI;AACrB,EAAEb,MAAM,GAAGZ,KAAK,CAACyB,IAAI,gGAAgG,GAAG,IAAI;AAC5H,yBAAyBX,eAAe,GAAG,MAAM,GAAGD,KAAK,IAAII,QAAQ,GAAGI,SAAS;AACjF;AACA,kBAAkB;EAChBK,QAAQ,EAAE;IAAEC,QAAQ,EAAE;EAAK;AAC7B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12118-58084
|
|
4
|
+
// source=packages/components/src/components/RangeCalendar/index.tsx
|
|
5
|
+
// component=RangeCalendar
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// `view` (day / year) is internal navigation state toggled from the header at runtime. The code
|
|
10
|
+
// header always includes the year-picker toggle, so hiding it in Figma is flagged in the snippet.
|
|
11
|
+
const hidesYearPicker = instance.getEnum('Show Year Picker?', {
|
|
12
|
+
true: false,
|
|
13
|
+
false: true
|
|
14
|
+
});
|
|
15
|
+
export default {
|
|
16
|
+
id: 'range-calendar',
|
|
17
|
+
imports: ["import { RangeCalendar } from '@cdx-ui/components'"],
|
|
18
|
+
example: figma.code`
|
|
19
|
+
${hidesYearPicker ? figma.code`{/* RangeCalendar always shows the year-picker toggle; Figma "Show Year Picker?=false" has no code equivalent. */}` : null}
|
|
20
|
+
<RangeCalendar
|
|
21
|
+
startValue={startValue}
|
|
22
|
+
endValue={endValue}
|
|
23
|
+
onRangeChange={({ startId, endId }) => {
|
|
24
|
+
setStartValue(startId);
|
|
25
|
+
setEndValue(endId);
|
|
26
|
+
}}
|
|
27
|
+
aria-label="Date range"
|
|
28
|
+
/>`
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=RangeCalendar.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","hidesYearPicker","getEnum","true","false","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/RangeCalendar.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,eAAe,GAAGF,QAAQ,CAACG,OAAO,CAAC,mBAAmB,EAAE;EAC5DC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,eAAe;EACbC,EAAE,EAAE,gBAAgB;EACpBC,OAAO,EAAE,CAAC,oDAAoD,CAAC;EAC/DC,OAAO,EAAET,KAAK,CAACU,IAAI;AACrB,EAAEP,eAAe,GAAGH,KAAK,CAACU,IAAI,oHAAoH,GAAG,IAAI;AACzJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11476-16576
|
|
4
|
+
// source=packages/components/src/components/Skeleton/index.tsx
|
|
5
|
+
// component=Skeleton
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// Skeleton has no radius prop: `default` is its built-in `rounded-md`, and the other radii are
|
|
10
|
+
// set through `className`, which is also how consumers size the placeholder.
|
|
11
|
+
const radiusClassName = instance.getEnum('radius', {
|
|
12
|
+
default: undefined,
|
|
13
|
+
round: 'rounded-full',
|
|
14
|
+
none: 'rounded-none'
|
|
15
|
+
});
|
|
16
|
+
const classNameProp = figma.helpers.react.renderProp('className', radiusClassName);
|
|
17
|
+
export default {
|
|
18
|
+
id: 'skeleton',
|
|
19
|
+
imports: ["import { Skeleton } from '@cdx-ui/components'"],
|
|
20
|
+
example: figma.code`<Skeleton${classNameProp} />`,
|
|
21
|
+
metadata: {
|
|
22
|
+
nestable: true
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=Skeleton.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","radiusClassName","getEnum","default","undefined","round","none","classNameProp","helpers","react","renderProp","id","imports","example","code","metadata","nestable"],"sourceRoot":"../../../src","sources":["figma/Skeleton.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,eAAe,GAAGF,QAAQ,CAACG,OAAO,CAAC,QAAQ,EAAE;EACjDC,OAAO,EAAEC,SAAS;EAClBC,KAAK,EAAE,cAAc;EACrBC,IAAI,EAAE;AACR,CAAC,CAAC;AACF,MAAMC,aAAa,GAAGT,KAAK,CAACU,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,eAAe,CAAC;AAElF,eAAe;EACbU,EAAE,EAAE,UAAU;EACdC,OAAO,EAAE,CAAC,+CAA+C,CAAC;EAC1DC,OAAO,EAAEf,KAAK,CAACgB,IAAI,YAAYP,aAAa,KAAK;EACjDQ,QAAQ,EAAE;IAAEC,QAAQ,EAAE;EAAK;AAC7B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11566-18062
|
|
4
|
+
// source=packages/components/src/components/Slider/index.tsx
|
|
5
|
+
// component=Slider.Marker
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
|
|
8
|
+
// Figma `filled` is derived at runtime from the marker's position relative to the slider value.
|
|
9
|
+
export default {
|
|
10
|
+
id: 'slider-marker',
|
|
11
|
+
imports: ["import { Slider } from '@cdx-ui/components'"],
|
|
12
|
+
example: figma.code`<Slider.Marker />`,
|
|
13
|
+
metadata: {
|
|
14
|
+
nestable: true
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=Slider.Marker.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","id","imports","example","code","metadata","nestable"],"sourceRoot":"../../../src","sources":["figma/Slider.Marker.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA,eAAe;EACbC,EAAE,EAAE,eAAe;EACnBC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAEH,KAAK,CAACI,IAAI,mBAAmB;EACtCC,QAAQ,EAAE;IAAEC,QAAQ,EAAE;EAAK;AAC7B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11677-7959
|
|
4
|
+
// source=packages/components/src/components/Slider/index.tsx
|
|
5
|
+
// component=Slider.MarkerGroup
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
|
|
8
|
+
// `step` and `orientation` belong to the parent Slider (see Slider.figma.ts); the group clones the
|
|
9
|
+
// template marker at every step.
|
|
10
|
+
export default {
|
|
11
|
+
id: 'slider-marker-group',
|
|
12
|
+
imports: ["import { Slider } from '@cdx-ui/components'"],
|
|
13
|
+
example: figma.code`
|
|
14
|
+
<Slider.MarkerGroup>
|
|
15
|
+
<Slider.Marker />
|
|
16
|
+
</Slider.MarkerGroup>`
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=Slider.MarkerGroup.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Slider.MarkerGroup.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA,eAAe;EACbC,EAAE,EAAE,qBAAqB;EACzBC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAEH,KAAK,CAACI,IAAI;AACrB;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11500-17219
|
|
4
|
+
// source=packages/components/src/components/Slider/index.tsx
|
|
5
|
+
// component=Slider.Thumb
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
|
|
8
|
+
// Figma `isDisabled` mirrors the parent Slider's `isDisabled`; Slider.Thumb has no disabled prop
|
|
9
|
+
// of its own.
|
|
10
|
+
export default {
|
|
11
|
+
id: 'slider-thumb',
|
|
12
|
+
imports: ["import { Slider } from '@cdx-ui/components'"],
|
|
13
|
+
example: figma.code`<Slider.Thumb />`,
|
|
14
|
+
metadata: {
|
|
15
|
+
nestable: true
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=Slider.Thumb.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","id","imports","example","code","metadata","nestable"],"sourceRoot":"../../../src","sources":["figma/Slider.Thumb.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA,eAAe;EACbC,EAAE,EAAE,cAAc;EAClBC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAEH,KAAK,CAACI,IAAI,kBAAkB;EACrCC,QAAQ,EAAE;IAAEC,QAAQ,EAAE;EAAK;AAC7B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11500-17763
|
|
4
|
+
// source=packages/components/src/components/Slider/index.tsx
|
|
5
|
+
// component=Slider
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const orientation = instance.getEnum('orientation', {
|
|
9
|
+
horizontal: undefined,
|
|
10
|
+
vertical: 'vertical'
|
|
11
|
+
});
|
|
12
|
+
// Figma value is a percentage of the track; the code's default range is 0–100.
|
|
13
|
+
const defaultValue = instance.getEnum('value', {
|
|
14
|
+
'0%': 0,
|
|
15
|
+
'10%': 10,
|
|
16
|
+
'20%': 20,
|
|
17
|
+
'25%': 25,
|
|
18
|
+
'30%': 30,
|
|
19
|
+
'40%': 40,
|
|
20
|
+
'50%': 50,
|
|
21
|
+
'60%': 60,
|
|
22
|
+
'70%': 70,
|
|
23
|
+
'75%': 75,
|
|
24
|
+
'80%': 80,
|
|
25
|
+
'90%': 90,
|
|
26
|
+
'100%': 100
|
|
27
|
+
});
|
|
28
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
29
|
+
true: true,
|
|
30
|
+
false: undefined
|
|
31
|
+
});
|
|
32
|
+
const showMarkers = instance.getBoolean('Show Markers?');
|
|
33
|
+
|
|
34
|
+
// Markers are generated from the root `step`, so the nested Slider.MarkerGroup `step` maps there.
|
|
35
|
+
const stepByMarkerGroupStep = {
|
|
36
|
+
'10%': 10,
|
|
37
|
+
'20%': 20,
|
|
38
|
+
'25%': 25,
|
|
39
|
+
'50%': 50
|
|
40
|
+
};
|
|
41
|
+
const markerGroup = instance.findInstance('Slider.MarkerGroup');
|
|
42
|
+
const markerGroupStep = markerGroup.type === 'INSTANCE' ? markerGroup.getPropertyValue('step') : undefined;
|
|
43
|
+
const step = showMarkers && typeof markerGroupStep === 'string' ? stepByMarkerGroupStep[markerGroupStep] : undefined;
|
|
44
|
+
const markerGroupSnippet = showMarkers && markerGroup.type === 'INSTANCE' ? markerGroup.executeTemplate().example : null;
|
|
45
|
+
const thumb = instance.findInstance('Slider.Thumb');
|
|
46
|
+
const thumbSnippet = thumb.type === 'INSTANCE' ? thumb.executeTemplate().example : figma.code`<Slider.Thumb />`;
|
|
47
|
+
const orientationProp = figma.helpers.react.renderProp('orientation', orientation);
|
|
48
|
+
const defaultValueProp = figma.helpers.react.renderProp('defaultValue', defaultValue);
|
|
49
|
+
const stepProp = figma.helpers.react.renderProp('step', step);
|
|
50
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
51
|
+
export default {
|
|
52
|
+
id: 'slider',
|
|
53
|
+
imports: ["import { Slider } from '@cdx-ui/components'"],
|
|
54
|
+
example: figma.code`
|
|
55
|
+
<Slider accessibilityLabel="Slider"${defaultValueProp}${stepProp}${orientationProp}${isDisabledProp}>
|
|
56
|
+
<Slider.Rail>
|
|
57
|
+
<Slider.Track />
|
|
58
|
+
</Slider.Rail>
|
|
59
|
+
${thumbSnippet}
|
|
60
|
+
${markerGroupSnippet}
|
|
61
|
+
</Slider>`
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=Slider.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","orientation","getEnum","horizontal","undefined","vertical","defaultValue","isDisabled","true","false","showMarkers","getBoolean","stepByMarkerGroupStep","markerGroup","findInstance","markerGroupStep","type","getPropertyValue","step","markerGroupSnippet","executeTemplate","example","thumb","thumbSnippet","code","orientationProp","helpers","react","renderProp","defaultValueProp","stepProp","isDisabledProp","id","imports"],"sourceRoot":"../../../src","sources":["figma/Slider.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAClDC,UAAU,EAAEC,SAAS;EACrBC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF;AACA,MAAMC,YAAY,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EAC7C,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMK,UAAU,GAAGR,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDM,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEL;AACT,CAAC,CAAC;AACF,MAAMM,WAAW,GAAGX,QAAQ,CAACY,UAAU,CAAC,eAAe,CAAC;;AAExD;AACA,MAAMC,qBAA6C,GAAG;EACpD,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE;AACT,CAAC;AACD,MAAMC,WAAW,GAAGd,QAAQ,CAACe,YAAY,CAAC,oBAAoB,CAAC;AAC/D,MAAMC,eAAe,GACnBF,WAAW,CAACG,IAAI,KAAK,UAAU,GAAGH,WAAW,CAACI,gBAAgB,CAAC,MAAM,CAAC,GAAGb,SAAS;AACpF,MAAMc,IAAI,GACRR,WAAW,IAAI,OAAOK,eAAe,KAAK,QAAQ,GAC9CH,qBAAqB,CAACG,eAAe,CAAC,GACtCX,SAAS;AACf,MAAMe,kBAAkB,GACtBT,WAAW,IAAIG,WAAW,CAACG,IAAI,KAAK,UAAU,GAAGH,WAAW,CAACO,eAAe,CAAC,CAAC,CAACC,OAAO,GAAG,IAAI;AAE/F,MAAMC,KAAK,GAAGvB,QAAQ,CAACe,YAAY,CAAC,cAAc,CAAC;AACnD,MAAMS,YAAY,GAChBD,KAAK,CAACN,IAAI,KAAK,UAAU,GAAGM,KAAK,CAACF,eAAe,CAAC,CAAC,CAACC,OAAO,GAAGvB,KAAK,CAAC0B,IAAI,kBAAkB;AAE5F,MAAMC,eAAe,GAAG3B,KAAK,CAAC4B,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,aAAa,EAAE3B,WAAW,CAAC;AAClF,MAAM4B,gBAAgB,GAAG/B,KAAK,CAAC4B,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,cAAc,EAAEtB,YAAY,CAAC;AACrF,MAAMwB,QAAQ,GAAGhC,KAAK,CAAC4B,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,MAAM,EAAEV,IAAI,CAAC;AAC7D,MAAMa,cAAc,GAAGjC,KAAK,CAAC4B,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAErB,UAAU,CAAC;AAE/E,eAAe;EACbyB,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDZ,OAAO,EAAEvB,KAAK,CAAC0B,IAAI;AACrB,qCAAqCK,gBAAgB,GAAGC,QAAQ,GAAGL,eAAe,GAAGM,cAAc;AACnG;AACA;AACA;AACA,IAAIR,YAAY;AAChB,IAAIJ,kBAAkB;AACtB;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=308-19827
|
|
4
|
+
// source=packages/components/src/components/Switch/index.tsx
|
|
5
|
+
// component=Switch
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// `Platform` is a Figma-only preview axis; the code picks the native or web switch automatically.
|
|
10
|
+
const isChecked = instance.getEnum('isChecked', {
|
|
11
|
+
true: true,
|
|
12
|
+
false: undefined
|
|
13
|
+
});
|
|
14
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
15
|
+
true: true,
|
|
16
|
+
false: undefined
|
|
17
|
+
});
|
|
18
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
19
|
+
true: true,
|
|
20
|
+
false: undefined
|
|
21
|
+
});
|
|
22
|
+
const isCheckedProp = figma.helpers.react.renderProp('isChecked', isChecked);
|
|
23
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
24
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
25
|
+
export default {
|
|
26
|
+
id: 'switch',
|
|
27
|
+
imports: ["import { Switch } from '@cdx-ui/components'"],
|
|
28
|
+
example: figma.code`<Switch accessibilityLabel="Switch"${isCheckedProp}${isInvalidProp}${isDisabledProp} />`
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Switch.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","isChecked","getEnum","true","false","undefined","isInvalid","isDisabled","isCheckedProp","helpers","react","renderProp","isInvalidProp","isDisabledProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Switch.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAME,UAAU,GAAGR,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMG,aAAa,GAAGV,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEV,SAAS,CAAC;AAC5E,MAAMW,aAAa,GAAGd,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAC5E,MAAMO,cAAc,GAAGf,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,eAAe;EACbO,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAElB,KAAK,CAACmB,IAAI,sCAAsCT,aAAa,GAAGI,aAAa,GAAGC,cAAc;AACzG,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8708-771
|
|
4
|
+
// source=packages/components/src/components/Tabs/index.tsx
|
|
5
|
+
// component=Tabs.Tab
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// `active` is owned by the parent SegmentedControl (`defaultValue` on `Tabs`).
|
|
10
|
+
const label = instance.findText('{label}').textContent;
|
|
11
|
+
// Must match the value derivation in Tabs.SegmentedControl.figma.ts.
|
|
12
|
+
const value = label.trim().toLowerCase().replace(/\s+/g, '-');
|
|
13
|
+
const showIcon = instance.getEnum('Show Icon?', {
|
|
14
|
+
True: true,
|
|
15
|
+
False: false
|
|
16
|
+
});
|
|
17
|
+
const icon = instance.getInstanceSwap('icon');
|
|
18
|
+
const iconSnippet = showIcon && icon?.type === 'INSTANCE' ? icon.executeTemplate().example : null;
|
|
19
|
+
export default {
|
|
20
|
+
id: 'tabs-segmented-control-segment',
|
|
21
|
+
imports: ["import { Tabs } from '@cdx-ui/components'"],
|
|
22
|
+
example: figma.code`
|
|
23
|
+
<Tabs.Tab value="${value}">
|
|
24
|
+
${iconSnippet}
|
|
25
|
+
<Tabs.TabLabel>${label}</Tabs.TabLabel>
|
|
26
|
+
</Tabs.Tab>`
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Tabs.SegmentedControl.Segment.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","label","findText","textContent","value","trim","toLowerCase","replace","showIcon","getEnum","True","False","icon","getInstanceSwap","iconSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Tabs.SegmentedControl.Segment.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,KAAK,GAAIF,QAAQ,CAACG,QAAQ,CAAC,SAAS,CAAC,CAAgCC,WAAW;AACtF;AACA,MAAMC,KAAK,GAAGH,KAAK,CAACI,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AAE7D,MAAMC,QAAQ,GAAGT,QAAQ,CAACU,OAAO,CAAC,YAAY,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGb,QAAQ,CAACc,eAAe,CAAC,MAAM,CAAC;AAC7C,MAAMC,WAAW,GAAGN,QAAQ,IAAII,IAAI,EAAEG,IAAI,KAAK,UAAU,GAAGH,IAAI,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO,GAAG,IAAI;AAEjG,eAAe;EACbC,EAAE,EAAE,gCAAgC;EACpCC,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDF,OAAO,EAAEnB,KAAK,CAACsB,IAAI;AACrB,mBAAmBhB,KAAK;AACxB,IAAIU,WAAW;AACf,mBAAmBb,KAAK;AACxB;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8708-795
|
|
4
|
+
// source=packages/components/src/components/Tabs/index.tsx
|
|
5
|
+
// component=Tabs
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const segmentCount = instance.getEnum('segments', {
|
|
9
|
+
'2': 2,
|
|
10
|
+
'3': 3,
|
|
11
|
+
'4': 4,
|
|
12
|
+
'5': 5
|
|
13
|
+
});
|
|
14
|
+
const selected = instance.getEnum('selected', {
|
|
15
|
+
'1': 1,
|
|
16
|
+
'2': 2,
|
|
17
|
+
'3': 3,
|
|
18
|
+
'4': 4,
|
|
19
|
+
'5': 5
|
|
20
|
+
});
|
|
21
|
+
const segmentLayerNames = ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5'].slice(0, segmentCount ?? 2);
|
|
22
|
+
const segments = figma.properties.children(segmentLayerNames);
|
|
23
|
+
const selectedSegment = instance.findInstance(`Segment ${String(selected ?? 1)}`);
|
|
24
|
+
const selectedLabel = selectedSegment.type === 'INSTANCE' ? selectedSegment.findText('{label}').textContent : undefined;
|
|
25
|
+
const defaultValue = selectedLabel?.trim().toLowerCase().replace(/\s+/g, '-');
|
|
26
|
+
const defaultValueProp = figma.helpers.react.renderProp('defaultValue', defaultValue);
|
|
27
|
+
export default {
|
|
28
|
+
id: 'tabs-segmented-control',
|
|
29
|
+
imports: ["import { Tabs } from '@cdx-ui/components'"],
|
|
30
|
+
example: figma.code`
|
|
31
|
+
<Tabs variant="solid"${defaultValueProp}>
|
|
32
|
+
<Tabs.List accessibilityLabel="Segmented control">
|
|
33
|
+
${segments}
|
|
34
|
+
</Tabs.List>
|
|
35
|
+
</Tabs>`
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=Tabs.SegmentedControl.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","segmentCount","getEnum","selected","segmentLayerNames","slice","segments","properties","children","selectedSegment","findInstance","String","selectedLabel","type","findText","textContent","undefined","defaultValue","trim","toLowerCase","replace","defaultValueProp","helpers","react","renderProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Tabs.SegmentedControl.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,YAAY,GAAGF,QAAQ,CAACG,OAAO,CAAC,UAAU,EAAE;EAChD,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE;AACP,CAAC,CAAC;AACF,MAAMC,QAAQ,GAAGJ,QAAQ,CAACG,OAAO,CAAC,UAAU,EAAE;EAC5C,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE;AACP,CAAC,CAAC;AAEF,MAAME,iBAAiB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,CAACC,KAAK,CAC/F,CAAC,EACDJ,YAAY,IAAI,CAClB,CAAC;AACD,MAAMK,QAAQ,GAAGR,KAAK,CAACS,UAAU,CAACC,QAAQ,CAACJ,iBAAiB,CAAC;AAE7D,MAAMK,eAAe,GAAGV,QAAQ,CAACW,YAAY,CAAC,WAAWC,MAAM,CAACR,QAAQ,IAAI,CAAC,CAAC,EAAE,CAAC;AACjF,MAAMS,aAAa,GACjBH,eAAe,CAACI,IAAI,KAAK,UAAU,GAC9BJ,eAAe,CAACK,QAAQ,CAAC,SAAS,CAAC,CAAgCC,WAAW,GAC/EC,SAAS;AACf,MAAMC,YAAY,GAAGL,aAAa,EAAEM,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AAC7E,MAAMC,gBAAgB,GAAGvB,KAAK,CAACwB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,cAAc,EAAEP,YAAY,CAAC;AAErF,eAAe;EACbQ,EAAE,EAAE,wBAAwB;EAC5BC,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDC,OAAO,EAAE7B,KAAK,CAAC8B,IAAI;AACrB,uBAAuBP,gBAAgB;AACvC;AACA,MAAMf,QAAQ;AACd;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=10146-4255
|
|
4
|
+
// source=packages/components/src/components/Tabs/index.tsx
|
|
5
|
+
// component=Tabs.Tab
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// `active` is owned by the parent `Tabs` (`defaultValue`); `orientation` is inherited from it.
|
|
10
|
+
const label = instance.findText('Tabs.TabLabel').textContent;
|
|
11
|
+
// Must match the value derivation in Tabs.figma.ts so the parent's defaultValue selects this tab.
|
|
12
|
+
const value = label.trim().toLowerCase().replace(/\s+/g, '-');
|
|
13
|
+
const showIcon = instance.getEnum('Show Icon?', {
|
|
14
|
+
True: true,
|
|
15
|
+
False: false
|
|
16
|
+
});
|
|
17
|
+
const icon = instance.getInstanceSwap('icon');
|
|
18
|
+
const iconSnippet = showIcon && icon?.type === 'INSTANCE' ? icon.executeTemplate().example : null;
|
|
19
|
+
export default {
|
|
20
|
+
id: 'tabs-tab',
|
|
21
|
+
imports: ["import { Tabs } from '@cdx-ui/components'"],
|
|
22
|
+
example: figma.code`
|
|
23
|
+
<Tabs.Tab value="${value}">
|
|
24
|
+
${iconSnippet}
|
|
25
|
+
<Tabs.TabLabel>${label}</Tabs.TabLabel>
|
|
26
|
+
</Tabs.Tab>`
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Tabs.Tab.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","label","findText","textContent","value","trim","toLowerCase","replace","showIcon","getEnum","True","False","icon","getInstanceSwap","iconSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Tabs.Tab.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,KAAK,GAAIF,QAAQ,CAACG,QAAQ,CAAC,eAAe,CAAC,CAAgCC,WAAW;AAC5F;AACA,MAAMC,KAAK,GAAGH,KAAK,CAACI,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AAE7D,MAAMC,QAAQ,GAAGT,QAAQ,CAACU,OAAO,CAAC,YAAY,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGb,QAAQ,CAACc,eAAe,CAAC,MAAM,CAAC;AAC7C,MAAMC,WAAW,GAAGN,QAAQ,IAAII,IAAI,EAAEG,IAAI,KAAK,UAAU,GAAGH,IAAI,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO,GAAG,IAAI;AAEjG,eAAe;EACbC,EAAE,EAAE,UAAU;EACdC,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDF,OAAO,EAAEnB,KAAK,CAACsB,IAAI;AACrB,mBAAmBhB,KAAK;AACxB,IAAIU,WAAW;AACf,mBAAmBb,KAAK;AACxB;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=10266-3192
|
|
4
|
+
// source=packages/components/src/components/Tabs/index.tsx
|
|
5
|
+
// component=Tabs
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// The Figma Tabs component is the line-indicator style (`variant="outline"`); the filled style is
|
|
10
|
+
// the separate SegmentedControl component (see Tabs.SegmentedControl.figma.ts).
|
|
11
|
+
// Figma `width=fixed` (equal-width tabs) has no code prop, so `width` is not mapped.
|
|
12
|
+
const orientation = instance.getEnum('orientation', {
|
|
13
|
+
horizontal: undefined,
|
|
14
|
+
vertical: 'vertical'
|
|
15
|
+
});
|
|
16
|
+
const orientationProp = figma.helpers.react.renderProp('orientation', orientation);
|
|
17
|
+
const activeTab = instance.findConnectedInstances(node => node.getPropertyValue('active') === 'true').find(node => node.type === 'INSTANCE');
|
|
18
|
+
const activeLabel = activeTab?.type === 'INSTANCE' ? activeTab.findText('Tabs.TabLabel').textContent : undefined;
|
|
19
|
+
const defaultValue = activeLabel?.trim().toLowerCase().replace(/\s+/g, '-');
|
|
20
|
+
const defaultValueProp = figma.helpers.react.renderProp('defaultValue', defaultValue);
|
|
21
|
+
const listSlot = instance.getSlot('Tabs.List');
|
|
22
|
+
const listChildren = listSlot ? figma.helpers.react.renderChildren(listSlot) : null;
|
|
23
|
+
export default {
|
|
24
|
+
id: 'tabs',
|
|
25
|
+
imports: ["import { Tabs } from '@cdx-ui/components'"],
|
|
26
|
+
example: figma.code`
|
|
27
|
+
<Tabs variant="outline"${defaultValueProp}${orientationProp}>
|
|
28
|
+
<Tabs.List accessibilityLabel="Tabs">
|
|
29
|
+
${listChildren}
|
|
30
|
+
</Tabs.List>
|
|
31
|
+
</Tabs>`
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=Tabs.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","orientation","getEnum","horizontal","undefined","vertical","orientationProp","helpers","react","renderProp","activeTab","findConnectedInstances","node","getPropertyValue","find","type","activeLabel","findText","textContent","defaultValue","trim","toLowerCase","replace","defaultValueProp","listSlot","getSlot","listChildren","renderChildren","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Tabs.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,WAAW,GAAGF,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAClDC,UAAU,EAAEC,SAAS;EACrBC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,MAAMC,eAAe,GAAGR,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,aAAa,EAAER,WAAW,CAAC;AAElF,MAAMS,SAAS,GAAGX,QAAQ,CACvBY,sBAAsB,CAAEC,IAAI,IAAKA,IAAI,CAACC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC,CAC5EC,IAAI,CAAEF,IAAI,IAAKA,IAAI,CAACG,IAAI,KAAK,UAAU,CAAC;AAC3C,MAAMC,WAAW,GACfN,SAAS,EAAEK,IAAI,KAAK,UAAU,GACzBL,SAAS,CAACO,QAAQ,CAAC,eAAe,CAAC,CAAgCC,WAAW,GAC/Ed,SAAS;AACf,MAAMe,YAAY,GAAGH,WAAW,EAAEI,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AAC3E,MAAMC,gBAAgB,GAAGzB,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,cAAc,EAAEU,YAAY,CAAC;AAErF,MAAMK,QAAQ,GAAGzB,QAAQ,CAAC0B,OAAO,CAAC,WAAW,CAAC;AAC9C,MAAMC,YAAY,GAAGF,QAAQ,GAAG1B,KAAK,CAACS,OAAO,CAACC,KAAK,CAACmB,cAAc,CAACH,QAAQ,CAAC,GAAG,IAAI;AAEnF,eAAe;EACbI,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDC,OAAO,EAAEhC,KAAK,CAACiC,IAAI;AACrB,yBAAyBR,gBAAgB,GAAGjB,eAAe;AAC3D;AACA,MAAMoB,YAAY;AAClB;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8820-6260
|
|
4
|
+
// source=packages/components/src/components/Tile/index.tsx
|
|
5
|
+
// component=Tile.Description
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const description = instance.findText('{description}').textContent;
|
|
9
|
+
export default {
|
|
10
|
+
id: 'tile-description',
|
|
11
|
+
imports: ["import { Tile } from '@cdx-ui/components'"],
|
|
12
|
+
example: figma.code`<Tile.Description>${description}</Tile.Description>`,
|
|
13
|
+
metadata: {
|
|
14
|
+
nestable: true
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=Tile.Description.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","description","findText","textContent","id","imports","example","code","metadata","nestable"],"sourceRoot":"../../../src","sources":["figma/Tile.Description.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAIF,QAAQ,CAACG,QAAQ,CAAC,eAAe,CAAC,CAAgCC,WAAW;AAElG,eAAe;EACbC,EAAE,EAAE,kBAAkB;EACtBC,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDC,OAAO,EAAER,KAAK,CAACS,IAAI,qBAAqBN,WAAW,qBAAqB;EACxEO,QAAQ,EAAE;IAAEC,QAAQ,EAAE;EAAK;AAC7B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8856-11176
|
|
4
|
+
// source=packages/components/src/components/Tile/index.tsx
|
|
5
|
+
// component=Tile.Group
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const direction = instance.getEnum('direction', {
|
|
9
|
+
column: undefined,
|
|
10
|
+
row: 'row'
|
|
11
|
+
});
|
|
12
|
+
const spacing = instance.getEnum('spacing', {
|
|
13
|
+
default: undefined,
|
|
14
|
+
none: 'none'
|
|
15
|
+
});
|
|
16
|
+
const directionProp = figma.helpers.react.renderProp('direction', direction);
|
|
17
|
+
const spacingProp = figma.helpers.react.renderProp('spacing', spacing);
|
|
18
|
+
|
|
19
|
+
// Figma Tile.Group has no selection-mode property; the required `type` comes from the child tiles.
|
|
20
|
+
const tiles = instance.findConnectedInstances(node => {
|
|
21
|
+
const tileType = node.getPropertyValue('type');
|
|
22
|
+
return tileType === 'single' || tileType === 'multiple';
|
|
23
|
+
}).filter(node => node.type === 'INSTANCE');
|
|
24
|
+
const type = tiles[0]?.getPropertyValue('type') === 'multiple' ? 'multiple' : 'single';
|
|
25
|
+
const selectedValues = tiles.filter(tile => tile.getPropertyValue('isSelected') === 'true').map(tile => tile.findText('{title}', {
|
|
26
|
+
traverseInstances: true
|
|
27
|
+
}).textContent.trim().toLowerCase().replace(/\s+/g, '-'));
|
|
28
|
+
const defaultValueProp = type === 'multiple' ? figma.helpers.react.renderProp('defaultValue', selectedValues.length > 0 ? figma.helpers.react.array(selectedValues) : undefined) : figma.helpers.react.renderProp('defaultValue', selectedValues[0]);
|
|
29
|
+
const itemsSlot = instance.getSlot('items');
|
|
30
|
+
const itemsChildren = itemsSlot ? figma.helpers.react.renderChildren(itemsSlot) : null;
|
|
31
|
+
export default {
|
|
32
|
+
id: 'tile-group',
|
|
33
|
+
imports: ["import { Tile } from '@cdx-ui/components'"],
|
|
34
|
+
example: figma.code`
|
|
35
|
+
<Tile.Group type="${type}" aria-label="Options"${defaultValueProp}${directionProp}${spacingProp}>
|
|
36
|
+
${itemsChildren}
|
|
37
|
+
</Tile.Group>`
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=Tile.Group.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","direction","getEnum","column","undefined","row","spacing","default","none","directionProp","helpers","react","renderProp","spacingProp","tiles","findConnectedInstances","node","tileType","getPropertyValue","filter","type","selectedValues","tile","map","findText","traverseInstances","textContent","trim","toLowerCase","replace","defaultValueProp","length","array","itemsSlot","getSlot","itemsChildren","renderChildren","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Tile.Group.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,MAAM,EAAEC,SAAS;EACjBC,GAAG,EAAE;AACP,CAAC,CAAC;AACF,MAAMC,OAAO,GAAGP,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CK,OAAO,EAAEH,SAAS;EAClBI,IAAI,EAAE;AACR,CAAC,CAAC;AACF,MAAMC,aAAa,GAAGX,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEX,SAAS,CAAC;AAC5E,MAAMY,WAAW,GAAGf,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,SAAS,EAAEN,OAAO,CAAC;;AAEtE;AACA,MAAMQ,KAAK,GAAGf,QAAQ,CACnBgB,sBAAsB,CAAEC,IAAI,IAAK;EAChC,MAAMC,QAAQ,GAAGD,IAAI,CAACE,gBAAgB,CAAC,MAAM,CAAC;EAC9C,OAAOD,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,KAAK,UAAU;AACzD,CAAC,CAAC,CACDE,MAAM,CAAEH,IAAI,IAA6CA,IAAI,CAACI,IAAI,KAAK,UAAU,CAAC;AACrF,MAAMA,IAAI,GAAGN,KAAK,CAAC,CAAC,CAAC,EAAEI,gBAAgB,CAAC,MAAM,CAAC,KAAK,UAAU,GAAG,UAAU,GAAG,QAAQ;AAEtF,MAAMG,cAAc,GAAGP,KAAK,CACzBK,MAAM,CAAEG,IAAI,IAAKA,IAAI,CAACJ,gBAAgB,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC,CAChEK,GAAG,CAAED,IAAI,IAENA,IAAI,CAACE,QAAQ,CAAC,SAAS,EAAE;EAAEC,iBAAiB,EAAE;AAAK,CAAC,CAAC,CACrDC,WAAW,CACVC,IAAI,CAAC,CAAC,CACNC,WAAW,CAAC,CAAC,CACbC,OAAO,CAAC,MAAM,EAAE,GAAG,CACxB,CAAC;AACH,MAAMC,gBAAgB,GACpBV,IAAI,KAAK,UAAU,GACftB,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CAC5B,cAAc,EACdS,cAAc,CAACU,MAAM,GAAG,CAAC,GAAGjC,KAAK,CAACY,OAAO,CAACC,KAAK,CAACqB,KAAK,CAACX,cAAc,CAAC,GAAGjB,SAC1E,CAAC,GACDN,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,cAAc,EAAES,cAAc,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAMY,SAAS,GAAGlC,QAAQ,CAACmC,OAAO,CAAC,OAAO,CAAC;AAC3C,MAAMC,aAAa,GAAGF,SAAS,GAAGnC,KAAK,CAACY,OAAO,CAACC,KAAK,CAACyB,cAAc,CAACH,SAAS,CAAC,GAAG,IAAI;AAEtF,eAAe;EACbI,EAAE,EAAE,YAAY;EAChBC,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDC,OAAO,EAAEzC,KAAK,CAAC0C,IAAI;AACrB,oBAAoBpB,IAAI,yBAAyBU,gBAAgB,GAAGrB,aAAa,GAAGI,WAAW;AAC/F,IAAIsB,aAAa;AACjB;AACA,CAAC","ignoreList":[]}
|