Merge pull request #564 from catho/QTM-650

feat(QTM-650): Converted styles from styled components to CSS modules

components/Badge/Badge.jsx

@@ -1,117 +1,33 @@
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import {
-  components,
-  spacing,
-  baseFontSize as defaultBaseFontSize,
-} from '../shared/theme';
-
-const getColors = ({
-  skin,
-  theme: {
-    components: {
-      badge: {
-        skins: { [skin]: badgeColor },
-      },
-    },
-  },
-  inverted,
-}) => {
-  if (inverted) {
-    const [text, background] = [badgeColor.background, badgeColor.text];
-    return css`
-      background-color: ${background};
-      color: ${text};
-    `;
-  }
-  return css`
-    background-color: ${badgeColor.background};
-    color: ${badgeColor.text};
-  `;
-};
-
-const BadgeWrapper = styled.div`
-  display: inline-block;
-
-  ${(props) =>
-    props.originalChildren
-      ? `position: relative;`
-      : `margin-left: 8px; margin-right: 8px;`}
-`;
-
-const StyledBadge = styled.span`
-  border-radius: 8px;
-  box-sizing: border-box;
-  display: flex;
-  font-weight: bold;
-  height: 24px;
-  line-height: 24px;
-  min-width: 32px;
-  align-items: center;
-  justify-content: center;
-
-  ${({
-    value,
-    theme: {
-      spacing: { xxxsmall, xxsmall },
-      baseFontSize,
-    },
-    number,
-  }) => {
-    const padding =
-      !Number.isInteger(value) || number >= 10 ? xxsmall : xxxsmall;
-
-    return `
-        font-size: ${baseFontSize * 0.75}px;
-        padding-left: ${padding}px;
-        padding-right: ${padding}px;
-      `;
-  }}
-
-  ${(props) =>
-    props.originalChildren &&
-    `
-    position: absolute;
-    right: -10px;
-    top: -10px;
-  `}
-
-  ${(props) =>
-    props.dot &&
-    `
-    right: -2px;
-    top: 0;
-    height: 12px;
-    width: 12px;
-    min-width: 12px;
-  `}
-
-  ${getColors}
-`;
+import classNames from 'classnames';
+import styles from './Badge.module.css';
 
 /** This components is used to display only `Numbers`. If you want to pass a string, use `<Tag />` component instead */
