@telus-uds/components-base 0.0.2-prerelease.3 → 0.0.2-prerelease.7

package/stories/InputLabel/InputLabel.stories.jsx

@@ -0,0 +1,42 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import InputLabel from '../../lib/InputLabel/InputLabel'
+
+export default {
+  title: 'Base/InputLabel',
+  component: InputLabel
+}
+
+export const Default = () => <InputLabel label="Test label" />
+
+export const HintInline = () => (
+  <InputLabel label="Test label" hint="Short hint" hintPosition="inline" />
+)
+
+export const HintAndTooltip = () => (
+  <InputLabel
+    label="Test label"
+    hint="Short hint"
+    hintPosition="inline"
+    tooltip="This is the tooltip's content"
+  />
+)
+
+export const HintInlineLong = () => (
+  <InputLabel
+    label="Test label"
+    hint="A rather long hint that won't actually fit"
+    hintPosition="inline"
+    tooltip="This is the tooltip's content"
+  />
+)
+
+export const HintBelow = () => (
+  <InputLabel
+    label="Test label"
+    hint="A rather long hint that won't actually fit"
+    hintPosition="below"
+    tooltip="This is the tooltip's content"
+  />
+)

package/stories/Link/ChevronLink.stories.jsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 
 import { ChevronLink } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/ChevronLink',
@@ -26,7 +27,22 @@ const Template = (args) => {
     .filter((exists) => exists)
 }
 
-export const ChevronLinkRight = Template.bind({})
+export const Default = (args) => <ChevronLink {...args} />
+Default.storyName = 'ChevronLink'
+Default.args = { children: "I'm a chevron link" }
 
-export const ChevronLinkLeft = Template.bind({})
-ChevronLinkLeft.args = { direction: 'left' }
+export const RightDirection = Template.bind({})
+
+export const LeftDirection = Template.bind({})
+LeftDirection.args = { direction: 'left' }
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Link" {...args}>
+    {({ label, variant }) => (
+      <ChevronLink {...args} variant={variant}>
+        {label}
+      </ChevronLink>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Link/Link.stories.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } from 'react-native'
 
@@ -5,8 +6,8 @@ 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 { Link, variantProp } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Link, Typography, variantProp } from '../../lib'
+import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/Link',
@@ -47,7 +48,11 @@ const EveryIconTemplate = (args) => (
   </View>
 )
 
-export const Regular = Template.bind({})
+export const Default = (args) => <Link {...args} />
+Default.storyName = 'Link'
+Default.args = { children: "I'm a link" }
+
+export const Variants = Template.bind({})
 
 export const IconLeft = Template.bind({})
 IconLeft.args = { icon: SampleIcon, iconPosition: 'left' }
@@ -56,3 +61,34 @@ export const IconRight = Template.bind({})
 IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
 
 export const EveryIcon = EveryIconTemplate.bind({})
