@telus-uds/components-base 1.7.0 → 1.8.1

package/stories/Modal/Modal.stories.jsx

@@ -1,54 +0,0 @@
-import React, { useState } from 'react'
-
-import { Button, Modal, Spacer, Typography } from '../../src'
-
-export default {
-  title: 'Modal',
-  component: Modal
-}
-
-export const Default = (args) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isMaxWidthOpen, setIsMaxWidthOpen] = useState(false)
-  const [isCustomCloseOpen, setIsCustomCloseOpen] = useState(false)
-  const [isNoCloseOpen, setIsNoCloseOpen] = 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>
-      <Spacer space={3} />
-      <Button onPress={() => setIsCustomCloseOpen(true)}>Open custom close button modal</Button>
-      <Modal
-        {...args}
-        isOpen={isCustomCloseOpen}
-        onClose={() => setIsCustomCloseOpen(false)}
-        closeButton={<Button onPress={() => setIsCustomCloseOpen(false)}>Close</Button>}
-      >
-        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
-        <Typography>Test content</Typography>
-      </Modal>
-      <Spacer space={3} />
-      <Button onPress={() => setIsNoCloseOpen(true)}>Open modal without close button</Button>
-      <Modal
-        {...args}
-        isOpen={isNoCloseOpen}
-        onClose={() => setIsNoCloseOpen(false)}
-        closeButton={null}
-      >
-        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
-        <Typography>A custom close button is added in the modal content.</Typography>
-        <Button onPress={() => setIsNoCloseOpen(false)}>Close</Button>
-      </Modal>
-    </>
-  )
-}
-Default.storyName = 'Modal'

package/stories/Notification/Notification.stories.jsx

