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

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/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/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/Tags/Tags.stories.jsx

@@ -0,0 +1,69 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { View } from 'react-native'
+import { Tags, Typography } from '../../lib'
+import { Container } from '../supports'
+
+const defaultArgs = {
+  items: [
+    { label: 'First item', id: 'first' },
+    { label: 'Second item', id: 'second' },
+    { label: 'Third item', id: 'third' },
+    { label: 'Fourth item', id: 'fourth' },
+    { label: 'Fifth item', id: 'fifth' },
+    { label: 'Sixth item', id: 'sixth' }
+  ],
+  initialValues: ['second', 'fourth']
+}
+const defaultControlledArgs = {
+  ...defaultArgs,
+  values: defaultArgs.initialValues,
+  initialValues: undefined
+}
+
+export default {
+  title: 'Base/Tags',
+  component: Tags,
+  args: {
+    ...defaultArgs
+  }
+}
+
+const UncontrolledTemplate = (args) => <Tags {...args} />
+UncontrolledTemplate.propTypes = Tags.propTypes
+
+const ControlledTemplate = ({ values, ...args }) => {
+  // Simulate saving and retrieving data from a server
+  const [isSaving, setIsSaving] = useState(false)
+  const [currentValues, setValues] = useState(values)
+  const handleChange = (newValue) => {
+    setIsSaving(true)
+    setTimeout(() => {
+      setValues(newValue)
+      setIsSaving(false)
+    }, 400)
+  }
+
+  const text = isSaving ? 'Saving...' : `Saved selected tags: "${currentValues.join('", "')}".`
+  return (
+    <View>
+      <Container padding={4} margin={0}>
+        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
+      </Container>
+      <Container padding={4} margin={0}>
+        <Tags {...args} values={currentValues} onChange={handleChange} />
+      </Container>
+    </View>
+  )
+}
+
+ControlledTemplate.propTypes = Tags.propTypes
+
+export const Default = UncontrolledTemplate.bind({})
+Default.storyName = 'Tags'
+
+export const TagsControlled = ControlledTemplate.bind({})
+TagsControlled.args = { ...defaultControlledArgs }
+
+export const TagsInactive = UncontrolledTemplate.bind({})
+TagsInactive.args = { inactive: true }

package/stories/TextInput/TextArea.stories.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+
+import { TextArea } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/TextArea',
+  component: TextArea
+}
+
+const Template = (args) => <TextArea {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Label',
+  hint: 'This is a hint',
+  tooltip: 'This is a tooltip',
+  feedback: 'This is the feedback'
+}
+
+export const WithHint = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Label" hint="An inline hint" tooltip="Tooltip content" />
+      </Container>
+      <Container>
+        <TextArea
+          label="Label"
+          hint="A usually much longer hint below"
+          hintPosition="below"
+          tooltip="Tooltip content"
+        />
+      </Container>
+    </>
+  )
+}
+
+export const WithFeedback = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Instructional" feedback="An instructional feedback" />
+      </Container>
+      <Container>
+        <TextArea label="Success" validation="success" feedback="A detailed success message" />
+      </Container>
+      <Container>
+        <TextArea label="Error" validation="error" feedback="A detailed error message" />
+      </Container>
+    </>
+  )
+}
+
+export const InactiveAndReadOnly = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Inactive" inactive initialValue="can't touch this" />
+      </Container>
+      <Container>
+        <TextArea label="Read only" readOnly value="won't change" />
+      </Container>
+    </>
+  )
+}
+
+export const Controlled = () => {
+  const [value, setValue] = useState('')
+  const [validation, setValidation] = useState()
+
+  useEffect(() => {
+    if (value !== undefined && value.length > 0)
+      setValidation(value.length < 6 ? 'success' : 'error')
+  }, [value])
+
+  const defaultFeedbackContent =
+    'Will show an error if longer than 6 characters and success otherwise'
+
+  const feedbackContent = {
+    error: 'The value must be shorter than 6 characters',
+    success: 'Yay! The value has less than 6 characters'
+  }
+
+  const feedback = validation === undefined ? defaultFeedbackContent : feedbackContent[validation]
+
+  return (
+    <>
+      <Container>
+        <TextArea
+          label="Controlled"
+          validation={validation}
+          feedback={feedback}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    </>
+  )
+}

package/stories/supports.jsx

@@ -150,7 +150,7 @@ export const useVariants = (componentName) => {
   }
 
   const variants = Object.entries(appearances).reduce(
-    (pairs, [key, { values, type }]) =>
+    (pairs, [key, { values, type } = {}]) =>
       type === 'variant'
         ? [...pairs, ...values.map((value) => [key, value, getVariantLabel(key, value)])]
         : pairs,