crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete button component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-12 22:01:42 +01:00
parent b5042682a3
commit 92ff6937fb
4 changed files with 77 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button/index.tsx
+2 -2
View File
@@ -31,9 +31,9 @@ const Button = ({
fullWidth={fullWidth}
onClick={onClick}
>
{iconLeft && iconLeft}
{iconLeft && <span className='icon left'>{iconLeft}</span>}
{text}
{iconRight && iconRight}
{iconRight && <span className='icon right'>{iconRight}</span>}
</Wrapper>
);
};
src/components/Button/styles.ts
+72
View File
@@ -17,22 +17,61 @@ export const Wrapper = styled.button<WrapperProps>`
background: none;
font-weight: bold;
.icon svg {
display: flex;
align-items: center;
}
${({ iconLeft, iconRight }) => {
if (iconLeft || iconRight)
return css`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
`;
return '';
}}
.icon.left {
margin-right: 0.5rem;
}
.icon.right {
margin-left: 0.5rem;
}
${({ size }) => {
switch (size) {
case 'small':
return css`
padding: 0.625rem 1.875rem;
font-size: 1rem;
.icon svg {
width: 1rem;
height: 1rem;
}
`;
case 'big':
return css`
padding: 0.625rem 1.875rem;
font-size: 1.25rem;
.icon svg {
width: 1.25rem;
height: 1.25rem;
}
`;
default:
return css`
padding: 0.625rem 1.875rem;
font-size: 1rem;
.icon svg {
width: 1rem;
height: 1rem;
}
`;
}
}}
@@ -42,6 +81,11 @@ export const Wrapper = styled.button<WrapperProps>`
css`
width: 100%;
font-size: 1.25rem;
.icon svg {
width: 1.25rem;
height: 1.25rem;
}
`};
${({ variant, color, theme }) => {
@@ -51,6 +95,10 @@ export const Wrapper = styled.button<WrapperProps>`
background: ${theme.colors[color].main};
color: ${theme.colors.white.main};
.icon svg path {
stroke: ${theme.colors.white.main};
}
&:hover {
background: ${theme.colors[color].dark};
}
@@ -60,8 +108,16 @@ export const Wrapper = styled.button<WrapperProps>`
background: ${theme.colors[color].light};
color: #262628;
.icon svg path {
stroke: #262628;
}
&:hover {
color: ${theme.colors.white.main};
.icon svg path {
stroke: ${theme.colors.white.main};
}
}
`;
case 'outlined':
@@ -70,9 +126,17 @@ export const Wrapper = styled.button<WrapperProps>`
color: ${theme.colors[color].main};
border: 2px solid ${theme.colors[color].main};
.icon svg path {
stroke: ${theme.colors[color].main};
}
&:hover {
background: ${theme.colors[color].main};
color: ${theme.colors.white.main};
.icon svg path {
stroke: ${theme.colors.white.main};
}
}
`;
case 'text':
@@ -80,12 +144,20 @@ export const Wrapper = styled.button<WrapperProps>`
background: none;
color: ${theme.colors[color].main};
padding: 0;
.icon svg path {
stroke: ${theme.colors[color].main};
}
`;
default:
return css`
background: none;
color: ${theme.colors[color].main};
padding: 0;
.icon svg path {
stroke: ${theme.colors[color].main};
}
`;
}
}}