Skip to content

Commit 5ab42c3

Browse files
MarcosViniciusPCMarcosViniciusPC
authored
Merge pull request #595 from catho/QTM-717
feat(QTM-717): Migrated to css modules
2 parents 6e55277 + b586b06 commit 5ab42c3

File tree

8 files changed

+251
-547
lines changed

8 files changed

+251
-547
lines changed

‎components/Alert/Alert.jsx

+22-99
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,26 @@
11
import { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import styled from 'styled-components';
3+
import classNames from 'classnames';
44
import Button from '../Button';
55
import Icon from '../Icon';
6-
import {
7-
components,
8-
spacing,
9-
colors,
10-
baseFontSize as defaultBaseFontSize,
11-
breakpoints,
12-
} from '../shared/theme';
13-
14-
const Content = styled.div`
15-
align-items: start;
16-
display: flex;
17-
18-
& > span {
19-
flex: 1;
20-
}
21-
`;
22-
23-
const AlertIcon = styled(Icon)`
24-
width: ${defaultBaseFontSize * 1.5}px;
25-
`;
26-
27-
const CloseButton = styled(Button.Icon).attrs({
28-
icon: 'close',
29-
})`
30-
height: auto;
31-
opacity: 0.8;
32-
padding: 0;
33-
transition: opacity 0.4s ease;
34-
width: auto;
35-
36-
&:hover {
37-
background: none;
38-
opacity: 1;
39-
}
40-
`;
41-
42-
CloseButton.displayName = 'CloseButton';
43-
44-
const Wrapper = styled.div`
45-
border-radius: 8px;
46-
box-sizing: border-box;
47-
48-
${({
49-
skin,
50-
theme: {
51-
baseFontSize,
52-
spacing: { small, medium },
53-
components: {
54-
alert: {
55-
skins: {
56-
[skin]: { background, icon, text },
57-
},
58-
},
59-
},
60-
},
61-
}) => `
62-
font-size: ${baseFontSize}px;
63-
background-color: ${background};
64-
border: 1.5px solid ${icon};
65-
color: ${text};
66-
padding: ${small}px ${medium}px;
67-
68-
${Content} ${AlertIcon} {
69-
color: ${icon};
70-
margin-right: ${medium}px;
71-
}
72-
73-
${Content} > ${CloseButton} {
74-
color: ${icon};
75-
margin: 0 0 0 ${medium}px !important;
76-
min-height: 0;
77-
opacity: 1;
78-
}
79-
`}
80-
`;
6+
import styles from './Alert.module.css';
817

828
const Alert = ({
839
icon = null,
8410
skin = 'neutral',
8511
children,
86-
theme = {
87-
colors,
88-
baseFontSize: defaultBaseFontSize,
89-
spacing,
90-
breakpoints,
91-
components: {
92-
alert: components.alert,
93-
},
94-
},
9512
onClose = undefined,
13+
className,
9614
...rest
9715
}) => {
9816
const [show, setShow] = useState(true);
17+
const contentClass = classNames(styles.content, className);
18+
const alertClass = classNames(styles['alert-icon'], styles[`icon-${skin}`]);
19+
const closeButtonClass = classNames(
20+
styles['close-button'],
21+
styles[`icon-${skin}`],
22+
);
23+
const wrapperClass = classNames(styles.wrapper, styles[`wrapper-${skin}`]);
9924

10025
const handleClose = () => {
10126
setShow(false);
@@ -104,13 +29,19 @@ const Alert = ({
10429

10530
return (
10631
show && (
107-
<Wrapper theme={theme} skin={skin} {...rest} role="alert">
108-
<Content>
109-
{icon && <AlertIcon name={icon} />}
32+
<div className={wrapperClass} {...rest} role="alert">
33+
<div className={contentClass}>
34+
{icon && <Icon name={icon} className={alertClass} />}
11035
{children && <span>{children}</span>}
111-
{onClose && <CloseButton theme={theme} onClick={handleClose} />}
112-
</Content>
113-
</Wrapper>
36+
{onClose && (
37+
<Button.Icon
38+
onClick={handleClose}
39+
icon="close"
40+
className={closeButtonClass}
41+
/>
42+
)}
43+
</div>
44+
</div>
11445
)
11546
);
11647
};
@@ -124,14 +55,6 @@ Alert.propTypes = {
12455
/** You must pass a callback that is called when close button is clicked */
12556
onClose: PropTypes.func,
12657
skin: PropTypes.oneOf(['primary', 'success', 'error', 'neutral', 'warning']),
127-
theme: PropTypes.shape({
128-
baseFontSize: PropTypes.number,
129-
colors: PropTypes.object,
130-
spacing: PropTypes.object,
131-
components: PropTypes.shape({
132-
alert: PropTypes.object,
133-
}),
134-
}),
13558
};
13659

13760
export default Alert;

‎components/Alert/Alert.module.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.content {
2+
align-items: start;
3+
display: flex;
4+
}
5+
6+
.content>span {
7+
flex: 1;
8+
}
9+
10+
.alert-icon {
11+
width: calc(var(--qtm-base-font-size) * 1.5);
12+
margin-right: var(--qtm-spacing-medium);
13+
}
14+
15+
.icon-neutral {
16+
color: var(--qtm-colors-neutral-700) !important;
17+
}
18+
19+
.icon-primary {
20+
color: var(--qtm-colors-primary-700) !important;
21+
}
22+
23+
.icon-success {
24+
color: var(--qtm-colors-success-900) !important;
25+
}
26+
27+
.icon-warning {
28+
color: var(--qtm-colors-warning-700) !important;
29+
}
30+
31+
.icon-error {
32+
color: var(--qtm-colors-error-700) !important;
33+
}
34+
35+
.close-button {
36+
height: auto;
37+
padding: 0;
38+
transition: opacity 0.4s ease;
39+
width: auto;
40+
margin: 0 0 0 var(--qtm-spacing-medium) !important;
41+
min-height: 0;
42+
opacity: 1;
43+
}
44+
45+
.close-button:hover {
46+
background: none;
47+
}
48+
49+
.wrapper {
50+
border-radius: 8px;
51+
box-sizing: border-box;
52+
font-size: var(--qtm-base-font-size);
53+
padding: var(--qtm-spacing-small) var(--qtm-spacing-medium);
54+
}
55+
56+
.wrapper-neutral {
57+
background-color: var(--qtm-colors-neutral-300);
58+
border: 1.5px solid var(--qtm-colors-neutral-700);
59+
color: var(--qtm-colors-neutral-700);
60+
}
61+
62+
.wrapper-primary {
63+
background-color: var(--qtm-colors-primary-100);
64+
border: 1.5px solid var(--qtm-colors-primary-700);
65+
color: var(--qtm-colors-neutral-700);
66+
}
67+
68+
.wrapper-success {
69+
background-color: var(--qtm-colors-success-100);
70+
border: 1.5px solid var(--qtm-colors-success-900);
71+
color: var(--qtm-colors-success-900);
72+
}
73+
74+
.wrapper-warning {
75+
background-color: var(--qtm-colors-warning-100);
76+
border: 1.5px solid var(--qtm-colors-warning-700);
77+
color: var(--qtm-colors-neutral-700);
78+
}
79+
80+
.wrapper-error {
81+
background-color: var(--qtm-colors-error-100);
82+
border: 1.5px solid var(--qtm-colors-error-700);
83+
color: var(--qtm-colors-error-900);
84+
}

0 commit comments

Comments
 (0)