Skip to content

Commit

Permalink
feat(atoms): change button api
Browse files Browse the repository at this point in the history
  • Loading branch information
@ej9x
ej9x committed Dec 11, 2018
1 parent 4174921 commit 5a8400e
Show file tree
Hide file tree
Showing 5 changed files with 288 additions and 238 deletions.
102 changes: 44 additions & 58 deletions src/atoms/Button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import React, { Component } from 'react';

import { keyframes } from 'react-emotion';
import { createStyledTag, createComponentTheme, getThemeStyle, getThemeColors } from '../../utils';
import { createStyledTag, createComponentTheme, getThemeColors } from '../../utils';

export type ButtonProps = {
/** callback to handle click */
Expand All @@ -25,9 +25,9 @@ export type ButtonProps = {
/** possible button types */
type?: 'submit' | 'button' | 'reset',
/** possible button colors */
color?: 'primary' | 'secondary' | 'neutral' | 'red' | 'white',
color?: 'primary' | 'secondary' | 'neutral' | 'danger',
/** the type of button */
variant?: 'outlined' | 'raised',
variant?: 'outlined' | 'raised' | 'ghost',
/** posible sizes */
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
/** possible to reassign the button tag */
Expand Down Expand Up @@ -56,12 +56,14 @@ const spinner = keyframes`
`;

const theme = createComponentTheme(name, (colors: *, sizes: *): * => ({
button: {
root: {
cursor: 'pointer',
fontSize: '1.4rem',
fontWeight: '600',
transition: 'all .15s ease-in-out',
borderRadius: sizes.MAIN_BORDER_RADIUS,
borderStyle: 'solid',
borderWidth: '1px',

'&:hover': {
boxShadow: '0 1px 3px 0 rgba(50,50,93,.14), 0 4px 6px 0 rgba(112,157,199,.08)',
Expand All @@ -74,6 +76,40 @@ const theme = createComponentTheme(name, (colors: *, sizes: *): * => ({
},
},
modifiers: {
color: {
primary: {
backgroundColor: colors.PRIMARY,
borderColor: colors.PRIMARY,
color: colors.WHITE,
},
secondary: {
backgroundColor: colors.SECONDARY,
borderColor: colors.SECONDARY,
color: colors.WHITE,
},
neutral: {
backgroundColor: colors.WHITE,
borderColor: colors.PRIMARY_BORDER_COLOR,
color: colors.BLACK,
},
danger: {
backgroundColor: colors.DANGER_DARK,
borderColor: colors.DANGER_DARK,
color: colors.WHITE,
},
},

variant: {
outlined: {
backgroundColor: colors.WHITE,
color: colors.BLACK,
},
ghost: {
backgroundColor: colors.TRANSPARENT,
color: colors.WHITE,
},
},

size: {
xs: {
height: BUTTON_HEIGHT_BY_SIZE.xs,
Expand Down Expand Up @@ -122,6 +158,7 @@ const theme = createComponentTheme(name, (colors: *, sizes: *): * => ({
borderRadius: '5rem',
padding: '0 2rem',
},

},
defaults: {
...DEFAULT_MODIFIERS,
Expand Down Expand Up @@ -160,53 +197,6 @@ const getLoading = (props: ButtonProps) => {
: {};
};

const getBackgroundColor = (props: ButtonProps) => {
if (props.variant === 'raised') {
switch (props.color) {
case 'primary': return getThemeColors(props).PRIMARY_BUTTON_BACKGROUND_COLOR;
case 'secondary': return getThemeColors(props).SECONDARY_BUTTON_BACKGROUND_COLOR;
case 'red': return getThemeColors(props).RED_BUTTON_BACKGROUND_COLOR;
case 'neutral': return getThemeColors(props).NEUTRAL_BUTTON_BACKGROUND_COLOR;
case 'white': return getThemeColors(props).WHITE;
default: return '';
}
} else {
switch (props.color) {
case 'white': return getThemeColors(props).TRANSPARENT;
default: return '';
}
}
};

const getColor = (props: ButtonProps) => {
if (props.variant === 'raised') {
switch (props.color) {
case 'primary': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
case 'secondary': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
case 'neutral': return getThemeColors(props).PRIMARY_TEXT_COLOR;
case 'red': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
case 'white': return getThemeColors(props).PRIMARY_TEXT_COLOR;
default: return '';
}
} else {
switch (props.color) {
case 'white': return getThemeColors(props).WHITE;
default: return getThemeColors(props).PRIMARY_TEXT_COLOR;
}
}
};

const getBorderColor = (props: ButtonProps) => {
switch (props.color) {
case 'primary': return getThemeColors(props).PRIMARY_BUTTON_BACKGROUND_COLOR;
case 'secondary': return getThemeColors(props).SECONDARY_BUTTON_BACKGROUND_COLOR;
case 'red': return getThemeColors(props).RED_BUTTON_BACKGROUND_COLOR;
case 'neutral': return getThemeColors(props).PRIMARY_BORDER_COLOR;
case 'white': return getThemeColors(props).WHITE;
default: return '';
}
};

const getSquaredStyle = (props: ButtonProps) => {
if (props.squared) {
return {
Expand All @@ -228,15 +218,11 @@ const ButtonTag = createStyledTag(name, props => ({
userSelect: 'none',
whiteSpace: 'nowrap',

...getThemeStyle(props, name).button,

...getSquaredStyle(props),

borderStyle: 'solid',
borderWidth: '1px',
borderColor: getBorderColor(props),
backgroundColor: getBackgroundColor(props),
color: getColor(props),
// borderColor: getBorderColor(props),
// backgroundColor: getBackgroundColor(props),
// color: getColor(props),

...getLoading(props),
}));
Expand Down
20 changes: 12 additions & 8 deletions src/atoms/Button/Button.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,24 @@ export default (asStory) => {
</Row>
))
.add('with custom colors and variant', () => (
<Column style={{ background: '#999' }}>
<Column style={{ background: '#999', padding: '10px' }}>
<Row>
<Button text="Raised" color="primary" />
<Button text="Raised" color="secondary" />
<Button text="Raised" color="red" />
<Button text="Raised" color="neutral" />
<Button text="Raised" color="white" />
<Button text="Primary" color="primary" />
<Button text="Secondary" color="secondary" />
<Button text="Danger" color="danger" />
<Button text="Neutral" color="neutral" />
</Row>
<Row>
<Button text="Outlined" color="primary" variant="outlined" />
<Button text="Outlined" color="secondary" variant="outlined" />
<Button text="Outlined" color="red" variant="outlined" />
<Button text="Outlined" color="danger" variant="outlined" />
<Button text="Outlined" color="neutral" variant="outlined" />
<Button text="Outlined" color="white" variant="outlined" />
</Row>
<Row>
<Button text="Ghost" color="primary" variant="ghost" />
<Button text="Ghost" color="secondary" variant="ghost" />
<Button text="Ghost" color="danger" variant="ghost" />
<Button text="Ghost" color="neutral" variant="ghost" />
</Row>
</Column>
))
Expand Down
8 changes: 3 additions & 5 deletions src/theme/colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const PALETTE = {
SECONDARY: DEFINE_PALETTE.GREEN,
SUCCESS: DEFINE_PALETTE.LIGHT_GREEN,
DANGER: DEFINE_PALETTE.LIGHT_RED,
DANGER_DARK: DEFINE_PALETTE.RED,
TRANSPARENT: DEFINE_PALETTE.TRANSPARENT,

TEXT_PRIMARY: DEFINE_PALETTE.DARK_GRAY1,
Expand All @@ -54,12 +55,9 @@ const COLORS = {
...PALETTE,

PRIMARY_BORDER_COLOR: PALETTE.LIGHT_GRAY1,
PRIMARY_BUTTON_BACKGROUND_COLOR: PALETTE.LIGHT_BLUE,
SECONDARY_BUTTON_BACKGROUND_COLOR: PALETTE.GREEN,
NEUTRAL_BUTTON_BACKGROUND_COLOR: PALETTE.WHITE,
RED_BUTTON_BACKGROUND_COLOR: PALETTE.RED,
PRIMARY_HOVER_GRAY_COLOR: DSM.GREY_COLORS.DSM_LIGHT_GREY_3,
DISABLED_COLOR: PALETTE.LIGHT_GRAY1,

DIVIDER_COLOR: PALETTE.LIGHT_GRAY4,
DISABLED_TEXT_COLOR: PALETTE.LIGHT_GRAY1,
PRIMARY_TEXT_COLOR: PALETTE.DARK_GRAY1,
SECONDARY_TEXT_COLOR: PALETTE.GRAY1,
Expand Down
3 changes: 0 additions & 3 deletions src/utils/__tests__/__snapshots__/createStyledTag-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports[`As developer, I can create tag by provided theme and passed styles. wit
.emotion-0 {
height: 10px;
grid-gap: 10px;
color: #000;
}
<div
Expand All @@ -17,8 +16,6 @@ exports[`As developer, I can create tag by provided theme and passed styles. wit
exports[`As developer, I can create tag by provided theme and passed styles. with style object 1`] = `
.emotion-0 {
height: 10px;
color: #000;
width: 200px;
}
<div
Expand Down
Loading

0 comments on commit 5a8400e

Please sign in to comment.