@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/stories/Notification/Notification.stories.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { Text } from 'react-native'
+
+import { Link, Notification, Typography } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/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/Progress/Progress.stories.jsx

@@ -0,0 +1,93 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import { Progress, StackView, Typography } from '../../lib'
+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 '../../lib'
+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 '../../lib'
+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 '../../lib'
+
+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 '../../lib'
+
+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/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 '../../lib/StackView'
+
+import { Skeleton } from '../../lib'
+
+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

@@ -1,5 +1,6 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import { Spacer, Typography } from '../../lib'
 import { Container } from '../supports'
@@ -26,8 +27,12 @@ export const InColumn = (args) => (
 InColumn.args = { space: 2 }
 
 export const InRow = (args) => (
-  <View style={{ flexDirection: 'row' }}>
+  <View style={styles.row}>
     <InColumn {...args} />
   </View>
 )
 InRow.args = { space: 2 }
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row' }
+})

package/stories/StackView/StackView.stories.jsx

@@ -63,3 +63,13 @@ Tokens.argTypes = {
   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

@@ -44,6 +44,18 @@ Column.args = {
 }
 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,

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 '../../lib'
+
+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>
+  )
+}