diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..032ac72 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,60 @@ +# JavaScript Node CircleCI 2.0 configuration file +# +# Check https://circleci.com/docs/2.0/language-javascript/ for more details +# +version: 2.1 +jobs: + build: + docker: + # specify the version you desire here + - image: circleci/node:lts + + # Specify service dependencies here if necessary + # CircleCI maintains a library of pre-built images + # documented at https://circleci.com/docs/2.0/circleci-images/ + # - image: circleci/mongo:3.4.4 + + working_directory: ~/repo + + steps: + - checkout + + # Download and cache dependencies + # - restore_cache: + # keys: + # - yarn-packages-{{ checksum "yarn.lock" }} + + - run: + name: Install Dependencies + command: npm install + + - run: + name: Build Component Library + command: npm run build + + - run: + name: Build Storybook + command: npm run build-storybook + + # - save_cache: + # paths: + # - node_modules + # - packages/app/node_modules + # - packages/ds/node_modules + # key: yarn-packages-{{ checksum "yarn.lock" }} + + # - run: + # name: Lint Component Library + # command: yarn workspace ds lint + + - run: + name: Test Component Library + command: npm run test + + # - run: + # name: Build Demo App + # command: yarn workspace app build + + # - run: + # name: Run Visual Tests + # command: yarn workspace ds run chromatic diff --git a/.storybook/main.js b/.storybook/main.js index e4fc9f4..78dc526 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -13,7 +13,7 @@ module.exports = { core: { builder: "webpack5", }, - staticDirs: ['../src/imgs'], + staticDirs: ['../src/assets',], stories: ['../src/**/*.stories.@(js|tsx|mdx)'], addons: [ "@storybook/addon-links", diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 86e0aa7..6f706c0 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,4 +1,16 @@ \ No newline at end of file diff --git a/.storybook/theme.js b/.storybook/theme.js index 94bea90..cc76e9d 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -33,5 +33,5 @@ export default create({ brandTitle: 'Radius', brandUrl: 'https://rangle.io/radius', - brandImage: 'radius_logo_inverted.png', + brandImage: 'imgs/radius_logo_inverted.png', }); \ No newline at end of file diff --git a/README.md b/README.md index c115db2..0935b69 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,23 @@ -# Radius Design System Kit - -The Radius is an opinionated assemblage of open-source tools and libraries that allow you to accelerate your design system. The choice of tools, their composition, and a set of foundational components guides you on how to build a constraint-based system. - -[rangle.io/radius](https://rangle.io/radius) - -[Figma File](https://www.figma.com/file/RqENxZWAzGiEWM7COch1Sc/Radius-Design-Kit) - -[Storybook Docs](https://radius-ds.netlify.com) - -[Chromatic](https://www.chromaticqa.com/library?appId=5e44874935df3b0022b9d890) +# Radius - React & Emotion # +This repo is one of a few starter design systems that has been created for Radius an assemblage of open-source tools and libraries that allow you to accelerate your design system. +In collaboration with this repository it is suggested to use the design token generator that is available through Radius script CLI. This will generate a folder of CSS variables (design tokens). To use the token generator use the suggested starter kit for [Figma](https://www.figma.com/file/RqENxZWAzGiEWM7COch1Sc/Radius-Design-Kit). + +## Features ## +This starter repository for Radius uses: +- Webpack 5 + bable +- React 17 + React Dom + - 3 component examples, box, button, tag +- Emotion 11, with emotion styled + react +- Jest 27 + - Some basic unit testing of the components +- Husky +- Storyboard +- Chromatic ### Are you using Radius? We would love to hear about how you are using Radius or any feedback or feature requests. Open an [issue](https://github.com/rangle/radius/issues/new). -### 🚀 Quick start - -To get started you can just clone the repository. -____ - # TSDX React w/ Storybook User Guide Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it. diff --git a/src/assets/fonts/ubuntu/ubuntu-b.woff b/src/assets/fonts/ubuntu/ubuntu-b.woff new file mode 100644 index 0000000..89fb890 Binary files /dev/null and b/src/assets/fonts/ubuntu/ubuntu-b.woff differ diff --git a/src/assets/fonts/ubuntu/ubuntu-r.woff b/src/assets/fonts/ubuntu/ubuntu-r.woff new file mode 100644 index 0000000..4edaaa1 Binary files /dev/null and b/src/assets/fonts/ubuntu/ubuntu-r.woff differ diff --git a/src/imgs/back-to-files.png b/src/assets/imgs/back-to-files.png similarity index 100% rename from src/imgs/back-to-files.png rename to src/assets/imgs/back-to-files.png diff --git a/src/imgs/community-duplicate.png b/src/assets/imgs/community-duplicate.png similarity index 100% rename from src/imgs/community-duplicate.png rename to src/assets/imgs/community-duplicate.png diff --git a/src/imgs/component-hierarchy.svg b/src/assets/imgs/component-hierarchy.svg similarity index 100% rename from src/imgs/component-hierarchy.svg rename to src/assets/imgs/component-hierarchy.svg diff --git a/src/imgs/design-systems_16_9.png b/src/assets/imgs/design-systems_16_9.png similarity index 100% rename from src/imgs/design-systems_16_9.png rename to src/assets/imgs/design-systems_16_9.png diff --git a/src/imgs/dg-error.svg b/src/assets/imgs/dg-error.svg similarity index 100% rename from src/imgs/dg-error.svg rename to src/assets/imgs/dg-error.svg diff --git a/src/imgs/dg-field.svg b/src/assets/imgs/dg-field.svg similarity index 100% rename from src/imgs/dg-field.svg rename to src/assets/imgs/dg-field.svg diff --git a/src/imgs/dg-hint.svg b/src/assets/imgs/dg-hint.svg similarity index 100% rename from src/imgs/dg-hint.svg rename to src/assets/imgs/dg-hint.svg diff --git a/src/imgs/dg-input.svg b/src/assets/imgs/dg-input.svg similarity index 100% rename from src/imgs/dg-input.svg rename to src/assets/imgs/dg-input.svg diff --git a/src/imgs/dg-label.svg b/src/assets/imgs/dg-label.svg similarity index 100% rename from src/imgs/dg-label.svg rename to src/assets/imgs/dg-label.svg diff --git a/src/imgs/drafts.png b/src/assets/imgs/drafts.png similarity index 100% rename from src/imgs/drafts.png rename to src/assets/imgs/drafts.png diff --git a/src/imgs/duplicate-to-your-drafts.png b/src/assets/imgs/duplicate-to-your-drafts.png similarity index 100% rename from src/imgs/duplicate-to-your-drafts.png rename to src/assets/imgs/duplicate-to-your-drafts.png diff --git a/src/imgs/duplicated-file.png b/src/assets/imgs/duplicated-file.png similarity index 100% rename from src/imgs/duplicated-file.png rename to src/assets/imgs/duplicated-file.png diff --git a/src/imgs/hearts_triangles.png b/src/assets/imgs/hearts_triangles.png similarity index 100% rename from src/imgs/hearts_triangles.png rename to src/assets/imgs/hearts_triangles.png diff --git a/src/imgs/img.png b/src/assets/imgs/img.png similarity index 100% rename from src/imgs/img.png rename to src/assets/imgs/img.png diff --git a/src/imgs/radius.png b/src/assets/imgs/radius.png similarity index 100% rename from src/imgs/radius.png rename to src/assets/imgs/radius.png diff --git a/src/imgs/radius_logo_inverted.png b/src/assets/imgs/radius_logo_inverted.png similarity index 100% rename from src/imgs/radius_logo_inverted.png rename to src/assets/imgs/radius_logo_inverted.png diff --git a/src/imgs/rangle_badge.svg b/src/assets/imgs/rangle_badge.svg similarity index 100% rename from src/imgs/rangle_badge.svg rename to src/assets/imgs/rangle_badge.svg diff --git a/src/imgs/rangle_badge_black.svg b/src/assets/imgs/rangle_badge_black.svg similarity index 100% rename from src/imgs/rangle_badge_black.svg rename to src/assets/imgs/rangle_badge_black.svg diff --git a/src/imgs/rangle_badge_red.svg b/src/assets/imgs/rangle_badge_red.svg similarity index 100% rename from src/imgs/rangle_badge_red.svg rename to src/assets/imgs/rangle_badge_red.svg diff --git a/src/imgs/user.png b/src/assets/imgs/user.png similarity index 100% rename from src/imgs/user.png rename to src/assets/imgs/user.png diff --git a/src/components/box/box.stories.tsx b/src/components/box/box.stories.tsx index 0b1246f..902824d 100644 --- a/src/components/box/box.stories.tsx +++ b/src/components/box/box.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Description, Props, Title } from '@storybook/addon-docs/blocks'; +import { Description, Props, Title, Stories } from '@storybook/addon-docs/blocks'; import { DsBox } from './box'; @@ -14,6 +14,7 @@ export default { <Description>Building block of layouts. Creates a box-model context</Description> <Props of={DsBox} /> + <Stories /> </> ), }, @@ -22,6 +23,8 @@ export default { export const Basic = (args: any) => <DsBox {...args} />; + + export const Primary = () => ( <DsBox> <h1> diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx index 1c64a16..e454773 100644 --- a/src/components/button/button.stories.tsx +++ b/src/components/button/button.stories.tsx @@ -1,17 +1,40 @@ import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { Story,ComponentMeta } from '@storybook/react'; import DsButton, { DsButtonProps } from './button'; export default { component: DsButton, title: 'Components/Button', -} as Meta; + argTypes:{ + variant:{ + name: "Variant", + type: { name: 'string', required: false }, + defaultValue: {summary:'primary'}, + description: 'Options for different styles', + options: [ 'primary', 'secondary'], + control:{ + type:'radio' + } + }, + disabled:{ + name: "Disabled", + description: 'The button is no longer active', + defaultValue: {summary:false}, + control:{ + type:'boolean' + } + } + }, + args:{ + variant:'primary', + disabled: false + } +} as ComponentMeta<typeof DsButton>; const Template: Story<DsButtonProps> = (args) => <DsButton {...args}>Hello Button</DsButton>; export const Primary = Template.bind({}); Primary.args = { - variant: 'primary' }; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 6552608..a1cf3c9 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -2,11 +2,13 @@ import styled from '@emotion/styled'; import { theme } from '../../theme' +// Define the options for but button export type DsButtonProps = { size: 'small' | 'medium' | 'large'; variant: 'primary' | 'secondary' | 'chevron' | 'icon'; } +// create options for color and background based off theme const COLOR: any = { primary: theme.colors.text.inverse, secondary: theme.colors.ui.primary, @@ -17,12 +19,14 @@ const BG_COLOR: any = { secondary: theme.colors.text.inverse, }; +// Create the styled element const DsButton = styled.button<DsButtonProps>` border-style: none; position: relative; cursor: pointer; display: flex; vertical-align: middle; + font-family: ${theme.typography.font_family}; padding-top: ${theme.spacing.space2}; padding-bottom: ${theme.spacing.space2}; padding-left: ${theme.spacing.space7}; diff --git a/src/components/tag/tag.stories.tsx b/src/components/tag/tag.stories.tsx index 7210e54..65127ee 100644 --- a/src/components/tag/tag.stories.tsx +++ b/src/components/tag/tag.stories.tsx @@ -1,11 +1,38 @@ import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { Story, ComponentMeta } from '@storybook/react'; import DsTag, { DsTagProps } from './tag'; export default { component: DsTag, title: 'Components/Tag', -} as Meta; + argTypes:{ + type:{ + name: "Type", + type: { name: 'string', required: false }, + defaultValue: {summary:'primary'}, + description: 'Controls the style state, error, success, alert', + options: [ 'primary', 'secondary', 'error', 'success', 'alert'], + control:{ + type:'select' + } + }, + variant:{ + name: "Variant", + type: { name: 'string', required: false }, + defaultValue: {summary:'solid'}, + description: 'Options for different styles', + options: [ 'solid', 'outline'], + control:{ + type:'radio' + } + } + }, + args:{ + type: 'primary', + variant: 'solid' + + } +} as ComponentMeta<typeof DsTag>; const Template: Story<DsTagProps> = (args) => <DsTag {...args}>Tag</DsTag>; diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx index 741bb43..9da0a14 100644 --- a/src/components/tag/tag.tsx +++ b/src/components/tag/tag.tsx @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +import { theme } from '../../theme' +// Define the options for but tags export interface DsTagProps { type: 'primary' | 'secondary' | 'error' | 'success' | 'alert'; variant: 'solid' | 'outline'; @@ -8,32 +10,35 @@ export interface DsTagProps { type KEY_VALUE = { [key: string]: string } type KEY_VALUE_VALUE = { [key: string]: KEY_VALUE } +// Setup the types of color options enum COLOR_TYPE { 'color', 'background_color', 'border_color' }; +// Define color option const COLORS: KEY_VALUE_VALUE = {}; COLORS[COLOR_TYPE.color] = { - primary_solid: 'var(--ds-color--text-inverse)', - secondary_solid: 'var(--ds-color--text-inverse)', - error_solid: 'var(--ds-color--text-inverse)', - success_solid: 'var(--ds-color--text-inverse)', - alert_solid: 'var(--ds-color--text-inverse)', - primary_outline: 'var(--ds-color--ui-primary)', - secondary_outline: 'var(--ds-color-brand-primary-main)', - error_outline: 'var(--ds-color--ui-error-default)', - success_outline: 'var(--ds-color--ui-success-default)', - alert_outline: 'var(--ds-color--ui-alert-default)', + primary_solid: theme.colors.text.inverse, + secondary_solid: theme.colors.text.inverse, + error_solid: theme.colors.text.inverse, + success_solid: theme.colors.text.inverse, + alert_solid: theme.colors.text.inverse, + primary_outline: theme.colors.ui.primary, + secondary_outline: theme.colors.brand.primaryMain, + error_outline: theme.colors.ui.errorDefault, + success_outline: theme.colors.ui.successLight, + alert_outline: theme.colors.ui.alertLight, }; +// Background colors COLORS[COLOR_TYPE.background_color] = { - primary_solid: 'var(--ds-color--ui-primary)', - secondary_solid: 'var(--ds-color-brand-primary-main)', - error_solid: 'var(--ds-color--ui-error-default)', - success_solid: 'var(--ds-color--ui-success-default)', - alert_solid: 'var(--ds-color--ui-alert-default)', + primary_solid: theme.colors.ui.primary, + secondary_solid: theme.colors.brand.primaryMain, + error_solid: theme.colors.ui.errorDefault, + success_solid: theme.colors.ui.successDefault, + alert_solid: theme.colors.ui.alertDefault, primary_outline: 'none', secondary_outline: 'none', error_outline: 'none', @@ -41,34 +46,38 @@ COLORS[COLOR_TYPE.background_color] = { alert_outline: 'none', }; +// Border colors COLORS[COLOR_TYPE.border_color] = { primary_solid: 'none', secondary_solid: 'none', error_solid: 'none', success_solid: 'none', alert_solid: 'none', - primary_outline: 'var(--ds-color--ui-primary)', - secondary_outline: 'var(--ds-color-brand-primary-main)', - error_outline: 'var(--ds-color--ui-error-default)', - success_outline: 'var(--ds-color--ui-success-default)', - alert_outline: 'var(--ds-color--ui-alert-default)', + primary_outline: theme.colors.ui.primary, + secondary_outline: theme.colors.brand.primaryMain, + error_outline: theme.colors.ui.errorDefault, + success_outline: theme.colors.ui.successDefault, + alert_outline: theme.colors.ui.alertDefault, }; +// Returns the color const getColor = (props: DsTagProps, colorType: COLOR_TYPE = COLOR_TYPE.background_color) => { const type = props.type || 'primary'; const variant = props.variant || 'solid'; return COLORS[colorType][`${type}_${variant}`]; } +// Create the styled element const DsTag = styled.div<DsTagProps>` height: fit-content; display: inline-block; - padding: 0 var(--ds-space-2); + padding: 0 ${theme.spacing.space2}; white-space: nowrap; - border-radius: var(--ds-border-radius-m); + border-radius: ${theme.borders.radiusMedium}; border-style: solid; border-width: 1px; - font-size: 11px; + font-size: ${theme.typography.scale_m}; + font-family: ${theme.typography.font_family_secondary}; border-color: transparent; background-color: ${props => getColor(props, COLOR_TYPE.background_color)}; border-color: ${props => getColor(props, COLOR_TYPE.border_color)}; diff --git a/src/docs/0-overview.stories.mdx b/src/docs/0-overview.stories.mdx index f5e551f..7995932 100644 --- a/src/docs/0-overview.stories.mdx +++ b/src/docs/0-overview.stories.mdx @@ -1,16 +1,11 @@ import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks'; -import radius from '../imgs/radius_logo_inverted.png'; +import radius from '../assets/imgs/radius_logo_inverted.png'; <Meta title="Introduction" /> <div style={{backgroundColor: '#242424', padding: '20px', borderRadius: '20px', marginBottom: '30px', textAlign: 'center'}}> <img src={radius} /> </div> - -https://docs.google.com/document/d/1UGtSvOJKVjwjVxTXdOg7OD1Ki8PUDm6dfxMx5DfuCBQ/edit - - - <h1 style={{color:'#d44527', textAlign: 'center', paddingBottom: '30px', paddingTop: '0px'}}> Design systems, Accelerated </h1> diff --git a/src/docs/2-color-tokens.stories.mdx b/src/docs/2-color-tokens.stories.mdx index 42194b7..a957b99 100644 --- a/src/docs/2-color-tokens.stories.mdx +++ b/src/docs/2-color-tokens.stories.mdx @@ -11,11 +11,11 @@ import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks'; # Color Tokens -<Subtitle> Colors are designed to communicate actions, state and direction within the interface. We provide light and dark color modes. However, the shape of the colors object is same for each mode. This allows us to build components with a consistent API. +<Subtitle> </Subtitle> <DesignTokenDocBlock categoryName="Colors" viewType="table" />; \ No newline at end of file diff --git a/src/docs/3-typography-tokens.stories.mdx b/src/docs/3-typography-tokens.stories.mdx index 21a3f53..3ee1b9e 100644 --- a/src/docs/3-typography-tokens.stories.mdx +++ b/src/docs/3-typography-tokens.stories.mdx @@ -6,11 +6,15 @@ import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks'; # Typography Tokens + Base font size is <code>16px</code> and using Roboto and Indie Flower font + families. <br/>These fonts can be found at <a href="https://fonts.google.com/" target="_blank">https://fonts.google.com/</a> <Subtitle> - Base font size is <code>16px</code> and using Helvetica Neue and Roboto font - families. </Subtitle> +## Font Families + +<DesignTokenDocBlock categoryName="Font Families" /> + ## Font Sizes <DesignTokenDocBlock categoryName="Font Sizes" /> diff --git a/src/docs/4-space-tokens.stories.mdx b/src/docs/4-space-tokens.stories.mdx index 4583186..41f7f3f 100644 --- a/src/docs/4-space-tokens.stories.mdx +++ b/src/docs/4-space-tokens.stories.mdx @@ -3,7 +3,9 @@ import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks'; <Meta title="Design Tokens/Space Tokens" /> # Space Tokens +Intended for use with margin, padding, grid gaps, positioning and other layout-related CSS properties. +A space scale can be defined as either a plain object or an array, but by convention an array is preferred. +This is an intentional constraint that makes it difficult to add _one-off_ or _in-between_ sizes that could lead to unwanted and rippling affects to layout. -Intended for use with margin, padding, grid gaps, positioning and other layout-related CSS properties. A space scale can be defined as either a plain object or an array, but by convention an array is preferred. This is an intentional constraint that makes it difficult to add _one-off_ or _in-between_ sizes that could lead to unwanted and rippling affects to layout. <DesignTokenDocBlock categoryName="Spacing" /> \ No newline at end of file diff --git a/src/styles/typography.css b/src/styles/typography.css index d4a7a12..2d5ce62 100644 --- a/src/styles/typography.css +++ b/src/styles/typography.css @@ -1,4 +1,13 @@ :root { + + /** + * @tokens Font Families + * @presenter FontFamily + **/ + --ds-typography-primary: 'Roboto'; + --ds-typography-secondary: 'Ubuntu Regular'; + --ds-typography-secondary-bold: 'Ubuntu Bold'; + /** * @tokens Font Sizes * @presenter FontSize diff --git a/src/theme.ts b/src/theme.ts index d1ddfef..729a4a6 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -36,6 +36,8 @@ export const theme = { scale_3xl: 'var(--ds-typography-scale-3xl)', scale_4xl: 'var(--ds-typography-scale-4xl)', scale_5xl: 'var(--ds-typography-scale-5xl)', + font_family: 'var(--ds-typography-primary)', + font_family_secondary: 'var(--ds-typography-secondary)' }, colors: { brand: {