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

package/stories/ExpandCollapse/ExpandCollapse.stories.jsx

@@ -1,14 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  Accordion as AccordionComponent,
-  ButtonGroup,
-  Divider,
-  ExpandCollapse,
-  Typography
-} from '../../lib'
-import { Container } from '../supports'
+import { Accordion, ButtonGroup, ExpandCollapse, StackView, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
 import { useMultipleInputValues } from '../../lib/utils'
 
 export default {
@@ -27,48 +21,42 @@ SimpleText.propTypes = {
   children: PropTypes.node
 }
 
-const getTemplate = (ExpandComponent = ExpandCollapse) => {
-  const Template = (args) => (
-    <ExpandComponent {...args}>
-      {(expandProps) => (
-        <>
-          <Divider />
-          <ExpandCollapse.Panel
-            {...expandProps}
-            panelId="first"
-            control={<SimpleText bold>First panel</SimpleText>}
-          >
-            <SimpleText>Some content within the first panel</SimpleText>
-          </ExpandCollapse.Panel>
-          <Divider />
-          <ExpandCollapse.Panel
-            {...expandProps}
-            panelId="second"
-            control={<SimpleText bold>Second panel</SimpleText>}
-          >
-            <SimpleText>Some content within the second panel</SimpleText>
-          </ExpandCollapse.Panel>
-          <Divider />
-          <Container>
-            <SimpleText>Non-interactive item</SimpleText>
-          </Container>
-          <Divider />
-          <ExpandCollapse.Panel
-            {...expandProps}
-            panelId="third"
-            control={<SimpleText bold>Last panel</SimpleText>}
-          >
-            <SimpleText>Some content within the last panel</SimpleText>
-          </ExpandCollapse.Panel>
-        </>
-      )}
-    </ExpandComponent>
-  )
-  return Template
-}
+const exampleRenderFunction = (expandProps, label = 'Non-interactive item') => (
+  <StackView divider space={2}>
+    <ExpandCollapse.Panel
+      {...expandProps}
+      panelId="first"
+      control={<SimpleText bold>First panel</SimpleText>}
+    >
+      <SimpleText>Some content within the first panel</SimpleText>
+    </ExpandCollapse.Panel>
+    <ExpandCollapse.Panel
+      {...expandProps}
+      panelId="second"
+      control={<SimpleText bold>Second panel</SimpleText>}
+    >
+      <SimpleText>Some content within the second panel</SimpleText>
+    </ExpandCollapse.Panel>
+    <Container>
+      <SimpleText>{label}</SimpleText>
+    </Container>
+    <ExpandCollapse.Panel
+      {...expandProps}
+      panelId="third"
+      control={<SimpleText bold>Last panel</SimpleText>}
+    >
+      <SimpleText>Some content within the last panel</SimpleText>
+    </ExpandCollapse.Panel>
+  </StackView>
+)
 
-export const Default = getTemplate()
-export const Accordion = getTemplate(AccordionComponent)
+export const Default = (args) => <ExpandCollapse {...args} />
+Default.storyName = 'ExpandCollapse'
+Default.args = { children: exampleRenderFunction }
+
+export const AccordionStory = (args) => <Accordion {...args} />
+AccordionStory.storyName = 'Accordion'
+AccordionStory.args = { children: exampleRenderFunction }
 
 // This is an edge case but TDS's ExpandCollapse only worked in this externally-controlled
 // way, so supporting it cleanly will make transition easier at low cost. Button group
@@ -79,39 +67,46 @@ export const Controlled = ({ maxOpen = null, ...args }) => {
   })
   const itemNames = ['one', 'two', 'three', 'four']
   return (
-    <>
-      <Container>
-        <ButtonGroup
-          items={itemNames.map((item) => ({
-            label: item
-          }))}
-          maxValues={null}
-          values={currentValues}
-          onChange={setValues}
-        />
-      </Container>
-      <Container>
-        <ExpandCollapse {...args} open={currentValues} onChange={setValues} maxValues={maxOpen}>
-          {(expandProps) =>
-            itemNames.map((itemName) => (
-              <>
-                <Divider />
-                <ExpandCollapse.Panel
-                  {...expandProps}
-                  panelId={itemName}
-                  control={<SimpleText bold>{itemName}</SimpleText>}
-                >
-                  <SimpleText>{`Some content within panel number ${itemName}`}</SimpleText>
-                </ExpandCollapse.Panel>
-              </>
-            ))
-          }
-        </ExpandCollapse>
-      </Container>
-    </>
+    <StackView space={6}>
+      <ButtonGroup
+        items={itemNames.map((item) => ({
+          label: item
+        }))}
+        maxValues={null}
+        values={currentValues}
+        onChange={setValues}
+      />
+      <ExpandCollapse {...args} open={currentValues} onChange={setValues} maxValues={maxOpen}>
+        {(expandProps) => (
+          <StackView divider>
+            {itemNames.map((itemName) => (
+              <ExpandCollapse.Panel
+                {...expandProps}
+                key={itemName}
+                panelId={itemName}
+                control={<SimpleText bold>{itemName}</SimpleText>}
+              >
+                <SimpleText>{`Some content within panel number ${itemName}`}</SimpleText>
+              </ExpandCollapse.Panel>
+            ))}
+          </StackView>
+        )}
+      </ExpandCollapse>
+    </StackView>
   )
 }
 Controlled.propTypes = {
   maxOpen: PropTypes.number
 }
 Controlled.args = {}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="ExpandCollapse" {...args}>
