@telus-uds/components-base 0.0.2-prerelease.3 → 0.0.2-prerelease.7

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

@@ -0,0 +1,69 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { View } from 'react-native'
+import { Tags, Typography } from '../../lib'
+import { Container } from '../supports'
+
+const defaultArgs = {
+  items: [
+    { label: 'First item', id: 'first' },
+    { label: 'Second item', id: 'second' },
+    { label: 'Third item', id: 'third' },
+    { label: 'Fourth item', id: 'fourth' },
+    { label: 'Fifth item', id: 'fifth' },
+    { label: 'Sixth item', id: 'sixth' }
+  ],
+  initialValues: ['second', 'fourth']
+}
+const defaultControlledArgs = {
+  ...defaultArgs,
+  values: defaultArgs.initialValues,
+  initialValues: undefined
+}
+
+export default {
+  title: 'Base/Tags',
+  component: Tags,
+  args: {
+    ...defaultArgs
+  }
+}
+
+const UncontrolledTemplate = (args) => <Tags {...args} />
+UncontrolledTemplate.propTypes = Tags.propTypes
+
+const ControlledTemplate = ({ values, ...args }) => {
+  // Simulate saving and retrieving data from a server
+  const [isSaving, setIsSaving] = useState(false)
+  const [currentValues, setValues] = useState(values)
+  const handleChange = (newValue) => {
+    setIsSaving(true)
+    setTimeout(() => {
+      setValues(newValue)
+      setIsSaving(false)
+    }, 400)
+  }
+
+  const text = isSaving ? 'Saving...' : `Saved selected tags: "${currentValues.join('", "')}".`
+  return (
+    <View>
+      <Container padding={4} margin={0}>
+        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
+      </Container>
+      <Container padding={4} margin={0}>
+        <Tags {...args} values={currentValues} onChange={handleChange} />
+      </Container>
+    </View>
+  )
+}
+
+ControlledTemplate.propTypes = Tags.propTypes
+
+export const Default = UncontrolledTemplate.bind({})
+Default.storyName = 'Tags'
+
+export const TagsControlled = ControlledTemplate.bind({})
+TagsControlled.args = { ...defaultControlledArgs }
+
+export const TagsInactive = UncontrolledTemplate.bind({})
+TagsInactive.args = { inactive: true }

package/stories/TextInput/TextArea.stories.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+
+import { TextArea } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/TextArea',
+  component: TextArea
+}
+
+const Template = (args) => <TextArea {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Label',
+  hint: 'This is a hint',
+  tooltip: 'This is a tooltip',
+  feedback: 'This is the feedback'
+}
+
+export const WithHint = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Label" hint="An inline hint" tooltip="Tooltip content" />
+      </Container>
+      <Container>
+        <TextArea
+          label="Label"
+          hint="A usually much longer hint below"
+          hintPosition="below"
+          tooltip="Tooltip content"
+        />
+      </Container>
+    </>
+  )
+}
+
+export const WithFeedback = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Instructional" feedback="An instructional feedback" />
+      </Container>
+      <Container>
+        <TextArea label="Success" validation="success" feedback="A detailed success message" />
+      </Container>
+      <Container>
+        <TextArea label="Error" validation="error" feedback="A detailed error message" />
+      </Container>
+    </>
+  )
+}
+
+export const InactiveAndReadOnly = () => {
+  return (
+    <>
+      <Container>
+        <TextArea label="Inactive" inactive initialValue="can't touch this" />
+      </Container>
+      <Container>
+        <TextArea 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>
+        <TextArea
+          label="Controlled"
+          validation={validation}
+          feedback={feedback}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    </>
+  )
+}

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

@@ -0,0 +1,81 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { View, Text } from 'react-native'
+
+import { Tooltip, Typography } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Tooltip',
+  component: Tooltip
+}
+
+const Template = (args) => <Tooltip {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  content: 'This is a tooltip'
+}
+
+export const Positioning = () => (
+  <>
+    <Typography>Here to preload the fonts</Typography>
+    <Container>
+      <Tooltip content="position is forced to left" position="left" />
+    </Container>
+    <Container>
+      <Tooltip content="automatically positioned" />
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'center', marginRight: 140 }}>
+        <Tooltip content="position is forced to below" position="below" />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'center' }}>
+        <Tooltip
+          content="(automatically positioned) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
+          luctus sapien in felis auctor commodo. Mauris sagittis, lorem eu rhoncus mattis, mi erat
+          mollis lectus, in ornare"
+        />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'center', marginLeft: 140 }}>
+        <Tooltip content="automatically positioned" />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'flex-end' }}>
+        <Tooltip content="automatically positioned automatically positioned" />
+      </View>
+    </Container>
+    <Container>
+      <View style={{ alignSelf: 'flex-end', marginTop: 500 }}>
+        <Tooltip position="right" content="position is forced to right" />
+      </View>
+    </Container>
+  </>
+)
+
+export const CustomControl = () => (
+  <Tooltip content="Amazing 😍">
+    <Text>Tooltip is applied to this text</Text>
+  </Tooltip>
+)
+
+export const CustomControlFunction = () => (
+  <Tooltip content="Tooltip content">
+    {(pressableState, variant) => (
+      <Text>
+        Tooltip is applied to this text (state: {pressableState.hover ? 'hover' : 'default'},
+        variant: {variant?.inverse ? 'inverse' : 'none'})
+      </Text>
+    )}
+  </Tooltip>
+)
+
+export const ComponentsInContent = () => (
+  <Tooltip content={<Typography tokens={{ color: 'white' }}>Typography in content</Typography>} />
+)

package/stories/TooltipButton/TooltipButton.stories.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { TooltipButton } from '../../lib'
+
+export default {
+  title: 'Base/TooltipButton',
+  component: TooltipButton
+}
+
+export const Default = () => <TooltipButton onPress={() => {}} />
+Default.storyName = 'TooltipButton'

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