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

package/stories/Feedback/Feedback.stories.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react'
+import { Text } from 'react-native'
+
+import { Feedback, Typography, TextInput } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Feedback',
+  component: Feedback
+}
+
+/* eslint-disable react/no-multi-comp */
+
+const Template = (args) => (
+  <Container>
+    <Feedback {...args} />
+  </Container>
+)
+
+export const Default = Template.bind({})
+Default.args = { title: 'Title', children: 'String content' }
+Default.storyName = 'Feedback'
+
+export const RenderFunctionAndChildren = () => (
+  <>
+    <Container>
+      <Feedback title="Render function">
+        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
+      </Feedback>
+    </Container>
+    <Container>
+      <Feedback title="Children">
+        <Typography>Content from children</Typography>
+      </Feedback>
+    </Container>
+  </>
+)
+
+export const Variants = () => (
+  <>
+    <Container>
+      <Feedback validation="success" title="Success">
+        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
+      </Feedback>
+    </Container>
+    <Container>
+      <Feedback validation="success" variant={{ icon: true }} title="Success with icon">
+        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
+      </Feedback>
+    </Container>
+    <Container>
+      <Feedback validation="error" title="Error">
+        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
+      </Feedback>
+    </Container>
+    <Container>
+      <Feedback validation="error" variant={{ icon: true }} title="Error with icon">
+        {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
+      </Feedback>
+    </Container>
+  </>
+)
+
+export const WithinInput = () => {
+  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/FlexGrid/01 FlexGrid.stories.jsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 
 import { FlexGrid } from '../../lib'
-import { Placeholder } from '../supports'
+import { Placeholder, EachParentType, parentTypesParams } from '../supports'
 
 const { Row, Col } = FlexGrid
 
@@ -10,11 +11,11 @@ export default {
   component: FlexGrid
 }
 
-const Template = (args) => (
-  <FlexGrid {...args}>
+const getContent = (label = '1/6') => (
+  <>
     <Row>
       <Col>
-        <Placeholder margin>1/6</Placeholder>
+        <Placeholder margin>{label}</Placeholder>
       </Col>
       <Col>
         <Placeholder margin>2/6</Placeholder>
@@ -34,8 +35,20 @@ const Template = (args) => (
         <Placeholder margin>6/6</Placeholder>
       </Col>
     </Row>
-  </FlexGrid>
+  </>
 )
 
-export const Example = Template.bind({})
-Example.storyName = 'FlexGrid'
+export const Default = (args) => <FlexGrid {...args} />
+Default.storyName = 'FlexGrid'
+Default.args = { children: getContent() }
+
+export const ParentTypes = (args) => (
+  <EachParentType {...args}>
+    {({ label, variant }) => (
+      <FlexGrid {...args} variant={variant}>
+        {getContent(label)}
+      </FlexGrid>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Icon/Icon.stories.jsx

@@ -1,11 +1,13 @@
+/* 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 AccessibleIcon from '../../__fixtures__/Accessible'
+import { Icon } from '../../lib'
+import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/Icon',
-  component: AccessibleIcon,
+  component: Icon,
   argTypes: {
     label: {
       type: {
@@ -29,17 +31,24 @@ export default {
   }
 }
 
-const Template = (args) => {
+export const ExampleIcon = (args) => <Icon icon={AccessibleIcon} {...args} />
+
+export const IconVariants = (args) => {
   const variants = useVariants('Icon')
   return variants.map(([key, value, label]) => (
     <Container key={label} dark={value === 'white'}>
       <Text style={styles.subtle}>{label}</Text>
-      <AccessibleIcon {...args} variant={{ [key]: value }} />
+      <Icon icon={AccessibleIcon} {...args} variant={{ [key]: value }} />
     </Container>
   ))
 }
 
-export const Icon = Template.bind({})
+export const ParentTypes = (args) => (
+  <EachParentType {...args}>
+    {({ label }) => <Icon icon={AccessibleIcon} {...args} label={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
 
 const styles = StyleSheet.create({
   subtle: {

package/stories/InputLabel/InputLabel.stories.jsx

@@ -0,0 +1,42 @@
+/* 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="This is the tooltip's content"
+  />
+)
+
+export const HintInlineLong = () => (
+  <InputLabel
+    label="Test label"
+    hint="A rather long hint that won't actually fit"
+    hintPosition="inline"
+    tooltip="This is the tooltip's content"
+  />
+)
+
+export const HintBelow = () => (
+  <InputLabel
+    label="Test label"
+    hint="A rather long hint that won't actually fit"
+    hintPosition="below"
+    tooltip="This is the tooltip's content"
+  />
+)

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 RightDirection = Template.bind({})
+
+export const LeftDirection = Template.bind({})
+LeftDirection.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,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } from 'react-native'
 
@@ -5,8 +6,8 @@ import { View } from 'react-native'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
 
-import { Link, variantProp } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Link, Typography, variantProp } from '../../lib'
+import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/Link',
@@ -47,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' }
@@ -56,3 +61,34 @@ export const IconRight = Template.bind({})
 IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
 
 export const EveryIcon = EveryIconTemplate.bind({})
+
+export const InText = (args) => (
+  <Typography>
+    Some text containing a{' '}
+    <Link icon={SampleIcon} iconPosition="left" {...args}>
+      left icon link
+    </Link>
+    , alongside a{' '}
+    <Link icon={SampleIcon} iconPosition="right" {...args}>
+      right icon link
+    </Link>
+    , and also with a <Link {...args}>text link</Link>, all inline in text.
+  </Typography>
+)
+
+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,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } from 'react-native'
 
@@ -6,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',
@@ -46,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 }
@@ -55,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/List/List.stories.jsx

@@ -0,0 +1,117 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+// TODO: move icon-specific stories to Allium storybook and add generic/default icons
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Checkmark, ThumbsUp, Baby } from '@telus-uds/palette-allium/build/rn/icons'
+import { useVariants, Container } from '../supports'
+
+import { List, Typography } from '../../lib'
+
+export default {
+  title: 'Base/List',
+  component: List
+}
+
+const styles = StyleSheet.create({
+  variantsTitle: {
+    marginBottom: 10,
+    fontSize: 20,
+    textTransform: 'capitalize'
+  }
+})
+
+const Template = () => {
+  const variants = useVariants('List')
+
+  return variants.map(([key, value, label]) => (
+    <Container key={label} dark={value === 'white'} padding={16}>
+      <Text style={styles.variantsTitle}>{label}</Text>
+      <List variant={{ [key]: value }}>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+        <List.Item>List item, {label}</List.Item>
+      </List>
+    </Container>
+  ))
+}
+
+export const Default = (args) => {
+  const { itemIcon, mixedIcons, iconColor } = args
+  return (
+    <List {...args}>
+      <List.Item iconColor={iconColor} icon={itemIcon}>
+        Some Item
+      </List.Item>
+      <List.Item iconColor={iconColor} icon={!mixedIcons ? itemIcon : null}>
+        Some Item
+      </List.Item>
+      <List.Item iconColor={iconColor} icon={!mixedIcons ? itemIcon : null}>
+        Some Item
+      </List.Item>
+      <List.Item iconColor={iconColor} icon={itemIcon}>
+        Some Item
+      </List.Item>
+    </List>
+  )
+}
+Default.storyName = 'Default'
+
+export const Variants = Template.bind({})
+
+export const WithIcon = (args) => {
+  return (
+    <List {...args} variant={{ size: 'medium' }}>
+      <List.Item iconColor="green" icon={Checkmark}>
+        Some Item
+      </List.Item>
+      <List.Item>No Icon</List.Item>
+      <List.Item icon={ThumbsUp}>Different Icon</List.Item>
+    </List>
+  )
+}
+
+export const WithDivider = (args) => {
+  return (
+    <List {...args} showDivider>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography>Change the icon</Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography>Change the icon</Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography>Change the icon</Typography>
+      </List.Item>
+    </List>
+  )
+}
+
+export const WithHeadingAndDivider = (args) => {
+  return (
+    <List {...args} showDivider>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography variant={{ bold: true }}>Watch in glorious HD TV</Typography>
+        <Typography>
+          Optik TV puts you in the middle of the action, with the highest picture quality available.
+        </Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography variant={{ bold: true }}>Must use TELUS purple</Typography>
+        <Typography>
+          With a PVR capacity of 400 hours for HD and 100 hours for 4K, you’ll have lots of time to
+          catch up.
+        </Typography>
+      </List.Item>
+      <List.Item icon={Baby} iconSize={25}>
+        <Typography variant={{ bold: true }}>Emphasize points</Typography>
+        <Typography>
+          Did life get in the way of the game? Did you miss it all together? Replay up to 30 hours
+          after it’s aired.
+        </Typography>
+      </List.Item>
+    </List>
+  )
+}

package/stories/Modal/Modal.stories.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+
+import { Button, Modal, Spacer, Typography } from '../../lib'
+
+export default {
+  title: 'Base/Modal',
+  component: Modal
+}
+
+export const Default = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isMaxWidthOpen, setIsMaxWidthOpen] = useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setIsOpen(true)}>Open modal</Button>
+      <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Typography>Test content</Typography>
+      </Modal>
+      <Spacer space={3} />
+      <Button onPress={() => setIsMaxWidthOpen(true)}>Open maxWidth modal</Button>
+      <Modal {...args} isOpen={isMaxWidthOpen} onClose={() => setIsMaxWidthOpen(false)} maxWidth>
+        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
+        <Typography>Test content</Typography>
+      </Modal>
+    </>
+  )
+}
+Default.storyName = 'Modal'

package/stories/Notification/Notification.stories.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+import { Text } from 'react-native'
+
+import { Link, Notification, Typography } from '../../lib'
+import { Container } from '../supports'
+
+export default {
+  title: 'Base/Notification',
+  component: Notification
+}
+
+const Template = (args) => <Notification {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: 'Your password was updated successfully.'
+}
+
+export const Variants = () => {
+  const variants = [{}, { style: 'success' }, { style: 'warning' }, { style: 'error' }]
+  const propSets = [
+    {},
+    { system: true },
+    { dismissible: true },
+    { system: true, dismissible: true }
+  ]
+
+  const combinations = variants.flatMap((variant) => {
+    return propSets.map((propSet) => ({ variant, ...propSet }))
+  })
+
+  return combinations.map((props) => {
+    const label = [
+      props.variant.style ?? 'default',
+      props.system && 'system',
+      props.dismissible && 'dismissible'
+    ]
+      .filter((value) => value)
+      .join(' ')
+
+    return (
+      <Container key={label}>
+        <Text>{label}</Text>
+        <Notification {...props}>
+          Tip: These services are best suited for large business organizations. Order products and
+          services at TELUS.com.
+        </Notification>
+      </Container>
+    )
+  })
+}
+
+export const ContentTypes = () => {
+  return (
+    <>
+      <Container>
+        <Notification>A regular string content.</Notification>
+      </Container>
+      <Container>
+        <Notification>
+          <Typography>
+            Text components content. <Link href="https://telus.com/uds">Combined with a link.</Link>
+          </Typography>
+        </Notification>
+      </Container>
+      <Container>
+        <Notification variant={{ customVariant: true }}>
+          {({ textStyles, variant }) => (
+            <Text style={textStyles}>
+              A render function, to apply component styles and variant ({Object.keys(variant)[0]})
+              to Text and{' '}
+              <Link href="https://telus.com/uds" tokens={{ color: textStyles.color }}>
+                Link
+              </Link>
+            </Text>
+          )}
+        </Notification>
+      </Container>
+    </>
+  )
+}

package/stories/Pagination/Pagination.stories.jsx

@@ -1,26 +1,26 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 
 import { Pagination, Typography } from '../../lib'
-import { Container } from '../supports'
+import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/Pagination',
   component: Pagination
 }
 
-export const Default = () => (
-  <>
-    <Pagination>
-      <Pagination.PageButton href="#test" hrefAttrs={{ target: '_blank' }} />
-      <Pagination.PageButton onPress={() => {}} isActive />
-      <Pagination.PageButton onPress={() => {}} />
-      <Pagination.PageButton onPress={() => {}} />
-    </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'
 
-// eslint-disable-next-line react/no-multi-comp
-export const LocalTabs = () => {
+export const LocalTabs = ({ label, ...args }) => {
   const [activeItemIndex, setActiveItemIndex] = useState(0)
 
   const items = []
@@ -29,13 +29,16 @@ export const LocalTabs = () => {
     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>{items[activeItemIndex]}</Typography>
+        <Typography>{labelText}</Typography>
       </Container>
-      <Pagination>
+      <Pagination {...args}>
         {items.map((item, index) => (
           <Pagination.PageButton
             key={index}
@@ -48,3 +51,14 @@ export const LocalTabs = () => {
   )
   /* 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