src/components/Button/style.ts
/* eslint-disable no-confusing-arrow */
import style, { css } from 'styled-components'
import {
grayDarker,
blue,
blueDark,
blueDarker,
blueLighter,
white,
grayDark,
gray,
grayDefault,
boxShadow,
grayLight,
orangeDarker,
redDark,
redDarker,
redLighter,
orange as orangeColor,
} from '../style/colors'
import {
fontFamily,
fontSize,
lineHeight,
fontWeightMedium,
} from '../style/fonts'
import { borderRadius } from '../style/borders'
import { ButtonStyled } from './Button'
export const ButtonWrapperBase = css`
-webkit-appearance: none;
align-items: center;
background-color: ${white};
border: 0;
border-radius: ${borderRadius};
box-sizing: border-box;
color: ${grayDefault};
cursor: pointer;
display: inline-block;
justify-content: flex-start;
flex: 0 0 auto;
font-family: ${fontFamily};
font-size: ${fontSize};
font-weight: ${fontWeightMedium};
line-height: ${lineHeight};
min-width: 0;
padding-top: 0;
padding-bottom: 0;
position: relative;
transition-property: background-color, border-color, color;
transition-duration: 0.1s;
transition-timing-function: ease-in;
user-select: none;
:active {
top: ${(props) =>
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'ThemeP... Remove this comment to see the full error message
props.disabled ? '0px' : '1px'};
}
:focus {
box-shadow: 0 0 0 3px ${boxShadow};
outline: 0;
}
:hover {
transition-property: background-color, border-color, color;
transition-duration: 0.1s;
transition-timing-function: ease-in;
}
`
export const ButtonContainerBase = css`
-webkit-appearance: none;
align-items: center;
cursor: pointer;
display: flex;
justify-content: flex-start;
flex: 0 0 auto;
user-select: none;
width: 100%;
height: 100%;
`
export const ButtonNestedBase = css`
align-items: center;
background: none transparent;
border: 0;
border-radius: ${borderRadius};
color: inherit;
cursor: pointer;
display: flex;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
justify-content: flex-start;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
`
/* styles common to all buttons */
export const ButtonBase = css`
-webkit-appearance: none;
align-items: center;
background-color: ${white};
border: 0;
border-radius: ${borderRadius};
color: ${grayDefault};
cursor: pointer;
display: flex;
justify-content: flex-start;
flex: 0 0 auto;
font-family: ${fontFamily};
font-size: ${fontSize};
font-weight: ${fontWeightMedium};
line-height: ${lineHeight};
min-width: 0;
padding-top: 0;
padding-bottom: 0;
position: relative;
transition-property: background-color, border-color, color;
transition-duration: 0.1s;
transition-timing-function: ease-in;
user-select: none;
:active {
top: ${(props) =>
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'ThemeP... Remove this comment to see the full error message
props.disabled ? '0px' : '1px'};
}
:focus {
box-shadow: 0 0 0 3px ${boxShadow};
}
:hover {
transition-property: background-color, border-color, color;
transition-duration: 0.1s;
transition-timing-function: ease-in;
}
`
/* theme variants */
export const primary = css`
background-color: ${(props) =>
// @ts-expect-error TS(2339) FIXME: Property '$loading' does not exist on type 'ThemeP... Remove this comment to see the full error message
props.$loading ? blueDarker : blue};
color: ${white};
border: 1px solid
${(props) =>
// @ts-expect-error TS(2339) FIXME: Property '$loading' does not exist on type 'ThemeP... Remove this comment to see the full error message
props.$loading ? blueDarker : blue};
:hover {
background-color: ${blueDark};
border-color: ${blueDark};
color: ${white};
}
`
export const secondary = css`
background-color: ${white};
color: ${grayDark};
border: 1px solid ${gray};
:hover {
color: ${grayDarker};
border-color: ${grayDark};
}
:focus {
border-color: ${blue};
color: ${grayDarker};
}
`
export const danger = css`
background-color: ${(props) =>
// @ts-expect-error TS(2339) FIXME: Property '$loading' does not exist on type 'ThemeP... Remove this comment to see the full error message
props.$loading ? redDarker : redDark};
color: ${white};
border-color: ${redDarker};
:hover {
background-color: ${redDarker};
}
:focus {
box-shadow: 0 0 0 3px ${redLighter};
background-color: ${redDark};
}
`
export const link = css`
background-color: transparent;
color: ${blue};
:hover {
color: ${blueDark};
}
`
export const text = css`
background-color: transparent;
:hover {
color: ${grayDarker};
}
`
export const orange = css`
background-color: ${orangeDarker};
color: ${white};
border: 1px solid ${orangeDarker};
:hover {
background-color: ${orangeColor};
border-color: ${orangeColor};
color: ${white};
}
`
/* size variants */
export const small = css`
padding-left: 8px;
padding-right: 8px;
height: 32px;
`
export const medium = css`
padding-right: 16px;
padding-left: 16px;
height: 40px;
`
export const large = css`
padding-right: 16px;
padding-left: 16px;
height: 48px;
`
const Sizes = {
small,
medium,
large,
}
/* state variants */
export const secondaryDisabled = css`
cursor: not-allowed;
border: 1px solid ${grayLight};
color: ${gray};
`
export const Disabled = secondaryDisabled
export const primaryDisabled = css`
background-color: #c6cbe4;
cursor: not-allowed;
border: 1px solid #c6cbe4;
color: ${white};
`
export const disabled = css`
cursor: not-allowed;
`
export const fullWidth = css`
width: 100%;
justify-content: center;
`
// @ts-expect-error TS(7006) FIXME: Parameter 'isDisabled' implicitly has an 'any' typ... Remove this comment to see the full error message
const getBackgroundColor = (isDisabled, type) => {
if (isDisabled) {
return grayLight
}
return type === 'primary' ? blueLighter : gray
}
export const ButtonSelect = style.div`
:before {
background-color: ${(props) =>
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'Themed... Remove this comment to see the full error message
getBackgroundColor(props.disabled, props.type)};
color: ${(props): string => (props.
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'Themed... Remove this comment to see the full error message
disabled ? gray : blueLighter)};
content: "";
height: 24px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1px;
}
${(props) =>
// @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
Sizes[props.size] || Sizes.medium};
cursor: ${(props): string => (props.
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'Themed... Remove this comment to see the full error message
disabled ? 'not-allowed' : 'inherit')};
align-items: center;
display: flex;
justify-content: center;
box-sizing: border-box;
${(props): string =>
// @ts-expect-error TS(2339) FIXME: Property 'size' does not exist on type 'ThemedStyl... Remove this comment to see the full error message
props.size === 'small' ? 'padding: 0 6px' : 'padding 0 10px'};
position: relative;
width: 100%;
${ButtonStyled}:hover & {
background-color: ${blueDark};
color: ${white};
}
${ButtonStyled}:focus & {
border-color: ${blue};
color: ${grayDarker};
}
`
export const ButtonArrow = style.div`
padding-left: 5px;
display: flex;
margin-right: -4px;
${(props): string => props.
// @ts-expect-error TS(2339) FIXME: Property 'textToLeft' does not exist on type 'Them... Remove this comment to see the full error message
textToLeft && 'margin-left: auto;'}
`
export const ButtonLabel = style.div`
margin-left: ${(props): string =>
// @ts-expect-error TS(2339) FIXME: Property 'hasIcon' does not exist on type 'ThemedS... Remove this comment to see the full error message
props.hasIcon && !props.iconEnd ? '5px' : '0px'};
margin-right: ${(props): string =>
// @ts-expect-error TS(2339) FIXME: Property 'hasIcon' does not exist on type 'ThemedS... Remove this comment to see the full error message
props.hasIcon && props.iconEnd ? '5px' : '0px'};
`