@telus-uds/components-base 1.7.0 → 1.8.1

package/stories/Skeleton/Skeleton.stories.jsx

@@ -1,36 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import StackView from '../../src/StackView'
-
-import { Skeleton } from '../../src'
-
-export default {
-  title: '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

@@ -1,38 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { Spacer, Typography } from '../../src'
-import { Container } from '../supports'
-
-export default {
-  title: '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' }
-})

package/stories/StackView/StackView.stories.jsx

@@ -1,75 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import { StackView, Card, Typography, Button } from '../../src'
-
-export default {
-  title: 'StackView',
-  component: StackView
-}
-
-const content = (
-  <>
-    <Card>
-      <Typography>First item.</Typography>
-    </Card>
-    <Card>
-      <Typography>Second item.</Typography>
-      <Typography>Has two lines.</Typography>
-    </Card>
-    <Card>
-      <Typography>Third item.</Typography>
-      <Typography>This one is longer.</Typography>
-      <Typography>It has three lines.</Typography>
-    </Card>
-    <Button onPress={() => {}}>Different item</Button>
-  </>
-)
-
-export const Default = (args) => <StackView {...args} />
-Default.storyName = 'StackView'
-Default.args = { children: content }
-// By default the JSX object is shown as a huge human-unreadable JSON tree control; turn it off
-Default.argTypes = { children: { control: { disable: true } } }
-
-export const Tokens = ({ flexGrow, alignItems, justifyContent, ...args }) => (
-  <View
-    style={{
-      flexGrow,
-      flexDirection: args.direction,
-      alignItems,
-      justifyContent
-    }}
-  >
-    <StackView {...args}>{content}</StackView>
-  </View>
-)
-Tokens.args = { inherit: true, space: 4, direction: 'row' }
-Tokens.parameters = {
-  docs: {
-    storyDescription:
-      "A set of common layout styles may be set using the `tokens` prop, and selected from a parent theme using `selectTokens('StackView', themeTokens)`."
-  }
-}
-Tokens.propTypes = {
-  flexGrow: PropTypes.number,
-  alignItems: PropTypes.string,
-  justifyContent: PropTypes.string
-}
-Tokens.argTypes = {
-  flexGrow: { type: 'number', defaultValue: 1 },
-  alignItems: { type: 'string', defaultValue: 'flex-end' },
-  justifyContent: { type: 'string', defaultValue: 'flex-end' }
-}
-
-export const Responsive = (args) => (
-  <StackView
-    {...args}
-    direction={{ sm: 'column-reverse', md: 'row', lg: 'row-reverse' }}
-    tokens={({ viewport }) => viewport === 'xl' && { justifyContent: 'space-around' }}
-  >
-    {content}
-  </StackView>
-)

package/stories/StackView/StackWrap.stories.jsx

@@ -1,64 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { StackWrap, Button } from '../../src'
-
-export default {
-  title: 'StackWrap',
-  component: StackWrap
-}
-
-// Mixed length labels
-const labels = ['Button ', 'Longer label ', '#', 'Mid-length ']
-
-const getLabels = (length) =>
-  Array(length)
-    .fill('')
-    .map((_, index) => `${labels[index % 4]}${index}`)
-
-export const Default = (args) => <StackWrap {...args} />
-Default.storyName = 'StackWrap'
-Default.args = {
-  children: getLabels(15).map((label) => (
-    <Button onPress={() => {}} key={label}>
-      {label}
-    </Button>
-  )),
-  // Storybook does a bad job picking these up automatically due to the indirection; make them easy to edit
-  space: 1,
-  gap: 1,
-  tokens: {}
-}
-// By default the JSX object is shown as a huge human-unreadable JSON tree control; turn it off
-Default.argTypes = { children: { control: { disable: true } } }
-
-export const Column = (args) => (
-  <View style={styles.constrainedHeight}>
-    <StackWrap {...args} />
-  </View>
-)
-Column.args = {
-  ...Default.args,
-  direction: 'column'
-}
-Column.argTypes = { ...Default.argTypes }
-
-export const Responsive = (args) => (
-  <View style={styles.constrainedHeight}>
-    <StackWrap
-      {...args}
-      direction={{ sm: 'column-reverse', md: 'column', lg: 'row-reverse', xl: 'row' }}
-      tokens={({ viewport }) => viewport === 'xl' && { justifyContent: 'space-around' }}
-    />
-  </View>
-)
-Responsive.args = { ...Default.args }
-Responsive.argTypes = { ...Default.argTypes }
-
-const styles = StyleSheet.create({
-  constrainedHeight: {
-    height: 350,
-    alignItems: 'flex-start'
-  }
-})

