initial structure for components rewrite
This commit is contained in:
Rodrigo Antinarelli authored and James A. Petts committed
1 parent
944afe4a3e
commit
c391c007ff
284 files changed
+68087
-17215
No files matched your search
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Button = ({
|
||||
children,
|
||||
variant = defaults.variant,
|
||||
color = defaults.color,
|
||||
size = defaults.size,
|
||||
radius = defaults.radius,
|
||||
disabled = defaults.disabled,
|
||||
elevation,
|
||||
type = defaults.type,
|
||||
startIcon: startIconProp,
|
||||
endIcon: endIconProp,
|
||||
className,
|
||||
...rest
|
||||
}) => {
|
||||
const hasIcon = startIconProp || endIconProp;
|
||||
const getClasses = () => {
|
||||
const classes = [];
|
||||
let buttonElevation;
|
||||
|
||||
if (variant === 'text') {
|
||||
if (elevation) {
|
||||
buttonElevation = elevation;
|
||||
} else {
|
||||
buttonElevation = false;
|
||||
}
|
||||
} else {
|
||||
buttonElevation = defaults.elevation;
|
||||
}
|
||||
|
||||
classes.push(variantClasses[variant][color]);
|
||||
classes.push(radiusClasses[radius]);
|
||||
classes.push(sizeClasses[size]);
|
||||
classes.push(disabledClasses[disabled]);
|
||||
classes.push(elevationClasses[buttonElevation]);
|
||||
classes.push(className);
|
||||
|
||||
if (hasIcon) {
|
||||
classes.push(baseIconClasses);
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
};
|
||||
|
||||
const baseIconClasses = 'inline-flex items-center';
|
||||
const baseClasses =
|
||||
'outline-none transition duration-300 ease-in-out rounded font-bold focus:outline-none';
|
||||
|
||||
const startIcon = startIconProp && (
|
||||
<div className="mr-2">{startIconProp}</div>
|
||||
);
|
||||
|
||||
const endIcon = endIconProp && <div className="ml-2">{endIconProp}</div>;
|
||||
|
||||
return (
|
||||
<button className={`${baseClasses} ${getClasses()}`} type={type} {...rest}>
|
||||
{startIcon}
|
||||
{children}
|
||||
{endIcon}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const defaults = {
|
||||
variant: 'outlined',
|
||||
color: 'default',
|
||||
size: 'medium',
|
||||
radius: 'medium',
|
||||
disabled: false,
|
||||
elevation: true,
|
||||
type: 'button',
|
||||
};
|
||||
|
||||
const radiusClasses = {
|
||||
small: 'rounded-sm',
|
||||
medium: 'rounded-md',
|
||||
large: 'rounded-lg',
|
||||
full: 'rounded-full',
|
||||
};
|
||||
|
||||
const disabledClasses = {
|
||||
true: 'cursor-not-allowed',
|
||||
false: '',
|
||||
};
|
||||
|
||||
const elevationClasses = {
|
||||
true: 'shadow',
|
||||
false: 'shadow-none',
|
||||
};
|
||||
|
||||
const variantClasses = {
|
||||
text: {
|
||||
default: 'hover:bg-gray-200 text-black',
|
||||
primary: 'hover:bg-blue-100 text-blue-900',
|
||||
secondary: 'hover:bg-blue-100 text-blue-300',
|
||||
},
|
||||
outlined: {
|
||||
default: 'border border-black text-black hover:bg-gray-200',
|
||||
primary: 'border border-blue-900 text-blue-900 hover:bg-blue-100',
|
||||
secondary: 'border border-blue-300 text-blue-300 hover:bg-blue-100',
|
||||
},
|
||||
contained: {
|
||||
default: 'bg-black hover:bg-gray-800 text-white',
|
||||
primary: 'bg-blue-900 hover:bg-blue-800 text-white',
|
||||
secondary: 'bg-blue-300 hover:bg-blue-500 text-black',
|
||||
},
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'py-1 px-2 text-sm',
|
||||
medium: 'py-2 px-4 text-base',
|
||||
large: 'py-3 px-6 text-lg',
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
||||
radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
|
||||
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
|
||||
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,180 @@
|
||||
---
|
||||
name: Button
|
||||
menu: Components
|
||||
route: components/button
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import Button from './';
|
||||
|
||||
# Button
|
||||
|
||||
Buttons are used to execute actions when users interacts with them.
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Button} />
|
||||
|
||||
## Contained Buttons
|
||||
|
||||
<Playground>
|
||||
<>
|
||||
<Button variant="contained" style={{ margin: 5 }}>
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" style={{ margin: 5 }}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" style={{ margin: 5 }}>
|
||||
Secondary
|
||||
</Button>
|
||||
</>
|
||||
</Playground>
|
||||
|
||||
## Outlined Buttons
|
||||
|
||||
<Playground>
|
||||
<>
|
||||
<Button variant="outlined" style={{ margin: 5 }}>
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="outlined" color="primary" style={{ margin: 5 }}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="outlined" color="secondary" style={{ margin: 5 }}>
|
||||
Secondary
|
||||
</Button>
|
||||
</>
|
||||
</Playground>
|
||||
|
||||
## Text Buttons
|
||||
|
||||
<Playground>
|
||||
<>
|
||||
<Button variant="text" style={{ margin: 5 }}>
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="text" color="primary" style={{ margin: 5 }}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="text" color="secondary" style={{ margin: 5 }}>
|
||||
Secondary
|
||||
</Button>
|
||||
</>
|
||||
</Playground>
|
||||
|
||||
## Sizes
|
||||
|
||||
<Playground>
|
||||
<>
|
||||
<div>
|
||||
<Button variant="text" size="small" style={{ margin: 5 }}>
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" style={{ margin: 5 }}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outlined" size="large" style={{ margin: 5 }}>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
color="primary"
|
||||
style={{ margin: 5 }}
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="primary"
|
||||
style={{ margin: 5 }}
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
color="primary"
|
||||
style={{ margin: 5 }}
|
||||
>
|
||||
large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
color="secondary"
|
||||
style={{ margin: 5 }}
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="secondary"
|
||||
style={{ margin: 5 }}
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
color="secondary"
|
||||
style={{ margin: 5 }}
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
</Playground>
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="flex">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{ margin: 5 }}
|
||||
startIcon={
|
||||
<svg
|
||||
class="fill-current w-4 h-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
|
||||
</svg>
|
||||
}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{ margin: 5 }}
|
||||
endIcon={
|
||||
<svg
|
||||
class="fill-current w-4 h-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
|
||||
</svg>
|
||||
}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
</Playground>
|
||||
@@ -0,0 +1,2 @@
|
||||
import Button from './Button';
|
||||
export default Button;
|
||||
Reference in new issue
Block a user