@mateuszgietner/zest-test

Test package for Figma Make POC - simplified Zest design system components.

Purpose

This package is a proof of concept to test if the Semantic Bridge approach works with Figma Make. It contains simplified versions of Zest components with the same API.

Installation

npm install @mateuszgietner/zest-test styled-components

Components

Button

import { Button } from '@mateuszgietner/zest-test';

<Button.Primary>Add to Cart</Button.Primary>
<Button.Secondary>Cancel</Button.Secondary>
<Button.Tertiary>Learn More</Button.Tertiary>
<Button.Primary appearance="negative">Delete</Button.Primary>
<Button.Primary size="sm">Small</Button.Primary>

Card

import { Card } from '@mateuszgietner/zest-test';

<Card.Static padding="lg">
  <Text variant="heading-md">Title</Text>
</Card.Static>

<Card.Clickable onClick={handleClick}>
  <Text variant="body-md">Click me</Text>
</Card.Clickable>

Text

import { Text } from '@mateuszgietner/zest-test';

<Text variant="heading-lg">Page Title</Text>
<Text variant="body-md" color="text.subtle">Description</Text>
<Text variant="body-md" clamp={2}>Truncated text...</Text>

Badge

import { Badge } from '@mateuszgietner/zest-test';

<Badge appearance="success">Active</Badge>
<Badge appearance="negative">Error</Badge>
<Badge appearance="warning">Pending</Badge>
<Badge appearance="neutral">Draft</Badge>

Box

import { Box } from '@mateuszgietner/zest-test';

<Box display="flex" gap="md" padding="lg">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>

Props Reference

Button Props

| Prop | Type | Default | |------|------|---------| | size | 'sm' | 'lg' | 'lg' | | appearance | 'brand' | 'negative' | 'neutral' | 'brand' | | loading | boolean | false | | fullWidth | boolean | false |

Card Props

| Prop | Type | Default | |------|------|---------| | elevation | 0 | 1 | 2 | 3 | 1 | | padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | | borderRadius | 'sm' | 'md' | 'lg' | 'md' |

Text Props

| Prop | Type | Default | |------|------|---------| | variant | TextVariant | 'body-md' | | color | ColorToken | 'text.default' | | align | 'left' | 'center' | 'right' | 'left' | | clamp | number | - |

Badge Props

| Prop | Type | Default | |------|------|---------| | appearance | 'success' | 'negative' | 'warning' | 'neutral' | 'brand' | 'neutral' | | size | 'sm' | 'md' | 'md' |

Note

This is a test package for POC purposes. It is not the official Zest design system.