@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-prerelease.5](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.4...@telus-uds/components-base/v0.0.2-prerelease.5) (2021-10-27)
+
+### Features
+
+- **allium-web:** Add `ExpandCollapseMiniControl` component ([#661](https://github.com/telus/universal-design-system/issues/661)) ([227407e](https://github.com/telus/universal-design-system/commit/227407ec6a48c0a170b8e39761ba33293f13eb3c)), closes [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605)
+- **allium:** add Allium `Card` ([#639](https://github.com/telus/universal-design-system/issues/639)) ([f88179c](https://github.com/telus/universal-design-system/commit/f88179c503dfe574bf7bac6bb36ce4726a9af338))
+- **base, allium:** add reverse directions and switch Allium card to using `StackView` ([#676](https://github.com/telus/universal-design-system/issues/676)) ([819a15f](https://github.com/telus/universal-design-system/commit/819a15f059faa47d1bc4e96c6370e9694effc003))
+- **base:** add StackView and Spacer ([#662](https://github.com/telus/universal-design-system/issues/662)) ([cc3965e](https://github.com/telus/universal-design-system/commit/cc3965e83c1ec2fa0f0dd006a03eeeeda5384940))
+- **base:** add StackWrap component ([#666](https://github.com/telus/universal-design-system/issues/666)) ([f34fb60](https://github.com/telus/universal-design-system/commit/f34fb60d0a923b1e4b3105c21b4a762b630ab309))
+- **base:** add TextInput component ([#649](https://github.com/telus/universal-design-system/issues/649)) ([245c073](https://github.com/telus/universal-design-system/commit/245c073ed3ba3a022f989d234fbf5cf972edec25))
+- **base:** add the Feedback component ([#656](https://github.com/telus/universal-design-system/issues/656)) ([5d7a5b6](https://github.com/telus/universal-design-system/commit/5d7a5b69c870ce1077adfdb230fddd1aa120b373))
+
+### Bug Fixes
+
+- **base:** control stretch from a row parent ([#668](https://github.com/telus/universal-design-system/issues/668)) ([fa13c37](https://github.com/telus/universal-design-system/commit/fa13c37b2bd6b4118dbeb39bc2cdf59d13d5b151))
+- **base:** fix icon link width in block container ([#645](https://github.com/telus/universal-design-system/issues/645)) ([ff60d1d](https://github.com/telus/universal-design-system/commit/ff60d1d1d0a66b7735b902098c7ca22e442265e1))
+
 ### [0.0.2-prerelease.4](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.3...@telus-uds/components-base/v0.0.2-prerelease.4) (2021-10-13)
 
 ### Bug Fixes

package/__fixtures__/testTheme.js

@@ -2,7 +2,9 @@ const {
   buttonAppearances,
   linkAppearances,
   sideNavItemAppearances,
-  toggleSwitchAppearances
+  toggleSwitchAppearances,
+  textInputAppearances,
+  feedbackAppearances
 } = require('@telus-uds/tools-theme')
 const { appearances: systemAppearances } = require('@telus-uds/system-constants')
 
@@ -137,12 +139,7 @@ module.exports = {
         paddingTop: 8,
         paddingBottom: 8,
 
-        width: null,
-
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: 0,
-        marginBottom: 0
+        width: null
       },
       rules: [
         {
@@ -504,8 +501,6 @@ module.exports = {
         fontSize: 16,
         color: '#2c2e30',
         lineHeight: 1.5,
-        marginTop: 8,
-        marginBottom: 8,
         fontScaleCap: 64
       },
       rules: [
@@ -739,8 +734,6 @@ module.exports = {
         blockFontWeight: '400',
         blockFontSize: 16,
         blockLineHeight: 1.5,
-        blockMarginTop: 8,
-        blockMarginBottom: 8,
 
         outerBorderColor: transparent,
         outerBorderOutline: 'none',
@@ -849,6 +842,9 @@ module.exports = {
       ]
     },
     SideNavItemsGroup: {},
+    StackView: {
+      tokens: {}
+    },
     ToggleSwitch: {
       appearances: {
         focus: toggleSwitchAppearances.focus,
@@ -923,6 +919,82 @@ module.exports = {
           tokens: { opacity: 0.4 }
         }
       ]
+    },
+    TextInput: {
+      appearances: {
+        ...textInputAppearances
+      },
+      tokens: {
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#00000044',
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 6,
+        paddingRight: 6,
+        outerBorderWidth: 1,
+        outerBorderColor: transparent,
+        outerBorderRadius: 4
+      },
+      rules: [
+        {
+          if: { validation: 'success' },
+          tokens: {
+            outerBorderColor: '#99ff99'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            outerBorderColor: '#990000'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#debc06'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            outerBorderColor: '#6666cc'
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            outerBorderColor: transparent,
+            backgroundColor: '#00000044'
+          }
+        }
+      ]
+    },
+    InputLabel: {
+      tokens: {
+        gap: 20,
+        hintFontSize: 12
+      }
+    },
+    Feedback: {
+      appearances: {
+        ...feedbackAppearances
+      },
+      tokens: {
+        borderColor: '#eee',
+        borderWidth: 1,
+        borderRadius: 3,
+        titleFontSize: 16,
+        contentFontSize: 14,
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12
+      },
+      rules: [
+        { if: { state: 'success' }, tokens: { color: 'green' } },
+        { if: { state: 'error' }, tokens: { color: 'red' } }
+      ]
     }
   }
 }

package/__tests__/Divider/Divider.test.jsx

@@ -41,17 +41,38 @@ describe('Divider', () => {
     expect(divider).not.toHaveStyle(verticalStyles)
   })
 
-  it('renders a vertical line when vertical prop is passed', () => {
+  it('renders space above and below a horizontal line if space prop is passed', () => {
+    const expectedSize = 8 // from testTheme.js
+
     const { getByTestId } = render(
       <Theme>
         <Text>Before</Text>
-        <Divider vertical testID={testID} />
+        <Divider testID={testID} space={2} />
         <Text>After</Text>
       </Theme>
     )
-    const divider = getByTestId(testID)
-    expect(divider).toHaveStyle(verticalStyles)
-    expect(divider).not.toHaveStyle(horizontalStyles)
+    const before = getByTestId(`${testID}-Spacer-before`)
+    expect(before).toHaveStyle({ height: expectedSize })
+
+    const after = getByTestId(`${testID}-Spacer-after`)
+    expect(after).toHaveStyle({ height: expectedSize })
+  })
+
+  it('renders space left and right of a vertical line if space prop is passed', () => {
+    const expectedSize = 8 // from testTheme.js
+
+    const { getByTestId } = render(
+      <Theme>
+        <Text>Before</Text>
+        <Divider vertical testID={testID} space={2} />
+        <Text>After</Text>
+      </Theme>
+    )
+    const before = getByTestId(`${testID}-Spacer-before`)
+    expect(before).toHaveStyle({ width: expectedSize })
+
+    const after = getByTestId(`${testID}-Spacer-after`)
+    expect(after).toHaveStyle({ width: expectedSize })
   })
 
   it('renders the correct styles for a given variant', () => {

package/__tests__/Feedback/Feedback.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { render } from '@testing-library/react-native'
+
+import Feedback from '../../src/Feedback'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Feedback', () => {
+  it('renders title', () => {
+    const { queryByText } = render(<Feedback title="Test title" />, { wrapper: Theme })
+
+    expect(queryByText('Test title')).toBeTruthy()
+  })
+
+  it('renders content when passed a string', () => {
+    const { queryByText } = render(<Feedback>Test content</Feedback>, { wrapper: Theme })
+
+    expect(queryByText('Test content')).toBeTruthy()
+  })
+
+  it('renders content when passed a React element', () => {
+    const { queryByText } = render(
+      <Feedback>
+        <Text>Test content</Text>
+      </Feedback>,
+      { wrapper: Theme }
+    )
+
+    expect(queryByText('Test content')).toBeTruthy()
+  })
+
+  it("renders content with theme's style prop when passed a function", () => {
+    const { getByText } = render(
+      <Feedback>{({ textStyles }) => <Text style={textStyles}>Test content</Text>}</Feedback>,
+      {
+        wrapper: Theme
+      }
+    )
+
+    expect(getByText('Test content')).toHaveStyle({ fontSize: 14 })
+  })
+})

package/__tests__/Spacer/Spacer.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { Spacer } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const testID = 'spacer'
+
+describe('Spacer', () => {
+  it('has smallest size from spacing scale by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer testID={testID} />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      height: expectedSize
+    })
+  })
+
+  it('has size from spacing scale if space prop passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer space={2} testID={testID} />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      height: expectedSize
+    })
+  })
+
+  it('has no size if 0 passed in', () => {
+    const expectedSize = 0
+    const { getByTestId } = render(<Spacer space={0} testID={testID} />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      height: expectedSize
+    })
+  })
+})
+
+describe('Spacer (row)', () => {
+  it('has smallest size from spacing scale by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer testID={testID} direction="row" />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      width: expectedSize
+    })
+  })
+
+  it('has size from spacing scale if space prop passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer space={2} testID={testID} direction="row" />, {
+      wrapper: Theme
+    })
+    expect(getByTestId(testID)).toHaveStyle({
+      width: expectedSize
+    })
+  })
+
+  it('has no size if 0 passed in', () => {
+    const expectedSize = 0
+    const { getByTestId } = render(<Spacer space={0} testID={testID} direction="row" />, {
+      wrapper: Theme
+    })
+    expect(getByTestId(testID)).toHaveStyle({
+      width: expectedSize
+    })
+  })
+})

package/__tests__/StackView/StackView.test.jsx

@@ -0,0 +1,242 @@
+import React from 'react'
+import { View } from 'react-native'
+import { render } from '@testing-library/react-native'
+
+import { Spacer, StackView, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const getFirstAncestorAboveType = (element, ComponentType) => {
+  if (element.type === ComponentType) return element.parent
+  if (element.parent) return getFirstAncestorAboveType(element.parent, ComponentType)
+  return null
+}
+
+describe('StackView', () => {
+  it('renders separators and children as direct children of a flex column by default', () => {
+    const expectedStyle = { flexDirection: 'column' }
+
+    const { getByTestId } = render(
+      <StackView space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex column if direction is "column-reverse"', () => {
+    const expectedStyle = { flexDirection: 'column-reverse' }
+
+    const { getByTestId } = render(
+      <StackView direction="column-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex row if direction is "row"', () => {
+    const expectedStyle = { flexDirection: 'row' }
+
+    const { getByTestId } = render(
+      <StackView direction="row" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex row if direction is "row-reverse"', () => {
+    const expectedStyle = { flexDirection: 'row-reverse' }
+
+    const { getByTestId } = render(
+      <StackView direction="row-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of parent if "inherit" is set', () => {
+    // Some arbitrary custom style we apply to the parent
+    const expectedStyle = { color: '#012345', flexBasis: 12345 }
+
+    const { getByTestId } = render(
+      <View style={expectedStyle}>
+        <StackView inherit>
+          <Typography>A</Typography>
+          <Typography>B</Typography>
+        </StackView>
+      </View>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    // Expect an empty StackView fiber node with no styles of its own
+    expect(parent.type).toBe(StackView)
+    expect(parent).not.toHaveStyle({ flexDirection: 'column' })
+    expect(parent).not.toHaveStyle({ flexDirection: 'row' })
+
+    // Expect next parent to be a rendered View with styles
+    const renderedParent = getFirstAncestorAboveType(parent, StackView)
+    expect(renderedParent.type).toBe('View')
+    expect(renderedParent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders horizontal dividers by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+    const { color } = testTheme.components.Divider.tokens
+
+    const { getByTestId } = render(
+      <StackView divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders horizontal dividers if direction is "column-reverse"', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+    const { color } = testTheme.components.Divider.tokens
+
+    const { getByTestId } = render(
+      <StackView direction="column-reverse" divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders vertical dividers if direction is "row"', () => {
+    const { color } = testTheme.components.Divider.tokens
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { width: expectedSize }
+
+    const { getByTestId } = render(
+      <StackView divider direction="row">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders vertical dividers if direction is "row-reverse"', () => {
+    const { color } = testTheme.components.Divider.tokens
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { width: expectedSize }
+
+    const { getByTestId } = render(
+      <StackView divider direction="row-reverse">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders row spacers if direction is "row"', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+
+    const { getByTestId } = render(
+      <StackView direction="row" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
+  })
+
+  it('renders row spacers if direction is "row-reverse"', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+
+    const { getByTestId } = render(
+      <StackView direction="row-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
+  })
+})

package/__tests__/StackView/StackWrap.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { StackWrap, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('StackWrap', () => {
+  it('renders no spacers (because they would wrap badly)', () => {
+    const { queryAllByTestId } = render(
+      <StackWrap space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(queryAllByTestId(/Spacer/)).toHaveLength(0)
+  })
+
+  it('puts a `gap` between lines which may be different to `space` between items', () => {
+    // This test unavoidably hangs on some implementation details,
+    // which isn't ideal, but it does test something a user would see.
+    const expectedStyle = { paddingBottom: 8, paddingRight: 4 }
+
+    const { getByTestId } = render(
+      <StackWrap space={1} gap={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+  })
+
+  it('accepts accessibility props on the container responsible for wrapping content', () => {
+    const expectedStyle = { flexWrap: 'wrap' }
+
+    const { getByRole } = render(
+      <StackWrap accessibilityRole="radiogroup">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(getByRole('radiogroup')).toHaveStyle(expectedStyle)
+  })
+})