package/stories/StepTracker/StepTracker.stories.jsx

@@ -1,71 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-
-import { Box, Button, StackView, StepTracker } from '../../src'
-
-const steps = [
-  'Plans & Addons',
-  'Account Creation',
-  'Payment Setup',
-  'Shipping Address',
-  'Billing Address',
-  'Submit'
-]
-const longTitle = 'Example of a really long step title that wraps'
-
-export default {
-  title: 'StepTracker',
-  component: StepTracker,
-  args: {
-    steps
-  },
-  argTypes: { current: { control: { type: 'range', max: steps.length } } }
-}
-
-const Template = (args) => <StepTracker {...args} />
-
-export const Default = Template.bind({})
-
-export const WithoutStepLabels = Template.bind({})
-WithoutStepLabels.args = {
-  tokens: { showStepTrackerLabel: true, showStepLabel: false }
-}
-
-export const WithHiddenStepName = Template.bind({})
-WithHiddenStepName.args = {
-  tokens: { showStepTrackerLabel: false, showStepLabel: true, showStepName: false }
-}
-
-export const WithLongStepTitle = Template.bind({})
-WithLongStepTitle.args = {
-  steps: Object.values({ ...steps, 2: longTitle }),
-  tokens: { showStepTrackerLabel: false, showStepLabel: true }
-}
-
-export const WithControls = (args) => {
-  const [current, setCurrent] = useState(0)
-  const isFirst = current === 0
-  const isLast = current === steps.length - 1
-  const handlePrev = () => {
-    if (!isFirst) setCurrent(current - 1)
-  }
-  const handleNext = () => {
-    if (!isLast) setCurrent(current + 1)
-  }
-
-  return (
-    <StackView>
-      <StepTracker {...args} current={current} />
-      <Box top={4}>
-        <StackView direction="row" tokens={{ justifyContent: 'space-around' }}>
-          <Button onPress={handlePrev} disabled={isFirst}>
-            Previous
-          </Button>
-          <Button onPress={handleNext} disabled={isLast}>
-            Next
-          </Button>
-        </StackView>
-      </Box>
-    </StackView>
-  )
-}

package/stories/Tabs/Tabs.stories.jsx

@@ -1,97 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import { Platform } from 'react-native'
-
-import { Link, StackView, Tabs, Typography } from '../../src'
-
-export default {
-  title: 'Tabs',
-  component: Tabs
-}
-
-export const Default = (args) => <Tabs {...args} />
-Default.storyName = 'Tabs'
-Default.args = {
-  items: [
-    { label: 'First item' },
-    { label: 'Second item' },
-    { label: 'Much longer third item' },
-    { label: 'Fourth item' },
-    { label: 'Fifth item' },
-    { label: 'Sixth item' },
-    { label: 'Seventh item' },
-    { label: 'Eighth item' },
-    { label: 'Ninth item' }
-  ]
-}
-
-export const TabsWithHref = (args) => <Tabs {...args} />
-TabsWithHref.args = {
-  items: [
-    { href: 'https://telus.com', label: 'First item' },
-    { href: 'https://telus.com', label: 'Second item' },
-    { href: 'https://telus.com', label: 'Much longer third item' },
-    { href: 'https://telus.com', label: 'Fourth item' },
-    { href: 'https://telus.com', label: 'Fifth item' },
-    { href: 'https://telus.com', label: 'Sixth item' },
-    { href: 'https://telus.com', label: 'Seventh item' },
-    { href: 'https://telus.com', label: 'Eighth item' },
-    { href: 'https://telus.com', label: 'Ninth item' }
-  ]
-}
-
-const loremIpsumArray = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. '
-  .repeat(5)
-  .split('. ')
-
-export const TabsControlled = (args) => {
-  const [page, setPage] = useState('1')
-
-  return (
-    <StackView space={4}>
-      <Tabs {...args} value={page} onChange={setPage} />
-      <Typography>This is some sample content for page {page}.</Typography>
-      <Typography>
-        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
-      </Typography>
-    </StackView>
-  )
-}
-TabsControlled.args = {
-  items: [
-    { id: '1', label: 'First item' },
-    { id: '2', label: 'Second item' },
-    { id: '3', label: 'Much longer third item' },
-    { id: '4', label: 'Fourth item' },
-    { id: '5', label: 'Fifth item' },
-    { id: '6', label: 'Sixth item' },
-    { id: '7', label: 'Seventh item' },
-    { id: '8', label: 'Eighth item' },
-    { id: '9', label: 'Ninth item' }
-  ]
-}
-
-export const TabsControlledHashes = ({ items, ...args }) => {
-  const [page, setPage] = useState('1')
-  if (Platform.OS !== 'web') return <Typography>Hashes are only supported on Web.</Typography>
-  const linkTarget = Number(page) >= items.length ? '#item1' : `#item${Number(page) + 1}`
-  return (
-    <StackView space={4}>
-      <Tabs {...args} items={items} value={page} onChange={setPage} />
-      <Typography>
-        This is some sample content for page {page}. Try this ordinary hash link to{' '}
-        <Link href={linkTarget}>{linkTarget}</Link>.
-      </Typography>
-      <Typography>
-        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
-      </Typography>
-    </StackView>
-  )
-}
-TabsControlledHashes.propTypes = Tabs.propTypes
-TabsControlledHashes.args = {
-  items: TabsControlled.args.items.map((item) => ({
-    ...item,
-    href: `#item${item.id}`
-  }))
-}

