Skip to content
Permalink
Browse files

feat(website): Add the tokens page (#19)

* feat: tokens page

* fix: pr feedback and using absolute component

* fix: missed a method rename

* fix: get emotion css prop working correctly

* fix: switch the babel configs to detect dev and prod envs correctly

* fix: update storybook babel config
  • Loading branch information...
SiTaggart committed Aug 7, 2019
1 parent ff2f1d9 commit 878d3c58ae5966eb9521ebc68448b0478e899881
@@ -71,6 +71,15 @@ module.exports = {
eqeqeq: ['error', 'smart'],
'no-plusplus': 'off',
'consistent-return': 'off',
// deprecated rule
'jsx-a11y/label-has-for': 'off',
'jsx-a11y/label-has-associated-control': [
2,
{
assert: 'either',
depth: 3,
},
],
},
settings: {
'import/resolver': {
@@ -19,11 +19,11 @@ const BASE_PLUGINS = ['macros', '@babel/proposal-class-properties', '@babel/prop
module.exports = {
env: {
production: {
presets: getPresets(true),
presets: getPresets(false),
plugins: BASE_PLUGINS,
},
development: {
presets: getPresets(false),
presets: getPresets(true),
plugins: BASE_PLUGINS,
},
},
@@ -19,11 +19,11 @@ const BASE_PLUGINS = ['macros', '@babel/proposal-class-properties', '@babel/prop
module.exports = {
env: {
production: {
presets: getPresets(true),
presets: getPresets(false),
plugins: BASE_PLUGINS,
},
development: {
presets: getPresets(false),
presets: getPresets(true),
plugins: BASE_PLUGINS,
},
},
@@ -32,6 +32,7 @@
},
"devDependencies": {
"@twilio-paste/theme-tokens": "^0.4.0",
"csstype": "^2.6.6",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
@@ -1,28 +1,44 @@
import styled from '@emotion/styled';
import {
borders,
display,
DisplayProps,
borders,
BorderProps,
height,
HeightProps,
maxWidth,
MaxWidthProps,
minWidth,
MinWidthProps,
space,
style,
themeGet,
width,
WidthProps,
} from 'styled-system';
import {ThemeShape} from '@twilio-paste/theme-tokens';
import {SpacingThemeProps} from '../../../../../types';

export interface BoxProps extends HeightProps, MaxWidthProps, MinWidthProps, WidthProps, SpacingThemeProps {
as?: string;
backgroundColor?: keyof ThemeShape['backgroundColors'];
borderRadius?: keyof ThemeShape['radii'];
borderType?: keyof ThemeShape['borderTypes'];
borderWidth?: keyof ThemeShape['borderWidths'];

import {
SpacingThemeProps,
BackgroundColorProp,
BorderRadiusProps,
BorderWidthProps,
WidthProps,
HeightProp,
MaxWidthProp,
MinWidthProp,
BorderColorProps,
BorderStyleProp,
} from './types';

export interface BoxProps
extends DisplayProps,
BorderProps,
HeightProp,
MaxWidthProp,
MinWidthProp,
WidthProps,
SpacingThemeProps,
BackgroundColorProp,
BorderColorProps,
BorderRadiusProps,
BorderStyleProp,
BorderWidthProps {
as?: keyof JSX.IntrinsicElements;
}

const backgroundColor = style({
@@ -31,14 +47,72 @@ const backgroundColor = style({
key: 'backgroundColors',
});

const BorderType = (props: BoxProps): string | null => {
return props.borderType ? themeGet(`borderTypes.${props.borderType}`)(props) : null;
};
const borderBottomLeftRadius = style({
prop: 'borderBottomLeftRadius',
cssProperty: 'borderBottomLeftRadius',
key: 'radii',
});

const borderBottomRightRadius = style({
prop: 'borderBottomRightRadius',
cssProperty: 'borderBottomRightRadius',
key: 'radii',
});

const borderTopLeftRadius = style({
prop: 'borderTopLeftRadius',
cssProperty: 'borderTopLeftRadius',
key: 'radii',
});

const borderTopRightRadius = style({
prop: 'borderTopRightRadius',
cssProperty: 'borderTopRightRadius',
key: 'radii',
});

const borderColor = style({
prop: 'borderColor',
cssProperty: 'borderColor',
key: 'borderColors',
});

const borderBottomWidth = style({
prop: 'borderBottomWidth',
cssProperty: 'borderBottomWidth',
key: 'borderWidths',
});

const borderLeftWidth = style({
prop: 'borderLeftWidth',
cssProperty: 'borderLeftWidth',
key: 'borderWidths',
});

const borderRightWidth = style({
prop: 'borderRightWidth',
cssProperty: 'borderRightWidth',
key: 'borderWidths',
});

const borderTopWidth = style({
prop: 'borderTopWidth',
cssProperty: 'borderTopWidth',
key: 'borderWidths',
});

const Box = styled.div<BoxProps>`
${backgroundColor};
${borders};
${BorderType};
${borderColor}
${borderBottomWidth}
${borderLeftWidth}
${borderRightWidth}
${borderTopWidth}
${borderBottomLeftRadius};
${borderBottomRightRadius};
${borderTopLeftRadius};
${borderTopRightRadius};
${display};
${height};
${maxWidth};
@@ -48,7 +122,7 @@ const Box = styled.div<BoxProps>`
`;

Box.defaultProps = {
minWidth: 0,
minWidth: 'size0',
};

export {Box};
@@ -0,0 +1,82 @@
import * as CSS from 'csstype';
import {ThemeShape} from '@twilio-paste/theme-tokens';

export interface BackgroundColorProp {
backgroundColor?: keyof ThemeShape['backgroundColors'];
}

export interface BorderColorProps {
borderColor?: keyof ThemeShape['borderColors'];
borderBottomColor?: keyof ThemeShape['borderColors'];
borderLeftColor?: keyof ThemeShape['borderColors'];
borderRightColor?: keyof ThemeShape['borderColors'];
borderTopColor?: keyof ThemeShape['borderColors'];
}

export interface BorderRadiusProps {
borderRadius?: keyof ThemeShape['radii'];
borderBottomLeftRadius?: keyof ThemeShape['radii'];
borderBottomRightRadius?: keyof ThemeShape['radii'];
borderTopLeftRadius?: keyof ThemeShape['radii'];
borderTopRightRadius?: keyof ThemeShape['radii'];
}

export interface BorderStyleProp {
borderStyle?: CSS.BorderStyleProperty;
}

export interface BorderWidthProps {
borderWidth?: keyof ThemeShape['borderWidths'];
borderBottomWidth?: keyof ThemeShape['borderWidths'];
borderLeftWidth?: keyof ThemeShape['borderWidths'];
borderRightWidth?: keyof ThemeShape['borderWidths'];
borderTopWidth?: keyof ThemeShape['borderWidths'];
}

export interface HeightProp {
height?: keyof ThemeShape['heights'];
}

export interface MarginProps {
m?: keyof ThemeShape['space'];
margin?: keyof ThemeShape['space'];
mt?: keyof ThemeShape['space'];
marginTop?: keyof ThemeShape['space'];
mr?: keyof ThemeShape['space'];
marginRight?: keyof ThemeShape['space'];
mb?: keyof ThemeShape['space'];
marginBottom?: keyof ThemeShape['space'];
ml?: keyof ThemeShape['space'];
marginLeft?: keyof ThemeShape['space'];
mx?: keyof ThemeShape['space'];
my?: keyof ThemeShape['space'];
}

export interface MaxWidthProp {
maxWidth?: keyof ThemeShape['maxWidths'];
}

export interface MinWidthProp {
minWidth?: keyof ThemeShape['maxWidths'];
}

export interface PaddingProps {
p?: keyof ThemeShape['space'];
padding?: keyof ThemeShape['space'];
pt?: keyof ThemeShape['space'];
paddingTop?: keyof ThemeShape['space'];
pr?: keyof ThemeShape['space'];
paddingRight?: keyof ThemeShape['space'];
pb?: keyof ThemeShape['space'];
paddingBottom?: keyof ThemeShape['space'];
pl?: keyof ThemeShape['space'];
paddingLeft?: keyof ThemeShape['space'];
px?: keyof ThemeShape['space'];
py?: keyof ThemeShape['space'];
}

export interface SpacingThemeProps extends MarginProps, PaddingProps {}

export interface WidthProps {
width?: keyof ThemeShape['widths'];
}
@@ -1,14 +1,14 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import {withKnobs, select} from '@storybook/addon-knobs';
import {withKnobs, select, text} from '@storybook/addon-knobs';
import {DefaultTheme, ThemeShape} from '@twilio-paste/theme-tokens';
import {Text} from '@twilio-paste/text';
import {Box} from '../src';

const backgroundColorOptions = Object.keys(DefaultTheme.backgroundColors);
const borderTypeOptions = Object.keys(DefaultTheme.borderTypes);
const spaceOptions = Object.keys(DefaultTheme.space);
const borderRadiusOptions = Object.keys(DefaultTheme.radii);
const borderColorOptions = Object.keys(DefaultTheme.borderColors);
const borderWidthOptions = Object.keys(DefaultTheme.borderWidths);

const demoString = `I'm some text in a box`;
@@ -21,17 +21,77 @@ storiesOf('Utilities|Box', module)
backgroundColorOptions,
'colorBackgroundBody'
) as keyof ThemeShape['backgroundColors'];
const borderTypeValue = select('borderType', borderTypeOptions, '') as keyof ThemeShape['borderTypes'];

const borderRadiusValue = select('borderRadius', borderRadiusOptions, '') as keyof ThemeShape['radii'];

const borderBottomLeftRadiusValue = select(
'borderBottomLeftRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderBottomRightRadiusValue = select(
'borderBottomRightRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderTopLeftRadiusValue = select(
'borderTopLeftRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderTopRightRadiusValue = select(
'borderTopRightRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderColorValue = select('borderColor', borderColorOptions, '') as keyof ThemeShape['borderColors'];

const borderStyleValue = text('borderStyle', '');

const borderWidthValue = select('borderWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];
const paddingValue = select('padding', spaceOptions, '');
const marginValue = select('margin', spaceOptions, '');

const borderBottomWidthValue = select(
'borderBottomWidth',
borderWidthOptions,
''
) as keyof ThemeShape['borderWidths'];

const borderLeftWidthValue = select('borderLeftWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];

const borderRightWidthValue = select(
'borderRightWidth',
borderWidthOptions,
''
) as keyof ThemeShape['borderWidths'];

const borderTopWidthValue = select('borderTopWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];

const paddingValue = select('padding', spaceOptions, '') as keyof ThemeShape['space'];

const marginValue = select('margin', spaceOptions, '') as keyof ThemeShape['space'];

const displayValue = text('display', '');

return (
<Box
borderRadius={borderRadiusValue}
backgroundColor={backgroudColorValue}
borderType={borderTypeValue}
borderBottomLeftRadius={borderBottomLeftRadiusValue}
borderBottomRightRadius={borderBottomRightRadiusValue}
borderBottomWidth={borderBottomWidthValue}
borderColor={borderColorValue}
borderLeftWidth={borderLeftWidthValue}
borderRadius={borderRadiusValue}
borderRightWidth={borderRightWidthValue}
borderStyle={borderStyleValue}
borderTopLeftRadius={borderTopLeftRadiusValue}
borderTopRightRadius={borderTopRightRadiusValue}
borderTopWidth={borderTopWidthValue}
borderWidth={borderWidthValue}
display={displayValue}
margin={marginValue}
padding={paddingValue}
>
@@ -25,11 +25,13 @@
},
"peerDependencies": {
"@emotion/styled": "^10.0.10",
"@twilio-paste/theme-tokens": "^0.4.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^4.1.0"
},
"devDependencies": {
"@twilio-paste/theme-tokens": "^0.4.0",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",

1 comment on commit 878d3c5

@now

This comment has been minimized.

Copy link

now bot commented on 878d3c5 Aug 7, 2019

Deployment failed with the following error:

The domain used as an alias twilio.design is not verified yet. Please verify it.
Please sign in to comment.
You can’t perform that action at this time.