@telefonica/mistica 16.71.0 → 17.0.0

package/src/__figma__/sheet-common.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=5841-10827
+// source=src/sheet-common.tsx
+// component=Sheet
+import figma from 'figma';
+
+export default {
+    example: figma.code`
+        <Sheet onClose={() => {}}>
+            {({closeModal, modalTitleId}) => (
+                <SheetBody modalTitleId={modalTitleId} title="Title" description="Description" />
+            )}
+        </Sheet>
+    `,
+    imports: ['import {Sheet, SheetBody} from "@telefonica/mistica";'],
+    id: 'sheet-common',
+    metadata: {nestable: false},
+};

package/src/__figma__/sheet-web.mobile.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=10854-7964
+// source=src/sheet-web.tsx
+// component=SheetWeb
+import figma from 'figma';
+
+// The Figma node exposes only prototyping toggles ("PROTO GUIDE", "Hide sheet
+// (for prototyping)") which have no correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <SheetWeb />
+    `,
+    imports: ['import {SheetWeb} from "@telefonica/mistica";'],
+    id: 'sheet-web-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/skeleton-circle.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=8169-7532
+// source=src/skeletons.tsx
+// component=SkeletonCircle
+import figma from 'figma';
+
+// The Figma node exposes only a "Theme context" VARIANT which has no
+// correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <SkeletonCircle size={48} />
+    `,
+    imports: ['import {SkeletonCircle} from "@telefonica/mistica";'],
+    id: 'skeleton-circle',
+    metadata: {nestable: false},
+};

package/src/__figma__/skeleton-circle.mobile.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=16075-9337
+// source=src/skeletons.tsx
+// component=SkeletonCircle
+import figma from 'figma';
+
+// The Figma node exposes only a "Theme context" VARIANT which has no
+// correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <SkeletonCircle size={48} />
+    `,
+    imports: ['import {SkeletonCircle} from "@telefonica/mistica";'],
+    id: 'skeleton-circle-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/skeleton-line.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=8169-7529
+// source=src/skeletons.tsx
+// component=SkeletonLine
+import figma from 'figma';
+
+// The Figma node exposes only a "Theme context" VARIANT which has no
+// correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <SkeletonLine />
+    `,
+    imports: ['import {SkeletonLine} from "@telefonica/mistica";'],
+    id: 'skeleton-line',
+    metadata: {nestable: false},
+};

package/src/__figma__/skeleton-rectangle.figma.ts

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=8169-7531
+// source=src/skeletons.tsx
+// component=SkeletonRectangle
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "noBorderRadius" is a VARIANT (False | True) mapping onto the boolean code prop.
+const noBorderRadius = instance.getEnum('noBorderRadius', {True: true, False: false});
+
+export default {
+    example: figma.code`
+        <SkeletonRectangle ${noBorderRadius ? 'noBorderRadius' : ''} height={100} />
+    `,
+    imports: ['import {SkeletonRectangle} from "@telefonica/mistica";'],
+    id: 'skeleton-rectangle',
+    metadata: {nestable: false},
+};

package/src/__figma__/skeleton-row.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=8169-7530
+// source=src/skeletons.tsx
+// component=SkeletonRow
+import figma from 'figma';
+
+// The Figma node exposes only a "Theme Context" VARIANT which has no
+// correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <SkeletonRow />
+    `,
+    imports: ['import {SkeletonRow} from "@telefonica/mistica";'],
+    id: 'skeleton-row',
+    metadata: {nestable: false},
+};

package/src/__figma__/skeleton-text.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=8169-7528
+// source=src/skeletons.tsx
+// component=SkeletonText
+import figma from 'figma';
+
+// The Figma node exposes only a "Theme context" VARIANT which has no
+// correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <SkeletonText />
+    `,
+    imports: ['import {SkeletonText} from "@telefonica/mistica";'],
+    id: 'skeleton-text',
+    metadata: {nestable: false},
+};

package/src/__figma__/skip-link.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=30245-13665
+// source=src/skip-link.tsx
+// component=SkipLink
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// The link label lives in the nested Button Link "Action" text layer.
+const labelLayer = instance.findText('Action');
+const label = labelLayer.type === 'TEXT' ? labelLayer.textContent : 'Skip to main content';
+
+export default {
+    example: figma.code`
+        <SkipLink targetId="main-content">${label}</SkipLink>
+    `,
+    imports: ['import {SkipLink} from "@telefonica/mistica";'],
+    id: 'skip-link',
+    metadata: {nestable: false},
+};

