diff --git a/components/Badge/Badge.jsx b/components/Badge/Badge.jsx index c8cac5c18..082acbca5 100644 --- a/components/Badge/Badge.jsx +++ b/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 `` 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 ( - - - {dot || value} - +
+ {dot || value} {children} - +
); }; -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; diff --git a/components/Badge/Badge.module.css b/components/Badge/Badge.module.css new file mode 100644 index 000000000..3f17cd136 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/components/Badge/Badge.unit.test.jsx b/components/Badge/Badge.unit.test.jsx index 7015be60f..b1001c945 100644 --- a/components/Badge/Badge.unit.test.jsx +++ b/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('', () => { it('it should contain dot style', () => { const { container } = render(); - 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(); + render(); - const spanDot = container.querySelector('span'); + const spanDot = screen.getByText('99+'); - expect(spanDot.getAttribute('value')).toEqual('99+'); + expect(spanDot).toBeInTheDocument(); }); }); }); diff --git a/components/Badge/__snapshots__/Badge.unit.test.jsx.snap b/components/Badge/__snapshots__/Badge.unit.test.jsx.snap index 38eb303b2..8f5631c2f 100644 --- a/components/Badge/__snapshots__/Badge.unit.test.jsx.snap +++ b/components/Badge/__snapshots__/Badge.unit.test.jsx.snap @@ -1,87 +1,127 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` Should match snapshot With number 1`] = ` -.c0 { +.Badge-module__wrapper___Owq-B { display: inline-block; - margin-left: 8px; - margin-right: 8px; + margin-left: var(--qtm-spacing-xsmall); + margin-right: var(--qtm-spacing-xsmall); } -.c1 { +.Badge-module__badge___vNFzU { + align-items: center; border-radius: 8px; box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - font-weight: bold; + font-size: calc(var(--qtm-base-font-size)*.75); + font-weight: 700; height: 24px; + justify-content: center; line-height: 24px; min-width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 12px; - padding-left: 2px; - padding-right: 2px; - background-color: #f2f2f2; - color: #424242; + padding-left: var(--qtm-spacing-xxxsmall); + padding-right: var(--qtm-spacing-xxxsmall); +} + +.Badge-module__badge-skin-neutral___J8kXp { + background-color: var(--qtm-colors-neutral-100); + color: var(--qtm-colors-neutral-700); }
10
`; -exports[` Should match snapshot with children 1`] = ` -.c0 { +exports[` Should match snapshot it should contain dot style 1`] = ` +.Badge-module__wrapper___Owq-B { display: inline-block; - position: relative; + margin-left: var(--qtm-spacing-xsmall); + margin-right: var(--qtm-spacing-xsmall); } -.c1 { +.Badge-module__badge___vNFzU { + align-items: center; border-radius: 8px; box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - font-weight: bold; + font-size: calc(var(--qtm-base-font-size)*.75); + font-weight: 700; height: 24px; + justify-content: center; line-height: 24px; min-width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; + padding-left: var(--qtm-spacing-xxxsmall); + padding-right: var(--qtm-spacing-xxxsmall); +} + +.Badge-module__badge-dot___h5kxC { + height: 12px; + min-width: 12px; + right: -2px; + top: 0; + width: 12px; +} + +.Badge-module__badge-skin-neutral___J8kXp { + background-color: var(--qtm-colors-neutral-100); + color: var(--qtm-colors-neutral-700); +} + +
+ +
+`; + +exports[` Should match snapshot with children 1`] = ` +.Badge-module__wrapper___Owq-B { + display: inline-block; + margin-left: var(--qtm-spacing-xsmall); + margin-right: var(--qtm-spacing-xsmall); +} + +.Badge-module__wrapper-content___CkcNl { + margin-left: 0; + margin-right: 0; + position: relative; +} + +.Badge-module__badge___vNFzU { align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; + border-radius: 8px; + box-sizing: border-box; + display: flex; + font-size: calc(var(--qtm-base-font-size)*.75); + font-weight: 700; + height: 24px; justify-content: center; - font-size: 12px; - padding-left: 2px; - padding-right: 2px; + line-height: 24px; + min-width: 32px; + padding-left: var(--qtm-spacing-xxxsmall); + padding-right: var(--qtm-spacing-xxxsmall); +} + +.Badge-module__badge-content___TxPZt { position: absolute; right: -10px; top: -10px; - background-color: #f2f2f2; - color: #424242; } -.c2 { +.Badge-module__badge-skin-neutral___J8kXp { + background-color: var(--qtm-colors-neutral-100); + color: var(--qtm-colors-neutral-700); +} + +.c0 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -110,79 +150,69 @@ exports[` Should match snapshot with children 1`] = ` box-shadow: 0px 3px 1px -2px rgba(153,153,153,0.2),0px 2px 2px 0px rgba(153,153,153,0.14),0px 1px 5px 0px rgba(153,153,153,0.12); } -.c2:hover { +.c0:hover { box-shadow: 0px 2px 4px -1px rgba(0,47,123,0.2),0px 4px 5px 0px rgba(0,47,123,0.14),0px 1px 10px 0px rgba(0,47,123,0.12); background-color: #002F7B; border-color: #002F7B; } -.c2:focus, -.c2:focus-within { +.c0:focus, +.c0:focus-within { box-shadow: 0px 2px 4px -1px rgba(18,80,196,0.2),0px 4px 5px 0px rgba(18,80,196,0.14),0px 1px 10px 0px rgba(18,80,196,0.12); } -.c2:active { +.c0:active { box-shadow: 0px 5px 5px -3px rgba(0,47,123,0.2),0px 8px 10px 1px rgba(0,47,123,0.14),0px 3px 14px 2px rgba(0,47,123,0.12); background-color: #002F7B; }
10
`; exports[` Should match snapshot with skin 1`] = ` -.c0 { +.Badge-module__wrapper___Owq-B { display: inline-block; - margin-left: 8px; - margin-right: 8px; + margin-left: var(--qtm-spacing-xsmall); + margin-right: var(--qtm-spacing-xsmall); } -.c1 { +.Badge-module__badge___vNFzU { + align-items: center; border-radius: 8px; box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - font-weight: bold; + font-size: calc(var(--qtm-base-font-size)*.75); + font-weight: 700; height: 24px; + justify-content: center; line-height: 24px; min-width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 12px; - padding-left: 2px; - padding-right: 2px; - background-color: #dcedc8; - color: #004D40; + padding-left: var(--qtm-spacing-xxxsmall); + padding-right: var(--qtm-spacing-xxxsmall); +} + +.Badge-module__badge-skin-success___lADyt { + background-color: var(--qtm-colors-success-100); + color: var(--qtm-colors-success-900); }
10 @@ -190,45 +220,42 @@ exports[` Should match snapshot with skin 1`] = ` `; exports[` Should match snapshot with skin inverted 1`] = ` -.c0 { +.Badge-module__wrapper___Owq-B { display: inline-block; - margin-left: 8px; - margin-right: 8px; + margin-left: var(--qtm-spacing-xsmall); + margin-right: var(--qtm-spacing-xsmall); } -.c1 { +.Badge-module__badge___vNFzU { + align-items: center; border-radius: 8px; box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - font-weight: bold; + font-size: calc(var(--qtm-base-font-size)*.75); + font-weight: 700; height: 24px; + justify-content: center; line-height: 24px; min-width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 12px; - padding-left: 2px; - padding-right: 2px; - background-color: #424242; - color: #f2f2f2; + padding-left: var(--qtm-spacing-xxxsmall); + padding-right: var(--qtm-spacing-xxxsmall); +} + +.Badge-module__badge-skin-neutral___J8kXp { + background-color: var(--qtm-colors-neutral-100); + color: var(--qtm-colors-neutral-700); +} + +.Badge-module__badge-skin-neutral-inverted___RrIBf { + background-color: var(--qtm-colors-neutral-700); + color: var(--qtm-colors-neutral-100); }
10 diff --git a/components/Badge/index.css b/components/Badge/index.css new file mode 100644 index 000000000..a8ad664b3 --- /dev/null +++ b/components/Badge/index.css @@ -0,0 +1 @@ +@import "./Badge.module.css"; \ No newline at end of file diff --git a/components/Badge/index.d.ts b/components/Badge/index.d.ts index 6a65d8e71..5f917e33f 100644 --- a/components/Badge/index.d.ts +++ b/components/Badge/index.d.ts @@ -6,13 +6,6 @@ export interface BadgeProps { number?: number; inverted?: boolean; dot?: boolean; - theme?: { - baseFontSize?: number; - spacing?: {}; - components?: { - badge?: {}; - }; - }; } declare const Badge: FC; diff --git a/components/TabbedView/__snapshots__/TabbedView.unit.test.jsx.snap b/components/TabbedView/__snapshots__/TabbedView.unit.test.jsx.snap index b024bcdfa..483cb3b39 100644 --- a/components/TabbedView/__snapshots__/TabbedView.unit.test.jsx.snap +++ b/components/TabbedView/__snapshots__/TabbedView.unit.test.jsx.snap @@ -105,6 +105,32 @@ exports[` Snapshot should match snapshot 1`] = ` `; exports[` Snapshot should match snapshot with badges and icons 1`] = ` +.Badge-module__wrapper___Owq-B { + display: inline-block; + margin-left: var(--qtm-spacing-xsmall); + margin-right: var(--qtm-spacing-xsmall); +} + +.Badge-module__badge___vNFzU { + align-items: center; + border-radius: 8px; + box-sizing: border-box; + display: flex; + font-size: calc(var(--qtm-base-font-size)*.75); + font-weight: 700; + height: 24px; + justify-content: center; + line-height: 24px; + min-width: 32px; + padding-left: var(--qtm-spacing-xxxsmall); + padding-right: var(--qtm-spacing-xxxsmall); +} + +.Badge-module__badge-skin-neutral___J8kXp { + background-color: var(--qtm-colors-neutral-100); + color: var(--qtm-colors-neutral-700); +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -189,7 +215,7 @@ exports[` Snapshot should match snapshot with badges and icons 1` vertical-align: top; } -.c6 { +.c4 { display: inline-block; height: 24px; margin-left: 0px; @@ -197,38 +223,6 @@ exports[` Snapshot should match snapshot with badges and icons 1` width: 24px; } -.c4 { - display: inline-block; - margin-left: 8px; - margin-right: 8px; -} - -.c5 { - border-radius: 8px; - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - font-weight: bold; - height: 24px; - line-height: 24px; - min-width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 12px; - padding-left: 2px; - padding-right: 2px; - background-color: #f2f2f2; - color: #424242; -} - @media (min-width:1024px) { .c0 { overflow-x: auto; @@ -255,12 +249,10 @@ exports[` Snapshot should match snapshot with badges and icons 1` class="c3" >
4 @@ -275,7 +267,7 @@ exports[` Snapshot should match snapshot with badges and icons 1` role="tab" >
Snapshot should match snapshot with badges and icons 1` role="tab" >
Snapshot should match snapshot with badges and icons 1` class="c3" >
4 diff --git a/components/index.css b/components/index.css index 50b15f4a6..321b3c153 100644 --- a/components/index.css +++ b/components/index.css @@ -13,3 +13,4 @@ @import "./Grid/index.css"; @import "./CircularLoader/index.css"; @import "./Skeleton/index.css"; +@import "./Badge/index.css"; diff --git a/components/shared/theme.d.ts b/components/shared/theme.d.ts index 009b9530b..036000572 100644 --- a/components/shared/theme.d.ts +++ b/components/shared/theme.d.ts @@ -109,38 +109,6 @@ export interface componentsProps { }; }; }; - badge: { - skins: { - neutral: { - background: colorsProps["neutral"][100]; - text: colorsProps["neutral"][700]; - }; - primary: { - background: colorsProps["primary"][700]; - text: colorsProps["neutral"][100]; - }; - secondary: { - background: colorsProps["secondary"][500]; - text: colorsProps["neutral"][0]; - }; - error: { - background: colorsProps["error"][500]; - text: colorsProps["neutral"][100]; - }; - success: { - background: colorsProps["success"][100]; - text: colorsProps["success"][900]; - }; - }; - }; - container: { - breakpoints: { - xsmall: string; - small: string; - medium: string; - large: string; - }; - }; tag: { skins: { neutral: { diff --git a/components/shared/theme.js b/components/shared/theme.js index 767b91098..81c4dae0f 100644 --- a/components/shared/theme.js +++ b/components/shared/theme.js @@ -109,38 +109,6 @@ const components = { }, }, }, - badge: { - skins: { - neutral: { - background: colors.neutral[100], - text: colors.neutral[700], - }, - primary: { - background: colors.primary[700], - text: colors.neutral[100], - }, - secondary: { - background: colors.secondary[500], - text: colors.neutral[0], - }, - error: { - background: colors.error[500], - text: colors.neutral[100], - }, - success: { - background: colors.success[100], - text: colors.success[900], - }, - }, - }, - container: { - breakpoints: { - xsmall: '100%,', - small: '100%', - medium: '1024px', - large: '1440px', - }, - }, tag: { skins: { neutral: {