@telus-uds/components-base 1.7.1 → 1.8.2

package/stories/FlexGrid/03 Col.stories.jsx

@@ -1,141 +0,0 @@
-import React from 'react'
-
-import { FlexGrid } from '../../src'
-import { Placeholder } from '../supports'
-
-const { Row, Col } = FlexGrid
-
-export default {
-  title: 'FlexGrid/Col',
-  component: Col,
-  argTypes: {
-    xs: {
-      control: {
-        type: 'range',
-        max: 12,
-        min: 0,
-        step: 1
-      }
-    },
-    sm: {
-      control: {
-        type: 'range',
-        max: 12,
-        min: 0,
-        step: 1
-      }
-    },
-    md: {
-      control: {
-        type: 'range',
-        max: 12,
-        min: 0,
-        step: 1
-      }
-    },
-    lg: {
-      control: {
-        type: 'range',
-        max: 12,
-        min: 0,
-        step: 1
-      }
-    },
-    xl: {
-      control: {
-        type: 'range',
-        max: 12,
-        min: 0,
-        step: 1
-      }
-    },
-    xsOffset: {
-      control: {
-        type: 'range',
-        max: 11,
-        min: 1,
-        step: 1
-      }
-    },
-    smOffset: {
-      control: {
-        type: 'range',
-        max: 11,
-        min: 1,
-        step: 1
-      }
-    },
-    mdOffset: {
-      control: {
-        type: 'range',
-        max: 11,
-        min: 1,
-        step: 1
-      }
-    },
-    lgOffset: {
-      control: {
-        type: 'range',
-        max: 11,
-        min: 1,
-        step: 1
-      }
-    },
-    xlOffset: {
-      control: {
-        type: 'range',
-        max: 11,
-        min: 1,
-        step: 1
-      }
-    }
-  }
-}
-
-const Template = (args) => {
-  return (
-    <FlexGrid>
-      <Row>
-        <Col {...args}>
-          <Placeholder margin>1/3</Placeholder>
-        </Col>
-        <Col {...args}>
-          <Placeholder margin>2/3</Placeholder>
-        </Col>
-        <Col {...args}>
-          <Placeholder margin>3/3</Placeholder>
-        </Col>
-      </Row>
-    </FlexGrid>
-  )
-}
-
-export const Generic = Template.bind({})
-Generic.args = {}
-
-export const Sizes = Template.bind({})
-Sizes.args = {
-  xs: 4,
-  sm: 4,
-  md: 4,
-  lg: 4,
-  xl: 4
-}
-
-export const Offsets = Template.bind({})
-Offsets.args = {
-  xsOffset: 2,
-  smOffset: 2,
-  mdOffset: 2,
-  lgOffset: 2,
-  xlOffset: 2
-}
-
-export const Hidden = Template.bind({})
-Hidden.args = {
-  xs: 12,
-  sm: 0,
-  md: 0,
-  lg: 0,
-  xl: 12
-}

package/stories/Icon/Icon.stories.jsx

