Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 144x 3110x 3110x 3110x 3110x 3110x 3110x 3110x 3110x 3110x 3110x 3110x 3110x 3110x | import { CommonProps } from '../../types/buttonLinkCommonProps'
/**
* Handles all classNames for Button and Link components.
*/
export const buttonsAndLinksService = (
props: Pick<
CommonProps,
'disabled' | 'isColoredTertiary' | 'loading' | 'dimOpacityWhenDisabled' | 'className' | 'width'
>
) => {
let { disabled, loading, isColoredTertiary, dimOpacityWhenDisabled, width, className } = props
// When loading should be disabled
disabled = loading ? true : disabled
const tertiaryColor = isColoredTertiary ? 'red' : 'gray'
// Base Classes
const twButtonBaseClasses = `flex items-center justify-center md:justify-start font-medium rounded-full py-2 px-10 ${
width ?? 'w-full md:w-max'
}`
const twLinkBaseClasses = `flex items-center font-medium text-${tertiaryColor}-500`
// Disable state classes
const twDisabledClassesPrimarySecondary = `${
dimOpacityWhenDisabled ? 'text-opacity-75 opacity-80' : ''
} cursor-default`
const twDisabledPrimary = disabled ? twDisabledClassesPrimarySecondary : 'hover:bg-yellow-600 focus:bg-yellow-700'
const twDisabledSecondary = disabled ? twDisabledClassesPrimarySecondary : 'hover:bg-dark-600 focus:bg-dark-700'
const twDisabledTertiary = disabled ? twDisabledClassesPrimarySecondary : `hover:text-${tertiaryColor}-800`
// Kind classes
const twPrimaryClasses = `bg-yellow border border-transparent text-dark ${twDisabledPrimary}`
const twSecondaryClasses = `border bg-dark border border-transparent text-white ${twDisabledSecondary}`
// Add space to classNames
className = className ? ` ${className}` : ''
return {
disabled,
twButtonBaseClasses,
twLinkBaseClasses,
twDisabledTertiary,
twPrimaryClasses,
twSecondaryClasses,
className,
}
}
|