feat(progress): add component

components/progress/index.ts

@@ -0,0 +1,3 @@
+import Progress from './progress'
+
+export default Progress

components/progress/progress.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import withDefaults from '../utils/with-defaults'
+import useTheme from '../styles/use-theme'
+import { useProportions } from '../utils/calculations'
+import { ZeitUIThemesPalette } from 'components/styles/themes'
+import { NormalTypes } from 'components/utils/prop-types'
+
+export type ProgressColors = {
+  [key: number]: string
+}
+
+interface Props {
+  value?: number
+  max?: number
+  fixedTop?: boolean
+  fixedBottom?: boolean
+  colors?: ProgressColors
+  type?: NormalTypes
+  className?: ''
+}
+
+const defaultProps = {
+  value: 0,
+  max: 100,
+  type: 'default' as NormalTypes,
+  fixedTop: false,
+  fixedBottom: false,
+  className: '',
+}
+
+export type ProgressProps = Props & typeof defaultProps & React.ProgressHTMLAttributes<any>
+
+const getCurrentColor = (
+  ratio: number,
+  palette: ZeitUIThemesPalette,
+  type: NormalTypes,
+  colors: ProgressColors = {},
+): string => {
+  const defaultColors: { [key in NormalTypes]: string } = {
+    default: palette.foreground,
+    success: palette.success,
+    secondary: palette.secondary,
+    warning: palette.warning,
+    error: palette.error,
+  }
+  const colorKeys = Object.keys(colors)
+  if (colorKeys.length === 0) return defaultColors[type]
+
+  const customColorKey = colorKeys.find(key => ratio <= +key)
+  console.log(customColorKey)
+  if (!customColorKey || Number.isNaN(+customColorKey)) return defaultColors[type]
+  return colors[+customColorKey]
+}
+
+const Progress: React.FC<ProgressProps> = ({
+  value, max, className, type, colors, fixedTop, fixedBottom, ...props
+}) => {
+  const theme = useTheme()
+  const percentValue = useProportions(value, max)
+  const currentColor = getCurrentColor(percentValue, theme.palette, type, colors)
+  const fixed = fixedTop || fixedBottom
+  
+  return (
+    <div className={`progress ${className} ${fixed ? 'fixed' : ''}`}>
+      <div className="inner" title={`${percentValue}%`} />
+      <progress className={className} value={value} max={max} {...props} />
+      <style jsx>{`
+        progress {
+          position: fixed;
+          top: -1000px;
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+        }
+
+        .progress {
+          position: relative;
+          width: 100%;
+          height: .625rem;
+          background-color: ${theme.palette.accents_2};
+          border-radius: ${theme.layout.radius};
+        }
+        
+        .fixed {
+          position: fixed;
+          top: ${fixedTop ? 0 : 'unset'};
+          bottom: ${fixedBottom ? 0 : 'unset'};
+          left: 0;
+          border-radius: 0;
+        }
+        
+        .fixed > .inner {
+          border-radius: 0;
+        }
+
+        .inner {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          bottom: 0;
+          transition: all 100ms ease-in;
+          border-radius: ${theme.layout.radius};
+          background-color: ${currentColor};
+          width: ${percentValue}%;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default withDefaults(Progress, defaultProps)