@telus-uds/components-base 1.7.1 → 1.8.2

package/stories/Button/ButtonGroup.stories.jsx

@@ -1,81 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import { View } from 'react-native'
-import { ButtonGroup, 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: 'ButtonGroup',
-  component: ButtonGroup,
-  args: {
-    ...defaultArgs
-  }
-}
-
-const UncontrolledTemplate = (args) => <ButtonGroup {...args} />
-UncontrolledTemplate.propTypes = ButtonGroup.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 IDs: "${currentValues.join('", "')}".`
-  return (
-    <View>
-      <Container padding={4} margin={0}>
-        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
-      </Container>
-      <Container padding={4} margin={0}>
-        <ButtonGroup {...args} values={currentValues} onChange={handleChange} />
-      </Container>
-    </View>
-  )
-}
-
-ControlledTemplate.propTypes = ButtonGroup.propTypes
-
-export const Default = UncontrolledTemplate.bind({})
-Default.storyName = 'ButtonGroup'
-
-export const ButtonGroupMaxThree = UncontrolledTemplate.bind({})
-ButtonGroupMaxThree.args = { maxValues: 3 }
-
-export const ButtonGroupMaxUnlimited = UncontrolledTemplate.bind({})
-ButtonGroupMaxUnlimited.args = { maxValues: null }
-
-export const ButtonGroupControlled = ControlledTemplate.bind({})
-ButtonGroupControlled.args = { ...defaultControlledArgs }
-
-export const ButtonGroupControlledMaxThree = ControlledTemplate.bind({})
-ButtonGroupControlledMaxThree.args = { ...defaultControlledArgs, maxValues: 3 }
-
-export const ButtonGroupControlledMaxUnlimited = ControlledTemplate.bind({})
-ButtonGroupControlledMaxUnlimited.args = { ...defaultControlledArgs, maxValues: null }
-
-export const ButtonGroupInactive = UncontrolledTemplate.bind({})
-ButtonGroupInactive.args = { inactive: true }

package/stories/Button/ButtonLink.stories.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { ButtonLink } from '../../src'
-import { Container, useVariants } from '../supports'
-
-export default {
-  title: 'ButtonLink',
-  component: ButtonLink,
-  args: {
-    children: "I'm a button link",
-    href: 'https://telus.com',
-    target: '_blank',
-    rel: 'nofollow'
-  }
-}
-
-const Template = (args) => {
-  const variants = useVariants('Button')
-  return variants.map(([key, value, label]) => (
-    <Container key={`${key}:${value}`} dark={key === 'inverse'}>
-      <ButtonLink {...args} href="https://telus.com" variant={{ [key]: value }}>
-        {args.label || `ButtonLink ${label}`}
-      </ButtonLink>
-    </Container>
-  ))
-}
-
-export const Default = (args) => <ButtonLink {...args} />
-Default.storyName = 'ButtonLink'
-
-export const Variants = Template.bind({})

package/stories/Card/Card.stories.jsx

@@ -1,62 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-
-import { Card } from '../../src'
-import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'Card',
-  component: Card
-}
-
-const styles = StyleSheet.create({
-  cardContent: {
-    padding: 4,
-    borderWidth: 1,
-    borderColor: '#C12335',
-    borderStyle: 'dashed',
-    backgroundColor: '#FFF6F8'
-  }
-})
-
-export const Default = (args) => (
-  <Card {...args}>
-    <View style={styles.cardContent}>
-      <Text>This is a card</Text>
-    </View>
-  </Card>
-)
-Default.storyName = 'Card'
-Default.argTypes = {
-  children: { table: { disable: true } }
-}
-
-export const CardVariants = (args) => {
-  const variants = useVariants('Card')
-  const cardVariants = variants.map(([key, value, label]) => (
-    <Container key={`${key}:${value}`} padding={16}>
-      <Card {...args} variant={{ [key]: value }}>
-        <View style={styles.cardContent}>
-          <Text>
-            Card with
-            {` ${label}`}
-          </Text>
-        </View>
-      </Card>
-    </Container>
-  ))
-
-  return cardVariants
-}
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="Card" {...args}>
-    {({ label, variant }) => (
-      <Card {...args} variant={variant} key={label}>
-        <Text>{label}</Text>
-      </Card>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams

package/stories/Checkbox/Checkbox.stories.jsx

@@ -1,94 +0,0 @@
-/* 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: '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,68 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { Divider, Typography } from '../../src'
-import { EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'Divider',
-  component: Divider
-}
-
-export const Default = (args) => <Divider {...args} />
-Default.storyName = 'Divider'
-
-const Template = ({ vertical, ...rest }) => (
-  <View style={vertical ? styles.row : styles.column}>
-    <View style={vertical ? styles.contentRow : styles.contentColumn}>
-      <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat aliquam leo ut
-        malesuada. Nunc ornare vel sapien dignissim iaculis.
-      </Typography>
-    </View>
-    <Divider vertical={vertical} {...rest} />
-    <View style={vertical ? styles.contentRow : styles.contentColumn}>
-      <Typography>shorter content</Typography>
-    </View>
-  </View>
-)
-
-Template.propTypes = Divider.propTypes
-
-export const Horizontal = Template.bind({})
-
-export const Vertical = Template.bind({})
-Vertical.args = { vertical: true }
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="Divider" {...args}>
-    {({ label, variant, index }) =>
-      label.match(/Row/) ? (
-        <Typography>{index ? '' : 'Skipping Row examples; see Vertical story. '}</Typography>
-      ) : (
-        <>
-          <Typography>{`"${label}" is below this moderately lengthy text appearing before the Divider.`}</Typography>
-          <Divider {...args} variant={variant} />
-          <Typography>{`"${label}" is above.`}</Typography>
-        </>
-      )
-    }
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row'
-  },
-  column: {
-    flexDirection: 'column'
-  },
-  contentRow: {
-    paddingHorizontal: 16,
-    maxWidth: 200
-  },
-  contentColumn: {
-    paddingVertical: 16
-  }
-})

package/stories/ExpandCollapse/ExpandCollapse.stories.jsx

@@ -1,112 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Accordion, ButtonGroup, ExpandCollapse, StackView, Typography } from '../../src'
-import { Container, EachParentType, parentTypesParams } from '../supports'
-import { useMultipleInputValues } from '../../src/utils'
-
-export default {
-  title: 'ExpandCollapse',
-  component: ExpandCollapse,
-  args: {
-    children: () => {}
-  }
-}
-
-const SimpleText = ({ children, bold }) => (
-  <Typography variant={{ weight: bold ? 'bold' : undefined }}>{children}</Typography>
-)
-SimpleText.propTypes = {
-  bold: PropTypes.bool,
-  children: PropTypes.node
-}
-
-const exampleRenderFunction = (expandProps, label = 'Non-interactive item') => (
-  <StackView divider space={2}>
-    <ExpandCollapse.Panel
-      {...expandProps}
-      panelId="first"
-      control={<SimpleText bold>First panel</SimpleText>}
-    >
-      <SimpleText>Some content within the first panel</SimpleText>
-    </ExpandCollapse.Panel>
-    <ExpandCollapse.Panel
-      {...expandProps}
-      panelId="second"
-      control={<SimpleText bold>Second panel</SimpleText>}
-    >
-      <SimpleText>Some content within the second panel</SimpleText>
-    </ExpandCollapse.Panel>
-    <Container>
-      <SimpleText>{label}</SimpleText>
-    </Container>
-    <ExpandCollapse.Panel
-      {...expandProps}
-      panelId="third"
-      control={<SimpleText bold>Last panel</SimpleText>}
-    >
-      <SimpleText>Some content within the last panel</SimpleText>
-    </ExpandCollapse.Panel>
-  </StackView>
-)
-
-export const Default = (args) => <ExpandCollapse {...args} />
-Default.storyName = 'ExpandCollapse'
-Default.args = { children: exampleRenderFunction }
-
-export const AccordionStory = (args) => <Accordion {...args} />
-AccordionStory.storyName = 'Accordion'
-AccordionStory.args = { children: exampleRenderFunction }
-
-// This is an edge case but TDS's ExpandCollapse only worked in this externally-controlled
-// way, so supporting it cleanly will make transition easier at low cost. Button group
-// demonstrates external control in a visible and easy to understand way.
-export const Controlled = ({ maxOpen = null, ...args }) => {
-  const { currentValues, setValues } = useMultipleInputValues({
-    maxValues: maxOpen
-  })
-  const itemNames = ['one', 'two', 'three', 'four']
-  return (
-    <StackView space={6}>
-      <ButtonGroup
-        items={itemNames.map((item) => ({
-          label: item
-        }))}
-        maxValues={null}
-        values={currentValues}
-        onChange={setValues}
-      />
-      <ExpandCollapse {...args} open={currentValues} onChange={setValues} maxValues={maxOpen}>
-        {(expandProps) => (
-          <StackView divider>
-            {itemNames.map((itemName) => (
-              <ExpandCollapse.Panel
-                {...expandProps}
-                key={itemName}
-                panelId={itemName}
-                control={<SimpleText bold>{itemName}</SimpleText>}
-              >
-                <SimpleText>{`Some content within panel number ${itemName}`}</SimpleText>
-              </ExpandCollapse.Panel>
-            ))}
-          </StackView>
-        )}
-      </ExpandCollapse>
-    </StackView>
-  )
-}
-Controlled.propTypes = {
-  maxOpen: PropTypes.number
-}
-Controlled.args = {}
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="ExpandCollapse" {...args}>
-    {({ label, variant }) => (
-      <ExpandCollapse {...args} variant={variant}>
-        {(expandProps) => exampleRenderFunction(expandProps, label)}
-      </ExpandCollapse>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams

package/stories/Feedback/Feedback.stories.jsx

@@ -1,96 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Text } from 'react-native'
-
-import { Feedback, Typography, TextInput } from '../../src'
-import { Container } from '../supports'
-
-export default {
-  title: 'Feedback',
-  component: Feedback
-}
-
-/* eslint-disable react/no-multi-comp */
-
-const Template = (args) => (
-  <Container>
-    <Feedback {...args} />
-  </Container>
-)
-
-export const Default = Template.bind({})
-Default.args = { title: 'Title', children: 'String content' }
-Default.storyName = 'Feedback'
-
-export const RenderFunctionAndChildren = () => (
-  <>
-    <Container>
-      <Feedback title="Render function">
-        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
-      </Feedback>
-    </Container>
-    <Container>
-      <Feedback title="Children">
-        <Typography>Content from children</Typography>
-      </Feedback>
-    </Container>
-  </>
-)
-
-export const Variants = () => (
-  <>
-    <Container>
-      <Feedback validation="success" title="Success">
-        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
-      </Feedback>
-    </Container>
-    <Container>
-      <Feedback validation="success" variant={{ icon: true }} title="Success with icon">
-        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
-      </Feedback>
-    </Container>
-    <Container>
-      <Feedback validation="error" title="Error">
-        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
-      </Feedback>
-    </Container>
-    <Container>
-      <Feedback validation="error" variant={{ icon: true }} title="Error with icon">
-        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
-      </Feedback>
-    </Container>
-  </>
-)
-
-export const WithinInput = () => {
-  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>
-    </>
-  )
-}

package/stories/FlexGrid/01 FlexGrid.stories.jsx

@@ -1,54 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { FlexGrid } from '../../src'
-import { Placeholder, EachParentType, parentTypesParams } from '../supports'
-
-const { Row, Col } = FlexGrid
-
-export default {
-  title: 'FlexGrid/FlexGrid',
-  component: FlexGrid
-}
-
-const getContent = (label = '1/6') => (
-  <>
-    <Row>
-      <Col>
-        <Placeholder margin>{label}</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>2/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>3/6</Placeholder>
-      </Col>
-    </Row>
-    <Row>
-      <Col>
-        <Placeholder margin>4/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>5/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>6/6</Placeholder>
-      </Col>
-    </Row>
-  </>
-)
-
-export const Default = (args) => <FlexGrid {...args} />
-Default.storyName = 'FlexGrid'
-Default.args = { children: getContent() }
-
-export const ParentTypes = (args) => (
-  <EachParentType {...args}>
-    {({ label, variant }) => (
-      <FlexGrid {...args} variant={variant}>
-        {getContent(label)}
-      </FlexGrid>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams

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

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import { FlexGrid } from '../../src'
-import { Placeholder } from '../supports'
-
-const { Row, Col } = FlexGrid
-
-export default {
-  title: 'FlexGrid/Row',
-  component: Row
-}
-
-const Template = (args) => (
-  <FlexGrid>
-    <Row {...args}>
-      <Col>
-        <Placeholder margin>1/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>2/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>3/6</Placeholder>
-      </Col>
-    </Row>
-    <Row {...args}>
-      <Col>
-        <Placeholder margin>4/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>5/6</Placeholder>
-      </Col>
-      <Col>
-        <Placeholder margin>6/6</Placeholder>
-      </Col>
-    </Row>
-  </FlexGrid>
-)
-
-export const Example = Template.bind({})
-Example.storyName = 'Row'