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

package/stories/Icon/Icon.stories.jsx

@@ -1,12 +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, EachParentType, parentTypesParams } 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 '../../src'
 
 export default {
   title: 'Base/Icon',
-  component: AccessibleIcon,
+  component: Icon,
   argTypes: {
     label: {
       type: {
@@ -30,21 +32,35 @@ export default {
   }
 }
 
-export const ExampleIcon = (args) => <AccessibleIcon {...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 ParentTypes = (args) => (
   <EachParentType {...args}>
-    {({ label }) => <AccessibleIcon {...args} label={label} />}
+    {({ label }) => <Icon icon={AccessibleIcon} {...args} label={label} />}
   </EachParentType>
 )
 ParentTypes.parameters = parentTypesParams
@@ -55,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 '../../src'
+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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import InputLabel from '../../lib/InputLabel/InputLabel'
+import InputLabel from '../../src/InputLabel/InputLabel'
 
 export default {
   title: 'Base/InputLabel',

package/stories/Link/ChevronLink.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { ChevronLink } from '../../lib'
+import { ChevronLink } from '../../src'
 import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {

package/stories/Link/Link.stories.jsx

@@ -2,12 +2,10 @@
 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, Typography, variantProp } from '../../lib'
-import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
+import { Link, Typography, variantProp } from '../../src'
+import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
   title: 'Base/Link',
@@ -34,17 +32,17 @@ 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>
 )
 
@@ -55,21 +53,19 @@ 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' }
-
-export const EveryIcon = EveryIconTemplate.bind({})
+IconRight.args = { icon: AccessibleIcon, iconPosition: 'right' }
 
 export const InText = (args) => (
   <Typography>
     Some text containing a{' '}
-    <Link icon={SampleIcon} iconPosition="left" {...args}>
+    <Link icon={AccessibleIcon} iconPosition="left" {...args}>
       left icon link
     </Link>
     , alongside a{' '}
-    <Link icon={SampleIcon} iconPosition="right" {...args}>
+    <Link icon={AccessibleIcon} iconPosition="right" {...args}>
       right icon link
     </Link>
     , and also with a <Link {...args}>text link</Link>, all inline in text.

package/stories/Link/TextButton.stories.jsx

@@ -6,7 +6,7 @@ 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 { TextButton, variantProp } from '../../lib'
+import { TextButton, variantProp } from '../../src'
 import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
 
 export default {

package/stories/List/List.stories.jsx

@@ -6,7 +6,7 @@ import { StyleSheet, Text } from 'react-native'
 import { Checkmark, ThumbsUp, Baby } from '@telus-uds/palette-allium/build/rn/icons'
 import { useVariants, Container } from '../supports'
 
-import { List, Typography } from '../../lib'
+import { List, Typography } from '../../src'
 
 export default {
   title: 'Base/List',

package/stories/Modal/Modal.stories.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+
+import { Button, Modal, Spacer, Typography } from '../../src'
+
+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 '../../src'
+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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { Pagination, Typography } from '../../lib'
+import { Pagination, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/Progress/Progress.stories.jsx

@@ -0,0 +1,93 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import { Progress, StackView, Typography } from '../../src'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/Progress',
+  component: Progress.Bar,
+  args: { accessibilityLabel: 'Progress Bar' }
+}
+
+export const Default = (args) => (
+  <Progress>
+    <Progress.Bar {...args} />
+  </Progress>
+)
+Default.storyName = 'Example'
+Default.args = { percentage: 50 }
+Default.argTypes = {
+  percentage: { control: { type: 'range', min: 0, max: 100 } }
+}
+
+export const Variants = () => (
+  <Container>
+    <StackView>
+      <Progress>
+        <Progress.Bar
+          percentage={25}
+          variant={{ inactive: true }}
+          accessibilityLabel="Inactive progress bar"
+        />
+      </Progress>
+      <Progress>
+        <Progress.Bar
+          percentage={50}
+          variant={{ negative: true }}
+          accessibilityLabel="Negative progress bar"
+        />
+      </Progress>
+      <Progress>
+        <Progress.Bar percentage={75} accessibilityLabel="Progress bar" />
+      </Progress>
+      <Progress variant={{ size: 'mini' }}>
+        <Progress.Bar
+          percentage={25}
+          variant={{ inactive: true }}
+          accessibilityLabel="Inactive progress bar"
+        />
+      </Progress>
+      <Progress variant={{ size: 'mini' }}>
+        <Progress.Bar
+          percentage={50}
+          variant={{ negative: true }}
+          accessibilityLabel="Negative progress bar"
+        />
+      </Progress>
+      <Progress variant={{ size: 'mini' }}>
+        <Progress.Bar
+          percentage={75}
+          variant={{ size: 'mini' }}
+          accessibilityLabel="Minimal progress bar"
+        />
+      </Progress>
+    </StackView>
+  </Container>
+)
+
+export const StackedBars = () => (
+  <Progress>
+    <Progress.Bar
+      percentage={75}
+      variant={{ inactive: true }}
+      accessibilityLabel="Stacked inactive progress bar"
+    />
+    <Progress.Bar percentage={50} accessibilityLabel="Stacked progress bar" />
+  </Progress>
+)
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="ProgressBar" {...args}>
+    {({ label, variant }) => (
+      <Container key={label}>
+        <Typography>{`${label} `}</Typography>
+        <Progress>
+          <Progress.Bar {...args} variant={variant} accessibilityLabel={label} />
+        </Progress>
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = { percentage: 75 }

package/stories/Radio/Radio.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
+import React from 'react'
 
-import { Radio, StackView, Typography } from '../../lib'
+import { Radio, RadioGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
@@ -55,40 +55,27 @@ WithDescription.args = {
   description: 'This is a description'
 }
 
-export const RadioGroup = (args) => {
-  const [value, setValue] = useState(1)
-  const handleChange = (val) => () => setValue(val)
-
-  return (
-    <Container>
-      <StackView accessibilityRole="radiogroup">
-        <Radio
-          {...args}
-          checked={value === 1}
-          label="Radio1"
-          onChange={handleChange(1)}
-          name="group"
-          value={1}
-        />
-        <Radio
-          {...args}
-          checked={value === 2}
-          label="Radio2"
-          onChange={handleChange(2)}
-          name="group"
-          value={2}
-        />
-        <Radio
-          {...args}
-          checked={value === 3}
-          label="Radio3"
-          onChange={handleChange(3)}
-          name="group"
-          value={3}
-        />
-      </StackView>
-    </Container>
-  )
+export const RadioGroupStory = (args) => <RadioGroup {...args} />
+RadioGroupStory.storyName = 'RadioGroup'
+RadioGroupStory.args = {
+  items: [
+    {
+      label: 'Radio Card 1'
+    },
+    {
+      label: 'Radio Card 2'
+    },
+    {
+      label: 'Radio Card 3'
+    },
+    {
+      label: 'Radio Card 4'
+    }
+  ],
+  legend: 'Choose a radio button.',
+  hint: 'Of the radio buttons below, choose one.',
+  tooltip: 'Decide which radio button you like best, then press it.',
+  name: 'example'
 }
 
 export const ParentTypes = (args) => (

package/stories/RadioCard/RadioCard.stories.jsx

@@ -0,0 +1,98 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import { RadioCard, RadioCardGroup, Typography } from '../../src'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/RadioCard',
+  component: RadioCard
+}
+
+const additionalContent = (
+  <>
+    <Typography>First line</Typography>
+    <Typography>Second line</Typography>
+  </>
+)
+
+export const Default = (args) => <RadioCard {...args} />
+Default.args = {
+  title: 'Radio card',
+  children: additionalContent
+}
+Default.storyName = 'RadioCard'
+
+export const RadioCardGroupStory = (args) => <RadioCardGroup {...args} />
+RadioCardGroupStory.storyName = 'RadioCardGroup'
+RadioCardGroupStory.args = {
+  items: [
+    {
+      title: 'Radio Card 1',
+      content: (
+        <>
+          <Typography>First line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 2',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 3',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+          <Typography>Third line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 4',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 5',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+          <Typography>Third line</Typography>
+          <Typography>Fourth line</Typography>
+        </>
+      )
+    }
+  ],
+  legend: 'Choose a radio card.',
+  hint: 'Of the radio cards below, choose one.',
+  tooltip: 'Decide which radio card you like best, then press it.',
+  name: 'example'
+}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Radio" {...args}>
+    {({ label, variant }) => (
+      <Container key={label}>
+        <RadioCard {...args} variant={variant} title={label}>
+          {additionalContent}
+        </RadioCard>
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = {
+  defaultChecked: undefined
+}

package/stories/Search/Search.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Search } from '../../src'
+
+export default {
+  title: 'Base/Search',
+  component: Search
+}
+
+const Template = (args) => <Search {...args} />
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Inactive = Template.bind({})
+Inactive.args = { inactive: true }

package/stories/Select/Select.stories.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Text } from 'react-native'
 
-import { Select } from '../../lib'
+import { Select } from '../../src'
 
 export default {
   title: 'Base/Select',

package/stories/SideNav/SideNav.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/SideNav/SideNavItem.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 
 export default {
   title: 'Base/SideNav/Item',

package/stories/SideNav/SideNavItemsGroup.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 
 export default {
   title: 'Base/SideNav/Items Group',