-const Badge = ({ children, number, skin, inverted, dot, theme }) => {
+const Badge = ({ className, children, number, skin, inverted, dot }) => {
   const value = number > 99 ? '99+' : number;
+  const wrapperClass = classNames(
+    styles.wrapper,
+    {
+      [styles['wrapper-content']]: children,
+    },
+    className,
+  );
+
+  const badgeClass = classNames(styles.badge, styles[`badge-skin-${skin}`], {
+    [styles['badge-xxsmall']]: !Number.isInteger(value),
+    [styles['badge-content']]: children,
+    [styles['badge-dot']]: dot,
+    [styles[`badge-skin-${skin}-inverted`]]: inverted,
+  });
 
   return (
-    <BadgeWrapper value={value} originalChildren={children}>
-      <StyledBadge
-        skin={skin}
-        inverted={inverted}
-        theme={theme}
-        value={value}
-        originalChildren={children}
-        dot={dot}
-      >
-        {dot || value}
-      </StyledBadge>
+    <div className={wrapperClass}>
+      <span className={badgeClass}>{dot || value}</span>
       {children}
-    </BadgeWrapper>
+    </div>
   );
 };
 
-BadgeWrapper.displayName = 'BadgeWrapper';
-StyledBadge.displayName = 'StyledBadge';
 Badge.displayName = 'Badge';
 
 Badge.propTypes = {
@@ -134,13 +50,6 @@ Badge.propTypes = {
   inverted: PropTypes.bool,
   /** Shows only a dot, without any number. */
   dot: PropTypes.bool,
-  theme: PropTypes.shape({
-    baseFontSize: PropTypes.number,
-    spacing: PropTypes.object,
-    components: PropTypes.shape({
-      badge: PropTypes.object,
-    }),
-  }),
 };
 
 Badge.defaultProps = {
@@ -149,13 +58,6 @@ Badge.defaultProps = {
   children: '',
   number: 0,
   dot: false,
-  theme: {
-    baseFontSize: defaultBaseFontSize,
-    spacing,
-    components: {
-      badge: components.badge,
-    },
-  },
 };
 
 export default Badge;

components/Badge/Badge.module.css

@@ -0,0 +1,95 @@
+.wrapper {
+    display: inline-block;
+    margin-left: var(--qtm-spacing-xsmall);
+    margin-right: var(--qtm-spacing-xsmall);
+}
+
+.wrapper-content {
+    position: relative;
+    margin-left: initial;
+    margin-right: initial;
+}
+
+.badge {
+    border-radius: 8px;
+    box-sizing: border-box;
+    display: flex;
+    font-weight: bold;
+    height: 24px;
+    line-height: 24px;
+    min-width: 32px;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(var(--qtm-base-font-size) * 0.75);
+    padding-left: var(--qtm-spacing-xxxsmall);
+    padding-right: var(--qtm-spacing-xxxsmall);
+}
+
+.badge-xxsmall {
+    padding-left: var(--qtm-spacing-xxsmall);
+    padding-right: var(--qtm-spacing-xxsmall);
+}
+
+.badge-content {
+    position: absolute;
+    right: -10px;
+    top: -10px;
+}
+
+.badge-dot {
+    right: -2px;
+    top: 0;
+    height: 12px;
+    width: 12px;
+    min-width: 12px;
+}
+
+.badge-skin-neutral {
+    background-color: var(--qtm-colors-neutral-100);
+    color: var(--qtm-colors-neutral-700);
+}
+
+.badge-skin-primary {
+    background-color: var(--qtm-colors-primary-700);
+    color: var(--qtm-colors-neutral-100);
+}
+
+.badge-skin-secondary {
+    background-color: var(--qtm-colors-secondary-500);
+    color: var(--qtm-colors-neutral-0);
+}
+
+.badge-skin-error {
+    background-color: var(--qtm-colors-error-500);
+    color: var(--qtm-colors-neutral-100);
+}
+
+.badge-skin-success {
+    background-color: var(--qtm-colors-success-100);
+    color: var(--qtm-colors-success-900);
+}
+
+.badge-skin-neutral-inverted {
+    background-color: var(--qtm-colors-neutral-700);
+    color: var(--qtm-colors-neutral-100);
+}
+
+.badge-skin-primary-inverted {
+    background-color: var(--qtm-colors-neutral-100);
+    color: var(--qtm-colors-primary-700);
+}
+
+.badge-skin-secondary-inverted {
+    background-color: var(--qtm-colors-neutral-0);
+    color: var(--qtm-colors-secondary-500);
+}
+
+.badge-skin-error-inverted {
+    background-color: var(--qtm-colors-neutral-100);
+    color: var(--qtm-colors-error-500);
+}
+
+.badge-skin-success-inverted {
+    background-color: var(--qtm-colors-success-900);
+    color: var(--qtm-colors-success-100);
+}

components/Badge/Badge.unit.test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import Badge from './Badge';
 import Button from '../Button';
@@ -36,22 +36,15 @@ describe('<Badge />', () => {
     it('it should contain dot style', () => {
       const { container } = render(<Badge dot />);
 
-      const spanDot = container.querySelector('span');
-      expect(spanDot).toHaveStyle({
-        right: '-2px',
-        top: '0',
-        height: '12px',
-        width: '12px',
-        'min-width': '12px',
-      });
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     it('it should contain +99 in the value when number is bigger than 99', () => {
-      const { container } = render(<Badge number={100} />);
+      render(<Badge number={100} />);
 
-      const spanDot = container.querySelector('span');
+      const spanDot = screen.getByText('99+');
 
-      expect(spanDot.getAttribute('value')).toEqual('99+');
+      expect(spanDot).toBeInTheDocument();
     });
   });
 });