package/stories/Tags/Tags.stories.jsx

@@ -1,69 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import { View } from 'react-native'
-import { Tags, Typography } from '../../src'
-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: '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

@@ -1,101 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState } from 'react'
-
-import { TextArea } from '../../src'
-import { Container } from '../supports'
-
-export default {
-  title: '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/TextInput/TextInput.stories.jsx

@@ -1,141 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-import { Platform } from 'react-native'
-
-import { TextInput, Typography } from '../../src'
-import { Container } from '../supports'
-
-export default {
-  title: 'TextInput',
-  component: TextInput
-}
-
-/* eslint-disable react/no-multi-comp */
-
-const Template = (args) => (
-  <Container>
-    <TextInput {...args} />
-  </Container>
-)
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Label'
-}
-
-export const WithHint = () => {
-  return (
-    <>
-      <Container>
-        <TextInput label="Label" hint="An inline hint" tooltip="Tooltip content" />
-      </Container>
-      <Container>
-        <TextInput
-          label="Label"
-          hint="A usually much longer hint below"
-          hintPosition="below"
-          tooltip="Tooltip content"
-        />
-      </Container>
-    </>
-  )
-}
-
-export const WithFeedback = () => {
-  return (
-    <>
-      <Container>
-        <TextInput label="Instructional" feedback="An instructional feedback" />
-      </Container>
-      <Container>
-        <TextInput label="Success" validation="success" feedback="A detailed success message" />
-      </Container>
-      <Container>
-        <TextInput label="Error" validation="error" feedback="A detailed error message" />
-      </Container>
-    </>
-  )
-}
-
-export const InactiveAndReadOnly = () => {
-  return (
-    <>
-      <Container>
-        <TextInput label="Inactive" inactive initialValue="can't touch this" />
-      </Container>
-      <Container>
-        <TextInput 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>
-        <TextInput
-          label="Controlled"
-          validation={validation}
-          feedback={feedback}
-          value={value}
-          onChange={setValue}
-        />
-      </Container>
-    </>
-  )
-}
-
-export const WithPattern = (args) => {
-  const [value, setValue] = useState('')
-  const inputRef = useRef(null)
-  const isEmpty = value === ''
-  const isSuccess = !isEmpty && inputRef.current.checkValidity()
-  // eslint-disable-next-line no-nested-ternary
-  const validation = isEmpty ? undefined : isSuccess ? 'success' : 'error'
-  const { pattern } = args
-  // eslint-disable-next-line no-nested-ternary
-  const feedback = isEmpty
-    ? `Enter value matching pattern: ${pattern}`
-    : isSuccess
-    ? `Success! Value matches pattern: ${pattern}`
-    : `Error! Value must match pattern: ${pattern}`
-  if (Platform.OS !== 'web') {
-    return <Typography>Pattern prop is only supported on web</Typography>
-  }
-  return (
-    <>
-      <Container>
-        <TextInput
-          {...args}
-          ref={inputRef}
-          label="Pattern"
-          validation={validation}
-          feedback={feedback}
-          value={value}
-          onChange={setValue}
-        />
-      </Container>
-    </>
-  )
-}
-WithPattern.args = {
-  pattern: '[1-9]{2}'
-}