Skip to content

Commit

Permalink
feat(button): href prop, updated types & styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@SiebenSieben
SiebenSieben committed Mar 3, 2020
1 parent 9143938 commit 8745e44
Show file tree
Hide file tree
Showing 10 changed files with 334 additions and 206 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
"trailingComma": "es5",
"tabWidth": 2,
"singleQuote": true
}
}
1 change: 0 additions & 1 deletion .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@ module.exports = {
'@storybook/addon-actions',
'@storybook/addon-knobs',
'@storybook/preset-create-react-app',
'storybook-addon-designs',
],
};
22 changes: 22 additions & 0 deletions .storybook/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
margin: 8px 0 0;
}

.row:first-child {
margin-top: 0;
}

.col {
flex: 1 1 auto;
margin: 0 8px 0 0;
}

.col:last-child {
margin-right: 0;
}
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,12 @@
"husky": "^4.2.1",
"lerna": "^3.20.2",
"postcss-cli": "^7.1.0",
"postcss-color-mod-function": "^3.0.3",
"postcss-import": "^12.0.1",
"postcss-nesting": "^7.0.1",
"postcss-preset-env": "^6.7.0",
"react-docgen-typescript-loader": "^3.6.0",
"react-scripts": "^3.3.1",
"storybook-addon-designs": "^5.1.2",
"stylelint": "^13.1.0",
"stylelint-config-standard": "^20.0.0",
"ts-loader": "^6.2.1",
Expand Down
132 changes: 95 additions & 37 deletions packages/button/src/Component.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,46 @@
@import '../../themes/default.css';

:root {
--button-primary-base-color: var(--color-red-brand-85-flat);
--button-primary-hover-color: color-mod(
var(--button-primary-base-color) lightness(-10%)
);
--button-primary-active-color: color-mod(
var(--button-primary-base-color) lightness(-20%)
);
--button-primary-disabled-color: var(--button-primary-base-color);

--button-secondary-base-color: var(--color-dark-indigo-15-flat);
--button-secondary-disabled-color: var(--color-dark-indigo-15-flat);

--button-secondary-base-color: var(--color-dark-indigo-15-flat);
--button-secondary-hover-color: color-mod(
var(--color-red-brand) lightness(-10%)
);
--button-secondary-active-color: color-mod(
var(--color-red-brand) lightness(-20%)
);
--button-secondary-disabled-color: var(--color-dark-indigo-15-flat);

--button-font-weight: 500;
--button-font-family: var(--font-family);
}

.component {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
padding: 0 24px;
line-height: 1.2;
font-weight: var(--button-font-weight);
font-family: var(--font-family);
text-decoration: none;
background-color: transparent;
border: 0;
border-radius: var(--button-border-radius);
border-radius: var(--border-radius);
transition: background 0.2s ease, border 0.2s ease;
box-sizing: border-box;
box-shadow: none;
Expand All @@ -17,34 +52,50 @@
}

.component:disabled {
cursor: default;
cursor: initial;
}

/* Size */

.xs {
min-width: 80px;
min-height: 32px;
padding: 0 12px;
font-size: 14px;
min-height: 32px;
min-width: 88px;

&.icon-only {
min-width: 32px;
}
}

.s {
font-size: 16px;
min-width: 104px;
min-height: 48px;
min-width: 160px;
font-size: 16px;

&.icon-only {
min-width: 48px;
}
}

.m {
font-size: 16px;
min-width: 128px;
min-height: 56px;
min-width: 160px;
font-size: 16px;

&.icon-only {
min-width: 56px;
}
}

.l {
font-size: 18px;
min-height: 68px;
min-width: 160px;
min-height: 68px;
font-size: 18px;

&.icon-only {
min-width: 68px;
}
}

/* Type */
Expand All @@ -55,81 +106,88 @@
}

.primary:hover {
background-color: color-mod(var(--button-primary-base-color) lightness(-10%));
background-color: var(--button-primary-hover-color);
}

.primary:active {
background-color: color-mod(var(--button-primary-base-color) lightness(-20%));
background-color: var(--button-primary-active-color);
}

.primary:disabled {
background-color: var(--button-primary-base-color);
background-color: var(--button-primary-disabled-color);
}

.secondary {
color: var(--color-dark-indigo);
background-color: var(--button-secondary-base-color);
border: 1px solid var(--button-secondary-border-color);
}

.secondary:hover {
background-color: color-mod(
var(--button-secondary-base-color) lightness(-10%)
);
border-color: color-mod(var(--button-secondary-border-color) lightness(-20%));
}

.secondary:active {
background-color: color-mod(
var(--button-secondary-base-color) lightness(-20%)
);
border-color: color-mod(var(--button-secondary-border-color) lightness(-40%));
}

.secondary:disabled {
color: color-mod(var(--color-dark-indigo) alpha(-70%));
background-color: var(--button-secondary-disabled-color);
border-color: color-mod(var(--button-secondary-border-color) alpha(-70%));
}

