@laerdal/life-react-components 1.5.1-dev.11 → 1.5.1-dev.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/Dropdown/BasicDropdown.cjs +7 -2
  2. package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
  3. package/dist/Dropdown/BasicDropdown.js +7 -2
  4. package/dist/Dropdown/BasicDropdown.js.map +1 -1
  5. package/dist/Dropdown/CommonStyling.cjs +9 -17
  6. package/dist/Dropdown/CommonStyling.cjs.map +1 -1
  7. package/dist/Dropdown/CommonStyling.d.ts +0 -3
  8. package/dist/Dropdown/CommonStyling.js +8 -12
  9. package/dist/Dropdown/CommonStyling.js.map +1 -1
  10. package/dist/Dropdown/DropdownContent.cjs +12 -3
  11. package/dist/Dropdown/DropdownContent.cjs.map +1 -1
  12. package/dist/Dropdown/DropdownContent.js +12 -3
  13. package/dist/Dropdown/DropdownContent.js.map +1 -1
  14. package/dist/Dropdown/DropdownFilter.cjs +1 -0
  15. package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
  16. package/dist/Dropdown/DropdownFilter.js +1 -0
  17. package/dist/Dropdown/DropdownFilter.js.map +1 -1
  18. package/dist/SegmentControl/SegmentControl.cjs +99 -0
  19. package/dist/SegmentControl/SegmentControl.cjs.map +1 -0
  20. package/dist/SegmentControl/SegmentControl.d.ts +19 -0
  21. package/dist/SegmentControl/SegmentControl.js +71 -0
  22. package/dist/SegmentControl/SegmentControl.js.map +1 -0
  23. package/dist/SegmentControl/index.cjs +16 -0
  24. package/dist/SegmentControl/index.cjs.map +1 -0
  25. package/dist/SegmentControl/index.d.ts +3 -0
  26. package/dist/SegmentControl/index.js +3 -0
  27. package/dist/SegmentControl/index.js.map +1 -0
  28. package/dist/Table/TableFooter.cjs +1 -1
  29. package/dist/Table/TableFooter.cjs.map +1 -1
  30. package/dist/Table/TableFooter.js +1 -1
  31. package/dist/Table/TableFooter.js.map +1 -1
  32. package/dist/Table/TableStyles.cjs +1 -1
  33. package/dist/Table/TableStyles.cjs.map +1 -1
  34. package/dist/Table/TableStyles.js +1 -1
  35. package/dist/Table/TableStyles.js.map +1 -1
  36. package/dist/index.cjs +4 -4
  37. package/dist/index.cjs.map +1 -1
  38. package/dist/index.d.ts +1 -1
  39. package/dist/index.js +1 -1
  40. package/dist/index.js.map +1 -1
  41. package/package.json +1 -1
  42. package/dist/LinearProgression/LinearProgression.cjs +0 -132
  43. package/dist/LinearProgression/LinearProgression.cjs.map +0 -1
  44. package/dist/LinearProgression/LinearProgression.d.ts +0 -24
  45. package/dist/LinearProgression/LinearProgression.js +0 -102
  46. package/dist/LinearProgression/LinearProgression.js.map +0 -1
  47. package/dist/LinearProgression/index.cjs +0 -32
  48. package/dist/LinearProgression/index.cjs.map +0 -1
  49. package/dist/LinearProgression/index.d.ts +0 -3
  50. package/dist/LinearProgression/index.js +0 -4
  51. package/dist/LinearProgression/index.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_100};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n outline: none;\n z-index: ${Z_INDEXES.focus};\n color: ${COLORS.neutral_600};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n"],"file":"TableStyles.js"}
1
+ {"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_100};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n outline: none;\n z-index: ${Z_INDEXES.focus};\n color: ${COLORS.neutral_600};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n"],"file":"TableStyles.js"}
package/dist/index.cjs CHANGED
@@ -420,15 +420,15 @@ Object.keys(_QuizButton).forEach(function (key) {
420
420
  });
