@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/stories/Button/ButtonLink.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ButtonLink } from '../../lib'
+import { ButtonLink } from '../../src'
 import { Container, useVariants } from '../supports'
 
 export default {

package/stories/Card/Card.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { Card } from '../../lib'
+import { Card } from '../../src'
 import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {

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 '../../src'
+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/Divider/Divider.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Divider, Typography } from '../../lib'
+import { Divider, Typography } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/ExpandCollapse/ExpandCollapse.stories.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Accordion, ButtonGroup, ExpandCollapse, StackView, Typography } from '../../lib'
+import { Accordion, ButtonGroup, ExpandCollapse, StackView, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
-import { useMultipleInputValues } from '../../lib/utils'
+import { useMultipleInputValues } from '../../src/utils'
 
 export default {
   title: 'Base/ExpandCollapse',

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 '../../src'
 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/FlexGrid/01 FlexGrid.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { FlexGrid } from '../../lib'
+import { FlexGrid } from '../../src'
 import { Placeholder, EachParentType, parentTypesParams } from '../supports'
 
 const { Row, Col } = FlexGrid

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { FlexGrid } from '../../lib'
+import { FlexGrid } from '../../src'
 import { Placeholder } from '../supports'
 
 const { Row, Col } = FlexGrid

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { FlexGrid } from '../../lib'
+import { FlexGrid } from '../../src'
 import { Placeholder } from '../supports'
 
 const { Row, Col } = FlexGrid

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 '../../src'
 
 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 '../../src'
+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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import InputLabel from '../../lib/InputLabel/InputLabel'
+import InputLabel from '../../src/InputLabel/InputLabel'
 
 export default {
   title: 'Base/InputLabel',

package/stories/Link/ChevronLink.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { ChevronLink } from '../../lib'
+import { ChevronLink } from '../../src'
 import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {

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 '../../src'
+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/Link/TextButton.stories.jsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
 
-import { TextButton, variantProp } from '../../lib'
+import { TextButton, variantProp } from '../../src'
 import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
 
 export default {

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 '../../src'
+
+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 '../../src'
+
+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'

package/stories/Notification/Notification.stories.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { Text } from 'react-native'
+
+import { Link, Notification, Typography } from '../../src'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Notification',
+  component: Notification
+}
+
+const Template = (args) => <Notification {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: 'Your password was updated successfully.'
+}
+
+export const Variants = () => {
+  const variants = [{}, { style: 'success' }, { style: 'warning' }, { style: 'error' }]
+  const propSets = [
+    {},
+    { system: true },
+    { dismissible: true },
+    { system: true, dismissible: true }
+  ]
+
+  const combinations = variants.flatMap((variant) => {
+    return propSets.map((propSet) => ({ variant, ...propSet }))
+  })
+
+  return combinations.map((props) => {
+    const label = [
+      props.variant.style ?? 'default',
+      props.system && 'system',
+      props.dismissible && 'dismissible'
+    ]
+      .filter((value) => value)
+      .join(' ')
+
+    return (
+      <Container key={label}>
+        <Text>{label}</Text>
+        <Notification {...props}>
+          Tip: These services are best suited for large business organizations. Order products and
+          services at TELUS.com.
+        </Notification>
+      </Container>
+    )
+  })
+}
+
+export const ContentTypes = () => {
+  return (
+    <>
+      <Container>
+        <Notification>A regular string content.</Notification>
+      </Container>
+      <Container>
+        <Notification>
+          <Typography>
+            Text components content. <Link href="https://telus.com/uds">Combined with a link.</Link>
+          </Typography>
+        </Notification>
+      </Container>
+      <Container>
+        <Notification variant={{ customVariant: true }}>
+          {({ textStyles, variant }) => (
+            <Text style={textStyles}>
+              A render function, to apply component styles and variant ({Object.keys(variant)[0]})
+              to Text and{' '}
+              <Link href="https://telus.com/uds" tokens={{ color: textStyles.color }}>
+                Link
+              </Link>
+            </Text>
+          )}
+        </Notification>
+      </Container>
+    </>
+  )
+}

package/stories/Pagination/Pagination.stories.jsx

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { Pagination, Typography } from '../../lib'
+import { Pagination, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {