@telus-uds/components-base 1.5.0 → 1.7.0

package/stories/InputLabel/InputLabel.stories.jsx

@@ -8,35 +8,32 @@ export default {
   component: InputLabel
 }
 
-export const Default = () => <InputLabel label="Test label" />
+export const Default = (args) => <InputLabel {...args} />
+Default.args = { label: 'Test label' }
 
-export const HintInline = () => (
-  <InputLabel label="Test label" hint="Short hint" hintPosition="inline" />
-)
+export const HintInline = (args) => <InputLabel {...args} />
+HintInline.args = { 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 HintAndTooltip = (args) => <InputLabel {...args} />
+HintAndTooltip.args = {
+  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 HintInlineLong = (args) => <InputLabel {...args} />
+HintInlineLong.args = {
+  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"
-  />
-)
+export const HintBelow = (args) => <InputLabel {...args} />
+HintBelow.args = {
+  label: 'Test label',
+  hint: "A rather long hint that won't actually fit",
+  hintPosition: 'below',
+  tooltip: "This is the tooltip's content"
+}

package/stories/Modal/Modal.stories.jsx

@@ -10,6 +10,8 @@ export default {
 export const Default = (args) => {
   const [isOpen, setIsOpen] = useState(false)
   const [isMaxWidthOpen, setIsMaxWidthOpen] = useState(false)
+  const [isCustomCloseOpen, setIsCustomCloseOpen] = useState(false)
+  const [isNoCloseOpen, setIsNoCloseOpen] = useState(false)
 
   return (
     <>
@@ -23,6 +25,29 @@ export const Default = (args) => {
         <Typography variant={{ size: 'h2' }}>Test heading</Typography>
         <Typography>Test content</Typography>
       </Modal>
+      <Spacer space={3} />
+      <Button onPress={() => setIsCustomCloseOpen(true)}>Open custom close button modal</Button>
+      <Modal
+        {...args}
+        isOpen={isCustomCloseOpen}
+        onClose={() => setIsCustomCloseOpen(false)}
+        closeButton={<Button onPress={() => setIsCustomCloseOpen(false)}>Close</Button>}
+      >
+        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
+        <Typography>Test content</Typography>
+      </Modal>
+      <Spacer space={3} />
+      <Button onPress={() => setIsNoCloseOpen(true)}>Open modal without close button</Button>
+      <Modal
+        {...args}
+        isOpen={isNoCloseOpen}
+        onClose={() => setIsNoCloseOpen(false)}
+        closeButton={null}
+      >
+        <Typography variant={{ size: 'h2' }}>Test heading</Typography>
+        <Typography>A custom close button is added in the modal content.</Typography>
+        <Button onPress={() => setIsNoCloseOpen(false)}>Close</Button>
+      </Modal>
     </>
   )
 }

package/stories/Search/Search.stories.jsx

@@ -1,10 +1,14 @@
-import React from 'react'
+/* eslint-disable react/no-multi-comp */
+import React, { useRef, useState } from 'react'
 
-import { Search } from '../../src'
+import { Search, StackView, TextButton, Typography, List, ListItem } from '../../src'
 
 export default {
   title: 'Search',
-  component: Search
+  component: Search,
+  argTypes: {
+    onSubmit: { action: 'submitted' }
+  }
 }
 
 const Template = (args) => <Search {...args} />
@@ -14,3 +18,49 @@ Default.args = {}
 
 export const Inactive = Template.bind({})
 Inactive.args = { inactive: true }
+
+// Lots of smartphone brands. No need to make the file really long, let them sit on one line.
+// eslint-disable-next-line prettier/prettier
+const options = ['Acer', 'Aermoo', 'AGM', 'Alcatel', 'Allcall', 'Allview', 'Amigoo', 'Amoi', 'Apple', 'Archos', 'Asus', 'Axgio', 'Black Shark', 'BlackBerry', 'Blackview', 'BLU', 'Bluboo', 'BQ', 'Bsimb', 'Cagabi', 'Cat', 'Caterpillar', 'Centric', 'China Mobile', 'Cong', 'Coolpad', 'Cubot', 'Dakele', 'Doogee', 'Doopro', 'E&L', 'Ecoo', 'Elephone', 'Energizer', 'Energy', 'Essential', 'EStar', 'Faea', 'Fairphone', 'Geotel', 'Gigabyte', 'Gigaset', 'Gionee', 'Gome', 'Google', 'Goophone', 'Gretel', 'Hafury', 'Haier', 'Hike', 'HiSense', 'HomTom', 'Honor', 'HP', 'HTC', 'Huawei', 'I Kall', 'iiiF150', 'iLA', 'iMan', 'iNew', 'Infinix', 'InFocus', 'InnJoo', 'Innos', 'Intex', 'iOcean', 'iRULU', 'IUNI', 'iVooMi', 'Jesy', 'Jiake', 'Jiayu', 'Karbonn', 'Kazam', 'Keecoo', 'Kenxinda', 'KingSing', 'KingZone', 'Kodak', 'Kolina', 'Koolnee', 'Landvo', 'Laude', 'Lava', 'Leagoo', 'LeEco (LeTV)', 'Lenovo', 'Leotec', 'LeRee', 'LG', 'Ly', 'Lyf', 'M-Horse', 'M-Net', 'Mann', 'Maze', 'Meiigoo', 'Meitu', 'Meizu', 'Micromax', 'Microsoft', 'Mijue', 'Milai', 'Mlais', 'Morefine', 'Motorola', 'Mpie', 'Mstar', 'MyWigo', 'Neken', 'Neo', 'Newman', 'NO.1', 'Noa', 'Nokia', 'Nomu', 'Nubia', 'Nubia Red Magic', 'NZone', 'OnePlus', 'Oppo', 'Otium', 'Oukitel', 'Palm', 'Panasonic', 'Pantech', 'Pepsi', 'Phicomm', 'Philips', 'Phonemax', 'Plunk', 'POCO', 'Pomp', 'Poptel', 'PPTV', 'Prestigio', 'Qiku', 'Ramos', 'Razer', 'realme', 'Runbo', 'Samsung', 'Sharp', 'Silent Circle', 'Siswoo', 'Smartisan', 'Snopow', 'Sony', 'Sony Ericsson', 'Star', 'Swipe', 'TCL', 'Tengda', 'THL', 'Tianhe', 'Timmy', 'TP-Link', 'Ubro', 'Uhans', 'Uhappy', 'Uimi', 'Ukozi', 'Ulefone', 'UMi', 'UMiDIGI', 'Vargo', 'Vernee', 'ViewSonic', 'Vivo', 'VKworld', 'Voto', 'VPhone', 'Vsmart', 'Weimei', 'Wico', 'Wiko', 'Wileyfox', 'Wolder', 'Woxter', 'Xiaomi', 'Xolo', 'Yota Devices', 'YU', 'Zoji', 'Zopo', 'ZTE', 'Zuk']
+
+export const Controlled = (args) => {
+  const [value, setValue] = useState('')
+  const [searchedValue, setSearchedValue] = useState(null)
+  const searchRef = useRef()
+  const selectOption = (option) => {
+    setValue(option)
+    if (searchRef.current?.focus) searchRef.current?.focus()
+  }
+
+  return (
+    <StackView space={4}>
+      {searchedValue ? (
+        <>
+          <Typography>Search results page for {searchedValue}.</Typography>
+          <Typography>{searchedValue} phones are really good. You should buy one.</Typography>
+          <TextButton onPress={() => setSearchedValue(null)}>Go back</TextButton>
+        </>
+      ) : (
+        <>
+          <Search
+            {...args}
+            value={value}
+            onChange={setValue}
+            ref={searchRef}
+            onSubmit={setSearchedValue}
+          />
+          <List>
+            {options
+              .filter((option) => !value || option.toLowerCase().match(value.toLowerCase()))
+              .map((option) => (
+                <ListItem key={option}>
+                  <TextButton onPress={() => selectOption(option)}>{option}</TextButton>
+                </ListItem>
+              ))}
+          </List>
+        </>
+      )}
+    </StackView>
+  )
+}
+Controlled.args = {}

package/stories/TextInput/TextInput.stories.jsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
+import { Platform } from 'react-native'
 
-import { TextInput } from '../../src'
+import { TextInput, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {
@@ -101,3 +102,40 @@ export const Controlled = () => {
     </>
   )
 }
+
+export const WithPattern = (args) => {
+  const [value, setValue] = useState('')
+  const inputRef = useRef(null)
+  const isEmpty = value === ''
+  const isSuccess = !isEmpty && inputRef.current.checkValidity()
+  // eslint-disable-next-line no-nested-ternary
+  const validation = isEmpty ? undefined : isSuccess ? 'success' : 'error'
+  const { pattern } = args
+  // eslint-disable-next-line no-nested-ternary
+  const feedback = isEmpty
+    ? `Enter value matching pattern: ${pattern}`
+    : isSuccess
+    ? `Success! Value matches pattern: ${pattern}`
+    : `Error! Value must match pattern: ${pattern}`
+  if (Platform.OS !== 'web') {
+    return <Typography>Pattern prop is only supported on web</Typography>
+  }
+  return (
+    <>
+      <Container>
+        <TextInput
+          {...args}
+          ref={inputRef}
+          label="Pattern"
+          validation={validation}
+          feedback={feedback}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    </>
+  )
+}
+WithPattern.args = {
+  pattern: '[1-9]{2}'
+}

package/__tests__/Link/LinkBase.test.jsx

@@ -1,22 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import LinkBase from '../../src/Link/LinkBase'
-
-beforeEach(() => jest.clearAllMocks())
-
-describe('LinkBase', () => {
-  it('throws if neither href nor onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <LinkBase>click me</LinkBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-})