@bethinkpl/design-system 25.0.10 → 26.0.1
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/.github/workflows/build-to-review-on-trigger.yml +17 -0
- package/.github/workflows/storybook.yml +1 -0
- package/.storybook/main.ts +42 -0
- package/.storybook/{manager.js → manager.ts} +1 -1
- package/.storybook/preview-head.html +1 -0
- package/.storybook/preview.scss +3 -0
- package/.storybook/{preview.js → preview.ts} +11 -18
- package/.storybook/scss-preview-styles-plugin.ts +43 -0
- package/{lib/styles → .storybook}/storybook.scss +10 -10
- package/deploy_storybook_to_s3.sh +16 -1
- package/dist/design-system.umd.cjs +1032 -0
- package/dist/design-system.umd.cjs.map +1 -0
- package/dist/lib/js/components/BadgeScore/BadgeScore.vue.d.ts +33 -65
- package/dist/lib/js/components/BadgeScore/index.d.ts +2 -1
- package/dist/lib/js/components/Banner/Banner.vue.d.ts +265 -311
- package/dist/lib/js/components/Banner/index.d.ts +2 -1
- package/dist/lib/js/components/Buttons/Button/Button.vue.d.ts +258 -305
- package/dist/lib/js/components/Buttons/Button/index.d.ts +2 -1
- package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +274 -320
- package/dist/lib/js/components/Buttons/IconButton/index.d.ts +2 -1
- package/dist/lib/js/components/Cards/Card/Card.consts.d.ts +1 -0
- package/dist/lib/js/components/Cards/Card/Card.vue.d.ts +92 -2
- package/dist/lib/js/components/Cards/Card/index.d.ts +2 -1
- package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +274 -258
- package/dist/lib/js/components/Cards/CardExpandable/index.d.ts +2 -1
- package/dist/lib/js/components/Chip/Chip.vue.d.ts +259 -306
- package/dist/lib/js/components/Chip/index.d.ts +2 -1
- package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.consts.d.ts +1 -0
- package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +1 -106
- package/dist/lib/js/components/DatePickers/DatePicker/index.d.ts +2 -1
- package/dist/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue.d.ts +1 -274
- package/dist/lib/js/components/DatePickers/DatePickerBox/index.d.ts +2 -1
- package/dist/lib/js/components/Divider/Divider.vue.d.ts +40 -26
- package/dist/lib/js/components/Divider/index.d.ts +2 -1
- package/dist/lib/js/components/Drawer/Drawer.vue.d.ts +34 -19
- package/dist/lib/js/components/Drawer/DrawerContent/DrawerContent.vue.d.ts +1 -3
- package/dist/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue.d.ts +24 -17
- package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +2 -3
- package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +226 -3
- package/dist/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue.d.ts +1 -3
- package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +236 -302
- package/dist/lib/js/components/Drawer/DrawerTile/DrawerTile.vue.d.ts +129 -66
- package/dist/lib/js/components/Drawer/index.d.ts +2 -1
- package/dist/lib/js/components/Dropdown/Dropdown.vue.d.ts +2 -66
- package/dist/lib/js/components/Dropdown/index.d.ts +2 -1
- package/dist/lib/js/components/Form/Checkbox/Checkbox.vue.d.ts +219 -239
- package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts +219 -239
- package/dist/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.d.ts +2 -1
- package/dist/lib/js/components/Form/SelectionControl/SelectionControl.vue.d.ts +29 -66
- package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +274 -316
- package/dist/lib/js/components/Headers/OverlayHeader/index.d.ts +2 -1
- package/dist/lib/js/components/Headers/PageHeader/PageHeader.vue.d.ts +12 -32
- package/dist/lib/js/components/Headers/PageHeader/index.d.ts +2 -1
- package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.consts.d.ts +1 -0
- package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +255 -333
- package/dist/lib/js/components/Headers/SectionHeader/index.d.ts +2 -1
- package/dist/lib/js/components/IconText/IconText.vue.d.ts +1 -71
- package/dist/lib/js/components/IconText/index.d.ts +2 -1
- package/dist/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue.d.ts +25 -48
- package/dist/lib/js/components/Icons/FeatureIcon/index.d.ts +2 -1
- package/dist/lib/js/components/Icons/Icon/Icon.consts.d.ts +195 -194
- package/dist/lib/js/components/Icons/Icon/Icon.vue.d.ts +76 -44
- package/dist/lib/js/components/Icons/Icon/index.d.ts +2 -1
- package/dist/lib/js/components/Image/Image.vue.d.ts +3 -11
- package/dist/lib/js/components/Image/index.d.ts +2 -1
- package/dist/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue.d.ts +16 -46
- package/dist/lib/js/components/Layouts/ThreeColumnLayout/index.d.ts +2 -1
- package/dist/lib/js/components/LoadingBar/LoadingBar.consts.d.ts +1 -0
- package/dist/lib/js/components/LoadingBar/LoadingBar.vue.d.ts +37 -26
- package/dist/lib/js/components/LoadingBar/index.d.ts +2 -1
- package/dist/lib/js/components/Modal/Modal.vue.d.ts +235 -230
- package/dist/lib/js/components/Modal/index.d.ts +2 -1
- package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +275 -362
- package/dist/lib/js/components/Modals/Modal/index.d.ts +2 -1
- package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +20 -74
- package/dist/lib/js/components/Modals/ModalDialog/index.d.ts +2 -1
- package/dist/lib/js/components/NumberInCircle/index.d.ts +2 -1
- package/dist/lib/js/components/Outline/OutlineDivider/OutlineDivider.vue.d.ts +24 -17
- package/dist/lib/js/components/Outline/OutlineDivider/index.d.ts +2 -1
- package/dist/lib/js/components/Outline/OutlineItem/OutlineItem.vue.d.ts +231 -297
- package/dist/lib/js/components/Outline/OutlineItem/index.d.ts +2 -1
- package/dist/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.vue.d.ts +10 -8
- package/dist/lib/js/components/Outline/OutlineSectionHeader/index.d.ts +2 -1
- package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +259 -288
- package/dist/lib/js/components/Pagination/index.d.ts +2 -1
- package/dist/lib/js/components/PopOver/index.d.ts +2 -1
- package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +1 -301
- package/dist/lib/js/components/ProgressBar/index.d.ts +2 -1
- package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts +1 -253
- package/dist/lib/js/components/ProgressDonutChart/index.d.ts +2 -1
- package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +21 -135
- package/dist/lib/js/components/RichList/BasicRichListItem/index.d.ts +2 -1
- package/dist/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.consts.d.ts +1 -0
- package/dist/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue.d.ts +51 -30
- package/dist/lib/js/components/RichList/GroupRichListItem/index.d.ts +2 -1
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.consts.d.ts +2 -0
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +254 -344
- package/dist/lib/js/components/RichList/RichListItem/index.d.ts +2 -1
- package/dist/lib/js/components/SectionTitle/SectionTitle.vue.d.ts +32 -2
- package/dist/lib/js/components/SelectList/SelectList.vue.d.ts +2 -3
- package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +234 -3
- package/dist/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue.d.ts +1 -7
- package/dist/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue.d.ts +127 -65
- package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts +21 -56
- package/dist/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue.d.ts +21 -13
- package/dist/lib/js/components/SelectionTile/SelectionTile.vue.d.ts +197 -197
- package/dist/lib/js/components/SelectionTile/index.d.ts +2 -1
- package/dist/lib/js/components/Skeleton/Skeleton.vue.d.ts +42 -2
- package/dist/lib/js/components/Skeleton/index.d.ts +2 -1
- package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +227 -231
- package/dist/lib/js/components/Statuses/AccessStatus/index.d.ts +2 -1
- package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts +227 -231
- package/dist/lib/js/components/Statuses/BlockadeStatus/index.d.ts +2 -1
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +246 -3
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/index.d.ts +2 -1
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +2 -3
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/index.d.ts +2 -1
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue.d.ts +31 -21
- package/dist/lib/js/components/SurveyQuestions/index.d.ts +2 -1
- package/dist/lib/js/components/SurveyToggle/SurveyToggle.vue.d.ts +39 -3
- package/dist/lib/js/components/SurveyToggle/index.d.ts +2 -1
- package/dist/lib/js/components/Switch/Switch.consts.d.ts +1 -0
- package/dist/lib/js/components/Switch/Switch.vue.d.ts +246 -296
- package/dist/lib/js/components/Switch/index.d.ts +2 -1
- package/dist/lib/js/components/TabItem/TabItem.vue.d.ts +1 -47
- package/dist/lib/js/components/TabItem/index.d.ts +2 -1
- package/dist/lib/js/components/TextGroup/TextGroup.vue.d.ts +7 -6
- package/dist/lib/js/components/TextGroup/index.d.ts +2 -1
- package/dist/lib/js/components/Tile/Tile.consts.d.ts +1 -0
- package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts +195 -194
- package/dist/lib/js/components/Tile/Tile.shared.d.ts +1 -0
- package/dist/lib/js/components/Tile/Tile.vue.d.ts +342 -282
- package/dist/lib/js/components/Tile/index.d.ts +2 -1
- package/dist/lib/js/components/Toast/Toast.consts.d.ts +1 -0
- package/dist/lib/js/components/Toggles/CounterToggle/CounterToggle.vue.d.ts +21 -47
- package/dist/lib/js/components/Toggles/CounterToggle/index.d.ts +2 -1
- package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.consts.d.ts +1 -0
- package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts +242 -301
- package/dist/lib/js/components/Toggles/ToggleButton/index.d.ts +2 -1
- package/dist/lib/js/components/Tooltip/Tooltip.vue.d.ts +4 -5
- package/dist/lib/js/components/Tooltip/index.d.ts +2 -1
- package/dist/lib/js/components/Well/index.d.ts +2 -1
- package/dist/lib/js/composables/hover-state.d.ts +11 -0
- package/dist/lib/js/icons/fontawesome.d.ts +195 -195
- package/dist/lib/js/index.d.ts +2 -1
- package/dist/lib/js/styles/TokenTypes.d.ts +1 -0
- package/dist/lib/js/utils/device.d.ts +1 -0
- package/docs/.nojekyll +0 -0
- package/docs/assets/AccessStatus-DVtD0BrS.js +1 -0
- package/docs/assets/AccessStatus.stories-CM9qms_d.js +9 -0
- package/docs/assets/BadgeScore-B0MHArlW.js +1 -0
- package/docs/assets/BadgeScore.stories-BsFc_8XV.js +40 -0
- package/docs/assets/Banner-Dkt_I8P3.js +1 -0
- package/docs/assets/Banner.stories-dLLxP9rS.js +62 -0
- package/docs/assets/BasicRichListItem-CCXQ4iJg.js +1 -0
- package/docs/assets/BasicRichListItem.stories-Bh_UBJkl.js +194 -0
- package/docs/assets/BlockadeStatus-9_pI8WM1.js +1 -0
- package/docs/assets/BlockedeStatus.stories-IunhqK0I.js +9 -0
- package/docs/assets/BorderSizes.stories-COOhe637.js +31 -0
- package/docs/assets/Button-CBZkgukP.js +1 -0
- package/docs/assets/Button.stories-BLj-_0Vw.js +47 -0
- package/docs/assets/Card-B7j8o0GU.js +1 -0
- package/docs/assets/Card.stories-KO99dol6.js +49 -0
- package/docs/assets/CardExpandable-XN3wcRwV.js +1 -0
- package/docs/assets/CardExpandable.stories-B9-JtWRG.js +37 -0
- package/docs/assets/Checkbox-D_geau8n.js +1 -0
- package/docs/assets/Checkbox.stories-DLfdA87Q.js +21 -0
- package/docs/assets/Chip-CBqrZ-va.js +1 -0
- package/docs/assets/Chip.stories-DQLbtbRo.js +43 -0
- package/docs/assets/Color-ERTF36HU-B622yQt4.js +1 -0
- package/docs/assets/Colors.stories-CRIOJbgv.js +11 -0
- package/docs/assets/ColorsThemes.stories-BVtVblv7.js +11 -0
- package/docs/assets/ColorsTokensLms.stories-Ds9sWwL0.js +11 -0
- package/docs/assets/ColorsTokensPrimaryBodywork.stories-D9nLEENe.js +11 -0
- package/docs/assets/ColorsTokensPrimaryWnl.stories-Cuz6HvAj.js +11 -0
- package/docs/assets/CounterToggle-BzxnFqH7.js +1 -0
- package/docs/assets/CounterToggle.stories-DdAjSFMr.js +19 -0
- package/docs/assets/DatePicker-CvT_E45n.js +2 -0
- package/docs/assets/DatePicker.stories-Ub_1x6To.js +91 -0
- package/docs/assets/Divider-D2yDhW46.js +1 -0
- package/docs/assets/Divider.stories-f9QUckyE.js +15 -0
- package/docs/assets/DocsRenderer-CFRXHY34-D5Eulb6H.js +639 -0
- package/docs/assets/Drawer-CH5Qyc5B.js +1 -0
- package/docs/assets/Drawer.stories-jrbLBaPT.js +21 -0
- package/docs/assets/DrawerContent-DGzdUSmd.js +1 -0
- package/docs/assets/DrawerContent.stories-CYzQPPIy.js +17 -0
- package/docs/assets/DrawerDivider-DNbYnPjf.js +1 -0
- package/docs/assets/DrawerDivider.stories-BG6MKk49.js +15 -0
- package/docs/assets/DrawerHeader-DOWojdwp.js +1 -0
- package/docs/assets/DrawerHeader.stories-CwaoQykQ.js +54 -0
- package/docs/assets/DrawerListItem-aepUTcTm.js +1 -0
- package/docs/assets/DrawerListItem.stories-vHXkwtyS.js +13 -0
- package/docs/assets/DrawerListItemGroup-CnH532Dv.js +1 -0
- package/docs/assets/DrawerListItemGroup.stories-D0DeZ6IG.js +20 -0
- package/docs/assets/DrawerSection-pMhA5dsS.js +1 -0
- package/docs/assets/DrawerSection.stories-BF7A4VyW.js +67 -0
- package/docs/assets/DrawerTile-W2mt6fAk.js +1 -0
- package/docs/assets/DrawerTile.stories-CUMznN1H.js +10 -0
- package/docs/assets/Dropdown-BfX0EVaK.js +1 -0
- package/docs/assets/Dropdown.stories-DrILA_TR.js +45 -0
- package/docs/assets/FeatureIcon-n65RPvyA.js +1 -0
- package/docs/assets/FeatureIcon.stories-DSUzxIPB.js +14 -0
- package/docs/assets/GroupRichListItem-DMiaeyaS.js +1 -0
- package/docs/assets/GroupRichListItem.stories-DCEq0Kil.js +137 -0
- package/docs/assets/Icon-BiVaixmr.js +762 -0
- package/docs/assets/Icon.stories-BFJuE2aE.js +27 -0
- package/docs/assets/IconButton-COzU-vlz.js +1 -0
- package/docs/assets/IconButton.stories-DGmn7bfg.js +119 -0
- package/docs/assets/IconText-DDrVXWHS.js +1 -0
- package/docs/assets/IconText.stories-CSt7q9Mf.js +32 -0
- package/docs/assets/Image-Drmyqqsn.js +1 -0
- package/docs/assets/Image.stories-DxQ22AFP.js +21 -0
- package/docs/assets/ItemsList-B-vw083o.js +1 -0
- package/docs/assets/LoadingBar-D0iVLCyJ.js +1 -0
- package/docs/assets/LoadingBar.stories-IJRD91mF.js +9 -0
- package/docs/assets/Modal-CJ0d6Je9.js +1 -0
- package/docs/assets/Modal.stories-q_qdiakg.js +53 -0
- package/docs/assets/ModalDialog-CbDAxfV_.js +1 -0
- package/docs/assets/ModalDialog.stories-CKcR8rIW.js +43 -0
- package/docs/assets/NumberInCircle-DV0Qrx8H.js +1 -0
- package/docs/assets/NumberInCircle.stories-DriLGDDl.js +9 -0
- package/docs/assets/OutlineDivider-Cez9NlcH.js +1 -0
- package/docs/assets/OutlineDivider.stories-D0zYoHBw.js +11 -0
- package/docs/assets/OutlineItem-CUHef8Bo.js +1 -0
- package/docs/assets/OutlineItem.stories-BgFzRhaY.js +41 -0
- package/docs/assets/OutlineSectionHeader-DSJ4uxfr.js +1 -0
- package/docs/assets/OutlineSectionHeader.stories-HOf2NwY-.js +9 -0
- package/docs/assets/OverlayHeader-jylszhPO.js +1 -0
- package/docs/assets/OverlayHeader.stories-bjFfL93l.js +67 -0
- package/docs/assets/PageHeader-CTbdU4IG.js +1 -0
- package/docs/assets/PageHeader.stories-DeNf1zoa.js +9 -0
- package/docs/assets/Pagination-dSOJSh7t.js +1 -0
- package/docs/assets/Pagination.stories-CMg8WaRV.js +31 -0
- package/docs/assets/PopOver-BPD1Ttq1.js +1 -0
- package/docs/assets/PopOver.stories-Cl1k59cl.js +15 -0
- package/docs/assets/ProgressBar-4gBRbr7a.js +1 -0
- package/docs/assets/ProgressBar.stories-9xVTh0RH.js +57 -0
- package/docs/assets/ProgressDonutChart-D5uvUZva.js +1 -0
- package/docs/assets/ProgressDonutChart.stories-DBpwl5Vn.js +17 -0
- package/docs/assets/RadioButton-BwCzYjOu.js +1 -0
- package/docs/assets/RadioButton.stories-CLWvDUrd.js +21 -0
- package/docs/assets/RichListItem.stories-DhkQky0J.js +182 -0
- package/docs/assets/SectionHeader-DVwe52kA.js +1 -0
- package/docs/assets/SectionHeader.stories-Dd3li5ER.js +24 -0
- package/docs/assets/SectionTitle-XTc-98O5.js +1 -0
- package/docs/assets/SectionTitle.stories-BFNagAeb.js +9 -0
- package/docs/assets/SelectList-CTXM5G8Z.js +1 -0
- package/docs/assets/SelectList.stories-B2Pq8auf.js +91 -0
- package/docs/assets/SelectListItem-_c4CA-YM.js +1 -0
- package/docs/assets/SelectListItem.stories-PSDnI18x.js +36 -0
- package/docs/assets/SelectListItemDivider-BOgD7wrO.js +1 -0
- package/docs/assets/SelectListItemDivider.stories-DvANKn2s.js +8 -0
- package/docs/assets/SelectListItemTile-BL3qYL_0.js +1 -0
- package/docs/assets/SelectListItemTile.stories-CVYmG0Ta.js +19 -0
- package/docs/assets/SelectListItemToggle-BjjMPWy0.js +1 -0
- package/docs/assets/SelectListItemToggle.stories-D5QL3Gd2.js +51 -0
- package/docs/assets/SelectListSectionTitle-FihJb1eM.js +1 -0
- package/docs/assets/SelectListSectionTitle.stories-DCyB86A1.js +16 -0
- package/docs/assets/SelectionControl-BxCh7N21.js +1 -0
- package/docs/assets/SelectionControl.sb.shared-BWifjoMU.js +2 -0
- package/docs/assets/SelectionTile-T03MPtEm.js +2 -0
- package/docs/assets/SelectionTile.stories-CEufLR64.js +47 -0
- package/docs/assets/Skeleton-BbafKE6W.js +179 -0
- package/docs/assets/Skeleton.stories-B_4TqUB5.js +15 -0
- package/docs/assets/Spacings.stories-DxxukMX7.js +43 -0
- package/docs/assets/SurveyQuestionOpenEnded-DRFBouQB.js +1 -0
- package/docs/assets/SurveyQuestionOpenEnded.stories-DW7tQU04.js +20 -0
- package/docs/assets/SurveyQuestionScale-nNC7H5k0.js +1 -0
- package/docs/assets/SurveyQuestionScale.stories-DC8qXbl8.js +72 -0
- package/docs/assets/SurveyToggle-DzZyc41b.js +1 -0
- package/docs/assets/SurveyToggle.stories-Yf0fJ_p2.js +14 -0
- package/docs/assets/Switch-BWGPo7tP.js +1 -0
- package/docs/assets/Switch.stories-BzeYFsr2.js +48 -0
- package/docs/assets/TabItem-Cx2nQ_YR.js +1 -0
- package/docs/assets/TabItem.stories-C-gV8JMj.js +15 -0
- package/docs/assets/TextGroup-DQmg5luv.js +1 -0
- package/docs/assets/TextGroup.stories-j5MNzn7U.js +48 -0
- package/docs/assets/ThreeColumnLayout-Lm3LIbid.js +1 -0
- package/docs/assets/ThreeColumnLayout.stories-C5cNwOWv.js +47 -0
- package/docs/assets/Tile-DnH9h0Kq.js +1 -0
- package/docs/assets/Tile.sb.shared-2W1FnncR.js +15 -0
- package/docs/assets/Tile.stories-Bj7yp21N.js +14 -0
- package/docs/assets/Toast.stories-Bad7itWi.js +58 -0
- package/docs/assets/ToggleButton-BZ0tVYFv.js +1 -0
- package/docs/assets/ToggleButton.stories-D0YPR0-y.js +42 -0
- package/docs/assets/Tooltip-BxZlo6cR.js +1 -0
- package/docs/assets/Tooltip.stories-CaTsoTim.js +119 -0
- package/docs/assets/TypographyTokensLms.stories-D-CrlX5A.js +11 -0
- package/docs/assets/TypographyVariables.stories-Bmxi44f1.js +11 -0
- package/docs/assets/Well-vFI2CbIA.js +1 -0
- package/docs/assets/Well.stories-Be73GX2h.js +6 -0
- package/docs/assets/_commonjsHelpers-Chg3vePA.js +1 -0
- package/docs/assets/_plugin-vue_export-helper-DlAUqK2U.js +1 -0
- package/docs/assets/decorator-CSnIf-k5.js +1 -0
- package/docs/assets/device-9fgosCm4.js +1 -0
- package/docs/assets/entry-preview-Dw8qwUcN.js +1 -0
- package/docs/assets/entry-preview-docs-BBVW7MF3.js +16 -0
- package/docs/assets/iframe-BosoHOVU.js +63 -0
- package/docs/assets/index-CBmJdl9t.js +5 -0
- package/docs/assets/index-CgF2Ctku.js +1 -0
- package/docs/assets/index-CqU62QSU.js +1 -0
- package/docs/assets/index-vG0co4wr.js +8 -0
- package/docs/assets/pl-Cy1N1vsP.js +1 -0
- package/docs/assets/preview-16ImHjAt.js +64 -0
- package/docs/assets/preview-B_ruAZiw.js +2 -0
- package/docs/assets/preview-DFmD0pui.js +1 -0
- package/docs/assets/preview-DFphXfmq.js +1 -0
- package/docs/assets/string-CxIy_vwz.js +1 -0
- package/docs/assets/user-DY5hg_iu.js +1 -0
- package/docs/assets/v4-BZawosSj.js +1 -0
- package/docs/assets/vue-popper-BJbr8Gin.js +24 -0
- package/docs/assets/vue.esm-bundler-BSCmGRHc.js +7 -0
- package/docs/favicon.svg +1 -0
- package/docs/iframe.html +332 -56
- package/docs/index.html +157 -51
- package/docs/index.json +1 -0
- package/docs/nunito-sans-bold-italic.woff2 +0 -0
- package/docs/nunito-sans-bold.woff2 +0 -0
- package/docs/nunito-sans-italic.woff2 +0 -0
- package/docs/nunito-sans-regular.woff2 +0 -0
- package/docs/preview.css +2993 -0
- package/docs/project.json +1 -1
- package/docs/sb-addons/actions-1/manager-bundle.js +3 -0
- package/docs/sb-addons/actions-1/manager-bundle.js.LEGAL.txt +0 -0
- package/docs/sb-addons/controls-3/manager-bundle.js +394 -0
- package/docs/sb-addons/controls-3/manager-bundle.js.LEGAL.txt +0 -0
- package/docs/sb-addons/designs-2/register-panel-bundle.js +665 -0
- package/docs/sb-addons/designs-2/register-panel-bundle.js.LEGAL.txt +127 -0
- package/docs/sb-addons/storybook-6/manager-bundle.js +3 -0
- package/docs/sb-addons/storybook-6/manager-bundle.js.LEGAL.txt +0 -0
- package/docs/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
- package/docs/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
- package/docs/sb-addons/storysource-4/manager-bundle.js +3 -0
- package/docs/sb-addons/storysource-4/manager-bundle.js.LEGAL.txt +0 -0
- package/docs/sb-addons/viewport-5/manager-bundle.js +3 -0
- package/docs/sb-addons/viewport-5/manager-bundle.js.LEGAL.txt +0 -0
- package/docs/sb-common-assets/favicon.svg +1 -0
- package/docs/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/docs/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/docs/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/docs/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/docs/sb-manager/globals-module-info.js +1006 -0
- package/docs/sb-manager/globals-runtime.js +54400 -0
- package/docs/sb-manager/globals.js +48 -0
- package/docs/sb-manager/runtime.js +12089 -0
- package/docs/sb-preview/globals.js +33 -0
- package/docs/sb-preview/runtime.js +9498 -0
- package/jest.config.js +14 -11
- package/lib/js/components/BadgeScore/BadgeScore.stories.ts +13 -10
- package/lib/js/components/BadgeScore/BadgeScore.vue +5 -5
- package/lib/js/components/Banner/Banner.stories.ts +58 -55
- package/lib/js/components/Banner/Banner.vue +3 -3
- package/lib/js/components/Buttons/Button/Button.stories.ts +31 -21
- package/lib/js/components/Buttons/Button/Button.vue +4 -6
- package/lib/js/components/Buttons/IconButton/IconButton.stories.ts +37 -34
- package/lib/js/components/Buttons/IconButton/IconButton.vue +14 -7
- package/lib/js/components/Cards/Card/Card.stories.ts +17 -14
- package/lib/js/components/Cards/Card/Card.vue +4 -3
- package/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts +8 -7
- package/lib/js/components/Cards/CardExpandable/CardExpandable.vue +3 -2
- package/lib/js/components/Chip/Chip.stories.ts +13 -9
- package/lib/js/components/Chip/Chip.vue +3 -3
- package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts +67 -64
- package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +3 -3
- package/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue +3 -3
- package/lib/js/components/Divider/Divider.stories.ts +5 -5
- package/lib/js/components/Divider/Divider.vue +4 -2
- package/lib/js/components/Drawer/Drawer.stories.ts +3 -3
- package/lib/js/components/Drawer/Drawer.vue +3 -3
- package/lib/js/components/Drawer/DrawerContent/DrawerContent.stories.ts +1 -1
- package/lib/js/components/Drawer/DrawerContent/DrawerContent.vue +4 -2
- package/lib/js/components/Drawer/DrawerDivider/DrawerDivider.stories.ts +5 -5
- package/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue +4 -2
- package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts +16 -16
- package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue +3 -3
- package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts +4 -3
- package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue +3 -3
- package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts +1 -1
- package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue +4 -2
- package/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts +60 -57
- package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue +3 -3
- package/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts +1 -1
- package/lib/js/components/Drawer/DrawerTile/DrawerTile.vue +4 -2
- package/lib/js/components/Dropdown/Dropdown.stories.ts +9 -9
- package/lib/js/components/Dropdown/Dropdown.vue +4 -2
- package/lib/js/components/Form/Checkbox/Checkbox.stories.ts +21 -14
- package/lib/js/components/Form/Checkbox/Checkbox.vue +3 -3
- package/lib/js/components/Form/RadioButton/RadioButton.stories.ts +21 -14
- package/lib/js/components/Form/RadioButton/RadioButton.vue +3 -3
- package/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts +13 -10
- package/lib/js/components/Form/SelectionControl/SelectionControl.vue +3 -3
- package/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts +9 -9
- package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue +5 -3
- package/lib/js/components/Headers/PageHeader/PageHeader.stories.ts +11 -13
- package/lib/js/components/Headers/PageHeader/PageHeader.vue +4 -2
- package/lib/js/components/Headers/SectionHeader/SectionHeader.stories.ts +65 -63
- package/lib/js/components/Headers/SectionHeader/SectionHeader.vue +6 -6
- package/lib/js/components/IconText/IconText.stories.ts +6 -5
- package/lib/js/components/IconText/IconText.vue +3 -3
- package/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts +15 -11
- package/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue +3 -3
- package/lib/js/components/Icons/Icon/Icon.stories.ts +10 -8
- package/lib/js/components/Icons/Icon/Icon.vue +3 -3
- package/lib/js/components/Image/Image.stories.ts +5 -5
- package/lib/js/components/Image/Image.vue +0 -11
- package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.stories.ts +8 -8
- package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue +3 -3
- package/lib/js/components/LoadingBar/LoadingBar.stories.ts +5 -5
- package/lib/js/components/LoadingBar/LoadingBar.vue +3 -3
- package/lib/js/components/Modal/Modal.vue +4 -2
- package/lib/js/components/Modals/Modal/Modal.stories.ts +31 -31
- package/lib/js/components/Modals/Modal/Modal.vue +3 -3
- package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts +20 -20
- package/lib/js/components/Modals/ModalDialog/ModalDialog.vue +3 -3
- package/lib/js/components/NumberInCircle/NumberInCircle.stories.ts +5 -5
- package/lib/js/components/NumberInCircle/NumberInCircle.vue +4 -2
- package/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts +12 -7
- package/lib/js/components/Outline/OutlineDivider/OutlineDivider.vue +4 -2
- package/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts +40 -29
- package/lib/js/components/Outline/OutlineItem/OutlineItem.vue +4 -4
- package/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts +6 -4
- package/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.vue +4 -2
- package/lib/js/components/Pagination/Pagination.stories.ts +34 -21
- package/lib/js/components/Pagination/Pagination.vue +3 -2
- package/lib/js/components/PopOver/PopOver.stories.ts +9 -9
- package/lib/js/components/PopOver/PopOver.vue +6 -4
- package/lib/js/components/ProgressBar/ProgressBar.stories.ts +48 -41
- package/lib/js/components/ProgressBar/ProgressBar.vue +3 -3
- package/lib/js/components/ProgressDonutChart/ProgressDonutChart.spec.ts +1 -1
- package/lib/js/components/ProgressDonutChart/ProgressDonutChart.stories.ts +28 -24
- package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue +4 -3
- package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts +82 -73
- package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue +3 -3
- package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts +26 -20
- package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue +3 -3
- package/lib/js/components/RichList/RichListItem/RichListItem.consts.ts +5 -7
- package/lib/js/components/RichList/RichListItem/RichListItem.stories.ts +25 -18
- package/lib/js/components/RichList/RichListItem/RichListItem.vue +9 -5
- package/lib/js/components/SectionTitle/SectionTitle.stories.ts +5 -4
- package/lib/js/components/SectionTitle/SectionTitle.vue +3 -2
- package/lib/js/components/SelectList/SelectList.stories.ts +1 -1
- package/lib/js/components/SelectList/SelectList.vue +4 -2
- package/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts +9 -5
- package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue +3 -3
- package/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue +4 -2
- package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.stories.ts +5 -2
- package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue +4 -2
- package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.stories.ts +51 -42
- package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue +3 -3
- package/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.stories.ts +11 -9
- package/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue +4 -2
- package/lib/js/components/SelectionTile/SelectionTile.stories.ts +46 -38
- package/lib/js/components/Skeleton/Skeleton.stories.ts +5 -5
- package/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts +3 -3
- package/lib/js/components/Statuses/AccessStatus/AccessStatus.vue +3 -2
- package/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue +4 -2
- package/lib/js/components/Statuses/BlockadeStatus/BlockedeStatus.stories.ts +3 -3
- package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.stories.ts +22 -17
- package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue +4 -2
- package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts +73 -55
- package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue +3 -2
- package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue +4 -2
- package/lib/js/components/SurveyToggle/SurveyToggle.stories.ts +19 -12
- package/lib/js/components/SurveyToggle/SurveyToggle.vue +4 -2
- package/lib/js/components/Switch/Switch.stories.ts +16 -14
- package/lib/js/components/Switch/Switch.vue +3 -3
- package/lib/js/components/TabItem/TabItem.stories.ts +12 -11
- package/lib/js/components/TabItem/TabItem.vue +3 -3
- package/lib/js/components/TextGroup/TextGroup.stories.ts +20 -16
- package/lib/js/components/TextGroup/TextGroup.vue +1 -1
- package/lib/js/components/Tile/Tile.sb.shared.ts +9 -8
- package/lib/js/components/Tile/Tile.stories.ts +43 -45
- package/lib/js/components/Tile/Tile.vue +3 -2
- package/lib/js/components/Toast/Toast.stories.ts +10 -12
- package/lib/js/components/Toast/Toast.vue +3 -3
- package/lib/js/components/Toggles/CounterToggle/CounterToggle.stories.ts +10 -10
- package/lib/js/components/Toggles/CounterToggle/CounterToggle.vue +3 -3
- package/lib/js/components/Toggles/ToggleButton/ToggleButton.stories.ts +17 -17
- package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue +3 -3
- package/lib/js/components/Tooltip/Tooltip.stories.ts +9 -9
- package/lib/js/components/Tooltip/Tooltip.vue +2 -10
- package/lib/js/components/Well/Well.stories.ts +36 -29
- package/lib/js/components/Well/Well.vue +4 -2
- package/lib/js/composables/hover-state.ts +39 -0
- package/lib/js/icons/fontawesome.ts +1 -1
- package/lib/js/index.ts +2 -1
- package/lib/js/styles/Colors/Colors.stories.ts +1 -1
- package/lib/js/styles/ColorsThemes/ColorsThemes.stories.ts +1 -1
- package/lib/js/styles/ColorsTokensLms/ColorsTokensLms.stories.ts +1 -1
- package/lib/js/styles/ColorsTokensPrimaryBodywork/ColorsTokensPrimaryBodywork.stories.ts +1 -1
- package/lib/js/styles/ColorsTokensPrimaryWnl/ColorsTokensPrimaryWnl.stories.ts +1 -1
- package/lib/js/styles/ItemsColor.vue +3 -3
- package/lib/js/styles/ItemsList.vue +4 -3
- package/lib/js/styles/ItemsTypography.vue +3 -3
- package/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts +1 -1
- package/lib/js/styles/TypographyVariables/TypographyVariables.stories.ts +1 -1
- package/lib/js/typings.d.ts +3 -4
- package/lib/js/utils/device.ts +7 -0
- package/package.json +27 -26
- package/tsconfig.json +12 -5
- package/vite.config.ts +38 -0
- package/.storybook/main.js +0 -86
- package/babel.config.json +0 -12
- package/docs/117.1156a7c503a067ad8241.manager.bundle.js +0 -2
- package/docs/117.1156a7c503a067ad8241.manager.bundle.js.LICENSE.txt +0 -8
- package/docs/247.6eaf240e.iframe.bundle.js +0 -1
- package/docs/255.721b3744029f102ac772.manager.bundle.js +0 -2
- package/docs/255.721b3744029f102ac772.manager.bundle.js.LICENSE.txt +0 -12
- package/docs/286.23828fb3.iframe.bundle.js +0 -2
- package/docs/286.23828fb3.iframe.bundle.js.LICENSE.txt +0 -31
- package/docs/295.4e52f65e605e88f7b915.manager.bundle.js +0 -1
- package/docs/315.76786aa14c329ce07ff9.manager.bundle.js +0 -2
- package/docs/315.76786aa14c329ce07ff9.manager.bundle.js.LICENSE.txt +0 -94
- package/docs/317.bb9fa3422a439c11ef07.manager.bundle.js +0 -1
- package/docs/363.5eecfb3735eae61195ab.manager.bundle.js +0 -586
- package/docs/363.5eecfb3735eae61195ab.manager.bundle.js.LICENSE.txt +0 -23
- package/docs/39.0fa13ab1.iframe.bundle.js +0 -2
- package/docs/39.0fa13ab1.iframe.bundle.js.LICENSE.txt +0 -14
- package/docs/407.e7bfe1ea814fec553911.manager.bundle.js +0 -2
- package/docs/407.e7bfe1ea814fec553911.manager.bundle.js.LICENSE.txt +0 -31
- package/docs/594.bb1a9f64.iframe.bundle.js +0 -2
- package/docs/594.bb1a9f64.iframe.bundle.js.LICENSE.txt +0 -12
- package/docs/600.5586e4df861d64de85f8.manager.bundle.js +0 -1
- package/docs/651.3a01b956.iframe.bundle.js +0 -1
- package/docs/690.46a1e07a.iframe.bundle.js +0 -1
- package/docs/701.691b9947.iframe.bundle.js +0 -1
- package/docs/935.19d3d944.iframe.bundle.js +0 -2
- package/docs/935.19d3d944.iframe.bundle.js.LICENSE.txt +0 -17
- package/docs/949.b11a185a.iframe.bundle.js +0 -2
- package/docs/949.b11a185a.iframe.bundle.js.LICENSE.txt +0 -69
- package/docs/962.ec348c19.iframe.bundle.js +0 -2
- package/docs/962.ec348c19.iframe.bundle.js.LICENSE.txt +0 -8
- package/docs/977.a265714880f883237672.manager.bundle.js +0 -1
- package/docs/favicon.ico +0 -0
- package/docs/main.2c610e68.iframe.bundle.js +0 -2
- package/docs/main.2c610e68.iframe.bundle.js.LICENSE.txt +0 -1
- package/docs/main.ec4e5d4f1933fc03f588.manager.bundle.js +0 -1
- package/docs/runtime~main.8a21756dfcf63c109f1d.manager.bundle.js +0 -1
- package/docs/runtime~main.c8f2837a.iframe.bundle.js +0 -1
- package/vue.config.js +0 -67
- /package/{.eslintrc.js → .eslintrc.cjs} +0 -0
- /package/docs/{static/media/lato-ext-300.dd124df8.woff2 → ~design-system/lib/fonts/lato/lato-ext-300.woff2} +0 -0
- /package/docs/{static/media/lato-ext-700.4223b364.woff2 → ~design-system/lib/fonts/lato/lato-ext-700.woff2} +0 -0
- /package/docs/{static/media/lato-ext.b267ec5a.woff2 → ~design-system/lib/fonts/lato/lato-ext.woff2} +0 -0
- /package/docs/{static/media/lato-latin-300.917632e3.woff2 → ~design-system/lib/fonts/lato/lato-latin-300.woff2} +0 -0
- /package/docs/{static/media/lato-latin-700.f1405bd8.woff2 → ~design-system/lib/fonts/lato/lato-latin-700.woff2} +0 -0
- /package/docs/{static/media/lato-latin.65e877e5.woff2 → ~design-system/lib/fonts/lato/lato-latin.woff2} +0 -0
- /package/lib/js/tests/{emptyModule.ts → emptyModule.cjs} +0 -0
- /package/lib/js/tests/{emptyTransformer.ts → emptyTransformer.cjs} +0 -0
- /package/{stylelint.config.js → stylelint.config.cjs} +0 -0
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import{a as i,b as d,I as n}from"./Icon-BiVaixmr.js";import{w as u}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const z={title:"Components/Icons/Icon",component:i,decorators:[u]},f=t=>({components:{Icon:i},setup(){return t},template:'<div class="sbIconList__singleIcon"><icon :icon="ICONS[icon]" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" /></div>',data(){return{ICONS:Object.freeze(n)}}}),e=f.bind({}),m={size:d.MEDIUM,icon:"HEAD_WITH_QUESTION_MARK",spinning:!1,touchable:!1,rotation:null,flippedVertical:!1,flippedHorizontal:!1},I={size:{control:"select",options:Object.values(d)},icon:{control:"select",options:Object.keys(n)},rotation:{control:"select",options:[null,90,180,270]}};e.argTypes=I;e.args=m;e.parameters={actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1552%3A34963"}};const g=t=>({components:{Icon:i},setup(){return t},template:'<div class="sbIconList"><div v-for="(icon, iconName) in ICONS" :key="iconName" class="sbIconList__icon"><icon :icon="icon" /><div>{{iconName}}</div></div></div>',data(){return{ICONS:Object.freeze(n)}}}),o=g.bind({});o.argTypes=I;o.args=m;var s,c,a;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
Icon
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: '<div class="sbIconList__singleIcon"><icon :icon="ICONS[icon]" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" /></div>',
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
ICONS: Object.freeze(ICONS)
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
})`,...(a=(c=e.parameters)==null?void 0:c.docs)==null?void 0:a.source}}};var r,l,p;o.parameters={...o.parameters,docs:{...(r=o.parameters)==null?void 0:r.docs,source:{originalSource:`args => ({
|
|
15
|
+
components: {
|
|
16
|
+
Icon
|
|
17
|
+
},
|
|
18
|
+
setup() {
|
|
19
|
+
return args;
|
|
20
|
+
},
|
|
21
|
+
template: '<div class="sbIconList">' + '<div v-for="(icon, iconName) in ICONS" :key="iconName" class="sbIconList__icon">' + '<icon :icon="icon" />' + '<div>{{iconName}}</div>' + '</div>' + '</div>',
|
|
22
|
+
data() {
|
|
23
|
+
return {
|
|
24
|
+
ICONS: Object.freeze(ICONS)
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
})`,...(p=(l=o.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};const _=["Interactive","AllIcons"];export{o as AllIcons,e as Interactive,_ as __namedExportsOrder,z as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as s,a as c,I as S}from"./Icon-BiVaixmr.js";import{I as o,D as _,c as N,f as a,i as r,g as l,e as d,h as O,b as m,a as p}from"./Button-CBZkgukP.js";import{u as B,d as v,t as A,o as u,c as I,n as i,f as U,h as y,g as b,e as h,v as M,r as C,b as f}from"./vue.esm-bundler-BSCmGRHc.js";import{i as R}from"./device-9fgosCm4.js";import{_ as z}from"./_plugin-vue_export-helper-DlAUqK2U.js";function D(){const e=B(!1),t=R();return{isHovered:e,mouseOver(){t||(e.value=!0)},mouseLeave(){t||(e.value=!1)},touchStart(){t&&(e.value=!0)},touchEnd(){t&&(e.value=!1)}}}const g={[o.XX_SMALL]:s.XXX_SMALL,[o.X_SMALL]:s.XX_SMALL,[o.SMALL]:s.X_SMALL,[o.MEDIUM]:s.SMALL,[o.LARGE]:s.MEDIUM},E=v({name:"IconButton",components:{WnlIcon:c,WnlButton:_},props:{size:{type:String,default:o.LARGE,validator(e){return Object.values(o).includes(e)}},radius:{type:String,default:N.CAPSULE,validator(e){return Object.values(N).includes(e)}},type:{type:String,default:a.ICON_ONLY,validator(e){return Object.values(a).includes(e)}},icon:{type:Object,required:!0,validator(e){return Object.values(S).includes(A(e))}},color:{type:String,default:r.PRIMARY,validator(e){return Object.values(r).includes(e)}},colorScheme:{type:String,default:l.ALL_IN_COLOR,validator(e){return Object.values(l).includes(e)}},elevation:{type:String,default:d.NONE,validator(e){return Object.values(d).includes(e)}},touchable:{type:Boolean,default:!0},state:{type:String,default:O.DEFAULT,validator(e){return Object.values(O).includes(e)}}},setup(){return{...D()}},data(){return{ICONS:Object.freeze(S),ICON_SIZES:Object.freeze(s),ICON_BUTTON_SIZES:Object.freeze(o),ICON_BUTTON_COLOR_SCHEMES:Object.freeze(l),ICON_BUTTON_TYPES:Object.freeze(a),ICON_BUTTON_STATES:Object.freeze(O),ICON_BUTTON_COLORS:Object.freeze(r),BUTTON_COLORS:Object.freeze(m)}},computed:{iconSize(){return this.type===a.ICON_ONLY?g[this.size]:this.size===o.XX_SMALL?s.XXX_SMALL:this.size===o.X_SMALL?s.XX_SMALL:s.X_SMALL},buttonType(){return this.type===a.ICON_ONLY?p.OUTLINED:this.type},computedColor(){if(this.isButtonColor)return null;if(this.type===a.ICON_ONLY)return this.color;throw new Error(`Color: ${this.color} is supported only in type: "icon-only"`)},isButtonColor(){return Object.values(r).includes(this.color)},colorClassName(){return`-ds-color-${this.color}`}}});function X(e,t,j,Y,V,P){const T=C("wnl-icon"),L=C("wnl-button");return u(),I("div",{class:i(["ds-iconButton",{"-ds-xx-small":e.size===e.ICON_BUTTON_SIZES.XX_SMALL,"-ds-x-small":e.size===e.ICON_BUTTON_SIZES.X_SMALL,"-ds-small":e.size===e.ICON_BUTTON_SIZES.SMALL,"-ds-large":e.size===e.ICON_BUTTON_SIZES.LARGE,"-ds-hovered":e.state===e.ICON_BUTTON_STATES.HOVERED,"-ds-focused":e.state===e.ICON_BUTTON_STATES.FOCUSED,"-ds-disabled":e.state===e.ICON_BUTTON_STATES.DISABLED,"-ds-loading":e.state===e.ICON_BUTTON_STATES.LOADING,[e.colorClassName]:e.isButtonColor,"-ds-touchable":e.touchable}]),style:M({color:e.computedColor}),onMouseover:t[0]||(t[0]=(...n)=>e.mouseOver&&e.mouseOver(...n)),onMouseleave:t[1]||(t[1]=(...n)=>e.mouseLeave&&e.mouseLeave(...n)),onTouchstart:t[2]||(t[2]=(...n)=>e.touchStart&&e.touchStart(...n)),onTouchend:t[3]||(t[3]=(...n)=>e.touchEnd&&e.touchEnd(...n))},[e.$slots.default&&e.type!==e.ICON_BUTTON_TYPES.ICON_ONLY?(u(),I("div",{key:0,class:i(["ds-iconButton__label",{"-ds-neutral":e.colorScheme===e.ICON_BUTTON_COLOR_SCHEMES.NEUTRAL_LABEL}])},[U(e.$slots,"default",{},void 0,!0)],2)):y("",!0),b(L,{ref:"button",class:i(["ds-iconButton__button",{"-ds-iconOnly":e.type===e.ICON_BUTTON_TYPES.ICON_ONLY,"-ds-hovered":e.state===e.ICON_BUTTON_STATES.HOVERED,"-ds-focused":e.state===e.ICON_BUTTON_STATES.FOCUSED,"-ds-disabled":e.state===e.ICON_BUTTON_STATES.DISABLED}]),radius:e.radius,type:e.buttonType,state:e.isHovered?e.ICON_BUTTON_STATES.HOVERED:e.ICON_BUTTON_STATES.DEFAULT,elevation:e.elevation,color:e.isButtonColor?e.color:null},{default:h(()=>[e.state===e.ICON_BUTTON_STATES.LOADING?(u(),f(T,{key:0,class:"ds-iconButton__icon",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.iconSize,spinning:""},null,8,["icon","size"])):(u(),f(T,{key:1,class:"ds-iconButton__icon",icon:e.icon,size:e.iconSize},null,8,["icon","size"]))]),_:1},8,["class","radius","type","state","elevation","color"])],38)}const F=z(E,[["render",X],["__scopeId","data-v-bf72a2a6"]]);E.__docgenInfo={displayName:"IconButton",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_SIZES.LARGE"}},{name:"radius",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_RADIUSES.CAPSULE"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_TYPES.ICON_ONLY"}},{name:"icon",type:{name:"object"},required:!0},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_COLORS.PRIMARY"}},{name:"colorScheme",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_COLOR_SCHEMES.ALL_IN_COLOR"}},{name:"elevation",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_ELEVATIONS.NONE"}},{name:"touchable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_STATES.DEFAULT"}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Buttons/IconButton/IconButton.vue"]};export{F as I};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import{I as o}from"./IconButton-COzU-vlz.js";import{I as N,f as T,c as S,g,e as v,h as D,i as I}from"./Button-CBZkgukP.js";import{I as r}from"./Icon-BiVaixmr.js";import{w as F}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const q={title:"Components/Buttons/IconButton",component:o,decorators:[F]},h=e=>({components:{IconButton:o},setup(){return e},computed:{isInverted(){return this.color==="inverted"}},data(){return{ICONS:Object.freeze(r),ICON_BUTTON_COLORS:Object.freeze(I)}},template:`<div :class="{ contrastBackground: isInverted }">
|
|
2
|
+
<icon-button
|
|
3
|
+
:icon="ICONS[icon]"
|
|
4
|
+
:size="size"
|
|
5
|
+
:type="type"
|
|
6
|
+
:radius="radius"
|
|
7
|
+
:color-scheme="colorScheme"
|
|
8
|
+
:touchable="touchable"
|
|
9
|
+
:elevation="elevation"
|
|
10
|
+
:color="color"
|
|
11
|
+
:state="state"
|
|
12
|
+
><span v-if="label !== ''">{{label}}</span></icon-button>
|
|
13
|
+
</div>`}),t=h.bind({}),P={size:N.LARGE,type:T.ICON_ONLY,radius:S.CAPSULE,label:"Zamknij",colorScheme:g.ALL_IN_COLOR,touchable:!0,elevation:v.NONE,color:"primary",state:D.DEFAULT,icon:"FA_XMARK"},M={size:{control:"select",options:Object.values(N)},type:{control:"select",options:Object.values(T)},radius:{control:"select",options:Object.values(S)},icon:{control:"select",options:Object.keys(r)},color:{control:"select",options:Object.values(I)},colorScheme:{control:"select",options:Object.values(g)},elevation:{control:"select",options:Object.values(v)},state:{control:"select",options:Object.values(D)}};t.argTypes=M;t.args=P;t.parameters={actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=180%3A2709"}};const i={size:{disable:!0},type:{disable:!0},radius:{disable:!0},icon:{disable:!0},color:{disable:!0},colorScheme:{disable:!0},elevation:{disable:!0},state:{disable:!0},touchable:{disable:!0},default:{disable:!0}},Y=e=>({components:{IconButton:o},setup(){return e},template:'<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" >Zamknij</icon-button>',data(){return{ICONS:Object.freeze(r),ICON_BUTTON_TYPES:Object.freeze(T)}}}),n=Y.bind({});n.argTypes=i;const Z=e=>({components:{IconButton:o},setup(){return e},template:'<icon-button :icon="ICONS.FA_CHEVRON_RIGHT" :type="ICON_BUTTON_TYPES.OUTLINED" :radius="BUTTON_RADIUSES.ROUNDED" />',data(){return{ICONS:Object.freeze(r),ICON_BUTTON_TYPES:Object.freeze(T),BUTTON_RADIUSES:Object.freeze(S)}}}),c=Z.bind({});c.argTypes=i;const W=e=>({components:{IconButton:o},setup(){return e},template:'<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" :color="ICON_BUTTON_COLORS.PRIMARY" :size="ICON_BUTTON_SIZES.X_SMALL" />',data(){return{ICONS:Object.freeze(r),ICON_BUTTON_TYPES:Object.freeze(T),ICON_BUTTON_COLORS:Object.freeze(I),ICON_BUTTON_SIZES:Object.freeze(N)}}}),s=W.bind({});s.argTypes=i;const H=e=>({components:{IconButton:o},setup(){return e},template:'<icon-button :icon="ICONS.FA_FLAG" :color="ICON_BUTTON_COLORS.INFO" :size="ICON_BUTTON_SIZES.MEDIUM" />',data(){return{ICONS:Object.freeze(r),ICON_BUTTON_COLORS:Object.freeze(I),ICON_BUTTON_SIZES:Object.freeze(N)}}}),a=H.bind({});a.argTypes=i;const k=e=>({components:{IconButton:o},setup(){return e},template:'<icon-button :icon="ICONS.HEAD_WITH_QUESTION_MARK" :color="ICON_BUTTON_COLORS.WARNING" :size="ICON_BUTTON_SIZES.MEDIUM" />',data(){return{ICONS:Object.freeze(r),ICON_BUTTON_COLORS:Object.freeze(I),ICON_BUTTON_SIZES:Object.freeze(N)}}}),O=k.bind({});O.argTypes=i;O.args={};var _,l,u;t.parameters={...t.parameters,docs:{...(_=t.parameters)==null?void 0:_.docs,source:{originalSource:`args => ({
|
|
14
|
+
components: {
|
|
15
|
+
IconButton
|
|
16
|
+
},
|
|
17
|
+
setup() {
|
|
18
|
+
return args;
|
|
19
|
+
},
|
|
20
|
+
computed: {
|
|
21
|
+
isInverted() {
|
|
22
|
+
return this.color === 'inverted';
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
data() {
|
|
26
|
+
return {
|
|
27
|
+
ICONS: Object.freeze(ICONS),
|
|
28
|
+
ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS)
|
|
29
|
+
};
|
|
30
|
+
},
|
|
31
|
+
template: \`<div :class="{ contrastBackground: isInverted }">
|
|
32
|
+
<icon-button
|
|
33
|
+
:icon="ICONS[icon]"
|
|
34
|
+
:size="size"
|
|
35
|
+
:type="type"
|
|
36
|
+
:radius="radius"
|
|
37
|
+
:color-scheme="colorScheme"
|
|
38
|
+
:touchable="touchable"
|
|
39
|
+
:elevation="elevation"
|
|
40
|
+
:color="color"
|
|
41
|
+
:state="state"
|
|
42
|
+
><span v-if="label !== ''">{{label}}</span></icon-button>
|
|
43
|
+
</div>\`
|
|
44
|
+
})`,...(u=(l=t.parameters)==null?void 0:l.docs)==null?void 0:u.source}}};var p,C,d;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`args => ({
|
|
45
|
+
components: {
|
|
46
|
+
IconButton
|
|
47
|
+
},
|
|
48
|
+
setup() {
|
|
49
|
+
return args;
|
|
50
|
+
},
|
|
51
|
+
template: '<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" >Zamknij</icon-button>',
|
|
52
|
+
data() {
|
|
53
|
+
return {
|
|
54
|
+
ICONS: Object.freeze(ICONS),
|
|
55
|
+
ICON_BUTTON_TYPES: Object.freeze(ICON_BUTTON_TYPES)
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
})`,...(d=(C=n.parameters)==null?void 0:C.docs)==null?void 0:d.source}}};var m,b,U;c.parameters={...c.parameters,docs:{...(m=c.parameters)==null?void 0:m.docs,source:{originalSource:`args => ({
|
|
59
|
+
components: {
|
|
60
|
+
IconButton
|
|
61
|
+
},
|
|
62
|
+
setup() {
|
|
63
|
+
return args;
|
|
64
|
+
},
|
|
65
|
+
template: '<icon-button :icon="ICONS.FA_CHEVRON_RIGHT" :type="ICON_BUTTON_TYPES.OUTLINED" :radius="BUTTON_RADIUSES.ROUNDED" />',
|
|
66
|
+
data() {
|
|
67
|
+
return {
|
|
68
|
+
ICONS: Object.freeze(ICONS),
|
|
69
|
+
ICON_BUTTON_TYPES: Object.freeze(ICON_BUTTON_TYPES),
|
|
70
|
+
BUTTON_RADIUSES: Object.freeze(BUTTON_RADIUSES)
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
})`,...(U=(b=c.parameters)==null?void 0:b.docs)==null?void 0:U.source}}};var B,E,R;s.parameters={...s.parameters,docs:{...(B=s.parameters)==null?void 0:B.docs,source:{originalSource:`args => ({
|
|
74
|
+
components: {
|
|
75
|
+
IconButton
|
|
76
|
+
},
|
|
77
|
+
setup() {
|
|
78
|
+
return args;
|
|
79
|
+
},
|
|
80
|
+
template: '<icon-button :icon="ICONS.FA_XMARK" :type="ICON_BUTTON_TYPES.FILLED" :color="ICON_BUTTON_COLORS.PRIMARY" :size="ICON_BUTTON_SIZES.X_SMALL" />',
|
|
81
|
+
data() {
|
|
82
|
+
return {
|
|
83
|
+
ICONS: Object.freeze(ICONS),
|
|
84
|
+
ICON_BUTTON_TYPES: Object.freeze(ICON_BUTTON_TYPES),
|
|
85
|
+
ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
|
|
86
|
+
ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES)
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
})`,...(R=(E=s.parameters)==null?void 0:E.docs)==null?void 0:R.source}}};var f,z,L;a.parameters={...a.parameters,docs:{...(f=a.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
|
|
90
|
+
components: {
|
|
91
|
+
IconButton
|
|
92
|
+
},
|
|
93
|
+
setup() {
|
|
94
|
+
return args;
|
|
95
|
+
},
|
|
96
|
+
template: '<icon-button :icon="ICONS.FA_FLAG" :color="ICON_BUTTON_COLORS.INFO" :size="ICON_BUTTON_SIZES.MEDIUM" />',
|
|
97
|
+
data() {
|
|
98
|
+
return {
|
|
99
|
+
ICONS: Object.freeze(ICONS),
|
|
100
|
+
ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
|
|
101
|
+
ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES)
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
})`,...(L=(z=a.parameters)==null?void 0:z.docs)==null?void 0:L.source}}};var j,y,A;O.parameters={...O.parameters,docs:{...(j=O.parameters)==null?void 0:j.docs,source:{originalSource:`args => ({
|
|
105
|
+
components: {
|
|
106
|
+
IconButton
|
|
107
|
+
},
|
|
108
|
+
setup() {
|
|
109
|
+
return args;
|
|
110
|
+
},
|
|
111
|
+
template: '<icon-button :icon="ICONS.HEAD_WITH_QUESTION_MARK" :color="ICON_BUTTON_COLORS.WARNING" :size="ICON_BUTTON_SIZES.MEDIUM" />',
|
|
112
|
+
data() {
|
|
113
|
+
return {
|
|
114
|
+
ICONS: Object.freeze(ICONS),
|
|
115
|
+
ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
|
|
116
|
+
ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES)
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
})`,...(A=(y=O.parameters)==null?void 0:y.docs)==null?void 0:A.source}}};const $=["Interactive","FilledWithLabel","OutlinedRounded","FilledPrimary","IconOnlyInfo","IconOnlyWarning"];export{s as FilledPrimary,n as FilledWithLabel,a as IconOnlyInfo,O as IconOnlyWarning,t as Interactive,c as OutlinedRounded,$ as __namedExportsOrder,q as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as i,I as u,b as s}from"./Icon-BiVaixmr.js";import{d,t as c,o as l,c as T,b as S,h as E,a as m,k as I,n as _,r as f}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as L}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral"},a={X_SMALL:"xSmall",SMALL:"small",MEDIUM:"medium"},t={DEFAULT:"default",DISABLED:"disabled"},o=d({name:"IconText",components:{Icon:i},props:{color:{type:String,default:n.NEUTRAL_WEAK,validator(e){return Object.values(n).includes(e)}},icon:{type:Object,required:!0,validate:e=>Object.values(u).includes(c(e))},isInteractive:{type:Boolean,default:!1},isLabelBold:{type:Boolean,default:!1},label:{type:String,required:!0},size:{type:String,default:a.X_SMALL,validator(e){return Object.values(a).includes(e)}},state:{type:String,default:t.DEFAULT,validator(e){return Object.values(t).includes(e)}}},data(){return{ICON_SIZES:Object.freeze(s),ICON_TEXT_COLORS:Object.freeze(n),ICON_TEXT_SIZES:Object.freeze(a),ICON_TEXT_STATES:Object.freeze(t)}},computed:{iconSize(){return[a.SMALL,a.X_SMALL].includes(this.size)?s.XX_SMALL:s.X_SMALL}}});function p(e,O,A,N,C,b){const r=f("icon");return l(),T("div",{class:_(["ds-iconText",{"-ds-neutralWeak":e.color===e.ICON_TEXT_COLORS.NEUTRAL_WEAK,"-ds-neutral":e.color===e.ICON_TEXT_COLORS.NEUTRAL,"-ds-xSmall":e.size===e.ICON_TEXT_SIZES.X_SMALL,"-ds-small":e.size===e.ICON_TEXT_SIZES.SMALL,"-ds-medium":e.size===e.ICON_TEXT_SIZES.MEDIUM,"-ds-bold":e.isLabelBold,"-ds-interactive":e.isInteractive&&e.state!==e.ICON_TEXT_STATES.DISABLED,"-ds-disabled":e.state===e.ICON_TEXT_STATES.DISABLED}])},[e.icon?(l(),S(r,{key:0,class:"ds-iconText__icon",icon:e.icon,size:e.iconSize},null,8,["icon","size"])):E("",!0),m("div",null,I(e.label),1)],2)}const z=L(o,[["render",p],["__scopeId","data-v-9702b3b2"]]);o.__docgenInfo={displayName:"IconText",exportName:"default",description:"",tags:{},props:[{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"ICON_TEXT_COLORS.NEUTRAL_WEAK"}},{name:"icon",type:{name:"object"},required:!0},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isLabelBold",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"},required:!0},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"ICON_TEXT_SIZES.X_SMALL"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"ICON_TEXT_STATES.DEFAULT"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/IconText/IconText.vue"]};export{z as I,a,n as b,t as c};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import{I as s,a,b as r,c}from"./IconText-DDrVXWHS.js";import{I as i}from"./Icon-BiVaixmr.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const d={title:"Components/IconText",component:s},p=l=>({components:{IconText:s},setup(){return l},template:`
|
|
2
|
+
<icon-text
|
|
3
|
+
:color="color"
|
|
4
|
+
:icon="ICONS[icon]"
|
|
5
|
+
:label="label"
|
|
6
|
+
:is-interactive="isInteractive"
|
|
7
|
+
:is-label-bold="isLabelBold"
|
|
8
|
+
:size="size"
|
|
9
|
+
:state="state"
|
|
10
|
+
/>`,data(){return{ICONS:Object.freeze(i)}}}),e=p.bind({});e.args={size:a.X_SMALL,color:r.NEUTRAL_WEAK,label:"Tagi lub filtry po przecinku",isLabelBold:!1,icon:"FA_TAGS",isInteractive:!1,state:c.DEFAULT};const I={color:{control:"select",options:Object.values(r)},icon:{control:"select",options:Object.keys(i)},size:{control:"select",options:Object.values(a)},state:{control:"select",options:Object.values(c)}};e.argTypes=I;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=4832%3A81133"}};var t,o,n;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
|
|
11
|
+
components: {
|
|
12
|
+
IconText
|
|
13
|
+
},
|
|
14
|
+
setup() {
|
|
15
|
+
return args;
|
|
16
|
+
},
|
|
17
|
+
template: \`
|
|
18
|
+
<icon-text
|
|
19
|
+
:color="color"
|
|
20
|
+
:icon="ICONS[icon]"
|
|
21
|
+
:label="label"
|
|
22
|
+
:is-interactive="isInteractive"
|
|
23
|
+
:is-label-bold="isLabelBold"
|
|
24
|
+
:size="size"
|
|
25
|
+
:state="state"
|
|
26
|
+
/>\`,
|
|
27
|
+
data() {
|
|
28
|
+
return {
|
|
29
|
+
ICONS: Object.freeze(ICONS)
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
})`,...(n=(o=e.parameters)==null?void 0:o.docs)==null?void 0:n.source}}};const S=["Interactive"];export{e as Interactive,S as __namedExportsOrder,d as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d,o as a,c as o,a as m,n as l,g as p,h as I,r as c}from"./vue.esm-bundler-BSCmGRHc.js";import{D as g,S as _}from"./Skeleton-BbafKE6W.js";import{_ as f}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={CONTAIN:"contain",COVER:"cover"},r=d({name:"Image",components:{DsSkeleton:g},props:{fit:{type:String,default:n.COVER},src:{type:String,required:!0}},data(){return{isLoading:!0,IMAGE_FITS:Object.freeze(n),SKELETON_RADIUS_SIZES:Object.freeze(_)}}}),u={class:"ds-image"},S=["src"],E={key:0,class:"ds-image__loader"};function N(e,s,A,O,v,C){const t=c("ds-skeleton");return a(),o("div",u,[m("img",{class:l(["ds-image__image",{"-ds-contain":e.fit===e.IMAGE_FITS.CONTAIN,"-ds-cover":e.fit===e.IMAGE_FITS.COVER}]),draggable:"false",loading:"lazy",src:e.src,onError:s[0]||(s[0]=i=>e.isLoading=!1),onLoad:s[1]||(s[1]=i=>e.isLoading=!1)},null,42,S),e.isLoading?(a(),o("div",E,[p(t,{radius:e.SKELETON_RADIUS_SIZES.SMALL},null,8,["radius"])])):I("",!0)])}const V=f(r,[["render",N],["__scopeId","data-v-6d9656b0"]]);r.__docgenInfo={displayName:"Image",exportName:"default",description:"",tags:{},props:[{name:"fit",type:{name:"ImageFit"},defaultValue:{func:!1,value:"IMAGE_FITS.COVER"}},{name:"src",type:{name:"string"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Image/Image.vue"]};export{V as I,n as a};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{I as a,a as n}from"./Image-Drmyqqsn.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./Skeleton-BbafKE6W.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const d={title:"Components/Image",component:a},i=o=>({components:{DsImage:a},setup(){return o},template:`
|
|
2
|
+
<div style="height: 500px; width: 800px;">
|
|
3
|
+
<ds-image
|
|
4
|
+
:fit="fit"
|
|
5
|
+
:src="src"
|
|
6
|
+
/>
|
|
7
|
+
</div>`}),e=i.bind({});e.args={fit:n.COVER,src:"https://storage.googleapis.com/media-manager/lek/018f6291-3956-7342-8e6b-0ee901d48643/018f6291-3a56-7213-aef6-b5da7253839f.jpg"};e.argTypes={fit:{control:"select",options:Object.values(n)}};var t,s,r;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
|
|
8
|
+
components: {
|
|
9
|
+
DsImage
|
|
10
|
+
},
|
|
11
|
+
setup() {
|
|
12
|
+
return args;
|
|
13
|
+
},
|
|
14
|
+
template: \`
|
|
15
|
+
<div style="height: 500px; width: 800px;">
|
|
16
|
+
<ds-image
|
|
17
|
+
:fit="fit"
|
|
18
|
+
:src="src"
|
|
19
|
+
/>
|
|
20
|
+
</div>\`
|
|
21
|
+
})`,...(r=(s=e.parameters)==null?void 0:s.docs)==null?void 0:r.source}}};const l=["Interactive"];export{e as Interactive,l as __namedExportsOrder,d as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as c,o as e,c as s,F as g,m as b,a as n,k as o,v as F,h as r,l as z,r as f,b as v,n as $}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as m}from"./_plugin-vue_export-helper-DlAUqK2U.js";const k={COLORS:"colors",TYPOGRAPHY:"typography"},j=c({name:"ItemsColor",props:{items:{type:Array,required:!0}}}),T={class:"itemsListItem"},S={class:"itemsListItem__id"},w={class:"itemsListItem__value"},E={class:"itemsListItem__color"};function N(t,a,i,p,x,_){return e(),s("table",T,[(e(!0),s(g,null,b(t.items,l=>(e(),s("tr",{key:l.id,class:"itemsListItem__row"},[n("td",S,o(l.label),1),n("td",w,o(l.value),1),n("td",E,[n("span",{style:F({background:l.value}),class:"itemsListItem__tile"},null,4)])]))),128))])}const O=m(j,[["render",N],["__scopeId","data-v-20b8c23a"]]);j.__docgenInfo={displayName:"ItemsColor",exportName:"default",description:"",tags:{},props:[{name:"items",type:{name:"Array<ColorToken>"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/styles/ItemsColor.vue"]};const q=[{id:"tokensjsontypographylineheightbase",label:"base",labelFull:"typography-line-height-base",value:"16px",base:16,ratio:null},{id:"tokensjsontypographylineheight6xl",label:"6xl",labelFull:"typography-line-height-6xl",value:"58px",base:16,ratio:3.625},{id:"tokensjsontypographylineheight5xl",label:"5xl",labelFull:"typography-line-height-5xl",value:"52px",base:16,ratio:3.25},{id:"tokensjsontypographylineheight4xl",label:"4xl",labelFull:"typography-line-height-4xl",value:"44px",base:16,ratio:2.75},{id:"tokensjsontypographylineheight3xl",label:"3xl",labelFull:"typography-line-height-3xl",value:"34px",base:16,ratio:2.125},{id:"tokensjsontypographylineheight2xl",label:"2xl",labelFull:"typography-line-height-2xl",value:"28px",base:16,ratio:1.75},{id:"tokensjsontypographylineheightxl",label:"xl",labelFull:"typography-line-height-xl",value:"26px",base:16,ratio:1.625},{id:"tokensjsontypographylineheightl",label:"l",labelFull:"typography-line-height-l",value:"24px",base:16,ratio:1.5},{id:"tokensjsontypographylineheightm",label:"m",labelFull:"typography-line-height-m",value:"22px",base:16,ratio:1.375},{id:"tokensjsontypographylineheights",label:"s",labelFull:"typography-line-height-s",value:"20px",base:16,ratio:1.25},{id:"tokensjsontypographylineheightxs",label:"xs",labelFull:"typography-line-height-xs",value:"18px",base:16,ratio:1.125},{id:"tokensjsontypographylineheight2xs",label:"2xs",labelFull:"typography-line-height-2xs",value:"16px",base:16,ratio:1},{id:"tokensjsontypographylineheight3xs",label:"3xs",labelFull:"typography-line-height-3xs",value:"14px",base:16,ratio:.875},{id:"tokensjsontypographylineheight4xs",label:"4xs",labelFull:"typography-line-height-4xs",value:"12px",base:16,ratio:.75},{id:"tokensjsontypographylineheight5xs",label:"5xs",labelFull:"typography-line-height-5xs",value:"10px",base:16,ratio:.625}],A=[{id:"tokensjsontypographyfontsizebase",label:"base",labelFull:"typography-font-size-base",value:"16px",base:16,ratio:null},{id:"tokensjsontypographyfontsize5xl",label:"5xl",labelFull:"typography-font-size-5xl",value:"44px",base:16,ratio:2.75},{id:"tokensjsontypographyfontsize4xl",label:"4xl",labelFull:"typography-font-size-4xl",value:"36px",base:16,ratio:2.25},{id:"tokensjsontypographyfontsize3xl",label:"3xl",labelFull:"typography-font-size-3xl",value:"28px",base:16,ratio:1.75},{id:"tokensjsontypographyfontsize2xl",label:"2xl",labelFull:"typography-font-size-2xl",value:"24px",base:16,ratio:1.5},{id:"tokensjsontypographyfontsizexl",label:"xl",labelFull:"typography-font-size-xl",value:"20px",base:16,ratio:1.25},{id:"tokensjsontypographyfontsizel",label:"l",labelFull:"typography-font-size-l",value:"18px",base:16,ratio:1.125},{id:"tokensjsontypographyfontsizem",label:"m",labelFull:"typography-font-size-m",value:"16px",base:16,ratio:1},{id:"tokensjsontypographyfontsizes",label:"s",labelFull:"typography-font-size-s",value:"14px",base:16,ratio:.875},{id:"tokensjsontypographyfontsizexs",label:"xs",labelFull:"typography-font-size-xs",value:"12px",base:16,ratio:.75},{id:"tokensjsontypographyfontsize2xs",label:"2xs",labelFull:"typography-font-size-2xs",value:"10px",base:16,ratio:.625},{id:"tokensjsontypographyfontsize3xs",label:"3xs",labelFull:"typography-font-size-3xs",value:"8px",base:16,ratio:.5}],C=[{id:"tokensjsontypographyletterspacingxs",label:"xs",labelFull:"typography-letter-spacing-xs",value:"0",base:null,ratio:null},{id:"tokensjsontypographyletterspacings",label:"s",labelFull:"typography-letter-spacing-s",value:"0.005em",base:null,ratio:null},{id:"tokensjsontypographyletterspacingm",label:"m",labelFull:"typography-letter-spacing-m",value:"0.0075em",base:null,ratio:null},{id:"tokensjsontypographyletterspacingl",label:"l",labelFull:"typography-letter-spacing-l",value:"0.015em",base:null,ratio:null},{id:"tokensjsontypographyletterspacingxl",label:"xl",labelFull:"typography-letter-spacing-xl",value:"0.06em",base:null,ratio:null}],P=[{id:"tokensjsontypographytexttransformnone",label:"none",labelFull:"typography-text-transform-none",value:"none",base:null,ratio:null},{id:"tokensjsontypographytexttransformuppercase",label:"uppercase",labelFull:"typography-text-transform-uppercase",value:"uppercase",base:null,ratio:null}],Y=[{id:"tokensjsontypographytextdecorationnone",label:"none",labelFull:"typography-text-decoration-none",value:"none",base:null,ratio:null},{id:"tokensjsontypographytextdecorationunderline",label:"underline",labelFull:"typography-text-decoration-underline",value:"underline",base:null,ratio:null}],R=[{id:"tokensjsontypographyfontfamilylato",label:"lato",labelFull:"typography-font-families-lato",value:"Lato",base:null,ratio:null}],B=[{id:"tokensjsontypographyfontweightregular",label:"normal",labelFull:"typography-font-weight-normal",value:"normal",base:null,ratio:null},{id:"tokensjsontypographyfontweightbold",label:"bold",labelFull:"typography-font-weight-bold",value:"bold",base:null,ratio:null},{id:"tokensjsontypographyfontweightlight",label:"light",labelFull:"typography-font-weight-light",value:"light",base:null,ratio:null}],H=[{id:"tokensjsontypographyfontstylenormal",label:"normal",labelFull:"typography-font-style-normal",value:"normal",base:null,ratio:null},{id:"tokensjsontypographyfontstyleitalic",label:"italic",labelFull:"typography-font-style-italic",value:"italic",base:null,ratio:null}],K={lineHeight:q,fontSize:A,letterSpacing:C,textTransform:P,textDecoration:Y,fontFamily:R,fontWeight:B,fontStyle:H},I=c({name:"ItemsTypography",props:{items:{type:Array,required:!0}},methods:{attributesAsStyle(t){let a="";return t.forEach(i=>{a+=i.property+": var(--typography-"+i.value+");"}),a},variableToValue(t){let a;return Object.values(K).find(i=>i.some(p=>p.labelFull==="typography-"+t?(a=p.value,!0):!1)),a}}}),V={class:"itemsListItem"},D={key:0,class:"itemsListItem__label"},G={key:1,class:"itemsListItem__value"},W={key:2,class:"itemsListItem__value"},J={key:3,class:"itemsListItem__token"},M={key:4,class:"itemsListItem__attributes"},Q={key:5,class:"itemsListItem__example"};function U(t,a,i,p,x,_){return e(),s("table",V,[(e(!0),s(g,null,b(t.items,l=>(e(),s("tr",{key:l.id,class:"itemsListItem__row"},[l.label?(e(),s("td",D,o(l.label),1)):r("",!0),l.value?(e(),s("td",G,o(l.value),1)):r("",!0),l.ratio?(e(),s("td",W,o(l.ratio),1)):r("",!0),l.token?(e(),s("td",J,o(l.token),1)):r("",!0),l.attributesRaw?(e(),s("td",M,[(e(!0),s(g,null,b(l.attributesRaw,y=>(e(),s("div",{key:l.id+y.value},[n("strong",null,o(y.property),1),z(": "),n("span",null,"{ "+o(y.value)+" = "+o(t.variableToValue(y.value))+" }",1)]))),128))])):r("",!0),l.attributes?(e(),s("td",Q,[n("div",{style:F(t.attributesAsStyle(l.attributesRaw))}," Enim ullam temporibus quasi unde quam. Eaque praesentium dolor qui necessitatibus magnam voluptatem. Eos aut esse earum. ",4)])):r("",!0)]))),128))])}const X=m(I,[["render",U],["__scopeId","data-v-3b92eaa9"]]);I.__docgenInfo={displayName:"ItemsTypography",exportName:"default",description:"",tags:{},props:[{name:"items",type:{name:"Array<TypographyToken>"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/styles/ItemsTypography.vue"]};const L=c({name:"ItemsList",components:{ItemsColor:O,ItemsTypography:X},props:{itemsLists:{type:Array,required:!0},type:{type:String,required:!0,validator(t){return Object.values(k).includes(t)}}},data(){return{TOKENS_TYPES:Object.freeze(k)}},computed:{filteredItemsLists(){let t=[];return this.itemsLists.forEach((a,i)=>{if(a.disabled)for(let p in a.list)p!==a.disabled&&t.push(this.itemsLists[i]);else t.push(this.itemsLists[i])}),t}}}),Z={class:"itemsList__row"},ee={class:"itemsList__title"},te={class:"itemsList__categories"},le=["id"];function se(t,a,i,p,x,_){const l=f("items-color"),y=f("items-typography");return e(),s("div",null,[(e(!0),s(g,null,b(t.filteredItemsLists,u=>(e(),s("div",{key:u.title},[n("div",{class:$(["itemsList",{[u.class]:u.class}])},[n("div",Z,[n("h2",ee,o(u.title),1),n("ol",te,[(e(!0),s(g,null,b(u.list,(d,h)=>(e(),s("li",{key:h,class:"itemsListItem__category"},o(h),1))),128))])]),(e(!0),s(g,null,b(u.list,(d,h)=>(e(),s("div",{key:h,class:"itemsList__row"},[n("h3",{id:"category-"+h,class:"itemsList__category"},o(h),9,le),t.type===t.TOKENS_TYPES.COLORS?(e(),v(l,{key:0,items:d},null,8,["items"])):r("",!0),t.type===t.TOKENS_TYPES.TYPOGRAPHY?(e(),v(y,{key:1,items:d},null,8,["items"])):r("",!0)]))),128))],2)]))),128))])}const ne=m(L,[["render",se],["__scopeId","data-v-eecba669"]]);L.__docgenInfo={displayName:"ItemsList",exportName:"default",description:"",tags:{},props:[{name:"itemsLists",type:{name:"Array<ItemsListsItem>"},required:!0},{name:"type",type:{name:"string"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/styles/ItemsList.vue"]};export{ne as I,k as T,K as s};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as t,o as r,c as n,a as i,n as a,v as o}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as d}from"./_plugin-vue_export-helper-DlAUqK2U.js";const l={NEUTRAL_HEAVY:"neutralHeavy",NEUTRAL_STRONG:"neutralStrong",SUCCESS:"success",WARNING:"warning",DANGER:"danger",INFO:"info"},m={SMALL:"small",MEDIUM:"medium",LARGE:"large"},s=t({name:"LoadingBar",props:{color:{type:String,default:l.NEUTRAL_HEAVY},size:{type:String,default:m.LARGE},time:{type:String,required:!0}},data(){return{intervalId:0,width:0}},computed:{sizeClassName(){return`-ds-size-${this.size}`},loadingBarStyles(){return{width:`${this.width}%`,transition:`width ${this.time}s linear`}}},mounted(){if(this.time==="0"){this.width=100;return}setTimeout(()=>{this.width=100},0)}});function u(e,c,p,_,g,L){return r(),n("div",{class:a(["ds-loadingBar",[e.sizeClassName]])},[i("span",{class:a(["ds-loadingBar__loader",`-ds-border-color-${e.color}`]),style:o(e.loadingBarStyles)},null,6)],2)}const S=d(s,[["render",u],["__scopeId","data-v-281bbb7d"]]);s.__docgenInfo={displayName:"LoadingBar",exportName:"default",description:"",tags:{},props:[{name:"color",type:{name:"LoadingBarColors"},defaultValue:{func:!1,value:"LOADING_BAR_COLORS.NEUTRAL_HEAVY"}},{name:"size",type:{name:"LoadingBarSizes"},defaultValue:{func:!1,value:"LOADING_BAR_SIZES.LARGE"}},{name:"time",type:{name:"string"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/LoadingBar/LoadingBar.vue"]};export{l as L,S as a,m as b};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import{a as r,b as a,L as n}from"./LoadingBar-D0iVLCyJ.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const L={title:"Components/LoadingBar",component:r},c=i=>({components:{DsLoadingBar:r},setup(){return i},template:'<ds-loading-bar :size="size" :color="color" :time="time" />'}),e=c.bind({}),m={size:a.LARGE,color:n.NEUTRAL_HEAVY,time:"5"},p={size:{control:"select",options:Object.values(a)},color:{control:"select",options:Object.values(n)}};e.argTypes=p;e.args=m;e.parameters={design:{type:"figma",url:"https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8375-32853"}};var o,t,s;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
DsLoadingBar: LoadingBar
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: \`<ds-loading-bar :size="size" :color="color" :time="time" />\`
|
|
9
|
+
})`,...(s=(t=e.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};const u=["Interactive"];export{e as Interactive,u as __namedExportsOrder,L as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{F as v,b as y,a as C}from"./FeatureIcon-n65RPvyA.js";import{I as d,b as g}from"./Icon-BiVaixmr.js";import{D as L,d as u,b as i,e as A,a as N,i as k}from"./Button-CBZkgukP.js";import{I as U}from"./IconButton-COzU-vlz.js";import{d as M,t as c,o,c as r,a as n,g as D,x as b,h as a,n as f,b as m,k as s,f as F,e as S,r as p,l as O}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as R}from"./_plugin-vue_export-helper-DlAUqK2U.js";const E={SMALL:"small",MEDIUM:"medium"},I={SMALL:"small",MEDIUM:"medium"},B=M({name:"Modal",components:{FeatureIcon:v,WnlButton:L,WnlIconButton:U},props:{size:{type:String,default:E.MEDIUM,validator:e=>Object.values(E).includes(e)},danger:{type:Boolean,default:!1},headerTitleSize:{type:String,default:I.MEDIUM,validator:e=>Object.values(I).includes(e)},headerTitle:{type:String,required:!0},headerSubtitle:{type:String,default:null},headerFeatureIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(c(e))}},headerFeatureIconColor:{type:String,default:y.NEUTRAL,validator(e){return Object.values(y).includes(e)}},contentCentered:{type:Boolean,default:!1},headerImage:{type:String,default:null},footerPrimaryButtonText:{type:String,default:null},footerPrimaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(c(e))}},footerPrimaryButtonState:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},footerSecondaryButtonText:{type:String,default:null},footerSecondaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(c(e))}},footerSecondaryButtonState:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},footerTertiaryButtonText:{type:String,default:null},footerTertiaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(c(e))}},footerTertiaryButtonState:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},footerCheckboxText:{type:String,default:null}},emits:["tertiary-button-click","checkbox-change","close-modal","secondary-button-click","primary-button-click"],data(){return{BUTTON_COLORS:Object.freeze(i),BUTTON_ELEVATIONS:Object.freeze(A),BUTTON_TYPES:Object.freeze(N),ICONS:Object.freeze(d),ICON_BUTTON_COLORS:Object.freeze(k),ICON_SIZES:Object.freeze(g),MODAL_SIZES:Object.freeze(E),MODAL_HEADER_TITLE_SIZES:Object.freeze(I),FEATURE_ICON_SIZES:Object.freeze(C)}},computed:{calcHeaderFeatureIconColor(){return this.danger?y.DANGER:this.headerFeatureIconColor},calcFooterPrimaryButtonColor(){return this.danger?i.NEUTRAL:i.PRIMARY},calcFooterSecondaryButtonColor(){return this.danger?i.DANGER:i.NEUTRAL},calcSingleColumn(){return!((this.footerTertiaryButtonText||this.footerCheckboxText)&&(this.footerSecondaryButtonText||this.footerPrimaryButtonText))},displayFooter(){return this.footerTertiaryButtonText||this.footerCheckboxText||this.footerSecondaryButtonText||this.footerPrimaryButtonText}}}),j={class:"ds-modal__scrollableWrapper"},V=["src"],P={class:"ds-modal__header"},z={key:1,class:"ds-modal__headerSubtitle"},$={key:0,class:"ds-modal__slotContent"},Z={key:0,class:"ds-modal__footerCtaSecondary"},w={key:0,class:"ds-modal__checkbox"},H={for:"ds-modal__checkboxInput",class:"ds-modal__checkboxLabel"},Y={key:1,class:"ds-modal__footerCtaPrimary"};function W(e,t,X,G,q,K){const _=p("wnl-icon-button"),h=p("feature-icon"),T=p("wnl-button");return o(),r("div",{class:"ds-modal",onClick:t[5]||(t[5]=b(l=>e.$emit("close-modal"),["self"]))},[n("div",{class:f(["ds-modal__wrapper",{"-ds-small":e.size===e.MODAL_SIZES.SMALL}])},[D(_,{touchable:"",icon:e.ICONS.FA_XMARK,class:"ds-modal__close",size:e.ICON_SIZES.SMALL,elevation:e.BUTTON_ELEVATIONS.X_SMALL,color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,onClick:t[0]||(t[0]=b(l=>e.$emit("close-modal"),["stop"]))},null,8,["icon","size","elevation","color"]),n("div",j,[e.headerImage?(o(),r("img",{key:0,class:"ds-modal__image",src:e.headerImage,alt:""},null,8,V)):a("",!0),n("div",{class:f(["ds-modal__content",{"-ds-centered":e.contentCentered}])},[n("div",P,[e.headerFeatureIcon?(o(),m(h,{key:0,class:"ds-modal__headerFeatureIcon",color:e.calcHeaderFeatureIconColor,icon:e.headerFeatureIcon,size:e.FEATURE_ICON_SIZES.X_LARGE,"double-background":""},null,8,["color","icon","size"])):a("",!0),n("h4",{class:f(["ds-modal__headerTitle",{"-ds-small":e.headerTitleSize===e.MODAL_HEADER_TITLE_SIZES.SMALL}])},s(e.headerTitle),3),e.headerSubtitle?(o(),r("h5",z,s(e.headerSubtitle),1)):a("",!0)]),e.$slots.default?(o(),r("div",$,[F(e.$slots,"default",{},void 0,!0)])):a("",!0),e.displayFooter?(o(),r("div",{key:1,class:f(["ds-modal__footer",{"-ds-singleColumn":e.calcSingleColumn}])},[e.footerTertiaryButtonText||e.footerCheckboxText?(o(),r("div",Z,[e.footerCheckboxText?(o(),r("div",w,[n("input",{id:"ds-modal__checkboxInput",type:"checkbox",checked:!1,onChange:t[1]||(t[1]=l=>e.$emit("checkbox-change",l.target.checked))},null,32),n("label",H,s(e.footerCheckboxText),1)])):a("",!0),e.footerTertiaryButtonText?(o(),m(T,{key:1,type:e.BUTTON_TYPES.TEXT,color:e.BUTTON_COLORS.NEUTRAL,"icon-left":e.footerTertiaryButtonIcon,state:e.footerTertiaryButtonState,class:"ds-modal__tertiaryButton",onClick:t[2]||(t[2]=l=>e.$emit("tertiary-button-click"))},{default:S(()=>[O(s(e.footerTertiaryButtonText),1)]),_:1},8,["type","color","icon-left","state"])):a("",!0)])):a("",!0),e.footerSecondaryButtonText||e.footerPrimaryButtonText?(o(),r("div",Y,[e.footerSecondaryButtonText?(o(),m(T,{key:0,type:e.BUTTON_TYPES.OUTLINED,color:e.calcFooterSecondaryButtonColor,"icon-right":e.footerSecondaryButtonIcon,state:e.footerSecondaryButtonState,onClick:t[3]||(t[3]=l=>e.$emit("secondary-button-click"))},{default:S(()=>[O(s(e.footerSecondaryButtonText),1)]),_:1},8,["type","color","icon-right","state"])):a("",!0),e.footerPrimaryButtonText?(o(),m(T,{key:1,color:e.calcFooterPrimaryButtonColor,"icon-right":e.footerPrimaryButtonIcon,state:e.footerPrimaryButtonState,onClick:t[4]||(t[4]=l=>e.$emit("primary-button-click"))},{default:S(()=>[O(s(e.footerPrimaryButtonText),1)]),_:1},8,["color","icon-right","state"])):a("",!0)])):a("",!0)],2)):a("",!0)],2)])],2)])}const ae=R(B,[["render",W],["__scopeId","data-v-36038c45"]]);B.__docgenInfo={displayName:"Modal",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"MODAL_SIZES.MEDIUM"}},{name:"danger",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerTitleSize",type:{name:"string"},defaultValue:{func:!1,value:"MODAL_HEADER_TITLE_SIZES.MEDIUM"}},{name:"headerTitle",type:{name:"string"},required:!0},{name:"headerSubtitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIconColor",type:{name:"string"},defaultValue:{func:!1,value:"FEATURE_ICON_COLOR.NEUTRAL"}},{name:"contentCentered",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerImage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerSecondaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerTertiaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerTertiaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerTertiaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerCheckboxText",type:{name:"string"},defaultValue:{func:!1,value:"null"}}],events:[{name:"close-modal"},{name:"checkbox-change"},{name:"tertiary-button-click"},{name:"secondary-button-click"},{name:"primary-button-click"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modals/Modal/Modal.vue"]};export{ae as D,E as M,I as a};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import{D as g,M as u,a as i}from"./Modal-CJ0d6Je9.js";import{I as n}from"./Icon-BiVaixmr.js";import{b as c}from"./FeatureIcon-n65RPvyA.js";import{d as t}from"./Button-CBZkgukP.js";import"./IconButton-COzU-vlz.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const D={title:"Components/Modals/Modal",component:g},s=b=>({components:{Modal:g},setup(){return b},template:'<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" :headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" :footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" :footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" :footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" :footerCheckboxText="footerCheckboxText" :headerImage="headerImage"><div v-html="defaultSlot" /></modal>',data(){return{ICONS:Object.freeze(n)}}}),e=s.bind({}),O={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:u.MEDIUM,danger:!1,contentCentered:!1,headerImage:"",headerTitleSize:i.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_QUESTION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"Tertiary M",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},l={size:{control:"select",options:Object.values(u)},danger:{control:"boolean"},headerTitleSize:{control:"select",options:Object.values(i)},headerTitle:{control:"text"},headerImage:{control:"text"},headerSubtitle:{control:"text"},headerFeatureIcon:{control:"select",options:[null,...Object.keys(n)]},headerFeatureIconColor:{control:"select",options:Object.values(c)},contentCentered:{control:"boolean"},footerPrimaryButtonText:{control:"text"},footerPrimaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerPrimaryButtonState:{control:"select",options:Object.values(t)},footerSecondaryButtonText:{control:"text"},footerSecondaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerSecondaryButtonState:{control:"select",options:Object.values(t)},footerTertiaryButtonText:{control:"text"},footerTertiaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerTertiaryButtonState:{control:"select",options:Object.values(t)},footerCheckboxText:{control:"text"},onCloseModal:{action:"close-modal"},onCheckboxChange:{action:"checkbox-change"},onPrimaryButtonClick:{action:"primary-button-click"},onSecondaryButtonClick:{action:"secondary-button-click"},onTertiaryButtonClick:{action:"tertiary-button-click"}};e.argTypes=l;e.args=O;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5658%3A96416&t=lgUXCZhvWDuBr3qw-0"}};const E={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:u.MEDIUM,danger:!0,contentCentered:!1,headerImage:"",headerTitleSize:i.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},o=s.bind({});o.argTypes=l;o.args=E;const q={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:u.MEDIUM,danger:!1,contentCentered:!1,headerImage:"https://wiecejnizlek.pl/wp-content/uploads/2022/10/WNL-Strona-cover-dla-filmu-2-1.jpg",headerTitleSize:i.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:null,headerFeatureIconColor:null,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},r=s.bind({});r.argTypes=l;r.args=q;const P={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:u.SMALL,danger:!1,contentCentered:!0,headerImage:"",headerTitleSize:i.SMALL,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},a=s.bind({});a.argTypes=l;a.args=P;var d,m,S;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
Modal
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
ICONS: Object.freeze(ICONS)
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
})`,...(S=(m=e.parameters)==null?void 0:m.docs)==null?void 0:S.source}}};var f,T,y;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
|
|
15
|
+
components: {
|
|
16
|
+
Modal
|
|
17
|
+
},
|
|
18
|
+
setup() {
|
|
19
|
+
return args;
|
|
20
|
+
},
|
|
21
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
|
|
22
|
+
data() {
|
|
23
|
+
return {
|
|
24
|
+
ICONS: Object.freeze(ICONS)
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
})`,...(y=(T=o.parameters)==null?void 0:T.docs)==null?void 0:y.source}}};var I,B,p;r.parameters={...r.parameters,docs:{...(I=r.parameters)==null?void 0:I.docs,source:{originalSource:`args => ({
|
|
28
|
+
components: {
|
|
29
|
+
Modal
|
|
30
|
+
},
|
|
31
|
+
setup() {
|
|
32
|
+
return args;
|
|
33
|
+
},
|
|
34
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
|
|
35
|
+
data() {
|
|
36
|
+
return {
|
|
37
|
+
ICONS: Object.freeze(ICONS)
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
})`,...(p=(B=r.parameters)==null?void 0:B.docs)==null?void 0:p.source}}};var h,C,x;a.parameters={...a.parameters,docs:{...(h=a.parameters)==null?void 0:h.docs,source:{originalSource:`args => ({
|
|
41
|
+
components: {
|
|
42
|
+
Modal
|
|
43
|
+
},
|
|
44
|
+
setup() {
|
|
45
|
+
return args;
|
|
46
|
+
},
|
|
47
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
|
|
48
|
+
data() {
|
|
49
|
+
return {
|
|
50
|
+
ICONS: Object.freeze(ICONS)
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
})`,...(x=(C=a.parameters)==null?void 0:C.docs)==null?void 0:x.source}}};const U=["Interactive","Danger","WithImage","SizeSAndCentered"];export{o as Danger,e as Interactive,a as SizeSAndCentered,r as WithImage,U as __namedExportsOrder,D as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{D as i,M as s,a as f}from"./Modal-CJ0d6Je9.js";import{I as o}from"./Icon-BiVaixmr.js";import{b as l}from"./FeatureIcon-n65RPvyA.js";import{d as m,t as r,o as c,b as y,e as p,r as S,f as b}from"./vue.esm-bundler-BSCmGRHc.js";import{d as a}from"./Button-CBZkgukP.js";import{_ as g}from"./_plugin-vue_export-helper-DlAUqK2U.js";const u=m({name:"ModalDialog",components:{DsModal:i},props:{danger:{type:Boolean,default:!1},headerTitle:{type:String,required:!0},headerSubtitle:{type:String,default:null},headerFeatureIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},headerFeatureIconColor:{type:String,default:l.NEUTRAL,validator(e){return Object.values(l).includes(e)}},headerImage:{type:String,default:null},footerPrimaryButtonText:{type:String,default:null},footerPrimaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},footerPrimaryButtonState:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},footerSecondaryButtonText:{type:String,default:null},footerSecondaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},footerSecondaryButtonState:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}}},emits:["close-modal","primary-button-click","secondary-button-click"],data(){return{MODAL_SIZES:Object.freeze(s),MODAL_HEADER_TITLE_SIZES:Object.freeze(f)}}});function T(e,t,v,I,E,O){const d=S("ds-modal");return c(),y(d,{class:"ds-modalDialog",size:e.MODAL_SIZES.SMALL,danger:e.danger,"content-centered":!0,"header-image":e.headerImage,"header-title-size":e.MODAL_HEADER_TITLE_SIZES.SMALL,"header-feature-icon":e.headerFeatureIcon,"header-feature-icon-color":e.headerFeatureIconColor,"header-title":e.headerTitle,"header-subtitle":e.headerSubtitle,"footer-primary-button-text":e.footerPrimaryButtonText,"footer-primary-button-icon":e.footerPrimaryButtonIcon,"footer-primary-button-state":e.footerPrimaryButtonState,"footer-secondary-button-text":e.footerSecondaryButtonText,"footer-secondary-button-icon":e.footerSecondaryButtonIcon,"footer-secondary-button-state":e.footerSecondaryButtonState,onCloseModal:t[0]||(t[0]=n=>e.$emit("close-modal")),onPrimaryButtonClick:t[1]||(t[1]=n=>e.$emit("primary-button-click")),onSecondaryButtonClick:t[2]||(t[2]=n=>e.$emit("secondary-button-click"))},{default:p(()=>[b(e.$slots,"default")]),_:3},8,["size","danger","header-image","header-title-size","header-feature-icon","header-feature-icon-color","header-title","header-subtitle","footer-primary-button-text","footer-primary-button-icon","footer-primary-button-state","footer-secondary-button-text","footer-secondary-button-icon","footer-secondary-button-state"])}const j=g(u,[["render",T]]);u.__docgenInfo={displayName:"ModalDialog",exportName:"default",description:"",tags:{},props:[{name:"danger",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerTitle",type:{name:"string"},required:!0},{name:"headerSubtitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIconColor",type:{name:"string"},defaultValue:{func:!1,value:"FEATURE_ICON_COLOR.NEUTRAL"}},{name:"headerImage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerSecondaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}}],events:[{name:"close-modal"},{name:"primary-button-click"},{name:"secondary-button-click"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modals/ModalDialog/ModalDialog.vue"]};export{j as M};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import{M as p}from"./ModalDialog-CbDAxfV_.js";import{I as a}from"./Icon-BiVaixmr.js";import{b as n}from"./FeatureIcon-n65RPvyA.js";import{d as e}from"./Button-CBZkgukP.js";import"./Modal-CJ0d6Je9.js";import"./IconButton-COzU-vlz.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const N={title:"Components/Modals/ModalDialog",component:p},u=I=>({components:{ModalDialog:p},setup(){return I},template:'<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" :footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" :headerImage="headerImage" :footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState"><div v-html="defaultSlot" /></modal-dialog>',data(){return{ICONS:Object.freeze(a),BUTTON_STATES:Object.freeze(e)}}}),t=u.bind({}),g={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',danger:!1,headerImage:"",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_QUESTION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:e.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:e.DEFAULT},i={danger:{control:"boolean"},headerImage:{control:"text",table:{type:{summary:"string"},defaultValue:{summary:"Hello"}}},headerTitle:{control:"text"},headerSubtitle:{control:"text"},headerFeatureIcon:{control:"select",options:[null,...Object.keys(a)]},headerFeatureIconColor:{control:"select",options:Object.values(n)},footerPrimaryButtonText:{control:"text"},footerPrimaryButtonIcon:{control:"select",options:[null,...Object.keys(a)]},footerPrimaryButtonState:{control:"select",options:Object.values(e)},footerSecondaryButtonText:{control:"text"},footerSecondaryButtonIcon:{control:"select",options:[null,...Object.keys(a)]},footerSecondaryButtonState:{control:"select",options:Object.values(e)}};t.argTypes=i;t.args=g;t.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5658%3A96416&t=lgUXCZhvWDuBr3qw-0"}};const B={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',danger:!0,headerImage:"",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:e.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:e.DEFAULT},o=u.bind({});o.argTypes=i;o.args=B;const h={defaultSlot:"",danger:!1,headerImage:"https://wiecejnizlek.pl/wp-content/themes/uncode-child/assets/patterns/pattern-black.png",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:e.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:e.DEFAULT},r=u.bind({});r.argTypes=i;r.args=h;var c,l,d;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
ModalDialog
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '</modal-dialog>',
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
ICONS: Object.freeze(ICONS),
|
|
12
|
+
BUTTON_STATES: Object.freeze(BUTTON_STATES)
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
})`,...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var s,m,S;o.parameters={...o.parameters,docs:{...(s=o.parameters)==null?void 0:s.docs,source:{originalSource:`args => ({
|
|
16
|
+
components: {
|
|
17
|
+
ModalDialog
|
|
18
|
+
},
|
|
19
|
+
setup() {
|
|
20
|
+
return args;
|
|
21
|
+
},
|
|
22
|
+
template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '</modal-dialog>',
|
|
23
|
+
data() {
|
|
24
|
+
return {
|
|
25
|
+
ICONS: Object.freeze(ICONS),
|
|
26
|
+
BUTTON_STATES: Object.freeze(BUTTON_STATES)
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
})`,...(S=(m=o.parameters)==null?void 0:m.docs)==null?void 0:S.source}}};var f,y,T;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
|
|
30
|
+
components: {
|
|
31
|
+
ModalDialog
|
|
32
|
+
},
|
|
33
|
+
setup() {
|
|
34
|
+
return args;
|
|
35
|
+
},
|
|
36
|
+
template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '</modal-dialog>',
|
|
37
|
+
data() {
|
|
38
|
+
return {
|
|
39
|
+
ICONS: Object.freeze(ICONS),
|
|
40
|
+
BUTTON_STATES: Object.freeze(BUTTON_STATES)
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
})`,...(T=(y=r.parameters)==null?void 0:y.docs)==null?void 0:T.source}}};const v=["Interactive","Danger","WithImage"];export{o as Danger,t as Interactive,r as WithImage,v as __namedExportsOrder,N as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as n,o as r,c as o,f as l,n as t}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as u}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e={DEFAULT:"default",PRIMARY:"primary",NEUTRAL:"neutral",SUCCESS:"success",DANGER:"danger",INFO:"info",ACCENT:"accent"},a=n({name:"NumberInCircle",props:{index:{type:Number,default:1},medium:{type:Boolean,default:!1},color:{type:String,default:e.DEFAULT,validator(s){return Object.values(e).includes(s)}}},computed:{colorClass(){return{[e.DEFAULT]:`-ds-is${this.index}`,[e.PRIMARY]:"-ds-primary",[e.NEUTRAL]:"-ds-neutral",[e.SUCCESS]:"-ds-success",[e.DANGER]:"-ds-danger",[e.INFO]:"-ds-info",[e.ACCENT]:"-ds-accent"}[this.color]}}});function d(s,c,m,i,f,p){return r(),o("div",{class:t(["ds-numberInCircle",{"-ds-medium":s.medium,[s.colorClass]:!0}])},[l(s.$slots,"default",{},void 0,!0)],2)}const E=u(a,[["render",d],["__scopeId","data-v-974ee868"]]);a.__docgenInfo={displayName:"NumberInCircle",exportName:"default",description:"",tags:{},props:[{name:"index",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"medium",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"NUMBER_IN_CIRCLE_COLORS.DEFAULT"}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/NumberInCircle/NumberInCircle.vue"]};export{E as N,e as a};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import{N as n,a as s}from"./NumberInCircle-DV0Qrx8H.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const d={title:"Components/NumberInCircle",component:n},i=c=>({components:{NumberInCircle:n},setup(){return c},template:'<number-in-circle :index="index" :color="color" :medium="medium">{{slotText}}</number-in-circle>'}),e=i.bind({}),m={slotText:"1",index:1,color:s.DEFAULT,medium:!1},a={color:{control:"select",options:Object.values(s)},slotText:{control:"text"}};e.argTypes=a;e.args=m;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5151%3A82053&t=y03jPaHjasRQu2Pm-0"}};var r,t,o;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
NumberInCircle
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: '<number-in-circle :index="index" :color="color" :medium="medium">{{slotText}}</number-in-circle>'
|
|
9
|
+
})`,...(o=(t=e.parameters)==null?void 0:t.docs)==null?void 0:o.source}}};const x=["Interactive"];export{e as Interactive,x as __namedExportsOrder,d as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{D as o,a as n,b as i}from"./Divider-D2yDhW46.js";import{d as r,o as a,c as d,g as l,r as c}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as p}from"./_plugin-vue_export-helper-DlAUqK2U.js";const s=r({name:"OutlineDivider",components:{DsDivider:o},props:{prominence:{type:String,default:n.DEFAULT,validator:e=>Object.values(n).includes(e)},size:{type:String,default:i.S,validator:e=>Object.values(i).includes(e)}}}),u={class:"ds-outlineDivider"};function m(e,f,_,v,D,I){const t=c("ds-divider");return a(),d("div",u,[l(t,{prominence:e.prominence,size:e.size},null,8,["prominence","size"])])}const g=p(s,[["render",m],["__scopeId","data-v-1ff70e1d"]]);s.__docgenInfo={displayName:"OutlineDivider",exportName:"default",description:"",tags:{},props:[{name:"prominence",type:{name:"string"},defaultValue:{func:!1,value:"DIVIDER_PROMINENCES.DEFAULT"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"DIVIDER_SIZES.S"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Outline/OutlineDivider/OutlineDivider.vue"]};export{g as O};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import{O as r}from"./OutlineDivider-Cez9NlcH.js";import{a as o,b as s}from"./Divider-D2yDhW46.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const g={title:"Components/Outline/OutlineDivider",component:r},a=p=>({components:{OutlineDivider:r},setup(){return p},template:`
|
|
2
|
+
<outline-divider :prominence="prominence" :size="size" />`}),e=a.bind({}),m={prominence:{control:"select",options:Object.values(o)},size:{control:"select",options:Object.values(s)}};e.args={prominence:o.DEFAULT,size:s.S};e.argTypes=m;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6148-111431&t=Amd0mke9FMknuKCX-0"}};var t,n,i;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
|
|
3
|
+
components: {
|
|
4
|
+
OutlineDivider
|
|
5
|
+
},
|
|
6
|
+
setup() {
|
|
7
|
+
return args;
|
|
8
|
+
},
|
|
9
|
+
template: \`
|
|
10
|
+
<outline-divider :prominence="prominence" :size="size" />\`
|
|
11
|
+
})`,...(i=(n=e.parameters)==null?void 0:n.docs)==null?void 0:i.source}}};const I=["Interactive"];export{e as Interactive,I as __namedExportsOrder,g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S,I as o,b as O}from"./Icon-BiVaixmr.js";import{d as E,t as m,o as a,c as n,a as i,n as l,k as u,h as t,b as d,f as I,F as b,l as y,r as L}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as v}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={SMALL:"small",MEDIUM:"medium"},c={DEFAULT:"default",DISABLED:"disabled"},f={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral"},p=E({name:"OutlineItem",components:{DsIcon:S},props:{size:{type:String,default:r.SMALL,validator(e){return Object.values(r).includes(e)}},backgroundColor:{type:String,default:f.NEUTRAL_WEAK,validator(e){return Object.values(f).includes(e)}},iconLeft:{type:Object,default:null,validator(e){return e==null||Object.values(o).includes(m(e))}},iconRight:{type:Object,default:null,validator(e){return e==null||Object.values(o).includes(m(e))}},iconRightRotation:{type:Number,default:null,validator(e){return[90,180,270].includes(e)}},index:{type:Number,default:null},label:{type:String,required:!0},isLabelUppercase:{type:Boolean,default:!1},additionalText:{type:String,default:null},state:{type:String,default:c.DEFAULT,validator(e){return Object.values(c).includes(e)}},isSelected:{type:Boolean,default:!1},isDone:{type:Boolean,default:!1},hasSelectedIconsColorPrimary:{type:Boolean,default:!0},isSelectedInteractive:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(o),ICON_SIZES:Object.freeze(O),OUTLINE_ITEM_BACKGROUND_COLORS:Object.freeze(f),OUTLINE_ITEM_SIZES:Object.freeze(r)}},computed:{isDisabled(){return this.state===c.DISABLED}}}),T={class:"ds-outlineItem__text"},_={key:0,class:"ds-outlineItem__additionalText"};function N(e,C,g,U,A,R){const s=L("ds-icon");return a(),n("div",{class:l(["ds-outlineItem",{"-ds-disabled":e.isDisabled,"-ds-medium":e.size===e.OUTLINE_ITEM_SIZES.MEDIUM,"-ds-selected":e.isSelected,"-ds-hoverable":!e.isSelected||e.isSelectedInteractive,"-ds-backgroundNeutral":e.backgroundColor===e.OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL}])},[i("div",{class:l(["ds-outlineItem__content",{"-ds-centeredContent":e.$slots.default}])},[e.index!==null?(a(),n("span",{key:0,class:l(["ds-outlineItem__index",{"-ds-active":e.isSelected}])},u(e.index)+". ",3)):t("",!0),e.iconLeft?(a(),d(s,{key:1,class:l(["ds-outlineItem__icon",{"-ds-active":e.isSelected&&e.hasSelectedIconsColorPrimary}]),icon:e.iconLeft,size:e.ICON_SIZES.X_SMALL},null,8,["class","icon","size"])):t("",!0),i("span",T,[i("span",{class:l(["ds-outlineItem__label",{"-ds-uppercase":e.isLabelUppercase}])},[e.$slots.labelSlot?I(e.$slots,"labelSlot",{key:0},void 0,!0):(a(),n(b,{key:1},[y(u(e.label),1)],64))],2),e.additionalText?(a(),n("span",_,u(e.additionalText),1)):t("",!0)])],2),e.$slots.default||e.isDone||e.iconRight?(a(),n("div",{key:0,class:l(["ds-outlineItem__rightContent",{"-ds-centeredContent":e.$slots.default}])},[e.$slots.default?I(e.$slots,"default",{key:0},void 0,!0):t("",!0),e.isDone?(a(),d(s,{key:1,class:"ds-outlineItem__icon -ds-active",icon:e.ICONS.FA_CHECK_SOLID,size:e.ICON_SIZES.X_SMALL},null,8,["icon","size"])):e.iconRight?(a(),d(s,{key:2,class:l(["ds-outlineItem__icon",{"-ds-active":e.isSelected&&e.hasSelectedIconsColorPrimary}]),icon:e.iconRight,size:e.ICON_SIZES.X_SMALL,rotation:e.iconRightRotation},null,8,["class","icon","size","rotation"])):t("",!0)],2)):t("",!0)],2)}const k=v(p,[["render",N],["__scopeId","data-v-c03bdbc6"]]);p.__docgenInfo={displayName:"OutlineItem",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"OUTLINE_ITEM_SIZES.SMALL"}},{name:"backgroundColor",type:{name:"string"},defaultValue:{func:!1,value:"OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK"}},{name:"iconLeft",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"iconRightRotation",type:{name:"number"},defaultValue:{func:!1,value:"null"},values:[90,180,270]},{name:"index",type:{name:"number"},defaultValue:{func:!1,value:"null"}},{name:"label",type:{name:"string"},required:!0},{name:"isLabelUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"additionalText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"OUTLINE_ITEM_STATES.DEFAULT"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isDone",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hasSelectedIconsColorPrimary",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelectedInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],slots:[{name:"labelSlot"},{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Outline/OutlineItem/OutlineItem.vue"]};export{k as O,r as a,f as b,c};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import{O as i,a,b as s,c as r}from"./OutlineItem-CUHef8Bo.js";import{C as d}from"./Chip-CBqrZ-va.js";import{I as t}from"./Icon-BiVaixmr.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./IconButton-COzU-vlz.js";import"./Button-CBZkgukP.js";import"./device-9fgosCm4.js";const x={title:"Components/Outline/OutlineItem",component:i},p=c=>({components:{OutlineItem:i,DsChip:d},setup(){return c},data(){return{ICONS:Object.freeze(t)}},template:`
|
|
2
|
+
<outline-item :label="label" :additional-text="additionalText" :size="size" :state="state"
|
|
3
|
+
:icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone"
|
|
4
|
+
:is-selected="isSelected" :background-color="backgroundColor" :index="index"
|
|
5
|
+
:is-label-uppercase="isLabelUppercase" :icon-right-rotation="iconRightRotation"
|
|
6
|
+
:has-selected-icons-color-primary="hasSelectedIconsColorPrimary"
|
|
7
|
+
:is-selected-interactive="isSelectedInteractive">
|
|
8
|
+
<template #labelSlot v-if="labelSlot">
|
|
9
|
+
<span v-html="labelSlot" />
|
|
10
|
+
</template>
|
|
11
|
+
<template #default v-if="defaultSlot.length > 0">
|
|
12
|
+
<ds-chip :label="defaultSlot" />
|
|
13
|
+
</template>
|
|
14
|
+
</outline-item>`}),e=p.bind({}),m={additionalText:"",defaultSlot:"10 / 20",labelSlot:"Outline Item label in slot",size:a.SMALL,backgroundColor:s.NEUTRAL_WEAK,iconLeft:null,iconRight:null,iconRightRotation:null,index:null,label:"Outline Item label",isLabelUppercase:!1,state:r.DEFAULT,isSelected:!1,isDone:!1,hasSelectedIconsColorPrimary:!0,isSelectedInteractive:!1},u={defaultSlot:{control:"text"},labelSlot:{control:"text"},size:{control:"select",options:Object.values(a)},backgroundColor:{control:"select",options:Object.values(s)},iconLeft:{control:"select",options:[null,...Object.keys(t)]},iconRight:{control:"select",options:[null,...Object.keys(t)]},iconRightRotation:{control:"select",options:[null,90,180,270]},index:{control:{type:"number"}},label:{control:"text"},isLabelUppercase:{control:"boolean"},additionalText:{control:"text"},state:{control:"select",options:Object.values(r)},isSelected:{control:"boolean"},isDone:{control:"boolean"},hasSelectedIconsColorPrimary:{control:"boolean"},isSelectedInteractive:{control:"boolean"}};e.argTypes=u;e.args=m;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6148-111431&t=Amd0mke9FMknuKCX-0"}};var o,l,n;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:`args => ({
|
|
15
|
+
components: {
|
|
16
|
+
OutlineItem,
|
|
17
|
+
DsChip
|
|
18
|
+
},
|
|
19
|
+
setup() {
|
|
20
|
+
return args;
|
|
21
|
+
},
|
|
22
|
+
data() {
|
|
23
|
+
return {
|
|
24
|
+
ICONS: Object.freeze(ICONS)
|
|
25
|
+
};
|
|
26
|
+
},
|
|
27
|
+
template: \`
|
|
28
|
+
<outline-item :label="label" :additional-text="additionalText" :size="size" :state="state"
|
|
29
|
+
:icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone"
|
|
30
|
+
:is-selected="isSelected" :background-color="backgroundColor" :index="index"
|
|
31
|
+
:is-label-uppercase="isLabelUppercase" :icon-right-rotation="iconRightRotation"
|
|
32
|
+
:has-selected-icons-color-primary="hasSelectedIconsColorPrimary"
|
|
33
|
+
:is-selected-interactive="isSelectedInteractive">
|
|
34
|
+
<template #labelSlot v-if="labelSlot">
|
|
35
|
+
<span v-html="labelSlot" />
|
|
36
|
+
</template>
|
|
37
|
+
<template #default v-if="defaultSlot.length > 0">
|
|
38
|
+
<ds-chip :label="defaultSlot" />
|
|
39
|
+
</template>
|
|
40
|
+
</outline-item>\`
|
|
41
|
+
})`,...(n=(l=e.parameters)==null?void 0:l.docs)==null?void 0:n.source}}};const v=["Interactive"];export{e as Interactive,v as __namedExportsOrder,x as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as n,o,c as i,k as r}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as s}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e=n({name:"OutlineSectionHeader",props:{title:{type:String,required:!0}}}),a={class:"ds-outlineSectionHeader"};function c(t,d,p,l,u,m){return o(),i("div",a,r(t.title),1)}const S=s(e,[["render",c],["__scopeId","data-v-451a822d"]]);e.__docgenInfo={displayName:"OutlineSectionHeader",exportName:"default",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.vue"]};export{S as O};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import{O as o}from"./OutlineSectionHeader-DSJ4uxfr.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const m={title:"Components/Outline/OutlineSectionHeader",component:o},s=i=>({components:{OutlineSectionHeader:o},setup(){return i},template:'<outline-section-header :title="title" />'}),e=s.bind({}),a={title:{control:"text"}};e.argTypes=a;e.args={title:"section header all caps"};e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6148-111431&t=Amd0mke9FMknuKCX-0"}};var t,n,r;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
OutlineSectionHeader
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: \`<outline-section-header :title="title" />\`
|
|
9
|
+
})`,...(r=(n=e.parameters)==null?void 0:n.docs)==null?void 0:r.source}}};const d=["Interactive"];export{e as Interactive,d as __namedExportsOrder,m as default};
|