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 | 1x 4x 4x 4x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import AtomIcon, {ATOM_ICON_COLORS, ATOM_ICON_SIZES} from '@s-ui/react-atom-icon'
import ActionButtonWrapper from './ActionButtonWrapper.js'
import {BASE_CLASS, CLASSES, COLOR_CLASSES, COLORS, MODIFIERS, SIZES, STYLES} from './config.js'
const AtomActionButton = ({
children,
className,
color = COLORS.PRIMARY,
disabled,
focused,
href,
icon,
isButton,
isSubmit,
link,
linkFactory,
size = SIZES.MEDIUM,
style = STYLES.FILLED_NEGATIVE,
target,
title,
...restProps
}) => {
const classNames = cx(
BASE_CLASS,
COLOR_CLASSES[color],
CLASSES[style],
CLASSES[size],
focused && CLASSES[MODIFIERS.ACTIVE_FOCUSED],
disabled && CLASSES[MODIFIERS.DISABLED],
link && CLASSES[MODIFIERS.LINK],
className
)
const buttonProps = {
href,
isButton,
isSubmit,
link,
linkFactory,
target,
title,
...restProps
}
return (
<ActionButtonWrapper {...buttonProps} className={classNames}>
<div className={`${BASE_CLASS}-icon`}>
<AtomIcon size={ATOM_ICON_SIZES.medium} color={ATOM_ICON_COLORS.currentColor}>
{icon}
</AtomIcon>
</div>
<div className={`${BASE_CLASS}-text`}>{children}</div>
</ActionButtonWrapper>
)
}
AtomActionButton.displayName = 'AtomActionButton'
AtomActionButton.propTypes = {
/**
* Content to be included in the button
*/
children: PropTypes.node,
/**
* Classes to add to button (DEPRECATED)
*/
className: PropTypes.any,
/**
* Color of button:
* 'primary' (default),
* 'accent',
* 'neutral'
*/
color: PropTypes.oneOf(Object.values(COLORS)),
/**
* Disabled: faded with no interaction.
*/
disabled: PropTypes.bool,
/**
* Modifier: state of :active, :focus
*/
focused: PropTypes.bool,
/**
* URL to be added on the HTML link
*/
href: PropTypes.string,
/**
* Icon to be displayed (required)
*/
icon: PropTypes.node.isRequired,
/**
* HTML element: if true, render a link. Otherwise render a button
*/
link: PropTypes.bool,
/**
* Size of the icon
* {SMALL: 'small',
* MEDIUM: 'medium',
* LARGE: 'large'}
*/
size: PropTypes.oneOf(Object.values(SIZES)),
/**
* Style of the button: 'filledNegative' (default), 'filledPositive', 'outline', 'flat'
*/
style: PropTypes.oneOf(Object.values(STYLES)),
/**
* Target to be added on the HTML link
*/
target: PropTypes.string,
/**
* Title to be added on button or link
*/
title: PropTypes.string,
/**
* Factory used to create navigation link
*/
linkFactory: PropTypes.func,
/**
* if true, type="submit" (needed when several action buttons coexist under the same form)
*/
isSubmit: PropTypes.bool,
/**
* if true, type="button" (needed when several action buttons coexist under the same form)
*/
isButton: PropTypes.bool
}
export default AtomActionButton
export {COLORS as atomActionButtonColors}
export {SIZES as atomActionButtonSizes}
export {STYLES as atomActionButtonStyles}
|