@telus-uds/components-base 1.5.0 → 1.6.0

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

@@ -4,7 +4,10 @@ import { Search } from '../../src'
 
 export default {
   title: 'Search',
-  component: Search
+  component: Search,
+  argTypes: {
+    onSubmit: { action: 'submitted' }
+  }
 }
 
 const Template = (args) => <Search {...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}'
+}