@bethinkpl/design-system 26.0.1 → 26.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design-system.umd.cjs +17 -17
- package/dist/design-system.umd.cjs.map +1 -1
- package/dist/lib/js/components/BadgeScore/BadgeScore.vue.d.ts +86 -8
- package/dist/lib/js/components/Banner/Banner.vue.d.ts +1169 -9
- package/dist/lib/js/components/Buttons/Button/Button.vue.d.ts +90 -8
- package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +431 -9
- package/dist/lib/js/components/Cards/Card/Card.vue.d.ts +89 -6
- package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +258 -6
- package/dist/lib/js/components/Chip/Chip.vue.d.ts +787 -9
- package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +787 -1
- package/dist/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue.d.ts +315 -1
- package/dist/lib/js/components/Divider/Divider.vue.d.ts +5 -5
- package/dist/lib/js/components/Drawer/Drawer.vue.d.ts +5 -5
- package/dist/lib/js/components/Drawer/DrawerContent/DrawerContent.vue.d.ts +1 -1
- package/dist/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue.d.ts +48 -4
- package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +2542 -1
- package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +85 -8
- package/dist/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue.d.ts +1 -1
- package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +1099 -9
- package/dist/lib/js/components/Drawer/DrawerTile/DrawerTile.vue.d.ts +434 -5
- package/dist/lib/js/components/Dropdown/Dropdown.vue.d.ts +31 -1
- package/dist/lib/js/components/Form/Checkbox/Checkbox.vue.d.ts +118 -9
- package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts +118 -9
- package/dist/lib/js/components/Form/SelectionControl/SelectionControl.vue.d.ts +89 -9
- package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +898 -9
- package/dist/lib/js/components/Headers/PageHeader/PageHeader.vue.d.ts +50 -8
- package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +836 -9
- package/dist/lib/js/components/IconText/IconText.vue.d.ts +112 -1
- package/dist/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue.d.ts +85 -8
- package/dist/lib/js/components/Icons/Icon/Icon.vue.d.ts +7 -5
- package/dist/lib/js/components/Image/Image.vue.d.ts +48 -5
- package/dist/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue.d.ts +12 -9
- package/dist/lib/js/components/LoadingBar/LoadingBar.vue.d.ts +5 -5
- package/dist/lib/js/components/Modal/Modal.vue.d.ts +85 -6
- package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +1161 -9
- package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +1443 -9
- package/dist/lib/js/components/Outline/OutlineDivider/OutlineDivider.vue.d.ts +48 -4
- package/dist/lib/js/components/Outline/OutlineItem/OutlineItem.vue.d.ts +95 -8
- package/dist/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.vue.d.ts +3 -3
- package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +1051 -9
- package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +325 -1
- package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts +309 -1
- package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +926 -9
- package/dist/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue.d.ts +7 -7
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +473 -9
- package/dist/lib/js/components/SectionTitle/SectionTitle.vue.d.ts +4 -4
- package/dist/lib/js/components/SelectList/SelectList.vue.d.ts +1 -1
- package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +89 -8
- package/dist/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue.d.ts +45 -1
- package/dist/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue.d.ts +433 -4
- package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts +323 -8
- package/dist/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue.d.ts +4 -4
- package/dist/lib/js/components/SelectionTile/SelectionTile.vue.d.ts +849 -9
- package/dist/lib/js/components/Skeleton/Skeleton.vue.d.ts +8 -6
- package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +83 -4
- package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts +83 -4
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +1567 -9
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +1946 -1
- package/dist/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue.d.ts +6 -6
- package/dist/lib/js/components/SurveyToggle/SurveyToggle.vue.d.ts +88 -8
- package/dist/lib/js/components/Switch/Switch.vue.d.ts +93 -9
- package/dist/lib/js/components/TabItem/TabItem.vue.d.ts +102 -1
- package/dist/lib/js/components/TextGroup/TextGroup.vue.d.ts +48 -5
- package/dist/lib/js/components/Tile/Tile.vue.d.ts +84 -5
- package/dist/lib/js/components/Toggles/CounterToggle/CounterToggle.vue.d.ts +86 -8
- package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts +96 -9
- package/dist/lib/js/components/Tooltip/Tooltip.vue.d.ts +5 -5
- package/docs/assets/AccessStatus-CZ2wkKUN.js +1 -0
- package/docs/assets/{AccessStatus.stories-CM9qms_d.js → AccessStatus.stories-DqLttI6G.js} +1 -1
- package/docs/assets/BadgeScore-Cb8Vr0p3.js +1 -0
- package/docs/assets/{BadgeScore.stories-BsFc_8XV.js → BadgeScore.stories-VUIYoC0K.js} +1 -1
- package/docs/assets/{Banner-Dkt_I8P3.js → Banner-C_-ztwHr.js} +1 -1
- package/docs/assets/{Banner.stories-dLLxP9rS.js → Banner.stories-DEpqpjNt.js} +1 -1
- package/docs/assets/{BasicRichListItem-CCXQ4iJg.js → BasicRichListItem-CL431QeF.js} +1 -1
- package/docs/assets/{BasicRichListItem.stories-Bh_UBJkl.js → BasicRichListItem.stories-DJhpvSDZ.js} +1 -1
- package/docs/assets/BlockadeStatus-D0rB6KRL.js +1 -0
- package/docs/assets/{BlockedeStatus.stories-IunhqK0I.js → BlockedeStatus.stories--W5rj6m4.js} +1 -1
- package/docs/assets/{Button-CBZkgukP.js → Button-BfC5uvwA.js} +1 -1
- package/docs/assets/{Button.stories-BLj-_0Vw.js → Button.stories-CI72rNoF.js} +1 -1
- package/docs/assets/{Card-B7j8o0GU.js → Card-BNrHU9qb.js} +1 -1
- package/docs/assets/{Card.stories-KO99dol6.js → Card.stories-Tu0NJeHc.js} +1 -1
- package/docs/assets/{CardExpandable-XN3wcRwV.js → CardExpandable-CyaYxO0k.js} +1 -1
- package/docs/assets/{CardExpandable.stories-B9-JtWRG.js → CardExpandable.stories-BnMu24tF.js} +1 -1
- package/docs/assets/Checkbox-Bqk4dEqh.js +1 -0
- package/docs/assets/{Checkbox.stories-DLfdA87Q.js → Checkbox.stories-D8ttSHbp.js} +1 -1
- package/docs/assets/Chip-DBH11WGD.js +1 -0
- package/docs/assets/Chip.stories-Dd2KHKo0.js +43 -0
- package/docs/assets/{Color-ERTF36HU-B622yQt4.js → Color-ERTF36HU-Dpy8vc_W.js} +1 -1
- package/docs/assets/{Colors.stories-CRIOJbgv.js → Colors.stories-V9xulpl8.js} +1 -1
- package/docs/assets/{ColorsThemes.stories-BVtVblv7.js → ColorsThemes.stories-DULXUm6A.js} +1 -1
- package/docs/assets/{ColorsTokensLms.stories-Ds9sWwL0.js → ColorsTokensLms.stories-D7S65YJS.js} +1 -1
- package/docs/assets/{ColorsTokensPrimaryBodywork.stories-D9nLEENe.js → ColorsTokensPrimaryBodywork.stories-D_vwh3Jq.js} +1 -1
- package/docs/assets/{ColorsTokensPrimaryWnl.stories-Cuz6HvAj.js → ColorsTokensPrimaryWnl.stories-BXkcRNQy.js} +1 -1
- package/docs/assets/CounterToggle-RylBZadb.js +1 -0
- package/docs/assets/{CounterToggle.stories-DdAjSFMr.js → CounterToggle.stories-D_-AsS4y.js} +1 -1
- package/docs/assets/{DatePicker-CvT_E45n.js → DatePicker-5MRZAjkX.js} +1 -1
- package/docs/assets/{DatePicker.stories-Ub_1x6To.js → DatePicker.stories-D7a156oj.js} +1 -1
- package/docs/assets/{Divider-D2yDhW46.js → Divider-BPqXVinF.js} +1 -1
- package/docs/assets/{Divider.stories-f9QUckyE.js → Divider.stories-D-I6wDB1.js} +1 -1
- package/docs/assets/{DocsRenderer-CFRXHY34-D5Eulb6H.js → DocsRenderer-CFRXHY34-C1Auldw2.js} +5 -5
- package/docs/assets/{Drawer-CH5Qyc5B.js → Drawer-DbwdfqO9.js} +1 -1
- package/docs/assets/{Drawer.stories-jrbLBaPT.js → Drawer.stories-CA7ckJHC.js} +1 -1
- package/docs/assets/{DrawerContent-DGzdUSmd.js → DrawerContent-BGc6gxGX.js} +1 -1
- package/docs/assets/{DrawerContent.stories-CYzQPPIy.js → DrawerContent.stories-DQul9BkA.js} +1 -1
- package/docs/assets/{DrawerDivider-DNbYnPjf.js → DrawerDivider-CtJq0tq6.js} +1 -1
- package/docs/assets/{DrawerDivider.stories-BG6MKk49.js → DrawerDivider.stories-DM3Aqadb.js} +1 -1
- package/docs/assets/DrawerHeader-B5vYU2PL.js +1 -0
- package/docs/assets/{DrawerHeader.stories-CwaoQykQ.js → DrawerHeader.stories-cpfS-wBt.js} +1 -1
- package/docs/assets/{DrawerListItem-aepUTcTm.js → DrawerListItem-0fUrCEXt.js} +1 -1
- package/docs/assets/{DrawerListItem.stories-vHXkwtyS.js → DrawerListItem.stories-CmJW1Uss.js} +1 -1
- package/docs/assets/{DrawerListItemGroup-CnH532Dv.js → DrawerListItemGroup-CLrc_eJs.js} +1 -1
- package/docs/assets/{DrawerListItemGroup.stories-D0DeZ6IG.js → DrawerListItemGroup.stories-bG34xd5v.js} +1 -1
- package/docs/assets/{DrawerSection-pMhA5dsS.js → DrawerSection-DFvcNR71.js} +1 -1
- package/docs/assets/{DrawerSection.stories-BF7A4VyW.js → DrawerSection.stories-DVELqRM_.js} +1 -1
- package/docs/assets/{DrawerTile-W2mt6fAk.js → DrawerTile-BJkMh2fU.js} +1 -1
- package/docs/assets/{DrawerTile.stories-CUMznN1H.js → DrawerTile.stories-B8kWqDLf.js} +1 -1
- package/docs/assets/{Dropdown-BfX0EVaK.js → Dropdown-Dt2QFB2U.js} +1 -1
- package/docs/assets/{Dropdown.stories-DrILA_TR.js → Dropdown.stories-CDrmWXHI.js} +1 -1
- package/docs/assets/{FeatureIcon-n65RPvyA.js → FeatureIcon-B47w4DBU.js} +1 -1
- package/docs/assets/{FeatureIcon.stories-DSUzxIPB.js → FeatureIcon.stories-DfNuwkfR.js} +1 -1
- package/docs/assets/GroupRichListItem-DSTlJwlb.js +1 -0
- package/docs/assets/{GroupRichListItem.stories-DCEq0Kil.js → GroupRichListItem.stories-C82L7KHk.js} +1 -1
- package/docs/assets/Icon-6eu_szpS.js +761 -0
- package/docs/assets/{Icon.stories-BFJuE2aE.js → Icon.stories-D0Y2RyrD.js} +1 -1
- package/docs/assets/{IconButton-COzU-vlz.js → IconButton-BO-CETCB.js} +1 -1
- package/docs/assets/{IconButton.stories-DGmn7bfg.js → IconButton.stories-C6kjifNZ.js} +1 -1
- package/docs/assets/{IconText-DDrVXWHS.js → IconText-DF43QOY-.js} +1 -1
- package/docs/assets/{IconText.stories-CSt7q9Mf.js → IconText.stories-B7IYW_LU.js} +1 -1
- package/docs/assets/Image-DjWPx_Cm.js +1 -0
- package/docs/assets/{Image.stories-DxQ22AFP.js → Image.stories-Cs6xAQBK.js} +1 -1
- package/docs/assets/{ItemsList-B-vw083o.js → ItemsList-BRCXeyjX.js} +1 -1
- package/docs/assets/LoadingBar-COnzT5gw.js +1 -0
- package/docs/assets/{LoadingBar.stories-IJRD91mF.js → LoadingBar.stories-Bc3-cddz.js} +1 -1
- package/docs/assets/{Modal-CJ0d6Je9.js → Modal-Bw0n_JyW.js} +1 -1
- package/docs/assets/{Modal.stories-q_qdiakg.js → Modal.stories-Ba9D4xGC.js} +1 -1
- package/docs/assets/{ModalDialog-CbDAxfV_.js → ModalDialog-BXp9X1p5.js} +1 -1
- package/docs/assets/{ModalDialog.stories-CKcR8rIW.js → ModalDialog.stories-DfA5ze67.js} +1 -1
- package/docs/assets/{NumberInCircle-DV0Qrx8H.js → NumberInCircle-2qc4scqu.js} +1 -1
- package/docs/assets/{NumberInCircle.stories-DriLGDDl.js → NumberInCircle.stories-DEPoFSIH.js} +1 -1
- package/docs/assets/{OutlineDivider-Cez9NlcH.js → OutlineDivider-Bxh-mzNl.js} +1 -1
- package/docs/assets/{OutlineDivider.stories-D0zYoHBw.js → OutlineDivider.stories-QIoOaFJB.js} +1 -1
- package/docs/assets/{OutlineItem-CUHef8Bo.js → OutlineItem-BjXpo06D.js} +1 -1
- package/docs/assets/{OutlineItem.stories-BgFzRhaY.js → OutlineItem.stories-BUu6aPfL.js} +1 -1
- package/docs/assets/OutlineSectionHeader-hAHWOzLF.js +1 -0
- package/docs/assets/{OutlineSectionHeader.stories-HOf2NwY-.js → OutlineSectionHeader.stories-GdEbBs1U.js} +1 -1
- package/docs/assets/OverlayHeader-BzKvZZD3.js +1 -0
- package/docs/assets/{OverlayHeader.stories-bjFfL93l.js → OverlayHeader.stories-DZaoIDUF.js} +1 -1
- package/docs/assets/{PageHeader-CTbdU4IG.js → PageHeader-XjqUaNsz.js} +1 -1
- package/docs/assets/{PageHeader.stories-DeNf1zoa.js → PageHeader.stories-C8lNq9Gy.js} +1 -1
- package/docs/assets/{Pagination-dSOJSh7t.js → Pagination-_AHUDwwL.js} +1 -1
- package/docs/assets/{Pagination.stories-CMg8WaRV.js → Pagination.stories-CMUAHShC.js} +1 -1
- package/docs/assets/{PopOver-BPD1Ttq1.js → PopOver-NPXfFzGB.js} +1 -1
- package/docs/assets/{PopOver.stories-Cl1k59cl.js → PopOver.stories--WLP9ABS.js} +1 -1
- package/docs/assets/ProgressBar-BiigfDAt.js +1 -0
- package/docs/assets/{ProgressBar.stories-9xVTh0RH.js → ProgressBar.stories-CaTLfTca.js} +1 -1
- package/docs/assets/{ProgressDonutChart-D5uvUZva.js → ProgressDonutChart-BmTVWpWh.js} +1 -1
- package/docs/assets/{ProgressDonutChart.stories-DBpwl5Vn.js → ProgressDonutChart.stories-D_34I_ER.js} +1 -1
- package/docs/assets/RadioButton-BqvATv1T.js +1 -0
- package/docs/assets/{RadioButton.stories-CLWvDUrd.js → RadioButton.stories-BpbTcL59.js} +1 -1
- package/docs/assets/{RichListItem.stories-DhkQky0J.js → RichListItem.stories-C1DOwiaj.js} +1 -1
- package/docs/assets/{SectionHeader-DVwe52kA.js → SectionHeader-BzbLJwTE.js} +1 -1
- package/docs/assets/{SectionHeader.stories-Dd3li5ER.js → SectionHeader.stories-C3Dk3EQq.js} +1 -1
- package/docs/assets/{SectionTitle-XTc-98O5.js → SectionTitle-BGj1y63i.js} +1 -1
- package/docs/assets/{SectionTitle.stories-BFNagAeb.js → SectionTitle.stories-BdUNgJ8M.js} +1 -1
- package/docs/assets/SelectList-CdwgpCxZ.js +1 -0
- package/docs/assets/{SelectList.stories-B2Pq8auf.js → SelectList.stories-CkENU7xp.js} +1 -1
- package/docs/assets/{SelectListItem-_c4CA-YM.js → SelectListItem-B6bDi3OI.js} +1 -1
- package/docs/assets/{SelectListItem.stories-PSDnI18x.js → SelectListItem.stories-QbUrayaQ.js} +1 -1
- package/docs/assets/SelectListItemDivider-BSD2eI6K.js +1 -0
- package/docs/assets/{SelectListItemDivider.stories-DvANKn2s.js → SelectListItemDivider.stories-IhgBxgAM.js} +1 -1
- package/docs/assets/{SelectListItemTile-BL3qYL_0.js → SelectListItemTile-C_oqRlGz.js} +1 -1
- package/docs/assets/{SelectListItemTile.stories-CVYmG0Ta.js → SelectListItemTile.stories-Dn8gM40T.js} +1 -1
- package/docs/assets/{SelectListItemToggle-BjjMPWy0.js → SelectListItemToggle-C2Nyl3Jx.js} +1 -1
- package/docs/assets/{SelectListItemToggle.stories-D5QL3Gd2.js → SelectListItemToggle.stories-n17klXWd.js} +1 -1
- package/docs/assets/SelectListSectionTitle-ntTJtQK2.js +1 -0
- package/docs/assets/{SelectListSectionTitle.stories-DCyB86A1.js → SelectListSectionTitle.stories-DTi_MtTn.js} +1 -1
- package/docs/assets/{SelectionControl-BxCh7N21.js → SelectionControl-aaEuqhMt.js} +1 -1
- package/docs/assets/{SelectionTile-T03MPtEm.js → SelectionTile-Bl618mwa.js} +2 -2
- package/docs/assets/{SelectionTile.stories-CEufLR64.js → SelectionTile.stories-C2OiBoE6.js} +1 -1
- package/docs/assets/{Skeleton-BbafKE6W.js → Skeleton-yR2iGt-A.js} +1 -1
- package/docs/assets/{Skeleton.stories-B_4TqUB5.js → Skeleton.stories-D8E42zl1.js} +1 -1
- package/docs/assets/SurveyQuestionOpenEnded-DyGKPMyP.js +1 -0
- package/docs/assets/{SurveyQuestionOpenEnded.stories-DW7tQU04.js → SurveyQuestionOpenEnded.stories-8WgkwYaH.js} +1 -1
- package/docs/assets/SurveyQuestionScale-Cx65nLcq.js +1 -0
- package/docs/assets/{SurveyQuestionScale.stories-DC8qXbl8.js → SurveyQuestionScale.stories-BWzL4fMZ.js} +1 -1
- package/docs/assets/{SurveyToggle-DzZyc41b.js → SurveyToggle-CISyD5gz.js} +1 -1
- package/docs/assets/{SurveyToggle.stories-Yf0fJ_p2.js → SurveyToggle.stories-TJijEheH.js} +1 -1
- package/docs/assets/{Switch-BWGPo7tP.js → Switch-DkIgraJz.js} +1 -1
- package/docs/assets/{Switch.stories-BzeYFsr2.js → Switch.stories-C8PyEPpm.js} +1 -1
- package/docs/assets/{TabItem-Cx2nQ_YR.js → TabItem-Cc0CSUyr.js} +1 -1
- package/docs/assets/{TabItem.stories-C-gV8JMj.js → TabItem.stories-Bh1XNs3q.js} +1 -1
- package/docs/assets/{TextGroup-DQmg5luv.js → TextGroup-DrSbeVN2.js} +1 -1
- package/docs/assets/{TextGroup.stories-j5MNzn7U.js → TextGroup.stories-BnbOUO2B.js} +1 -1
- package/docs/assets/{ThreeColumnLayout-Lm3LIbid.js → ThreeColumnLayout-NhAT4cZY.js} +1 -1
- package/docs/assets/{ThreeColumnLayout.stories-C5cNwOWv.js → ThreeColumnLayout.stories-EL55MOL9.js} +1 -1
- package/docs/assets/{Tile-DnH9h0Kq.js → Tile-DXVTBx8j.js} +1 -1
- package/docs/assets/{Tile.sb.shared-2W1FnncR.js → Tile.sb.shared-DAh00AIu.js} +1 -1
- package/docs/assets/{Tile.stories-Bj7yp21N.js → Tile.stories-xIzW0_NG.js} +1 -1
- package/docs/assets/{Toast.stories-Bad7itWi.js → Toast.stories-COXItFcC.js} +1 -1
- package/docs/assets/{ToggleButton-BZ0tVYFv.js → ToggleButton-BCtYIja9.js} +1 -1
- package/docs/assets/{ToggleButton.stories-D0YPR0-y.js → ToggleButton.stories-CT0hACpK.js} +1 -1
- package/docs/assets/Tooltip-DrwiSTCm.js +1 -0
- package/docs/assets/{Tooltip.stories-CaTsoTim.js → Tooltip.stories-CEXpck3_.js} +1 -1
- package/docs/assets/{TypographyTokensLms.stories-D-CrlX5A.js → TypographyTokensLms.stories-fssptMKG.js} +1 -1
- package/docs/assets/{TypographyVariables.stories-Bmxi44f1.js → TypographyVariables.stories-BhXf4d0y.js} +1 -1
- package/docs/assets/{Well-vFI2CbIA.js → Well--SGDk2ZR.js} +1 -1
- package/docs/assets/{Well.stories-Be73GX2h.js → Well.stories-CASSIsWd.js} +1 -1
- package/docs/assets/entry-preview-DMbhNDVP.js +1 -0
- package/docs/assets/{entry-preview-docs-BBVW7MF3.js → entry-preview-docs-DJ-4bqb-.js} +1 -1
- package/docs/assets/{iframe-BosoHOVU.js → iframe-D34akK7Z.js} +3 -3
- package/docs/assets/{index-CqU62QSU.js → index-DZvDKoWL.js} +1 -1
- package/docs/assets/{index-CgF2Ctku.js → index-DyXJjdHU.js} +1 -1
- package/docs/assets/{preview-16ImHjAt.js → preview-DYKWAT5n.js} +1 -1
- package/docs/assets/{preview-B_ruAZiw.js → preview-MRHqGPUO.js} +2 -2
- package/docs/assets/string-CJTX2pVG.js +1 -0
- package/docs/assets/{vue-popper-BJbr8Gin.js → vue-popper-BXSsmyj7.js} +1 -1
- package/docs/assets/vue.esm-bundler-DiF7B9b7.js +36 -0
- package/docs/iframe.html +1 -1
- package/docs/project.json +1 -1
- package/package.json +3 -3
- package/docs/assets/AccessStatus-DVtD0BrS.js +0 -1
- package/docs/assets/BadgeScore-B0MHArlW.js +0 -1
- package/docs/assets/BlockadeStatus-9_pI8WM1.js +0 -1
- package/docs/assets/Checkbox-D_geau8n.js +0 -1
- package/docs/assets/Chip-CBqrZ-va.js +0 -1
- package/docs/assets/Chip.stories-DQLbtbRo.js +0 -43
- package/docs/assets/CounterToggle-BzxnFqH7.js +0 -1
- package/docs/assets/DrawerHeader-DOWojdwp.js +0 -1
- package/docs/assets/GroupRichListItem-DMiaeyaS.js +0 -1
- package/docs/assets/Icon-BiVaixmr.js +0 -762
- package/docs/assets/Image-Drmyqqsn.js +0 -1
- package/docs/assets/LoadingBar-D0iVLCyJ.js +0 -1
- package/docs/assets/OutlineSectionHeader-DSJ4uxfr.js +0 -1
- package/docs/assets/OverlayHeader-jylszhPO.js +0 -1
- package/docs/assets/ProgressBar-4gBRbr7a.js +0 -1
- package/docs/assets/RadioButton-BwCzYjOu.js +0 -1
- package/docs/assets/SelectList-CTXM5G8Z.js +0 -1
- package/docs/assets/SelectListItemDivider-BOgD7wrO.js +0 -1
- package/docs/assets/SelectListSectionTitle-FihJb1eM.js +0 -1
- package/docs/assets/SurveyQuestionOpenEnded-DRFBouQB.js +0 -1
- package/docs/assets/SurveyQuestionScale-nNC7H5k0.js +0 -1
- package/docs/assets/Tooltip-BxZlo6cR.js +0 -1
- package/docs/assets/entry-preview-Dw8qwUcN.js +0 -1
- package/docs/assets/string-CxIy_vwz.js +0 -1
- package/docs/assets/vue.esm-bundler-BSCmGRHc.js +0 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as n}from"./SurveyQuestionOpenEnded-
|
|
1
|
+
import{S as n}from"./SurveyQuestionOpenEnded-DyGKPMyP.js";import{S as i}from"./string-CJTX2pVG.js";import"./Card-BNrHU9qb.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./Divider-BPqXVinF.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./LoadingBar-COnzT5gw.js";import"./Button-BfC5uvwA.js";import"./Icon-6eu_szpS.js";import"./IconButton-BO-CETCB.js";import"./device-9fgosCm4.js";const{useArgs:l}=__STORYBOOK_MODULE_PREVIEW_API__,w={title:"Components/SurveyQuestions/SurveyQuestionOpenEnded",component:n},d=s=>{const[c,r]=l();return{components:{SurveyQuestionOpenEnded:n},setup(){return s},template:'<survey-question-open-ended :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate"><template v-if="explanation" #explanation><div v-html="explanation" /></template></survey-question-open-ended>',methods:{explanationUpdate(p){r({value:p})}}}},e=d.bind({}),u={title:"Main question write here if it's long it will collapse.",value:"value",explanation:'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3><div>Wyczerpujące materiały dają poczucie pełnego zrozumieina, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',placeholder:"Wpisz swoją odpowiedź",state:i.DEFAULT},m={explanation:{control:"text"},state:{control:"select",options:Object.values(i)}};e.argTypes=m;e.args=u;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1555%3A41739"}};var t,a,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
return {
|
|
4
4
|
components: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{C as b}from"./Card-BNrHU9qb.js";import{I as C}from"./IconButton-BO-CETCB.js";import{D as A,i as V,a as L}from"./Button-BfC5uvwA.js";import{I as R,b as Q}from"./Icon-6eu_szpS.js";import{b as Y,M as G,S as d,a as E,r as D}from"./string-CJTX2pVG.js";import{a as h,S as k,c as B,b as j}from"./SurveyToggle-CISyD5gz.js";import{d as z,c as l,b as _,e as u,h as i,g as r,r as o,o as t,a as n,l as $,f as M,k as m,n as T,F as O,m as p}from"./vue.esm-bundler-DiF7B9b7.js";import{_ as w}from"./_plugin-vue_export-helper-DlAUqK2U.js";const v=z({name:"SurveyQuestionScale",components:{SurveyQuestionTextarea:Y,DsCard:b,IconButton:C,SurveyToggle:h,DsModal:G,DsButton:A},props:{title:{type:String,required:!0},state:{type:String,default:d.DEFAULT,validator(e){return Object.values(d).includes(e)}},scaleOptions:{type:Array,required:!0,validator(e){return e.every(s=>typeof s=="object")}},elaborationLabel:{type:String,default:null},elaborationValue:{type:String,required:!0},placeholder:{type:String,default:"Wpisz swoją odpowiedź"},selectedValue:{type:String,default:null},containers:{type:String,default:E.TWO,validator(e){return Object.values(E).includes(e)}}},emits:["elaboration-change","select-change"],data(){return{showModal:!1,inputId:"survey-question-"+D(8),ICONS:Object.freeze(R),ICON_SIZES:Object.freeze(Q),ICON_BUTTON_COLORS:Object.freeze(V),BUTTON_TYPES:Object.freeze(L),SURVEY_TOGGLE_COLORS:Object.freeze(k),SURVEY_TOGGLE_STATES:Object.freeze(B),SURVEY_TOGGLE_STATUSES:Object.freeze(j),SURVEY_QUESTION_STATES:Object.freeze(d),SURVEY_QUESTION_CONTAINERS:Object.freeze(E)}},computed:{standaloneOptions(){return this.scaleOptions.filter(e=>e.standalone)}},methods:{onToggleClick(e){this.$emit("select-change",this.selectedValue===e?null:e)}}}),F={class:"ds-surveyQuestionScale"},q={class:"ds-surveyQuestionScale__header"},W={class:"ds-surveyQuestionScale__title"},P={key:0,class:"ds-surveyQuestionScale__container -ds-justifyEnd -ds-hideOnMobile"},Z={class:"ds-surveyQuestionScale__elaboration"},K=["for"];function H(e,s,J,X,x,ee){const y=o("ds-button"),U=o("ds-modal"),f=o("icon-button"),c=o("survey-toggle"),N=o("survey-question-textarea"),I=o("ds-card");return t(),l("div",F,[e.showModal?(t(),_(U,{key:0,onCloseModal:s[1]||(s[1]=a=>e.showModal=!1)},{footer:u(()=>[n("div",null,[r(y,{type:e.BUTTON_TYPES.OUTLINED,onClick:s[0]||(s[0]=a=>e.showModal=!1)},{default:u(()=>s[4]||(s[4]=[$(" OK, rozumiem ")])),_:1},8,["type"])])]),default:u(()=>[M(e.$slots,"explanation",{},void 0,!0)]),_:3})):i("",!0),r(I,null,{content:u(()=>[n("div",q,[n("span",W,m(e.title),1),e.$slots.explanation?(t(),_(f,{key:0,class:"ds-surveyQuestionScale__explanation",color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,icon:e.ICONS.FA_CIRCLE_QUESTION,size:e.ICON_SIZES.MEDIUM,touchable:!1,onClick:s[2]||(s[2]=a=>e.showModal=!0)},null,8,["color","icon","size"])):i("",!0)]),n("div",{class:T(["ds-surveyQuestionScale__content",{"-oneContainer":e.containers===e.SURVEY_QUESTION_CONTAINERS.ONE}])},[n("div",{class:T(["ds-surveyQuestionScale__container",{"-ds-oneContainer":e.containers===e.SURVEY_QUESTION_CONTAINERS.ONE}])},[(t(!0),l(O,null,p(e.scaleOptions,(a,S)=>(t(),l("div",{key:`ds-surveyQuestionScale-${S}`,class:T(["ds-surveyQuestionScale__toggle",{"-ds-hideOnDesktop":a.standalone&&e.containers===e.SURVEY_QUESTION_CONTAINERS.TWO}])},[r(c,{meaning:a.meaning,"content-text":a.content,label:a.label,status:e.selectedValue===a.value?e.SURVEY_TOGGLE_STATUSES.SELECTED:e.SURVEY_TOGGLE_STATUSES.DEFAULT,state:e.state===e.SURVEY_QUESTION_STATES.DISABLED?e.SURVEY_TOGGLE_STATES.DISABLED:e.SURVEY_TOGGLE_STATES.DEFAULT,onClick:g=>e.onToggleClick(a.value)},null,8,["meaning","content-text","label","status","state","onClick"])],2))),128))],2),e.standaloneOptions.length>0&&e.containers===e.SURVEY_QUESTION_CONTAINERS.TWO?(t(),l("div",P,[(t(!0),l(O,null,p(e.standaloneOptions,(a,S)=>(t(),l("div",{key:`ds-surveyQuestionScale-standalone-${S}`,class:"ds-surveyQuestionScale__toggle"},[r(c,{meaning:a.meaning,"content-text":a.content,label:a.label,status:e.selectedValue===a.value?e.SURVEY_TOGGLE_STATUSES.SELECTED:e.SURVEY_TOGGLE_STATUSES.DEFAULT,state:e.state===e.SURVEY_QUESTION_STATES.DISABLED?e.SURVEY_TOGGLE_STATES.DISABLED:e.SURVEY_TOGGLE_STATES.DEFAULT,onClick:g=>e.onToggleClick(a.value)},null,8,["meaning","content-text","label","status","state","onClick"])]))),128))])):i("",!0)],2),e.selectedValue!==null&&e.elaborationLabel!==null?(t(),l(O,{key:0},[s[5]||(s[5]=n("hr",{class:"ds-surveyQuestionScale__separator"},null,-1)),n("div",Z,[n("label",{class:"ds-surveyQuestionScale__elaborationLabel",for:e.inputId},m(e.elaborationLabel),9,K),r(N,{id:e.inputId,value:e.elaborationValue,class:"ds-surveyQuestionScale__elaborationInput",placeholder:e.placeholder,disabled:e.state===e.SURVEY_QUESTION_STATES.DISABLED,onInput:s[3]||(s[3]=a=>e.$emit("elaboration-change",a))},null,8,["id","value","placeholder","disabled"])])],64)):i("",!0)]),_:1})])}const ie=w(v,[["render",H],["__scopeId","data-v-de80e429"]]);v.__docgenInfo={displayName:"SurveyQuestionScale",exportName:"default",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_QUESTION_STATES.DEFAULT"}},{name:"scaleOptions",type:{name:"Array as () => Array<SurveyQuestionScaleOption>"},required:!0},{name:"elaborationLabel",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"elaborationValue",type:{name:"string"},required:!0},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wpisz swoją odpowiedź'"}},{name:"selectedValue",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"containers",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_QUESTION_SCALE_CONTAINERS.TWO"}}],events:[{name:"elaboration-change"},{name:"select-change",type:{names:["undefined"]}}],slots:[{name:"explanation"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue"]};export{ie as S};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as r}from"./SurveyQuestionScale-
|
|
1
|
+
import{S as r}from"./SurveyQuestionScale-Cx65nLcq.js";import{S as e}from"./SurveyToggle-CISyD5gz.js";import{a as s,S as c}from"./string-CJTX2pVG.js";import"./Card-BNrHU9qb.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./Divider-BPqXVinF.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./LoadingBar-COnzT5gw.js";import"./IconButton-BO-CETCB.js";import"./Icon-6eu_szpS.js";import"./Button-BfC5uvwA.js";import"./device-9fgosCm4.js";const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,q={title:"Components/SurveyQuestions/SurveyQuestionScale",component:r},R=i=>{const[p,t]=u();return{components:{SurveyQuestionScale:r},setup(){return i},template:'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate"><template v-if="explanation" #explanation><div v-html="explanation" /></template></survey-question-scale>',methods:{elaborationUpdate(a){t({elaborationValue:a})},selectedValueUpdate(a){t({selectedValue:a})}}}},l=R.bind({}),S={title:"Main question write here if it's long it will collapse.",elaborationLabel:"Jeśli chcesz, uzasadnij lub rozwiń swoją ocenę",elaborationValue:"",explanation:`<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>
|
|
2
2
|
<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>`,placeholder:"Wpisz swoją odpowiedź",containers:s.TWO,selectedValue:null,scaleOptions:[{value:"1",label:"Nie zgadzam się",meaning:e.PRIMARY,content:"1"},{value:"2",label:"Trochę się nie zgadzam",meaning:e.PRIMARY,content:"2"},{value:"3",label:"Trochę się zgadzam",meaning:e.PRIMARY,content:"3"},{value:"4",label:"Zgadzam się ",meaning:e.PRIMARY,content:"4"},{value:"5",label:"Nie wiem",meaning:e.NEUTRAL,standalone:!0}],state:c.DEFAULT},O={elaborationValue:{control:"text"},selectedValue:{control:!1},explanation:{control:"text"},containers:{control:"select",options:Object.values(s)},scaleOptions:{control:"object"},state:{control:"select",options:Object.values(c)}};l.argTypes=O;l.args=S;l.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1555%3A41739"}};const A={elaborationValue:{control:!1},explanation:{control:!1},selectedValue:{control:!1},scaleOptions:{control:!1},state:{control:!1},placeholder:{control:!1},elaborationLabel:{control:!1},title:{control:!1},"elaboration-change":{control:!1},"select-change":{control:!1}},U=i=>{const[p,t]=u();return{components:{SurveyQuestionScale:r},setup(){return i},template:'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate"><template v-if="explanation" #explanation><div v-html="explanation" /></template></survey-question-scale></div>',methods:{elaborationUpdate(a){t({elaborationValue:a})},selectedValueUpdate(a){t({selectedValue:a})}}}},o=U.bind({});o.argTypes={...A,containers:{control:"select",options:Object.values(s)}};o.args={title:"Main question write here if it's long it will collapse.",elaborationLabel:"Jeśli chcesz, uzasadnij lub rozwiń swoją ocenę",elaborationValue:"",explanation:`<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>
|
|
3
3
|
<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>`,placeholder:"Wpisz swoją odpowiedź",containers:s.TWO,state:c.DEFAULT,selectedValue:null,scaleOptions:[{value:"1",label:"Nie zgadzam się",meaning:e.PRIMARY,content:"1"},{value:"2",label:"Trochę się nie zgadzam",meaning:e.PRIMARY,content:"2"},{value:"3",label:"Trochę się zgadzam",meaning:e.PRIMARY,content:"3"},{value:"4",label:"Zgadzam się ",meaning:e.PRIMARY,content:"4"},{value:"5",label:"Nie wiem",meaning:e.NEUTRAL,standalone:!0}]};const x=i=>{const[p,t]=u();return{components:{SurveyQuestionScale:r},setup(){return i},data(){return{elaboration:""}},template:'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',methods:{selectedValueUpdate(a){t({selectedValue:a})}}}},n=x.bind({});n.argTypes={...A,containers:{control:"select",options:Object.values(s)}};n.args={containers:s.ONE,selectedValue:null,scaleOptions:[{value:"1",label:"Nie zgadzam się",meaning:e.PRIMARY,content:"1"},{value:"2",label:"",meaning:e.PRIMARY,content:"2"},{value:"3",label:"",meaning:e.PRIMARY,content:"3"},{value:"4",label:"Trochę",meaning:e.PRIMARY,content:"4"},{value:"5",label:"",meaning:e.PRIMARY,content:"5"},{value:"6",label:"",meaning:e.PRIMARY,content:"6"},{value:"7",label:"Zgadzam się",meaning:e.PRIMARY,content:"7"}]};var d,m,b;l.parameters={...l.parameters,docs:{...(d=l.parameters)==null?void 0:d.docs,source:{originalSource:`args => {
|
|
4
4
|
const [_, updateArgs] = useArgs();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as c,I as o,b as T}from"./Icon-
|
|
1
|
+
import{a as c,I as o,b as T}from"./Icon-6eu_szpS.js";import{d as m,c as r,a as u,g as f,k as i,h as g,n as v,r as p,o as l}from"./vue.esm-bundler-DiF7B9b7.js";import{_}from"./_plugin-vue_export-helper-DlAUqK2U.js";const s={PRIMARY:"primary",NEUTRAL:"neutral"},t={DEFAULT:"default",SELECTED:"selected"},a={DEFAULT:"default",HOVERED:"hovered",DISABLED:"disabled"},d=m({name:"SurveyToggle",components:{DsIcon:c},props:{label:{type:String,default:null},contentText:{type:String,default:null},meaning:{type:String,default:s.PRIMARY,validator(e){return Object.values(s).includes(e)}},status:{type:String,default:t.DEFAULT,validator(e){return Object.values(t).includes(e)}},state:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},selectedIcon:{type:Object,default(){return o.FA_CHECK_SOLID},validator(e){return Object.values(o).includes(e)}}},data(){return{hovered:!1,ICON_SIZES:Object.freeze(T),SURVEY_TOGGLE_MEANING:Object.freeze(s),SURVEY_TOGGLE_STATUSES:Object.freeze(t),SURVEY_TOGGLE_STATES:Object.freeze(a)}},computed:{isPrimarySelected(){return this.meaning===s.PRIMARY&&this.status===t.SELECTED},isPrimary(){return this.meaning===s.PRIMARY&&this.status===t.DEFAULT},isNeutral(){return this.meaning===s.NEUTRAL&&this.status===t.DEFAULT},isNeutralSelected(){return this.meaning===s.NEUTRAL&&this.status===t.SELECTED},isHoveredState(){return this.state===a.DISABLED?!1:this.state===a.HOVERED?!0:this.hovered}}}),y={class:"ds-surveyToggle__ring"},A={key:0,class:"ds-surveyToggle__icon"},L={key:1,class:"ds-surveyToggle__content"},I={key:0,class:"ds-surveyToggle__label"};function O(e,n,R,N,U,D){const S=p("ds-icon");return l(),r("div",{class:v(["ds-surveyToggle",{"-ds-primary-selected":e.isPrimarySelected,"-ds-primary":e.isPrimary,"-ds-neutral":e.isNeutral,"-ds-neutral-selected":e.isNeutralSelected,"-ds-disabled":e.state===e.SURVEY_TOGGLE_STATES.DISABLED,"-ds-hovered":e.isHoveredState}])},[u("div",{class:"ds-surveyToggle__toggle",onMouseover:n[0]||(n[0]=E=>e.hovered=!0),onMouseleave:n[1]||(n[1]=E=>e.hovered=!1)},[u("div",y,[e.isPrimarySelected||e.isNeutralSelected?(l(),r("span",A,[f(S,{icon:e.selectedIcon,size:e.ICON_SIZES.X_SMALL},null,8,["icon","size"])])):(l(),r("span",L,i(e.contentText),1))])],32),e.label?(l(),r("div",I,i(e.label),1)):g("",!0)],2)}const h=_(d,[["render",O],["__scopeId","data-v-ed4fe0f6"]]);d.__docgenInfo={displayName:"SurveyToggle",exportName:"default",description:"",tags:{},props:[{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"contentText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"meaning",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_TOGGLE_MEANINGS.PRIMARY"}},{name:"status",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_TOGGLE_STATUSES.DEFAULT"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_TOGGLE_STATES.DEFAULT"}},{name:"selectedIcon",type:{name:"object"},defaultValue:{func:!1,value:"ICONS.FA_CHECK_SOLID"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SurveyToggle/SurveyToggle.vue"]};export{s as S,h as a,t as b,a as c};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as n,S as a,b as r,c}from"./SurveyToggle-
|
|
1
|
+
import{a as n,S as a,b as r,c}from"./SurveyToggle-CISyD5gz.js";import{I as l}from"./Icon-6eu_szpS.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const I={title:"Components/SurveyToggle",component:n},g=i=>({components:{SurveyToggle:n},setup(){return i},template:'<div style="background-color:#f6f6f8"><survey-toggle :label="label" :meaning="meaning" :content-text="contentText" :selected-icon="ICONS[selectedIcon]" :status="status" :state="state" /></div>',data(){return{ICONS:Object.freeze(l)}}}),e=g.bind({}),m={label:"label",contentText:"1",meaning:a.PRIMARY,status:r.DEFAULT,state:c.DEFAULT,selectedIcon:"FA_CHECK_SOLID"},p={label:{control:"text"},contentText:{control:"text"},meaning:{control:"select",options:Object.values(a)},status:{control:"select",options:Object.values(r)},state:{control:"select",options:Object.values(c)},selectedIcon:{control:"select",options:Object.keys(l)}};e.argTypes=p;e.args=m;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1555%3A35210"}};var t,o,s;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
|
|
2
2
|
components: {
|
|
3
3
|
SurveyToggle
|
|
4
4
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as T,t as h,
|
|
1
|
+
import{d as T,t as h,c as a,a as r,b as S,h as i,k as u,n,r as p,o as s}from"./vue.esm-bundler-DiF7B9b7.js";import{a as L,I as c,b}from"./Icon-6eu_szpS.js";import{_ as C}from"./_plugin-vue_export-helper-DlAUqK2U.js";const o={SMALL:"small",MEDIUM:"medium"},I={CAPSULE:"capsule",ROUNDED:"rounded"},l={DEFAULT:"default",DISABLED:"disabled"},t={LEFT:"left",RIGHT:"right"},m=T({name:"Switch",components:{DsIcon:L},props:{size:{type:String,default:o.MEDIUM,validator(e){return Object.values(o).includes(e)}},radius:{type:String,default:I.CAPSULE,validator(e){return Object.values(I).includes(e)}},iconLeft:{type:Object,default:null,validator(e){return Object.values(c).includes(h(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(c).includes(h(e))}},labelLeft:{type:String,default:""},labelRight:{type:String,default:""},state:{type:String,default:l.DEFAULT,validator(e){return Object.values(l).includes(e)}},selectedSide:{type:String,default:t.LEFT,validator(e){return Object.values(t).includes(e)}}},emits:["update:selectedSide"],data(){return{ICONS:Object.freeze(c),ICON_SIZES:Object.freeze(b),SWITCH_RADIUSES:Object.freeze(I),SWITCH_SIDE:Object.freeze(t),SWITCH_SIZE:Object.freeze(o),SWITCH_STATE:Object.freeze(l),currentSide:this.selectedSide}},computed:{currentIcon(){return this.currentSide===t.LEFT?this.iconLeft:this.iconRight},currentLabel(){return this.currentSide===t.LEFT?this.labelLeft:this.labelRight},oppositeSide(){return this.currentSide===t.LEFT?t.RIGHT:t.LEFT}},watch:{selectedSide:{handler(e){e!==this.currentSide&&(this.currentSide=e)},immediate:!0}},methods:{onSwitch(){this.state!==l.DISABLED&&(this.currentSide=this.oppositeSide,this.$emit("update:selectedSide",this.currentSide))}}}),D=["title"],v={key:1,class:"ds-switch__label"},_=["title"],H={key:1,class:"ds-switch__label"},g={key:1,class:"ds-switch__label"};function y(e,f,A,w,R,W){const d=p("ds-icon");return s(),a("div",{class:n(["ds-switch",{"-ds-small":e.size===e.SWITCH_SIZE.SMALL,"-ds-medium":e.size===e.SWITCH_SIZE.MEDIUM,"-ds-rounded":e.radius===e.SWITCH_RADIUSES.ROUNDED,"-ds-disabled":e.state===e.SWITCH_STATE.DISABLED}]),onClick:f[0]||(f[0]=(...E)=>e.onSwitch&&e.onSwitch(...E))},[r("div",{class:n(["ds-switch__item -ds-left",{"-ds-clickable":e.currentSide!==e.SWITCH_SIDE.LEFT&&e.state!==e.SWITCH_STATE.DISABLED,"-ds-selected":e.currentSide===e.SWITCH_SIDE.LEFT}]),title:e.labelLeft},[e.iconLeft?(s(),S(d,{key:0,class:"ds-switch__icon",icon:e.iconLeft,size:e.ICON_SIZES.XX_SMALL},null,8,["icon","size"])):i("",!0),e.labelLeft?(s(),a("div",v,u(e.labelLeft),1)):i("",!0)],10,D),r("div",{class:n(["ds-switch__item -ds-right",{"-ds-clickable":e.currentSide!==e.SWITCH_SIDE.RIGHT&&e.state!==e.SWITCH_STATE.DISABLED,"-ds-selected":e.currentSide===e.SWITCH_SIDE.RIGHT}]),title:e.labelRight},[e.iconRight?(s(),S(d,{key:0,class:"ds-switch__icon",icon:e.iconRight,size:e.ICON_SIZES.XX_SMALL},null,8,["icon","size"])):i("",!0),e.labelRight?(s(),a("div",H,u(e.labelRight),1)):i("",!0)],10,_),r("div",{class:n(["ds-switch__item -ds-selection",{"-ds-left":e.currentSide===e.SWITCH_SIDE.LEFT,"-ds-right":e.currentSide===e.SWITCH_SIDE.RIGHT}])},[e.currentIcon?(s(),S(d,{key:0,class:"ds-switch__icon",icon:e.currentIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["icon","size"])):i("",!0),e.currentLabel?(s(),a("div",g,u(e.currentLabel),1)):i("",!0)],2)],2)}const j=C(m,[["render",y],["__scopeId","data-v-1d345819"]]);m.__docgenInfo={displayName:"Switch",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"SwitchSize"},defaultValue:{func:!1,value:"SWITCH_SIZES.MEDIUM"}},{name:"radius",type:{name:"SwitchRadius"},defaultValue:{func:!1,value:"SWITCH_RADIUSES.CAPSULE"}},{name:"iconLeft",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"labelLeft",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"labelRight",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"state",type:{name:"SwitchState"},defaultValue:{func:!1,value:"SWITCH_STATE.DEFAULT"}},{name:"selectedSide",type:{name:"SwitchSelection"},defaultValue:{func:!1,value:"SWITCH_SIDE.LEFT"}}],events:[{name:"update:selectedSide",type:{names:["undefined"]}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Switch/Switch.vue"]};export{j as D,o as S,I as a,l as b,t as c};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{D as i,S as a,a as l,b as c,c as d}from"./Switch-
|
|
1
|
+
import{D as i,S as a,a as l,b as c,c as d}from"./Switch-DkIgraJz.js";import{I as t,a as S}from"./Icon-6eu_szpS.js";import{w as g}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const v={title:"Components/Switch",component:i,decorators:[g]},h=r=>({components:{DsSwitch:i,Icon:S},setup(){return r},methods:{onSelectedUpdated(p){console.log(p)}},data(){return{ICONS:Object.freeze(t)}},template:`
|
|
2
2
|
<div style="width: 500px; height: 300px; padding: 10px; border: 1px solid var(--raw-gray-100); position:relative">
|
|
3
3
|
<ds-switch
|
|
4
4
|
:size="size"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as u,I as m,b as c}from"./Icon-
|
|
1
|
+
import{a as u,I as m,b as c}from"./Icon-6eu_szpS.js";import{d,t as p,c as s,b as I,h as n,n as t,k as f,r as S,o as l}from"./vue.esm-bundler-DiF7B9b7.js";import{_ as b}from"./_plugin-vue_export-helper-DlAUqK2U.js";const o={SMALL:"S",MEDIUM:"M"},i=d({name:"TabItem",components:{DsIcon:u},props:{icon:{type:[Object,null],default:null,validator(e){return e===null||Object.values(m).includes(p(e))}},isSelected:{type:Boolean,required:!0},label:{type:[String,null],default:null},labelEllipsis:{type:Boolean,default:!1},size:{type:String,default:o.MEDIUM}},emits:["click"],data(){return{TAB_ITEM_SIZES:Object.freeze(o),ICON_SIZES:Object.freeze(c)}}}),E=["title"];function _(e,a,M,y,T,v){const r=S("ds-icon");return l(),s("div",{class:t(["ds-tabItem",{"-ds-sizeMedium":e.size===e.TAB_ITEM_SIZES.MEDIUM,"-ds-sizeSmall":e.size===e.TAB_ITEM_SIZES.SMALL,"-ds-isSelected":e.isSelected}]),title:e.label,onClick:a[0]||(a[0]=k=>e.$emit("click"))},[e.icon!==null?(l(),I(r,{key:0,class:"ds-tabItem__icon",icon:e.icon,size:e.ICON_SIZES.X_SMALL},null,8,["icon","size"])):n("",!0),e.label?(l(),s("span",{key:1,class:t(["ds-tabItem__label",{"-ds-ellipsis":e.labelEllipsis}])},f(e.label),3)):n("",!0)],10,E)}const C=b(i,[["render",_],["__scopeId","data-v-2e13f3b0"]]);i.__docgenInfo={displayName:"TabItem",exportName:"default",description:"",tags:{},props:[{name:"icon",type:{name:"object|null"},defaultValue:{func:!1,value:"null"}},{name:"isSelected",type:{name:"boolean"},required:!0},{name:"label",type:{name:"string|null"},defaultValue:{func:!1,value:"null"}},{name:"labelEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"TAB_ITEM_SIZES.MEDIUM"}}],events:[{name:"click"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/TabItem/TabItem.vue"]};export{C as T,o as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{T as a,a as o}from"./TabItem-
|
|
1
|
+
import{T as a,a as o}from"./TabItem-Cc0CSUyr.js";import{I as i}from"./Icon-6eu_szpS.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const d={title:"Components/TabItem",component:a},n=r=>({components:{TabItem:a},setup(){return r},template:'<tab-item style="max-width: 150px" :icon="ICONS[icon]" :is-selected="isSelected" :label="label" :size="TAB_ITEM_SIZES[size]" :label-ellipsis="labelEllipsis" />',data(){return{ICONS:Object.freeze(i),TAB_ITEM_SIZES:Object.freeze(o)}}}),e=n.bind({}),c={icon:null,size:"MEDIUM",label:"Tab item",isSelected:!1,labelEllipsis:!1},p={icon:{control:"select",options:[...Object.keys(i),null]},size:{control:"select",options:Object.keys(o)},label:{control:"text"},isSelected:{control:"boolean"},labelEllipsis:{control:"boolean"}};e.argTypes=p;e.args=c;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1552%3A34956"}};var t,s,l;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
|
|
2
2
|
components: {
|
|
3
3
|
TabItem
|
|
4
4
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d,
|
|
1
|
+
import{d,c as a,n as t,g as n,k as u,h as o,r as T,o as s}from"./vue.esm-bundler-DiF7B9b7.js";import{D as f}from"./Skeleton-yR2iGt-A.js";import{_ as m}from"./_plugin-vue_export-helper-DlAUqK2U.js";const E={NEUTRAL:"neutral"},y={SMALL:"small",MEDIUM:"medium",LARGE:"large"},r={SMALL:"small",MEDIUM:"medium"},i={DEFAULT:"default",HOVERED:"hovered",DISABLED:"disabled",LOADING:"loading"},p=d({name:"TextGroup",components:{DsSkeleton:f},props:{size:{type:String,default:r.MEDIUM},color:{type:String,default:E.NEUTRAL},eyebrowText:{type:String,default:null},eyebrowTextEllipsis:{type:Boolean,default:!1},isEyebrowTextUppercase:{type:Boolean,default:!0},mainText:{type:String,default:null},mainTextEllipsis:{type:Boolean,default:!1},supportingText:{type:String,default:null},supportingTextEllipsis:{type:Boolean,default:!1},isInteractive:{type:Boolean,default:!0},skeletonLoadingSize:{type:String,default:y.LARGE},isSelected:{type:Boolean,default:!1},state:{type:String,default:i.DEFAULT}},data(){return{TEXT_GROUP_SIZES:Object.freeze(r),TEXT_GROUP_STATES:Object.freeze(i)}},computed:{colorClassName(){return`-ds-${this.color}`},isLoading(){return this.state===i.LOADING},loadingSizeClassName(){return`-ds-loading-${this.skeletonLoadingSize}`}}}),c={key:0,class:"ds-textGroup__skeletonWrapper"},S={key:1},_={key:2},g={key:0,class:"ds-textGroup__skeletonWrapper"},G={key:1},L={key:2},v={key:0,class:"ds-textGroup__skeletonWrapper"},h={key:1},A=["innerHTML"];function U(e,b,k,O,R,x){const l=T("ds-skeleton");return s(),a("div",{class:t(["ds-textGroup",{"-ds-small":e.size===e.TEXT_GROUP_SIZES.SMALL,"-ds-hovered":e.state===e.TEXT_GROUP_STATES.HOVERED,"-ds-loading":e.isLoading,"-ds-disabled":e.state===e.TEXT_GROUP_STATES.DISABLED,"-ds-interactive":e.isInteractive,"-ds-selected":e.isSelected,[e.loadingSizeClassName]:e.isLoading,[e.colorClassName]:!0}])},[e.eyebrowText!==null?(s(),a("div",{key:0,class:t(["ds-textGroup__eyebrow",{"-ds-ellipsis":e.eyebrowTextEllipsis,"-ds-uppercase":e.isEyebrowTextUppercase}])},[e.isLoading?(s(),a("div",c,[n(l,{width:"50%",height:"100%"})])):e.eyebrowText===""?(s(),a("span",S," ")):(s(),a("span",_,u(e.eyebrowText),1))],2)):o("",!0),e.mainText!==null?(s(),a("div",{key:1,class:t(["ds-textGroup__main",{"-ds-ellipsis":e.mainTextEllipsis}])},[e.isLoading?(s(),a("div",g,[n(l,{width:"100%",height:"100%"})])):e.mainText===""?(s(),a("span",G," ")):(s(),a("span",L,u(e.mainText),1))],2)):o("",!0),e.supportingText!==null?(s(),a("div",{key:2,class:t(["ds-textGroup__supporting",{"-ds-ellipsis":e.supportingTextEllipsis}])},[e.isLoading?(s(),a("div",v,[n(l,{width:"100%",height:"100%"})])):e.supportingText===""?(s(),a("span",h," ")):(s(),a("span",{key:2,innerHTML:e.supportingText},null,8,A))],2)):o("",!0)],2)}const w=m(p,[["render",U],["__scopeId","data-v-14aab7cc"]]);p.__docgenInfo={displayName:"TextGroup",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"TextGroupSize"},defaultValue:{func:!1,value:"TEXT_GROUP_SIZES.MEDIUM"}},{name:"color",type:{name:"TextGroupColor"},defaultValue:{func:!1,value:"TEXT_GROUP_COLORS.NEUTRAL"}},{name:"eyebrowText",type:{name:"string | null"},defaultValue:{func:!1,value:"null"}},{name:"eyebrowTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isEyebrowTextUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"mainText",type:{name:"string | null"},defaultValue:{func:!1,value:"null"}},{name:"mainTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"supportingText",type:{name:"string | null"},defaultValue:{func:!1,value:"null"}},{name:"supportingTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"skeletonLoadingSize",type:{name:"TextGroupLoadingSize"},defaultValue:{func:!1,value:"TEXT_GROUP_LOADING_SIZES.LARGE"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"TextGroupState"},defaultValue:{func:!1,value:"TEXT_GROUP_STATES.DEFAULT"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/TextGroup/TextGroup.vue"]};export{w as D,r as T,E as a,y as b,i as c};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{D as u}from"./Divider-
|
|
1
|
+
import{D as u}from"./Divider-BPqXVinF.js";import{D as o,T as l,a as r,b as a,c as n}from"./TextGroup-DrSbeVN2.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Skeleton-yR2iGt-A.js";const b={title:"Components/TextGroup",component:o},c=p=>({components:{DsDivider:u,DsTextGroup:o},setup(){return p},template:`
|
|
2
2
|
<ds-text-group
|
|
3
3
|
:size="size"
|
|
4
4
|
:color="color"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as s,
|
|
1
|
+
import{d as s,c as u,a as l,n as i,f as o,o as m}from"./vue.esm-bundler-DiF7B9b7.js";import{_ as r}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={MEDIUM:"medium",LARGE:"large"},a=s({name:"ThreeColumnLayout",props:{rightColumnSize:{type:String,default:t.MEDIUM,validator(e){return Object.values(t).includes(e)}},rightColumnVisible:{type:Boolean,default:!0},leftColumnVisible:{type:Boolean,default:!0},initialMobileRightColumnVisibleState:{type:Boolean,default:!1},initialMobileLeftColumnVisibleState:{type:Boolean,default:!1},contentWithoutPadding:{type:Boolean,default:!1}},emits:["overlay-clicked"],data(){return{THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE:Object.freeze(t),leftColumnVisibleMobile:!1,rightColumnVisibleMobile:!1}},watch:{leftColumnVisible(e){this.leftColumnVisibleMobile!==e&&(this.leftColumnVisibleMobile=e)},rightColumnVisible(e){this.rightColumnVisibleMobile!==e&&(this.rightColumnVisibleMobile=e)}},created(){this.leftColumnVisibleMobile=this.initialMobileLeftColumnVisibleState,this.rightColumnVisibleMobile=this.initialMobileRightColumnVisibleState}}),d={class:"ds-threeColumnLayout"},f={class:"ds-threeColumnLayout__contentColumn"};function C(e,n,b,h,V,M){return m(),u("div",d,[l("div",{class:i(["ds-threeColumnLayout__overlay",{"-ds-visible":e.rightColumnVisibleMobile||e.leftColumnVisibleMobile}]),onClick:n[0]||(n[0]=g=>e.$emit("overlay-clicked"))},null,2),l("div",{class:i(["ds-threeColumnLayout__leftColumn",{"-ds-desktopVisible":e.leftColumnVisible||e.leftColumnVisibleMobile,"-ds-mobileVisible":e.leftColumnVisibleMobile}])},[o(e.$slots,"leftColumn",{},void 0,!0)],2),l("div",f,[l("div",{class:i(["ds-threeColumnLayout__content",{"-ds-noPadding":e.contentWithoutPadding}])},[o(e.$slots,"default",{},void 0,!0)],2)]),l("div",{class:i(["ds-threeColumnLayout__rightColumn",{"-ds-medium":e.rightColumnSize===e.THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,"-ds-large":e.rightColumnSize===e.THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.LARGE,"-ds-desktopVisible":e.rightColumnVisible||e.rightColumnVisibleMobile,"-ds-mobileVisible":e.rightColumnVisibleMobile}])},[o(e.$slots,"rightColumn",{},void 0,!0)],2)])}const _=r(a,[["render",C],["__scopeId","data-v-f26c3551"]]);a.__docgenInfo={displayName:"ThreeColumnLayout",exportName:"default",description:"",tags:{},props:[{name:"rightColumnSize",type:{name:"ThreeColumnLayoutRightColumnSize"},defaultValue:{func:!1,value:"THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM"}},{name:"rightColumnVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"leftColumnVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"initialMobileRightColumnVisibleState",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"initialMobileLeftColumnVisibleState",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"contentWithoutPadding",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"overlay-clicked"}],slots:[{name:"leftColumn"},{name:"default"},{name:"rightColumn"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue"]};export{_ as T,t as a};
|
package/docs/assets/{ThreeColumnLayout.stories-C5cNwOWv.js → ThreeColumnLayout.stories-EL55MOL9.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{T as n,a}from"./ThreeColumnLayout-
|
|
1
|
+
import{T as n,a}from"./ThreeColumnLayout-NhAT4cZY.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const c={title:"Components/Layouts/ThreeColumnLayout",component:n,decorators:[e=>({components:{story:e},template:`<div style='display: flex; width: 100vw; height: 100vh; background: lightgray; flex-direction: column;'><div style="padding: 16px; background: lightcoral; z-index: 1">Example header</div><story /></div>`}),e=>({components:{story:e},template:"<div style='display: flex; width: 100%; height: 100%; font-size: 12px; color: #fff;'><story /></div>"})]},r=e=>({components:{ThreeColumnLayout:n},setup(){return e},template:`
|
|
2
2
|
<three-column-layout :rightColumnSize='rightColumnSize'
|
|
3
3
|
:rightColumnVisible='rightColumnVisible'
|
|
4
4
|
:leftColumnVisible='leftColumnVisible'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{I as c,a as I,b as f}from"./Icon-
|
|
1
|
+
import{I as c,a as I,b as f}from"./Icon-6eu_szpS.js";import{t as u,d as T,r as E,o as s,c as a,b as l,h as r,a as p,n,k as d}from"./vue.esm-bundler-DiF7B9b7.js";import{_ as y}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",PRIMARY:"primary",SUCCESS:"success",FAIL:"fail",WARNING:"warning",INFO:"info"},i={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},L={interactive:{type:Boolean,default:!1},iconLeft:{type:Object,default:null,validator(e){return Object.values(c).includes(u(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(c).includes(u(e))}},isIconRightHiddenOnMobile:{type:Boolean,default:!1},text:{type:String,required:!0},eyebrowText:{type:String,default:null},additionalText:{type:String,default:null},color:{type:String,default:t.NEUTRAL,validator(e){return Object.values(t).includes(e)}},isEyebrowTextUppercase:{type:Boolean,default:!1},state:{type:String,default:i.DEFAULT,validator(e){return Object.values(i).includes(e)}},eyebrowEllipsis:{type:Boolean,default:!0},textEllipsis:{type:Boolean,default:!0}},S=T({name:"Tile",components:{DsIcon:I},props:L,data(){return{ICONS:Object.freeze(c),ICON_SIZES:Object.freeze(f),TILE_STATES:Object.freeze(i)}},computed:{tileColor(){return{[t.NEUTRAL]:"-ds-neutral",[t.NEUTRAL_WEAK]:"-ds-neutralWeak",[t.PRIMARY]:"-ds-primary",[t.SUCCESS]:"-ds-success",[t.FAIL]:"-ds-fail",[t.WARNING]:"-ds-warning",[t.INFO]:"-ds-info"}[this.color]},tileState(){return{[i.DEFAULT]:null,[i.DISABLED]:"-ds-disabled",[i.LOADING]:"-ds-loading"}[this.state]}}}),_={class:"ds-tile__center"},A=["textContent"],N=["textContent"],b={key:3,class:"ds-tile__additionalText"};function O(e,m,C,g,R,h){const o=E("ds-icon");return s(),a("div",{class:n([[e.tileColor,e.tileState,{"-ds-interactive":e.interactive}],"ds-tile"])},[e.iconLeft?(s(),l(o,{key:0,icon:e.iconLeft,size:e.ICON_SIZES.SMALL,class:"ds-tile__iconLeft"},null,8,["icon","size"])):r("",!0),p("div",_,[e.eyebrowText?(s(),a("span",{key:0,class:n(["ds-tile__eyebrowText",{"-ds-uppercase":e.isEyebrowTextUppercase,"-ds-ellipsis":e.eyebrowEllipsis}]),textContent:d(e.eyebrowText)},null,10,A)):r("",!0),p("span",{class:n(["ds-tile__text",{"-ds-ellipsis":e.textEllipsis}]),textContent:d(e.text)},null,10,N)]),e.state===e.TILE_STATES.LOADING?(s(),l(o,{key:1,class:"ds-tile__iconRight",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.SMALL,spinning:""},null,8,["icon","size"])):e.iconRight?(s(),l(o,{key:2,class:n(["ds-tile__iconRight",{"-ds-hiddenOnMobile":e.isIconRightHiddenOnMobile}]),icon:e.iconRight,size:e.ICON_SIZES.SMALL},null,8,["class","icon","size"])):e.additionalText?(s(),a("div",b,d(e.additionalText),1)):r("",!0)],2)}const w=y(S,[["render",O],["__scopeId","data-v-6865ba77"]]);S.__docgenInfo={displayName:"Tile",exportName:"default",description:"",tags:{},sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Tile/Tile.vue"]};export{i as T,t as a,w as b,L as p};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as a,T as l}from"./Tile-
|
|
1
|
+
import{b as a,T as l}from"./Tile-DXVTBx8j.js";import{d,t as T,a as x,b as m}from"./Tile.sb.shared-DAh00AIu.js";import{w as g}from"./decorator-CSnIf-k5.js";import"./Icon-6eu_szpS.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const E={title:"Components/Tile",component:a,decorators:[g],render:p=>({components:{Tile:a},setup(){return p},data:d,template:T("tile")}),argTypes:x,parameters:{actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1923%3A34378"}}},t={args:m},e={args:{...m,interactive:!1,iconLeft:null,iconRight:null,text:"this is a text text",eyebrowText:"this is an eyebrowText text",additionalText:"this is some additionalText",state:l.DEFAULT}};var s,r,i;t.parameters={...t.parameters,docs:{...(s=t.parameters)==null?void 0:s.docs,source:{originalSource:`{
|
|
2
2
|
args
|
|
3
3
|
}`,...(i=(r=t.parameters)==null?void 0:r.docs)==null?void 0:i.source}}};var o,n,c;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:`{
|
|
4
4
|
args: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{D as z,b as n,c as D,a as _}from"./Button-
|
|
1
|
+
import{D as z,b as n,c as D,a as _}from"./Button-BfC5uvwA.js";import{C as P}from"./Card-BNrHU9qb.js";import{d as U,t as S,c as k,g as A,j as w,e as l,s as j,n as L,r as b,o as p,a as y,b as T,l as h,k as g,h as O,f as V}from"./vue.esm-bundler-DiF7B9b7.js";import{I as s}from"./Icon-6eu_szpS.js";import{_ as x}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{w as $}from"./decorator-CSnIf-k5.js";import"./Divider-BPqXVinF.js";import"./LoadingBar-COnzT5gw.js";import"./v4-BZawosSj.js";const c={SMALL:"small",MEDIUM:"medium"},r={NEUTRAL_HEAVY:"neutralHeavy",NEUTRAL_STRONG:"neutralStrong",SUCCESS:"success",WARNING:"warning",DANGER:"danger",INFO:"info"},u={LEFT:"left",CENTER:"center",RIGHT:"right"};function M(e){const t=window.getComputedStyle(e).borderLeftWidth,m=window.getComputedStyle(e).borderRightWidth,i=e.getBoundingClientRect(),d=i.left+parseInt(t,10),f=i.right-parseInt(m,10)-parseInt(t,10),a=i.width;return{left:{left:`${d}px`},right:{left:`${f}px`,transform:"translateX(-100%)"},center:{left:`${d+a/2}px`,transform:"translateX(-50%)"}}}const N=U({name:"Toast",components:{DsButton:z,DsCard:P},props:{size:{type:String,default:c.MEDIUM},position:{type:String,default:u.CENTER},boundariesSelector:{type:[String,HTMLElement],default:null},color:{type:String,default:r.INFO},footerPrimaryButtonText:{type:String,default:""},footerPrimaryButtonIcon:{type:Object,default:null,validator(e){return e==null||Object.values(s).includes(S(e))}},footerSecondaryButtonText:{type:String,default:""},footerSecondaryButtonIcon:{type:Object,default:null,validator(e){return e==null||Object.values(s).includes(S(e))}},isDisappearing:{type:Boolean,default:!0},disappearingTimeout:{type:String,default:"0",validator(e){return(e==="0"||!isNaN(parseInt(e,10)))&&parseInt(e,10)>=0}}},emits:{close:()=>!0,"primary-button-click":()=>!0,"secondary-button-click":()=>!0},data(){return{boundariesSelectorElement:null,boundariesSelectorElementResizeObserver:null,styles:{},BUTTON_COLORS:Object.freeze(n),BUTTON_RADIUSES:Object.freeze(D),BUTTON_TYPES:Object.freeze(_),TOAST_SIZES:Object.freeze(c),TOAST_POSITIONS:Object.freeze(u)}},computed:{buttonPrimaryColor(){return this.color===r.DANGER?n.NEUTRAL:n.PRIMARY},buttonSecondaryColor(){return this.color===r.DANGER?n.DANGER:n.NEUTRAL},toastPosition(){return`-ds-position-${this.position.toLowerCase()}`},toastSize(){return`-ds-size-${this.size.toLowerCase()}`}},mounted(){var e;this.setBoundariesSelectorElement(),this.calculateStyles(),(e=this.boundariesSelectorElementResizeObserver)==null||e.disconnect(),this.boundariesSelectorElementResizeObserver=new ResizeObserver(()=>{this.calculateStyles()}),this.boundariesSelectorElement?this.boundariesSelectorElementResizeObserver.observe(this.boundariesSelectorElement):this.boundariesSelectorElementResizeObserver.observe(document.querySelector("body")),this.isDisappearing&&this.disappearingTimeout!=="0"&&setTimeout(()=>this.$emit("close"),parseInt(this.disappearingTimeout,10)*1e3+100)},beforeUnmount(){this.boundariesSelectorElementResizeObserver.disconnect(),this.boundariesSelectorElementResizeObserver=null},updated(){const{right:e,left:t}=this.$el.getClientRects()[0];(parseInt(t,10)<0||e>document.documentElement.clientWidth)&&(this.styles={left:"50%",transform:"translateX(-50%)"})},methods:{calculateStyles(){this.boundariesSelectorElement?this.styles=M(this.boundariesSelectorElement)[this.position]:this.styles={}},setBoundariesSelectorElement(){typeof this.boundariesSelector=="string"?this.boundariesSelectorElement=document.querySelector(this.boundariesSelector)||null:this.boundariesSelector instanceof HTMLElement&&(this.boundariesSelectorElement=this.boundariesSelector)}}}),G={class:"ds-toast__content"},W={class:"ds-toast__footerButtons"};function F(e,t,m,i,d,f){const a=b("ds-button"),R=b("ds-card");return p(),k("div",{style:j(e.styles),class:L(["ds-toast",e.toastSize,e.toastPosition])},[A(R,{"loading-bar-color":e.color,"has-loading-bar":"","loading-bar-time":e.disappearingTimeout},w({content:l(()=>[y("div",G,[V(e.$slots,"content",{},void 0,!0)])]),_:2},[e.footerPrimaryButtonText.length>0||e.footerSecondaryButtonText.length>0?{name:"footer",fn:l(()=>[y("div",W,[e.footerSecondaryButtonText.length?(p(),T(a,{key:0,color:e.buttonSecondaryColor,"icon-right":e.footerSecondaryButtonIcon,type:e.BUTTON_TYPES.OUTLINED,radius:e.BUTTON_RADIUSES.ROUNDED,onClick:t[0]||(t[0]=C=>e.$emit("secondary-button-click"))},{default:l(()=>[h(g(e.footerSecondaryButtonText),1)]),_:1},8,["color","icon-right","type","radius"])):O("",!0),e.footerPrimaryButtonText.length?(p(),T(a,{key:1,color:e.buttonPrimaryColor,"icon-right":e.footerPrimaryButtonIcon,radius:e.BUTTON_RADIUSES.ROUNDED,onClick:t[1]||(t[1]=C=>e.$emit("primary-button-click"))},{default:l(()=>[h(g(e.footerPrimaryButtonText),1)]),_:1},8,["color","icon-right","radius"])):O("",!0)])]),key:"0"}:void 0]),1032,["loading-bar-color","loading-bar-time"])],6)}const B=x(N,[["render",F],["__scopeId","data-v-1898598e"]]);N.__docgenInfo={displayName:"Toast",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"ToastSizes"},defaultValue:{func:!1,value:"TOAST_SIZES.MEDIUM"}},{name:"position",type:{name:"ToastPositions"},defaultValue:{func:!1,value:"TOAST_POSITIONS.CENTER"}},{name:"boundariesSelector",type:{name:"string|HTMLElement"},defaultValue:{func:!1,value:"null"}},{name:"color",type:{name:"ToastColors"},defaultValue:{func:!1,value:"TOAST_COLORS.INFO"}},{name:"footerPrimaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"footerPrimaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"footerSecondaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"isDisappearing",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"disappearingTimeout",type:{name:"string"},defaultValue:{func:!1,value:"'0'"}}],events:[{name:"secondary-button-click"},{name:"primary-button-click"},{name:"close"}],slots:[{name:"content"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Toast/Toast.vue"]};const re={title:"Components/Toast",component:B,decorators:[$]},H=e=>({components:{DsToast:B},setup(){return e},data(){return{ICONS:Object.freeze(s),isVisible:!0,boundariesSelectorId:this.boundariesSelector!=null?`#${this.boundariesSelector}`:null}},template:`<div style="display: flex; justify-content: space-around; height: 1200px; width: 100%;">
|
|
2
2
|
<ds-toast
|
|
3
3
|
v-if="isVisible"
|
|
4
4
|
:size="size"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as L,t as c,
|
|
1
|
+
import{d as L,t as c,c as S,a as E,b as o,h as l,n as i,k as m,r as p,o as a}from"./vue.esm-bundler-DiF7B9b7.js";import{a as g,I as u,b as O}from"./Icon-6eu_szpS.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={SMALL:"small",MEDIUM:"medium",LARGE:"large"},r={NEUTRAL:"neutral",NEUTRAL_STRONG:"neutralStrong",NEUTRAL_HEAVY:"neutralHeavy",PRIMARY:"primary"},d={CAPSULE:"capsule",ROUNDED:"rounded"},G={SMALL:"small",MEDIUM:"medium"},n={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},f=L({name:"ToggleButton",components:{DsIcon:g},props:{color:{type:String,default:r.NEUTRAL,validator(e){return Object.values(r).includes(e)}},hasSmallHorizontalPadding:{type:Boolean,default:!1},iconLeft:{type:Object,default:null,validator(e){return Object.values(u).includes(c(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(u).includes(c(e))}},isInteractive:{type:Boolean,default:!0},isLabelUppercase:{type:Boolean,default:!1},isSelected:{type:Boolean,default:!1},label:{type:String,default:""},labelSize:{type:String,default:t.MEDIUM},radius:{type:String,default:d.CAPSULE,validator(e){return Object.values(d).includes(e)}},size:{type:String,default:t.MEDIUM,validator(e){return Object.values(t).includes(e)}},state:{type:String,default:n.DEFAULT,validator(e){return Object.values(n).includes(e)}}},emits:["click"],data(){return{ICONS:Object.freeze(u),TOGGLE_BUTTON_COLORS:Object.freeze(r),TOGGLE_BUTTON_LABEL_SIZES:Object.freeze(G),TOGGLE_BUTTON_RADIUSES:Object.freeze(d),TOGGLE_BUTTON_SIZES:Object.freeze(t),TOGGLE_BUTTON_STATES:Object.freeze(n)}},computed:{colorClassName(){return`-ds-color-${this.color}`},iconSize(){return this.size===t.LARGE?O.X_SMALL:O.XX_SMALL},isInteractiveComputed(){return this.state!==n.DEFAULT?!1:this.isInteractive}}}),U={class:"ds-toggleButton__contentWrapper"};function _(e,T,I,N,A,v){const s=p("ds-icon");return a(),S("div",{class:i(["ds-toggleButtonWrapper",{"-rounded":e.radius===e.TOGGLE_BUTTON_RADIUSES.ROUNDED}])},[E("div",{class:i(["ds-toggleButton",{"-ds-small":e.size===e.TOGGLE_BUTTON_SIZES.SMALL,"-ds-medium":e.size===e.TOGGLE_BUTTON_SIZES.MEDIUM,"-ds-large":e.size===e.TOGGLE_BUTTON_SIZES.LARGE,"-ds-hasSmallHorizontalPadding":e.hasSmallHorizontalPadding,"-ds-rounded":e.radius===e.TOGGLE_BUTTON_RADIUSES.ROUNDED,[e.colorClassName]:!0,"-ds-disabled":e.state===e.TOGGLE_BUTTON_STATES.DISABLED,"-ds-loading":e.state===e.TOGGLE_BUTTON_STATES.LOADING,"-ds-interactive":e.isInteractiveComputed,"-ds-selected":e.isSelected}]),onClick:T[0]||(T[0]=b=>e.isInteractiveComputed&&e.$emit("click"))},[E("div",U,[e.iconLeft?(a(),o(s,{key:0,class:"ds-toggleButton__icon",icon:e.iconLeft,size:e.iconSize},null,8,["icon","size"])):l("",!0),e.label?(a(),S("span",{key:1,class:i(["ds-toggleButton__content",{"-ds-small":e.labelSize===e.TOGGLE_BUTTON_LABEL_SIZES.SMALL,"-ds-uppercase":e.isLabelUppercase}])},m(e.label),3)):l("",!0),e.iconRight?(a(),o(s,{key:2,class:"ds-toggleButton__icon",icon:e.iconRight,size:e.iconSize},null,8,["icon","size"])):l("",!0)]),e.state===e.TOGGLE_BUTTON_STATES.LOADING?(a(),o(s,{key:0,class:"ds-toggleButton__icon ds-toggleButton__loadingSpinner",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.iconSize,spinning:""},null,8,["icon","size"])):l("",!0)],2)],2)}const R=B(f,[["render",_],["__scopeId","data-v-f32da870"]]);f.__docgenInfo={displayName:"ToggleButton",exportName:"default",description:"",tags:{},props:[{name:"color",type:{name:"ToggleButtonColor"},defaultValue:{func:!1,value:"TOGGLE_BUTTON_COLORS.NEUTRAL"}},{name:"hasSmallHorizontalPadding",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"iconLeft",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isLabelUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"labelSize",type:{name:"ToggleButtonLabelSize"},defaultValue:{func:!1,value:"TOGGLE_BUTTON_SIZES.MEDIUM"}},{name:"radius",type:{name:"ToggleButtonRadius"},defaultValue:{func:!1,value:"TOGGLE_BUTTON_RADIUSES.CAPSULE"}},{name:"size",type:{name:"ToggleButtonSize"},defaultValue:{func:!1,value:"TOGGLE_BUTTON_SIZES.MEDIUM"}},{name:"state",type:{name:"ToggleButtonState"},defaultValue:{func:!1,value:"TOGGLE_BUTTON_STATES.DEFAULT"}}],events:[{name:"click"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Toggles/ToggleButton/ToggleButton.vue"]};export{R as T,t as a,r as b,d as c,G as d,n as e};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{T as n,a as l,b as i,c as r,d as c,e as p}from"./ToggleButton-
|
|
1
|
+
import{T as n,a as l,b as i,c as r,d as c,e as p}from"./ToggleButton-BCtYIja9.js";import{I as t}from"./Icon-6eu_szpS.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const I={title:"Components/Toggles/ToggleButton",component:n},d=g=>({components:{ToggleButton:n},setup(){return g},data(){return{ICONS:Object.freeze(t)}},template:`
|
|
2
2
|
<toggle-button
|
|
3
3
|
:color="color"
|
|
4
4
|
:has-small-horizontal-padding="hasSmallHorizontalPadding"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as p,z as a,c as o,f as s,A as r,o as i}from"./vue.esm-bundler-DiF7B9b7.js";import{i as u}from"./device-9fgosCm4.js";import{_ as d}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={TOP:"top",BOTTOM:"bottom",LEFT:"left",RIGHT:"right"},l=p({name:"Tooltip",props:{placement:{type:String,default:n.BOTTOM,validator(e){return Object.values(n).includes(e)}},text:{type:String,default:""},isDisabled:{type:Boolean,default:!1},isPointerVisible:{type:Boolean,default:!0},inline:{type:Boolean,default:!1}},computed:{tooltipParams(){return{position:this.placement,event:u()?"focus":"hover"}},options(){return{value:this.text,disabled:this.isDisabled,dt:{shadow:"0px 0px 4px 0px rgba(12, 23, 38, 0.08), 0px 6px 12px 0px rgba(12, 23, 38, 0.12), 0px 2px 4px 0px rgba(12, 23, 38, 0.06)",padding:"var(--spacing-space-3xs, 6px) var(--spacing-space-2xs, 8px)",background:"var(--neutral-background-medium, #E5E7ED)",color:"var(--neutral-text-heavy, #343C50)",borderRadius:"4px",maxWidth:"240px"},ptOptions:{mergeProps:!0},pt:{text:"ds-tooltip-text",arrow:this.isPointerVisible?"":"ds-tooltip-arrow-hide"}}}}}),f={key:0,tabindex:"-1"},m={key:1,tabindex:"-1"};function c(e,v,x,T,b,g){const t=r("pv-tooltip");return e.inline?a((i(),o("span",f,[s(e.$slots,"default")])),[[t,e.options,e.tooltipParams]]):a((i(),o("div",m,[s(e.$slots,"default")])),[[t,e.options,e.tooltipParams]])}const P=d(l,[["render",c]]);l.__docgenInfo={displayName:"Tooltip",exportName:"default",description:"",tags:{},props:[{name:"placement",type:{name:"TooltipPlacement"},defaultValue:{func:!1,value:"TOOLTIP_PLACEMENTS.BOTTOM"}},{name:"text",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isDisabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isPointerVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"inline",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Tooltip/Tooltip.vue"]};export{P as T,n as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{T as n,a as x}from"./Tooltip-
|
|
1
|
+
import{T as n,a as x}from"./Tooltip-DrwiSTCm.js";import{D as v}from"./Switch-DkIgraJz.js";import{D as y}from"./Button-BfC5uvwA.js";import"./vue.esm-bundler-DiF7B9b7.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-6eu_szpS.js";const B={title:"Prime Vue Components/Tooltip",component:n},f=s=>({components:{Tooltip:n},setup(){return s},template:`
|
|
2
2
|
<div style="padding: 60px; width: 100%;display: flex; justify-content: center">
|
|
3
3
|
<div style="padding: 60px;">
|
|
4
4
|
<span>This is a text with </span>
|