package/src/__figma__/skip-link.mobile.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=55911-14307
+// source=src/skip-link.tsx
+// component=SkipLink
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// The link label lives in the nested Button Link "Action" text layer.
+const labelLayer = instance.findText('Action');
+const label = labelLayer.type === 'TEXT' ? labelLayer.textContent : 'Skip to main content';
+
+export default {
+    example: figma.code`
+        <SkipLink targetId="main-content">${label}</SkipLink>
+    `,
+    imports: ['import {SkipLink} from "@telefonica/mistica";'],
+    id: 'skip-link-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/slider.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=10556-9670
+// source=src/slider.tsx
+// component=Slider
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const tooltip = instance.getBoolean('Tooltip');
+
+// "State" is a VARIANT (Activated | Pressed | Disabled); only "Disabled" maps
+// onto the boolean `disabled` code prop.
+const disabled = instance.getEnum('State', {
+    Activated: false,
+    Pressed: false,
+    Disabled: true,
+});
+
+export default {
+    example: figma.code`
+        <Slider name="slider" ${tooltip ? 'tooltip' : ''} ${disabled ? 'disabled' : ''} />
+    `,
+    imports: ['import {Slider} from "@telefonica/mistica";'],
+    id: 'slider',
+    metadata: {nestable: false},
+};

package/src/__figma__/slider.mobile.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=2373-8535
+// source=src/slider.tsx
+// component=Slider
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const tooltip = instance.getBoolean('Tooltip');
+
+// "State" is a VARIANT (Activated | Pressed | Disabled); only "Disabled" maps
+// onto the boolean `disabled` code prop.
+const disabled = instance.getEnum('State', {
+    Activated: false,
+    Pressed: false,
+    Disabled: true,
+});
+
+export default {
+    example: figma.code`
+        <Slider name="slider" ${tooltip ? 'tooltip' : ''} ${disabled ? 'disabled' : ''} />
+    `,
+    imports: ['import {Slider} from "@telefonica/mistica";'],
+    id: 'slider-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/slideshow.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=2249-5240
+// source=src/carousel.tsx
+// component=Slideshow
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Autoplay", "Show bullets" and "Controls" are BOOLEAN properties.
+const autoplay = instance.getBoolean('Autoplay');
+const withBullets = instance.getBoolean('Show bullets');
+const withControls = instance.getBoolean('Controls');
+
+// "Current Slide" VARIANT maps onto the `initialPageIndex`.
+const initialPageIndex = instance.getEnum('Current Slide', {
+    '#1': '0',
+    '#2': '1',
+    '#3': '2',
+    '#4': '3',
+    '#5': '4',
+});
+
+export default {
+    example: figma.code`
+        <Slideshow
+            items={[
+                <Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />,
+                <Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />,
+            ]}
+            ${initialPageIndex !== undefined ? figma.code`initialPageIndex={${initialPageIndex}}` : ''}
+            ${autoplay ? 'autoplay' : ''}
+            ${withBullets ? 'withBullets' : ''}
+            ${withControls ? 'withControls' : ''}
+        />
+    `,
+    imports: ['import {Slideshow, Image} from "@telefonica/mistica";'],
+    id: 'slideshow',
+    metadata: {nestable: false},
+};

package/src/__figma__/snackbar.figma.ts

@@ -0,0 +1,35 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=302-5497
+// source=src/snackbar.tsx
+// component=Snackbar
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const messageLayer = instance.findText('Text');
+const message = messageLayer.type === 'TEXT' ? messageLayer.textContent : 'Snackbar message';
+
+const type = instance.getEnum('Type', {Informative: 'INFORMATIVE', Critical: 'CRITICAL'});
+
+// "Action" is a VARIANT (No | Yes) toggling the presence of the action button.
+const buttonText = instance.getEnum('Action', {Yes: 'Action', No: undefined});
+
+// "Duration" is a VARIANT (Default | Infinite); only "Infinite" maps onto the
+// `duration` code prop.
+const duration = instance.getEnum('Duration', {Default: undefined, Infinite: 'PERSISTENT'});
+
+const withDismiss = instance.getBoolean('Dismiss');
+
+export default {
+    example: figma.code`
+        <Snackbar
+            message="${message}"
+            ${type ? figma.code`type="${type}"` : ''}
+            ${buttonText ? figma.code`buttonText="${buttonText}"` : ''}
+            ${duration ? figma.code`duration="${duration}"` : ''}
+            ${withDismiss ? 'withDismiss' : ''}
+        />
+    `,
+    imports: ['import {Snackbar} from "@telefonica/mistica";'],
+    id: 'snackbar',
+    metadata: {nestable: false},
+};

package/src/__figma__/snackbar.mobile.figma.ts

@@ -0,0 +1,35 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=6102-8009
+// source=src/snackbar.tsx
+// component=Snackbar
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const messageLayer = instance.findText('Text');
+const message = messageLayer.type === 'TEXT' ? messageLayer.textContent : 'Snackbar message';
+
+const type = instance.getEnum('Type', {Informative: 'INFORMATIVE', Critical: 'CRITICAL'});
+
+// "Action" is a VARIANT (No | Yes) toggling the presence of the action button.
+const buttonText = instance.getEnum('Action', {Yes: 'Action', No: undefined});
+
+// "Duration" is a VARIANT (Default | Infinite); only "Infinite" maps onto the
+// `duration` code prop.
+const duration = instance.getEnum('Duration', {Default: undefined, Infinite: 'PERSISTENT'});
+
+const withDismiss = instance.getBoolean('Dismiss');
+
+export default {
+    example: figma.code`
+        <Snackbar
+            message="${message}"
+            ${type ? figma.code`type="${type}"` : ''}
+            ${buttonText ? figma.code`buttonText="${buttonText}"` : ''}
+            ${duration ? figma.code`duration="${duration}"` : ''}
+            ${withDismiss ? 'withDismiss' : ''}
+        />
+    `,
+    imports: ['import {Snackbar} from "@telefonica/mistica";'],
+    id: 'snackbar-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/spinner.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=809-5303
+// source=src/spinner.tsx
+// component=Spinner
+import figma from 'figma';
+
+// The Figma node exposes only a "Theme context" VARIANT which has no
+// correspondence in the code component props.
+
+export default {
+    example: figma.code`
+        <Spinner />
+    `,
+    imports: ['import {Spinner} from "@telefonica/mistica";'],
+    id: 'spinner',
+    metadata: {nestable: false},
+};

package/src/__figma__/stacking-group.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=16746-3205
+// source=src/stacking-group.tsx
+// component=StackingGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Max. Items" is a VARIANT (2 … 9) mapping onto the numeric `maxItems` code prop.
+const maxItems = instance.getEnum('Max. Items', {
+    '2': 2,
+    '3': 3,
+    '4': 4,
+    '5': 5,
+    '6': 6,
+    '7': 7,
+    '8': 8,
+    '9': 9,
+});
+
+export default {
+    example: figma.code`
+        <StackingGroup ${maxItems ? figma.code`maxItems={${maxItems}}` : ''} moreItemsStyle={{type: 'circle', size: 40}}>
+            <div>Item 1</div>
+            <div>Item 2</div>
+            <div>Item 3</div>
+        </StackingGroup>
+    `,
+    imports: ['import {StackingGroup} from "@telefonica/mistica";'],
+    id: 'stacking-group',
+    metadata: {nestable: false},
+};

package/src/__figma__/stacking-group.mobile.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=27720-11788
+// source=src/stacking-group.tsx
+// component=StackingGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Max. Items" is a VARIANT (2 … 9) mapping onto the numeric `maxItems` code prop.
+const maxItems = instance.getEnum('Max. Items', {
+    '2': 2,
+    '3': 3,
+    '4': 4,
+    '5': 5,
+    '6': 6,
+    '7': 7,
+    '8': 8,
+    '9': 9,
+});
+
+export default {
+    example: figma.code`
+        <StackingGroup ${maxItems ? figma.code`maxItems={${maxItems}}` : ''} moreItemsStyle={{type: 'circle', size: 40}}>
+            <div>Item 1</div>
+            <div>Item 2</div>
+            <div>Item 3</div>
+        </StackingGroup>
+    `,
+    imports: ['import {StackingGroup} from "@telefonica/mistica";'],
+    id: 'stacking-group-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/stepper.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=0-2728
+// source=src/stepper.tsx
+// component=Stepper
+import figma from 'figma';
+
+// The Figma node exposes no properties that map onto the code component props
+// (`steps` and `currentIndex`); they are provided as a static example.
+
+export default {
+    example: figma.code`
+        <Stepper steps={['Step 1', 'Step 2', 'Step 3']} currentIndex={0} />
+    `,
+    imports: ['import {Stepper} from "@telefonica/mistica";'],
+    id: 'stepper',
+    metadata: {nestable: false},
+};

package/src/__figma__/stepper.mobile.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=1369-6481
+// source=src/stepper.tsx
+// component=Stepper
+import figma from 'figma';
+
+// The Figma node exposes only a "Steps" VARIANT (2 | 3 | 4 | 5) which has no
+// direct code-prop correspondence; `steps` and `currentIndex` are provided as a
+// static example.
+
+export default {
+    example: figma.code`
+        <Stepper steps={['Step 1', 'Step 2', 'Step 3']} currentIndex={0} />
+    `,
+    imports: ['import {Stepper} from "@telefonica/mistica";'],
+    id: 'stepper-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/success-feedback-screen.figma.ts

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=28742-89
+// source=src/feedback.tsx
+// component=SuccessFeedbackScreen
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+const descriptionLayer = instance.findText('Description');
+const description = descriptionLayer.type === 'TEXT' ? descriptionLayer.textContent : '';
+
+export default {
+    example: figma.code`
+        <SuccessFeedbackScreen title="${title}" description="${description}" />
+    `,
+    imports: ['import {SuccessFeedbackScreen} from "@telefonica/mistica";'],
+    id: 'success-feedback-screen',
+    metadata: {nestable: false},
+};

package/src/__figma__/success-feedback.figma.ts

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=28758-2483
+// source=src/feedback.tsx
+// component=SuccessFeedback
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+const descriptionLayer = instance.findText('Description');
+const description = descriptionLayer.type === 'TEXT' ? descriptionLayer.textContent : '';
+
+export default {
+    example: figma.code`
+        <SuccessFeedback title="${title}" description="${description}" />
+    `,
+    imports: ['import {SuccessFeedback} from "@telefonica/mistica";'],
+    id: 'success-feedback',
+    metadata: {nestable: false},
+};

package/src/__figma__/switch-component.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=183-5534
+// source=src/switch-component.tsx
+// component=Switch
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "State" and "Disabled" are Figma VARIANTs (not BOOLEAN properties) mapping onto
+// the boolean `defaultChecked` and `disabled` code props.
+const checked = instance.getEnum('State', {On: true, Off: false});
+const disabled = instance.getEnum('Disabled', {True: true, False: false});
+
+export default {
+    example: figma.code`
+        <Switch
+            name="switch"
+            defaultChecked={${checked}}
+            ${disabled ? 'disabled' : ''}
+            onChange={() => {}}
+        >
+            Label
+        </Switch>
+    `,
+    imports: ['import {Switch} from "@telefonica/mistica";'],
+    id: 'switch',
+    metadata: {nestable: false},
+};

package/src/__figma__/switch-component.mobile.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=1952-7138
+// source=src/switch-component.tsx
+// component=Switch
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "State" and "Disabled" are Figma VARIANTs (not BOOLEAN properties) mapping onto
+// the boolean `defaultChecked` and `disabled` code props. On the Mobile node the
+// "Disabled" variant uses On/Off options.
+const checked = instance.getEnum('State', {On: true, Off: false});
+const disabled = instance.getEnum('Disabled', {On: true, Off: false});
+
+export default {
+    example: figma.code`
+        <Switch
+            name="switch"
+            defaultChecked={${checked}}
+            ${disabled ? 'disabled' : ''}
+            onChange={() => {}}
+        >
+            Label
+        </Switch>
+    `,
+    imports: ['import {Switch} from "@telefonica/mistica";'],
+    id: 'switch-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/table-actions-cell.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=18880-1209
+// source=src/table.tsx
+// component=Table
+import figma from 'figma';
+
+// The Figma node exposes an "Actions" VARIANT (1 | 2) which has no direct code-prop
+// correspondence; the row actions are provided as a static example.
+
+export default {
+    example: figma.code`
+        <Table
+            heading={['Header']}
+            content={[
+                {
+                    cells: ['Cell'],
+                    actions: [{Icon: () => null, onPress: () => {}, label: 'Action'}],
+                },
+            ]}
+        />
+    `,
+    imports: ['import {Table} from "@telefonica/mistica";'],
+    id: 'table-actions-cell',
+    metadata: {nestable: false},
+};

package/src/__figma__/table-body-cell.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=18880-1176
+// source=src/table.tsx
+// component=Table
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const cellLayer = instance.findText('Cell');
+const cell = cellLayer.type === 'TEXT' ? cellLayer.textContent : 'Cell';
+
+// "Content align" VARIANT maps onto the `columnTextAlign` prop.
+const columnTextAlign = instance.getEnum('Content align', {Left: 'left', Right: 'right'});
+
+export default {
+    example: figma.code`
+        <Table
+            heading={['Header']}
+            content={[['${cell}']]}
+            columnTextAlign="${columnTextAlign}"
+        />
+    `,
+    imports: ['import {Table} from "@telefonica/mistica";'],
+    id: 'table-body-cell',
+    metadata: {nestable: false},
+};

package/src/__figma__/table-container.figma.ts

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=18880-1248
+// source=src/table.tsx
+// component=Table
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Boxed" is a VARIANT (not a BOOLEAN property) mapping onto the `boxed` code prop.
+const boxed = instance.getEnum('Boxed', {True: true, False: false});
+
+export default {
+    example: figma.code`
+        <Table
+            heading={['Column 1', 'Column 2']}
+            content={[['Cell 1', 'Cell 2']]}
+            ${boxed ? 'boxed' : ''}
+        />
+    `,
+    imports: ['import {Table} from "@telefonica/mistica";'],
+    id: 'table-container',
+    metadata: {nestable: false},
+};