@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/LinearProgress/LinearProgress.js

@@ -11,28 +11,63 @@ import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, Compon
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const Bar = styled.div`
   flex: 1;
+  position: relative;
   height: 6px;
 
+  &.last:after {
+    content:'';
+    display: block;
+    position: absolute;
+    right: 0px;
+    border-radius: 50%;
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
+  }
+
   &.small {
     height: 6px;
+    &.last:after {
+      height: 6px;
+      width: 6px;
+    }
   }
 
   &.medium {
     height: 8px;
+    &.last:after {
+      height: 8px;
+      width: 8px;
+    }
   }
 
   &.large {
     height: 12px;
+    &.last:after {
+      height: 12px;
+      width: 12px;
+    }
   }
 
-  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
 
   &.active {
-    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'accent1'
+}, props.theme)};
   }
 
   &.current {
-    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
   }
 
   &.inverted {
@@ -62,7 +97,10 @@ export const Dot = styled.div`
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
   }
 
   &.small {
@@ -71,6 +109,21 @@ export const Dot = styled.div`
       height: 6px;
     }
 
+    
+    &.last:after {
+      width: 3px;
+      height: 3px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: 0px 0px 0px 1.5px ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    }
+
+
     &.current:after {
       width: 10px;
       height: 10px;
@@ -83,6 +136,20 @@ export const Dot = styled.div`
       height: 8px;
     }
 
+    &.last:after {
+      width: 4px;
+      height: 4px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    }
+
+
     &.current:after {
       width: 12px;
       height: 12px;
@@ -95,6 +162,19 @@ export const Dot = styled.div`
       height: 12px;
     }
 
+    &.last:after {
+      width: 6px;
+      height: 6px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: 0px 0px 0px 3px ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    }
+
     &.current:after {
       width: 16px;
       height: 16px;
@@ -103,11 +183,18 @@ export const Dot = styled.div`
 
 
   &.active:after {
-    background-color: ${props => COLORS.getColor('accent1_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'accent1'
+}, props.theme)};
   }
 
   &.current:after {
-    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
   }
 
   &.inverted:after {
@@ -139,7 +226,6 @@ export const Line = styled.div`
     content: '';
     display: block;
     height: 100%;
-    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};
     position: absolute;
     right: 0;
   }
@@ -148,11 +234,12 @@ export const Line = styled.div`
     content: '';
     display: block;
     height: 100%;
-    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};
     position: absolute;
     left: 0;
   }
 
