@telus-uds/components-base 1.0.0 → 1.2.0

package/stories/Feedback/Feedback.stories.jsx

@@ -5,7 +5,7 @@ import { Feedback, Typography, TextInput } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Feedback',
+  title: 'Feedback',
   component: Feedback
 }
 

package/stories/FlexGrid/01 FlexGrid.stories.jsx

@@ -7,7 +7,7 @@ import { Placeholder, EachParentType, parentTypesParams } from '../supports'
 const { Row, Col } = FlexGrid
 
 export default {
-  title: 'Base/FlexGrid/FlexGrid',
+  title: 'FlexGrid/FlexGrid',
   component: FlexGrid
 }
 

package/stories/FlexGrid/02 Row.stories.jsx

@@ -6,7 +6,7 @@ import { Placeholder } from '../supports'
 const { Row, Col } = FlexGrid
 
 export default {
-  title: 'Base/FlexGrid/Row',
+  title: 'FlexGrid/Row',
   component: Row
 }
 

package/stories/FlexGrid/03 Col.stories.jsx

@@ -6,7 +6,7 @@ import { Placeholder } from '../supports'
 const { Row, Col } = FlexGrid
 
 export default {
-  title: 'Base/FlexGrid/Col',
+  title: 'FlexGrid/Col',
   component: Col,
   argTypes: {
     xs: {

package/stories/Icon/Icon.stories.jsx

@@ -7,7 +7,7 @@ import { Container, useVariants, EachIcon, EachParentType, parentTypesParams } f
 import { Icon, StackWrap, Tooltip } from '../../src'
 
 export default {
-  title: 'Base/Icon',
+  title: 'Icon',
   component: Icon,
   argTypes: {
     label: {

package/stories/IconButton/IconButton.stories.jsx

@@ -8,7 +8,7 @@ import { Box, IconButton, StackView } from '../../src'
 import { useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/IconButton',
+  title: 'IconButton',
   component: IconButton
 }
 

package/stories/InputLabel/InputLabel.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import InputLabel from '../../src/InputLabel/InputLabel'
 
 export default {
-  title: 'Base/InputLabel',
+  title: 'InputLabel',
   component: InputLabel
 }
 

package/stories/Link/ChevronLink.stories.jsx

@@ -5,7 +5,7 @@ import { ChevronLink } from '../../src'
 import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
-  title: 'Base/ChevronLink',
+  title: 'ChevronLink',
   component: ChevronLink,
   args: {
     href: 'https://example.com'

package/stories/Link/Link.stories.jsx

@@ -8,7 +8,7 @@ import { Link, Typography, variantProp } from '../../src'
 import { Container, EachIcon, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
-  title: 'Base/Link',
+  title: 'Link',
   component: Link,
   args: {
     href: `https://telus.com/?unvisited:${Date.now()}`,

package/stories/Link/TextButton.stories.jsx

@@ -10,7 +10,7 @@ import { TextButton, variantProp } from '../../src'
 import { Container, EachParentType, useVariants, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/TextButton',
+  title: 'TextButton',
   component: TextButton,
   args: {
     // eslint-disable-next-line no-console

package/stories/List/List.stories.jsx

@@ -9,7 +9,7 @@ import { useVariants, Container } from '../supports'
 import { List, Typography } from '../../src'
 
 export default {
-  title: 'Base/List',
+  title: 'List',
   component: List
 }
 

package/stories/Modal/Modal.stories.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { Button, Modal, Spacer, Typography } from '../../src'
 
 export default {
-  title: 'Base/Modal',
+  title: 'Modal',
   component: Modal
 }
 

package/stories/Notification/Notification.stories.jsx

@@ -6,7 +6,7 @@ import { Link, Notification, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Notification',
+  title: 'Notification',
   component: Notification
 }
 

package/stories/Pagination/Pagination.stories.jsx

@@ -6,7 +6,7 @@ import { Pagination, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Pagination',
+  title: 'Pagination',
   component: Pagination
 }
 

package/stories/Progress/Progress.stories.jsx

@@ -5,7 +5,7 @@ import { Progress, StackView, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Progress',
+  title: 'Progress',
   component: Progress.Bar,
   args: { accessibilityLabel: 'Progress Bar' }
 }

package/stories/Radio/Radio.stories.jsx

@@ -5,7 +5,7 @@ import { Radio, RadioGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Radio',
+  title: 'Radio',
   component: Radio,
   argTypes: {
     checked: {

package/stories/RadioCard/RadioCard.stories.jsx

@@ -5,7 +5,7 @@ import { RadioCard, RadioCardGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/RadioCard',
+  title: 'RadioCard',
   component: RadioCard
 }
 

package/stories/Search/Search.stories.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Search } from '../../src'
 
 export default {
-  title: 'Base/Search',
+  title: 'Search',
   component: Search
 }
 

package/stories/Select/Select.stories.jsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native'
 import { Select } from '../../src'
 
 export default {
-  title: 'Base/Select',
+  title: 'Select',
   component: Select
 }
 

package/stories/SideNav/SideNav.stories.jsx

@@ -5,7 +5,7 @@ import { SideNav } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/SideNav',
+  title: 'SideNav',
   component: SideNav
 }
 

package/stories/SideNav/SideNavItem.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SideNav } from '../../src'
 
 export default {
-  title: 'Base/SideNav/Item',
+  title: 'SideNav/Item',
   component: SideNav.Item
 }
 

package/stories/SideNav/SideNavItemsGroup.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SideNav } from '../../src'
 
 export default {
-  title: 'Base/SideNav/Items Group',
+  title: 'SideNav/Items Group',
   component: SideNav.ItemsGroup
 }
 

package/stories/Skeleton/Skeleton.stories.jsx

@@ -6,7 +6,7 @@ import StackView from '../../src/StackView'
 import { Skeleton } from '../../src'
 
 export default {
-  title: 'Base/Skeleton',
+  title: 'Skeleton',
   component: Skeleton
 }
 

package/stories/Spacer/Spacer.stories.jsx

@@ -6,7 +6,7 @@ import { Spacer, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Spacer',
+  title: 'Spacer',
   component: Spacer
 }
 

package/stories/StackView/StackView.stories.jsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { StackView, Card, Typography, Button } from '../../src'
 
 export default {
-  title: 'Base/StackView',
+  title: 'StackView',
   component: StackView
 }
 

package/stories/StackView/StackWrap.stories.jsx

@@ -5,7 +5,7 @@ import { StyleSheet, View } from 'react-native'
 import { StackWrap, Button } from '../../src'
 
 export default {
-  title: 'Base/StackWrap',
+  title: 'StackWrap',
   component: StackWrap
 }
 

package/stories/StepTracker/StepTracker.stories.jsx

@@ -14,7 +14,7 @@ const steps = [
 const longTitle = 'Example of a really long step title that wraps'
 
 export default {
-  title: 'Base/StepTracker',
+  title: 'StepTracker',
   component: StepTracker,
   args: {
     steps

package/stories/Tabs/Tabs.stories.jsx

@@ -5,7 +5,7 @@ import { Platform } from 'react-native'
 import { Link, StackView, Tabs, Typography } from '../../src'
 
 export default {
-  title: 'Base/Tabs',
+  title: 'Tabs',
   component: Tabs
 }
 

package/stories/Tags/Tags.stories.jsx

@@ -22,7 +22,7 @@ const defaultControlledArgs = {
 }
 
 export default {
-  title: 'Base/Tags',
+  title: 'Tags',
   component: Tags,
   args: {
     ...defaultArgs

package/stories/TextInput/TextArea.stories.jsx

@@ -1,10 +1,11 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from 'react'
 
 import { TextArea } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/TextArea',
+  title: 'TextArea',
   component: TextArea
 }
 

package/stories/TextInput/TextInput.stories.jsx

@@ -4,7 +4,7 @@ import { TextInput } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/TextInput',
+  title: 'TextInput',
   component: TextInput
 }
 

package/stories/ToggleSwitch/ToggleSwitch.stories.jsx

@@ -8,8 +8,12 @@ export const Default = (args) => <ToggleSwitch {...args} />
 Default.storyName = 'ToggleSwitch'
 
 export default {
-  title: 'Base/ToggleSwitch',
-  component: ToggleSwitch
+  title: 'ToggleSwitch',
+  component: ToggleSwitch,
+  args: {
+    label: 'Enable data',
+    tooltip: 'Toggle this on to enable data'
+  }
 }
 
 export const ToggleSwitchControlled = (args) => {

package/stories/ToggleSwitch/ToggleSwitchGroup.stories.jsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { View } from 'react-native'
+import { ToggleSwitchGroup, Typography } from '../../src'
+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: 'ToggleSwitchGroup',
+  component: ToggleSwitchGroup,
+  args: {
+    ...defaultArgs
+  }
+}
+
+const UncontrolledTemplate = (args) => <ToggleSwitchGroup {...args} />
+UncontrolledTemplate.propTypes = ToggleSwitchGroup.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 IDs: "${currentValues.join('", "')}".`
+  return (
+    <View>
+      <Container padding={4} margin={0}>
+        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
+      </Container>
+      <Container padding={4} margin={0}>
+        <ToggleSwitchGroup {...args} values={currentValues} onChange={handleChange} />
+      </Container>
+    </View>
+  )
+}
+
+ControlledTemplate.propTypes = ToggleSwitchGroup.propTypes
+
+export const Default = UncontrolledTemplate.bind({})
+Default.storyName = 'ToggleSwitchGroup'
+
+export const ToggleSwitchGroupMaxThree = UncontrolledTemplate.bind({})
+ToggleSwitchGroupMaxThree.args = { maxValues: 3 }
+
+export const ToggleSwitchGroupMaxUnlimited = UncontrolledTemplate.bind({})
+ToggleSwitchGroupMaxUnlimited.args = { maxValues: null }
+
+export const ToggleSwitchGroupControlled = ControlledTemplate.bind({})
+ToggleSwitchGroupControlled.args = { ...defaultControlledArgs }
+
+export const ToggleSwitchGroupControlledMaxThree = ControlledTemplate.bind({})
+ToggleSwitchGroupControlledMaxThree.args = { ...defaultControlledArgs, maxValues: 3 }
+
+export const ToggleSwitchGroupControlledMaxUnlimited = ControlledTemplate.bind({})
+ToggleSwitchGroupControlledMaxUnlimited.args = { ...defaultControlledArgs, maxValues: null }
+
+export const ToggleSwitchGroupInactive = UncontrolledTemplate.bind({})
+ToggleSwitchGroupInactive.args = { inactive: true }

package/stories/Tooltip/Tooltip.stories.jsx

@@ -7,7 +7,7 @@ import { Tooltip, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
-  title: 'Base/Tooltip',
+  title: 'Tooltip',
   component: Tooltip
 }
 

package/stories/TooltipButton/TooltipButton.stories.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { TooltipButton } from '../../src'
 
 export default {
-  title: 'Base/TooltipButton',
+  title: 'TooltipButton',
   component: TooltipButton
 }
 

package/stories/Typography/Typography.stories.jsx

@@ -10,7 +10,7 @@ Default.storyName = 'Typography'
 const defaultChildren = 'The quick brown fox jumps over the lazy dog'
 
 export default {
-  title: 'Base/Typography',
+  title: 'Typography',
   component: Typography,
   args: {
     children: defaultChildren

package/stories/supports.jsx

@@ -3,12 +3,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, ScrollView, Text, View, StyleSheet } from 'react-native'
 
-// eslint-disable-next-line import/no-extraneous-dependencies
+/* eslint-disable import/no-extraneous-dependencies */
 import * as alliumIcons from '@telus-uds/palette-allium/build/rn/icons'
-// eslint-disable-next-line import/no-extraneous-dependencies
 import * as koodoIcons from '@telus-uds/palette-koodo/build/rn/icons'
-// eslint-disable-next-line import/no-extraneous-dependencies
 import * as pmIcons from '@telus-uds/palette-public-mobile/build/rn/icons'
+/* eslint-enable import/no-extraneous-dependencies */
 
 import { useTheme, getComponentTheme } from '../src/ThemeProvider'
 import { Typography } from '../src'