@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

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/SideNav/SideNav.stories.jsx

@@ -1,14 +1,17 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
+import PropTypes from 'prop-types'
 import { SideNav } from '../../lib'
+import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/SideNav',
   component: SideNav
 }
 
-const Template = (args) => (
+const Template = ({ label = 'Level 1 - 1', ...args }) => (
   <SideNav {...args}>
-    <SideNav.Item href="#level-1-1">Level 1 - 1</SideNav.Item>
+    <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>
@@ -20,8 +23,20 @@ const Template = (args) => (
     </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/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

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Spacer, Typography } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Spacer',
+  component: Spacer
+}
+
+export const Default = (args) => <Spacer {...args} />
+Default.storyName = 'Spacer'
+
+export const InColumn = (args) => (
+  <>
+    <Container margin={0} offWhite>
+      <Typography>First item, before spacer.</Typography>
+    </Container>
+    <Spacer {...args} />
+    <Container margin={0} offWhite>
+      <Typography>Second item, after spacer.</Typography>
+    </Container>
+  </>
+)
+InColumn.args = { space: 2 }
+
+export const InRow = (args) => (
+  <View style={styles.row}>
+    <InColumn {...args} />
+  </View>
+)
+InRow.args = { space: 2 }
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row' }
+})

package/stories/StackView/StackView.stories.jsx

@@ -0,0 +1,75 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import { StackView, Card, Typography, Button } from '../../lib'
+
+export default {
+  title: 'Base/StackView',
+  component: StackView
+}
+
+const content = (
+  <>
+    <Card>
+      <Typography>First item.</Typography>
+    </Card>
+    <Card>
+      <Typography>Second item.</Typography>
+      <Typography>Has two lines.</Typography>
+    </Card>
+    <Card>
+      <Typography>Third item.</Typography>
+      <Typography>This one is longer.</Typography>
+      <Typography>It has three lines.</Typography>
+    </Card>
+    <Button onPress={() => {}}>Different item</Button>
+  </>
+)
+
+export const Default = (args) => <StackView {...args} />
+Default.storyName = 'StackView'
+Default.args = { children: content }
+// By default the JSX object is shown as a huge human-unreadable JSON tree control; turn it off
+Default.argTypes = { children: { control: { disable: true } } }
+
+export const Tokens = ({ flexGrow, alignItems, justifyContent, ...args }) => (
+  <View
+    style={{
+      flexGrow,
+      flexDirection: args.direction,
+      alignItems,
+      justifyContent
+    }}
+  >
+    <StackView {...args}>{content}</StackView>
+  </View>
+)
+Tokens.args = { inherit: true, space: 4, direction: 'row' }
+Tokens.parameters = {
+  docs: {
+    storyDescription:
+      "A set of common layout styles may be set using the `tokens` prop, and selected from a parent theme using `selectTokens('StackView', themeTokens)`."
+  }
+}
+Tokens.propTypes = {
+  flexGrow: PropTypes.number,
+  alignItems: PropTypes.string,
+  justifyContent: PropTypes.string
+}
+Tokens.argTypes = {
+  flexGrow: { type: 'number', defaultValue: 1 },
+  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

@@ -0,0 +1,64 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { StackWrap, Button } from '../../lib'
+
+export default {
+  title: 'Base/StackWrap',
+  component: StackWrap
+}
+
+// Mixed length labels
+const labels = ['Button ', 'Longer label ', '#', 'Mid-length ']
+
+const getLabels = (length) =>
+  Array(length)
+    .fill('')
+    .map((_, index) => `${labels[index % 4]}${index}`)
+
+export const Default = (args) => <StackWrap {...args} />
+Default.storyName = 'StackWrap'
+Default.args = {
+  children: getLabels(15).map((label) => (
+    <Button onPress={() => {}} key={label}>
+      {label}
+    </Button>
+  )),
+  // Storybook does a bad job picking these up automatically due to the indirection; make them easy to edit
+  space: 1,
+  gap: 1,
+  tokens: {}
+}
+// By default the JSX object is shown as a huge human-unreadable JSON tree control; turn it off
+Default.argTypes = { children: { control: { disable: true } } }
+
+export const Column = (args) => (
+  <View style={styles.constrainedHeight}>
+    <StackWrap {...args} />
+  </View>
+)
+Column.args = {
+  ...Default.args,
+  direction: 'column'
+}
+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,
+    alignItems: 'flex-start'
+  }
+})

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>
+  )
+}