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

package/src/utils/{spacing/useSpacingScale.js → useSpacingScale.js}

@@ -1,14 +1,27 @@
-import { useViewport } from '../../ViewportProvider'
-import { useThemeTokens } from '../../ThemeProvider'
-import { resolveSpacingValue, resolveSpacingOptions } from './utils'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import { resolveResponsiveProp } from './useResponsiveProp'
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('../propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('../propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('./propTypes.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
  */
 
+const resolveSpacingOptions = (space) => {
+  if (!space?.options) return {}
+
+  const { size, variant, subtract = 0 } = space.options
+  const overridden = typeof size === 'number'
+
+  // Might need an option that adapts the size value by current user's system font scale, so that
+  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
+  // https://github.com/telus/universal-design-system/issues/583
+
+  return { tokens: { size }, variant, overridden, subtract }
+}
+
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -82,11 +95,13 @@ const useSpacingScale = (spaceValue) => {
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = useViewport()
-
   const { tokens, variant, overridden, subtract = 0 } = resolveSpacingOptions(spaceValue)
-  const space = overridden ? null : resolveSpacingValue(spaceValue, viewport)
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0))
 
-  const { size } = useThemeTokens('spacingScale', tokens, variant, { space, viewport })
+  const { size } = useThemeTokens('spacingScale', tokens, variant, {
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  })
   return Math.max(size - subtract, 0)
 }
 

package/stories/A11yText/A11yText.stories.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import A11yText from '../../lib/A11yText'
 import { Button, Typography } from '../../lib'
@@ -44,13 +44,9 @@ A11yTextAsHeading.args = { ...defaultArgs, heading: true }
 
 export const A11yTextInButton = (args) => (
   <Button onPress={() => {}}>
-    {({ textStyles }) => (
-      <>
-        <A11yText {...args} />
-        <Text style={textStyles}>A11yText sandwich</Text>
-        <A11yText {...args} />
-      </>
-    )}
+    <A11yText {...args} />
+    A11yText sandwich
+    <A11yText {...args} />
   </Button>
 )
 A11yTextInButton.args = defaultArgs

package/stories/Button/Button.stories.jsx

@@ -55,6 +55,11 @@ LongLabelButtonVariants.args = {
   children: 'This button has a label that is much longer than is considered advisable'
 }
 
