feat(divider): add component

components/divider/divider.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react'
+import useTheme from '../styles/use-theme'
+import withDefaults from '../utils/with-defaults'
+import { DividerAlign, SnippetTypes } from '../utils/prop-types'
+import { getMargin } from '../spacer/spacer'
+import { ZeitUIThemesPalette } from 'components/styles/themes'
+
+export type DividerTypes = SnippetTypes
+
+interface Props {
+  x?: number
+  y?: number
+  volume?: number
+  type?: DividerTypes
+  align?: DividerAlign
+  className?: string
+}
+
+const defaultProps = {
+  x: 0,
+  y: 2,
+  volume: 1,
+  align: 'center' as DividerAlign,
+  type: 'default' as DividerTypes,
+  className: '',
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type DividerProps = Props & typeof defaultProps & NativeAttrs
+
+const getColor = (type: DividerTypes, palette: ZeitUIThemesPalette) => {
+  const colors: { [key in DividerTypes]: string } = {
+    default: palette.border,
+    lite: palette.accents_1,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    secondary: palette.secondary,
+    dark: palette.foreground,
+  }
+  return colors[type]
+}
+
+const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
+  volume, type, x, y, align, children, className, ...props
+}) => {
+  const theme = useTheme()
+  const color = useMemo(() => getColor(type, theme.palette), [type, theme.palette])
+  const alignClassName = useMemo(() => {
+    if (!align || align === 'center') return ''
+    if (align === 'left' || align === 'start') return 'start'
+    return 'end'
+  }, [align])
+  const textColor = type === 'default' ? theme.palette.foreground : color
+  const top = y ? getMargin(y / 2) : 0
+  const left = x ? getMargin(x / 2) : 0
+  
+  return (
+    <div role="separator" className={`divider ${className}`} {...props}>
+      {children && <span className={`text ${alignClassName}`}>{children}</span>}
+      <style jsx>{`
+        .divider {
+          width: auto;
+          max-width: 100%;
+          height: calc(${volume} * 1px);
+          background-color: ${color};
+          margin: ${top} ${left};
+          position: relative;
+        }
+        
+        .text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          min-height: 100%;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          transform: translate(-50%, -50%);
+          padding: 0 ${theme.layout.gap};
+          font-size: 1rem;
+          font-weight: bold;
+          text-transform: capitalize;
+          background-color: ${theme.palette.background};
+          color: ${textColor};
+          z-index: 10;
+        }
+        
+        .text.start {
+          transform: translateY(-50%);
+          left: 7%;
+        }
+        
+        .text.end {
+          transform: translateY(-50%);
+          left: auto;
+          right: 7%;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default withDefaults(Divider, defaultProps)

components/divider/index.ts

@@ -0,0 +1,3 @@
+import Divider from './divider'
+
+export default Divider

components/index.ts

@@ -48,3 +48,4 @@ export { default as Snippet } from './snippet'
 export { default as Tooltip } from './tooltip'
 export { default as Popover } from './popover'
 export { default as Slider } from './slider'
+export { default as Divider } from './divider'

components/utils/prop-types.ts

@@ -80,6 +80,14 @@ const placement = tuple(
   'rightEnd',
 )
 
+const dividerAlign = tuple(
+  'start',
+  'center',
+  'end',
+  'left',
+  'right',
+)
+
 export type ButtonTypes = typeof buttonTypes[number]
 
 export type NormalSizes = typeof normalSizes[number]
@@ -97,3 +105,5 @@ export type CopyTypes = typeof copyTypes[number]
 export type TriggerTypes = typeof triggerTypes[number]
 
 export type Placement = typeof placement[number]
+
+export type DividerAlign = typeof dividerAlign[number]