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

package/stories/Progress/Progress.stories.jsx

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Search } from '../../src'
+
+export default {
+  title: 'Base/Search',
+  component: Search
+}
+
+const Template = (args) => <Search {...args} />
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Inactive = Template.bind({})
+Inactive.args = { inactive: true }

package/stories/Select/Select.stories.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { Text } from 'react-native'
+
+import { Select } from '../../src'
+
+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/SideNav/SideNav.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/SideNav/SideNavItem.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 
 export default {
   title: 'Base/SideNav/Item',

package/stories/SideNav/SideNavItemsGroup.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 
 export default {
   title: 'Base/SideNav/Items Group',

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 '../../src/StackView'
+
+import { Skeleton } from '../../src'
+
+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/Spacer/Spacer.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { Spacer, Typography } from '../../lib'
+import { Spacer, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {

package/stories/StackView/StackView.stories.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { StackView, Card, Typography, Button } from '../../lib'
+import { StackView, Card, Typography, Button } from '../../src'
 
 export default {
   title: 'Base/StackView',

package/stories/StackView/StackWrap.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { StackWrap, Button } from '../../lib'
+import { StackWrap, Button } from '../../src'
 
 export default {
   title: 'Base/StackWrap',

package/stories/StepTracker/StepTracker.stories.jsx

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

@@ -0,0 +1,97 @@
+/* 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: 'Base/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}`
+  }))
+}