421
421
  });
422
422
 
423
- var _LinearProgression = require("./LinearProgression");
423
+ var _SegmentControl = require("./SegmentControl");
424
424
 
425
- Object.keys(_LinearProgression).forEach(function (key) {
425
+ Object.keys(_SegmentControl).forEach(function (key) {
426
426
  if (key === "default" || key === "__esModule") return;
427
- if (key in exports && exports[key] === _LinearProgression[key]) return;
427
+ if (key in exports && exports[key] === _SegmentControl[key]) return;
428
428
  Object.defineProperty(exports, key, {
429
429
  enumerable: true,
430
430
  get: function get() {
431
- return _LinearProgression[key];
431
+ return _SegmentControl[key];
432
432
  }
433
433
  });
434
434
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\n"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './SegmentControl';\n"],"file":"index.cjs"}
package/dist/index.d.ts CHANGED
@@ -30,4 +30,4 @@ export * from './Accordion';
30
30
  export * from './Tooltips';
31
31
  export * from './common';
32
32
  export * from './QuizButton';
33
- export * from './LinearProgression';
33
+ export * from './SegmentControl';
package/dist/index.js CHANGED
@@ -30,5 +30,5 @@ export * from './Accordion';
30
30
  export * from './Tooltips';
31
31
  export * from './common';
32
32
  export * from './QuizButton';
33
- export * from './LinearProgression';
33
+ export * from './SegmentControl';
34
34
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './SegmentControl';\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.5.1-dev.11",
3
+ "version": "1.5.1-dev.14",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [
@@ -1,132 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.LinearProgressionVariant = exports.LinearProgressionType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
- var _react = _interopRequireDefault(require("react"));
15
-
16
- var _types = require("../types");
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _styles = require("../styles");
21
-
22
- var _jsxRuntime = require("react/jsx-runtime");
23
-
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
25
-
26
- var Bar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ", ";\n\n &.active {\n background-color: ", ";\n }\n\n &.current {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n }\n\n &.inverted.active {\n background-color: ", ";\n }\n\n &.inverted.current {\n background-color: ", ";\n }\n\n"])), _styles.COLORS.neutral_100, _styles.COLORS.accent1_400, _styles.COLORS.accent1_800, _styles.COLORS.neutral_600, _styles.COLORS.accent1_400, _styles.COLORS.white);
27
-
28
- exports.Bar = Bar;
29
-
30
- var Dot = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ", ";\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ", ";\n }\n\n &.current:after {\n background-color: ", ";\n }\n\n &.inverted:after {\n background-color: ", ";\n }\n\n &.inverted.active:after {\n background-color: ", ";\n }\n\n &.inverted.current:after {\n background-color: ", ";\n }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.accent1_600, _styles.COLORS.accent1_800, _styles.COLORS.neutral_400, _styles.COLORS.accent1_400, _styles.COLORS.white);
31
-
32
- exports.Dot = Dot;
33
-
34
- var LineFill = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n"])));
35
-
36
- exports.LineFill = LineFill;
37
-
38
- var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ", ";\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ", " {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ", " {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ", " {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ", ";\n\n ", " {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n\n &:after,\n &:before {\n background-color: ", ";\n }\n\n ", " {\n background-color: ", ";\n }\n }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.neutral_500, LineFill, LineFill, LineFill, _styles.COLORS.neutral_100, LineFill, _styles.COLORS.accent1_500, _styles.COLORS.neutral_700, _styles.COLORS.neutral_400, LineFill, _styles.COLORS.accent1_400);
39
-
40
- exports.Line = Line;
41
-
42
- var Wrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ", ":first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ", ":first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ", ":first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n"])), Bar, Bar, Bar, Bar, Bar, Bar);
43
-
44
- var LinearProgressionType;
45
- exports.LinearProgressionType = LinearProgressionType;
46
-
47
- (function (LinearProgressionType) {
48
- LinearProgressionType["Dots"] = "dots";
49
- LinearProgressionType["Line"] = "line";
50
- LinearProgressionType["Bars"] = "bars";
51
- })(LinearProgressionType || (exports.LinearProgressionType = LinearProgressionType = {}));
52
-
53
- var LinearProgressionVariant;
54
- exports.LinearProgressionVariant = LinearProgressionVariant;
55
-
56
- (function (LinearProgressionVariant) {
57
- LinearProgressionVariant["Normal"] = "normal";
58
- LinearProgressionVariant["Inverted"] = "inverted";
59
- })(LinearProgressionVariant || (exports.LinearProgressionVariant = LinearProgressionVariant = {}));
60
-
61
- var LinearProgression = function LinearProgression(_ref) {
62
- var _ref$size = _ref.size,
63
- size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
64
- _ref$type = _ref.type,
65
- type = _ref$type === void 0 ? LinearProgressionType.Line : _ref$type,
66
- _ref$variant = _ref.variant,
67
- variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
68
- value = _ref.value,
69
- max = _ref.max;
70
-
71
- var renderBars = function renderBars() {
72
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
73
- children: Array.from(Array(max).keys()).map(function (i) {
74
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, {
75
- className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
76
- }, i);
77
- })
78
- });
79
- };
80
-
81
- var renderDots = function renderDots() {
82
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
83
- children: Array.from(Array(max).keys()).map(function (i) {
84
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dot, {
85
- className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
86
- }, i);
87
- })
88
- });
89
- };
90
-
91
- var renderLine = function renderLine() {
92
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
93
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
94
- className: "".concat(variant, " ").concat(size),
95
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LineFill, {
96
- style: {
97
- width: "".concat(value / max * 100, "%")
98
- }
99
- })
100
- })
101
- });
102
- };
103
-
104
- var render = function render() {
105
- switch (type) {
106
- case LinearProgressionType.Bars:
107
- return renderBars();
108
-
109
- case LinearProgressionType.Dots:
110
- return renderDots();
111
-
112
- case LinearProgressionType.Line:
113
- default:
114
- return renderLine();
115
- }
116
- };
117
-
118
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
119
- className: "".concat(size, " ").concat(type, " ").concat(variant),
120
- children: render()
121
- });
122
- };
123
-
124
- LinearProgression.propTypes = {
125
- type: _propTypes.default.oneOf(["dots", "line", "bars"]),
126
- variant: _propTypes.default.oneOf(["normal", "inverted"]),
127
- value: _propTypes.default.number.isRequired,
128
- max: _propTypes.default.number.isRequired
129
- };
130
- var _default = LinearProgression;
131
- exports.default = _default;
132
- //# sourceMappingURL=LinearProgression.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/LinearProgression.tsx"],"names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Wrapper","LinearProgressionType","LinearProgressionVariant","LinearProgression","size","Size","Medium","type","variant","Normal","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\nexport const Bar = styled.div`\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ${COLORS.neutral_100};\n\n &.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.current {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_600};\n }\n\n &.inverted.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current {\n background-color: ${COLORS.white};\n }\n\n`;\n\nexport const Dot = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ${COLORS.neutral_400};\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ${COLORS.accent1_600};\n }\n\n &.current:after {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted:after {\n background-color: ${COLORS.neutral_400};\n }\n\n &.inverted.active:after {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current:after {\n background-color: ${COLORS.white};\n }\n`;\n\nexport const LineFill = styled.div`\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n`;\n\nexport const Line = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ${LineFill} {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ${COLORS.neutral_100};\n\n ${LineFill} {\n background-color: ${COLORS.accent1_500};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_700};\n\n &:after,\n &:before {\n background-color: ${COLORS.neutral_400};\n }\n\n ${LineFill} {\n background-color: ${COLORS.accent1_400};\n }\n }\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n`;\n\nexport enum LinearProgressionType {\n Dots = 'dots',\n Line = 'line',\n Bars = 'bars',\n}\n\nexport enum LinearProgressionVariant {\n Normal = 'normal',\n Inverted = 'inverted',\n}\n\nexport interface LinearProgressionProps {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: LinearProgressionType;\n variant?: LinearProgressionVariant;\n\n value: number;\n max: number;\n}\n\nconst LinearProgression: React.FunctionComponent<LinearProgressionProps> = ({\n size = Size.Medium,\n type = LinearProgressionType.Line,\n variant = LinearProgressionVariant.Normal,\n value,\n max\n }) => {\n\n const renderBars = () => (\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Bar key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n )\n\n\n const renderDots = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Dot key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderLine = () =>\n <>\n <Line className={`${variant} ${size}`}>\n <LineFill style={{width: `${value / max * 100}%`}}/>\n </Line>\n </>\n\n\n const render = () => {\n switch (type) {\n case LinearProgressionType.Bars:\n return renderBars();\n case LinearProgressionType.Dots:\n return renderDots();\n case LinearProgressionType.Line:\n default:\n return renderLine();\n }\n }\n\n return (\n <Wrapper className={`${size} ${type} ${variant}`}>\n {render()}\n </Wrapper>\n )\n};\n\nexport default LinearProgression;\n"],"file":"LinearProgression.cjs"}
@@ -1,24 +0,0 @@
1
- import React from 'react';
2
- import { Size } from '../types';
3
- export declare const Bar: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const Dot: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const LineFill: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const Line: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare enum LinearProgressionType {
8
- Dots = "dots",
9
- Line = "line",
10
- Bars = "bars"
11
- }
12
- export declare enum LinearProgressionVariant {
13
- Normal = "normal",
14
- Inverted = "inverted"
15
- }
16
- export interface LinearProgressionProps {
17
- size?: Size.Small | Size.Medium | Size.Large;
18
- type?: LinearProgressionType;
19
- variant?: LinearProgressionVariant;
20
- value: number;
21
- max: number;
22
- }
23
- declare const LinearProgression: React.FunctionComponent<LinearProgressionProps>;
24
- export default LinearProgression;
@@ -1,102 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- import _pt from "prop-types";
3
-
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
5
-
6
- import React from 'react';
7
- import { Size } from '../types';
8
- import styled from 'styled-components';
9
- import { COLORS } from '../styles';
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- import { Fragment as _Fragment } from "react/jsx-runtime";
12
- export var Bar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ", ";\n\n &.active {\n background-color: ", ";\n }\n\n &.current {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n }\n\n &.inverted.active {\n background-color: ", ";\n }\n\n &.inverted.current {\n background-color: ", ";\n }\n\n"])), COLORS.neutral_100, COLORS.accent1_400, COLORS.accent1_800, COLORS.neutral_600, COLORS.accent1_400, COLORS.white);
13
- export var Dot = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ", ";\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ", ";\n }\n\n &.current:after {\n background-color: ", ";\n }\n\n &.inverted:after {\n background-color: ", ";\n }\n\n &.inverted.active:after {\n background-color: ", ";\n }\n\n &.inverted.current:after {\n background-color: ", ";\n }\n"])), COLORS.neutral_400, COLORS.accent1_600, COLORS.accent1_800, COLORS.neutral_400, COLORS.accent1_400, COLORS.white);
14
- export var LineFill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n"])));
15
- export var Line = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ", ";\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ", " {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ", " {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ", " {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ", ";\n\n ", " {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n\n &:after,\n &:before {\n background-color: ", ";\n }\n\n ", " {\n background-color: ", ";\n }\n }\n"])), COLORS.neutral_500, COLORS.neutral_500, LineFill, LineFill, LineFill, COLORS.neutral_100, LineFill, COLORS.accent1_500, COLORS.neutral_700, COLORS.neutral_400, LineFill, COLORS.accent1_400);
16
- var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ", ":first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ", ":first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ", ":first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n"])), Bar, Bar, Bar, Bar, Bar, Bar);
17
- export var LinearProgressionType;
18
-
19
- (function (LinearProgressionType) {
20
- LinearProgressionType["Dots"] = "dots";
21
- LinearProgressionType["Line"] = "line";
22
- LinearProgressionType["Bars"] = "bars";
23
- })(LinearProgressionType || (LinearProgressionType = {}));
24
-
25
- export var LinearProgressionVariant;
26
-
27
- (function (LinearProgressionVariant) {
28
- LinearProgressionVariant["Normal"] = "normal";
29
- LinearProgressionVariant["Inverted"] = "inverted";
30
- })(LinearProgressionVariant || (LinearProgressionVariant = {}));
31
-
32
- var LinearProgression = function LinearProgression(_ref) {
33
- var _ref$size = _ref.size,
34
- size = _ref$size === void 0 ? Size.Medium : _ref$size,
35
- _ref$type = _ref.type,
36
- type = _ref$type === void 0 ? LinearProgressionType.Line : _ref$type,
37
- _ref$variant = _ref.variant,
38
- variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
39
- value = _ref.value,
40
- max = _ref.max;
41
-
42
- var renderBars = function renderBars() {
43
- return /*#__PURE__*/_jsx(_Fragment, {
44
- children: Array.from(Array(max).keys()).map(function (i) {
45
- return /*#__PURE__*/_jsx(Bar, {
46
- className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
47
- }, i);
48
- })
49
- });
50
- };
51
-
52
- var renderDots = function renderDots() {
53
- return /*#__PURE__*/_jsx(_Fragment, {
54
- children: Array.from(Array(max).keys()).map(function (i) {
55
- return /*#__PURE__*/_jsx(Dot, {
56
- className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
57
- }, i);
58
- })
59
- });
60
- };
61
-
62
- var renderLine = function renderLine() {
63
- return /*#__PURE__*/_jsx(_Fragment, {
64
- children: /*#__PURE__*/_jsx(Line, {
65
- className: "".concat(variant, " ").concat(size),
66
- children: /*#__PURE__*/_jsx(LineFill, {
67
- style: {
68
- width: "".concat(value / max * 100, "%")
69
- }
70
- })
71
- })
72
- });
73
- };
74
-
75
- var render = function render() {
76
- switch (type) {
77
- case LinearProgressionType.Bars:
78
- return renderBars();
79
-
80
- case LinearProgressionType.Dots:
81
- return renderDots();
82
-
83
- case LinearProgressionType.Line:
84
- default:
85
- return renderLine();
86
- }
87
- };
88
-
89
- return /*#__PURE__*/_jsx(Wrapper, {
90
- className: "".concat(size, " ").concat(type, " ").concat(variant),
91
- children: render()
92
- });
93
- };
94
-
95
- LinearProgression.propTypes = {
96
- type: _pt.oneOf(["dots", "line", "bars"]),
97
- variant: _pt.oneOf(["normal", "inverted"]),
98
- value: _pt.number.isRequired,
99
- max: _pt.number.isRequired
100
- };
101
- export default LinearProgression;
102
- //# sourceMappingURL=LinearProgression.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/LinearProgression.tsx"],"names":["React","Size","styled","COLORS","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Wrapper","LinearProgressionType","LinearProgressionVariant","LinearProgression","size","Medium","type","variant","Normal","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\nexport const Bar = styled.div`\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ${COLORS.neutral_100};\n\n &.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.current {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_600};\n }\n\n &.inverted.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current {\n background-color: ${COLORS.white};\n }\n\n`;\n\nexport const Dot = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ${COLORS.neutral_400};\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ${COLORS.accent1_600};\n }\n\n &.current:after {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted:after {\n background-color: ${COLORS.neutral_400};\n }\n\n &.inverted.active:after {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current:after {\n background-color: ${COLORS.white};\n }\n`;\n\nexport const LineFill = styled.div`\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n`;\n\nexport const Line = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ${LineFill} {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ${COLORS.neutral_100};\n\n ${LineFill} {\n background-color: ${COLORS.accent1_500};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_700};\n\n &:after,\n &:before {\n background-color: ${COLORS.neutral_400};\n }\n\n ${LineFill} {\n background-color: ${COLORS.accent1_400};\n }\n }\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n`;\n\nexport enum LinearProgressionType {\n Dots = 'dots',\n Line = 'line',\n Bars = 'bars',\n}\n\nexport enum LinearProgressionVariant {\n Normal = 'normal',\n Inverted = 'inverted',\n}\n\nexport interface LinearProgressionProps {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: LinearProgressionType;\n variant?: LinearProgressionVariant;\n\n value: number;\n max: number;\n}\n\nconst LinearProgression: React.FunctionComponent<LinearProgressionProps> = ({\n size = Size.Medium,\n type = LinearProgressionType.Line,\n variant = LinearProgressionVariant.Normal,\n value,\n max\n }) => {\n\n const renderBars = () => (\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Bar key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n )\n\n\n const renderDots = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Dot key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderLine = () =>\n <>\n <Line className={`${variant} ${size}`}>\n <LineFill style={{width: `${value / max * 100}%`}}/>\n </Line>\n </>\n\n\n const render = () => {\n switch (type) {\n case LinearProgressionType.Bars:\n return renderBars();\n case LinearProgressionType.Dots:\n return renderDots();\n case LinearProgressionType.Line:\n default:\n return renderLine();\n }\n }\n\n return (\n <Wrapper className={`${size} ${type} ${variant}`}>\n {render()}\n </Wrapper>\n )\n};\n\nexport default LinearProgression;\n"],"file":"LinearProgression.js"}
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- Object.defineProperty(exports, "LinearProgression", {
9
- enumerable: true,
10
- get: function get() {
11
- return _LinearProgression.default;
12
- }
13
- });
14
- Object.defineProperty(exports, "LinearProgressionType", {
15
- enumerable: true,
16
- get: function get() {
17
- return _LinearProgression.LinearProgressionType;
18
- }
19
- });
20
- Object.defineProperty(exports, "LinearProgressionVariant", {
21
- enumerable: true,
22
- get: function get() {
23
- return _LinearProgression.LinearProgressionVariant;
24
- }
25
- });
26
-
27
- var _LinearProgression = _interopRequireWildcard(require("./LinearProgression"));
28
-
29
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
30
-
31
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
32
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["import LinearProgression, {LinearProgressionType, LinearProgressionVariant} from './LinearProgression';\n\nexport {LinearProgressionType, LinearProgressionVariant};\nexport {LinearProgression}\n"],"file":"index.cjs"}
@@ -1,3 +0,0 @@
1
- import LinearProgression, { LinearProgressionType, LinearProgressionVariant } from './LinearProgression';
2
- export { LinearProgressionType, LinearProgressionVariant };
3
- export { LinearProgression };
@@ -1,4 +0,0 @@
1
- import LinearProgression, { LinearProgressionType, LinearProgressionVariant } from './LinearProgression';
2
- export { LinearProgressionType, LinearProgressionVariant };
3
- export { LinearProgression };
4
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/index.ts"],"names":["LinearProgression","LinearProgressionType","LinearProgressionVariant"],"mappings":"AAAA,OAAOA,iBAAP,IAA2BC,qBAA3B,EAAkDC,wBAAlD,QAAiF,qBAAjF;AAEA,SAAQD,qBAAR,EAA+BC,wBAA/B;AACA,SAAQF,iBAAR","sourcesContent":["import LinearProgression, {LinearProgressionType, LinearProgressionVariant} from './LinearProgression';\n\nexport {LinearProgressionType, LinearProgressionVariant};\nexport {LinearProgression}\n"],"file":"index.js"}