@telus-uds/components-base 1.0.1 → 1.1.0

package/src/List/index.js

@@ -1,3 +1,8 @@
 import List from './List'
+import ListItem from './ListItem'
+
+List.Item = ListItem
+
+export { List as ListBase, ListItem }
 
 export default List

package/src/Pagination/PageButton.jsx

@@ -8,6 +8,7 @@ import {
   copyPropTypes,
   getTokensPropType,
   hrefAttrsProp,
+  linkProps,
   selectTokens,
   variantProp
 } from '../utils'
@@ -57,12 +58,7 @@ const PageButton = forwardRef(
 PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
-  // Spreading any props into a secondary component accessed like Pagination.PageButton
-  // crashes a Docusaurus props table, but only in production, not in development
-  onPress: PropTypes.func,
-  href: PropTypes.string,
-  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
-  // ...linkProps.types,
+  ...linkProps.types,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   copy: copyPropTypes,

package/src/StackView/StackWrap.jsx

@@ -4,6 +4,12 @@ import { Platform } from 'react-native'
 import StackWrapBox from './StackWrapBox'
 import StackWrapGap from './StackWrapGap'
 
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+const cssSupports = (...args) =>
+  typeof window !== 'undefined' &&
+  typeof window.CSS?.supports === 'function' &&
+  window.CSS.supports(...args)
+
 // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 const exampleGapValue = '1px'
@@ -20,12 +26,7 @@ const StackWrap = forwardRef((props, ref) => {
   // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   const gap = props.gap ?? space
 
-  const canUseCSSGap =
-    Platform.OS === 'web' &&
-    gap === space &&
-    // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
-    typeof CSS?.supports === 'function' &&
-    CSS.supports('gap', exampleGapValue)
+  const canUseCSSGap = Platform.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue)
 
   return canUseCSSGap ? (
     // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.

package/src/index.js

@@ -17,7 +17,7 @@ export * from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as InputLabel } from './InputLabel'
 export * from './Link'
-export { default as List } from './List'
+export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'

package/src/utils/a11y/propTypes.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+
+import nativePropTypes from './propTypes.native'
+
+export default {
+  ...nativePropTypes,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+}

package/src/utils/a11y/propTypes.native.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+export default {
+  accessible: PropTypes.bool,
+  focusable: PropTypes.bool,
+
+  accessibilityElementsHidden: PropTypes.bool,
+  accessibilityHint: PropTypes.string, // react-native-web ignores `accessibilityHint`
+  accessibilityIgnoresInvertColors: PropTypes.bool,
+  accessibilityLabel: PropTypes.string,
+  accessibilityRole: PropTypes.string,
+  accessibilityActions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string
+    })
+  ),
+  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: PropTypes.shape({
+    disabled: PropTypes.bool,
+    selected: PropTypes.bool,
+    checked: PropTypes.oneOf([true, false, 'mixed']),
+    busy: PropTypes.bool,
+    expanded: PropTypes.bool
+  }),
+  accessibilityValue: PropTypes.shape({
+    min: PropTypes.number,
+    max: PropTypes.number,
+    now: PropTypes.number,
+    text: PropTypes.string
+  }),
+  accessibilityViewIsModal: PropTypes.bool,
+  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: PropTypes.func,
+  onAccessibilityEscape: PropTypes.func,
+  onAccessibilityTap: PropTypes.func
+}

package/src/utils/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { Linking, Platform } from 'react-native'
 import { components as tokenKeys } from '@telus-uds/system-theme-tokens'
