Tech/improvements

lib/components/src/Badge/Badge.tsx

@@ -1,63 +1,66 @@
 import React, { FunctionComponent } from 'react';
-import { styled, css } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 
-type BadgeWrapperProps = BadgeProps;
+const BadgeWrapper = styled.div<BadgeProps>(
+ ({ theme }) => ({
+ display: 'inline-block',
+ fontSize: 11,
+ lineHeight: '12px',
+ alignSelf: 'center',
+ padding: '4px 12px',
+ borderRadius: '3em',
+ fontWeight: theme.typography.weight.bold,
+ }),
+ {
+ svg: {
+ height: 12,
+ width: 12,
+ marginRight: 4,
+ marginTop: -2,
 
-const BadgeWrapper = styled.div<BadgeWrapperProps>`
- display: inline-block;
- font-size: 11px;
- line-height: 12px;
- align-self: center;
- padding: 4px 12px;
- border-radius: 3em;
- font-weight: ${props => props.theme.typography.weight.bold};
-
- svg {
- height: 12px;
- width: 12px;
- margin-right: 4px;
- margin-top: -2px;
-
- path {
- fill: currentColor;
+ path: {
+ fill: 'currentColor',
+ },
+ },
+ },
+ ({ theme, status }) => {
+ switch (status) {
+ case 'critical': {
+ return {
+ color: theme.color.critical,
+ background: theme.background.critical,
+ };
+ }
+ case 'negative': {
+ return {
+ color: theme.color.negative,
+ background: theme.background.negative,
+ };
+ }
+ case 'warning': {
+ return {
+ color: theme.color.warning,
+ background: theme.background.warning,
+ };
+ }
+ case 'neutral': {
+ return {
+ color: theme.color.dark,
+ background: theme.color.mediumlight,
+ };
+ }
+ case 'positive': {
+ return {
+ color: theme.color.positive,
+ background: theme.background.positive,
+ };
+ }
+ default: {
+ return {};
+ }
  }
  }
-
- ${props =>
- props.status === 'critical' &&
- css`
- color: ${props.theme.color.critical};
- background: ${props.theme.background.critical};
- `};
-
- ${props =>
- props.status === 'negative' &&
- css`
- color: ${props.theme.color.negative};
- background: ${props.theme.background.negative};
- `};
-
- ${props =>
- props.status === 'warning' &&
- css`
- color: ${props.theme.color.warning};
- background: ${props.theme.background.warning};
- `};
-
- ${props =>
- props.status === 'neutral' &&
- css`
- color: ${props.theme.color.dark};
- background: ${props.theme.color.mediumlight};
- `};
-
- ${props =>
- props.status === 'positive' &&
- css`
- color: ${props.theme.color.positive};
- background: ${props.theme.background.positive};
- `};
-`;
+);
 
 export interface BadgeProps {
  status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';

lib/components/src/Button/Button.stories.tsx

@@ -36,6 +36,9 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
  <Button secondary small>
  Secondary
  </Button>
+ <Button gray small>
+ Secondary
+ </Button>
  <Button outline small>
  Outline
  </Button>

lib/components/src/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 
@@ -7,6 +7,7 @@ export interface ButtonProps {
  primary?: boolean;
  secondary?: boolean;
  tertiary?: boolean;
+ gray?: boolean;
  inForm?: boolean;
  disabled?: boolean;
  small?: boolean;
@@ -78,7 +79,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
  ...(small ? { padding: 9 } : { padding: 12 }),
  }
  : {},
- ({ theme, primary, secondary }) => {
+ ({ theme, primary, secondary, gray }) => {
  let color;
 
  if (primary) {
@@ -87,11 +88,14 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
  if (secondary) {
  color = theme.color.secondary;
  }
+ if (gray) {
+ color = theme.color.medium;
+ }
 
  return color
  ? {
  background: color,
- color: theme.color.lightest,
+ color: gray ? '#333333' : theme.color.inverseText,
 
  '&:hover': {
  background: darken(0.05, color),
@@ -226,7 +230,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
 
 const ButtonLink = ButtonWrapper.withComponent('a');
 
-export const Button = Object.assign(
+export const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>> = Object.assign(
  forwardRef<any, ButtonProps>(({ isLink, children, ...props }, ref) => {
  if (isLink) {
  return (

lib/components/src/Colors/SideBySide.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@storybook/theming';
+
+export const SideBySide = styled.div({
+ display: 'grid',
+ gridColumnGap: 30,
+ gridTemplateColumns: '1fr 1fr',
+
+ position: 'absolute',
+ width: '100vw',
+ height: '100vh',
+ overflow: 'auto',
+ top: 0,
+ left: 0,
+
+ '& > *': {
+ padding: 20,
+ },
+});

lib/components/src/Colors/colorpalette.stories.mdx

@@ -0,0 +1,123 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
+
+import { SideBySide } from './SideBySide';
+
+<Meta title="Basics/ColorPalette" />
+
+<SideBySide>
+ <div style={{background: '#202020' }}>
+<ThemeProvider theme={ensure(themes.dark)}>
+
+Dark theme Colors
+
+<ColorPalette>
+ {Object.entries(convert(themes.dark).color).map(([k,v]) => {
+ if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={{ [k]: v }}
+ />
+ );
+ } else if (typeof v === 'object') {
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})}
+ />
+ );
+ }
+ return null;
+ })}
+</ColorPalette>
+
+Dark theme Backgrounds
+
+<ColorPalette>
+ {Object.entries(convert(themes.dark).background).map(([k,v]) => {
+ if(k === 'color'){
+ return null
+ }
+ if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={{ [k]: v }}
+ />
+ );
+ } else if (typeof v === 'object') {
+ const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={colors}
+ />
+ );
+ }
+ return null;
+ })}
+</ColorPalette>
+ </ThemeProvider></div>
+ <div styles={{ background: '#eeeeee'}}>
+
+Light theme Colors
+
+<ColorPalette>
+ {Object.entries(convert(themes.light).color).map(([k,v]) => {
+ if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={{ [k]: v }}
+ />
+ );
+ } else if (typeof v === 'object') {
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})}
+ />
+ );
+ }
+ return null;
+ })}
+</ColorPalette>
+
+Light theme Backgrounds
+
+<ColorPalette>
+ {Object.entries(convert(themes.light).background).map(([k,v]) => {
+ if(k === 'color'){
+ return null
+ }
+ if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={{ [k]: v }}
+ />
+ );
+ } else if (typeof v === 'object') {
+ const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+ return (
+ <ColorItem
+ key={k}
+ title={k}
+ colors={colors}
+ />
+ );
+ }
+ return null;
+ })}
+</ColorPalette>
+ </div>
+</SideBySide>

lib/components/src/Loader/Loader.stories.tsx

@@ -2,4 +2,32 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Loader } from './Loader';
 
-storiesOf('Basics/Loader', module).add('infinite state', () => <Loader role="progressbar" />);
+storiesOf('Basics/Loader', module)
+ .addDecorator(storyFn => (
+ <div
+ style={{
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100vw',
+ height: '100vh',
+ background:
+ 'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)',
+ }}
+ >
+ <span
+ style={{
+ position: 'absolute',
+ top: '50%',
+ left: 0,
+ height: '50vh',
+ width: '100vw',
+ background:
+ 'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)',
+ }}
+ />
+ {storyFn()}
+ </div>
+ ))
+ .add('infinite state', () => <Loader role="progressbar" />)
+ .add('size adjusted', () => <Loader size={64} role="progressbar" />);