feat(tools): create ui-components package and setup Storybook (#41920)
* feat(client): basic Storybook setup
* Revert "feat(client): basic Storybook setup"
This reverts commit f55e249326
.
* feat(tools): create ui-components package and setup Storybook
* Add ui-components to lerna.json
This commit is contained in:
38
tools/ui-components/src/button.js
Normal file
38
tools/ui-components/src/button.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './button.css';
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button = ({
|
||||
primary = false,
|
||||
size = 'medium',
|
||||
backgroundColor,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
const mode = primary
|
||||
? 'storybook-button--primary'
|
||||
: 'storybook-button--secondary';
|
||||
return (
|
||||
<button
|
||||
className={['storybook-button', `storybook-button--${size}`, mode].join(
|
||||
' '
|
||||
)}
|
||||
style={{ backgroundColor }}
|
||||
type='button'
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
backgroundColor: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
size: PropTypes.string
|
||||
};
|
Reference in New Issue
Block a user