+import a11yPropTypes from './a11y/propTypes'
 
 export const paddingProp = {
   propType: PropTypes.shape({
@@ -202,116 +203,6 @@ function getPropSelector(propTypes, regexp) {
     )
 }
 
-// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
-const a11yPropTypes = {
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.string, // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: PropTypes.bool,
-  accessibilityLabel: PropTypes.string,
-  accessibilityRole: PropTypes.string,
-  accessibilityActions: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      label: PropTypes.string
-    })
-  ),
-  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: PropTypes.shape({
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    checked: PropTypes.oneOf([true, false, 'mixed']),
-    busy: PropTypes.bool,
-    expanded: PropTypes.bool
-  }),
-  accessibilityValue: PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
-  }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func,
-  ...Platform.select({
-    web: {
-      // React Native Web adds many a11y props that alias aria-* attributes
-      // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-      accessibilityActiveDescendant: PropTypes.string,
-      accessibilityAtomic: PropTypes.bool,
-      accessibilityAutoComplete: PropTypes.string,
-      accessibilityBusy: PropTypes.bool,
-      accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-      accessibilityColumnCount: PropTypes.number,
-      accessibilityColumnIndex: PropTypes.number,
-      accessibilityColumnSpan: PropTypes.number,
-      accessibilityControls: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityCurrent: PropTypes.oneOf([
-        true,
-        false,
-        'page',
-        'step',
-        'location',
-        'date',
-        'time'
-      ]),
-      accessibilityDescribedBy: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityDetails: PropTypes.string,
-      accessibilityDisabled: PropTypes.bool,
-      accessibilityErrorMessage: PropTypes.string,
-      accessibilityExpanded: PropTypes.bool,
-      accessibilityFlowTo: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityHasPopup: PropTypes.string,
-      accessibilityHidden: PropTypes.bool,
-      accessibilityInvalid: PropTypes.bool,
-      accessibilityKeyShortcuts: PropTypes.string,
-      accessibilityLabelledBy: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityLevel: PropTypes.number,
-      accessibilityModal: PropTypes.bool,
-      accessibilityMultiline: PropTypes.bool,
-      accessibilityMultiSelectable: PropTypes.bool,
-      accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-      accessibilityOwns: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-      ]),
-      accessibilityPlaceholder: PropTypes.string,
-      accessibilityPosInSet: PropTypes.number,
-      accessibilityPressed: PropTypes.bool,
-      accessibilityReadOnly: PropTypes.bool,
-      accessibilityRequired: PropTypes.bool,
-      accessibilityRoleDescription: PropTypes.string,
-      accessibilityRowCount: PropTypes.number,
-      accessibilityRowIndex: PropTypes.number,
-      accessibilityRowSpan: PropTypes.number,
-      accessibilitySelected: PropTypes.bool,
-      accessibilitySetSize: PropTypes.number,
-      accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-      accessibilityValueMax: PropTypes.number,
-      accessibilityValueMin: PropTypes.number,
-      accessibilityValueNow: PropTypes.number,
-      accessibilityValueText: PropTypes.string
-    }
-  })
-}
-
 export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.

package/stories/A11yText/A11yText.stories.jsx

@@ -12,7 +12,7 @@ const defaultArgs = {
 }
 
 export default {
-  title: 'Base/A11yText',
+  title: 'A11yText',
   component: A11yText,
   parameters: defaultArgs
 }

