@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.
- package/dist/Dropdown/BasicDropdown.cjs +7 -2
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +7 -2
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +9 -17
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.d.ts +0 -3
- package/dist/Dropdown/CommonStyling.js +8 -12
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +12 -3
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +12 -3
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +1 -0
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +1 -0
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/SegmentControl/SegmentControl.cjs +99 -0
- package/dist/SegmentControl/SegmentControl.cjs.map +1 -0
- package/dist/SegmentControl/SegmentControl.d.ts +19 -0
- package/dist/SegmentControl/SegmentControl.js +71 -0
- package/dist/SegmentControl/SegmentControl.js.map +1 -0
- package/dist/SegmentControl/index.cjs +16 -0
- package/dist/SegmentControl/index.cjs.map +1 -0
- package/dist/SegmentControl/index.d.ts +3 -0
- package/dist/SegmentControl/index.js +3 -0
- package/dist/SegmentControl/index.js.map +1 -0
- package/dist/Table/TableFooter.cjs +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableStyles.cjs +1 -1
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +1 -1
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/LinearProgression/LinearProgression.cjs +0 -132
- package/dist/LinearProgression/LinearProgression.cjs.map +0 -1
- package/dist/LinearProgression/LinearProgression.d.ts +0 -24
- package/dist/LinearProgression/LinearProgression.js +0 -102
- package/dist/LinearProgression/LinearProgression.js.map +0 -1
- package/dist/LinearProgression/index.cjs +0 -32
- package/dist/LinearProgression/index.cjs.map +0 -1
- package/dist/LinearProgression/index.d.ts +0 -3
- package/dist/LinearProgression/index.js +0 -4
- 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":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,kBALF,QAMO,sBANP;AAOA,SAAQC,SAAR,QAAwB,qBAAxB;AACA,SAAQC,cAAR,QAA6B,yBAA7B;AAEA;AACA;AACA;;AAEA,OAAO,IAAMC,YAAY,GAAGT,MAAM,CAACU,GAAV,8FAAlB;AAKP,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAV,+MAAjB;AAaP,OAAO,IAAMC,iBAAiB,GAAGb,MAAM,CAACc,KAAV,yEAAvB;AAGP,OAAO,IAAMC,sBAAsB,GAAGf,MAAM,CAACgB,EAAV,yEAA5B;AAGP,OAAO,IAAMC,6BAA6B,GAAGjB,MAAM,CAACU,GAAV,sWAObT,MAAM,CAACiB,WAPM,EAQhBjB,MAAM,CAACiB,WARS,EAWtChB,iBAAiB,CAACG,kBAAkB,CAACc,IAApB,EAA0BlB,MAAM,CAACmB,KAAjC,CAXqB,CAAnC;AAiBP,OAAO,IAAMC,wBAAwB,GAAGrB,MAAM,CAACgB,EAAV,yEAA9B;AAGP,OAAO,IAAMM,8BAA8B,GAAGtB,MAAM,CAACU,GAAV,6SAQjBT,MAAM,CAACiB,WARU,EASdjB,MAAM,CAACiB,WATO,CAApC;AAYP,OAAO,IAAMK,uBAAuB,GAAGvB,MAAM,CAACwB,EAAV,uuBAChCpB,iBAAiB,CAACC,kBAAkB,CAACc,IAApB,EAA0BlB,MAAM,CAACwB,WAAjC,CADe,EAIdxB,MAAM,CAACyB,KAJO,EAaVzB,MAAM,CAAC0B,UAbG,EAcrB1B,MAAM,CAAC2B,WAdc,EAenBrB,SAAS,CAACsB,KAfS,EAmBV5B,MAAM,CAAC6B,WAnBG,EAoBrB7B,MAAM,CAAC8B,WApBc,EAsBnBxB,SAAS,CAACyB,MAtBS,EA2BL/B,MAAM,CAACgC,QA3BF,EA2BuBhC,MAAM,CAACiC,KA3B9B,EA4BnB3B,SAAS,CAAC2B,KA5BS,EAgCrBZ,8BAhCqB,EAoCdA,8BApCc,EAyCZrB,MAAM,CAACkC,UAzCK,CAA7B;AA6CP,OAAO,IAAMC,kBAAkB,GAAGpC,MAAM,CAACgB,EAAV,yeAMPf,MAAM,CAAC6B,WANA,EAUP7B,MAAM,CAACoC,WAVA,EAWhB9B,SAAS,CAACsB,KAXM,EAeP5B,MAAM,CAACoC,WAfA,EAiBhB9B,SAAS,CAAC2B,KAjBM,EAuBhB3B,SAAS,CAACyB,MAvBM,CAAxB;AA4BP,OAAO,IAAMM,eAAe,GAAGtC,MAAM,CAACuC,KAAV,6SACxBH,kBADwB,EAEJnC,MAAM,CAACuC,WAFH,EAKxBJ,kBALwB,EAMJnC,MAAM,CAACkC,UANH,CAArB;AAWP,OAAO,IAAMM,eAAe,GAAGzC,MAAM,CAAC0C,EAAV,yEAArB;AAEP,OAAO,IAAMC,sBAAsB,GAAG3C,MAAM,CAACU,GAAV,qmBAI/BN,iBAAiB,CAACC,kBAAkB,CAACuC,OAApB,EAA6B3C,MAAM,CAACmB,KAApC,CAJc,EAmC/BZ,cAnC+B,CAA5B;AAwCP,OAAO,IAAMqC,mBAAmB,GAAG7C,MAAM,CAACU,GAAV,oMACrBT,MAAM,CAAC6C,WADc,EAMnB7C,MAAM,CAAC6C,WANY,CAAzB;AAYP,OAAO,IAAMC,mBAAmB,GAAG/C,MAAM,CAACgD,IAAV,+FAAzB;AAKP,OAAO,IAAMC,iBAAiB,GAAGjD,MAAM,CAACkD,KAAV,2EAAvB;AAGP,OAAO,IAAMC,wBAAwB,GAAGnD,MAAM,CAACU,GAAV,sQACXT,MAAM,CAACiB,WADI,EAERjB,MAAM,CAACiB,WAFC,CAA9B;AAYP,OAAO,IAAMkC,4BAA4B,GAAGpD,MAAM,CAACgD,IAAV,wGAErC1C,kBAAkB,CAACD,kBAAkB,CAACuC,OAApB,EAA6B3C,MAAM,CAACmB,KAApC,CAFmB,CAAlC;AAKP,OAAO,IAAMiC,yBAAyB,GAAGrD,MAAM,CAACU,GAAV,6FAA/B;AAIP,OAAO,IAAM4C,kBAAkB,GAAGtD,MAAM,CAACU,GAAV,0MAMlBH,SAAS,CAACgD,QANQ,CAAxB;AASP,OAAO,IAAMC,+BAA+B,GAAGxD,MAAM,CAACyD,MAAV,6xBAEfxD,MAAM,CAACiB,WAFQ,EAGlBjB,MAAM,CAACiB,WAHW,EAa5BjB,MAAM,CAACyB,KAbqB,EAiBxCvB,iBAAiB,CAACE,kBAAkB,CAACc,IAApB,EAA0BlB,MAAM,CAACwB,WAAjC,CAjBuB,EAqB7BlB,SAAS,CAAC2B,KArBmB,EAsB/BjC,MAAM,CAACwB,WAtBwB,EA2B7BlB,SAAS,CAACsB,KA3BmB,EA4B1B5B,MAAM,CAAC0B,UA5BmB,EA6B/B1B,MAAM,CAAC2B,WA7BwB,EAkC7BrB,SAAS,CAACyB,MAlCmB,EAmC1B/B,MAAM,CAAC6B,WAnCmB,EAoC/B7B,MAAM,CAAC8B,WApCwB,CAArC","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
|
|
423
|
+
var _SegmentControl = require("./SegmentControl");
|
|
424
424
|
|
|
425
|
-
Object.keys(
|
|
425
|
+
Object.keys(_SegmentControl).forEach(function (key) {
|
|
426
426
|
if (key === "default" || key === "__esModule") return;
|
|
427
|
-
if (key in exports && exports[key] ===
|
|
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
|
|
431
|
+
return _SegmentControl[key];
|
|
432
432
|
}
|
|
433
433
|
});
|
|
434
434
|
});
|
package/dist/index.cjs.map
CHANGED
|
@@ -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 './
|
|
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
package/dist/index.js
CHANGED
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,
|
|
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,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 +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"}
|