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

package/stories/Tabs/Tabs.stories.jsx

@@ -0,0 +1,97 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { Platform } from 'react-native'
+
+import { Link, StackView, Tabs, Typography } from '../../lib'
+
+export default {
+  title: 'Base/Tabs',
+  component: Tabs
+}
+
+export const Default = (args) => <Tabs {...args} />
+Default.storyName = 'Tabs'
+Default.args = {
+  items: [
+    { label: 'First item' },
+    { label: 'Second item' },
+    { label: 'Much longer third item' },
+    { label: 'Fourth item' },
+    { label: 'Fifth item' },
+    { label: 'Sixth item' },
+    { label: 'Seventh item' },
+    { label: 'Eighth item' },
+    { label: 'Ninth item' }
+  ]
+}
+
+export const TabsWithHref = (args) => <Tabs {...args} />
+TabsWithHref.args = {
+  items: [
+    { href: 'https://telus.com', label: 'First item' },
+    { href: 'https://telus.com', label: 'Second item' },
+    { href: 'https://telus.com', label: 'Much longer third item' },
+    { href: 'https://telus.com', label: 'Fourth item' },
+    { href: 'https://telus.com', label: 'Fifth item' },
+    { href: 'https://telus.com', label: 'Sixth item' },
+    { href: 'https://telus.com', label: 'Seventh item' },
+    { href: 'https://telus.com', label: 'Eighth item' },
+    { href: 'https://telus.com', label: 'Ninth item' }
+  ]
+}
+
+const loremIpsumArray = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. '
+  .repeat(5)
+  .split('. ')
+
+export const TabsControlled = (args) => {
+  const [page, setPage] = useState('1')
+
+  return (
+    <StackView space={4}>
+      <Tabs {...args} value={page} onChange={setPage} />
+      <Typography>This is some sample content for page {page}.</Typography>
+      <Typography>
+        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
+      </Typography>
+    </StackView>
+  )
+}
+TabsControlled.args = {
+  items: [
+    { id: '1', label: 'First item' },
+    { id: '2', label: 'Second item' },
+    { id: '3', label: 'Much longer third item' },
+    { id: '4', label: 'Fourth item' },
+    { id: '5', label: 'Fifth item' },
+    { id: '6', label: 'Sixth item' },
+    { id: '7', label: 'Seventh item' },
+    { id: '8', label: 'Eighth item' },
+    { id: '9', label: 'Ninth item' }
+  ]
+}
+
+export const TabsControlledHashes = ({ items, ...args }) => {
+  const [page, setPage] = useState('1')
+  if (Platform.OS !== 'web') return <Typography>Hashes are only supported on Web.</Typography>
+  const linkTarget = Number(page) >= items.length ? '#item1' : `#item${Number(page) + 1}`
+  return (
+    <StackView space={4}>
+      <Tabs {...args} items={items} value={page} onChange={setPage} />
+      <Typography>
+        This is some sample content for page {page}. Try this ordinary hash link to{' '}
+        <Link href={linkTarget}>{linkTarget}</Link>.
+      </Typography>
+      <Typography>
+        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
+      </Typography>
+    </StackView>
+  )
+}
+TabsControlledHashes.propTypes = Tabs.propTypes
+TabsControlledHashes.args = {
+  items: TabsControlled.args.items.map((item) => ({
+    ...item,
+    href: `#item${item.id}`
+  }))
+}

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 → platform-supports.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