+
+
   &.small {
     height: 6px;
     border-radius: 4px;
@@ -162,15 +249,25 @@ export const Line = styled.div`
     }
 
     &:after {
-      width: 3px;
-      border-top-right-radius: 6px;
-      border-bottom-right-radius: 6px;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      margin-right: 1px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
     }
 
     &:before {
-      width: 3px;
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      margin-left: 1px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 
@@ -184,14 +281,24 @@ export const Line = styled.div`
 
     &:after {
       width: 4px;
-      border-top-right-radius: 8px;
-      border-bottom-right-radius: 8px;
+      height: 4px;
+      border-radius: 50%;
+      margin-right: 2px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
     }
 
     &:before {
       width: 4px;
-      border-top-left-radius: 8px;
-      border-bottom-left-radius: 8px;
+      height: 4px;
+      border-radius: 50%;
+      margin-left: 2px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 
@@ -204,22 +311,38 @@ export const Line = styled.div`
     }
 
     &:after {
-      width: 6px;
-      border-top-right-radius: 12px;
-      border-bottom-right-radius: 12px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 2px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
     }
 
     &:before {
-      width: 6px;
-      border-top-left-radius: 12px;
-      border-bottom-left-radius: 12px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-left: 2px;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 
-  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
 
   ${LineFill} {
-    background-color: ${props => COLORS.getColor('accent1_500', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 
   &.inverted {
@@ -236,7 +359,10 @@ export const Line = styled.div`
   }
 `;
 const Label = styled.div`
-  color: ${props => COLORS.getColor('black', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 `;
 const Content = styled.div`
   display: flex;
@@ -266,14 +392,8 @@ const Wrapper = styled.div`
     ${Content} {
       gap: 4px;
 
-      ${Bar}:first-of-type {
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-      }
-
-      ${Bar}:last-of-type {
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
+      ${Bar} {
+        border-radius: 6px;
       }
     }
   }
@@ -286,14 +406,8 @@ const Wrapper = styled.div`
     ${Content} {
       gap: 6px;
 
-      ${Bar}:first-of-type {
-        border-top-left-radius: 8px;
-        border-bottom-left-radius: 8px;
-      }
-
-      ${Bar}:last-of-type {
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
+      ${Bar} {
+        border-radius: 8px;
       }
     }
   }
@@ -306,14 +420,8 @@ const Wrapper = styled.div`
     ${Content} {
       gap: 8px;
 
-      ${Bar}:first-of-type {
-        border-top-left-radius: 12px;
-        border-bottom-left-radius: 12px;
-      }
-
-      ${Bar}:last-of-type {
-        border-top-right-radius: 12px;
-        border-bottom-right-radius: 12px;
+      ${Bar} {
+        border-radius: 12px;
       }
     }
   }
@@ -355,12 +463,12 @@ const LinearProgress = _ref => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const renderBars = () => /*#__PURE__*/_jsx(_Fragment, {
     children: Array.from(Array(max).keys()).map(i => /*#__PURE__*/_jsx(Bar, {
-      className: `${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`
+      className: `${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${i == max - 1 ? 'last' : ''} ${variant} ${size}`
     }, i))
   });
   const renderDots = () => /*#__PURE__*/_jsx(_Fragment, {
     children: Array.from(Array(max).keys()).map(i => /*#__PURE__*/_jsx(Dot, {
-      className: `${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`
+      className: `${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${i == max - 1 ? 'last' : ''} ${variant} ${size}`
     }, i))
   });
   const renderLine = () => /*#__PURE__*/_jsx(_Fragment, {

package/dist/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Bar","div","props","getColor","theme","Dot","LineFill","Line","Label","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","_ref","size","Medium","type","variant","Normal","label","value","max","className","rest","_objectWithoutProperties","_excluded","renderBars","children","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","style","width","render","Bars","Dots","_objectSpread","propTypes","_pt","oneOf","string","number","isRequired"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  height: 6px;\r\n\r\n  &.small {\r\n    height: 6px;\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 3px;\r\n      border-top-right-radius: 6px;\r\n      border-bottom-right-radius: 6px;\r\n    }\r\n\r\n    &:before {\r\n      width: 3px;\r\n      border-top-left-radius: 6px;\r\n      border-bottom-left-radius: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      border-top-right-radius: 8px;\r\n      border-bottom-right-radius: 8px;\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      border-top-left-radius: 8px;\r\n      border-bottom-left-radius: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 6px;\r\n      border-top-right-radius: 12px;\r\n      border-bottom-right-radius: 12px;\r\n    }\r\n\r\n    &:before {\r\n      width: 6px;\r\n      border-top-left-radius: 12px;\r\n      border-bottom-left-radius: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  ${LineFill} {\r\n    background-color: ${props => COLORS.getColor('accent1_500', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 6px;\r\n        border-bottom-left-radius: 6px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 6px;\r\n        border-bottom-right-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 8px;\r\n        border-bottom-left-radius: 8px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 12px;\r\n        border-bottom-left-radius: 12px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 12px;\r\n        border-bottom-right-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Size of the component. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Progress type. Defaults to 'line' */\r\n  type?: LinearProgressType;\r\n  /** Progress variant. Defaults to 'normal' */\r\n  variant?: LinearProgressVariant;\r\n  /** Label of the component */\r\n  label?: string;\r\n /** Current value on the progress. */\r\n  value: number;\r\n  /** Maximum value of the progress bar. */\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9G,OAAO,MAAMC,GAAG,GAAGZ,MAAM,CAACa,GAAG;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC1E;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,GAAG,GAAGjB,MAAM,CAACa,GAAG;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE;AACA,CAAC;AAED,OAAO,MAAME,QAAQ,GAAGlB,MAAM,CAACa,GAAG;AAClC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,IAAI,GAAGnB,MAAM,CAACa,GAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,QAAQ;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC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","ignoreList":[]}
+{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Bar","div","props","generateToken","componentType","defaultVariant","theme","state","getColor","Dot","LineFill","Line","Label","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","_ref","size","Medium","type","variant","Normal","label","value","max","className","rest","_objectWithoutProperties","_excluded","renderBars","children","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","style","width","render","Bars","Dots","_objectSpread","propTypes","_pt","oneOf","string","number","isRequired"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  position: relative;\r\n  height: 6px;\r\n\r\n  &.last:after {\r\n    content:'';\r\n    display: block;\r\n    position: absolute;\r\n    right: 0px;\r\n    border-radius: 50%;\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    &.last:after {\r\n      height: 6px;\r\n      width: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    &.last:after {\r\n      height: 8px;\r\n      width: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    &.last:after {\r\n      height: 12px;\r\n      width: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'neutral'}, props.theme)};\r\n\r\n  &.active {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'accent1' }, props.theme)};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    \r\n    &.last:after {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n      box-shadow: 0px 0px 0px 1.5px ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    }\r\n\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.last:after {\r\n      width: 4px;\r\n      height: 4px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n      box-shadow: 0px 0px 0px 2px ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    }\r\n\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.last:after {\r\n      width: 6px;\r\n      height: 6px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n      box-shadow: 0px 0px 0px 3px ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'accent1' }, props.theme)};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      height: 4px;\r\n      border-radius: 50%;\r\n      margin-right: 1px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      height: 4px;\r\n      border-radius: 50%;\r\n      margin-left: 1px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      height: 4px;\r\n      border-radius: 50%;\r\n      margin-right: 2px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      height: 4px;\r\n      border-radius: 50%;\r\n      margin-left: 2px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n      border-radius: 50%;\r\n      margin-right: 2px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      width: 8px;\r\n      height: 8px;\r\n      border-radius: 50%;\r\n      margin-left: 2px;\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n\r\n  ${LineFill} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'default' }, props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar} {\r\n        border-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar} {\r\n        border-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar} {\r\n        border-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Size of the component. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Progress type. Defaults to 'line' */\r\n  type?: LinearProgressType;\r\n  /** Progress variant. Defaults to 'normal' */\r\n  variant?: LinearProgressVariant;\r\n  /** Label of the component */\r\n  label?: string;\r\n /** Current value on the progress. */\r\n  value: number;\r\n  /** Maximum value of the progress bar. */\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${i == max - 1 ? 'last':''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${i == max - 1 ? 'last':''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/LinearProgress/__tests__/LinearProgress.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import LinearProgress, {Bar, Dot, Line, LinearProgressType, LineFill} from '../LinearProgress';
+
+
+
+describe('LinearProgress', () => {
+  it('should render dots', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Dots} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Dot}`)).toHaveLength(11)
+    expect(wrapper.container.querySelectorAll(`${Dot}.active`)).toHaveLength(6)
+  });
+
+  it('should render bars', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Bars} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Bar}`)).toHaveLength(11)
+    expect(wrapper.container.querySelectorAll(`${Bar}.active`)).toHaveLength(6)
+  });
+
+  it('should render line', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Line} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Line}`)).toHaveLength(1)
+    expect(wrapper.container.querySelectorAll(`${LineFill}`).item(0).getAttribute('style')).toEqual(`width: ${6 / 11 * 100}%;`)
+  });
+});

package/dist/List/ListRow.cjs

@@ -28,11 +28,20 @@ const Row = _styledComponents.default.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  border-bottom: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   box-sizing: border-box;
 
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
-  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
 
 
   cursor: default;
@@ -46,14 +55,26 @@ const Row = _styledComponents.default.div`
   }
 
   &.interactive:hover:not(.in-action):not(.disabled) {
-    background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     z-index: ${_styles.Z_INDEXES.hover};
   }
 
   &.interactive:active:not(.in-action):not(.disabled) {
-    background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     z-index: ${_styles.Z_INDEXES.active};
   }
 
@@ -63,7 +84,10 @@ const Row = _styledComponents.default.div`
 
   &.disabled {
     .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
@@ -151,7 +175,10 @@ const Row = _styledComponents.default.div`
   }
 
   .list-item-note {
-    color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
     word-break: initial;
     ${(0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
   }