@rededor/cura 0.4.6 → 0.5.0-alpha.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/package.json +5 -3
- package/dist/assets/icons/iconset-default-list.ts +0 -1
- package/dist/assets/icons/iconset-default-tmp.svg +0 -942
- package/dist/assets/icons/iconset-default.svg +0 -1
- package/dist/cjs/app-globals-11fb6b23.js +0 -479
- package/dist/cjs/app-globals-11fb6b23.js.map +0 -1
- package/dist/cjs/css-shim-83cf0349.js +0 -8
- package/dist/cjs/css-shim-83cf0349.js.map +0 -1
- package/dist/cjs/cura-button_10.cjs.entry.js +0 -549
- package/dist/cjs/cura-button_10.cjs.entry.js.map +0 -1
- package/dist/cjs/cura.cjs.js +0 -36
- package/dist/cjs/cura.cjs.js.map +0 -1
- package/dist/cjs/index-0e874533.js +0 -1995
- package/dist/cjs/index-0e874533.js.map +0 -1
- package/dist/cjs/index.cjs.js +0 -4
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/loader.cjs.js +0 -42
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/shadow-css-8baae635.js +0 -391
- package/dist/cjs/shadow-css-8baae635.js.map +0 -1
- package/dist/collection/api/cura-api.js +0 -34
- package/dist/collection/api/cura-api.js.map +0 -1
- package/dist/collection/api/cura-api.type.js +0 -7
- package/dist/collection/api/cura-api.type.js.map +0 -1
- package/dist/collection/api/modules/cura-theme-breakpoints-module.js +0 -14
- package/dist/collection/api/modules/cura-theme-breakpoints-module.js.map +0 -1
- package/dist/collection/api/modules/cura-theme-colors-module.js +0 -75
- package/dist/collection/api/modules/cura-theme-colors-module.js.map +0 -1
- package/dist/collection/api/modules/cura-theme-fonts-module.js +0 -36
- package/dist/collection/api/modules/cura-theme-fonts-module.js.map +0 -1
- package/dist/collection/api/modules/cura-theme-module.js +0 -78
- package/dist/collection/api/modules/cura-theme-module.js.map +0 -1
- package/dist/collection/api/modules/cura-theme-spacing-module.js +0 -13
- package/dist/collection/api/modules/cura-theme-spacing-module.js.map +0 -1
- package/dist/collection/api/theme-presets/static.js +0 -71
- package/dist/collection/api/theme-presets/static.js.map +0 -1
- package/dist/collection/api/theme-presets/theme-default.js +0 -50
- package/dist/collection/api/theme-presets/theme-default.js.map +0 -1
- package/dist/collection/api/theme-presets/theme-maternity.js +0 -46
- package/dist/collection/api/theme-presets/theme-maternity.js.map +0 -1
- package/dist/collection/api/theme-presets/theme-oncology.js +0 -53
- package/dist/collection/api/theme-presets/theme-oncology.js.map +0 -1
- package/dist/collection/api/theme-presets/theme-presets.js +0 -9
- package/dist/collection/api/theme-presets/theme-presets.js.map +0 -1
- package/dist/collection/assets/icons/iconset-default-list.js +0 -2
- package/dist/collection/assets/icons/iconset-default-list.js.map +0 -1
- package/dist/collection/assets/icons/iconset-default-tmp.svg +0 -942
- package/dist/collection/assets/icons/iconset-default.svg +0 -1
- package/dist/collection/assets-raw/icons/default/360.svg +0 -8
- package/dist/collection/assets-raw/icons/default/accessibility.svg +0 -5
- package/dist/collection/assets-raw/icons/default/addUser.svg +0 -6
- package/dist/collection/assets-raw/icons/default/airdrop.svg +0 -6
- package/dist/collection/assets-raw/icons/default/alertCircle.svg +0 -5
- package/dist/collection/assets-raw/icons/default/alertTriangle.svg +0 -5
- package/dist/collection/assets-raw/icons/default/arrowDown.svg +0 -3
- package/dist/collection/assets-raw/icons/default/arrowDownCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/arrowLeft.svg +0 -3
- package/dist/collection/assets-raw/icons/default/arrowLeftCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/arrowRight.svg +0 -3
- package/dist/collection/assets-raw/icons/default/arrowRightCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/arrowUp.svg +0 -3
- package/dist/collection/assets-raw/icons/default/arrowUpCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/attach.svg +0 -3
- package/dist/collection/assets-raw/icons/default/avatarF.svg +0 -6
- package/dist/collection/assets-raw/icons/default/avatarM.svg +0 -5
- package/dist/collection/assets-raw/icons/default/biometry.svg +0 -3
- package/dist/collection/assets-raw/icons/default/bloodGroup.svg +0 -3
- package/dist/collection/assets-raw/icons/default/calendar.svg +0 -8
- package/dist/collection/assets-raw/icons/default/cam.svg +0 -4
- package/dist/collection/assets-raw/icons/default/camOff.svg +0 -5
- package/dist/collection/assets-raw/icons/default/central.svg +0 -7
- package/dist/collection/assets-raw/icons/default/chatCircle.svg +0 -6
- package/dist/collection/assets-raw/icons/default/check.svg +0 -3
- package/dist/collection/assets-raw/icons/default/checkBadge.svg +0 -4
- package/dist/collection/assets-raw/icons/default/checkCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/checkDouble.svg +0 -4
- package/dist/collection/assets-raw/icons/default/clock.svg +0 -5
- package/dist/collection/assets-raw/icons/default/close.svg +0 -3
- package/dist/collection/assets-raw/icons/default/closeCircle.svg +0 -5
- package/dist/collection/assets-raw/icons/default/collapse.svg +0 -4
- package/dist/collection/assets-raw/icons/default/config.svg +0 -4
- package/dist/collection/assets-raw/icons/default/delete.svg +0 -7
- package/dist/collection/assets-raw/icons/default/desktop.svg +0 -6
- package/dist/collection/assets-raw/icons/default/doc.svg +0 -7
- package/dist/collection/assets-raw/icons/default/down.svg +0 -3
- package/dist/collection/assets-raw/icons/default/download.svg +0 -3
- package/dist/collection/assets-raw/icons/default/duplicate.svg +0 -4
- package/dist/collection/assets-raw/icons/default/edit.svg +0 -5
- package/dist/collection/assets-raw/icons/default/exam.svg +0 -6
- package/dist/collection/assets-raw/icons/default/expand.svg +0 -4
- package/dist/collection/assets-raw/icons/default/facebook.svg +0 -3
- package/dist/collection/assets-raw/icons/default/fileBmp.svg +0 -17
- package/dist/collection/assets-raw/icons/default/fileJpg.svg +0 -8
- package/dist/collection/assets-raw/icons/default/filePdf.svg +0 -10
- package/dist/collection/assets-raw/icons/default/filePng.svg +0 -10
- package/dist/collection/assets-raw/icons/default/fileUpload.svg +0 -5
- package/dist/collection/assets-raw/icons/default/fileXls.svg +0 -8
- package/dist/collection/assets-raw/icons/default/filter.svg +0 -11
- package/dist/collection/assets-raw/icons/default/fullscreen.svg +0 -6
- package/dist/collection/assets-raw/icons/default/gallery.svg +0 -6
- package/dist/collection/assets-raw/icons/default/geotag.svg +0 -4
- package/dist/collection/assets-raw/icons/default/geotagUnity.svg +0 -5
- package/dist/collection/assets-raw/icons/default/google.svg +0 -3
- package/dist/collection/assets-raw/icons/default/graph.svg +0 -6
- package/dist/collection/assets-raw/icons/default/healthPlan.svg +0 -6
- package/dist/collection/assets-raw/icons/default/height.svg +0 -10
- package/dist/collection/assets-raw/icons/default/height2.svg +0 -8
- package/dist/collection/assets-raw/icons/default/home.svg +0 -6
- package/dist/collection/assets-raw/icons/default/horizontalList.svg +0 -4
- package/dist/collection/assets-raw/icons/default/imageUp.svg +0 -5
- package/dist/collection/assets-raw/icons/default/infoCircle.svg +0 -5
- package/dist/collection/assets-raw/icons/default/instagram.svg +0 -5
- package/dist/collection/assets-raw/icons/default/key.svg +0 -4
- package/dist/collection/assets-raw/icons/default/lamp.svg +0 -12
- package/dist/collection/assets-raw/icons/default/language.svg +0 -9
- package/dist/collection/assets-raw/icons/default/language2.svg +0 -4
- package/dist/collection/assets-raw/icons/default/languageEN.svg +0 -5
- package/dist/collection/assets-raw/icons/default/languagePT.svg +0 -5
- package/dist/collection/assets-raw/icons/default/lattes.svg +0 -3
- package/dist/collection/assets-raw/icons/default/left.svg +0 -3
- package/dist/collection/assets-raw/icons/default/like.svg +0 -4
- package/dist/collection/assets-raw/icons/default/link.svg +0 -4
- package/dist/collection/assets-raw/icons/default/linkExternal.svg +0 -4
- package/dist/collection/assets-raw/icons/default/linkedin.svg +0 -5
- package/dist/collection/assets-raw/icons/default/list.svg +0 -8
- package/dist/collection/assets-raw/icons/default/login.svg +0 -4
- package/dist/collection/assets-raw/icons/default/logout.svg +0 -3
- package/dist/collection/assets-raw/icons/default/mail.svg +0 -6
- package/dist/collection/assets-raw/icons/default/maintenance.svg +0 -4
- package/dist/collection/assets-raw/icons/default/medDoc.svg +0 -5
- package/dist/collection/assets-raw/icons/default/medEspec.svg +0 -4
- package/dist/collection/assets-raw/icons/default/medImg.svg +0 -5
- package/dist/collection/assets-raw/icons/default/medUser.svg +0 -10
- package/dist/collection/assets-raw/icons/default/medical.svg +0 -9
- package/dist/collection/assets-raw/icons/default/menuHamburguer.svg +0 -5
- package/dist/collection/assets-raw/icons/default/menuKebab.svg +0 -5
- package/dist/collection/assets-raw/icons/default/menuMeatballs.svg +0 -5
- package/dist/collection/assets-raw/icons/default/mic.svg +0 -5
- package/dist/collection/assets-raw/icons/default/micOff.svg +0 -6
- package/dist/collection/assets-raw/icons/default/minus.svg +0 -3
- package/dist/collection/assets-raw/icons/default/minusCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/minusSquare.svg +0 -4
- package/dist/collection/assets-raw/icons/default/mobile.svg +0 -4
- package/dist/collection/assets-raw/icons/default/news.svg +0 -8
- package/dist/collection/assets-raw/icons/default/notification.svg +0 -6
- package/dist/collection/assets-raw/icons/default/npsDeslike.svg +0 -6
- package/dist/collection/assets-raw/icons/default/npsHate.svg +0 -6
- package/dist/collection/assets-raw/icons/default/npsLike.svg +0 -6
- package/dist/collection/assets-raw/icons/default/npsLove.svg +0 -6
- package/dist/collection/assets-raw/icons/default/npsNeutral.svg +0 -6
- package/dist/collection/assets-raw/icons/default/order.svg +0 -6
- package/dist/collection/assets-raw/icons/default/partner.svg +0 -5
- package/dist/collection/assets-raw/icons/default/phone.svg +0 -5
- package/dist/collection/assets-raw/icons/default/play.svg +0 -4
- package/dist/collection/assets-raw/icons/default/plus.svg +0 -4
- package/dist/collection/assets-raw/icons/default/plusCircle.svg +0 -5
- package/dist/collection/assets-raw/icons/default/plusSquare.svg +0 -5
- package/dist/collection/assets-raw/icons/default/print.svg +0 -7
- package/dist/collection/assets-raw/icons/default/profile.svg +0 -4
- package/dist/collection/assets-raw/icons/default/profileCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/questionCircle.svg +0 -4
- package/dist/collection/assets-raw/icons/default/questionSquare.svg +0 -4
- package/dist/collection/assets-raw/icons/default/range.svg +0 -5
- package/dist/collection/assets-raw/icons/default/reload.svg +0 -4
- package/dist/collection/assets-raw/icons/default/ribbon.svg +0 -4
- package/dist/collection/assets-raw/icons/default/right.svg +0 -3
- package/dist/collection/assets-raw/icons/default/schedule.svg +0 -9
- package/dist/collection/assets-raw/icons/default/scheduleCheck.svg +0 -8
- package/dist/collection/assets-raw/icons/default/scheduleHistorico.svg +0 -9
- package/dist/collection/assets-raw/icons/default/search.svg +0 -4
- package/dist/collection/assets-raw/icons/default/secure.svg +0 -6
- package/dist/collection/assets-raw/icons/default/share.svg +0 -7
- package/dist/collection/assets-raw/icons/default/sound.svg +0 -5
- package/dist/collection/assets-raw/icons/default/soundOff.svg +0 -4
- package/dist/collection/assets-raw/icons/default/subItem.svg +0 -4
- package/dist/collection/assets-raw/icons/default/target.svg +0 -8
- package/dist/collection/assets-raw/icons/default/team.svg +0 -6
- package/dist/collection/assets-raw/icons/default/telegram.svg +0 -3
- package/dist/collection/assets-raw/icons/default/twitter.svg +0 -5
- package/dist/collection/assets-raw/icons/default/unLink.svg +0 -10
- package/dist/collection/assets-raw/icons/default/unSecure.svg +0 -6
- package/dist/collection/assets-raw/icons/default/unity.svg +0 -13
- package/dist/collection/assets-raw/icons/default/unlike.svg +0 -4
- package/dist/collection/assets-raw/icons/default/up.svg +0 -3
- package/dist/collection/assets-raw/icons/default/upload.svg +0 -3
- package/dist/collection/assets-raw/icons/default/verticalList.svg +0 -4
- package/dist/collection/assets-raw/icons/default/viewFalse.svg +0 -5
- package/dist/collection/assets-raw/icons/default/viewTrue.svg +0 -4
- package/dist/collection/assets-raw/icons/default/weight.svg +0 -5
- package/dist/collection/assets-raw/icons/default/whatsapp.svg +0 -4
- package/dist/collection/assets-raw/icons/default/wifi.svg +0 -6
- package/dist/collection/assets-raw/icons/default/wifiOff.svg +0 -7
- package/dist/collection/assets-raw/icons/default/youtube.svg +0 -4
- package/dist/collection/assets-raw/icons/default/zoomIn.svg +0 -6
- package/dist/collection/assets-raw/icons/default/zoomOut.svg +0 -5
- package/dist/collection/collection-manifest.json +0 -22
- package/dist/collection/components/buttons/cura-button/cura-button.css +0 -185
- package/dist/collection/components/buttons/cura-button/cura-button.js +0 -308
- package/dist/collection/components/buttons/cura-button/cura-button.js.map +0 -1
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js +0 -122
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js.map +0 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.css +0 -220
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +0 -308
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +0 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css +0 -204
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +0 -308
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +0 -1
- package/dist/collection/components/cura-icon/cura-icon.css +0 -12
- package/dist/collection/components/cura-icon/cura-icon.js +0 -162
- package/dist/collection/components/cura-icon/cura-icon.js.map +0 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.css +0 -68
- package/dist/collection/components/cura-icons-view/cura-icons-view.js +0 -33
- package/dist/collection/components/cura-icons-view/cura-icons-view.js.map +0 -1
- package/dist/collection/components/cura-page-template/cura-page-template.css +0 -105
- package/dist/collection/components/cura-page-template/cura-page-template.js +0 -55
- package/dist/collection/components/cura-page-template/cura-page-template.js.map +0 -1
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.css +0 -33
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +0 -77
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js.map +0 -1
- package/dist/collection/components/text/cura-display/cura-display.css +0 -84
- package/dist/collection/components/text/cura-display/cura-display.js +0 -146
- package/dist/collection/components/text/cura-display/cura-display.js.map +0 -1
- package/dist/collection/components/text/cura-heading/cura-heading.css +0 -92
- package/dist/collection/components/text/cura-heading/cura-heading.js +0 -168
- package/dist/collection/components/text/cura-heading/cura-heading.js.map +0 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +0 -115
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +0 -150
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +0 -1
- package/dist/collection/index.js +0 -2
- package/dist/collection/index.js.map +0 -1
- package/dist/collection/rededor-cura-start.js +0 -10
- package/dist/collection/rededor-cura-start.js.map +0 -1
- package/dist/collection/stories/Button.js +0 -21
- package/dist/collection/stories/Button.stories.js +0 -50
- package/dist/collection/stories/Header.js +0 -47
- package/dist/collection/stories/Header.stories.js +0 -28
- package/dist/collection/stories/Page.js +0 -94
- package/dist/collection/stories/Page.stories.js +0 -27
- package/dist/collection/stories/assets/accessibility.svg +0 -5
- package/dist/collection/stories/assets/discord.svg +0 -15
- package/dist/collection/stories/assets/github.svg +0 -3
- package/dist/collection/stories/assets/tutorials.svg +0 -12
- package/dist/collection/stories/assets/youtube.svg +0 -4
- package/dist/collection/utils/utils.js +0 -4
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/collection/utils/utils.spec.js +0 -16
- package/dist/collection/utils/utils.spec.js.map +0 -1
- package/dist/components/cura-button-outline.d.ts +0 -11
- package/dist/components/cura-button-outline.js +0 -123
- package/dist/components/cura-button-outline.js.map +0 -1
- package/dist/components/cura-button-transparent.d.ts +0 -11
- package/dist/components/cura-button-transparent.js +0 -123
- package/dist/components/cura-button-transparent.js.map +0 -1
- package/dist/components/cura-button.d.ts +0 -11
- package/dist/components/cura-button.js +0 -123
- package/dist/components/cura-button.js.map +0 -1
- package/dist/components/cura-display.d.ts +0 -11
- package/dist/components/cura-display.js +0 -89
- package/dist/components/cura-display.js.map +0 -1
- package/dist/components/cura-heading.d.ts +0 -11
- package/dist/components/cura-heading.js +0 -94
- package/dist/components/cura-heading.js.map +0 -1
- package/dist/components/cura-icon.d.ts +0 -11
- package/dist/components/cura-icon.js +0 -8
- package/dist/components/cura-icon.js.map +0 -1
- package/dist/components/cura-icon2.js +0 -79
- package/dist/components/cura-icon2.js.map +0 -1
- package/dist/components/cura-icons-view.d.ts +0 -11
- package/dist/components/cura-icons-view.js +0 -51
- package/dist/components/cura-icons-view.js.map +0 -1
- package/dist/components/cura-loader-circle.d.ts +0 -11
- package/dist/components/cura-loader-circle.js +0 -8
- package/dist/components/cura-loader-circle.js.map +0 -1
- package/dist/components/cura-loader-circle2.js +0 -51
- package/dist/components/cura-loader-circle2.js.map +0 -1
- package/dist/components/cura-page-template.d.ts +0 -11
- package/dist/components/cura-page-template.js +0 -49
- package/dist/components/cura-page-template.js.map +0 -1
- package/dist/components/cura-paragraph.d.ts +0 -11
- package/dist/components/cura-paragraph.js +0 -87
- package/dist/components/cura-paragraph.js.map +0 -1
- package/dist/components/index.d.ts +0 -39
- package/dist/components/index.js +0 -511
- package/dist/components/index.js.map +0 -1
- package/dist/cura/cura.esm.js +0 -2
- package/dist/cura/cura.esm.js.map +0 -1
- package/dist/cura/cura.js +0 -133
- package/dist/cura/index.esm.js +0 -2
- package/dist/cura/index.esm.js.map +0 -1
- package/dist/cura/p-0bb24006.system.js +0 -2
- package/dist/cura/p-0bb24006.system.js.map +0 -1
- package/dist/cura/p-0e6b48da.js +0 -2
- package/dist/cura/p-0e6b48da.js.map +0 -1
- package/dist/cura/p-118112e5.system.js +0 -14
- package/dist/cura/p-118112e5.system.js.map +0 -1
- package/dist/cura/p-183305c3.js +0 -2
- package/dist/cura/p-183305c3.js.map +0 -1
- package/dist/cura/p-19176c44.system.js +0 -2
- package/dist/cura/p-19176c44.system.js.map +0 -1
- package/dist/cura/p-3f6aaefc.system.js +0 -2
- package/dist/cura/p-3f6aaefc.system.js.map +0 -1
- package/dist/cura/p-50ea2036.system.js +0 -2
- package/dist/cura/p-50ea2036.system.js.map +0 -1
- package/dist/cura/p-a84ae34f.system.js +0 -3
- package/dist/cura/p-a84ae34f.system.js.map +0 -1
- package/dist/cura/p-b7e3230a.entry.js +0 -2
- package/dist/cura/p-b7e3230a.entry.js.map +0 -1
- package/dist/cura/p-beab48cd.js +0 -13
- package/dist/cura/p-beab48cd.js.map +0 -1
- package/dist/cura/p-cbc91ac5.js +0 -3
- package/dist/cura/p-cbc91ac5.js.map +0 -1
- package/dist/cura/p-e45582d9.system.entry.js +0 -2
- package/dist/cura/p-e45582d9.system.entry.js.map +0 -1
- package/dist/esm/app-globals-5009a324.js +0 -477
- package/dist/esm/app-globals-5009a324.js.map +0 -1
- package/dist/esm/css-shim-d13f0738.js +0 -6
- package/dist/esm/css-shim-d13f0738.js.map +0 -1
- package/dist/esm/cura-button_10.entry.js +0 -536
- package/dist/esm/cura-button_10.entry.js.map +0 -1
- package/dist/esm/cura.js +0 -31
- package/dist/esm/cura.js.map +0 -1
- package/dist/esm/index-92c824be.js +0 -1964
- package/dist/esm/index-92c824be.js.map +0 -1
- package/dist/esm/index.js +0 -3
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/loader.js +0 -38
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/shadow-css-07b0c8c8.js +0 -389
- package/dist/esm/shadow-css-07b0c8c8.js.map +0 -1
- package/dist/esm-es5/app-globals-5009a324.js +0 -2
- package/dist/esm-es5/app-globals-5009a324.js.map +0 -1
- package/dist/esm-es5/css-shim-d13f0738.js +0 -2
- package/dist/esm-es5/css-shim-d13f0738.js.map +0 -1
- package/dist/esm-es5/cura-button_10.entry.js +0 -2
- package/dist/esm-es5/cura-button_10.entry.js.map +0 -1
- package/dist/esm-es5/cura.js +0 -2
- package/dist/esm-es5/cura.js.map +0 -1
- package/dist/esm-es5/index-92c824be.js +0 -3
- package/dist/esm-es5/index-92c824be.js.map +0 -1
- package/dist/esm-es5/index.js +0 -2
- package/dist/esm-es5/index.js.map +0 -1
- package/dist/esm-es5/loader.js +0 -2
- package/dist/esm-es5/loader.js.map +0 -1
- package/dist/esm-es5/shadow-css-07b0c8c8.js +0 -13
- package/dist/esm-es5/shadow-css-07b0c8c8.js.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/loader/cdn.js +0 -3
- package/dist/loader/index.cjs.js +0 -3
- package/dist/loader/index.d.ts +0 -21
- package/dist/loader/index.es2017.js +0 -3
- package/dist/loader/index.js +0 -4
- package/dist/loader/package.json +0 -11
- package/dist/types/api/cura-api.d.ts +0 -6
- package/dist/types/api/cura-api.type.d.ts +0 -65
- package/dist/types/api/modules/cura-theme-breakpoints-module.d.ts +0 -5
- package/dist/types/api/modules/cura-theme-colors-module.d.ts +0 -48
- package/dist/types/api/modules/cura-theme-fonts-module.d.ts +0 -24
- package/dist/types/api/modules/cura-theme-module.d.ts +0 -32
- package/dist/types/api/modules/cura-theme-spacing-module.d.ts +0 -6
- package/dist/types/api/theme-presets/static.d.ts +0 -69
- package/dist/types/api/theme-presets/theme-default.d.ts +0 -46
- package/dist/types/api/theme-presets/theme-maternity.d.ts +0 -43
- package/dist/types/api/theme-presets/theme-oncology.d.ts +0 -50
- package/dist/types/api/theme-presets/theme-presets.d.ts +0 -138
- package/dist/types/assets/icons/iconset-default-list.d.ts +0 -2
- package/dist/types/components/buttons/cura-button/cura-button.d.ts +0 -61
- package/dist/types/components/buttons/cura-button/cura-button.stories.d.ts +0 -119
- package/dist/types/components/buttons/cura-button-outline/cura-button-outline.d.ts +0 -61
- package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.d.ts +0 -61
- package/dist/types/components/cura-icon/cura-icon.d.ts +0 -56
- package/dist/types/components/cura-icons-view/cura-icons-view.d.ts +0 -7
- package/dist/types/components/cura-page-template/cura-page-template.d.ts +0 -8
- package/dist/types/components/loaders/cura-loader-circle/cura-loader-circle.d.ts +0 -23
- package/dist/types/components/text/cura-display/cura-display.d.ts +0 -38
- package/dist/types/components/text/cura-heading/cura-heading.d.ts +0 -43
- package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts +0 -37
- package/dist/types/components.d.ts +0 -574
- package/dist/types/index.d.ts +0 -1
- package/dist/types/rededor-cura-start.d.ts +0 -9
- package/dist/types/stencil-public-runtime.d.ts +0 -1638
- package/dist/types/utils/utils.d.ts +0 -1
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import { Host, h } from '@stencil/core';
|
|
2
|
-
export class CuraHeading {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.level = 1;
|
|
5
|
-
this.size = 'regular';
|
|
6
|
-
this.weight = 'regular';
|
|
7
|
-
this.inverted = false;
|
|
8
|
-
this.spotColor = 'primary';
|
|
9
|
-
}
|
|
10
|
-
connectedCallback() {
|
|
11
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
12
|
-
this.setFontProperties();
|
|
13
|
-
this.setColors();
|
|
14
|
-
}
|
|
15
|
-
getClasses() {
|
|
16
|
-
const classes = {};
|
|
17
|
-
classes[this.size.toLowerCase()] = true;
|
|
18
|
-
classes[`${this.weight.toLowerCase()}-weight`] = true;
|
|
19
|
-
return classes;
|
|
20
|
-
}
|
|
21
|
-
setFontProperties() {
|
|
22
|
-
this.styles = {
|
|
23
|
-
'--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
|
|
24
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
25
|
-
'--font-weight-regular': this.weights.regular,
|
|
26
|
-
'--font-weight-medium': this.weights.medium,
|
|
27
|
-
'--font-weight-bold': this.weights.bold,
|
|
28
|
-
'--font-weight-black': this.weights.black
|
|
29
|
-
};
|
|
30
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
31
|
-
this.setHostProperty('--block-margin', '0.5em');
|
|
32
|
-
}
|
|
33
|
-
setColors() {
|
|
34
|
-
const fontColor = this.inverted
|
|
35
|
-
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
36
|
-
: window.CuraAPI.theme.fonts.getColor();
|
|
37
|
-
this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
|
|
38
|
-
this.styles['--color-link'] = this.inverted
|
|
39
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
40
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
41
|
-
}
|
|
42
|
-
setHostProperty(prop, value) {
|
|
43
|
-
this.host.style.setProperty(prop, value);
|
|
44
|
-
}
|
|
45
|
-
getHeadingTag() {
|
|
46
|
-
const tags = {
|
|
47
|
-
'1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
48
|
-
'2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
49
|
-
'3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
50
|
-
'4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
51
|
-
'5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
52
|
-
'6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
53
|
-
'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
|
|
54
|
-
};
|
|
55
|
-
return tags[`${this.level}`] || tags['default'];
|
|
56
|
-
}
|
|
57
|
-
render() {
|
|
58
|
-
return (h(Host, null, this.getHeadingTag()));
|
|
59
|
-
}
|
|
60
|
-
static get is() { return "cura-heading"; }
|
|
61
|
-
static get encapsulation() { return "shadow"; }
|
|
62
|
-
static get originalStyleUrls() {
|
|
63
|
-
return {
|
|
64
|
-
"$": ["cura-heading.scss"]
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
static get styleUrls() {
|
|
68
|
-
return {
|
|
69
|
-
"$": ["cura-heading.css"]
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
static get properties() {
|
|
73
|
-
return {
|
|
74
|
-
"level": {
|
|
75
|
-
"type": "number",
|
|
76
|
-
"mutable": false,
|
|
77
|
-
"complexType": {
|
|
78
|
-
"original": "number",
|
|
79
|
-
"resolved": "number",
|
|
80
|
-
"references": {}
|
|
81
|
-
},
|
|
82
|
-
"required": false,
|
|
83
|
-
"optional": false,
|
|
84
|
-
"docs": {
|
|
85
|
-
"tags": [],
|
|
86
|
-
"text": "Heading level for semantics.\nValues: 1(default)-6."
|
|
87
|
-
},
|
|
88
|
-
"attribute": "level",
|
|
89
|
-
"reflect": true,
|
|
90
|
-
"defaultValue": "1"
|
|
91
|
-
},
|
|
92
|
-
"size": {
|
|
93
|
-
"type": "string",
|
|
94
|
-
"mutable": false,
|
|
95
|
-
"complexType": {
|
|
96
|
-
"original": "string",
|
|
97
|
-
"resolved": "string",
|
|
98
|
-
"references": {}
|
|
99
|
-
},
|
|
100
|
-
"required": false,
|
|
101
|
-
"optional": false,
|
|
102
|
-
"docs": {
|
|
103
|
-
"tags": [],
|
|
104
|
-
"text": "Heading style size.\nValues: small | regular(default) | large."
|
|
105
|
-
},
|
|
106
|
-
"attribute": "size",
|
|
107
|
-
"reflect": true,
|
|
108
|
-
"defaultValue": "'regular'"
|
|
109
|
-
},
|
|
110
|
-
"weight": {
|
|
111
|
-
"type": "string",
|
|
112
|
-
"mutable": false,
|
|
113
|
-
"complexType": {
|
|
114
|
-
"original": "string",
|
|
115
|
-
"resolved": "string",
|
|
116
|
-
"references": {}
|
|
117
|
-
},
|
|
118
|
-
"required": false,
|
|
119
|
-
"optional": false,
|
|
120
|
-
"docs": {
|
|
121
|
-
"tags": [],
|
|
122
|
-
"text": "Heading font weight.\nValues: regular(default) | bold."
|
|
123
|
-
},
|
|
124
|
-
"attribute": "weight",
|
|
125
|
-
"reflect": true,
|
|
126
|
-
"defaultValue": "'regular'"
|
|
127
|
-
},
|
|
128
|
-
"inverted": {
|
|
129
|
-
"type": "boolean",
|
|
130
|
-
"mutable": false,
|
|
131
|
-
"complexType": {
|
|
132
|
-
"original": "boolean",
|
|
133
|
-
"resolved": "boolean",
|
|
134
|
-
"references": {}
|
|
135
|
-
},
|
|
136
|
-
"required": false,
|
|
137
|
-
"optional": false,
|
|
138
|
-
"docs": {
|
|
139
|
-
"tags": [],
|
|
140
|
-
"text": "Apply light color to text in dark background.\nValues: boolean."
|
|
141
|
-
},
|
|
142
|
-
"attribute": "inverted",
|
|
143
|
-
"reflect": true,
|
|
144
|
-
"defaultValue": "false"
|
|
145
|
-
},
|
|
146
|
-
"spotColor": {
|
|
147
|
-
"type": "string",
|
|
148
|
-
"mutable": false,
|
|
149
|
-
"complexType": {
|
|
150
|
-
"original": "string",
|
|
151
|
-
"resolved": "string",
|
|
152
|
-
"references": {}
|
|
153
|
-
},
|
|
154
|
-
"required": false,
|
|
155
|
-
"optional": false,
|
|
156
|
-
"docs": {
|
|
157
|
-
"tags": [],
|
|
158
|
-
"text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
|
|
159
|
-
},
|
|
160
|
-
"attribute": "spot-color",
|
|
161
|
-
"reflect": true,
|
|
162
|
-
"defaultValue": "'primary'"
|
|
163
|
-
}
|
|
164
|
-
};
|
|
165
|
-
}
|
|
166
|
-
static get elementRef() { return "host"; }
|
|
167
|
-
}
|
|
168
|
-
//# sourceMappingURL=cura-heading.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cura-heading.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n tag: 'cura-heading',\n styleUrl: 'cura-heading.scss',\n shadow: true,\n})\nexport class CuraHeading {\n\n /**\n * Heading level for semantics.\n * Values: 1(default)-6.\n */\n @Prop({reflect: true}) level = 1;\n /**\n * Heading style size.\n * Values: small | regular(default) | large.\n */\n @Prop({reflect: true}) size = 'regular';\n /**\n * Heading font weight.\n * Values: regular(default) | bold.\n */\n @Prop({reflect: true}) weight = 'regular';\n /**\n * Apply light color to text in dark background.\n * Values: boolean.\n */\n @Prop({reflect: true}) inverted = false;\n /**\n * Apply base system color to elements like <a> and <abbr>.\n * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n */\n @Prop({reflect: true}) spotColor = 'primary';\n\n /**\n * Host element <cura-heading>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n styles: any;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n classes[`${this.weight.toLowerCase()}-weight`] = true;\n return classes;\n }\n\n setFontProperties() {\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n this.setHostProperty('--block-margin', '0.5em');\n }\n\n setColors() {\n const fontColor = this.inverted \n ? window.CuraAPI.theme.colors.getColor('neutral-white') \n : window.CuraAPI.theme.fonts.getColor();\n this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n this.styles['--color-link'] = this.inverted \n ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
/* Breakpoints variables */
|
|
2
|
-
/**
|
|
3
|
-
* Responsive media for mobile (small) only.
|
|
4
|
-
* Use: @include mobile-only() { ... }
|
|
5
|
-
*/
|
|
6
|
-
/**
|
|
7
|
-
* Responsive media for medium only.
|
|
8
|
-
* Use: @include medium-only() { ... }
|
|
9
|
-
*/
|
|
10
|
-
/**
|
|
11
|
-
* Responsive media for large only.
|
|
12
|
-
* Use: @include large-only() { ... }
|
|
13
|
-
*/
|
|
14
|
-
/**
|
|
15
|
-
* Responsive media for large and up.
|
|
16
|
-
* Use: @include large-up() { ... }
|
|
17
|
-
*/
|
|
18
|
-
/**
|
|
19
|
-
* Responsive media for xlarge only.
|
|
20
|
-
* Use: @include xlarge-only() { ... }
|
|
21
|
-
*/
|
|
22
|
-
:host {
|
|
23
|
-
display: block;
|
|
24
|
-
font-size: var(--font-size);
|
|
25
|
-
}
|
|
26
|
-
:host p {
|
|
27
|
-
font-family: var(--font-family);
|
|
28
|
-
font-size: var(--font-size);
|
|
29
|
-
font-weight: var(--font-weight-regular);
|
|
30
|
-
color: var(--color-body);
|
|
31
|
-
line-height: var(--line-height);
|
|
32
|
-
/* letter-spacing: 0.02em; */
|
|
33
|
-
margin-block-start: var(--block-margin);
|
|
34
|
-
margin-block-end: var(--block-margin);
|
|
35
|
-
}
|
|
36
|
-
:host p.large {
|
|
37
|
-
font-size: 1.21em;
|
|
38
|
-
line-height: calc(var(--line-height) + 10%);
|
|
39
|
-
/* line-height: 150%; */
|
|
40
|
-
/* letter-spacing: normal; */
|
|
41
|
-
}
|
|
42
|
-
:host p.small {
|
|
43
|
-
font-size: 0.85em;
|
|
44
|
-
line-height: calc(var(--line-height) - 5%);
|
|
45
|
-
/* line-height: 135%; */
|
|
46
|
-
/* letter-spacing: 0.04em; */
|
|
47
|
-
}
|
|
48
|
-
:host p.caption {
|
|
49
|
-
font-size: 0.71em;
|
|
50
|
-
line-height: calc(var(--line-height) - 5%);
|
|
51
|
-
/* line-height: 135%; */
|
|
52
|
-
/* letter-spacing: 0.06em; */
|
|
53
|
-
}
|
|
54
|
-
@media (min-width: 768px) and (max-width: 1365px) {
|
|
55
|
-
:host p {
|
|
56
|
-
font-size: 1.14em;
|
|
57
|
-
line-height: calc(var(--line-height) + 5%);
|
|
58
|
-
/* line-height: 145%; */
|
|
59
|
-
}
|
|
60
|
-
:host p.large {
|
|
61
|
-
font-size: 1.35em;
|
|
62
|
-
line-height: calc(var(--line-height) + 10%);
|
|
63
|
-
/* line-height: 150%; */
|
|
64
|
-
}
|
|
65
|
-
:host p.small {
|
|
66
|
-
font-size: 1em;
|
|
67
|
-
line-height: calc(var(--line-height) - 5%);
|
|
68
|
-
/* line-height: 135%; */
|
|
69
|
-
}
|
|
70
|
-
:host p.caption {
|
|
71
|
-
font-size: 0.85em;
|
|
72
|
-
line-height: calc(var(--line-height) - 5%);
|
|
73
|
-
/* line-height: 135%; */
|
|
74
|
-
/* letter-spacing: 0.06em; */
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
@media (min-width: 1366px) {
|
|
78
|
-
:host p {
|
|
79
|
-
font-size: 1.42em;
|
|
80
|
-
line-height: calc(var(--line-height) + 10%);
|
|
81
|
-
/* line-height: 150%; */
|
|
82
|
-
/* letter-spacing: normal; */
|
|
83
|
-
}
|
|
84
|
-
:host p.large {
|
|
85
|
-
font-size: 1.71em;
|
|
86
|
-
line-height: calc(var(--line-height) + 20%);
|
|
87
|
-
/* line-height: 160%; */
|
|
88
|
-
}
|
|
89
|
-
:host p.small {
|
|
90
|
-
font-size: 1.21em;
|
|
91
|
-
line-height: calc(var(--line-height) + 5%);
|
|
92
|
-
/* line-height: 145%; */
|
|
93
|
-
/* letter-spacing: normal; */
|
|
94
|
-
}
|
|
95
|
-
:host p.caption {
|
|
96
|
-
font-size: 1em;
|
|
97
|
-
line-height: calc(var(--line-height) + 5%);
|
|
98
|
-
/* line-height: 145%; */
|
|
99
|
-
/* letter-spacing: 0.02em; */
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
:host ::slotted(b), :host ::slotted(strong) {
|
|
103
|
-
font-weight: var(--font-weight-bold);
|
|
104
|
-
}
|
|
105
|
-
:host ::slotted(a) {
|
|
106
|
-
font-weight: var(--font-weight-medium);
|
|
107
|
-
color: var(--color-link);
|
|
108
|
-
text-underline-offset: 10%;
|
|
109
|
-
}
|
|
110
|
-
:host ::slotted(abbr) {
|
|
111
|
-
color: var(--color-link);
|
|
112
|
-
text-decoration: underline dashed 1px var(--color-link);
|
|
113
|
-
text-underline-offset: 10%;
|
|
114
|
-
cursor: default;
|
|
115
|
-
}
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import { Host, h } from '@stencil/core';
|
|
2
|
-
export class CuraParagraph {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.size = 'regular';
|
|
5
|
-
this.inverted = false;
|
|
6
|
-
this.spotColor = 'primary';
|
|
7
|
-
this.color = undefined;
|
|
8
|
-
this.styles = {};
|
|
9
|
-
}
|
|
10
|
-
handleChangeColor() {
|
|
11
|
-
this.setColors();
|
|
12
|
-
}
|
|
13
|
-
connectedCallback() {
|
|
14
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
15
|
-
this.setFontProperties();
|
|
16
|
-
this.setColors();
|
|
17
|
-
}
|
|
18
|
-
setsizeClass() {
|
|
19
|
-
const sizeclass = {};
|
|
20
|
-
sizeclass[this.size.toLowerCase()] = true;
|
|
21
|
-
return sizeclass;
|
|
22
|
-
}
|
|
23
|
-
setFontProperties() {
|
|
24
|
-
this.styles = {
|
|
25
|
-
'--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
|
|
26
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
27
|
-
'--font-weight-regular': this.weights.regular,
|
|
28
|
-
'--font-weight-medium': this.weights.medium,
|
|
29
|
-
'--font-weight-bold': this.weights.bold
|
|
30
|
-
};
|
|
31
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
32
|
-
this.setHostProperty('--block-margin', '1.25em');
|
|
33
|
-
this.setHostProperty('--line-height', '140%');
|
|
34
|
-
}
|
|
35
|
-
setColors() {
|
|
36
|
-
const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
|
|
37
|
-
this.inverted
|
|
38
|
-
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
39
|
-
: window.CuraAPI.theme.fonts.getColor();
|
|
40
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
|
|
41
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
42
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
|
|
43
|
-
}
|
|
44
|
-
setHostProperty(prop, value) {
|
|
45
|
-
this.host.style.setProperty(prop, value);
|
|
46
|
-
}
|
|
47
|
-
render() {
|
|
48
|
-
return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
|
|
49
|
-
}
|
|
50
|
-
static get is() { return "cura-paragraph"; }
|
|
51
|
-
static get encapsulation() { return "shadow"; }
|
|
52
|
-
static get originalStyleUrls() {
|
|
53
|
-
return {
|
|
54
|
-
"$": ["cura-paragraph.scss"]
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
static get styleUrls() {
|
|
58
|
-
return {
|
|
59
|
-
"$": ["cura-paragraph.css"]
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
static get properties() {
|
|
63
|
-
return {
|
|
64
|
-
"size": {
|
|
65
|
-
"type": "string",
|
|
66
|
-
"mutable": false,
|
|
67
|
-
"complexType": {
|
|
68
|
-
"original": "'regular' | 'large' | 'small' | 'caption'",
|
|
69
|
-
"resolved": "\"caption\" | \"large\" | \"regular\" | \"small\"",
|
|
70
|
-
"references": {}
|
|
71
|
-
},
|
|
72
|
-
"required": false,
|
|
73
|
-
"optional": false,
|
|
74
|
-
"docs": {
|
|
75
|
-
"tags": [],
|
|
76
|
-
"text": "Set size of body text.\nValues: regular (default) | large | small | caption."
|
|
77
|
-
},
|
|
78
|
-
"attribute": "size",
|
|
79
|
-
"reflect": true,
|
|
80
|
-
"defaultValue": "'regular'"
|
|
81
|
-
},
|
|
82
|
-
"inverted": {
|
|
83
|
-
"type": "boolean",
|
|
84
|
-
"mutable": false,
|
|
85
|
-
"complexType": {
|
|
86
|
-
"original": "boolean",
|
|
87
|
-
"resolved": "boolean",
|
|
88
|
-
"references": {}
|
|
89
|
-
},
|
|
90
|
-
"required": false,
|
|
91
|
-
"optional": false,
|
|
92
|
-
"docs": {
|
|
93
|
-
"tags": [],
|
|
94
|
-
"text": "Apply light color to text in dark background.\nValues: boolean."
|
|
95
|
-
},
|
|
96
|
-
"attribute": "inverted",
|
|
97
|
-
"reflect": true,
|
|
98
|
-
"defaultValue": "false"
|
|
99
|
-
},
|
|
100
|
-
"spotColor": {
|
|
101
|
-
"type": "string",
|
|
102
|
-
"mutable": false,
|
|
103
|
-
"complexType": {
|
|
104
|
-
"original": "string",
|
|
105
|
-
"resolved": "string",
|
|
106
|
-
"references": {}
|
|
107
|
-
},
|
|
108
|
-
"required": false,
|
|
109
|
-
"optional": false,
|
|
110
|
-
"docs": {
|
|
111
|
-
"tags": [],
|
|
112
|
-
"text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
|
|
113
|
-
},
|
|
114
|
-
"attribute": "spot-color",
|
|
115
|
-
"reflect": true,
|
|
116
|
-
"defaultValue": "'primary'"
|
|
117
|
-
},
|
|
118
|
-
"color": {
|
|
119
|
-
"type": "any",
|
|
120
|
-
"mutable": false,
|
|
121
|
-
"complexType": {
|
|
122
|
-
"original": "any",
|
|
123
|
-
"resolved": "any",
|
|
124
|
-
"references": {}
|
|
125
|
-
},
|
|
126
|
-
"required": false,
|
|
127
|
-
"optional": false,
|
|
128
|
-
"docs": {
|
|
129
|
-
"tags": [],
|
|
130
|
-
"text": "Color base from color scheme. Default: theme font color."
|
|
131
|
-
},
|
|
132
|
-
"attribute": "color",
|
|
133
|
-
"reflect": false
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
}
|
|
137
|
-
static get states() {
|
|
138
|
-
return {
|
|
139
|
-
"styles": {}
|
|
140
|
-
};
|
|
141
|
-
}
|
|
142
|
-
static get elementRef() { return "host"; }
|
|
143
|
-
static get watchers() {
|
|
144
|
-
return [{
|
|
145
|
-
"propName": "color",
|
|
146
|
-
"methodName": "handleChangeColor"
|
|
147
|
-
}];
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
//# sourceMappingURL=cura-paragraph.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-paragraph',\n styleUrl: 'cura-paragraph.scss',\n shadow: true,\n})\nexport class CuraParagraph {\n\n /**\n * Set size of body text.\n * Values: regular (default) | large | small | caption.\n */\n @Prop({reflect: true}) size: 'regular' | 'large' | 'small' | 'caption' = 'regular';\n /**\n * Apply light color to text in dark background.\n * Values: boolean.\n */\n @Prop({reflect: true}) inverted = false;\n /**\n * Apply base system color to elements like <a> and <abbr>.\n * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n */\n @Prop({reflect: true}) spotColor = 'primary';\n /**\n * Color base from color scheme. Default: theme font color.\n */\n @Prop() color;\n @Watch('color')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * Host element <cura-paragraph>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n @State() styles = {};\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.setFontProperties();\n this.setColors();\n }\n\n setsizeClass() {\n const sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\n }\n this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n this.setHostProperty('--block-margin', '1.25em');\n this.setHostProperty('--line-height', '140%');\n }\n\n setColors() {\n const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :\n this.inverted\n ? window.CuraAPI.theme.colors.getColor('neutral-white')\n : window.CuraAPI.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'),\n '--color-link': this.inverted\n ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`)\n };\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n render() {\n return (\n <Host>\n <p style={this.styles} class={this.setsizeClass()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"]}
|
package/dist/collection/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import CuraAPI from './api/cura-api';
|
|
2
|
-
export default function () {
|
|
3
|
-
const config = window.CuraInit;
|
|
4
|
-
window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
|
|
5
|
-
const api = window.CuraAPI;
|
|
6
|
-
window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
|
|
7
|
-
if (config && typeof config.onReady === 'function')
|
|
8
|
-
config.onReady(api);
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=rededor-cura-start.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"rededor-cura-start.js","sourceRoot":"","sources":["../src/rededor-cura-start.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAYrC,MAAM,CAAC,OAAO;EACZ,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;EAC/B,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC;EAC9D,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;EAC3B,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC,CAAC;EACzE,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU;IAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["import CuraAPI from './api/cura-api';\nimport { CuraConfig } from './api/cura-api.type';\n// import { setAssetPath } from '@stencil/core';\n\n// setAssetPath(import.meta.url);\ndeclare global {\n interface Window {\n CuraAPI?: CuraAPI,\n CuraInit?: CuraConfig\n }\n}\n\nexport default function() {\n const config = window.CuraInit;\n window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();\n const api = window.CuraAPI;\n window.dispatchEvent(new CustomEvent(\"CuraAPIReady\", { detail: {api} }));\n if (config && typeof config.onReady === 'function') config.onReady(api);\n}\n"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import './button.css';
|
|
2
|
-
|
|
3
|
-
export const createButton = ({
|
|
4
|
-
primary = false,
|
|
5
|
-
size = 'medium',
|
|
6
|
-
backgroundColor,
|
|
7
|
-
label,
|
|
8
|
-
onClick,
|
|
9
|
-
}) => {
|
|
10
|
-
const btn = document.createElement('button');
|
|
11
|
-
btn.type = 'button';
|
|
12
|
-
btn.innerText = label;
|
|
13
|
-
btn.addEventListener('click', onClick);
|
|
14
|
-
|
|
15
|
-
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
|
16
|
-
btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
|
|
17
|
-
|
|
18
|
-
btn.style.backgroundColor = backgroundColor;
|
|
19
|
-
|
|
20
|
-
return btn;
|
|
21
|
-
};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { createButton } from './Button';
|
|
2
|
-
|
|
3
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Example/Button',
|
|
6
|
-
tags: ['autodocs'],
|
|
7
|
-
render: ({ label, ...args }) => {
|
|
8
|
-
// You can either use a function to create DOM elements or use a plain html string!
|
|
9
|
-
// return `<div>${label}</div>`;
|
|
10
|
-
return createButton({ label, ...args });
|
|
11
|
-
},
|
|
12
|
-
argTypes: {
|
|
13
|
-
backgroundColor: { control: 'color' },
|
|
14
|
-
label: { control: 'text' },
|
|
15
|
-
onClick: { action: 'onClick' },
|
|
16
|
-
primary: { control: 'boolean' },
|
|
17
|
-
size: {
|
|
18
|
-
control: { type: 'select' },
|
|
19
|
-
options: ['small', 'medium', 'large'],
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
25
|
-
export const Primary = {
|
|
26
|
-
args: {
|
|
27
|
-
primary: true,
|
|
28
|
-
label: 'Button',
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export const Secondary = {
|
|
33
|
-
args: {
|
|
34
|
-
label: 'Button',
|
|
35
|
-
},
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export const Large = {
|
|
39
|
-
args: {
|
|
40
|
-
size: 'large',
|
|
41
|
-
label: 'Button',
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export const Small = {
|
|
46
|
-
args: {
|
|
47
|
-
size: 'small',
|
|
48
|
-
label: 'Button',
|
|
49
|
-
},
|
|
50
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import './header.css';
|
|
2
|
-
import { createButton } from './Button';
|
|
3
|
-
|
|
4
|
-
export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
|
|
5
|
-
const header = document.createElement('header');
|
|
6
|
-
|
|
7
|
-
const wrapper = document.createElement('div');
|
|
8
|
-
wrapper.className = 'storybook-header';
|
|
9
|
-
|
|
10
|
-
const logo = `<div>
|
|
11
|
-
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
|
12
|
-
<g fill="none" fillRule="evenodd">
|
|
13
|
-
<path
|
|
14
|
-
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
|
15
|
-
fill="#FFF" />
|
|
16
|
-
<path
|
|
17
|
-
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
|
18
|
-
fill="#555AB9" />
|
|
19
|
-
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
|
|
20
|
-
</g>
|
|
21
|
-
</svg>
|
|
22
|
-
<h1>Acme</h1>
|
|
23
|
-
</div>`;
|
|
24
|
-
|
|
25
|
-
wrapper.insertAdjacentHTML('afterbegin', logo);
|
|
26
|
-
|
|
27
|
-
const account = document.createElement('div');
|
|
28
|
-
if (user) {
|
|
29
|
-
const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
|
|
30
|
-
account.innerHTML = welcomeMessage;
|
|
31
|
-
account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
|
|
32
|
-
} else {
|
|
33
|
-
account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));
|
|
34
|
-
account.appendChild(
|
|
35
|
-
createButton({
|
|
36
|
-
size: 'small',
|
|
37
|
-
label: 'Sign up',
|
|
38
|
-
onClick: onCreateAccount,
|
|
39
|
-
primary: true,
|
|
40
|
-
})
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
wrapper.appendChild(account);
|
|
44
|
-
header.appendChild(wrapper);
|
|
45
|
-
|
|
46
|
-
return header;
|
|
47
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { createHeader } from './Header';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Example/Header',
|
|
5
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
6
|
-
tags: ['autodocs'],
|
|
7
|
-
render: (args) => createHeader(args),
|
|
8
|
-
parameters: {
|
|
9
|
-
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
10
|
-
layout: 'fullscreen',
|
|
11
|
-
},
|
|
12
|
-
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
13
|
-
argTypes: {
|
|
14
|
-
onLogin: { action: 'onLogin' },
|
|
15
|
-
onLogout: { action: 'onLogout' },
|
|
16
|
-
onCreateAccount: { action: 'onCreateAccount' },
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export const LoggedIn = {
|
|
21
|
-
args: {
|
|
22
|
-
user: {
|
|
23
|
-
name: 'Jane Doe',
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export const LoggedOut = {};
|