diff --git a/.env.development b/.env.development new file mode 100644 index 000000000..00b508351 --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +STORYBOOK_HIDE_CANVAS_TAB=false +STORYBOOK_HIDE_DOCS_TAB=false \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 000000000..ce77e7164 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +STORYBOOK_HIDE_CANVAS_TAB=true +STORYBOOK_HIDE_DOCS_TAB=true \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index a78a60b14..b37342e65 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,13 +5,6 @@ "env": { "browser": true }, - "globals": { - "__DEV__": false, - "__PROD__": false, - "__DEBUG__": false, - "__BASENAME__": false, - "__VERSION__": false - }, "rules": { "prefer-const": [ "error", diff --git a/.storybook/preview.js b/.storybook/preview.js index fcfec48da..267c711e0 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,6 +3,16 @@ import { withDesign } from 'storybook-addon-designs'; import { COLOR } from '../src/constants'; import theme from './theme'; +import { + ABOUT_AHOY, + CHANGELOG, + COMPOSITIONS, + FOUNDATION, + LOW_LEVEL_BLOCKS, + MARKETING, + MID_LEVEL_BLOCKS, + PLAYGROUND, +} from './utils'; addParameters({ backgrounds: { @@ -21,8 +31,18 @@ addParameters({ addParameters({ options: { - showRoots: true, - storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })), + storySort: { + order: [ + ABOUT_AHOY, + CHANGELOG, + FOUNDATION, + LOW_LEVEL_BLOCKS, + MID_LEVEL_BLOCKS, + COMPOSITIONS, + MARKETING, + PLAYGROUND, + ], + }, }, }); @@ -34,6 +54,14 @@ addParameters({ addParameters({ viewMode: 'docs', + previewTabs: { + canvas: { + hidden: process.env.STORYBOOK_HIDE_CANVAS_TAB === 'true', + }, + 'storybook/docs/panel': { + hidden: process.env.STORYBOOK_HIDE_DOCS_TAB === 'true', + }, + }, }); // addon-designs diff --git a/.storybook/stories/about.stories.mdx b/.storybook/stories/about.stories.mdx new file mode 100644 index 000000000..dbc572ca6 --- /dev/null +++ b/.storybook/stories/about.stories.mdx @@ -0,0 +1,34 @@ +import { Meta } from '@storybook/addon-docs'; +import { ABOUT_AHOY } from '../utils'; + + + +# Ahoy + +A React implementation of Ahoy, Teamleader’s design system. + +[Principles](https://teamleader.design) + +[Figma Library](https://www.figma.com/community/file/817528775203111349/Ahoy-Desktop-Components) + +[GitHub](https://github.com/teamleadercrm/ui) + +# Getting started + +## Installation + +To install the latest version of Ahoy in your project, run the following command when using yarn: + +``` +yarn add @teamleader/ui +``` + +or if you're using npm: + +``` +npm install @teamleader/ui +``` + +## PostCSS + +This library internally uses PostCSS and also requires end users to install and configure PostCSS in their project. Check the [PostCSS documentation](https://postcss.org/) for more information. diff --git a/.storybook/stories/about/about.stories.mdx b/.storybook/stories/about/about.stories.mdx deleted file mode 100644 index 0737bc7f1..000000000 --- a/.storybook/stories/about/about.stories.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Ahoy - -A design tool that makes Teamleader work smarter. - -## Say what? - -Ahoy! is a UI pattern library that makes us build consistent, user-friendly solutions for small SME's. We call it 'Ahoy!' because the kid needed a name and it reflects the goal of this tool: guide anyone working on Teamleader products. - -It is the result of an effort to evolve from a disconnected product design approach to a living pattern library that closes the loop between design and development. - -## Installation - -To install the latest version of Ahoy in your project, run the following command when using yarn: - -``` -yarn add @teamleader/ui -``` - -or if you're using npm: - -``` -npm install @teamleader/ui -``` diff --git a/.storybook/stories/changelog.stories.mdx b/.storybook/stories/changelog.stories.mdx new file mode 100644 index 000000000..ee4dd2e27 --- /dev/null +++ b/.storybook/stories/changelog.stories.mdx @@ -0,0 +1,7 @@ +import { Meta, Description } from '@storybook/addon-docs'; + +import changelog from '../../CHANGELOG.md'; + + + + diff --git a/.storybook/stories/colors.stories.mdx b/.storybook/stories/colors.stories.mdx new file mode 100644 index 000000000..562f791dd --- /dev/null +++ b/.storybook/stories/colors.stories.mdx @@ -0,0 +1,8 @@ +import { Meta, ColorPalette, ColorItem, Story } from '@storybook/addon-docs/blocks'; +import { Box, COLOR, Heading2, Island, StatusLabel, TextBody } from '../../src'; + + + +# Colors + +For more information about the color palette, see the [principles page](https://ahoy.teamleader.design/3547946e7/p/015bf2-color/b/66edd6). diff --git a/.storybook/stories/colors/colors.stories.mdx b/.storybook/stories/colors/colors.stories.mdx deleted file mode 100644 index 7d2093156..000000000 --- a/.storybook/stories/colors/colors.stories.mdx +++ /dev/null @@ -1,168 +0,0 @@ -import { Meta, ColorPalette, ColorItem, Story } from '@storybook/addon-docs/blocks'; -import { Box, COLOR, Heading2, Island, StatusLabel, TextBody } from '../../../src'; - - - -# Colors - -Color makes the visual design more consistent, provides meaning & adds hierarchy to the interface. - - - -## Primary - - - - - - - - - -## Secondary - - - - - - - - - - -## Usage - -Color adds extra meaning to a components state. Below is a list on which ones are specific for Teamleader. - - - - Neutral Light - Default sections - - - Neutral dark - Headers, footers, editable sections - - - - - - Teal - - - Main navigation and text - - - - - Mint - Success messages - - - - Aqua - Neutral messages and text links - - - - Gold - Warning messages - - - - Ruby - Error messages, desctructive actions - - - - Violet - Ongoing messages - - - - -## Best practices - -### Contrast - -For optimal contrast, backgrounds have the lightest tint, while text has the darkest tint. - - - - Do - - Teamleader - More business. Fewer chores. - - - - Don't - - - Teamleader - - - More business. Fewer chores. - - - - - -### Combination - -Stay within the same tint when combining text with a color background. - - - - Do - - Teamleader - More business. Fewer chores. - - - - Don't - - - Teamleader - - More business. Fewer chores. - - - diff --git a/.storybook/stories/depths/assets/depths.svg b/.storybook/stories/depths/assets/depths.svg deleted file mode 100644 index 09fafe730..000000000 --- a/.storybook/stories/depths/assets/depths.svg +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - z 1 - 100 - - - z 200 - - - z 300 - - - z 400 - - - z 500 - - - z 600 - - - z 700 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/.storybook/stories/depths/depths.stories.mdx b/.storybook/stories/depths/depths.stories.mdx deleted file mode 100644 index b8ed57d4e..000000000 --- a/.storybook/stories/depths/depths.stories.mdx +++ /dev/null @@ -1,49 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; -import { Box, Island, TextBody } from '../../../src'; -import uiUtilities from '@teamleader/ui-utilities'; -import Depths from './assets/depths.svg'; - - - - - -# Depths - -Teamleader make use of a list of predefined depths to consistently place elements on top of each other. This reinforces hierarchy and clarity. - - - -## Levels - -Elements are presented on a depth. Ranging from level 1 to 4, a drop shadow increases the element's distance from the depth it resides on. - - - - - Level 1 - - - - - Level 2 - - - - - Level 3 - - - - - Level 4 - - - - - - -## Stacking - - - - diff --git a/.storybook/stories/icons/assets/bounding_1.svg b/.storybook/stories/icons/assets/bounding_1.svg deleted file mode 100644 index 416efa2da..000000000 --- a/.storybook/stories/icons/assets/bounding_1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/.storybook/stories/icons/assets/bounding_2.svg b/.storybook/stories/icons/assets/bounding_2.svg deleted file mode 100644 index fbebec7bc..000000000 --- a/.storybook/stories/icons/assets/bounding_2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/.storybook/stories/icons/assets/bounding_3.svg b/.storybook/stories/icons/assets/bounding_3.svg deleted file mode 100644 index 4da03cfd2..000000000 --- a/.storybook/stories/icons/assets/bounding_3.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/.storybook/stories/icons/assets/bounding_4.svg b/.storybook/stories/icons/assets/bounding_4.svg deleted file mode 100644 index 08371aae6..000000000 --- a/.storybook/stories/icons/assets/bounding_4.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/.storybook/stories/icons/assets/placement.svg b/.storybook/stories/icons/assets/placement.svg deleted file mode 100644 index ec9c911f4..000000000 --- a/.storybook/stories/icons/assets/placement.svg +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - a - - - b - - - - - - - - diff --git a/.storybook/stories/icons/assets/secondary_metaphors.svg b/.storybook/stories/icons/assets/secondary_metaphors.svg deleted file mode 100644 index 31d49136b..000000000 --- a/.storybook/stories/icons/assets/secondary_metaphors.svg +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/.storybook/stories/icons/icons.stories.mdx b/.storybook/stories/icons/icons.stories.mdx deleted file mode 100644 index 5b0a8f73a..000000000 --- a/.storybook/stories/icons/icons.stories.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { IconGallery, IconItem, Meta, Story } from '@storybook/addon-docs/blocks'; -import { addStoryInGroup, FOUNDATION } from '../../../.storybook/utils'; -import * as Icons from '@teamleader/ui-icons'; -import { Icon, Island } from '../../../src'; -import BoundingBoxSquare from './assets/bounding_1.svg'; -import BoundingBoxCircle from './assets/bounding_2.svg'; -import BoundingBoxRectanglePortrait from './assets/bounding_3.svg'; -import BoundingBoxRectangleLandscape from './assets/bounding_4.svg'; -import Placement from './assets/placement.svg'; -import SecondaryMetaphors from './assets/secondary_metaphors.svg'; - - - -# Icons - -Icons support various actions and metaphors. They are designed to work in small sizes, play nice with the typographical context and to look consistent when used next to each other. - - - -## Bounding box - -A uniform bounding box guarantees consistent placement because every icon has equal outer dimensions. Based on Teamleaders typography, we decided on two sizes: Medium (24dp) and Small (14dp). `Key shapes` make it easier to balance visual weights of the inner shapes. - - - - - - - - - - -## Secondary metaphors - -Icons that support a secondary meaning have a `badge` in the lower-right corner. - - - - diff --git a/.storybook/utils/index.js b/.storybook/utils/index.js index aed4c345d..663ca5426 100644 --- a/.storybook/utils/index.js +++ b/.storybook/utils/index.js @@ -1,10 +1,10 @@ -export const INTRODUCTION = '1. Introduction'; -export const PRIMITIVES = '2. Primitives'; -export const FOUNDATION = '3. Foundation'; -export const LOW_LEVEL_BLOCKS = '4. Low level blocks'; -export const MID_LEVEL_BLOCKS = '5. Mid level blocks'; -export const COMPOSITIONS = '6. Compositions'; -export const MARKETING = '7. Marketing'; -export const PLAYGROUND = '8. Playground'; +export const ABOUT_AHOY = 'About Ahoy'; +export const CHANGELOG = 'Changelog'; +export const FOUNDATION = 'Foundation'; +export const LOW_LEVEL_BLOCKS = 'Low level blocks'; +export const MID_LEVEL_BLOCKS = 'Mid level blocks'; +export const COMPOSITIONS = 'Compositions'; +export const MARKETING = 'Marketing'; +export const PLAYGROUND = 'Playground'; export const addStoryInGroup = (groupTitle, storyTitle) => `${groupTitle} / ${storyTitle}`; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index bde1a5f50..4a9166810 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -2,14 +2,6 @@ const pkg = require('../package.json'); const env = process.env.NODE_ENV || 'development'; const webpack = require('webpack'); -const globals = { - __DEV__: env === 'development', - __PROD__: env === 'production', - __TEST__: env === 'test', - __BASENAME__: JSON.stringify(process.env.BASENAME || ''), - __VERSION__: JSON.stringify(pkg.version), -}; - // Export a function. Accept the base config as the only param. module.exports = async ({ config }) => { // Overwrite some default rules @@ -29,13 +21,6 @@ module.exports = async ({ config }) => { config.optimization.minimize = false; } - config.plugins.map((plugin) => { - if (plugin instanceof webpack.DefinePlugin) { - plugin.definitions = { ...plugin.definitions, 'process.env': globals }; - } - return plugin; - }); - // Return the altered config return config; }; diff --git a/CHANGELOG.md b/CHANGELOG.md index 78100201c..f8861c984 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1991,7 +1991,6 @@ ### Changed - `Label`: changed the `css display rule` to use the `display prop` of our Box component. - - `Dependencies`: - `eslint-plugin-node` from `^6.0.0` to `^9.1.0` - `eslint-config-standard` from `^11.0.0` to `^13.0.1` diff --git a/src/components/icon/description.md b/src/components/icon/description.md new file mode 100644 index 000000000..20635e9d2 --- /dev/null +++ b/src/components/icon/description.md @@ -0,0 +1,13 @@ +To install the latest version of our icons in your project, run the following command when using yarn: + +``` + +yarn add @teamleader/ui-icons +``` + +or if you're using npm: + +``` + +npm install @teamleader/ui-icons +``` diff --git a/src/components/icon/icon.stories.js b/src/components/icon/icon.stories.js index 4a26f5e16..15a7619d8 100644 --- a/src/components/icon/icon.stories.js +++ b/src/components/icon/icon.stories.js @@ -3,6 +3,7 @@ import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils'; import * as Icons from '@teamleader/ui-icons'; import { Box, Icon, TextSmall } from '../../index'; import { IconWarningBadgedMediumOutline } from '@teamleader/ui-icons'; +import description from './description.md'; const gridStyles = { display: 'flex', @@ -19,6 +20,13 @@ const itemStyles = { export default { component: Icon, title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Icon'), + parameters: { + docs: { + description: { + component: description, + }, + }, + }, }; export const DefaultStory = (args) => ( diff --git a/src/components/illustration/description.md b/src/components/illustration/description.md new file mode 100644 index 000000000..c1338e6e0 --- /dev/null +++ b/src/components/illustration/description.md @@ -0,0 +1,13 @@ +To install the latest version of our illustrations in your project, run the following command when using yarn: + +``` + +yarn add @teamleader/ui-illustrations +``` + +or if you're using npm: + +``` + +npm install @teamleader/ui-illustrations +``` diff --git a/.storybook/stories/illustrations.stories.js b/src/components/illustration/illustration.stories.js similarity index 75% rename from .storybook/stories/illustrations.stories.js rename to src/components/illustration/illustration.stories.js index 8f2f4f809..d8057d282 100644 --- a/.storybook/stories/illustrations.stories.js +++ b/src/components/illustration/illustration.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { addStoryInGroup, FOUNDATION } from '../utils'; +import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils'; import * as Illustrations from '@teamleader/ui-illustrations'; -import { Box, TextSmall } from '../../src'; +import { Box, TextSmall } from '../..'; +import description from './description.md'; const gridStyles = { display: 'flex', @@ -21,13 +22,21 @@ const itemStyles = { }; export default { - title: addStoryInGroup(FOUNDATION, 'Illustrations'), + title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Illustration'), + parameters: { + docs: { + description: { + component: description, + }, + }, + }, }; export const _24X24 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('24X24')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('24X24')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -38,8 +47,7 @@ export const _24X24 = () => ( {key} ); - } - })} + })} ); @@ -49,8 +57,9 @@ _24X24.story = { export const _36X24 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('36X24')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('36X24')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -61,8 +70,7 @@ export const _36X24 = () => ( {key} ); - } - })} + })} ); @@ -72,8 +80,9 @@ _36X24.story = { export const _48X48 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('48X48')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('48X48')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -84,8 +93,7 @@ export const _48X48 = () => ( {key} ); - } - })} + })} ); @@ -95,8 +103,9 @@ _48X48.story = { export const _60X60 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('60X60')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('60X60')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -107,8 +116,7 @@ export const _60X60 = () => ( {key} ); - } - })} + })} ); @@ -118,8 +126,9 @@ _60X60.story = { export const _84X84 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('84X84')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('84X84')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -130,8 +139,7 @@ export const _84X84 = () => ( {key} ); - } - })} + })} ); @@ -141,8 +149,9 @@ _84X84.story = { export const _90X90 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('90X90')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('90X90')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -153,8 +162,7 @@ export const _90X90 = () => ( {key} ); - } - })} + })} ); @@ -164,8 +172,9 @@ _90X90.story = { export const _120X120 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('120X120')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('120X120')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -176,8 +185,7 @@ export const _120X120 = () => ( {key} ); - } - })} + })} ); @@ -187,8 +195,9 @@ _120X120.story = { export const _240X240 = () => ( - {Object.keys(Illustrations).map((key) => { - if (key.includes('240X240')) { + {Object.keys(Illustrations) + .filter((key) => key.includes('240X240')) + .map((key) => { const IllustrationToRender = Illustrations[key]; return ( @@ -199,8 +208,7 @@ export const _240X240 = () => ( {key} ); - } - })} + })} ); diff --git a/src/components/typography/typography.stories.js b/src/components/typography/typography.stories.js index 6c6daec55..b4df48652 100644 --- a/src/components/typography/typography.stories.js +++ b/src/components/typography/typography.stories.js @@ -1,10 +1,9 @@ import React from 'react'; -import { addStoryInGroup, PRIMITIVES } from '../../../.storybook/utils'; +import { addStoryInGroup, FOUNDATION } from '../../../.storybook/utils'; import { number, select } from '@storybook/addon-knobs'; import { COLORS, TINTS, - Box, Heading1, Heading2, Heading3, @@ -23,190 +22,112 @@ import { export default { component: Heading1, - title: addStoryInGroup(PRIMITIVES, 'Typography'), + title: addStoryInGroup(FOUNDATION, 'Typography'), +}; - parameters: { - info: { - propTablesExclude: [Box], - }, - }, +export const headings = () => { + const color = select('Color', COLORS, 'teal'); + const maxLines = number('Max lines', undefined); + const tint = select('Tint', TINTS, 'darkest'); + + return ( + <> + + Heading 1 / font-size: 24px / line-height: 30px / weight: bold (700) / tracking: 0 + + + Heading 2 / font-size: 18px / line-height: 24px / weight: medium (500) / tracking: 0 + + + Heading 3 / font-size: 16px / line-height: 21px / weight: medium (500) / tracking: 0 + + + Heading 4 / font-size: 12px / line-height: 18px / weight: bold (700) / tracking: 0.6px + + + Heading 5 / font-size: 14px / line-height: 18px / weight: semi bold (600) / tracking: 0 + + + ); }; -export const headings = () => ( -
- - Heading 1 / font-size: 24px / line-height: 30px / weight: bold (700) / tracking: 0 - - - Heading 2 / font-size: 18px / line-height: 24px / weight: medium (500) / tracking: 0 - - - Heading 3 / font-size: 16px / line-height: 21px / weight: medium (500) / tracking: 0 - - - Heading 4 / font-size: 12px / line-height: 18px / weight: bold (700) / tracking: 0.6px - - - Heading 5 / font-size: 14px / line-height: 18px / weight: semi bold (600) / tracking: 0 - -
-); +export const text = () => { + const color = select('Color', COLORS, 'teal'); + const maxLines = number('Max lines', undefined); + const tint = select('Tint', TINTS, 'darkest'); -export const text = () => ( - - - Text display / font-size: 16px / line-height: 24px / weight: regular (400) / tracking: 0 - - - Text body / font-size: 14px / line-height: 21px / weight: regular (400) / tracking: 0 - - - Text body compact / font-size: 14px / line-height: 18px / weight: regular (400) / tracking: 0 - - - Text small / font-size: 12px / line-height: 18px / weight: regular (400) / tracking: 0 - - -); + return ( + <> + + Text display / font-size: 16px / line-height: 24px / weight: regular (400) / tracking: 0 + + + Text body / font-size: 14px / line-height: 21px / weight: regular (400) / tracking: 0 + + + Text body compact / font-size: 14px / line-height: 18px / weight: regular (400) / tracking: 0 + + + Text small / font-size: 12px / line-height: 18px / weight: regular (400) / tracking: 0 + + + ); +}; -export const UIText = () => ( - - - UI Text display / font-size: 16px / line-height: 24px / weight: medium (500) / tracking: 0 - - - UI Text body / font-size: 14px / line-height: 18px / weight: medium (500) / tracking: 0 - - - UIText small / font-size: 12px / line-height: 18px / weight: medium (500) / tracking: 0 - - -); +export const UIText = () => { + const color = select('Color', COLORS, 'teal'); + const maxLines = number('Max lines', undefined); + const tint = select('Tint', TINTS, 'darkest'); -export const monospaced = () => ( - - - 1234567890 - - - 1234567890 - - - 1234567890 - - - 1234567890 - - - 1234567890 - - - 1234567890 - - - 1234567890 - - - 1234567890 - - -); + return ( + <> + + UI Text display / font-size: 16px / line-height: 24px / weight: medium (500) / tracking: 0 + + + UI Text body / font-size: 14px / line-height: 18px / weight: medium (500) / tracking: 0 + + + UIText small / font-size: 12px / line-height: 18px / weight: medium (500) / tracking: 0 + + + ); +}; + +export const monospaced = () => { + const color = select('Color', COLORS, 'teal'); + const maxLines = number('Max lines', undefined); + const tint = select('Tint', TINTS, 'darkest'); + + return ( + <> + + 1234567890 + + + 1234567890 + + + 1234567890 + + + 1234567890 + + + 1234567890 + + + 1234567890 + + + 1234567890 + + + 1234567890 + + + ); +}; export const marker = () => (