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

package/stories/Icon/Icon.stories.jsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { StyleSheet, Text } from 'react-native'
 import AccessibleIcon from '../../__fixtures__/accessible.icon.svg'
-import { Container, useVariants } from '../supports'
+import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/Icon',
@@ -29,7 +30,9 @@ export default {
   }
 }
 
-const Template = (args) => {
+export const ExampleIcon = (args) => <AccessibleIcon {...args} />
+
+export const IconVariants = (args) => {
   const variants = useVariants('Icon')
   return variants.map(([key, value, label]) => (
     <Container key={label} dark={value === 'white'}>
@@ -39,7 +42,12 @@ const Template = (args) => {
   ))
 }
 
-export const Icon = Template.bind({})
+export const ParentTypes = (args) => (
+  <EachParentType {...args}>
+    {({ label }) => <AccessibleIcon {...args} label={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
 
 const styles = StyleSheet.create({
   subtle: {

package/stories/InputLabel/InputLabel.stories.jsx

@@ -0,0 +1,37 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import InputLabel from '../../lib/InputLabel/InputLabel'
+
+export default {
+  title: 'Base/InputLabel',
+  component: InputLabel
+}
+
+export const Default = () => <InputLabel label="Test label" />
+
+export const HintInline = () => (
+  <InputLabel label="Test label" hint="Short hint" hintPosition="inline" />
+)
+
+export const HintAndTooltip = () => (
+  <InputLabel label="Test label" hint="Short hint" hintPosition="inline" tooltip="?" />
+)
+
+export const HintInlineLong = () => (
+  <InputLabel
+    label="Test label"
+    hint="A rather long hint that won't actually fit"
+    hintPosition="inline"
+    tooltip="?"
+  />
+)
+
+export const HintBelow = () => (
+  <InputLabel
+    label="Test label"
+    hint="A rather long hint that won't actually fit"
+    hintPosition="below"
+    tooltip="?"
+  />
+)

package/stories/Link/ChevronLink.stories.jsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 
 import { ChevronLink } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/ChevronLink',
@@ -26,7 +27,22 @@ const Template = (args) => {
     .filter((exists) => exists)
 }
 
-export const ChevronLinkRight = Template.bind({})
+export const Default = (args) => <ChevronLink {...args} />
+Default.storyName = 'ChevronLink'
+Default.args = { children: "I'm a chevron link" }
 
-export const ChevronLinkLeft = Template.bind({})
-ChevronLinkLeft.args = { direction: 'left' }
+export const VariantsRight = Template.bind({})
+
+export const VariantsLeft = Template.bind({})
+VariantsLeft.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,4 +1,4 @@
-/* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } from 'react-native'
 
@@ -7,7 +7,7 @@ import { View } from 'react-native'
 import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
 
 import { Link, variantProp } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/Link',
@@ -48,7 +48,11 @@ const EveryIconTemplate = (args) => (
   </View>
 )
 
-export const Regular = Template.bind({})
+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: SampleIcon, iconPosition: 'left' }
@@ -57,3 +61,20 @@ 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 }) => (
+      <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,4 +1,4 @@
-/* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } from 'react-native'
 
@@ -7,7 +7,7 @@ import { View } from 'react-native'
 import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
 
 import { TextButton, variantProp } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/TextButton',
@@ -47,7 +47,11 @@ const EveryIconTemplate = (args) => (
   </View>
 )
 
-export const Regular = Template.bind({})
+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 }
@@ -56,3 +60,20 @@ 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/Pagination/Pagination.stories.jsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { Pagination, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/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/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/Spacer/Spacer.stories.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { 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={{ flexDirection: 'row' }}>
+    <InColumn {...args} />
+  </View>
+)
+InRow.args = { space: 2 }

package/stories/StackView/StackView.stories.jsx

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

package/stories/StackView/StackWrap.stories.jsx

@@ -0,0 +1,52 @@
+/* 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 }
+
+const styles = StyleSheet.create({
+  constrainedHeight: {
+    height: 350,
+    alignItems: 'flex-start'
+  }
+})

package/stories/TextInput/TextInput.stories.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react'
+
+import { TextInput } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/TextInput',
+  component: TextInput
+}
+
+/* eslint-disable react/no-multi-comp */
+
+const Template = (args) => (
+  <Container>
+    <TextInput {...args} />
+  </Container>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Label'
+}
+
+export const WithHint = () => {
+  return (
+    <>
+      <Container>
+        <TextInput label="Label" hint="An inline hint" tooltip="Tooltip content" />
+      </Container>
+      <Container>
+        <TextInput
+          label="Label"
+          hint="A usually much longer hint below"
+          hintPosition="below"
+          tooltip="Tooltip content"
+        />
+      </Container>
+    </>
+  )
+}
+
+export const WithFeedback = () => {
+  return (
+    <>
+      <Container>
+        <TextInput label="Instructional" feedback="An instructional feedback" />
+      </Container>
+      <Container>
+        <TextInput label="Success" validation="success" feedback="A detailed success message" />
+      </Container>
+      <Container>
+        <TextInput label="Error" validation="error" feedback="A detailed error message" />
+      </Container>
+    </>
+  )
+}
+
+export const InactiveAndReadOnly = () => {
+  return (
+    <>
+      <Container>
+        <TextInput label="Inactive" inactive initialValue="can't touch this" />
+      </Container>
+      <Container>
+        <TextInput label="Read only" readOnly value="won't change" />
+      </Container>
+    </>
+  )
+}
+
+export const Controlled = () => {
+  const [value, setValue] = useState('')
+  const [validation, setValidation] = useState()
+
+  useEffect(() => {
+    if (value !== undefined && value.length > 0)
+      setValidation(value.length < 6 ? 'success' : 'error')
+  }, [value])
+
+  const defaultFeedbackContent =
+    'Will show an error if longer than 6 characters and success otherwise'
+
+  const feedbackContent = {
+    error: 'The value must be shorter than 6 characters',
+    success: 'Yay! The value has less than 6 characters'
+  }
+
+  const feedback = validation === undefined ? defaultFeedbackContent : feedbackContent[validation]
+
+  return (
+    <>
+      <Container>
+        <TextInput
+          label="Controlled"
+          validation={validation}
+          feedback={feedback}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    </>
+  )
+}

package/stories/ToggleSwitch/ToggleSwitch.stories.jsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import { View } from 'react-native'
-import { ToggleSwitch as ToggleSwitchComponent, Typography } from '../../lib'
-import { Container } from '../supports'
+import { ToggleSwitch, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
 
-export const ToggleSwitch = ToggleSwitchComponent
+export const Default = (args) => <ToggleSwitch {...args} />
+Default.storyName = 'ToggleSwitch'
 
 export default {
   title: 'Base/ToggleSwitch',
@@ -45,3 +46,15 @@ export const ToggleSwitchInactive = (args) => (
     </Container>
   </>
 )
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="ToggleSwitch" {...args}>
+    {({ label, variant }) => (
+      <>
+        <Typography>{`${label} `}</Typography>
+        <ToggleSwitch {...args} variant={variant} />
+      </>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Typography/Typography.stories.jsx

@@ -1,9 +1,11 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { useVariants, Container } from '../supports'
-import { Typography as TypographyComponent } from '../../lib'
+import { useVariants, Container, EachParentType, parentTypesParams } from '../supports'
+import { Typography } from '../../lib'
 
-export const Typography = TypographyComponent
+export const Default = (args) => <Typography {...args} />
+Default.storyName = 'Typography'
 
 const defaultChildren = 'The quick brown fox jumps over the lazy dog'
 
@@ -38,3 +40,10 @@ LongTextTypographyVariants.args = {
     'and what the current screen size is of the window in which this component is being shown.'
   ]
 }
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Typography" {...args}>
+    {({ label, variant }) => <Typography {...args} variant={variant}>{`${label}. `}</Typography>}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/platform-supports.web.jsx

@@ -14,7 +14,7 @@ InlineBlockDiv.propTypes = { children: PropTypes.node }
 
 const FloatDiv = ({ children }) => (
   <div>
-    <div style={{ float: 'right' }}>{children}</div>
+    <div style={{ float: 'right', maxWidth: '85%', marginLeft: '10px' }}>{children}</div>
     <Typography block>
       Some lengthy text in a paragraph with a block above it containing the components to test,
       where the block above it has the style "float: right" applied and no other styles, giving the