+
+export const InText = (args) => (
+  <Typography>
+    Some text containing a{' '}
+    <Link icon={SampleIcon} iconPosition="left" {...args}>
+      left icon link
+    </Link>
+    , alongside a{' '}
+    <Link icon={SampleIcon} 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}>
+    {({ label, variant }) => (
+      <Link {...args} key={label} variant={variant}>
+        {label}
+      </Link>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+
+export const IconLeftParentTypes = ParentTypes.bind({})
+IconLeftParentTypes.args = { ...IconLeft.args }
+
+export const IconRightParentTypes = ParentTypes.bind({})
+IconRightParentTypes.args = { ...IconRight.args }

package/stories/Link/TextButton.stories.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } from 'react-native'
 
@@ -6,7 +7,7 @@ import { View } from 'react-native'
 import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
 
 import { TextButton, variantProp } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/TextButton',
@@ -46,7 +47,11 @@ const EveryIconTemplate = (args) => (
   </View>
 )
 
-export const Regular = Template.bind({})
+export const Default = (args) => <TextButton {...args} />
+Default.storyName = 'TextButton'
+Default.args = { children: "I'm a button that looks like a link" }
+
+export const Variants = Template.bind({})
 
 export const IconLeft = Template.bind({})
 IconLeft.args = { icon: SampleIcon }
@@ -55,3 +60,20 @@ export const IconRight = Template.bind({})
 IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
 
 export const EveryIcon = EveryIconTemplate.bind({})
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Link" {...args}>
+    {({ label, variant }) => (
+      <TextButton {...args} key={label} variant={variant}>
+        {label}
+      </TextButton>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+
+export const IconLeftParentTypes = ParentTypes.bind({})
+IconLeftParentTypes.args = { ...IconLeft.args }
+
+export const IconRightParentTypes = ParentTypes.bind({})
+IconRightParentTypes.args = { ...IconRight.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/Pagination/Pagination.stories.jsx

@@ -1,26 +1,26 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 
 import { Pagination, Typography } from '../../lib'
-import { Container } from '../supports'
+import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/Pagination',
   component: Pagination
 }
 
-export const Default = () => (
-  <>
-    <Pagination>
-      <Pagination.PageButton href="#test" hrefAttrs={{ target: '_blank' }} />
-      <Pagination.PageButton onPress={() => {}} isActive />
-      <Pagination.PageButton onPress={() => {}} />
-      <Pagination.PageButton onPress={() => {}} />
-    </Pagination>
-  </>
+export const Default = (args) => (
+  <Pagination {...args}>
+    <Pagination.PageButton href="#test" hrefAttrs={{ target: '_blank' }} />
+    <Pagination.PageButton onPress={() => {}} isActive />
+    <Pagination.PageButton onPress={() => {}} />
+    <Pagination.PageButton onPress={() => {}} />
+  </Pagination>
 )
+Default.storyName = 'Pagination'
 
-// eslint-disable-next-line react/no-multi-comp
-export const LocalTabs = () => {
+export const LocalTabs = ({ label, ...args }) => {
   const [activeItemIndex, setActiveItemIndex] = useState(0)
 
   const items = []
@@ -29,13 +29,16 @@ export const LocalTabs = () => {
     items.push(`Panel ${i + 1}`)
   }
 
+  const activeItem = items[activeItemIndex]
+  const labelText = label ? `${activeItem} (${label}). ` : activeItem
+
   /* eslint-disable react/no-array-index-key */
   return (
     <>
       <Container>
-        <Typography>{items[activeItemIndex]}</Typography>
+        <Typography>{labelText}</Typography>
       </Container>
-      <Pagination>
+      <Pagination {...args}>
         {items.map((item, index) => (
           <Pagination.PageButton
             key={index}
@@ -48,3 +51,14 @@ export const LocalTabs = () => {
   )
   /* eslint-enable react/no-array-index-key */
 }
+LocalTabs.propTypes = {
+  ...Pagination.propTypes,
+  label: PropTypes.string
+}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Pagination" {...args}>
+    {({ label, variant }) => <LocalTabs {...args} variant={variant} label={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Radio/Radio.stories.jsx

@@ -0,0 +1,113 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+
+import { Radio, StackView, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/Radio',
+  component: Radio,
+  argTypes: {
+    checked: {
+      control: { type: 'radio' },
+      options: [true, false, undefined]
+    }
+  },
+  args: {
+    label: 'Radio',
+    checked: undefined
+  }
+}
+
+const Template = (args) => (
+  <Container>
+    <Radio {...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 WithDescription = Template.bind({})
+WithDescription.argTypes = {
+  description: { table: { disable: true } }
+}
+WithDescription.args = {
+  description: 'This is a description'
+}
+
+export const RadioGroup = (args) => {
+  const [value, setValue] = useState(1)
+  const handleChange = (val) => () => setValue(val)
+
+  return (
+    <Container>
+      <StackView accessibilityRole="radiogroup">
+        <Radio
+          {...args}
+          checked={value === 1}
+          label="Radio1"
+          onChange={handleChange(1)}
+          name="group"
+          value={1}
+        />
+        <Radio
+          {...args}
+          checked={value === 2}
+          label="Radio2"
+          onChange={handleChange(2)}
+          name="group"
+          value={2}
+        />
+        <Radio
+          {...args}
+          checked={value === 3}
+          label="Radio3"
+          onChange={handleChange(3)}
+          name="group"
+          value={3}
+        />
+      </StackView>
+    </Container>
+  )
+}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Radio" {...args}>
+    {({ label, variant }) => (
+      <Container key={label}>
+        <Typography>{`${label} `}</Typography>
+        <Radio
+          {...args}
+          defaultChecked={false}
+          name="parentTypes"
+          value={label}
+          variant={variant}
+        />
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = {
+  defaultChecked: undefined
+}

package/stories/Select/Select.stories.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { Text } from 'react-native'
+
+import { Select } from '../../lib'
+
+export default {
+  title: 'Base/Select',
+  component: Select
+}
+
+const Template = (args) => (
+  <Select {...args}>
+    <Select.Item value="root-item-1">Root item 1</Select.Item>
+    <Select.Item value="root-item-2">Root item 2</Select.Item>
+    <Select.Group label="Group label">
+      <Select.Item value="group-item-1">Group item 1</Select.Item>
+      <Select.Item value="group-item-2">Group item 2</Select.Item>
+    </Select.Group>
+    <Select.Item value="root-item-3">Root item 3</Select.Item>
+  </Select>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Label',
+  hint: 'This is the hint (below)',
+  hintPosition: 'below',
+  tooltip: 'This is the tooltip content',
+  feedback: 'Some instructional feedback'
+}
+
+export const Inactive = Template.bind({})
+Inactive.args = { inactive: true }
+
+export const Placeholder = Template.bind({})
+Placeholder.args = { placeholder: 'Please select an item...' }
+
+export const Error = Template.bind({})
+Error.args = { validation: 'error' }
+export const Success = Template.bind({})
+Success.args = { validation: 'success' }
+
+export const Uncontrolled = Template.bind({})
+Uncontrolled.args = { initialValue: 'root-item-3' }
+
+// eslint-disable-next-line react/no-multi-comp
+export const Controlled = () => {
+  const [value, setValue] = useState('root-item-3')
+  return (
+    <>
+      <Template value={value} onChange={setValue} />
+      <Text>Value is: {value}</Text>
+    </>
+  )
+}

package/stories/SideNav/SideNav.stories.jsx

@@ -1,14 +1,17 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
+import PropTypes from 'prop-types'
 import { SideNav } from '../../lib'
+import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/SideNav',
   component: SideNav
 }
 
-const Template = (args) => (
+const Template = ({ label = 'Level 1 - 1', ...args }) => (
   <SideNav {...args}>
-    <SideNav.Item href="#level-1-1">Level 1 - 1</SideNav.Item>
+    <SideNav.Item href="#level-1-1">{label}</SideNav.Item>
     <SideNav.ItemsGroup label="Group 1">
       <SideNav.Item href="#level-2-1">Level 2 - 1</SideNav.Item>
       <SideNav.Item href="#level-2-2">Level 2 - 2</SideNav.Item>
@@ -20,8 +23,20 @@ const Template = (args) => (
     </SideNav.ItemsGroup>
   </SideNav>
 )
+Template.propTypes = {
+  ...SideNav.propTypes,
+  label: PropTypes.string
+}
 
 export const Default = Template.bind({})
+Default.storyName = 'SideNav'
 
 export const NonAccordion = Template.bind({})
 NonAccordion.args = { accordion: false }
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="SideNav" {...args}>
+    {({ label, variant }) => <Template {...args} variant={variant} label={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Skeleton/Skeleton.stories.jsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import StackView from '../../lib/StackView'
+
+import { Skeleton } from '../../lib'
+
+export default {
+  title: 'Base/Skeleton',
+  component: Skeleton
+}
+
+export const Default = (args) => <Skeleton {...args} lines={8} />
+
+export const Circle = (args) => <Skeleton {...args} size={20} shape="circle" />
+
+export const Box = (args) => <Skeleton {...args} size={20} shape="box" />
+
+export const Component = (args) => (
+  <StackView space={2} direction="row">
+    <View style={style.cardContainer}>
+      <Skeleton {...args} size={10} shape="circle" />
+      <Skeleton size={4} characters={3} />
+    </View>
+    <Skeleton {...args} lines={6} />
+  </StackView>
+)
+
+const style = StyleSheet.create({
+  cardContainer: {
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+})
+
+Default.storyName = 'Skeleton'

package/stories/Spacer/Spacer.stories.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Spacer, Typography } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Spacer',
+  component: Spacer
+}
+
+export const Default = (args) => <Spacer {...args} />
+Default.storyName = 'Spacer'
+
+export const InColumn = (args) => (
+  <>
+    <Container margin={0} offWhite>
+      <Typography>First item, before spacer.</Typography>
+    </Container>
+    <Spacer {...args} />
+    <Container margin={0} offWhite>
+      <Typography>Second item, after spacer.</Typography>
+    </Container>
+  </>
+)
+InColumn.args = { space: 2 }
+
+export const InRow = (args) => (
+  <View style={styles.row}>
+    <InColumn {...args} />
+  </View>
+)
+InRow.args = { space: 2 }
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row' }
+})