@@ -1,79 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-
-import AccessibleIcon from '../../__fixtures__/Accessible'
-import { Container, useVariants, EachIcon, EachParentType, parentTypesParams } from '../supports'
-import { Icon, StackWrap, Tooltip } from '../../src'
-
-export default {
-  title: 'Icon',
-  component: Icon,
-  argTypes: {
-    label: {
-      type: {
-        name: 'string'
-      },
-      description:
-        "Provide a label for an icon if it carries semantic meaning, don't if it is purely decorative.",
-      control: {
-        type: 'text'
-      }
-    },
-    variant: {
-      type: {
-        name: 'string'
-      },
-      description: 'control the visual variant of the given icon type (e.g. size, color)',
-      control: {
-        type: 'text'
-      }
-    }
-  }
-}
-
-export const ExampleIcon = (args) => <Icon icon={AccessibleIcon} {...args} />
-
-export const EveryIcon = (args) => (
-  <StackWrap space={0}>
-    <EachIcon>
-      {([iconName, IconComponent]) => (
-        <View key={iconName} style={styles.border}>
-          <Tooltip content={iconName}>
-            <Icon icon={IconComponent} {...args} />
-          </Tooltip>
-        </View>
-      )}
-    </EachIcon>
-  </StackWrap>
-)
-
-export const IconVariants = (args) => {
-  const variants = useVariants('Icon')
-  return variants.map(([key, value, label]) => (
-    <Container key={label} dark={value === 'white'}>
-      <Text style={styles.subtle}>{label}</Text>
-      <Icon icon={AccessibleIcon} {...args} variant={{ [key]: value }} />
-    </Container>
-  ))
-}
-
-export const ParentTypes = (args) => (
-  <EachParentType {...args}>
-    {({ label }) => <Icon icon={AccessibleIcon} {...args} label={label} />}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams
-
-const styles = StyleSheet.create({
-  subtle: {
-    fontSize: 12,
-    color: 'rgb(180, 180, 180)',
-    fontWeight: '700',
-    marginVertical: 16
-  },
-  border: {
-    borderWidth: 8,
-    borderColor: '#efefef'
-  }
-})

package/stories/IconButton/IconButton.stories.jsx

@@ -1,50 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-/* eslint-disable-next-line import/no-extraneous-dependencies */
-import { Add } from '@telus-uds/palette-allium/build/rn/icons'
-
-import { Box, IconButton, StackView } from '../../src'
-import { useVariants, EachParentType, parentTypesParams } from '../supports'
-
-export default {
-  title: 'IconButton',
-  component: IconButton
-}
-
-export const Default = (args) => <IconButton {...args} />
-Default.storyName = 'IconButton'
-Default.args = {
-  icon: Add,
-  onPress: () => {}
-}
-
-export const Variants = (args) => {
-  const variants = useVariants('IconButton')
-  return (
-    <StackView space={5}>
-      {variants.map(([key, value, label]) => (
-        <Box
-          key={`${key}:${value}`}
-          space={5}
-          tokens={label === 'inverse' ? { backgroundColor: '#454545' } : null}
-        >
-          <IconButton
-            {...args}
-            variant={{ ...args.variant, [key]: value }}
-            accessibilityLabel={label}
-          />
-        </Box>
-      ))}
-    </StackView>
-  )
-}
-Variants.args = Default.args
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="IconButton" {...args}>
-    {({ label, variant }) => <IconButton {...args} variant={variant} accessibilityLabel={label} />}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams
-ParentTypes.args = Default.args

package/stories/InputLabel/InputLabel.stories.jsx

@@ -1,39 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import InputLabel from '../../src/InputLabel/InputLabel'
-
-export default {
-  title: 'InputLabel',
-  component: InputLabel
-}
-
-export const Default = (args) => <InputLabel {...args} />
-Default.args = { label: 'Test label' }
-
-export const HintInline = (args) => <InputLabel {...args} />
-HintInline.args = { label: 'Test label', hint: 'Short hint', hintPosition: 'inline' }
-
-export const HintAndTooltip = (args) => <InputLabel {...args} />
-HintAndTooltip.args = {
-  label: 'Test label',
-  hint: 'Short hint',
-  hintPosition: 'inline',
-  tooltip: "This is the tooltip's content"
-}
-
-export const HintInlineLong = (args) => <InputLabel {...args} />
-HintInlineLong.args = {
-  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 = (args) => <InputLabel {...args} />
-HintBelow.args = {
-  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,48 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { ChevronLink } from '../../src'
-import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
-
-export default {
-  title: 'ChevronLink',
-  component: ChevronLink,
-  args: {
-    href: 'https://example.com'
-  }
-}
-
-const Template = (args) => {
-  const variants = useVariants('Link')
-  return variants
-    .map(([key, value, label]) =>
-      key !== 'animation' ? (
-        <Container key={`${key}:${value}`} dark={key === 'inverse'}>
-          <ChevronLink {...args} variant={{ [key]: value }}>
-            {`Chevron link ${label}`}
-          </ChevronLink>
-        </Container>
-      ) : null
-    )
-    .filter((exists) => exists)
-}
-
-export const Default = (args) => <ChevronLink {...args} />
-Default.storyName = 'ChevronLink'
-Default.args = { children: "I'm a chevron link" }
-
-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,90 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { View } from 'react-native'
-
-import AccessibleIcon from '../../__fixtures__/Accessible'
-
-import { Link, Typography, variantProp } from '../../src'
-import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
-
-export default {
-  title: 'Link',
-  component: Link,
-  args: {
-    href: `https://telus.com/?unvisited:${Date.now()}`,
-    target: '_blank',
-    rel: 'nofollow'
-  }
-}
-
-const Template = (args) => {
-  const variants = useVariants('Link')
-  return variants.map(([key, value, label]) => (
-    <Container key={`${key}:${value}`} dark={key === 'inverse'}>
-      <Link {...args} variant={{ [key]: value }}>
-        {`Text link ${label}`}
-      </Link>
-    </Container>
-  ))
-}
-
-Template.propTypes = {
-  variant: variantProp.propType
-}
-
-export const EveryIcon = (args) => (
-  <View>
-    <EachIcon>
-      {([iconName, IconComponent]) => (
-        <Container key={iconName}>
-          <Link key={iconName} icon={IconComponent} {...args}>
-            Link to {iconName}
-          </Link>
-        </Container>
-      )}
-    </EachIcon>
-  </View>
-)
-
-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: AccessibleIcon, iconPosition: 'left' }
-
-export const IconRight = Template.bind({})
-IconRight.args = { icon: AccessibleIcon, iconPosition: 'right' }
-
-export const InText = (args) => (
-  <Typography>
-    Some text containing a{' '}
-    <Link icon={AccessibleIcon} iconPosition="left" {...args}>
-      left icon link
-    </Link>
-    , alongside a{' '}
-    <Link icon={AccessibleIcon} 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,79 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { View } 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 * as Icons from '@telus-uds/palette-allium/build/rn/icons'
-
-import { TextButton, variantProp } from '../../src'
-import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
-
-export default {
-  title: 'TextButton',
-  component: TextButton,
-  args: {
-    // eslint-disable-next-line no-console
-    onPress: () => console.log('TextButton pressed')
-  }
-}
-
-const Template = (args) => {
-  const variants = useVariants('Link')
-  return variants.map(([key, value, label]) => (
-    <Container key={`${key}:${value}`} dark={key === 'inverse'}>
-      <TextButton {...args} variant={{ [key]: value }}>
-        {`TextButton ${label}`}
-      </TextButton>
-    </Container>
-  ))
-}
-
-Template.propTypes = {
-  variant: variantProp.propType
-}
-
-const SampleIcon = Icons.Settings
-
-const EveryIconTemplate = (args) => (
-  <View>
-    {Object.entries(Icons).map(([key, Icon]) => (
-      <Container key={key}>
-        <TextButton key={key} icon={Icon} {...args}>
-          Link to {key}
-        </TextButton>
-      </Container>
-    ))}
-  </View>
-)
-
-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 }
-
-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

@@ -1,117 +0,0 @@
-/* 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 '../../src'
-
-export default {
-  title: '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/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'