@@ -1,82 +0,0 @@
-/* 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: '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

@@ -1,64 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-
-import { Pagination, Typography } from '../../src'
-import { Container, EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'Pagination',
-  component: 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'
-
-export const LocalTabs = ({ label, ...args }) => {
-  const [activeItemIndex, setActiveItemIndex] = useState(0)
-
-  const items = []
-
-  for (let i = 0; i < 7; i += 1) {
-    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>{labelText}</Typography>
-      </Container>
-      <Pagination {...args}>
-        {items.map((item, index) => (
-          <Pagination.PageButton
-            key={index}
-            onPress={() => setActiveItemIndex(index)}
-            isActive={index === activeItemIndex}
-          />
-        ))}
-      </Pagination>
-    </>
-  )
-  /* 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/Progress/Progress.stories.jsx

@@ -1,93 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { Progress, StackView, Typography } from '../../src'
-import { Container, EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'Progress',
-  component: Progress.Bar,
-  args: { accessibilityLabel: 'Progress Bar' }
-}
-
-export const Default = (args) => (
-  <Progress>
-    <Progress.Bar {...args} />
-  </Progress>
-)
-Default.storyName = 'Example'
-Default.args = { percentage: 50 }
-Default.argTypes = {
-  percentage: { control: { type: 'range', min: 0, max: 100 } }
-}
-
-export const Variants = () => (
-  <Container>
-    <StackView>
-      <Progress>
-        <Progress.Bar
-          percentage={25}
-          variant={{ inactive: true }}
-          accessibilityLabel="Inactive progress bar"
-        />
-      </Progress>
-      <Progress>
-        <Progress.Bar
-          percentage={50}
-          variant={{ negative: true }}
-          accessibilityLabel="Negative progress bar"
-        />
-      </Progress>
-      <Progress>
-        <Progress.Bar percentage={75} accessibilityLabel="Progress bar" />
-      </Progress>
-      <Progress variant={{ size: 'mini' }}>
-        <Progress.Bar
-          percentage={25}
-          variant={{ inactive: true }}
-          accessibilityLabel="Inactive progress bar"
-        />
-      </Progress>
-      <Progress variant={{ size: 'mini' }}>
-        <Progress.Bar
-          percentage={50}
-          variant={{ negative: true }}
-          accessibilityLabel="Negative progress bar"
-        />
-      </Progress>
-      <Progress variant={{ size: 'mini' }}>
-        <Progress.Bar
-          percentage={75}
-          variant={{ size: 'mini' }}
-          accessibilityLabel="Minimal progress bar"
-        />
-      </Progress>
-    </StackView>
-  </Container>
-)
-
-export const StackedBars = () => (
-  <Progress>
-    <Progress.Bar
-      percentage={75}
-      variant={{ inactive: true }}
-      accessibilityLabel="Stacked inactive progress bar"
-    />
-    <Progress.Bar percentage={50} accessibilityLabel="Stacked progress bar" />
-  </Progress>
-)
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="ProgressBar" {...args}>
-    {({ label, variant }) => (
-      <Container key={label}>
-        <Typography>{`${label} `}</Typography>
-        <Progress>
-          <Progress.Bar {...args} variant={variant} accessibilityLabel={label} />
-        </Progress>
-      </Container>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams
-ParentTypes.args = { percentage: 75 }

package/stories/Radio/Radio.stories.jsx

@@ -1,100 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { Radio, RadioGroup, Typography } from '../../src'
-import { Container, EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: '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 RadioGroupStory = (args) => <RadioGroup {...args} />
-RadioGroupStory.storyName = 'RadioGroup'
-RadioGroupStory.args = {
-  items: [
-    {
-      label: 'Radio Card 1'
-    },
-    {
-      label: 'Radio Card 2'
-    },
-    {
-      label: 'Radio Card 3'
-    },
-    {
-      label: 'Radio Card 4'
-    }
-  ],
-  legend: 'Choose a radio button.',
-  hint: 'Of the radio buttons below, choose one.',
-  tooltip: 'Decide which radio button you like best, then press it.',
-  name: 'example'
-}
-
-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/RadioCard/RadioCard.stories.jsx

@@ -1,98 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { RadioCard, RadioCardGroup, Typography } from '../../src'
-import { Container, EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'RadioCard',
-  component: RadioCard
-}
-
-const additionalContent = (
-  <>
-    <Typography>First line</Typography>
-    <Typography>Second line</Typography>
-  </>
-)
-
-export const Default = (args) => <RadioCard {...args} />
-Default.args = {
-  title: 'Radio card',
-  children: additionalContent
-}
-Default.storyName = 'RadioCard'
-
-export const RadioCardGroupStory = (args) => <RadioCardGroup {...args} />
-RadioCardGroupStory.storyName = 'RadioCardGroup'
-RadioCardGroupStory.args = {
-  items: [
-    {
-      title: 'Radio Card 1',
-      content: (
-        <>
-          <Typography>First line</Typography>
-        </>
-      )
-    },
-    {
-      title: 'Radio Card 2',
-      content: (
-        <>
-          <Typography>First line</Typography>
-          <Typography>Second line</Typography>
-        </>
-      )
-    },
-    {
-      title: 'Radio Card 3',
-      content: (
-        <>
-          <Typography>First line</Typography>
-          <Typography>Second line</Typography>
-          <Typography>Third line</Typography>
-        </>
-      )
-    },
-    {
-      title: 'Radio Card 4',
-      content: (
-        <>
-          <Typography>First line</Typography>
-          <Typography>Second line</Typography>
-        </>
-      )
-    },
-    {
-      title: 'Radio Card 5',
-      content: (
-        <>
-          <Typography>First line</Typography>
-          <Typography>Second line</Typography>
-          <Typography>Third line</Typography>
-          <Typography>Fourth line</Typography>
-        </>
-      )
-    }
-  ],
-  legend: 'Choose a radio card.',
-  hint: 'Of the radio cards below, choose one.',
-  tooltip: 'Decide which radio card you like best, then press it.',
-  name: 'example'
-}
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="Radio" {...args}>
-    {({ label, variant }) => (
-      <Container key={label}>
-        <RadioCard {...args} variant={variant} title={label}>
-          {additionalContent}
-        </RadioCard>
-      </Container>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams
-ParentTypes.args = {
-  defaultChecked: undefined
-}

package/stories/Search/Search.stories.jsx

@@ -1,66 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useRef, useState } from 'react'
-
-import { Search, StackView, TextButton, Typography, List, ListItem } from '../../src'
-
-export default {
-  title: 'Search',
-  component: Search,
-  argTypes: {
-    onSubmit: { action: 'submitted' }
-  }
-}
-
-const Template = (args) => <Search {...args} />
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export const Inactive = Template.bind({})
-Inactive.args = { inactive: true }
-
-// Lots of smartphone brands. No need to make the file really long, let them sit on one line.
-// eslint-disable-next-line prettier/prettier
-const options = ['Acer', 'Aermoo', 'AGM', 'Alcatel', 'Allcall', 'Allview', 'Amigoo', 'Amoi', 'Apple', 'Archos', 'Asus', 'Axgio', 'Black Shark', 'BlackBerry', 'Blackview', 'BLU', 'Bluboo', 'BQ', 'Bsimb', 'Cagabi', 'Cat', 'Caterpillar', 'Centric', 'China Mobile', 'Cong', 'Coolpad', 'Cubot', 'Dakele', 'Doogee', 'Doopro', 'E&L', 'Ecoo', 'Elephone', 'Energizer', 'Energy', 'Essential', 'EStar', 'Faea', 'Fairphone', 'Geotel', 'Gigabyte', 'Gigaset', 'Gionee', 'Gome', 'Google', 'Goophone', 'Gretel', 'Hafury', 'Haier', 'Hike', 'HiSense', 'HomTom', 'Honor', 'HP', 'HTC', 'Huawei', 'I Kall', 'iiiF150', 'iLA', 'iMan', 'iNew', 'Infinix', 'InFocus', 'InnJoo', 'Innos', 'Intex', 'iOcean', 'iRULU', 'IUNI', 'iVooMi', 'Jesy', 'Jiake', 'Jiayu', 'Karbonn', 'Kazam', 'Keecoo', 'Kenxinda', 'KingSing', 'KingZone', 'Kodak', 'Kolina', 'Koolnee', 'Landvo', 'Laude', 'Lava', 'Leagoo', 'LeEco (LeTV)', 'Lenovo', 'Leotec', 'LeRee', 'LG', 'Ly', 'Lyf', 'M-Horse', 'M-Net', 'Mann', 'Maze', 'Meiigoo', 'Meitu', 'Meizu', 'Micromax', 'Microsoft', 'Mijue', 'Milai', 'Mlais', 'Morefine', 'Motorola', 'Mpie', 'Mstar', 'MyWigo', 'Neken', 'Neo', 'Newman', 'NO.1', 'Noa', 'Nokia', 'Nomu', 'Nubia', 'Nubia Red Magic', 'NZone', 'OnePlus', 'Oppo', 'Otium', 'Oukitel', 'Palm', 'Panasonic', 'Pantech', 'Pepsi', 'Phicomm', 'Philips', 'Phonemax', 'Plunk', 'POCO', 'Pomp', 'Poptel', 'PPTV', 'Prestigio', 'Qiku', 'Ramos', 'Razer', 'realme', 'Runbo', 'Samsung', 'Sharp', 'Silent Circle', 'Siswoo', 'Smartisan', 'Snopow', 'Sony', 'Sony Ericsson', 'Star', 'Swipe', 'TCL', 'Tengda', 'THL', 'Tianhe', 'Timmy', 'TP-Link', 'Ubro', 'Uhans', 'Uhappy', 'Uimi', 'Ukozi', 'Ulefone', 'UMi', 'UMiDIGI', 'Vargo', 'Vernee', 'ViewSonic', 'Vivo', 'VKworld', 'Voto', 'VPhone', 'Vsmart', 'Weimei', 'Wico', 'Wiko', 'Wileyfox', 'Wolder', 'Woxter', 'Xiaomi', 'Xolo', 'Yota Devices', 'YU', 'Zoji', 'Zopo', 'ZTE', 'Zuk']
-
-export const Controlled = (args) => {
-  const [value, setValue] = useState('')
-  const [searchedValue, setSearchedValue] = useState(null)
-  const searchRef = useRef()
-  const selectOption = (option) => {
-    setValue(option)
-    if (searchRef.current?.focus) searchRef.current?.focus()
-  }
-
-  return (
-    <StackView space={4}>
-      {searchedValue ? (
-        <>
-          <Typography>Search results page for {searchedValue}.</Typography>
-          <Typography>{searchedValue} phones are really good. You should buy one.</Typography>
-          <TextButton onPress={() => setSearchedValue(null)}>Go back</TextButton>
-        </>
-      ) : (
-        <>
-          <Search
-            {...args}
-            value={value}
-            onChange={setValue}
-            ref={searchRef}
-            onSubmit={setSearchedValue}
-          />
-          <List>
-            {options
-              .filter((option) => !value || option.toLowerCase().match(value.toLowerCase()))
-              .map((option) => (
-                <ListItem key={option}>
-                  <TextButton onPress={() => selectOption(option)}>{option}</TextButton>
-                </ListItem>
-              ))}
-          </List>
-        </>
-      )}
-    </StackView>
-  )
-}
-Controlled.args = {}

package/stories/Select/Select.stories.jsx

@@ -1,55 +0,0 @@
-import React, { useState } from 'react'
-import { Text } from 'react-native'
-
-import { Select } from '../../src'
-
-export default {
-  title: '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,42 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { SideNav } from '../../src'
-import { EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'SideNav',
-  component: SideNav
-}
-
-const Template = ({ label = 'Level 1 - 1', ...args }) => (
-  <SideNav {...args}>
-    <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>
-      <SideNav.Item href="#level-2-3">Level 2 - 3</SideNav.Item>
-    </SideNav.ItemsGroup>
-    <SideNav.Item href="#level-1-2">Level 1 - 2</SideNav.Item>
-    <SideNav.ItemsGroup label="Group 2">
-      <SideNav.Item href="#level-2-4">Level 2 - 4</SideNav.Item>
-    </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/SideNav/SideNavItem.stories.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { SideNav } from '../../src'
-
-export default {
-  title: 'SideNav/Item',
-  component: SideNav.Item
-}
-
-export const Item = () => <SideNav.Item href="#level-1-1">Level 1 - 1</SideNav.Item>

package/stories/SideNav/SideNavItemsGroup.stories.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { SideNav } from '../../src'
-
-export default {
-  title: 'SideNav/Items Group',
-  component: SideNav.ItemsGroup
-}
-
-export const ItemsGroup = () => (
-  <SideNav>
-    <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>
-      <SideNav.Item href="#level-2-3">Level 2 - 3</SideNav.Item>
-    </SideNav.ItemsGroup>
-  </SideNav>
-)