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

Update select component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-23 18:24:51 +01:00
parent dc4cbbb528
commit d633a519eb
2 changed files with 29 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select/index.tsx
+9 -5
View File
@@ -49,11 +49,15 @@ const Select = ({
)} )}
</div> </div>
<div className='select'> <div className='select'>
<select value={value} name={name} onChange={onChange}> <div>
{options.map((option) => ( <select value={value} name={name} onChange={onChange}>
<option value={option.value}>{option.label}</option> {options.map((option) => (
))} <option key={value} value={option.value}>
</select> {option.label}
</option>
))}
</select>
</div>
</div> </div>
</Wrapper> </Wrapper>
); );
src/components/Select/styles.ts
+20 -91
View File
@@ -24,35 +24,23 @@ export const Wrapper = styled.div<WrapperProps>`
width: inherit; width: inherit;
height: inherit; height: inherit;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 2px;
position: relative;
color: ${({ theme }) => theme.colors.black.main}; color: ${({ theme }) => theme.colors.black.main};
background: ${({ theme }) => theme.colors.white.main};
background-clip: padding-box;
border: 2px solid transparent;
display: flex;
flex-direction: row;
align-items: center;
&:before { div {
content: ''; background: ${({ theme }) => theme.colors.white.main};
position: absolute; padding: 1rem;
top: 0; border-radius: 5px;
right: 0; display: flex;
bottom: 0; flex-direction: row;
left: 0; align-items: center;
width: inherit;
height: inherit;
z-index: -1;
margin: -2px;
border-radius: inherit;
} }
} }
.info { .info {
margin-bottom: 5px; margin-bottom: 5px;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr auto;
align-items: center; align-items: center;
p { p {
@@ -78,117 +66,67 @@ export const Wrapper = styled.div<WrapperProps>`
background-image: url('../../assets/icons/chevron-down.svg'); background-image: url('../../assets/icons/chevron-down.svg');
} }
.icon {
cursor: pointer;
display: inline-flex;
align-items: center;
}
.icon.left {
margin-right: 0.5rem;
}
${({ color, theme }) => { ${({ color, theme }) => {
switch (color) { switch (color) {
case 'client': case 'client':
return css` return css`
.select:before { .select {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
} }
.icon svg path {
stroke: ${theme.colors.client.main};
}
`; `;
case 'productOwner': case 'productOwner':
return css` return css`
.select:before { .select {
background: ${theme.colors.productOwner.light}; background: ${theme.colors.productOwner.light};
} }
.icon svg path {
stroke: ${theme.colors.productOwner.main};
}
`; `;
case 'developer': case 'developer':
return css` return css`
.select:before { .select {
background: ${theme.colors.developer.light}; background: ${theme.colors.developer.light};
} }
.icon svg path {
stroke: ${theme.colors.developer.main};
}
`; `;
case 'admin': case 'admin':
return css` return css`
.select:before { .select {
background: ${theme.colors.admin.light}; background: ${theme.colors.admin.light};
} }
.icon svg path {
stroke: ${theme.colors.admin.main};
}
`; `;
case 'success': case 'success':
return css` return css`
.select:before { .select {
background: ${theme.colors.success.main}; background: ${theme.colors.success.main};
} }
.icon svg path {
stroke: ${theme.colors.success.main};
}
`; `;
case 'warning': case 'warning':
return css` return css`
.select:before { .select {
background: ${theme.colors.warning.main}; background: ${theme.colors.warning.main};
} }
.icon svg path {
stroke: ${theme.colors.warning.main};
}
`; `;
case 'error': case 'error':
return css` return css`
.select:before { .select {
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
} }
.icon svg path {
stroke: ${theme.colors.error.main};
}
`; `;
case 'black': case 'black':
return css` return css`
.select:before { .select {
background: ${theme.colors.black.main}; background: ${theme.colors.black.main};
} }
.icon svg path {
stroke: ${theme.colors.black.main};
}
`; `;
case 'white': case 'white':
return css` return css`
.select:before { .select {
background: ${theme.colors.white.main}; background: ${theme.colors.white.main};
} }
.icon svg path {
stroke: ${theme.colors.white.main};
}
`; `;
default: default:
return css` return css`
.select:before { .select {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
} }
.icon svg path {
stroke: ${theme.colors.client.main};
}
`; `;
} }
}} }}
@@ -202,13 +140,9 @@ export const Wrapper = styled.div<WrapperProps>`
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.select:before { .select {
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
} }
.icon svg path {
stroke: ${theme.colors.error.main};
}
`} `}
${({ fullWidth }) => ${({ fullWidth }) =>
@@ -216,10 +150,5 @@ export const Wrapper = styled.div<WrapperProps>`
css` css`
width: 100%; width: 100%;
font-size: 1.25rem; font-size: 1.25rem;
.icon svg {
width: 1.25rem;
height: 1.25rem;
}
`}; `};
`; `;