crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +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/App.tsx
+1 -13
View File
@@ -1,6 +1,4 @@
import { Route, Switch } from 'react-router-dom';
import { Button } from './components';
// import { Add } from './assets';
import GlobalStyles from './GlobalStyles';
const App = () => {
@@ -9,17 +7,7 @@ const App = () => {
<GlobalStyles />
<Switch>
<Route path='/' exact>
<div style={{ margin: '2rem', width: '95vw' }}>
<Button
color='client'
// size='big'
variant='outlined'
text='Button'
// fullWidth
// iconLeft={<Add />}
onClick={() => {}}
/>
</div>
<div style={{ margin: '2rem', width: '95vw' }}></div>
</Route>
</Switch>
</>
src/assets/icons/add.svg
+2 -2
View File
@@ -1,4 +1,4 @@
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.95215 1V14.8568" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 7.92871H16.9048" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.95215 1V14.8568" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 7.92871H16.9048" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 289 B

After

Width:  |  Height:  |  Size: 323 B

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};
}
`;
}
}}