package/stories/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -4,7 +4,7 @@ import { ActivityIndicator } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/ActivityIndicator',
+  title: 'ActivityIndicator',
   component: ActivityIndicator,
   args: {
     label: 'loading...'

package/stories/Box/Box.stories.jsx

@@ -12,7 +12,7 @@ import {
 } from '../supports'
 
 export default {
-  title: 'Base/Box',
+  title: 'Box',
   component: Box
 }
 

package/stories/Button/Button.stories.jsx

@@ -10,7 +10,7 @@ Default.storyName = 'Button'
 const defaultLabel = "I'm a button"
 
 export default {
-  title: 'Base/Button',
+  title: 'Button',
   component: Button,
   args: {
     // eslint-disable-next-line no-console

package/stories/Button/ButtonGroup.stories.jsx

@@ -22,7 +22,7 @@ const defaultControlledArgs = {
 }
 
 export default {
-  title: 'Base/ButtonGroup',
+  title: 'ButtonGroup',
   component: ButtonGroup,
   args: {
     ...defaultArgs

package/stories/Button/ButtonLink.stories.jsx

@@ -3,7 +3,7 @@ import { ButtonLink } from '../../src'
 import { Container, useVariants } from '../supports'
 
 export default {
-  title: 'Base/ButtonLink',
+  title: 'ButtonLink',
   component: ButtonLink,
   args: {
     children: "I'm a button link",

package/stories/Card/Card.stories.jsx

@@ -6,7 +6,7 @@ import { Card } from '../../src'
 import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Card',
+  title: 'Card',
   component: Card
 }
 

package/stories/Checkbox/Checkbox.stories.jsx

@@ -5,7 +5,7 @@ import { Checkbox, CheckboxGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Checkbox',
+  title: 'Checkbox',
   component: Checkbox,
   argTypes: {
     checked: {

package/stories/Divider/Divider.stories.jsx

@@ -5,7 +5,7 @@ import { Divider, Typography } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Divider',
+  title: 'Divider',
   component: Divider
 }
 

package/stories/ExpandCollapse/ExpandCollapse.stories.jsx

@@ -6,7 +6,7 @@ import { Container, EachParentType, parentTypesParams } from '../supports'
 import { useMultipleInputValues } from '../../src/utils'
 
 export default {
-  title: 'Base/ExpandCollapse',
+  title: 'ExpandCollapse',
   component: ExpandCollapse,
   args: {
     children: () => {}

package/stories/Feedback/Feedback.stories.jsx

@@ -5,7 +5,7 @@ import { Feedback, Typography, TextInput } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Feedback',
+  title: 'Feedback',
   component: Feedback
 }
 

package/stories/FlexGrid/01 FlexGrid.stories.jsx

@@ -7,7 +7,7 @@ import { Placeholder, EachParentType, parentTypesParams } from '../supports'
 const { Row, Col } = FlexGrid
 
 export default {
-  title: 'Base/FlexGrid/FlexGrid',
+  title: 'FlexGrid/FlexGrid',
   component: FlexGrid
 }
 

package/stories/FlexGrid/02 Row.stories.jsx

@@ -6,7 +6,7 @@ import { Placeholder } from '../supports'
 const { Row, Col } = FlexGrid
 
 export default {
-  title: 'Base/FlexGrid/Row',
+  title: 'FlexGrid/Row',
   component: Row
 }
 

package/stories/FlexGrid/03 Col.stories.jsx

@@ -6,7 +6,7 @@ import { Placeholder } from '../supports'
 const { Row, Col } = FlexGrid
 
 export default {
-  title: 'Base/FlexGrid/Col',
+  title: 'FlexGrid/Col',
   component: Col,
   argTypes: {
     xs: {

package/stories/Icon/Icon.stories.jsx

@@ -7,7 +7,7 @@ import { Container, useVariants, EachIcon, EachParentType, parentTypesParams } f
 import { Icon, StackWrap, Tooltip } from '../../src'
 
 export default {
-  title: 'Base/Icon',
+  title: 'Icon',
   component: Icon,
   argTypes: {
     label: {

package/stories/IconButton/IconButton.stories.jsx

@@ -8,7 +8,7 @@ import { Box, IconButton, StackView } from '../../src'
 import { useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/IconButton',
+  title: 'IconButton',
   component: IconButton
 }
 

package/stories/InputLabel/InputLabel.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import InputLabel from '../../src/InputLabel/InputLabel'
 
 export default {
-  title: 'Base/InputLabel',
+  title: 'InputLabel',
   component: InputLabel
 }
 

package/stories/Link/ChevronLink.stories.jsx

@@ -5,7 +5,7 @@ import { ChevronLink } from '../../src'
 import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
-  title: 'Base/ChevronLink',
+  title: 'ChevronLink',
   component: ChevronLink,
   args: {
     href: 'https://example.com'

package/stories/Link/Link.stories.jsx

@@ -8,7 +8,7 @@ import { Link, Typography, variantProp } from '../../src'
 import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
-  title: 'Base/Link',
+  title: 'Link',
   component: Link,
   args: {
     href: `https://telus.com/?unvisited:${Date.now()}`,

package/stories/Link/TextButton.stories.jsx

@@ -10,7 +10,7 @@ import { TextButton, variantProp } from '../../src'
 import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/TextButton',
+  title: 'TextButton',
   component: TextButton,
   args: {
     // eslint-disable-next-line no-console

package/stories/List/List.stories.jsx

@@ -9,7 +9,7 @@ import { useVariants, Container } from '../supports'
 import { List, Typography } from '../../src'
 
 export default {
-  title: 'Base/List',
+  title: 'List',
   component: List
 }
 

package/stories/Modal/Modal.stories.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { Button, Modal, Spacer, Typography } from '../../src'
 
 export default {
-  title: 'Base/Modal',
+  title: 'Modal',
   component: Modal
 }
 

package/stories/Notification/Notification.stories.jsx

@@ -6,7 +6,7 @@ import { Link, Notification, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Notification',
+  title: 'Notification',
   component: Notification
 }
 

package/stories/Pagination/Pagination.stories.jsx

@@ -6,7 +6,7 @@ import { Pagination, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Pagination',
+  title: 'Pagination',
   component: Pagination
 }
 

package/stories/Progress/Progress.stories.jsx

@@ -5,7 +5,7 @@ import { Progress, StackView, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Progress',
+  title: 'Progress',
   component: Progress.Bar,
   args: { accessibilityLabel: 'Progress Bar' }
 }

package/stories/Radio/Radio.stories.jsx

@@ -5,7 +5,7 @@ import { Radio, RadioGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Radio',
+  title: 'Radio',
   component: Radio,
   argTypes: {
     checked: {

package/stories/RadioCard/RadioCard.stories.jsx

@@ -5,7 +5,7 @@ import { RadioCard, RadioCardGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/RadioCard',
+  title: 'RadioCard',
   component: RadioCard
 }
 

package/stories/Search/Search.stories.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Search } from '../../src'
 
 export default {
-  title: 'Base/Search',
+  title: 'Search',
   component: Search
 }
 

package/stories/Select/Select.stories.jsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native'
 import { Select } from '../../src'
 
 export default {
-  title: 'Base/Select',
+  title: 'Select',
   component: Select
 }
 

package/stories/SideNav/SideNav.stories.jsx

@@ -5,7 +5,7 @@ import { SideNav } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/SideNav',
+  title: 'SideNav',
   component: SideNav
 }
 

package/stories/SideNav/SideNavItem.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SideNav } from '../../src'
 
 export default {
-  title: 'Base/SideNav/Item',
+  title: 'SideNav/Item',
   component: SideNav.Item
 }
 

package/stories/SideNav/SideNavItemsGroup.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SideNav } from '../../src'
 
 export default {
-  title: 'Base/SideNav/Items Group',
+  title: 'SideNav/Items Group',
   component: SideNav.ItemsGroup
 }
 

package/stories/Skeleton/Skeleton.stories.jsx

@@ -6,7 +6,7 @@ import StackView from '../../src/StackView'
 import { Skeleton } from '../../src'
 
 export default {
-  title: 'Base/Skeleton',
+  title: 'Skeleton',
   component: Skeleton
 }
 

package/stories/Spacer/Spacer.stories.jsx

@@ -6,7 +6,7 @@ import { Spacer, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Spacer',
+  title: 'Spacer',
   component: Spacer
 }
 

package/stories/StackView/StackView.stories.jsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { StackView, Card, Typography, Button } from '../../src'
 
 export default {
-  title: 'Base/StackView',
+  title: 'StackView',
   component: StackView
 }