@telus-uds/components-base 0.0.2-prerelease.8 → 0.0.2-prerelease.9

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/.ultra.cache.json CHANGED
@@ -1 +1 @@
1
- {"files":{"lib":"1639595327548.9126","node_modules":"1639595287458.0947","CHANGELOG.md":"6bbbdc7f00edffd3fb987e3cf462b45bcc59e1e5","README.md":"acc5433a698785066c3daa62811b6efad2195525","__fixtures__/Accessible.js":"1e452d9be512760279c180058fd1d7eec73604d8","__fixtures__/Accessible.native.js":"81b05d1715839d7c9a83da5f4adc6997f15c7ac4","__fixtures__/Theme.jsx":"98540416fcd0b932d18083f9256ccba8ff559cf4","__fixtures__/Viewport.jsx":"c9b2af9a0786fbe2445e77e5da76ef4c500f04d3","__fixtures__/testTheme.js":"87dac007eda63908c3d2a41fc8d1971db86dd569","__tests__/A11yText/A11yText.test.jsx":"bb544fd8f00c2e6135588049c62bf5910f9ffcda","__tests__/ActivityIndicator/ActivityIndicator.test.jsx":"ffed250b44f2e28838c9b8f909b7c45941385da3","__tests__/Box/Box.test.jsx":"5635f1b28e1bf5b07c09bc31218bbb90533445f9","__tests__/Button/Button.test.jsx":"c5b7e97ffb7171ce6e9ceaa4d6c6e6cbd78562e7","__tests__/Button/ButtonBase.test.jsx":"f8cf3ecdbafcea37c7f9f57ca5060c18b17dc56f","__tests__/Button/ButtonGroup.test.jsx":"193c3d84b56b5322c9c3a183f4de1d42a01561b0","__tests__/Button/ButtonLink.test.jsx":"60200e31dcabcde9f800d9c56cabcfa931168518","__tests__/Card/Card.test.jsx":"627cbf03d2bbf569bd29e33345d79f8cefaedfd1","__tests__/Checkbox/Checkbox.test.jsx":"9c3b4e6e4756836f9bf2c661d43f90b3d9e4feeb","__tests__/Checkbox/CheckboxGroup.test.jsx":"91d4f85498e0f58c5f42f54a6b8267fadab8f223","__tests__/Divider/Divider.test.jsx":"026de7361850866ffe8f553d10834e6dc835417b","__tests__/ExpandCollapse/ExpandCollapse.test.jsx":"9e85e341a050ee10f15cdd5a7a0faba0629be2fd","__tests__/Feedback/Feedback.test.jsx":"c26bcd8a8b528dd45a656fb58e157e759b7c4284","__tests__/FlexGrid/Col.test.jsx":"c5c224c841d87e79e8feccc297d4ee2dd0075a09","__tests__/FlexGrid/FlexGrid.test.jsx":"f7cd0601b26c39e6113ae4068022c6ea4646f731","__tests__/FlexGrid/Row.test.jsx":"084735ca2082515a1ebfe7c5e62bd7016efe922c","__tests__/Icon/Icon.test.jsx":"56e95c5df78ba4f73e56c281cbfa69493cafe15f","__tests__/InputSupports/InputSupports.test.jsx":"6590d5033b31b30fb6290bb2fe4e1c60696ce9a5","__tests__/Link/Link.test.jsx":"deb9ea0fbedbe8a214d1c3047c93b830bf8588b3","__tests__/Link/LinkBase.test.jsx":"fc19b014a988512c41931434e9be3cf0bd8cfadf","__tests__/Link/TextButton.test.jsx":"e5653b75e6dece08d7f64a99e9880cbb21a61cbe","__tests__/List/List.test.jsx":"8ba93772fcf305c49d73fdddc66a51ec098169f1","__tests__/Modal/Modal.test.jsx":"920e8a16e7064142f56533889f0ac4fb5909225f","__tests__/Notification/Notification.test.jsx":"9f073100b6e5696ef43ec663988b7d8ccbf009e4","__tests__/Pagination/Pagination.test.jsx":"254a468b5bbe038147ab7858ae78fe349a883c76","__tests__/Progress/Progress.test.jsx":"2e2cd16b50871ed616ada7bc617fcdfb81f6906e","__tests__/Radio/Radio.test.jsx":"28fd22b9c8cecdeee15cf345645cfd5d42fb64ae","__tests__/Radio/RadioGroup.test.jsx":"416608a4fa541088d39104d4065b98acedbdc000","__tests__/RadioCard/RadioCard.test.jsx":"2b065718450b4bc3c589e58c9c7b82ac5573064d","__tests__/RadioCard/RadioCardGroup.test.jsx":"cb83f5d9bc55ebfa837937bd443c2cde1d85c481","__tests__/Search/Search.test.jsx":"2c00a8cc742922705913396622b94d1757e6c5c6","__tests__/Select/Select.test.jsx":"ae58e09250d15276a883c4fb5214825260082ee1","__tests__/SideNav/SideNav.test.jsx":"9c5548f7a6c891741a7e60a520dc4da2b54ecb82","__tests__/Skeleton/Skeleton.test.jsx":"3facb44a45dda0114a30de7c7fee4105796b83ea","__tests__/Spacer/Spacer.test.jsx":"6ab4f9c2e75409bbe6aeef3708bc28da1a06de7b","__tests__/StackView/StackView.test.jsx":"051e7bb2dcee923a610dbf547143d21e19a52616","__tests__/StackView/StackWrap.test.jsx":"f1c7e1f9f0d35bd76fd97e11bc36e8d86b8e47dd","__tests__/StackView/getStackedContent.test.jsx":"73d7bd8448641fea18ded75254d6ecc4bf04e836","__tests__/StepTracker/StepTracker.test.jsx":"c11ee312ae4a1ea5820d8d96c7120c7ebe51c36f","__tests__/Tabs/Tabs.test.jsx":"b36f9399247adc3e56b4e95d85068c7f5342361a","__tests__/Tags/Tags.test.jsx":"1a4c53d6f3e35a5559e4288be6c5ed76236c4995","__tests__/TextInput/TextArea.test.jsx":"37e56e251941ccdb1d175449e558a2e1508eeaaf","__tests__/TextInput/TextInputBase.test.jsx":"318f7fa1c7d841594326839cfc6324b98f08cfed","__tests__/ThemeProvider/useThemeTokens.test.jsx":"86febf0023161098a21aa08d0132a1df693de31a","__tests__/ToggleSwitch/ToggleSwitch.test.jsx":"e1372aae6c8b7a3d0c1aa7bf63fb0dc8773f51ad","__tests__/Tooltip/Tooltip.test.jsx":"6c88c6dfd4aa97994ec8686d986e149ba9de5d5a","__tests__/Tooltip/getTooltipPosition.test.js":"b9fb1a5f5849216de602a66b810435e2e95f71ec","__tests__/Typography/typography.test.jsx":"f63a1d7137cc3c981adb343abf2db6f8d88cfe3b","__tests__/utils/input.test.js":"b80978f484a2a0d7b7f4dfedf77dca63b31bf9dc","__tests__/utils/useCopy.test.js":"b7ac269197a892761be543a1aa0ca25419e2575d","__tests__/utils/useResponsiveProp.test.jsx":"d1fe7f195df30c7623f5c221b59ab421ded34769","__tests__/utils/useSpacingScale.test.jsx":"3acd952f4e8ca3673f7f2b25a8fbeb82f12d8bda","__tests__/utils/useUniqueId.test.js":"6886d52bb63423cc88293a60a2495c0934b4e447","babel.config.js":"262a79320201a15aef984fcf1cc6c6cf02c8744a","docs/Contributing.stories.mdx":"84e1387e266594e419b3bb103de5f7690d6194c0","docs/Fonts.stories.mdx":"ad571658ef1abc1d0a3ac29d389f4807dea8a9e8","docs/Icons.stories.mdx":"7963881168ba2b1601c612660705ec6da0179b53","docs/Introduction.stories.mdx":"d06d68f43ba897428570fb73d933967525359083","jest.config.js":"6846a5c673394abab796294f9ef8d17154e1f94a","package.json":"f70f876ef8f5fffaa74487505bb9b24098875d28","src/A11yInfoProvider/index.jsx":"79a84eef336aa678d2adfe290bfdb15aae94687e","src/A11yText/index.jsx":"8bc34f4cdb15fb64718e2d535592f598265326af","src/ActivityIndicator/Spinner.jsx":"42f0d695466b5312f5972d47d0b5803c3c5648f5","src/ActivityIndicator/Spinner.native.jsx":"c6c1f9985121ac8e5d511539f899d4bfb5a61f8c","src/ActivityIndicator/index.jsx":"15d219d42aef7f29e689086d4d82ac0e225cc611","src/ActivityIndicator/shared.js":"ca6120fee59f7a0986bb823cc92ad21966d7bb2e","src/BaseProvider/index.jsx":"14773240cde78b596fe391cc1ef2525d87e6b246","src/Box/Box.jsx":"c6d878ad4c149eeb2d460def78dd5d77ccd2ca35","src/Box/index.js":"280496403f647db4bb7d563109b72799b281c104","src/Button/Button.jsx":"c8df2c9f1782bdf8a6db47aad26470aec9158a00","src/Button/ButtonBase.jsx":"e0abf0714ad831daef1a4308411499e0df58122e","src/Button/ButtonGroup.jsx":"8512cb7ab760194f932fc03748ca8c1df23f658c","src/Button/ButtonLink.jsx":"d12b6fde47c73eddceaa1afe9e7a53323df650a8","src/Button/index.js":"46aecee948aff0b9039676c156098100a3ee6033","src/Button/propTypes.js":"d1b001e897ba08c8a3c8a240c0d0214824ec6642","src/Card/Card.jsx":"3e04381c18604c4e839ecc50d776d1163679c2df","src/Card/CardBase.jsx":"bfc1b67184c466b1ffc70c4b18e60ad79050bb68","src/Card/PressableCardBase.jsx":"f9d1decdc6ae967312829991b290574b7343c028","src/Card/index.js":"76bf74db2e39f45cd9b47d8e36052a93ec62f483","src/Checkbox/Checkbox.jsx":"83d425af36f2b466cece49245ece3480cd172451","src/Checkbox/CheckboxGroup.jsx":"caba5b9a5fd7413df098b8b2778140624ecd8299","src/Checkbox/CheckboxInput.jsx":"88d356f8287c502ecec4413ecfcd8ea231f271b6","src/Checkbox/CheckboxInput.native.jsx":"393cc6721b14ae67ec336ed94639ae764d4dd928","src/Checkbox/index.js":"958d04ebd9cd61c92316e5ce6f66647bcb45066b","src/Divider/Divider.jsx":"f517d4501df2f31b0cf6213089f54abf5d4c50ff","src/Divider/index.js":"fa2817652d45ec83ae079679fb5a8c9eb786fc43","src/ExpandCollapse/Accordion.jsx":"382109f00c5ceed895e0ca6cc08bb21725645af9","src/ExpandCollapse/Control.jsx":"8d9717041db7711191ee3a31b9428a53bd3b8824","src/ExpandCollapse/ExpandCollapse.jsx":"74f6f110fb21ed6ff40dc163a984ebd76d9c6428","src/ExpandCollapse/Panel.jsx":"f7dd1696451dab10dccac424d1b242a52c442287","src/ExpandCollapse/index.js":"e553901efa8408d1753ecc329ea1361e57084199","src/Feedback/Feedback.jsx":"b516ef8ebe0256913f8d7fca915000054e310e1b","src/Feedback/index.js":"a1181a81414ebd8797eb48975b1a377319de4ad2","src/Fieldset/Fieldset.jsx":"b70e66c7e851d0a7342bf898a6389c2158e514fc","src/Fieldset/FieldsetContainer.jsx":"b716b18a7490401009c6fb827f1c8d20eedc9fcc","src/Fieldset/FieldsetContainer.native.jsx":"d4376c53c48f67628b7b3ec908298ca15611b713","src/Fieldset/Legend.jsx":"92387a2321381ecc2c2f305bc7d6f47dfdc93558","src/Fieldset/Legend.native.jsx":"5416181ee5aeb034ed9350c9f6370fb3a6a53e12","src/Fieldset/cssReset.js":"6532e6e410e70d2ef566d75e252615f9a9ca6bb9","src/Fieldset/index.js":"cc6c5bc097a0f7f1437637ebf285480bffeb71b4","src/FlexGrid/Col/Col.jsx":"84ed0037b3b7844b45eb78648b993020846b8744","src/FlexGrid/Col/index.js":"a5e8b19d6f2f0cf20635a9407421bd2448f22a55","src/FlexGrid/FlexGrid.jsx":"a885fa3328f796e0624a5158baa8b378265d8fde","src/FlexGrid/Row/Row.jsx":"c6993dd57024baffb5c2f6d54534ae5ab2c39ae7","src/FlexGrid/Row/index.js":"136065433ab96251df79b75f213e0fd9de30e7b7","src/FlexGrid/helpers/index.js":"640ddf9188848b52b35736a615b4124708b5cbec","src/FlexGrid/index.js":"c5c40a5d8c40df5c1a25309aeee1f740df58e261","src/FlexGrid/providers/GutterContext.jsx":"f6fd8ed5a72cb7daf1b5faeb7d15675bd61aca41","src/Icon/Icon.jsx":"7b638e4dcf00e1b2f5b2aecb09610119cf0e973f","src/Icon/IconText.jsx":"32f0cd29e0a8364f33b7525f7cc7bb6612eaed14","src/Icon/index.js":"bd961bc6eb1602d8e0cf77bad71a2c9e6d084d1e","src/InputLabel/InputLabel.jsx":"d172ba23e7dd96865cddfd0cd8ba04650dc0e589","src/InputLabel/LabelContent.jsx":"7766c99498dbf61b5ee3486741fcdeebcd4fcfb1","src/InputLabel/LabelContent.native.jsx":"ca05199ac6793615fbe65f19a30ec4145a0303d1","src/InputLabel/index.js":"d73f3f71f8afdaa74b4e8f0905f9f9b8815c89b1","src/InputSupports/InputSupports.jsx":"e62278cd4b73b5306a9f7305f827144a18deba0a","src/InputSupports/index.js":"5173f3d29b1d427836b20906608fc7e2fdb6bb17","src/InputSupports/propTypes.js":"e66e0dad9ed1931416b57ffc996daba1d5c125e5","src/InputSupports/useInputSupports.js":"7b926bb247864737a1223acf79b6d2308d306bc9","src/Link/ChevronLink.jsx":"acd2363f419abfa8c60c5813ae02e0a7b269ee28","src/Link/InlinePressable.jsx":"a55d82e1428ff56cbef68e4d6a177298fd61ecd0","src/Link/InlinePressable.native.jsx":"995bf9c884c972cafa0b33564efb57c9504d9e57","src/Link/Link.jsx":"71869fd0b1458b8b3b9bca11e7861731d632abbb","src/Link/LinkBase.jsx":"e1f363c4ccd085c630076971d24d7fc71e1ec512","src/Link/TextButton.jsx":"a56911d540d4e071579674cdd710694fdc701fff","src/Link/index.js":"09d2787b9253295551e08326120969635c040b7a","src/List/List.jsx":"2d4c1581095e2e1ae723ba25da66b31f82f088e7","src/List/ListItem.jsx":"500f627d3f6ec6116b0627546c43769fecd918f9","src/List/index.js":"6cd88f9e42f35d8494a0a273250b3f349c88acbe","src/Modal/Modal.jsx":"3244f882442ee8e48ff42d6dc52a6eff17ff891d","src/Modal/dictionary.js":"c5bebd7b63fa826f93df3f61d0950b010890a6d0","src/Modal/index.js":"498702f472940b1d7a8b6b29797bbea308209e1d","src/Notification/Notification.jsx":"a6fa7f9396610edfc7f838a3acdd53cd936fa8e3","src/Notification/dictionary.js":"c7e14273e5253a3e8ce1e11879630ad29ad5108c","src/Notification/index.js":"21d57835b505d7198076398e5ea6309a61299f40","src/Pagination/PageButton.jsx":"2ce68be66c220923cf52e1cf0d647e79aa7137ae","src/Pagination/Pagination.jsx":"9d0aa65dc4acf042751ab252e1c46dd5b6df0ada","src/Pagination/SideButton.jsx":"26f6191ab6db248175a065744764ce5fb5870b0c","src/Pagination/dictionary.js":"ccfb5733071adfd9b8a067f407627461dce68a9a","src/Pagination/index.js":"1466412190cfefc75aaa042004374f9f19505c64","src/Pagination/usePagination.js":"ca67794bd989d870a9bf68acbdf4d847e19a0ded","src/Progress/Progress.jsx":"2ef6425cad7ce53947ee2deefea37f7ae2564c86","src/Progress/ProgressBar.jsx":"0f329b4d8a59f04520af41481c5e71139afaccb2","src/Progress/ProgressBarBackground.jsx":"01279e59a5b2d70b55b5ff355d1b4e404170d5f8","src/Progress/index.js":"9a98c968b708cc86d9c6f00415faede75cfadb85","src/Radio/Radio.jsx":"f29ae06086fcc9e7886122cbf7cfa92fda2b9e5f","src/Radio/RadioButton.jsx":"37ae90c39876eb85432cb922a6d65657f9b7b5b2","src/Radio/RadioGroup.jsx":"767e16950ee6367d2c2f0840f49feb9a8f15bcdf","src/Radio/RadioInput.jsx":"a0a8e4bc2d483d79b2ff91e15da582054ba38370","src/Radio/RadioInput.native.jsx":"227eb3d2893549ba6a7a12a3f0d9a5b0ba9a5df8","src/Radio/index.js":"07a6f7d8302f7942705766fb11034a4bd1ef9a32","src/RadioCard/RadioCard.jsx":"b9594a5364c1dacad54810ad25ceacf1d176c047","src/RadioCard/RadioCardGroup.jsx":"e1416874b8b5cd068985bb65056d4d0b76aa226c","src/RadioCard/index.js":"98c5762ea92a4c3cd014d9aa29935d67da4a2433","src/Search/Search.jsx":"e611ba32bd7e42d220cb5014d7d5bc456a8b8960","src/Search/dictionary.js":"915f90418afeb3d964667a8cd44729179d6accb6","src/Search/index.js":"e96a4b2864d1b57869e7ab27a62e9cf033d456ed","src/Select/Group.jsx":"ed00f24c67e7979a6e5058775e81c62a8c810031","src/Select/Group.native.jsx":"e949aca728b9df2e73b0c0f03a78af1c0c64287b","src/Select/Item.jsx":"a82c7147e30f64c0fae2be100de060eafecd9bb1","src/Select/Item.native.jsx":"3ae9bf5713525621674fa3db2f18dabed22c345a","src/Select/Picker.jsx":"fab65fafe5ec9542fe7554aee5a2a59eaced2a78","src/Select/Picker.native.jsx":"6c115fe65101945cf2610b038cc69b6d6414ac56","src/Select/Select.jsx":"94545fe114f75ea3470bc5ff7224d5c2943942d8","src/Select/index.js":"7169081eb3d414a76095b7f44c0f64460b7cd53e","src/SideNav/Item.jsx":"91ea090a00ebd3241ab7f040a377bcc06c78e92b","src/SideNav/ItemContent.jsx":"fd1d090470a79fedb8c991204c20668497e2e372","src/SideNav/ItemsGroup.jsx":"3da969daa7b6fe5aacdcb0fcd0ca6aedc0834ecf","src/SideNav/SideNav.jsx":"5d7a0984684f0621039b83d6121246fe39c6e11a","src/SideNav/index.js":"07bd001f3d51fcb378612a8f52ec51e0d37f207c","src/Skeleton/Skeleton.jsx":"de4d89173150e171cf1fc6781bbf0bc4e3070330","src/Skeleton/index.js":"032fa38fe8f7abfeca030301aa602a85a0f4e52c","src/Skeleton/skeleton.constant.js":"5b3a0266664ddc225df74ecd907f796f1536d517","src/Skeleton/skeletonWebAnimation.js":"a384b159901d16375545d84c4fee45363db206c0","src/Skeleton/useSkeletonNativeAnimation.js":"ca0baa551fece56b1f434cdb8edd91ea97e0d2c8","src/Spacer/Spacer.jsx":"7591757948f1294a4c0f5e7dff3bdcf05b2ae30e","src/Spacer/index.js":"2674e6f47037b82fa9587b2cbb081dcbe42b506c","src/StackView/StackView.jsx":"fa1b88e45678a1d941847c832f063667448e68e4","src/StackView/StackWrap.jsx":"6777b9d75a815576d1afa51fa4b216d4b945e2f4","src/StackView/StackWrap.native.jsx":"44fc5973fea70b528b3597519a4d0aec9fdd323d","src/StackView/StackWrapBox.jsx":"77b055aea20828a3276db5816a7444b5645feef9","src/StackView/StackWrapGap.jsx":"5ab7601d2cc194ae4acf5176f3fce4da550e9b6f","src/StackView/common.jsx":"2582f176e5c91071747089ce498f07e9ba02b87c","src/StackView/getStackedContent.jsx":"152e653f7a59e269a4a421296480ee3f00bee2cb","src/StackView/index.js":"8a3ad6ded46712f67e5a520220bdfee60cd262ed","src/StepTracker/Step.jsx":"050dfe88582d6879cc012c6a9d8940f5beea93ba","src/StepTracker/StepTracker.jsx":"07e941a8a23c92d84c7b5f1e7ddaa22efb8a2f4a","src/StepTracker/dictionary.js":"7a3e206b5be7ca14f9b6e6b0ab056ee733faabcd","src/StepTracker/index.js":"fd6442c015d6d61aba70553b3f6ddae3a45b5fc6","src/Tabs/HorizontalScroll.jsx":"688fd0bce41e28612afc5f128260b5910258e112","src/Tabs/ScrollViewEnd.jsx":"b1f722ad16516a3ede2f6696ad21d304bbf04809","src/Tabs/ScrollViewEnd.native.jsx":"b02f54552b6f81af2c530f1cbb2bf0e2cffb55d4","src/Tabs/Tabs.jsx":"44c2c8cee8176f8e5d9e8d2013c636eca482cfec","src/Tabs/TabsItem.jsx":"d9b8347c203e8dbb2a7449485b028743b37da999","src/Tabs/TabsScrollButton.jsx":"1a773c4bd00f2f5a6d71381becbb8650af2f0ff3","src/Tabs/dictionary.js":"a11323cbd5ecf131d3ca4a0c5f877b53c83bb4e9","src/Tabs/index.js":"d094ea3406d681aed9787075e4dcc6489aca99ab","src/Tabs/itemPositions.js":"0a4b023e5f10162344a8260888190f1f3ceb051d","src/Tags/Tags.jsx":"47189d8af503a63519913d122fe6305bcb7cf5e5","src/Tags/index.js":"ad96785c7165bd33a85b0b2589292098e2baf6ca","src/TextInput/TextArea.jsx":"60aa9869b8aa923fdd1cf976215b26ea10a78ee3","src/TextInput/TextInput.jsx":"8d5d320ac09ad6db771c695e5c272277dd6e2100","src/TextInput/TextInputBase.jsx":"dfaba5a82b0492ba4c568cefa3804f2f3f1a3be8","src/TextInput/index.js":"437c6f792ac811cd8eb2a8d3d4bcd2cc1423bb46","src/TextInput/propTypes.js":"a3d489be19df6b9bfacc907874bd5508c0b3b1ef","src/ThemeProvider/ThemeProvider.jsx":"a1b3d40de1ba0237bba08f2fbc911be636f64e9b","src/ThemeProvider/index.js":"e760f3d3e4257b79286ad0ea9177be3c28e2bbb0","src/ThemeProvider/useSetTheme.js":"93fb289621efc0dfd4539485e4fcd7cb74a0db41","src/ThemeProvider/useTheme.js":"d76b9a6607d6beeeedf18c3685d8f33464b93862","src/ThemeProvider/useThemeTokens.js":"9fa34bf510276c7569da30bce911917c19d24f8f","src/ThemeProvider/utils/index.js":"91b8a1965980bba29b286e4af92ccf2a33379d33","src/ThemeProvider/utils/styles.js":"c4c48493e02992b440ae13c79a1acfda713bb9fe","src/ThemeProvider/utils/theme-tokens.js":"f4405bf0510c9b234cd2afe39d684fd8e714777d","src/ToggleSwitch/ToggleSwitch.jsx":"3e6407386ffdb3c977ed2a494bbb8aee19163f82","src/ToggleSwitch/index.js":"e64f52f7b34559f2fda37c9c6d389aa93f9dd0ab","src/Tooltip/Backdrop.jsx":"f4fb660b21350756247e8c4cdd01614dceb071f7","src/Tooltip/Backdrop.native.jsx":"dafa102a533f3b4ad0c97900c340f9b70414a3f8","src/Tooltip/Tooltip.jsx":"82010507e0b1257c3c0d2fc6b617692c461dca4f","src/Tooltip/dictionary.js":"b68f778fe4885a66c30076593b665ffd2cf21768","src/Tooltip/getTooltipPosition.js":"a08ff8b8aaa124f70893642e5313e8c61a69e05c","src/Tooltip/index.js":"33178590407a2a57b03f2c54f84e099ddec5d981","src/TooltipButton/TooltipButton.jsx":"0f566ecd3904ecf2a4a0a00905e5782f82b33c47","src/TooltipButton/index.js":"fcb73069cb7c57a70f8103adf941c8e6a7b7d27a","src/Typography/Typography.jsx":"acafeee3153c57a0207d37333a522c7bfe329080","src/Typography/index.js":"3e2c97cd6c718560ce5a0e0cad5253535029133a","src/ViewportProvider/ViewportProvider.jsx":"e1b9b7ca47b8e1bd8a0234cef61aa2f9eedfbeb9","src/ViewportProvider/index.jsx":"09d29bb9b616094157963d1df37231463c14be38","src/ViewportProvider/useViewport.js":"853192112855ec8447ae0a96ae2e5f88cd260bbb","src/ViewportProvider/useViewportListener.js":"4af2d136d0a116630ff1017b9c493db3cdf5d723","src/index.js":"30cf08061207b41d3abb9da53ddaa70533663ef8","src/utils/a11y/index.js":"d4e9fc105374821fb29b3e6bd9befc971b9f946b","src/utils/a11y/textSize.js":"69fc64f71f7a566dae1c74cc71421c631d6c2261","src/utils/animation/index.js":"826e6a13f4d8ebecb37214942d54584d32458db7","src/utils/animation/useVerticalExpandAnimation.js":"53b8fd94922ef2502a2b56ed3bf7fec9181fb0f2","src/utils/children.jsx":"9fb155f3842dc28bb72bae73e7bad366cc1febc6","src/utils/index.js":"f9245114f7ec5140de99f613e5e29d89a295bf30","src/utils/info/index.js":"fa745289aec95c4c8760842abd9ef1a069e190f9","src/utils/info/platform/index.js":"35090561512cc6e6eb188d27297ac79c2040cf2a","src/utils/info/platform/platform.android.js":"d9ed506d3f13da692dd979e1b3e8e54e5953b9e3","src/utils/info/platform/platform.ios.js":"c0b73ee281326cb67bd1808062564685e963db7a","src/utils/info/platform/platform.js":"0749f2c09350d8c0a14bdafa185fb67efe92e169","src/utils/info/platform/platform.native.js":"e5f5be1e6c86f89d6a55331532077702b8c45a87","src/utils/info/versions.js":"a0cfb8630dcb8f2848ccc4d3a44ff3432215fa85","src/utils/input.js":"38c1c9516306840a291d0d715d738bbb41f5cffb","src/utils/pressability.js":"b4a038578ab619307d4a6e59b47f0acf966a56ae","src/utils/propTypes.js":"2e9481e906461ef5fed319973ca0bf24b2b418fc","src/utils/useCopy.js":"84c6abb9ef6e9f5c6fddde3b5bc8cb4869038fd6","src/utils/useHash.js":"9bd7b8260259ec6e35d0f944cc0a01042338cf97","src/utils/useHash.native.js":"5bf9b2880abf96ed34105b2c6aac8110e429dacb","src/utils/useResponsiveProp.js":"63d1cc35b6ea313b35e3f23e3bc7a7c0bad74e76","src/utils/useSpacingScale.js":"0c1106da09be680fc6155e76514250845e56bc0e","src/utils/useUniqueId.js":"cf003781273080b70460791569909d6b19b28c06","stories/A11yText/A11yText.stories.jsx":"06dbc198dccf05309eb9f991884b050462a06de0","stories/ActivityIndicator/ActivityIndicator.stories.jsx":"d64e822e56629900677fd4d630f3f5609d5b449e","stories/Box/Box.stories.jsx":"facdb8b9c831bcfbe20d5f7274405febd7c7ea4e","stories/Button/Button.stories.jsx":"8a89aad8d0eca38bc23f83e8e98ff41a492d91b7","stories/Button/ButtonGroup.stories.jsx":"c789e0cae74ec586ad89cba0cdf981e7a8f47d8c","stories/Button/ButtonLink.stories.jsx":"3a74a862fa232243f79c0f7392da7b0ffe2fae1b","stories/Card/Card.stories.jsx":"e2e836873c4a2860533f9414e9135d9b1fe4bae6","stories/Checkbox/Checkbox.stories.jsx":"623f5f2600490c5ec1fef2d6b2e2bac15bacbd0d","stories/Divider/Divider.stories.jsx":"915e48a437371c7b0a9c5e3217bfb7472a1dc60f","stories/ExpandCollapse/ExpandCollapse.stories.jsx":"0202d99e1b6261b2982f298d9c4ff19497bf9d39","stories/Feedback/Feedback.stories.jsx":"aa681938edb512626fdcf870b93729ead7988cc9","stories/FlexGrid/01 FlexGrid.stories.jsx":"2a167c821373be06f3711dda96ffb2a3a2359b6a","stories/FlexGrid/02 Row.stories.jsx":"6080fd863e2b8a1937910a5542ebfa1c5c785354","stories/FlexGrid/03 Col.stories.jsx":"275468c54dc745607b666743922e0fda2620ecfe","stories/Icon/Icon.stories.jsx":"12009cbb6b6ca03a57f9854661ea42024ffc7583","stories/InputLabel/InputLabel.stories.jsx":"d617e10f6d4103d5cf68c7ec298511870038ae81","stories/Link/ChevronLink.stories.jsx":"0e57c45603f49430bcc6413789e6707a343ec350","stories/Link/Link.stories.jsx":"c6de26704be74b9be2451a1af33a6cb8a3e191d8","stories/Link/TextButton.stories.jsx":"b12469c061f4672904bea80d9e78afcef6385551","stories/List/List.stories.jsx":"020a87ad7ec1bf6b4feaabfdaa367a6b1432bbce","stories/Modal/Modal.stories.jsx":"9251f7cc1a3087b6407aceda5f0ecf277532f1ff","stories/Notification/Notification.stories.jsx":"7e7d0e0af09017dce8d9bbf2d2d631cd0c76ee84","stories/Pagination/Pagination.stories.jsx":"b2101af449f199f03b0eae520d8ae52557484eb5","stories/Progress/Progress.stories.jsx":"e20b7fb0dc12b06044bc5670e55f1e14422586f5","stories/Radio/Radio.stories.jsx":"afa8390003bf7318b3388bc31cfb504de5da5c99","stories/RadioCard/RadioCard.stories.jsx":"12acafccd9b754dea81e336f54cecfa6db38cb59","stories/Search/Search.stories.jsx":"a28efe6a293d80f717ec149792e90d2ec1e8162f","stories/Select/Select.stories.jsx":"8d73fb9850834d4c837221ef028fa3c7fed124a8","stories/SideNav/SideNav.stories.jsx":"36f98572fa651be8db6d8f3633cef8d5db2221e6","stories/SideNav/SideNavItem.stories.jsx":"a9bf9189f7c8c2c322ffc291eaab24e00259e9da","stories/SideNav/SideNavItemsGroup.stories.jsx":"316adeb93421a258792b0810cf1cb8ca43384453","stories/Skeleton/Skeleton.stories.jsx":"e517538b89ff539b196712dbcaebb45e11004833","stories/Spacer/Spacer.stories.jsx":"151762f905deaadf7396369329633f3b69aaba26","stories/StackView/StackView.stories.jsx":"e7d9b663dc64996d86aa5c62fb74c587bca13b82","stories/StackView/StackWrap.stories.jsx":"38f73364c6fead41694e9f9d6b36f9ffc4f34e66","stories/StepTracker/StepTracker.stories.jsx":"c40dc2265e5b37f58a621eae1f2509eaa35b5eee","stories/Tabs/Tabs.stories.jsx":"85458254c44deea12caa178511e4bf15a8195f18","stories/Tags/Tags.stories.jsx":"370c180758881efab1ac3966fe7a39cd2904b593","stories/TextInput/TextArea.stories.jsx":"02d62f5de6582aad07f9add961af22adfa7814c9","stories/TextInput/TextInput.stories.jsx":"26fd05b15e02bf265670310d52e82c97a0f50341","stories/ToggleSwitch/ToggleSwitch.stories.jsx":"a473e05d4f5938d2835e21c28a5b6da5db582515","stories/Tooltip/Tooltip.stories.jsx":"e03b7c0ce05ba537ab2582bd26217230c47d0fc0","stories/TooltipButton/TooltipButton.stories.jsx":"81b9f4f91f3e29ffc1f70b20b61cd54b7be38551","stories/Typography/Typography.stories.jsx":"3b3bf6c8b6bb6272ffc41a4fbd9c2365cf14ca82","stories/platform-supports.jsx":"1e6f6f8fd3e09f99fe667cc46d86c7da50b399e4","stories/platform-supports.native.jsx":"fcfbb23b926b3440b0f684119832a388e880bd82","stories/supports.jsx":"e6d963245aeaefabb7f9cf3e873667c59ba8c1b4"},"deps":{"@telus-uds/system-constants":1639595321416.4846,"@telus-uds/system-themes":1639595321548.494}}
1
+ {"files":{"lib":"1640765991518.3665","node_modules":"1640765946329.8555","CHANGELOG.md":"5bc422a054a961eb445a0646534e7ee14ade5aef","README.md":"acc5433a698785066c3daa62811b6efad2195525","__fixtures__/Accessible.js":"1e452d9be512760279c180058fd1d7eec73604d8","__fixtures__/Accessible.native.js":"81b05d1715839d7c9a83da5f4adc6997f15c7ac4","__fixtures__/Theme.jsx":"98540416fcd0b932d18083f9256ccba8ff559cf4","__fixtures__/Viewport.jsx":"c9b2af9a0786fbe2445e77e5da76ef4c500f04d3","__fixtures__/testTheme.js":"9289b7299d4726b887b7587fd87bef3cec3120b3","__tests__/A11yText/A11yText.test.jsx":"bb544fd8f00c2e6135588049c62bf5910f9ffcda","__tests__/ActivityIndicator/ActivityIndicator.test.jsx":"ffed250b44f2e28838c9b8f909b7c45941385da3","__tests__/Box/Box.test.jsx":"5635f1b28e1bf5b07c09bc31218bbb90533445f9","__tests__/Button/Button.test.jsx":"c5b7e97ffb7171ce6e9ceaa4d6c6e6cbd78562e7","__tests__/Button/ButtonBase.test.jsx":"f8cf3ecdbafcea37c7f9f57ca5060c18b17dc56f","__tests__/Button/ButtonGroup.test.jsx":"193c3d84b56b5322c9c3a183f4de1d42a01561b0","__tests__/Button/ButtonLink.test.jsx":"60200e31dcabcde9f800d9c56cabcfa931168518","__tests__/Card/Card.test.jsx":"627cbf03d2bbf569bd29e33345d79f8cefaedfd1","__tests__/Checkbox/Checkbox.test.jsx":"9c3b4e6e4756836f9bf2c661d43f90b3d9e4feeb","__tests__/Checkbox/CheckboxGroup.test.jsx":"91d4f85498e0f58c5f42f54a6b8267fadab8f223","__tests__/Divider/Divider.test.jsx":"026de7361850866ffe8f553d10834e6dc835417b","__tests__/ExpandCollapse/ExpandCollapse.test.jsx":"9e85e341a050ee10f15cdd5a7a0faba0629be2fd","__tests__/Feedback/Feedback.test.jsx":"c26bcd8a8b528dd45a656fb58e157e759b7c4284","__tests__/FlexGrid/Col.test.jsx":"c5c224c841d87e79e8feccc297d4ee2dd0075a09","__tests__/FlexGrid/FlexGrid.test.jsx":"f7cd0601b26c39e6113ae4068022c6ea4646f731","__tests__/FlexGrid/Row.test.jsx":"084735ca2082515a1ebfe7c5e62bd7016efe922c","__tests__/Icon/Icon.test.jsx":"56e95c5df78ba4f73e56c281cbfa69493cafe15f","__tests__/IconButton/IconButton.test.jsx":"c085f4a605726b9460fd4d74ba14f070b76a9847","__tests__/InputSupports/InputSupports.test.jsx":"6590d5033b31b30fb6290bb2fe4e1c60696ce9a5","__tests__/Link/Link.test.jsx":"deb9ea0fbedbe8a214d1c3047c93b830bf8588b3","__tests__/Link/LinkBase.test.jsx":"fc19b014a988512c41931434e9be3cf0bd8cfadf","__tests__/Link/TextButton.test.jsx":"e5653b75e6dece08d7f64a99e9880cbb21a61cbe","__tests__/List/List.test.jsx":"8ba93772fcf305c49d73fdddc66a51ec098169f1","__tests__/Modal/Modal.test.jsx":"920e8a16e7064142f56533889f0ac4fb5909225f","__tests__/Notification/Notification.test.jsx":"9f073100b6e5696ef43ec663988b7d8ccbf009e4","__tests__/Pagination/Pagination.test.jsx":"254a468b5bbe038147ab7858ae78fe349a883c76","__tests__/Progress/Progress.test.jsx":"2e2cd16b50871ed616ada7bc617fcdfb81f6906e","__tests__/Radio/Radio.test.jsx":"28fd22b9c8cecdeee15cf345645cfd5d42fb64ae","__tests__/Radio/RadioGroup.test.jsx":"416608a4fa541088d39104d4065b98acedbdc000","__tests__/RadioCard/RadioCard.test.jsx":"2b065718450b4bc3c589e58c9c7b82ac5573064d","__tests__/RadioCard/RadioCardGroup.test.jsx":"cb83f5d9bc55ebfa837937bd443c2cde1d85c481","__tests__/Search/Search.test.jsx":"2c00a8cc742922705913396622b94d1757e6c5c6","__tests__/Select/Select.test.jsx":"ae58e09250d15276a883c4fb5214825260082ee1","__tests__/SideNav/SideNav.test.jsx":"9c5548f7a6c891741a7e60a520dc4da2b54ecb82","__tests__/Skeleton/Skeleton.test.jsx":"3facb44a45dda0114a30de7c7fee4105796b83ea","__tests__/Spacer/Spacer.test.jsx":"6ab4f9c2e75409bbe6aeef3708bc28da1a06de7b","__tests__/StackView/StackView.test.jsx":"051e7bb2dcee923a610dbf547143d21e19a52616","__tests__/StackView/StackWrap.test.jsx":"f1c7e1f9f0d35bd76fd97e11bc36e8d86b8e47dd","__tests__/StackView/getStackedContent.test.jsx":"73d7bd8448641fea18ded75254d6ecc4bf04e836","__tests__/StepTracker/StepTracker.test.jsx":"c11ee312ae4a1ea5820d8d96c7120c7ebe51c36f","__tests__/Tabs/Tabs.test.jsx":"b36f9399247adc3e56b4e95d85068c7f5342361a","__tests__/Tags/Tags.test.jsx":"1a4c53d6f3e35a5559e4288be6c5ed76236c4995","__tests__/TextInput/TextArea.test.jsx":"37e56e251941ccdb1d175449e558a2e1508eeaaf","__tests__/TextInput/TextInputBase.test.jsx":"318f7fa1c7d841594326839cfc6324b98f08cfed","__tests__/ThemeProvider/useThemeTokens.test.jsx":"86febf0023161098a21aa08d0132a1df693de31a","__tests__/ToggleSwitch/ToggleSwitch.test.jsx":"e1372aae6c8b7a3d0c1aa7bf63fb0dc8773f51ad","__tests__/Tooltip/Tooltip.test.jsx":"6c88c6dfd4aa97994ec8686d986e149ba9de5d5a","__tests__/Tooltip/getTooltipPosition.test.js":"b9fb1a5f5849216de602a66b810435e2e95f71ec","__tests__/Typography/typography.test.jsx":"f63a1d7137cc3c981adb343abf2db6f8d88cfe3b","__tests__/utils/input.test.js":"b80978f484a2a0d7b7f4dfedf77dca63b31bf9dc","__tests__/utils/useCopy.test.js":"b7ac269197a892761be543a1aa0ca25419e2575d","__tests__/utils/useResponsiveProp.test.jsx":"d1fe7f195df30c7623f5c221b59ab421ded34769","__tests__/utils/useSpacingScale.test.jsx":"3acd952f4e8ca3673f7f2b25a8fbeb82f12d8bda","__tests__/utils/useUniqueId.test.js":"6886d52bb63423cc88293a60a2495c0934b4e447","babel.config.js":"262a79320201a15aef984fcf1cc6c6cf02c8744a","jest.config.js":"8fa824d22f579fd7ffa9c7bd9d83e59c2dee611e","package.json":"a9273faeeb0461ea8ffd49bdfefc8a6048788665","src/A11yInfoProvider/index.jsx":"79a84eef336aa678d2adfe290bfdb15aae94687e","src/A11yText/index.jsx":"8bc34f4cdb15fb64718e2d535592f598265326af","src/ActivityIndicator/Spinner.jsx":"42f0d695466b5312f5972d47d0b5803c3c5648f5","src/ActivityIndicator/Spinner.native.jsx":"c6c1f9985121ac8e5d511539f899d4bfb5a61f8c","src/ActivityIndicator/index.jsx":"15d219d42aef7f29e689086d4d82ac0e225cc611","src/ActivityIndicator/shared.js":"ca6120fee59f7a0986bb823cc92ad21966d7bb2e","src/BaseProvider/index.jsx":"14773240cde78b596fe391cc1ef2525d87e6b246","src/Box/Box.jsx":"c6d878ad4c149eeb2d460def78dd5d77ccd2ca35","src/Box/index.js":"280496403f647db4bb7d563109b72799b281c104","src/Button/Button.jsx":"c8df2c9f1782bdf8a6db47aad26470aec9158a00","src/Button/ButtonBase.jsx":"e0abf0714ad831daef1a4308411499e0df58122e","src/Button/ButtonGroup.jsx":"8512cb7ab760194f932fc03748ca8c1df23f658c","src/Button/ButtonLink.jsx":"d12b6fde47c73eddceaa1afe9e7a53323df650a8","src/Button/index.js":"46aecee948aff0b9039676c156098100a3ee6033","src/Button/propTypes.js":"d1b001e897ba08c8a3c8a240c0d0214824ec6642","src/Card/Card.jsx":"3e04381c18604c4e839ecc50d776d1163679c2df","src/Card/CardBase.jsx":"bfc1b67184c466b1ffc70c4b18e60ad79050bb68","src/Card/PressableCardBase.jsx":"f9d1decdc6ae967312829991b290574b7343c028","src/Card/index.js":"76bf74db2e39f45cd9b47d8e36052a93ec62f483","src/Checkbox/Checkbox.jsx":"83d425af36f2b466cece49245ece3480cd172451","src/Checkbox/CheckboxGroup.jsx":"caba5b9a5fd7413df098b8b2778140624ecd8299","src/Checkbox/CheckboxInput.jsx":"88d356f8287c502ecec4413ecfcd8ea231f271b6","src/Checkbox/CheckboxInput.native.jsx":"393cc6721b14ae67ec336ed94639ae764d4dd928","src/Checkbox/index.js":"958d04ebd9cd61c92316e5ce6f66647bcb45066b","src/Divider/Divider.jsx":"f517d4501df2f31b0cf6213089f54abf5d4c50ff","src/Divider/index.js":"fa2817652d45ec83ae079679fb5a8c9eb786fc43","src/ExpandCollapse/Accordion.jsx":"382109f00c5ceed895e0ca6cc08bb21725645af9","src/ExpandCollapse/Control.jsx":"8d9717041db7711191ee3a31b9428a53bd3b8824","src/ExpandCollapse/ExpandCollapse.jsx":"74f6f110fb21ed6ff40dc163a984ebd76d9c6428","src/ExpandCollapse/Panel.jsx":"f7dd1696451dab10dccac424d1b242a52c442287","src/ExpandCollapse/index.js":"e553901efa8408d1753ecc329ea1361e57084199","src/Feedback/Feedback.jsx":"b516ef8ebe0256913f8d7fca915000054e310e1b","src/Feedback/index.js":"a1181a81414ebd8797eb48975b1a377319de4ad2","src/Fieldset/Fieldset.jsx":"b70e66c7e851d0a7342bf898a6389c2158e514fc","src/Fieldset/FieldsetContainer.jsx":"b716b18a7490401009c6fb827f1c8d20eedc9fcc","src/Fieldset/FieldsetContainer.native.jsx":"d4376c53c48f67628b7b3ec908298ca15611b713","src/Fieldset/Legend.jsx":"92387a2321381ecc2c2f305bc7d6f47dfdc93558","src/Fieldset/Legend.native.jsx":"5416181ee5aeb034ed9350c9f6370fb3a6a53e12","src/Fieldset/cssReset.js":"6532e6e410e70d2ef566d75e252615f9a9ca6bb9","src/Fieldset/index.js":"cc6c5bc097a0f7f1437637ebf285480bffeb71b4","src/FlexGrid/Col/Col.jsx":"84ed0037b3b7844b45eb78648b993020846b8744","src/FlexGrid/Col/index.js":"a5e8b19d6f2f0cf20635a9407421bd2448f22a55","src/FlexGrid/FlexGrid.jsx":"a885fa3328f796e0624a5158baa8b378265d8fde","src/FlexGrid/Row/Row.jsx":"c6993dd57024baffb5c2f6d54534ae5ab2c39ae7","src/FlexGrid/Row/index.js":"136065433ab96251df79b75f213e0fd9de30e7b7","src/FlexGrid/helpers/index.js":"640ddf9188848b52b35736a615b4124708b5cbec","src/FlexGrid/index.js":"c5c40a5d8c40df5c1a25309aeee1f740df58e261","src/FlexGrid/providers/GutterContext.jsx":"f6fd8ed5a72cb7daf1b5faeb7d15675bd61aca41","src/Icon/Icon.jsx":"7b638e4dcf00e1b2f5b2aecb09610119cf0e973f","src/Icon/IconText.jsx":"32f0cd29e0a8364f33b7525f7cc7bb6612eaed14","src/Icon/index.js":"bd961bc6eb1602d8e0cf77bad71a2c9e6d084d1e","src/IconButton/IconButton.jsx":"abf12c94060c6f3c8082fea55be083dd3e22b297","src/IconButton/index.js":"a719cd42817fa7f7922a2a18f679163da2ab923b","src/InputLabel/InputLabel.jsx":"d172ba23e7dd96865cddfd0cd8ba04650dc0e589","src/InputLabel/LabelContent.jsx":"7766c99498dbf61b5ee3486741fcdeebcd4fcfb1","src/InputLabel/LabelContent.native.jsx":"ca05199ac6793615fbe65f19a30ec4145a0303d1","src/InputLabel/index.js":"d73f3f71f8afdaa74b4e8f0905f9f9b8815c89b1","src/InputSupports/InputSupports.jsx":"e62278cd4b73b5306a9f7305f827144a18deba0a","src/InputSupports/index.js":"5173f3d29b1d427836b20906608fc7e2fdb6bb17","src/InputSupports/propTypes.js":"e66e0dad9ed1931416b57ffc996daba1d5c125e5","src/InputSupports/useInputSupports.js":"7b926bb247864737a1223acf79b6d2308d306bc9","src/Link/ChevronLink.jsx":"acd2363f419abfa8c60c5813ae02e0a7b269ee28","src/Link/InlinePressable.jsx":"a55d82e1428ff56cbef68e4d6a177298fd61ecd0","src/Link/InlinePressable.native.jsx":"995bf9c884c972cafa0b33564efb57c9504d9e57","src/Link/Link.jsx":"71869fd0b1458b8b3b9bca11e7861731d632abbb","src/Link/LinkBase.jsx":"e1f363c4ccd085c630076971d24d7fc71e1ec512","src/Link/TextButton.jsx":"a56911d540d4e071579674cdd710694fdc701fff","src/Link/index.js":"09d2787b9253295551e08326120969635c040b7a","src/List/List.jsx":"2d4c1581095e2e1ae723ba25da66b31f82f088e7","src/List/ListItem.jsx":"500f627d3f6ec6116b0627546c43769fecd918f9","src/List/index.js":"6cd88f9e42f35d8494a0a273250b3f349c88acbe","src/Modal/Modal.jsx":"3244f882442ee8e48ff42d6dc52a6eff17ff891d","src/Modal/dictionary.js":"c5bebd7b63fa826f93df3f61d0950b010890a6d0","src/Modal/index.js":"498702f472940b1d7a8b6b29797bbea308209e1d","src/Notification/Notification.jsx":"a6fa7f9396610edfc7f838a3acdd53cd936fa8e3","src/Notification/dictionary.js":"c7e14273e5253a3e8ce1e11879630ad29ad5108c","src/Notification/index.js":"21d57835b505d7198076398e5ea6309a61299f40","src/Pagination/PageButton.jsx":"2ce68be66c220923cf52e1cf0d647e79aa7137ae","src/Pagination/Pagination.jsx":"9d0aa65dc4acf042751ab252e1c46dd5b6df0ada","src/Pagination/SideButton.jsx":"26f6191ab6db248175a065744764ce5fb5870b0c","src/Pagination/dictionary.js":"ccfb5733071adfd9b8a067f407627461dce68a9a","src/Pagination/index.js":"1466412190cfefc75aaa042004374f9f19505c64","src/Pagination/usePagination.js":"ca67794bd989d870a9bf68acbdf4d847e19a0ded","src/Progress/Progress.jsx":"2ef6425cad7ce53947ee2deefea37f7ae2564c86","src/Progress/ProgressBar.jsx":"0f329b4d8a59f04520af41481c5e71139afaccb2","src/Progress/ProgressBarBackground.jsx":"01279e59a5b2d70b55b5ff355d1b4e404170d5f8","src/Progress/index.js":"9a98c968b708cc86d9c6f00415faede75cfadb85","src/Radio/Radio.jsx":"f29ae06086fcc9e7886122cbf7cfa92fda2b9e5f","src/Radio/RadioButton.jsx":"37ae90c39876eb85432cb922a6d65657f9b7b5b2","src/Radio/RadioGroup.jsx":"767e16950ee6367d2c2f0840f49feb9a8f15bcdf","src/Radio/RadioInput.jsx":"a0a8e4bc2d483d79b2ff91e15da582054ba38370","src/Radio/RadioInput.native.jsx":"227eb3d2893549ba6a7a12a3f0d9a5b0ba9a5df8","src/Radio/index.js":"07a6f7d8302f7942705766fb11034a4bd1ef9a32","src/RadioCard/RadioCard.jsx":"b9594a5364c1dacad54810ad25ceacf1d176c047","src/RadioCard/RadioCardGroup.jsx":"e1416874b8b5cd068985bb65056d4d0b76aa226c","src/RadioCard/index.js":"98c5762ea92a4c3cd014d9aa29935d67da4a2433","src/Search/Search.jsx":"e611ba32bd7e42d220cb5014d7d5bc456a8b8960","src/Search/dictionary.js":"915f90418afeb3d964667a8cd44729179d6accb6","src/Search/index.js":"e96a4b2864d1b57869e7ab27a62e9cf033d456ed","src/Select/Group.jsx":"ed00f24c67e7979a6e5058775e81c62a8c810031","src/Select/Group.native.jsx":"e949aca728b9df2e73b0c0f03a78af1c0c64287b","src/Select/Item.jsx":"a82c7147e30f64c0fae2be100de060eafecd9bb1","src/Select/Item.native.jsx":"3ae9bf5713525621674fa3db2f18dabed22c345a","src/Select/Picker.jsx":"fab65fafe5ec9542fe7554aee5a2a59eaced2a78","src/Select/Picker.native.jsx":"6c115fe65101945cf2610b038cc69b6d6414ac56","src/Select/Select.jsx":"94545fe114f75ea3470bc5ff7224d5c2943942d8","src/Select/index.js":"7169081eb3d414a76095b7f44c0f64460b7cd53e","src/SideNav/Item.jsx":"91ea090a00ebd3241ab7f040a377bcc06c78e92b","src/SideNav/ItemContent.jsx":"fd1d090470a79fedb8c991204c20668497e2e372","src/SideNav/ItemsGroup.jsx":"3da969daa7b6fe5aacdcb0fcd0ca6aedc0834ecf","src/SideNav/SideNav.jsx":"5d7a0984684f0621039b83d6121246fe39c6e11a","src/SideNav/index.js":"07bd001f3d51fcb378612a8f52ec51e0d37f207c","src/Skeleton/Skeleton.jsx":"de4d89173150e171cf1fc6781bbf0bc4e3070330","src/Skeleton/index.js":"032fa38fe8f7abfeca030301aa602a85a0f4e52c","src/Skeleton/skeleton.constant.js":"5b3a0266664ddc225df74ecd907f796f1536d517","src/Skeleton/skeletonWebAnimation.js":"a384b159901d16375545d84c4fee45363db206c0","src/Skeleton/useSkeletonNativeAnimation.js":"ca0baa551fece56b1f434cdb8edd91ea97e0d2c8","src/Spacer/Spacer.jsx":"7591757948f1294a4c0f5e7dff3bdcf05b2ae30e","src/Spacer/index.js":"2674e6f47037b82fa9587b2cbb081dcbe42b506c","src/StackView/StackView.jsx":"fa1b88e45678a1d941847c832f063667448e68e4","src/StackView/StackWrap.jsx":"6777b9d75a815576d1afa51fa4b216d4b945e2f4","src/StackView/StackWrap.native.jsx":"44fc5973fea70b528b3597519a4d0aec9fdd323d","src/StackView/StackWrapBox.jsx":"77b055aea20828a3276db5816a7444b5645feef9","src/StackView/StackWrapGap.jsx":"5ab7601d2cc194ae4acf5176f3fce4da550e9b6f","src/StackView/common.jsx":"2582f176e5c91071747089ce498f07e9ba02b87c","src/StackView/getStackedContent.jsx":"152e653f7a59e269a4a421296480ee3f00bee2cb","src/StackView/index.js":"8a3ad6ded46712f67e5a520220bdfee60cd262ed","src/StepTracker/Step.jsx":"050dfe88582d6879cc012c6a9d8940f5beea93ba","src/StepTracker/StepTracker.jsx":"07e941a8a23c92d84c7b5f1e7ddaa22efb8a2f4a","src/StepTracker/dictionary.js":"7a3e206b5be7ca14f9b6e6b0ab056ee733faabcd","src/StepTracker/index.js":"fd6442c015d6d61aba70553b3f6ddae3a45b5fc6","src/Tabs/HorizontalScroll.jsx":"688fd0bce41e28612afc5f128260b5910258e112","src/Tabs/ScrollViewEnd.jsx":"b1f722ad16516a3ede2f6696ad21d304bbf04809","src/Tabs/ScrollViewEnd.native.jsx":"b02f54552b6f81af2c530f1cbb2bf0e2cffb55d4","src/Tabs/Tabs.jsx":"44c2c8cee8176f8e5d9e8d2013c636eca482cfec","src/Tabs/TabsItem.jsx":"d9b8347c203e8dbb2a7449485b028743b37da999","src/Tabs/TabsScrollButton.jsx":"1a773c4bd00f2f5a6d71381becbb8650af2f0ff3","src/Tabs/dictionary.js":"a11323cbd5ecf131d3ca4a0c5f877b53c83bb4e9","src/Tabs/index.js":"d094ea3406d681aed9787075e4dcc6489aca99ab","src/Tabs/itemPositions.js":"0a4b023e5f10162344a8260888190f1f3ceb051d","src/Tags/Tags.jsx":"47189d8af503a63519913d122fe6305bcb7cf5e5","src/Tags/index.js":"ad96785c7165bd33a85b0b2589292098e2baf6ca","src/TextInput/TextArea.jsx":"60aa9869b8aa923fdd1cf976215b26ea10a78ee3","src/TextInput/TextInput.jsx":"8d5d320ac09ad6db771c695e5c272277dd6e2100","src/TextInput/TextInputBase.jsx":"dfaba5a82b0492ba4c568cefa3804f2f3f1a3be8","src/TextInput/index.js":"437c6f792ac811cd8eb2a8d3d4bcd2cc1423bb46","src/TextInput/propTypes.js":"a3d489be19df6b9bfacc907874bd5508c0b3b1ef","src/ThemeProvider/ThemeProvider.jsx":"a1b3d40de1ba0237bba08f2fbc911be636f64e9b","src/ThemeProvider/index.js":"e760f3d3e4257b79286ad0ea9177be3c28e2bbb0","src/ThemeProvider/useSetTheme.js":"93fb289621efc0dfd4539485e4fcd7cb74a0db41","src/ThemeProvider/useTheme.js":"d76b9a6607d6beeeedf18c3685d8f33464b93862","src/ThemeProvider/useThemeTokens.js":"9fa34bf510276c7569da30bce911917c19d24f8f","src/ThemeProvider/utils/index.js":"91b8a1965980bba29b286e4af92ccf2a33379d33","src/ThemeProvider/utils/styles.js":"c4c48493e02992b440ae13c79a1acfda713bb9fe","src/ThemeProvider/utils/theme-tokens.js":"f4405bf0510c9b234cd2afe39d684fd8e714777d","src/ToggleSwitch/ToggleSwitch.jsx":"3e6407386ffdb3c977ed2a494bbb8aee19163f82","src/ToggleSwitch/index.js":"e64f52f7b34559f2fda37c9c6d389aa93f9dd0ab","src/Tooltip/Backdrop.jsx":"f4fb660b21350756247e8c4cdd01614dceb071f7","src/Tooltip/Backdrop.native.jsx":"dafa102a533f3b4ad0c97900c340f9b70414a3f8","src/Tooltip/Tooltip.jsx":"82010507e0b1257c3c0d2fc6b617692c461dca4f","src/Tooltip/dictionary.js":"b68f778fe4885a66c30076593b665ffd2cf21768","src/Tooltip/getTooltipPosition.js":"a08ff8b8aaa124f70893642e5313e8c61a69e05c","src/Tooltip/index.js":"33178590407a2a57b03f2c54f84e099ddec5d981","src/TooltipButton/TooltipButton.jsx":"0f566ecd3904ecf2a4a0a00905e5782f82b33c47","src/TooltipButton/index.js":"fcb73069cb7c57a70f8103adf941c8e6a7b7d27a","src/Typography/Typography.jsx":"acafeee3153c57a0207d37333a522c7bfe329080","src/Typography/index.js":"3e2c97cd6c718560ce5a0e0cad5253535029133a","src/ViewportProvider/ViewportProvider.jsx":"e1b9b7ca47b8e1bd8a0234cef61aa2f9eedfbeb9","src/ViewportProvider/index.jsx":"09d29bb9b616094157963d1df37231463c14be38","src/ViewportProvider/useViewport.js":"853192112855ec8447ae0a96ae2e5f88cd260bbb","src/ViewportProvider/useViewportListener.js":"4af2d136d0a116630ff1017b9c493db3cdf5d723","src/index.js":"98f3952506885eaedc0185cac9bc30c7aa986a38","src/utils/a11y/index.js":"d4e9fc105374821fb29b3e6bd9befc971b9f946b","src/utils/a11y/textSize.js":"69fc64f71f7a566dae1c74cc71421c631d6c2261","src/utils/animation/index.js":"826e6a13f4d8ebecb37214942d54584d32458db7","src/utils/animation/useVerticalExpandAnimation.js":"53b8fd94922ef2502a2b56ed3bf7fec9181fb0f2","src/utils/children.jsx":"9fb155f3842dc28bb72bae73e7bad366cc1febc6","src/utils/index.js":"f9245114f7ec5140de99f613e5e29d89a295bf30","src/utils/info/index.js":"fa745289aec95c4c8760842abd9ef1a069e190f9","src/utils/info/platform/index.js":"35090561512cc6e6eb188d27297ac79c2040cf2a","src/utils/info/platform/platform.android.js":"d9ed506d3f13da692dd979e1b3e8e54e5953b9e3","src/utils/info/platform/platform.ios.js":"c0b73ee281326cb67bd1808062564685e963db7a","src/utils/info/platform/platform.js":"0749f2c09350d8c0a14bdafa185fb67efe92e169","src/utils/info/platform/platform.native.js":"e5f5be1e6c86f89d6a55331532077702b8c45a87","src/utils/info/versions.js":"a0cfb8630dcb8f2848ccc4d3a44ff3432215fa85","src/utils/input.js":"38c1c9516306840a291d0d715d738bbb41f5cffb","src/utils/pressability.js":"b4a038578ab619307d4a6e59b47f0acf966a56ae","src/utils/propTypes.js":"2e9481e906461ef5fed319973ca0bf24b2b418fc","src/utils/useCopy.js":"84c6abb9ef6e9f5c6fddde3b5bc8cb4869038fd6","src/utils/useHash.js":"9bd7b8260259ec6e35d0f944cc0a01042338cf97","src/utils/useHash.native.js":"5bf9b2880abf96ed34105b2c6aac8110e429dacb","src/utils/useResponsiveProp.js":"63d1cc35b6ea313b35e3f23e3bc7a7c0bad74e76","src/utils/useSpacingScale.js":"0c1106da09be680fc6155e76514250845e56bc0e","src/utils/useUniqueId.js":"cf003781273080b70460791569909d6b19b28c06","stories/A11yText/A11yText.stories.jsx":"06dbc198dccf05309eb9f991884b050462a06de0","stories/ActivityIndicator/ActivityIndicator.stories.jsx":"d64e822e56629900677fd4d630f3f5609d5b449e","stories/Box/Box.stories.jsx":"facdb8b9c831bcfbe20d5f7274405febd7c7ea4e","stories/Button/Button.stories.jsx":"8a89aad8d0eca38bc23f83e8e98ff41a492d91b7","stories/Button/ButtonGroup.stories.jsx":"c789e0cae74ec586ad89cba0cdf981e7a8f47d8c","stories/Button/ButtonLink.stories.jsx":"3a74a862fa232243f79c0f7392da7b0ffe2fae1b","stories/Card/Card.stories.jsx":"e2e836873c4a2860533f9414e9135d9b1fe4bae6","stories/Checkbox/Checkbox.stories.jsx":"623f5f2600490c5ec1fef2d6b2e2bac15bacbd0d","stories/Divider/Divider.stories.jsx":"915e48a437371c7b0a9c5e3217bfb7472a1dc60f","stories/ExpandCollapse/ExpandCollapse.stories.jsx":"0202d99e1b6261b2982f298d9c4ff19497bf9d39","stories/Feedback/Feedback.stories.jsx":"aa681938edb512626fdcf870b93729ead7988cc9","stories/FlexGrid/01 FlexGrid.stories.jsx":"2a167c821373be06f3711dda96ffb2a3a2359b6a","stories/FlexGrid/02 Row.stories.jsx":"6080fd863e2b8a1937910a5542ebfa1c5c785354","stories/FlexGrid/03 Col.stories.jsx":"275468c54dc745607b666743922e0fda2620ecfe","stories/Icon/Icon.stories.jsx":"4f4562a5e3ede26d60778d5d23b506402802e2a6","stories/IconButton/IconButton.stories.jsx":"a719e5caa45ff4422243774e412228cf497523e4","stories/InputLabel/InputLabel.stories.jsx":"d617e10f6d4103d5cf68c7ec298511870038ae81","stories/Link/ChevronLink.stories.jsx":"0e57c45603f49430bcc6413789e6707a343ec350","stories/Link/Link.stories.jsx":"0bdd2c2a33c3bc46ad42bf156adc4c138d6b0770","stories/Link/TextButton.stories.jsx":"b12469c061f4672904bea80d9e78afcef6385551","stories/List/List.stories.jsx":"020a87ad7ec1bf6b4feaabfdaa367a6b1432bbce","stories/Modal/Modal.stories.jsx":"9251f7cc1a3087b6407aceda5f0ecf277532f1ff","stories/Notification/Notification.stories.jsx":"7e7d0e0af09017dce8d9bbf2d2d631cd0c76ee84","stories/Pagination/Pagination.stories.jsx":"b2101af449f199f03b0eae520d8ae52557484eb5","stories/Progress/Progress.stories.jsx":"e20b7fb0dc12b06044bc5670e55f1e14422586f5","stories/Radio/Radio.stories.jsx":"afa8390003bf7318b3388bc31cfb504de5da5c99","stories/RadioCard/RadioCard.stories.jsx":"12acafccd9b754dea81e336f54cecfa6db38cb59","stories/Search/Search.stories.jsx":"a28efe6a293d80f717ec149792e90d2ec1e8162f","stories/Select/Select.stories.jsx":"8d73fb9850834d4c837221ef028fa3c7fed124a8","stories/SideNav/SideNav.stories.jsx":"36f98572fa651be8db6d8f3633cef8d5db2221e6","stories/SideNav/SideNavItem.stories.jsx":"a9bf9189f7c8c2c322ffc291eaab24e00259e9da","stories/SideNav/SideNavItemsGroup.stories.jsx":"316adeb93421a258792b0810cf1cb8ca43384453","stories/Skeleton/Skeleton.stories.jsx":"e517538b89ff539b196712dbcaebb45e11004833","stories/Spacer/Spacer.stories.jsx":"151762f905deaadf7396369329633f3b69aaba26","stories/StackView/StackView.stories.jsx":"e7d9b663dc64996d86aa5c62fb74c587bca13b82","stories/StackView/StackWrap.stories.jsx":"38f73364c6fead41694e9f9d6b36f9ffc4f34e66","stories/StepTracker/StepTracker.stories.jsx":"c40dc2265e5b37f58a621eae1f2509eaa35b5eee","stories/Tabs/Tabs.stories.jsx":"85458254c44deea12caa178511e4bf15a8195f18","stories/Tags/Tags.stories.jsx":"370c180758881efab1ac3966fe7a39cd2904b593","stories/TextInput/TextArea.stories.jsx":"02d62f5de6582aad07f9add961af22adfa7814c9","stories/TextInput/TextInput.stories.jsx":"26fd05b15e02bf265670310d52e82c97a0f50341","stories/ToggleSwitch/ToggleSwitch.stories.jsx":"a473e05d4f5938d2835e21c28a5b6da5db582515","stories/Tooltip/Tooltip.stories.jsx":"e03b7c0ce05ba537ab2582bd26217230c47d0fc0","stories/TooltipButton/TooltipButton.stories.jsx":"81b9f4f91f3e29ffc1f70b20b61cd54b7be38551","stories/Typography/Typography.stories.jsx":"3b3bf6c8b6bb6272ffc41a4fbd9c2365cf14ca82","stories/platform-supports.jsx":"1e6f6f8fd3e09f99fe667cc46d86c7da50b399e4","stories/platform-supports.native.jsx":"fcfbb23b926b3440b0f684119832a388e880bd82","stories/supports.jsx":"07523b43ff784f8a95c0f8c9b74e1c10e57fd5e3"},"deps":{"@telus-uds/system-constants":1640765985142.2947,"@telus-uds/system-themes":1640765985286.2964}}
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.0.2-prerelease.9](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.8...@telus-uds/components-base/v0.0.2-prerelease.9) (2021-12-29)
6
+
7
+ ### Features
8
+
9
+ - **base:** implement IconButton ([#958](https://github.com/telus/universal-design-system/issues/958)) ([c3ff7dd](https://github.com/telus/universal-design-system/commit/c3ff7dd9fb76123d3ff8409e507c89ad91b7fef2))
10
+
5
11
  ### [0.0.2-prerelease.8](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.7...@telus-uds/components-base/v0.0.2-prerelease.8) (2021-12-15)
6
12
 
7
13
  ### Features
@@ -601,6 +601,11 @@ export default {
601
601
  }
602
602
  ]
603
603
  },
