Feature/basic emotion/dynamicfonts

.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

.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",

.storybook/preview-head.html

@@ -1,4 +1,16 @@
 <style>
  /* You can add global styles to this file, and also import other style files */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
+ @font-face {
+ font-family: 'Ubuntu Regular';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Ubuntu Regular'), url('/fonts/ubuntu/ubuntu-r.woff') format('woff');
+ }
+ @font-face {
+ font-family: 'Ubuntu Bold';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Ubuntu Bold'), url('/fonts/ubuntu/ubuntu-b.woff') format('woff');
+ }
 </style>

.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',
 });

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.

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 {
  <Title />
  <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>

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'
 };
 
 

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};

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>;
 

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,67 +10,74 @@ 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',
  success_outline: 'none',
  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)};

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>