✨Divider thickness option (#2519)

* ✨Divider: Added thickness prop * 📸 Update snapshot * 📸Banner: update snapshot * rename thickness to size
equinor · Sep 28, 2022 · 38888e1 · 38888e1
1 parent 4d9cd76
commit 38888e1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 34 deletions.
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
@@ -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
@@ -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
@@ -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<StyleProps>`
-  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<StyleProps>(
+  ({ 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<HTMLHRElement>
 
 export const Divider = forwardRef<HTMLHRElement, DividerProps>(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<HTMLHRElement, DividerProps>(function Divider(
     backgroundColor: divider[colorValue].background,
     marginTop: tokens[variant].spacings.top,
     marginBottom: tokens[variant].spacings.bottom,
-    dividerHeight: baseDivider.height,
+    dividerHeight: parseInt(size),
     ...rest,
   }
   return <StyledDivider {...props} ref={ref} />

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
@@ -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;
 }