From b586b068b33194d83cd30637827fe5a2498eb2f8 Mon Sep 17 00:00:00 2001 From: Marcos Conceicao Date: Fri, 25 Oct 2024 11:56:35 -0300 Subject: [PATCH] feat(Alert.jsx): Migrated to css modules --- components/Alert/Alert.jsx | 121 +---- components/Alert/Alert.module.css | 84 +++ .../__snapshots__/Alert.unit.test.jsx.snap | 493 +++++------------- components/Alert/index.css | 1 + components/Alert/index.d.ts | 9 - components/index.css | 1 + components/shared/theme.d.ts | 59 --- components/shared/theme.js | 30 -- 8 files changed, 251 insertions(+), 547 deletions(-) create mode 100644 components/Alert/Alert.module.css create mode 100644 components/Alert/index.css diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx index 711fbfbe6..a8412ff6e 100644 --- a/components/Alert/Alert.jsx +++ b/components/Alert/Alert.jsx @@ -1,101 +1,26 @@ import { useState } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import classNames from 'classnames'; import Button from '../Button'; import Icon from '../Icon'; -import { - components, - spacing, - colors, - baseFontSize as defaultBaseFontSize, - breakpoints, -} from '../shared/theme'; - -const Content = styled.div` - align-items: start; - display: flex; - - & > span { - flex: 1; - } -`; - -const AlertIcon = styled(Icon)` - width: ${defaultBaseFontSize * 1.5}px; -`; - -const CloseButton = styled(Button.Icon).attrs({ - icon: 'close', -})` - height: auto; - opacity: 0.8; - padding: 0; - transition: opacity 0.4s ease; - width: auto; - - &:hover { - background: none; - opacity: 1; - } -`; - -CloseButton.displayName = 'CloseButton'; - -const Wrapper = styled.div` - border-radius: 8px; - box-sizing: border-box; - - ${({ - skin, - theme: { - baseFontSize, - spacing: { small, medium }, - components: { - alert: { - skins: { - [skin]: { background, icon, text }, - }, - }, - }, - }, - }) => ` - font-size: ${baseFontSize}px; - background-color: ${background}; - border: 1.5px solid ${icon}; - color: ${text}; - padding: ${small}px ${medium}px; - - ${Content} ${AlertIcon} { - color: ${icon}; - margin-right: ${medium}px; - } - - ${Content} > ${CloseButton} { - color: ${icon}; - margin: 0 0 0 ${medium}px !important; - min-height: 0; - opacity: 1; - } - `} -`; +import styles from './Alert.module.css'; const Alert = ({ icon = null, skin = 'neutral', children, - theme = { - colors, - baseFontSize: defaultBaseFontSize, - spacing, - breakpoints, - components: { - alert: components.alert, - }, - }, onClose = undefined, + className, ...rest }) => { const [show, setShow] = useState(true); + const contentClass = classNames(styles.content, className); + const alertClass = classNames(styles['alert-icon'], styles[`icon-${skin}`]); + const closeButtonClass = classNames( + styles['close-button'], + styles[`icon-${skin}`], + ); + const wrapperClass = classNames(styles.wrapper, styles[`wrapper-${skin}`]); const handleClose = () => { setShow(false); @@ -104,13 +29,19 @@ const Alert = ({ return ( show && ( - - - {icon && } +
+
+ {icon && } {children && {children}} - {onClose && } - - + {onClose && ( + + )} +
+
) ); }; @@ -124,14 +55,6 @@ Alert.propTypes = { /** You must pass a callback that is called when close button is clicked */ onClose: PropTypes.func, skin: PropTypes.oneOf(['primary', 'success', 'error', 'neutral', 'warning']), - theme: PropTypes.shape({ - baseFontSize: PropTypes.number, - colors: PropTypes.object, - spacing: PropTypes.object, - components: PropTypes.shape({ - alert: PropTypes.object, - }), - }), }; export default Alert; diff --git a/components/Alert/Alert.module.css b/components/Alert/Alert.module.css new file mode 100644 index 000000000..0c8e0af9c --- /dev/null +++ b/components/Alert/Alert.module.css @@ -0,0 +1,84 @@ +.content { + align-items: start; + display: flex; +} + +.content>span { + flex: 1; +} + +.alert-icon { + width: calc(var(--qtm-base-font-size) * 1.5); + margin-right: var(--qtm-spacing-medium); +} + +.icon-neutral { + color: var(--qtm-colors-neutral-700) !important; +} + +.icon-primary { + color: var(--qtm-colors-primary-700) !important; +} + +.icon-success { + color: var(--qtm-colors-success-900) !important; +} + +.icon-warning { + color: var(--qtm-colors-warning-700) !important; +} + +.icon-error { + color: var(--qtm-colors-error-700) !important; +} + +.close-button { + height: auto; + padding: 0; + transition: opacity 0.4s ease; + width: auto; + margin: 0 0 0 var(--qtm-spacing-medium) !important; + min-height: 0; + opacity: 1; +} + +.close-button:hover { + background: none; +} + +.wrapper { + border-radius: 8px; + box-sizing: border-box; + font-size: var(--qtm-base-font-size); + padding: var(--qtm-spacing-small) var(--qtm-spacing-medium); +} + +.wrapper-neutral { + background-color: var(--qtm-colors-neutral-300); + border: 1.5px solid var(--qtm-colors-neutral-700); + color: var(--qtm-colors-neutral-700); +} + +.wrapper-primary { + background-color: var(--qtm-colors-primary-100); + border: 1.5px solid var(--qtm-colors-primary-700); + color: var(--qtm-colors-neutral-700); +} + +.wrapper-success { + background-color: var(--qtm-colors-success-100); + border: 1.5px solid var(--qtm-colors-success-900); + color: var(--qtm-colors-success-900); +} + +.wrapper-warning { + background-color: var(--qtm-colors-warning-100); + border: 1.5px solid var(--qtm-colors-warning-700); + color: var(--qtm-colors-neutral-700); +} + +.wrapper-error { + background-color: var(--qtm-colors-error-100); + border: 1.5px solid var(--qtm-colors-error-700); + color: var(--qtm-colors-error-900); +} \ No newline at end of file diff --git a/components/Alert/__snapshots__/Alert.unit.test.jsx.snap b/components/Alert/__snapshots__/Alert.unit.test.jsx.snap index ac8843c40..b5eb75526 100644 --- a/components/Alert/__snapshots__/Alert.unit.test.jsx.snap +++ b/components/Alert/__snapshots__/Alert.unit.test.jsx.snap @@ -72,88 +72,54 @@ exports[`Alert component Should match a skin snapshot 1`] = ` color: var(--qtm-colors-neutral-500); } -.c2 { - -webkit-align-items: start; - -webkit-box-align: start; - -ms-flex-align: start; +.Alert-module__content___dWn0E { align-items: start; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; } -.c2 > span { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; +.Alert-module__icon-neutral___Be4pp { + color: var(--qtm-colors-neutral-700)!important; } -.c4 { +.Alert-module__close-button___d9UE7 { height: auto; - opacity: 0.8; + margin: 0 0 0 var(--qtm-spacing-medium)!important; + min-height: 0; + opacity: 1; padding: 0; - -webkit-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; + transition: opacity .4s ease; width: auto; } -.c4:hover { - background: none; - opacity: 1; -} - -.c0 { +.Alert-module__wrapper___wtuwZ { border-radius: 8px; box-sizing: border-box; - font-size: 16px; - background-color: #e0e0e0; - border: 1.5px solid #424242; - color: #424242; - padding: 12px 16px; -} - -.c0 .c1 > .c3 { - color: #424242; - margin: 0 0 0 16px !important; - min-height: 0; - opacity: 1; + font-size: var(--qtm-base-font-size); + padding: var(--qtm-spacing-small) var(--qtm-spacing-medium); } -.c5 .c1 > .c3 { - color: #1250C4; - margin: 0 0 0 16px !important; - min-height: 0; - opacity: 1; +.Alert-module__wrapper-neutral___dsh9K { + background-color: var(--qtm-colors-neutral-300); + border: 1.5px solid var(--qtm-colors-neutral-700); } -.c6 .c1 > .c3 { - color: #004D40; - margin: 0 0 0 16px !important; - min-height: 0; - opacity: 1; -} - -.c7 .c1 > .c3 { - color: #f09100; - margin: 0 0 0 16px !important; - min-height: 0; - opacity: 1; +.Alert-module__wrapper-neutral___dsh9K, +.Alert-module__wrapper-primary___G3O8Y { + color: var(--qtm-colors-neutral-700); }