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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 163x 1x 1x 24x 504x 24x 1x 61x 1x 24x 24x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 16x 16x 16x 24x 24x 4x 1x | import {cloneElement} from 'react'
/**
* Base class for the component
*/
export const CLASS = 'sui-AtomButton'
/**
* {Deprecated} Types of buttons
*/
export const TYPES = ['primary', 'accent', 'secondary', 'tertiary']
/**
* Different designs for the button
*/
export const DESIGNS = {
SOLID: 'solid',
OUTLINE: 'outline',
FLAT: 'flat',
LINK: 'link'
}
/**
* A set of elevations that define the box shadow
*/
export const ELEVATIONS = {
MEDIUM: 'medium',
LARGE: 'large'
}
export const ALIGNMENT = {
CENTER: 'center',
LEFT: 'left',
RIGHT: 'right'
}
/**
* Available colors for the button
*/
export const COLORS = {
PRIMARY: 'primary',
ACCENT: 'accent',
NEUTRAL: 'neutral',
SUCCESS: 'success',
ALERT: 'alert',
ERROR: 'error',
SOCIAL_FACEBOOK: 'social-facebook',
SOCIAL_TWITTER: 'social-twitter',
SOCIAL_GOOGLE: 'social-google',
SOCIAL_YOUTUBE: 'social-youtube',
SOCIAL_WHATSAPP: 'social-whatsapp',
SOCIAL_INSTAGRAM: 'social-instagram'
}
/**
* Positions to be used when the button is used on group
*/
export const GROUP_POSITIONS = {
FIRST: 'first',
MIDDLE: 'middle',
LAST: 'last'
}
/**
* Shapes for the button
*/
export const SHAPES = {
SQUARED: 'squared',
ROUNDED: 'rounded',
CIRCULAR: 'circular'
}
/**
* Sizes for the button
*/
export const SIZES = {SMALL: 'small', LARGE: 'large'}
/**
* All the available modifiers for the button
*/
export const MODIFIERS = ['disabled', 'fullWidth', 'focused', 'negative', 'link']
/**
* Icon available positions
*/
export const ICON_POSITIONS = {
LEFT: 'left',
RIGHT: 'right',
CENTER: 'center'
}
/**
* Props for the button to filter the rest of attributes
*/
export const OWN_PROPS = [
...TYPES,
...Object.values(SIZES),
'alignment',
'children',
'className',
'color',
'design',
'isFitted',
'focused',
'fullWidth',
'groupPosition',
'isLoading',
'leftIcon',
'loadingText',
'negative',
'rightIcon',
'type'
]
/**
* Display Name for the AtomIcon component
*/
export const ATOM_ICON_DISPLAY_NAME = 'AtomIcon'
/**
* Map of sizes of the button with the AtomIcon usage
* The key is the size of the button
* The value is the size of the icon
*/
export const ATOM_ICON_SIZES_MAPPER = {
default: 'small',
small: 'small',
large: 'medium'
}
export const TYPES_CONVERSION = {
primary: {design: DESIGNS.SOLID, color: 'primary'},
accent: {design: DESIGNS.SOLID, color: 'accent'},
secondary: {design: DESIGNS.OUTLINE, color: 'primary'},
tertiary: {design: DESIGNS.FLAT, color: 'primary'}
}
export const createClasses = (array, sufix = '') =>
array.reduce((res, key) => ({...res, [key]: `${CLASS}--${key}${sufix}`}), {})
export const CLASSES = createClasses([
...Object.values(COLORS),
...Object.values(DESIGNS),
...Object.values(ALIGNMENT),
...MODIFIERS,
...Object.values(SIZES),
'empty'
])
/**
* Get props cleaning out AtomButton own props
* @param {Object} props
* @return {Object}
*/
export const cleanProps = props => {
const newProps = {...props}
OWN_PROPS.forEach(key => delete newProps[key])
return newProps
}
/**
* Get modifiers to apply according to props
* @param {Object} props
* @return {Array<String>}
*/
export const getModifiers = props => {
return Object.keys(props).filter(name => props[name] && MODIFIERS.includes(name))
}
export function deprecated(
validator,
callback = (props, propName, componentName) => {
const deprecatedMessage = `The prop ${'\x1b[32m'}${propName}${'\u001b[39m'} is DEPRECATED on ${'\x1b[32m'}${componentName}${'\u001b[39m'}.`
console.warn(deprecatedMessage) // eslint-disable-line
}
) {
return function deprecated(props, propName, componentName, ...rest) {
if (props[propName] != null && process.env.NODE_ENV === 'development') {
callback(props, propName, componentName, ...rest)
}
return validator(props, propName, componentName, ...rest)
}
}
export const typeConversion = ({type, design, color, link, href, ...other}) => {
const result = {
design,
color,
link,
href,
...other
}
switch (type) {
case 'primary':
result.color = color || 'primary'
result.design = design || (link || href ? DESIGNS.LINK : DESIGNS.SOLID)
break
case 'accent':
result.color = color || 'accent'
result.design = design || (link || href ? DESIGNS.LINK : DESIGNS.SOLID)
break
case 'secondary':
result.color = color || 'primary'
result.design = design || (link || href ? DESIGNS.LINK : DESIGNS.OUTLINE)
break
case 'tertiary':
result.color = color || 'primary'
result.design = design || (link || href ? DESIGNS.LINK : DESIGNS.FLAT)
break
default:
result.type = type
result.color = color || 'primary'
break
}
return result
}
export const getPropsWithDefaultValues = ({type, design, color, alignment, link, href, ...other}) => ({
...other,
link,
type,
design: design || (link || href ? DESIGNS.LINK : DESIGNS.SOLID),
color: color || 'colors',
alignment: alignment || ALIGNMENT.CENTER
})
/**
* Detect if an element is an AtomIcon to force correct size
* @param {React.ReactElement} icon
*/
export const isAtomIcon = icon => icon?.type?.displayName === ATOM_ICON_DISPLAY_NAME
/**
* Prepare the AtomIcon element to use the correct size
* @param {React.ReactElement} atomIconElement
* @param {object} options
* @param {string} options.size Size of the button to grab the correct icon size
*/
export const prepareAtomIcon = (atomIconElement, {size}) => {
return cloneElement(atomIconElement, {
color: undefined,
size: atomIconElement?.props?.size || ATOM_ICON_SIZES_MAPPER[size]
})
}
|