+export const ShortLabelButtonVariants = VariantsTemplate.bind({})
+ShortLabelButtonVariants.args = {
+  children: 'k'
+}
+
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Button" {...args}>
     {({ label, variant }) => (

package/stories/Card/Card.stories.jsx

@@ -53,7 +53,7 @@ export const CardVariants = (args) => {
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Card" {...args}>
     {({ label, variant }) => (
-      <Card {...args} variant={variant}>
+      <Card {...args} variant={variant} key={label}>
         <Text>{label}</Text>
       </Card>
     )}

package/stories/Checkbox/Checkbox.stories.jsx

@@ -0,0 +1,94 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import { Checkbox, CheckboxGroup, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    checked: {
+      control: { type: 'radio' },
+      options: [true, false, undefined]
+    }
+  },
+  args: {
+    label: 'Checkbox',
+    checked: undefined
+  }
+}
+
+const Template = (args) => (
+  <Container>
+    <Checkbox {...args} />
+  </Container>
+)
+
+export const Default = Template.bind({})
+Default.argTypes = {
+  checked: { table: { disable: true } }
+}
+
+export const Controlled = Template.bind({})
+Controlled.argTypes = {
+  defaultChecked: { table: { disable: true } }
+}
+Controlled.args = {
+  checked: false,
+  defaultChecked: undefined
+}
+
+export const Inactive = Template.bind({})
+Inactive.argTypes = {
+  inactive: { table: { disable: true } }
+}
+Inactive.args = {
+  inactive: true
+}
+
+export const WithFeedback = Template.bind({})
+WithFeedback.argTypes = {
+  feedback: { table: { disable: true } }
+}
+WithFeedback.args = {
+  feedback: 'Something happened'
+}
+
+export const CheckboxGroupStory = (args) => <CheckboxGroup {...args} />
+CheckboxGroupStory.storyName = 'CheckboxGroup'
+CheckboxGroupStory.args = {
+  items: [
+    {
+      label: 'Checkbox 1'
+    },
+    {
+      label: 'Checkbox 2'
+    },
+    {
+      label: 'Checkbox 3'
+    },
+    {
+      label: 'Checkbox 4'
+    }
+  ],
+  legend: 'Choose checkboxes.',
+  hint: 'Of the checkboxes below, choose some.',
+  tooltip: 'Decide which checkboxes you like best, then press them.',
+  name: 'example'
+}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Checkbox" {...args}>
+    {({ label, variant }) => (
+      <Container key={label}>
+        <Typography>{`${label} `}</Typography>
+        <Checkbox {...args} variant={variant} />
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = {
+  defaultChecked: undefined
+}

package/stories/Feedback/Feedback.stories.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { Text } from 'react-native'
 
-import { Feedback, Typography } from '../../lib'
+import { Feedback, Typography, TextInput } from '../../lib'
 import { Container } from '../supports'
-import TextInput from '../../lib/TextInput'
 
 export default {
   title: 'Base/Feedback',
@@ -40,22 +39,22 @@ export const RenderFunctionAndChildren = () => (
 export const Variants = () => (
   <>
     <Container>
-      <Feedback variant={{ state: 'success' }} title="Success">
+      <Feedback validation="success" title="Success">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>
     <Container>
-      <Feedback variant={{ state: 'success', icon: true }} title="Success with icon">
+      <Feedback validation="success" variant={{ icon: true }} title="Success with icon">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>
     <Container>
-      <Feedback variant={{ state: 'error' }} title="Error">
+      <Feedback validation="error" title="Error">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>
     <Container>
-      <Feedback variant={{ state: 'error', icon: true }} title="Error with icon">
+      <Feedback validation="error" variant={{ icon: true }} title="Error with icon">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>

package/stories/Icon/Icon.stories.jsx

@@ -1,12 +1,14 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { StyleSheet, Text } from 'react-native'
-import AccessibleIcon from '../../__fixtures__/accessible.icon.svg'
-import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
+import { StyleSheet, Text, View } from 'react-native'
+
+import AccessibleIcon from '../../__fixtures__/Accessible'
+import { Container, useVariants, EachIcon, EachParentType, parentTypesParams } from '../supports'
+import { Icon, StackWrap, Tooltip } from '../../lib'
 
 export default {
   title: 'Base/Icon',
-  component: AccessibleIcon,
+  component: Icon,
   argTypes: {
     label: {
       type: {
@@ -30,21 +32,35 @@ export default {
   }
 }
 
-export const ExampleIcon = (args) => <AccessibleIcon {...args} />
+export const ExampleIcon = (args) => <Icon icon={AccessibleIcon} {...args} />
+
+export const EveryIcon = (args) => (
+  <StackWrap space={0}>
+    <EachIcon>
+      {([iconName, IconComponent]) => (
+        <View key={iconName} style={styles.border}>
+          <Tooltip content={iconName}>
+            <Icon icon={IconComponent} {...args} />
+          </Tooltip>
+        </View>
+      )}
+    </EachIcon>
+  </StackWrap>
+)
 
 export const IconVariants = (args) => {
   const variants = useVariants('Icon')
   return variants.map(([key, value, label]) => (
     <Container key={label} dark={value === 'white'}>
       <Text style={styles.subtle}>{label}</Text>
-      <AccessibleIcon {...args} variant={{ [key]: value }} />
+      <Icon icon={AccessibleIcon} {...args} variant={{ [key]: value }} />
     </Container>
   ))
 }
 
 export const ParentTypes = (args) => (
   <EachParentType {...args}>
-    {({ label }) => <AccessibleIcon {...args} label={label} />}
+    {({ label }) => <Icon icon={AccessibleIcon} {...args} label={label} />}
   </EachParentType>
 )
 ParentTypes.parameters = parentTypesParams
@@ -55,5 +71,9 @@ const styles = StyleSheet.create({
     color: 'rgb(180, 180, 180)',
     fontWeight: '700',
     marginVertical: 16
+  },
+  border: {
+    borderWidth: 8,
+    borderColor: '#efefef'
   }
 })

package/stories/IconButton/IconButton.stories.jsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import { Add } from '@telus-uds/palette-allium/build/rn/icons'
+
+import { Box, IconButton, StackView } from '../../lib'
+import { useVariants, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/IconButton',
+  component: IconButton
+}
+
+export const Default = (args) => <IconButton {...args} />
+Default.storyName = 'IconButton'
+Default.args = {
+  icon: Add,
+  onPress: () => {}
+}
+
+export const Variants = (args) => {
+  const variants = useVariants('IconButton')
+  return (
+    <StackView space={5}>
+      {variants.map(([key, value, label]) => (
+        <Box
+          key={`${key}:${value}`}
+          space={5}
+          tokens={label === 'inverse' ? { backgroundColor: '#454545' } : null}
+        >
+          <IconButton
+            {...args}
+            variant={{ ...args.variant, [key]: value }}
+            accessibilityLabel={label}
+          />
+        </Box>
+      ))}
+    </StackView>
+  )
+}
+Variants.args = Default.args
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="IconButton" {...args}>
+    {({ label, variant }) => <IconButton {...args} variant={variant} accessibilityLabel={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = Default.args

package/stories/InputLabel/InputLabel.stories.jsx

@@ -15,7 +15,12 @@ export const HintInline = () => (
 )
 
 export const HintAndTooltip = () => (
-  <InputLabel label="Test label" hint="Short hint" hintPosition="inline" tooltip="?" />
+  <InputLabel
+    label="Test label"
+    hint="Short hint"
+    hintPosition="inline"
+    tooltip="This is the tooltip's content"
+  />
 )
 
 export const HintInlineLong = () => (
@@ -23,7 +28,7 @@ export const HintInlineLong = () => (
     label="Test label"
     hint="A rather long hint that won't actually fit"
     hintPosition="inline"
-    tooltip="?"
+    tooltip="This is the tooltip's content"
   />
 )
 
@@ -32,6 +37,6 @@ export const HintBelow = () => (
     label="Test label"
     hint="A rather long hint that won't actually fit"
     hintPosition="below"
-    tooltip="?"
+    tooltip="This is the tooltip's content"
   />
 )

package/stories/Link/ChevronLink.stories.jsx

@@ -31,10 +31,10 @@ export const Default = (args) => <ChevronLink {...args} />
 Default.storyName = 'ChevronLink'
 Default.args = { children: "I'm a chevron link" }
 
-export const VariantsRight = Template.bind({})
+export const RightDirection = Template.bind({})
 
-export const VariantsLeft = Template.bind({})
-VariantsLeft.args = { direction: 'left' }
+export const LeftDirection = Template.bind({})
+LeftDirection.args = { direction: 'left' }
 
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Link" {...args}>

package/stories/Link/Link.stories.jsx

@@ -2,12 +2,10 @@
 import React from 'react'
 import { View } from 'react-native'
 
-// TODO: move icon-specific stories to Allium storybook and add generic/default icons
-// eslint-disable-next-line import/no-extraneous-dependencies
-import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
+import AccessibleIcon from '../../__fixtures__/Accessible'
 
-import { Link, variantProp } from '../../lib'
-import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
+import { Link, Typography, variantProp } from '../../lib'
+import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/Link',
@@ -34,17 +32,17 @@ Template.propTypes = {
   variant: variantProp.propType
 }
 
-const SampleIcon = Icons.Settings
-
-const EveryIconTemplate = (args) => (
+export const EveryIcon = (args) => (
   <View>
-    {Object.entries(Icons).map(([key, Icon]) => (
-      <Container key={key}>
-        <Link key={key} icon={Icon} {...args}>
-          Link to {key}
-        </Link>
-      </Container>
-    ))}
+    <EachIcon>
+      {([iconName, IconComponent]) => (
+        <Container key={iconName}>
+          <Link key={iconName} icon={IconComponent} {...args}>
+            Link to {iconName}
+          </Link>
+        </Container>
+      )}
+    </EachIcon>
   </View>
 )
 
@@ -55,12 +53,24 @@ Default.args = { children: "I'm a link" }
 export const Variants = Template.bind({})
 
 export const IconLeft = Template.bind({})
-IconLeft.args = { icon: SampleIcon, iconPosition: 'left' }
+IconLeft.args = { icon: AccessibleIcon, iconPosition: 'left' }
 
 export const IconRight = Template.bind({})
-IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
+IconRight.args = { icon: AccessibleIcon, iconPosition: 'right' }
 
-export const EveryIcon = EveryIconTemplate.bind({})
+export const InText = (args) => (
+  <Typography>
+    Some text containing a{' '}
+    <Link icon={AccessibleIcon} iconPosition="left" {...args}>
+      left icon link
+    </Link>
+    , alongside a{' '}
+    <Link icon={AccessibleIcon} iconPosition="right" {...args}>
+      right icon link
+    </Link>
+    , and also with a <Link {...args}>text link</Link>, all inline in text.
+  </Typography>
+)
 
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Link" {...args}>

package/stories/List/List.stories.jsx

@@ -0,0 +1,117 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+// TODO: move icon-specific stories to Allium storybook and add generic/default icons
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Checkmark, ThumbsUp, Baby } from '@telus-uds/palette-allium/build/rn/icons'
+import { useVariants, Container } from '../supports'
+
+import { List, Typography } from '../../lib'
+
+export default {
+  title: 'Base/List',
+  component: List
+}
+
+const styles = StyleSheet.create({
+  variantsTitle: {
+    marginBottom: 10,
+    fontSize: 20,
+    textTransform: 'capitalize'
+  }
+})
+
+const Template = () => {
+  const variants = useVariants('List')
+
+  return variants.map(([key, value, label]) => (
+    <Container key={label} dark={value === 'white'} padding={16}>
+      <Text style={styles.variantsTitle}>{label}</Text>
+      <List variant={{ [key]: value }}>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+      </List>
+    </Container>
+  ))
+}
+
+export const Default = (args) => {
+  const { itemIcon, mixedIcons, iconColor } = args
+  return (
+    <List {...args}>
+      <List.Item iconColor={iconColor} icon={itemIcon}>
+        Some Item
+      </List.Item>
+      <List.Item iconColor={iconColor} icon={!mixedIcons ? itemIcon : null}>
+        Some Item
+      </List.Item>
+      <List.Item iconColor={iconColor} icon={!mixedIcons ? itemIcon : null}>
+        Some Item
+      </List.Item>
+      <List.Item iconColor={iconColor} icon={itemIcon}>
+        Some Item
+      </List.Item>
+    </List>
+  )
+}
+Default.storyName = 'Default'
+
+export const Variants = Template.bind({})
+
+export const WithIcon = (args) => {
+  return (
+    <List {...args} variant={{ size: 'medium' }}>
+      <List.Item iconColor="green" icon={Checkmark}>
+        Some Item
+      </List.Item>
+      <List.Item>No Icon</List.Item>
+      <List.Item icon={ThumbsUp}>Different Icon</List.Item>
+    </List>
+  )
+}
+
+export const WithDivider = (args) => {
+  return (
+    <List {...args} showDivider>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography>Change the icon</Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography>Change the icon</Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography>Change the icon</Typography>
+      </List.Item>
+    </List>
+  )
+}
+
+export const WithHeadingAndDivider = (args) => {
+  return (
+    <List {...args} showDivider>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography variant={{ bold: true }}>Watch in glorious HD TV</Typography>
+        <Typography>
+          Optik TV puts you in the middle of the action, with the highest picture quality available.
+        </Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography variant={{ bold: true }}>Must use TELUS purple</Typography>
+        <Typography>
+          With a PVR capacity of 400 hours for HD and 100 hours for 4K, you’ll have lots of time to
+          catch up.
+        </Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography variant={{ bold: true }}>Emphasize points</Typography>
+        <Typography>
+          Did life get in the way of the game? Did you miss it all together? Replay up to 30 hours
+          after it’s aired.
+        </Typography>
+      </List.Item>
+    </List>
+  )
+}

package/stories/Modal/Modal.stories.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+
+import { Button, Modal, Spacer, Typography } from '../../lib'
+
+export default {
+  title: 'Base/Modal',
+  component: Modal
+}
+
+export const Default = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isMaxWidthOpen, setIsMaxWidthOpen] = useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setIsOpen(true)}>Open modal</Button>
+      <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Typography>Test content</Typography>
+      </Modal>
+      <Spacer space={3} />
+      <Button onPress={() => setIsMaxWidthOpen(true)}>Open maxWidth modal</Button>
+      <Modal {...args} isOpen={isMaxWidthOpen} onClose={() => setIsMaxWidthOpen(false)} maxWidth>
+        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
+        <Typography>Test content</Typography>
+      </Modal>
+    </>
+  )
+}
+Default.storyName = 'Modal'