@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 +1 -1
- package/CHANGELOG.md +6 -0
- package/__fixtures__/testTheme.js +5 -0
- package/__tests__/IconButton/IconButton.test.jsx +52 -0
- package/jest.config.js +5 -2
- package/lib/IconButton/IconButton.js +135 -0
- package/lib/IconButton/index.js +13 -0
- package/lib/index.js +9 -0
- package/package.json +3 -3
- package/release-context.json +4 -4
- package/src/IconButton/IconButton.jsx +107 -0
- package/src/IconButton/index.js +3 -0
- package/src/index.js +1 -0
- package/stories/Icon/Icon.stories.jsx +22 -3
- package/stories/IconButton/IconButton.stories.jsx +50 -0
- package/stories/Link/Link.stories.jsx +16 -20
- package/stories/supports.jsx +35 -1
- package/docs/Contributing.stories.mdx +0 -9
- package/docs/Fonts.stories.mdx +0 -104
- package/docs/Icons.stories.mdx +0 -144
- package/docs/Introduction.stories.mdx +0 -9
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
|
|
@@ -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
|
|
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.
|
|
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": "
|
|
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.
|
|
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",
|
package/release-context.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.
|
|
3
|
-
"changelog": "### [0.0.2-prerelease.
|
|
4
|
-
"releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.
|
|
5
|
-
"newVersion": "0.0.2-prerelease.
|
|
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
|
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 {
|
|
6
|
-
import {
|
|
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
|
-
|
|
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
|
|
38
|
-
|
|
39
|
-
const EveryIconTemplate = (args) => (
|
|
35
|
+
export const EveryIcon = (args) => (
|
|
40
36
|
<View>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
Link
|
|
45
|
-
|
|
46
|
-
|
|
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:
|
|
56
|
+
IconLeft.args = { icon: AccessibleIcon, iconPosition: 'left' }
|
|
59
57
|
|
|
60
58
|
export const IconRight = Template.bind({})
|
|
61
|
-
IconRight.args = { icon:
|
|
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={
|
|
64
|
+
<Link icon={AccessibleIcon} iconPosition="left" {...args}>
|
|
69
65
|
left icon link
|
|
70
66
|
</Link>
|
|
71
67
|
, alongside a{' '}
|
|
72
|
-
<Link icon={
|
|
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.
|
package/stories/supports.jsx
CHANGED
|
@@ -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} />
|
package/docs/Fonts.stories.mdx
DELETED
|
@@ -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.
|
package/docs/Icons.stories.mdx
DELETED
|
@@ -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
|
-
```
|