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

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

package/stories/supports.jsx

@@ -1,27 +1,97 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { Platform, ScrollView, View, StyleSheet } from 'react-native'
 import { useTheme, getComponentTheme } from '../lib/ThemeProvider'
 import { Typography } from '../lib'
 import { containers as platformContainers } from './platform-supports'
 
-const FlexRow = ({ children }) => <View style={styles.row}>{children}</View>
-FlexRow.propTypes = { children: PropTypes.node }
+const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
+RowWrap.propTypes = { children: PropTypes.node }
 
-const FlexColumn = ({ children }) => <View style={styles.column}>{children}</View>
-FlexColumn.propTypes = { children: PropTypes.node }
+const RowStretch = ({ children }) => (
+  <ScrollView horizontal contentContainerStyle={styles.rowStretch}>
+    {children}
+  </ScrollView>
+)
+RowStretch.propTypes = { children: PropTypes.node }
+
+const ColumnWrap = ({ children }) => (
+  <ScrollView
+    horizontal
+    style={styles.columnWrapContainer}
+    contentContainerStyle={styles.columnWrap}
+  >
+    {children}
+  </ScrollView>
+)
+ColumnWrap.propTypes = { children: PropTypes.node }
+
+const ColumnStretch = ({ children }) => (
+  <View containerStyle={styles.columnStretch}>{children}</View>
+)
+ColumnStretch.propTypes = { children: PropTypes.node }
 
 // TODO: find a way to give Base stories a complete empty SpacingObject for easy editting
 // while giving themed stories a simpler value.
 export const spacingObjectArg = { xs: 1, lg: 3 }
 
 export const parentTypes = {
-  FlexRow,
-  FlexColumn,
+  RowWrap,
+  RowStretch,
+  ColumnWrap,
+  ColumnStretch,
   ...platformContainers
 }
 
+/**
+ * React Native (and therefore also React Native Web) components are usually at some level based on
+ * `View` and have some default layout styles that are quite different to regular web defaults:
+ *
+ *  - `display: flex` instead of `display: block`
+ *  - `flexDirection: column` instead of `flexDirection: row` when flex
+ *  - `position: relative`
+ *
+ * It's easy to fall into the trap of developing and testing something that works fine in a regular
+ * `View` but doesn't work as expected in other common layout containers. This is particularly true
+ * for UDS where internally we are devleoping entirely within React Native but many real-world use cases
+ * will mix UDS components with regular web HTML elements.
+ *
+ * The `EachParentType` support component and related `parentTypes` tooling are intended to make it easy
+ * to routinely test and demonstrate how UDS components behave in a wide range of parent types.
+ *
+ * To use it, pass as `children` a render function that takes the following and places them appropriately
+ * in a demonstration of your component (be careful to not wrap the component in a `View` or container as
+ * that will defeat the point of the exercise!):
+ *
+ * - `variant` - each theme variant will be rendered as siblings, pass this to the component's `variant` prop.
+ * - `label` - this will describe the parent type / variant combination and ideally should be somewhere easy to read
+ *   inside the component to help users understand what they are looking at.
+ * - `index` - the index of the currently rendered component variant (`0` if the component has no variants).
+ */
+export const EachParentType = ({ children, componentThemeName, ...args }) => {
+  const variants = useVariants(componentThemeName)
+  return Object.entries(parentTypes).map(([parentLabel, ParentType]) => (
+    <Container key={parentLabel} offWhite>
+      <ParentType>
+        {variants.map(([key, value, variantLabel], index) => {
+          const label = variantLabel ? `${parentLabel}: ${variantLabel}` : parentLabel
+          const variant = { ...args.variant, [key]: value }
+          return typeof children === 'function' ? children({ label, variant, index }) : children
+        })}
+      </ParentType>
+    </Container>
+  ))
+}
+
+const parentTypesList = `\`"${Object.keys(parentTypes).join('"`, `"')}"\``
+
+export const parentTypesParams = {
+  docs: {
+    storyDescription: `This tests how this component's variants render in each of the following types of container: ${parentTypesList}.`
+  }
+}
+
 export const Placeholder = ({ margin = false, ...props }) => (
   <View style={[styles.placeholder, margin && styles.margin]}>
     <Typography {...props} />
@@ -36,17 +106,29 @@ export const Container = ({
   padding = 8,
   dark = false,
   offWhite = false,
+  borderWidth,
+  style,
   children
 }) => (
-  <View style={[{ margin, padding }, dark && styles.dark, offWhite && styles.offWhite]}>
+  <View
+    style={[
+      { margin, padding },
+      dark && styles.dark,
+      offWhite && styles.offWhite,
+      { borderWidth },
+      style
+    ]}
+  >
     {children}
   </View>
 )
 Container.propTypes = {
   margin: PropTypes.number,
   padding: PropTypes.number,
+  borderWidth: PropTypes.number,
   dark: PropTypes.bool,
   offWhite: PropTypes.bool,
+  style: PropTypes.object,
   children: PropTypes.node
 }
 
@@ -57,6 +139,8 @@ const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `:
  */
 export const useVariants = (componentName) => {
   const theme = useTheme()
+  if (!componentName) return [['default', {}]]
+
   const { appearances } = getComponentTheme(theme, componentName)
 
   if (!appearances) {
@@ -76,14 +160,26 @@ export const useVariants = (componentName) => {
 }
 
 const styles = StyleSheet.create({
-  row: {
+  rowWrap: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    flex: 1
+  },
+  rowStretch: {
     flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap'
+    flexGrow: 1
+  },
+  columnStretch: {
+    // alignItems: 'stretch' and flexDirection: 'column' are the default
   },
-  column: {
+  columnWrap: {
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    // Ensure the content columns wrap
+    ...Platform.select({ web: { maxHeight: 150 }, default: { height: 125, minWidth: '200%' } }),
+    flexGrow: 1
   },
   content: {
     maxWidth: 200,