@telus-uds/components-base 1.4.0 → 1.6.1

package/src/utils/props/linkProps.js

@@ -22,16 +22,13 @@ export default {
    */
   select: getPropSelector(linkPropTypes),
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
+   * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
   handleHref: ({ onPress, href }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress')
-    }
     return Platform.select({
       web: onPress,
       default: (...args) => {

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

@@ -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}'
+}

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)
-  })
-})