+    {({ label, variant }) => (
+      <ExpandCollapse {...args} variant={variant}>
+        {(expandProps) => exampleRenderFunction(expandProps, label)}
+      </ExpandCollapse>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

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,14 @@
+/* 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 { StyleSheet, Text, View } from 'react-native'
+
+import AccessibleIcon from '../../__fixtures__/Accessible'
+import { Container, useVariants, EachIcon, EachParentType, parentTypesParams } from '../supports'
+import { Icon, StackWrap, Tooltip } from '../../lib'
 
 export default {
   title: 'Base/Icon',
-  component: AccessibleIcon,
+  component: Icon,
   argTypes: {
     label: {
       type: {
@@ -29,17 +32,38 @@ export default {
   }
 }
 
-const Template = (args) => {
+export const ExampleIcon = (args) => <Icon icon={AccessibleIcon} {...args} />
+
+export const EveryIcon = (args) => (
+  <StackWrap space={0}>
+    <EachIcon>
+      {([iconName, IconComponent]) => (
+        <View key={iconName} style={styles.border}>
+          <Tooltip content={iconName}>
+            <Icon icon={IconComponent} {...args} />
+          </Tooltip>
+        </View>
+      )}
+    </EachIcon>
+  </StackWrap>
+)
+
+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: {
@@ -47,5 +71,9 @@ const styles = StyleSheet.create({
     color: 'rgb(180, 180, 180)',
     fontWeight: '700',
     marginVertical: 16
+  },
+  border: {
+    borderWidth: 8,
+    borderColor: '#efefef'
   }
 })

package/stories/IconButton/IconButton.stories.jsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import { Add } from '@telus-uds/palette-allium/build/rn/icons'
+
+import { Box, IconButton, StackView } from '../../lib'
+import { useVariants, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/IconButton',
+  component: IconButton
+}
+
+export const Default = (args) => <IconButton {...args} />
+Default.storyName = 'IconButton'
+Default.args = {
+  icon: Add,
+  onPress: () => {}
+}
+
+export const Variants = (args) => {
+  const variants = useVariants('IconButton')
+  return (
+    <StackView space={5}>
+      {variants.map(([key, value, label]) => (
+        <Box
+          key={`${key}:${value}`}
+          space={5}
+          tokens={label === 'inverse' ? { backgroundColor: '#454545' } : null}
+        >
+          <IconButton
+            {...args}
+            variant={{ ...args.variant, [key]: value }}
+            accessibilityLabel={label}
+          />
+        </Box>
+      ))}
+    </StackView>
+  )
+}
+Variants.args = Default.args
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="IconButton" {...args}>
+    {({ label, variant }) => <IconButton {...args} variant={variant} accessibilityLabel={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = Default.args

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,13 +1,11 @@
-/* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View } 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 * as Icons from '@telus-uds/palette-allium/build/rn/icons'
+import AccessibleIcon from '../../__fixtures__/Accessible'
 
-import { Link, variantProp } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Link, Typography, variantProp } from '../../lib'
+import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/Link',
@@ -34,26 +32,59 @@ Template.propTypes = {
   variant: variantProp.propType
 }
 
-const SampleIcon = Icons.Settings
-
-const EveryIconTemplate = (args) => (
+export const EveryIcon = (args) => (
   <View>
-    {Object.entries(Icons).map(([key, Icon]) => (
-      <Container key={key}>
-        <Link key={key} icon={Icon} {...args}>
-          Link to {key}
-        </Link>
-      </Container>
-    ))}
+    <EachIcon>
+      {([iconName, IconComponent]) => (
+        <Container key={iconName}>
+          <Link key={iconName} icon={IconComponent} {...args}>
+            Link to {iconName}
+          </Link>
+        </Container>
+      )}
+    </EachIcon>
   </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' }
+IconLeft.args = { icon: AccessibleIcon, iconPosition: 'left' }
 
 export const IconRight = Template.bind({})
-IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
+IconRight.args = { icon: AccessibleIcon, iconPosition: 'right' }
+
+export const InText = (args) => (
+  <Typography>
+    Some text containing a{' '}
+    <Link icon={AccessibleIcon} iconPosition="left" {...args}>
+      left icon link
+    </Link>
+    , alongside a{' '}
+    <Link icon={AccessibleIcon} 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 EveryIcon = EveryIconTemplate.bind({})
+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 }