diff --git a/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap b/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap index 45a040b6c4..cf9d1ceb55 100644 --- a/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap +++ b/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap @@ -11,7 +11,7 @@ exports[`Banner Matches snapshot 1`] = ` border: none; background-color: var(--eds_ui_background__light,rgba(247,247,247,1)); margin-top: 16px; - margin-bottom: 15px; + margin-bottom: calc(16px - 1px); height: 1px; } diff --git a/packages/eds-core-react/src/components/Divider/Divider.tokens.ts b/packages/eds-core-react/src/components/Divider/Divider.tokens.ts index 0e7dfd93ae..e2052c4b3c 100644 --- a/packages/eds-core-react/src/components/Divider/Divider.tokens.ts +++ b/packages/eds-core-react/src/components/Divider/Divider.tokens.ts @@ -14,18 +14,6 @@ const { }, } = tokens -const dividerHeight = 1 - -const reduceByValue = (subtractValue: number) => (valueWithUnit: string) => { - const valueAndUnit = valueWithUnit - .split(/(\d+)/) - .filter((val) => val.length > 0) - - return `${parseInt(valueAndUnit[0]) - subtractValue}` + valueAndUnit[1] -} - -const reduceValueByDividerHeight = reduceByValue(dividerHeight) - type DividerToken = ComponentToken type DividerVariantsToken = { @@ -34,10 +22,6 @@ type DividerVariantsToken = { mediumColor: DividerToken } -export const baseDivider: DividerToken = { - height: `${dividerHeight}px`, -} - export const divider: DividerVariantsToken = { lighter: { background: lighter, @@ -51,17 +35,15 @@ export const divider: DividerVariantsToken = { } export const small: DividerToken = { - ...baseDivider, spacings: { top: spacingSmall, - bottom: reduceValueByDividerHeight(spacingSmall), + bottom: spacingSmall, }, } export const medium: DividerToken = { - ...baseDivider, spacings: { top: spacingMedium, - bottom: reduceValueByDividerHeight(spacingMedium), + bottom: spacingMedium, }, } diff --git a/packages/eds-core-react/src/components/Divider/Divider.tsx b/packages/eds-core-react/src/components/Divider/Divider.tsx index 5b20567e01..934bad2287 100644 --- a/packages/eds-core-react/src/components/Divider/Divider.tsx +++ b/packages/eds-core-react/src/components/Divider/Divider.tsx @@ -1,35 +1,41 @@ import { forwardRef, HTMLAttributes } from 'react' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import * as tokens from './Divider.tokens' -const { divider, baseDivider } = tokens +const { divider } = tokens type StyleProps = { backgroundColor: string marginTop: string marginBottom: string - dividerHeight: string + dividerHeight: number } -const StyledDivider = styled.hr` - border: none; - background-color: ${(props) => props.backgroundColor}; - margin-top: ${(props) => props.marginTop}; - margin-bottom: ${(props) => props.marginBottom}; - height: ${(props) => props.dividerHeight}; -` +const StyledDivider = styled.hr( + ({ backgroundColor, marginTop, marginBottom, dividerHeight }) => { + return css` + border: none; + background-color: ${backgroundColor}; + margin-top: ${marginTop}; + margin-bottom: calc(${marginBottom} - ${dividerHeight}px); + height: ${dividerHeight}px; + ` + }, +) export type DividerProps = { /** Color variants */ color?: 'lighter' | 'light' | 'medium' /** Vertical spacings */ variant?: 'small' | 'medium' + /** Divider thickness in px*/ + size?: '1' | '2' /** @ignore */ className?: string } & HTMLAttributes export const Divider = forwardRef(function Divider( - { color = 'medium', variant = 'medium', ...rest }, + { color = 'medium', variant = 'medium', size = '1', ...rest }, ref, ) { const colorValue = color === 'medium' ? 'mediumColor' : color @@ -38,7 +44,7 @@ export const Divider = forwardRef(function Divider( backgroundColor: divider[colorValue].background, marginTop: tokens[variant].spacings.top, marginBottom: tokens[variant].spacings.bottom, - dividerHeight: baseDivider.height, + dividerHeight: parseInt(size), ...rest, } return diff --git a/packages/eds-core-react/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/eds-core-react/src/components/Divider/__snapshots__/Divider.test.tsx.snap index 7bde72a05d..2292b57581 100644 --- a/packages/eds-core-react/src/components/Divider/__snapshots__/Divider.test.tsx.snap +++ b/packages/eds-core-react/src/components/Divider/__snapshots__/Divider.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Divider Matches snapshot 1`] = ` border: none; background-color: var(--eds_ui_background__medium,rgba(220,220,220,1)); margin-top: 16px; - margin-bottom: 15px; + margin-bottom: calc(16px - 1px); height: 1px; }