604
+ IconButton: {
605
+ appearances: {},
606
+ tokens: {},
607
+ rules: []
608
+ },
604
609
  Progress: {
605
610
  appearances: {
606
611
  size: { values: ['mini'], type: 'variant' }
@@ -0,0 +1,52 @@
1
+ import React from 'react'
2
+ import { fireEvent, render } from '@testing-library/react-native'
3
+
4
+ import { IconButton } from '../../src'
5
+ import Theme from '../../__fixtures__/Theme'
6
+
7
+ describe('IconButton', () => {
8
+ it('renders a link if href is passed', () => {
9
+ const { queryByRole } = render(<IconButton href="https://telus.com" icon={() => null} />, {
10
+ wrapper: Theme
11
+ })
12
+
13
+ expect(queryByRole('link')).toBeTruthy()
14
+
15
+ expect(queryByRole('button')).toBeFalsy()
16
+ })
17
+
18
+ it('renders a button if onPress is passed', () => {
19
+ const { queryByRole } = render(<IconButton onPress={() => {}} icon={() => null} />, {
20
+ wrapper: Theme
21
+ })
22
+
23
+ expect(queryByRole('button')).toBeTruthy()
24
+
25
+ expect(queryByRole('link')).toBeFalsy()
26
+ })
27
+
28
+ it('renders an accessible label', () => {
29
+ const { getByA11yLabel } = render(
30
+ <IconButton onPress={() => {}} icon={() => null} accessibilityLabel="test label" />,
31
+ {
32
+ wrapper: Theme
33
+ }
34
+ )
35
+
36
+ expect(getByA11yLabel('test label')).toBeTruthy()
37
+ })
38
+
39
+ it('calls onPress function when pressed', async () => {
40
+ const handlePress = jest.fn()
41
+ const { getByA11yLabel } = render(
42
+ <IconButton onPress={handlePress} icon={() => null} accessibilityLabel="test label" />,
43
+ {
44
+ wrapper: Theme
45
+ }
46
+ )
47
+ const iconButton = getByA11yLabel('test label')
48
+ expect(handlePress).toHaveBeenCalledTimes(0)
49
+ await fireEvent.press(iconButton)
50
+ expect(handlePress).toHaveBeenCalledTimes(1)
51
+ })
52
+ })
package/jest.config.js CHANGED
@@ -1,10 +1,13 @@
1
1
  const preset = require('react-native/jest-preset')
2
- const displayName = require('./package.json').name.split('@telus-uds/').pop()
2
+ const name = require('./package.json').name.split('@telus-uds/').pop()
3
3
 
4
4
  // cherry-pick the bits of the preset we want to avoid it overriding the fix we have on L14
5
5
  module.exports = {
6
6
  haste: preset.haste,
7
- displayName,
7
+ displayName: {
8
+ name,
9
+ color: 'blue'
10
+ },
8
11
  setupFiles: preset.setupFiles,
9
12
  transform: {
10
13
  // Use babel-jest instead of react-native/jest/preprocessor.js so that the coverage report is correct as per:
@@ -0,0 +1,135 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
13
+
14
+ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
15
+
16
+ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
17
+
18
+ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
19
+
20
+ var _ThemeProvider = require("../ThemeProvider");
21
+
22
+ var _utils = require("../utils");
23
+
24
+ var _propTypes2 = require("../utils/propTypes");
25
+
26
+ var _Icon = _interopRequireDefault(require("../Icon"));
27
+
28
+ var _jsxRuntime = require("react/jsx-runtime");
29
+
30
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
+
32
+ const selectOuterStyle = ({
33
+ backgroundColor,
34
+ borderRadius,
35
+ outerBorderWidth,
36
+ outerBorderColor,
37
+ outerBorderGap,
38
+ shadow
39
+ }) => [{
40
+ backgroundColor,
41
+ ...(0, _ThemeProvider.applyShadowToken)(shadow),
42
+ ...(0, _ThemeProvider.applyOuterBorder)({
43
+ borderRadius,
44
+ outerBorderWidth,
45
+ outerBorderColor,
46
+ outerBorderGap
47
+ }),
48
+ ..._Platform.default.select({
49
+ web: {
50
+ outline: 'none',
51
+ display: 'inline-flex'
52
+ }
53
+ })
54
+ }, staticStyles.outer];
55
+
56
+ const selectInnerStyle = ({
57
+ borderColor,
58
+ borderWidth = 0,
59
+ borderRadius,
60
+ padding = 0
61
+ }) => ({
62
+ // Inner borders animate with the icon and should be treated like a themable feature of the icon
63
+ borderColor,
64
+ borderRadius,
65
+ borderWidth,
66
+ padding: Math.max(0, padding - borderWidth) // Stable size as border changes
67
+
68
+ });
69
+ /**
70
+ * A pressable themeless base component that handles pressable states and passes tokens
71
+ * based on these to an outer border and a base Card component. Not intended to be used in
72
+ * apps or sites directly: build themed components on top of this.
73
+ */
74
+
75
+
76
+ const IconButton = ({
77
+ tokens,
78
+ variant,
79
+ icon: IconComponent,
80
+ href,
81
+ hrefAttrs,
82
+ onPress,
83
+ accessibilityRole = href ? 'link' : 'button',
84
+ ...rest
85
+ }) => {
86
+ const a11y = _propTypes2.a11yProps.select({ ...rest,
87
+ accessibilityRole
88
+ });
89
+
90
+ const handlePress = _utils.linkProps.handleHref({
91
+ href,
92
+ onPress
93
+ });
94
+
95
+ const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
96
+
97
+ const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
98
+
99
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
100
+ href: href,
101
+ onPress: handlePress,
102
+ hrefAttrs: hrefAttrs,
103
+ style: getOuterStyle,
104
+ ...a11y,
105
+ children: pressableState => {
106
+ const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
107
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
108
+ style: selectInnerStyle(themeTokens),
109
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
110
+ icon: IconComponent,
111
+ title: a11y.accessibilityLabel,
112
+ tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
113
+ })
114
+ });
115
+ }
116
+ });
117
+ };
118
+
119
+ IconButton.propTypes = { ..._propTypes2.a11yProps.types,
120
+ variant: _utils.variantProp.propType,
121
+ tokens: (0, _utils.getTokensPropType)('IconButton'),
122
+ icon: _propTypes.default.elementType.isRequired,
123
+ href: _propTypes.default.string,
124
+ hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
125
+ onPress: _propTypes.default.func
126
+ };
127
+
128
+ const staticStyles = _StyleSheet.default.create({
129
+ outer: {
130
+ alignSelf: 'flex-start'
131
+ }
132
+ });
133
+
134
+ var _default = IconButton;
135
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _IconButton = _interopRequireDefault(require("./IconButton"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var _default = _IconButton.default;
13
+ exports.default = _default;
package/lib/index.js CHANGED
@@ -17,6 +17,7 @@ var _exportNames = {
17
17
  Fieldset: true,
18
18
  FlexGrid: true,
19
19
  Icon: true,
20
+ IconButton: true,
20
21
  InputLabel: true,
21
22
  List: true,
22
23
  Modal: true,
@@ -127,6 +128,12 @@ Object.defineProperty(exports, "Icon", {
127
128
  return _Icon.default;
128
129
  }
129
130
  });
131
+ Object.defineProperty(exports, "IconButton", {
132
+ enumerable: true,
133
+ get: function () {
134
+ return _IconButton.default;
135
+ }
136
+ });
130
137
  Object.defineProperty(exports, "InputLabel", {
131
138
  enumerable: true,
132
139
  get: function () {
@@ -374,6 +381,8 @@ Object.keys(_Icon).forEach(function (key) {
374
381
  });
375
382
  });
376
383
 
384
+ var _IconButton = _interopRequireDefault(require("./IconButton"));
385
+
377
386
  var _InputLabel = _interopRequireDefault(require("./InputLabel"));
378
387
 
379
388
  var _Link = require("./Link");
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@telus-uds/components-base",
3
- "version": "0.0.2-prerelease.8",
3
+ "version": "0.0.2-prerelease.9",
4
4
  "description": "Base components",
5
5
  "keywords": [
6
6
  "base"
7
7
  ],
8
8
  "author": "TELUS Digital",
9
9
  "homepage": "https://github.com/telus/universal-design-system#readme",
10
- "license": "ISC",
10
+ "license": "UNLICENSED",
11
11
  "main": "lib/index.js",
12
12
  "react-native": "src/index.js",
13
13
  "directories": {
@@ -48,7 +48,7 @@
48
48
  "dependencies": {
49
49
  "airbnb-prop-types": "^2.16.0",
50
50
  "@telus-uds/system-constants": "^0.0.2-prerelease.2",
51
- "@telus-uds/system-themes": "^0.0.2-prerelease.1",
51
+ "@telus-uds/system-themes": "^0.0.2-prerelease.2",
52
52
  "lodash.debounce": "^4.0.8",
53
53
  "lodash.merge": "^4.6.2",
54
54
  "prop-types": "^15.7.2",
@@ -1,7 +1,7 @@
1
1
  {
2
- "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.7",
3
- "changelog": "### [0.0.2-prerelease.8](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.7...@telus-uds/components-base/v0.0.2-prerelease.8) (2021-12-15)\n\n\n### Features\n\n* **base:** add `ProgressBar` component ([#890](https://github.com/telus/universal-design-system/issues/890)) ([b98315c](https://github.com/telus/universal-design-system/commit/b98315cc7dabb2c7130c62c9c3bbf6fdfb7419a0))\n* **base:** add `Tabs` component ([#908](https://github.com/telus/universal-design-system/issues/908)) ([073bbd2](https://github.com/telus/universal-design-system/commit/073bbd2a0b4282112aa434f8e97e505fa8b4b92f))\n* **base:** add base `StepTracker` component ([#800](https://github.com/telus/universal-design-system/issues/800)) ([aa7d472](https://github.com/telus/universal-design-system/commit/aa7d47297c1d9ba13daef60b5184ead07b95cd52))\n* **base:** add Group fieldsets for RadioCard, Radio, Checkbox ([#875](https://github.com/telus/universal-design-system/issues/875)) ([4b99987](https://github.com/telus/universal-design-system/commit/4b999872714144b643f676d3d473369d605b3eea))\n* **base:** add Notification ([#848](https://github.com/telus/universal-design-system/issues/848)) ([ee6a83e](https://github.com/telus/universal-design-system/commit/ee6a83e05dc991acef3b9449f78c17d43d63b248))\n* **base:** add RadioCard and PressableCardBase ([#865](https://github.com/telus/universal-design-system/issues/865)) ([55c6fa2](https://github.com/telus/universal-design-system/commit/55c6fa293f2fa09499aed763910d3791eefbc4a1))\n* **base:** add the Modal component ([#878](https://github.com/telus/universal-design-system/issues/878)) ([431d4cd](https://github.com/telus/universal-design-system/commit/431d4cd2c1a7f4ce30b453d437b9f5d7b69fd251))\n* **base:** add the Search component ([#798](https://github.com/telus/universal-design-system/issues/798)) ([7b974df](https://github.com/telus/universal-design-system/commit/7b974df12d2bf0cb94b6360091bac8ac57dd7245))\n* **base:** handle `Tabs` hashes, with `useHash` ([#910](https://github.com/telus/universal-design-system/issues/910)) ([8ad6507](https://github.com/telus/universal-design-system/commit/8ad65072c249e8439e7d1c7e55fee535a5f30b4e))\n* **ds-allium:** `PriceLockup` implmementation ([#858](https://github.com/telus/universal-design-system/issues/858)) ([8669b9e](https://github.com/telus/universal-design-system/commit/8669b9e3f80261bd18962dfba5d774c90a5f4ebb))\n* **ds-allium:** add `StoryCard` component ([#880](https://github.com/telus/universal-design-system/issues/880)) ([6f0616d](https://github.com/telus/universal-design-system/commit/6f0616dc761cbdcf470bc2505d773eb362bf800e))\n* **ds-allium:** add Modal content types ([#896](https://github.com/telus/universal-design-system/issues/896)) ([f070447](https://github.com/telus/universal-design-system/commit/f070447fc796139046a96892aab34b74bc1974a4))\n* **ds-allium:** add SubNavigation ([#931](https://github.com/telus/universal-design-system/issues/931)) ([834ee7b](https://github.com/telus/universal-design-system/commit/834ee7bbe811ea8477ac4870466ae573d73e3a8f))\n* use built icons ([#809](https://github.com/telus/universal-design-system/issues/809)) ([120802e](https://github.com/telus/universal-design-system/commit/120802e11bcb4352b9d2e171525f6dc5b687c023))\n\n\n### Bug Fixes\n\n* **base:** add outer border to Radio, extract RadioButton ([#847](https://github.com/telus/universal-design-system/issues/847)) ([b563335](https://github.com/telus/universal-design-system/commit/b563335087fbfffe6739ad185fe4fc7886ef4e4d))\n* **base:** fix Tags icon, update Allium Tags/ButtonGroup ([#888](https://github.com/telus/universal-design-system/issues/888)) ([6d6ff35](https://github.com/telus/universal-design-system/commit/6d6ff35caba4c9c6c99eacf015be56e8862ad170))\n* **components-base:** Remove named import of json file ([#930](https://github.com/telus/universal-design-system/issues/930)) ([9db1cbe](https://github.com/telus/universal-design-system/commit/9db1cbe501d3c049f1f6476720a3ee9bd8b4d736))\n* fix storybook error from proptypes ([#857](https://github.com/telus/universal-design-system/issues/857)) ([175537a](https://github.com/telus/universal-design-system/commit/175537a6ac4b48699f66b1a59eb35910cbf9930b))\n* update test theme icons + cleanup ds-allium icon usage ([#860](https://github.com/telus/universal-design-system/issues/860)) ([c2c0a84](https://github.com/telus/universal-design-system/commit/c2c0a84914eed9dafaf47acca30e1f5119f19e57))\n",
4
- "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
5
- "newVersion": "0.0.2-prerelease.8",
2
+ "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
3
+ "changelog": "### [0.0.2-prerelease.9](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.8...@telus-uds/components-base/v0.0.2-prerelease.9) (2021-12-29)\n\n\n### Features\n\n* **base:** implement IconButton ([#958](https://github.com/telus/universal-design-system/issues/958)) ([c3ff7dd](https://github.com/telus/universal-design-system/commit/c3ff7dd9fb76123d3ff8409e507c89ad91b7fef2))\n",
4
+ "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.9",
5
+ "newVersion": "0.0.2-prerelease.9",
6
6
  "packageName": "@telus-uds/components-base"
7
7
  }
@@ -0,0 +1,107 @@
1
+ import React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import { Pressable, Platform, StyleSheet, View } from 'react-native'
4
+
5
+ import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
6
+ import {
7
+ variantProp,
8
+ linkProps,
9
+ resolvePressableState,
10
+ hrefAttrsProp,
11
+ getTokensPropType,
12
+ selectTokens
13
+ } from '../utils'
14
+ import { a11yProps } from '../utils/propTypes'
15
+ import Icon from '../Icon'
16
+
17
+ const selectOuterStyle = ({
18
+ backgroundColor,
19
+ borderRadius,
20
+ outerBorderWidth,
21
+ outerBorderColor,
22
+ outerBorderGap,
23
+ shadow
24
+ }) => [
25
+ {
26
+ backgroundColor,
27
+ ...applyShadowToken(shadow),
28
+ ...applyOuterBorder({ borderRadius, outerBorderWidth, outerBorderColor, outerBorderGap }),
29
+ ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
30
+ },
31
+ staticStyles.outer
32
+ ]
33
+
34
+ const selectInnerStyle = ({ borderColor, borderWidth = 0, borderRadius, padding = 0 }) => ({
35
+ // Inner borders animate with the icon and should be treated like a themable feature of the icon
36
+ borderColor,
37
+ borderRadius,
38
+ borderWidth,
39
+ padding: Math.max(0, padding - borderWidth) // Stable size as border changes
40
+ })
41
+
42
+ /**
43
+ * A pressable themeless base component that handles pressable states and passes tokens
44
+ * based on these to an outer border and a base Card component. Not intended to be used in
45
+ * apps or sites directly: build themed components on top of this.
46
+ */
47
+ const IconButton = ({
48
+ tokens,
49
+ variant,
50
+ icon: IconComponent,
51
+ href,
52
+ hrefAttrs,
53
+ onPress,
54
+ accessibilityRole = href ? 'link' : 'button',
55
+ ...rest
56
+ }) => {
57
+ const a11y = a11yProps.select({
58
+ ...rest,
59
+ accessibilityRole
60
+ })
61
+ const handlePress = linkProps.handleHref({ href, onPress })
62
+
63
+ const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
64
+ const getOuterStyle = (pressableState) =>
65
+ selectOuterStyle(getTokens(resolvePressableState(pressableState)))
66
+
67
+ return (
68
+ <Pressable
69
+ href={href}
70
+ onPress={handlePress}
71
+ hrefAttrs={hrefAttrs}
72
+ style={getOuterStyle}
73
+ {...a11y}
74
+ >
75
+ {(pressableState) => {
76
+ const themeTokens = getTokens(resolvePressableState(pressableState))
77
+ return (
78
+ <View style={selectInnerStyle(themeTokens)}>
79
+ <Icon
80
+ icon={IconComponent}
81
+ title={a11y.accessibilityLabel}
82
+ tokens={selectTokens('Icon', themeTokens, 'icon')}
83
+ />
84
+ </View>
85
+ )
86
+ }}
87
+ </Pressable>
88
+ )
89
+ }
90
+
91
+ IconButton.propTypes = {
92
+ ...a11yProps.types,
93
+ variant: variantProp.propType,
94
+ tokens: getTokensPropType('IconButton'),
95
+ icon: PropTypes.elementType.isRequired,
96
+ href: PropTypes.string,
97
+ hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
98
+ onPress: PropTypes.func
99
+ }
100
+
101
+ const staticStyles = StyleSheet.create({
102
+ outer: {
103
+ alignSelf: 'flex-start'
104
+ }
105
+ })
106
+
107
+ export default IconButton
@@ -0,0 +1,3 @@
1
+ import IconButton from './IconButton'
2
+
3
+ export default IconButton
package/src/index.js CHANGED
@@ -12,6 +12,7 @@ export { default as Fieldset } from './Fieldset'
12
12
  export { default as FlexGrid } from './FlexGrid'
13
13
  export { default as Icon } from './Icon'
14
14
  export * from './Icon'
15
+ export { default as IconButton } from './IconButton'
15
16
  export { default as InputLabel } from './InputLabel'
16
17
  export * from './Link'
17
18
  export { default as List } from './List'
@@ -1,9 +1,10 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
2
  import React from 'react'
3
- import { StyleSheet, Text } from 'react-native'
3
+ import { StyleSheet, Text, View } from 'react-native'
4
+
4
5
  import AccessibleIcon from '../../__fixtures__/Accessible'
5
- import { Icon } from '../../lib'
6
- import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
6
+ import { Container, useVariants, EachIcon, EachParentType, parentTypesParams } from '../supports'
7
+ import { Icon, StackWrap, Tooltip } from '../../lib'
7
8
 
8
9
  export default {
9
10
  title: 'Base/Icon',
@@ -33,6 +34,20 @@ export default {
33
34
 
34
35
  export const ExampleIcon = (args) => <Icon icon={AccessibleIcon} {...args} />
35
36
 
37
+ export const EveryIcon = (args) => (
38
+ <StackWrap space={0}>
39
+ <EachIcon>
40
+ {([iconName, IconComponent]) => (
41
+ <View key={iconName} style={styles.border}>
42
+ <Tooltip content={iconName}>
43
+ <Icon icon={IconComponent} {...args} />
44
+ </Tooltip>
45
+ </View>
46
+ )}
47
+ </EachIcon>
48
+ </StackWrap>
49
+ )
50
+
36
51
  export const IconVariants = (args) => {
37
52
  const variants = useVariants('Icon')
38
53
  return variants.map(([key, value, label]) => (
@@ -56,5 +71,9 @@ const styles = StyleSheet.create({
56
71
  color: 'rgb(180, 180, 180)',
57
72
  fontWeight: '700',
58
73
  marginVertical: 16
74
+ },
75
+ border: {
76
+ borderWidth: 8,
77
+ borderColor: '#efefef'
59
78
  }
60
79
  })
@@ -0,0 +1,50 @@
1
+ /* eslint-disable react/no-multi-comp */
2
+ import React from 'react'
3
+
4
+ /* eslint-disable-next-line import/no-extraneous-dependencies */
5
+ import { Add } from '@telus-uds/palette-allium/build/rn/icons'
6
+
7
+ import { Box, IconButton, StackView } from '../../lib'
8
+ import { useVariants, EachParentType, parentTypesParams } from '../supports'
9
+
10
+ export default {
11
+ title: 'Base/IconButton',
12
+ component: IconButton
13
+ }
14
+
15
+ export const Default = (args) => <IconButton {...args} />
16
+ Default.storyName = 'IconButton'
17
+ Default.args = {
18
+ icon: Add,
19
+ onPress: () => {}
20
+ }
21
+
22
+ export const Variants = (args) => {
23
+ const variants = useVariants('IconButton')
24
+ return (
25
+ <StackView space={5}>
26
+ {variants.map(([key, value, label]) => (
27
+ <Box
28
+ key={`${key}:${value}`}
29
+ space={5}
30
+ tokens={label === 'inverse' ? { backgroundColor: '#454545' } : null}
31
+ >
32
+ <IconButton
33
+ {...args}
34
+ variant={{ ...args.variant, [key]: value }}
35
+ accessibilityLabel={label}
36
+ />
37
+ </Box>
38
+ ))}
39
+ </StackView>
40
+ )
41
+ }
42
+ Variants.args = Default.args
43
+
44
+ export const ParentTypes = (args) => (
45
+ <EachParentType componentThemeName="IconButton" {...args}>
46
+ {({ label, variant }) => <IconButton {...args} variant={variant} accessibilityLabel={label} />}
47
+ </EachParentType>
48
+ )
49
+ ParentTypes.parameters = parentTypesParams
50
+ ParentTypes.args = Default.args
@@ -2,12 +2,10 @@
2
2
  import React from 'react'
3
3
  import { View } from 'react-native'
4
4
 
5
- // TODO: move icon-specific stories to Allium storybook and add generic/default icons
6
- // eslint-disable-next-line import/no-extraneous-dependencies
7
- import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
5
+ import AccessibleIcon from '../../__fixtures__/Accessible'
8
6
 
9
7
  import { Link, Typography, variantProp } from '../../lib'
10
- import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
8
+ import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
11
9
 
12
10
  export default {
13
11
  title: 'Base/Link',
@@ -34,17 +32,17 @@ Template.propTypes = {
34
32
  variant: variantProp.propType
35
33
  }
36
34
 
37
- const SampleIcon = Icons.Settings
38
-
39
- const EveryIconTemplate = (args) => (
35
+ export const EveryIcon = (args) => (
40
36
  <View>
41
- {Object.entries(Icons).map(([key, Icon]) => (
42
- <Container key={key}>
43
- <Link key={key} icon={Icon} {...args}>
44
- Link to {key}
45
- </Link>
46
- </Container>
47
- ))}
37
+ <EachIcon>
38
+ {([iconName, IconComponent]) => (
39
+ <Container key={iconName}>
40
+ <Link key={iconName} icon={IconComponent} {...args}>
41
+ Link to {iconName}
42
+ </Link>
43
+ </Container>
44
+ )}
45
+ </EachIcon>
48
46
  </View>
49
47
  )
50
48
 
@@ -55,21 +53,19 @@ Default.args = { children: "I'm a link" }
55
53
  export const Variants = Template.bind({})
56
54
 
57
55
  export const IconLeft = Template.bind({})
58
- IconLeft.args = { icon: SampleIcon, iconPosition: 'left' }
56
+ IconLeft.args = { icon: AccessibleIcon, iconPosition: 'left' }
59
57
 
60
58
  export const IconRight = Template.bind({})
61
- IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
62
-
63
- export const EveryIcon = EveryIconTemplate.bind({})
59
+ IconRight.args = { icon: AccessibleIcon, iconPosition: 'right' }
64
60
 
65
61
  export const InText = (args) => (
66
62
  <Typography>
67
63
  Some text containing a{' '}
68
- <Link icon={SampleIcon} iconPosition="left" {...args}>
64
+ <Link icon={AccessibleIcon} iconPosition="left" {...args}>
69
65
  left icon link
70
66
  </Link>
71
67
  , alongside a{' '}
72
- <Link icon={SampleIcon} iconPosition="right" {...args}>
68
+ <Link icon={AccessibleIcon} iconPosition="right" {...args}>
73
69
  right icon link
74
70
  </Link>
75
71
  , and also with a <Link {...args}>text link</Link>, all inline in text.
@@ -1,11 +1,25 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
2
  import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
- import { Platform, ScrollView, View, StyleSheet } from 'react-native'
4
+ import { Platform, ScrollView, Text, View, StyleSheet } from 'react-native'
5
+
6
+ // eslint-disable-next-line import/no-extraneous-dependencies
7
+ import * as alliumIcons from '@telus-uds/palette-allium/build/rn/icons'
8
+ // eslint-disable-next-line import/no-extraneous-dependencies
9
+ import * as koodoIcons from '@telus-uds/palette-koodo/build/rn/icons'
10
+ // eslint-disable-next-line import/no-extraneous-dependencies
11
+ import * as pmIcons from '@telus-uds/palette-public-mobile/build/rn/icons'
12
+
5
13
  import { useTheme, getComponentTheme } from '../lib/ThemeProvider'
6
14
  import { Typography } from '../lib'
7
15
  import { containers as platformContainers } from './platform-supports'
8
16
 
17
+ const iconSets = {
18
+ allium: alliumIcons,
19
+ koodo: koodoIcons,
20
+ publicMobile: pmIcons
21
+ }
22
+
9
23
  const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
10
24
  RowWrap.propTypes = { children: PropTypes.node }
11
25
 
@@ -92,6 +106,26 @@ export const parentTypesParams = {
92
106
  }
93
107
  }
94
108
 
109
+ /**
110
+ * Utility component that takes a render function as its child and runs it for each
111
+ * icon entry in the RN build of the palette of the currently selected theme.
112
+ *
113
+ * If the theme isn't supported or named, it returns a message saying no icons found.
114
+ */
115
+ export const EachIcon = ({ children }) => {
116
+ const theme = useTheme()
117
+ const themeName = theme?.metadata?.name
118
+ const iconSet = iconSets[themeName]
119
+ return iconSet ? (
120
+ Object.entries(iconSet).map((iconEntry) => children(iconEntry))
121
+ ) : (
122
+ <Text>{`No icons found for theme "${themeName}"`}</Text>
123
+ )
124
+ }
125
+ EachIcon.propTypes = {
126
+ children: PropTypes.func
127
+ }
128
+
95
129
  export const Placeholder = ({ margin = false, ...props }) => (
96
130
  <View style={[styles.placeholder, margin && styles.margin]}>
97
131
  <Typography {...props} />
@@ -1,9 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs/blocks'
2
-
3
- <Meta title="Guides/Contributing" />
4
-
5
- # Contributing to UDS
6
-
7
- Contributions are welcome, we have a code of conduct, etc etc...
8
-
9
- <!-- @TODO fill out -->
@@ -1,104 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs/blocks'
2
-
3
- <Meta title="Guides/Fonts" />
4
-
5
- # Fonts
6
-
7
- ## Understanding the font model and React Native limitations
8
-
9
- React Native broadly adheres to the CSS model for fonts, and so we use this as the basis of our font modelling for UDS.
10
- Font properties are named to correspond to CSS properties (_e.g._ `fontWeight` is equivalent to `font-weight`).
11
- In general you can specify design tokens corresponding to all CSS font properties.
12
-
13
- However, React Native does not handle font families in the same way as CSS does for web.
14
- On the web it is normal to specify a font via a `font-family`, and then apply a `font-weight` and `font-style` from within that family.
15
- You could then create equivalent `font-face` declarations which "group" all of the font weights and styles of that font face into a font family.
16
- Unfortunately, React Native does not have particularly good support for [font weights within a font family](https://reactnative.dev/docs/text-style-props#fontweight).
17
- In order to support font weights effectively on React Native we need to define a new font family for every font face/font weight/font style combination.
18
- So whereas in CSS you might write:
19
-
20
- ```CSS
21
- .my-font-class {
22
- font-family: "MyFont";
23
- font-weight: 400;
24
- font-style: normal;
25
- }
26
- .my-font-class.bold {
27
- font-weight: 700;
28
- }
29
- .my-font-class.italic {
30
- font-style: italic;
31
- }
32
- ```
33
-
34
- The equivalent in a React Native stylesheet would be:
35
-
36
- ```js
37
- const styles = StyleSheet.create({
38
- myFont: {
39
- fontFamily: 'MyFont400normal'
40
- },
41
- bold: {
42
- fontFamily: 'MyFont700normal'
43
- },
44
- italic: {
45
- fontFamily: 'MyFont400italic'
46
- }
47
- })
48
- ```
49
-
50
- In UDS Base components this mapping is handled for you, but if you are building your own React Native components you need to be aware of how fonts are defined in your application.
51
- The below section documents how to load fonts into your application depending on your target platforms and tooling.
52
-
53
- Using system fonts in React Native (for ios and android) is possible, but requires non-trivial consideration of font faces and weights.
54
- As such **system fonts are currently not supported in UDS**.
55
-
56
- ## Font loading options
57
-
58
- Broadly speaking there are 3 variables to consider:
59
-
60
- 1. **Defining fonts in CSS or JS** - If you are building cross-platform, you will need to import your fonts into your javascript code rather than define them with CSS.
61
- 2. **Included in bundle or served from CDN** - Again if you are targeting cross-platform, you will need to bundle your font assets. If you are targeting web-only then you can choose to either include fonts in your bundle, or reference resources on a CDN.
62
- 3. **Split or whole families** - For the reasons above, UDS Base components expect font faces to be defined split into individual declarations, _e.g._ `MyFont700normal`. If you're using UDS Base components in your application, or a library which depends on UDS Base, you'll need to make sure these font faces are defined. You can also define fonts as families, where you have a single font name (_e.g._ MyFont) for multiple weights and styles. This is a more typical approach for web projects.
63
-
64
- Note that in each case you will be using either a web build or a React Native build of the brand palette. Each build offers several options for importing fonts.
65
-
66
- ### React Native Build
67
-
68
- #### With Expo
69
-
70
- In expo applications you can use `expo-fonts`:
71
-
72
- ```js
73
- /* in app.js */
74
- import { useFonts } from 'expo-font'
75
- import AppLoading from 'expo-app-loading' // recommended to handle loading state
76
- import * as fonts from '@telus-uds/<my-palette-name>/build/rn/fonts'
77
-
78
- export default () => {
79
- ...
80
- const [fontsLoaded, fontsError] = useFonts(fonts)
81
- return fontsLoaded ? <App /> : <AppLoading />
82
- }
83
- ```
84
-
85
- #### In a web application (e.g. storybook)
86
-
87
- ```js
88
- import '@telus-uds/<my-palette-name>/build/rn/fonts/fonts.css'
89
- ```
90
-
91
- **Note:** this assumes you have an appropriate loader set up to handle css imports (this is true for create-react-app by default).
92
-
93
- With either of these setups, fonts are only available in the React Native format for font families (_e.g._ `MyFont700normal`)
94
-
95
- ### Web build
96
-
97
- The web build of the brand palette offers 4 different built css files for defining fonts. Include the appropriate file(s) into your build tooling the same way you would any other third party css file.
98
-
99
- 1. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-local.css` - defines split font faces with local font file imports. Great for use with UDS Base if you want to bundle your fonts into your app.
100
- 2. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-cdn.css` - Exactly the same definitions as fonts-local, but references resources on a CDN.
101
- 3. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-local-family.css` - Includes the same fonts as above, but defined in web-friendly font families, also uses local font file imports.
102
- 4. `@telus-uds/<my-palette-name>/build/web/fonts/fonts-cdn-family.css` - The font family declarations as above, but referencing CDN resources.
103
-
104
- **Note** you may well wish to include both the split and the family declarations in your app (for example you're using UDS Base components and you have some of your own web components which use the font weights within a font family model). This is fine and won't increase your bundle size or the number of network requests (for local or CDN respectively) because both sets of declarations point at exactly the same resources. However you **should not mix CDN and local CSS**. If you do you'll end up with the fonts in your bundle, and being requested from the CDN.
@@ -1,144 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs/blocks'
2
-
3
- <Meta title="Guides/Icons" />
4
-
5
- # Icons
6
-
7
- Icons are available through their respective brand palettes as raw SVG resources.
8
- In order to use icons as React components we are using [SVGR](https://react-svgr.com/) to transform the SVG resources into components.
9
- In order to use UDS icons in your application you will need to apply the SVGR transform in your build pipeline (_e.g._ webpack config), instructions on how to do this are included for common use cases below.
10
-
11
- Using a build-time transform enables us to keep the rendering and theming React logic for icons in the same place as for all other components, and enable outcome teams to include only the icons which they need in their bundle.
12
-
13
- ## Configuring icon transforms
14
-
15
- SVGR supports [cosmiconfig](https://github.com/davidtheclark/cosmiconfig#readme). You can use any of the cosmiconfig methods for applying the SVGR configuration exposed at `@telus-uds/components-base/config/svgr-icons`.
16
- For example, you can create a `svgr.config.js` file at the root of your project, and add the following line to it:
17
-
18
- ```js
19
- module.exports = require(@telus-uds/components-base/config/svgr-icons)
20
- ```
21
-
22
- Once you have SVGR configuration in place, you will need to add a build step. Included below are example configurations for common use cases.
23
- If your use case isn't covered below, or you are having problems configuring icons for your application, get in touch with the core UDS team.
24
-
25
- The SVGR configuration is configured to transform SVGs into React Native components.
26
- To do this it relies on `react-native-svg`. You will need to include this as a production dependency in your project.
27
- We also offer a config preset for web-only builds to avoid this (see Webpack for web-only below). This is recommended for web projects to avoid the need to include an alias `react-native-svg`
28
-
29
- ### Standalone
30
-
31
- SVGR can be applied as a standalone transform, via its own [well-documented CLI](https://react-svgr.com/docs/cli/).
32
-
33
- ### Webpack
34
-
35
- For Webpack you will need to create a new Webpack loader rule to apply the SVGR using '@svgr/webpack' which you will need to include as a dev dependency in your project.
36
-
37
- ```js
38
- /* in your webpack.config.js */
39
- // create a new loader rule leveraging @svgr/webpack
40
- const iconLoaderRule = {
41
- test: /\.icon\.svg$/,
42
- exclude: /node_modules/,
43
- use: [
44
- {
45
- loader: '@svgr/webpack'
46
- }
47
- ]
48
- }
49
-
50
- // if you already have an svg loader rule, adjust it to avoid it matching icons
51
- const svgLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'))
52
- svgLoaderRule.exclude = iconLoaderRule.test
53
-
54
- // add your new rule
55
- config.module.rules.unshift(iconLoaderRule)
56
- ```
57
-
58
- **Note**: if your Webpack config is using a `oneOf` rule to apply file loaders, you may need to tweak the above to target that `oneOf`:
59
-
60
- ```js
61
- config.module.rules[1].oneOf.unshift(iconLoaderRule)
62
- ```
63
-
64
- With a oneOf rule, you don't need to worry about adjusting existing SVG loaders, as long as you place your icon loader rule at the head of the list (_e.g._ via `unshift`).
65
-
66
- ### Storybook
67
-
68
- Storybook uses Webpack under the hood, so the instructions are very similiar. You will again need to ensure that '@svgr/webpack' is included as a dev dependency.
69
-
70
- ```js
71
- /* in your .storybook/main.js file */
72
- // create a new loader rule leveraging @svgr/webpack
73
- const iconLoaderRule = {
74
- test: /\.icon\.svg$/,
75
- exclude: /node_modules/,
76
- use: [
77
- {
78
- loader: '@svgr/webpack'
79
- }
80
- ]
81
- }
82
-
83
- module.exports = {
84
- ...
85
- webpackFinal: async (config) => {
86
- // tweak existing rule to avoid matching *.icon.svg
87
- const fileLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'))
88
- fileLoaderRule.exclude = iconLoaderRule.test
89
-
90
- // Add icon loader rule
91
- config.module.rules.push(iconLoaderRule)
92
- return config
93
- }
94
- }
95
- ```
96
-
97
- ### Metro (React Native)
98
-
99
- For the Metro bundler the terminology is slightly different and we're applying a _transformer_ rather than a loader.
100
- The example below uses the expo default metro config, but you can switch `getDefaultConfig` out for any metro config generator.
101
- For Metro you will need to ensure you have `react-native-svg-transformer` installed as a dev dependency.
102
-
103
- ````js
104
- /* in your metro.config.js file */
105
- const { getDefaultConfig } = require("@expo/metro-config");
106
-
107
- module.exports = (async () => {
108
- const {
109
- resolver: { sourceExts, assetExts }
110
- } = await getDefaultConfig(__dirname);
111
- return {
112
- transformer: {
113
- // apply the SVGR transformer
114
- babelTransformerPath: require.resolve("react-native-svg-transformer")
115
- },
116
- resolver: {
117
- // ensure SVGs are *not* treated as assets...
118
- assetExts: assetExts.filter(ext => ext !== "svg"),
119
- // ...but instead as source files to be transformed
120
- sourceExts: [...sourceExts, "svg"]
121
- }
122
- };
123
- })();
124
-
125
-
126
- ### Webpack for web-only
127
- If you are only targeting the web platform, and want to avoid the dependency on `react-native-svg`, you can follow the Webpack instructions above, but replace the contents of your `svgr.config.js` file with:
128
-
129
- ```js
130
- module.exports = require(@telus-uds/components-base/config/svgr-icons-web)
131
- ````
132
-
133
- ## Using icons
134
-
135
- If you are using a standalone build you can use the generated files as you would any other React component.
136
- Assuming you are using Metro or Webpack and have applied the correct configuration as above, you can simply use your icons as components with
137
-
138
- ```js
139
- const MyIconComponent = require('path/to/my-icon.icon.svg')
140
-
141
- ...
142
-
143
- return <MyIconComponent />
144
- ```
@@ -1,9 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs/blocks'
2
-
3
- <Meta title="Guides/Introduction" />
4
-
5
- # Welcome to the UDS workshop
6
-
7
- This is the storybook for developing and documenting Universal Design System (UDS) components.
8
-
9
- <!-- @TODO fill out -->