.extra {
color: var(--color-white);
background-color: var(--button-extra-base-color);
.outlined {
color: var(--color-dark-indigo);
background-color: transparent;
border: 1px solid var(--color-dark-indigo-60-flat);
}

.extra:hover {
background-color: color-mod(var(--button-extra-base-color) lightness(-10%));
.outlined:hover {
border-color: color-mod(var(--color-dark-indigo-60-flat) lightness(-20%));
}

.extra:active {
background-color: color-mod(var(--button-extra-base-color) lightness(-20%));
.outlined:active {
border-color: color-mod(var(--color-dark-indigo-60-flat) lightness(-40%));
}

.extra:disabled {
background-color: var(--button-extra-base-color);
.outlined:disabled {
border-color: var(--color-dark-indigo-60-flat);
}

.dashed {
.link {
min-width: 0;
color: var(--color-dark-indigo);
background-color: transparent;
border: 1px dashed var(--color-dark-indigo-60-flat);
}

.dashed:hover {
border-color: color-mod(var(--color-dark-indigo-60-flat) lightness(-20%));
.ghost {
min-width: 0;
min-height: 0;
padding: 0;
border: none;
background-color: transparent;
appearance: none;
}

.dashed:active {
border-color: color-mod(var(--color-dark-indigo-60-flat) lightness(-40%));
/* Icon */

.icon {
margin: 0 12px 0 0;
}

.dashed:disabled {
border-color: var(--color-dark-indigo-60-flat);
.text + .icon {
margin: 0 0 0 12px;
}

.link {
color: var(--color-dark-indigo);
background-color: transparent;
.icon:only-child {
margin: 0;
}

.icon-only {
padding: 0;
}

/* Block */
Expand Down
102 changes: 71 additions & 31 deletions packages/button/src/Component.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,93 @@
*/

import React from 'react';
import cn from 'classnames';

import { action } from '@storybook/addon-actions';
import { withDesign } from 'storybook-addon-designs';
import {
withKnobs, text, select, boolean
} from '@storybook/addon-knobs';
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';

import styles from '../../../.storybook/styles.css';

/**
* Components
*/

import { Button } from './Component';

const icon = (
<svg width="24" height="24" style={{ display: 'block' }} viewbox="0 0 24 24">
<path d="M11.511 2.327a.528.528 0 01.978 0L15 8.967h6.474c.498 0 .716.619.325.923L16.5 14l2 7c.121.462-.403.825-.804.557L12 17.133l-5.696 4.424c-.4.268-.925-.095-.804-.557l2-7-5.299-4.11c-.391-.304-.173-.923.325-.923H9l2.511-6.64z" />
</svg>
);

export default {
title: 'Common',
component: Button,
decorators: [withDesign, withKnobs]
title: 'Common',
component: Button,
decorators: [withKnobs],
};

export const ButtonStory = () => (
<Button
type={ select(
<>
<div className={cn(styles.row)}>
<div className={cn(styles.col)}>
<Button
type={select(
'Type',
['primary', 'secondary', 'extra', 'dashed', 'link'],
['primary', 'secondary', 'outlined', 'link', 'icon', 'ghost'],
'primary'
) }
title={ text('Title', '') }
disabled={ boolean('Disabled', false) }
htmlType={ select('htmlType', ['button', 'reset', 'submit'], 'button') }
loading={ boolean('Loading', false) }
size={ select('Size', ['xs', 's', 'm', 'l'], 'm') }
block={ boolean('Block', false) }
className={ text('className', '') }
dataTestId={ text('dataTestId', '') }
onClick={ action('click') }
>
{ text('Label', 'Оплатить') }
</Button>
)}
title={text('Title', '')}
disabled={boolean('Disabled', false)}
htmlType={select('htmlType', ['button', 'reset', 'submit'], 'button')}
href={text('href', '')}
loading={boolean('Loading', false)}
size={select('Size', ['xs', 's', 'm', 'l'], 'm')}
block={boolean('Block', false)}
className={text('className', '')}
dataTestId={text('dataTestId', '')}
onClick={action('click')}
>
{text('Label', 'Primary')}
</Button>
</div>
</div>
<div className={cn(styles.row)}>
<div className={cn(styles.col)}>
<Button type="secondary" icon={icon} size="m">
Secondary
</Button>
</div>
</div>
<div className={cn(styles.row)}>
<div className={cn(styles.col)}>
<Button type="secondary" icon={icon} size="m" />
</div>
</div>
<div className={cn(styles.row)}>
<div className={cn(styles.col)}>
<Button type="outlined" size="m">
Outlined
</Button>
</div>
</div>
<div className={cn(styles.row)}>
<div className={cn(styles.col)}>
<Button type="link" size="m">
Link
</Button>
</div>
</div>
<div className={cn(styles.row)}>
<div className={cn(styles.col)}>
<Button type="ghost" size="m">
Ghost
</Button>
</div>
</div>
</>
);

ButtonStory.story = {
name: 'Button',
parameters: {
design: {
type: 'figma',
// public link for testing
url: 'https://www.figma.com/file/cgApcObBwfNQzVVzJNqxoQ/Button'
}
}
name: 'Button',
parameters: {},
};

0 comments on commit 8745e44

Please sign in to comment.