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

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 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
+
+- same rnw dep specification for base as components-allium-web ([#642](https://github.com/telus/universal-design-system/issues/642)) ([d40a9a2](https://github.com/telus/universal-design-system/commit/d40a9a2eade0a6ab276f13d02758fff0a88c2ecd))
+
+### [0.0.2-prerelease.3](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.2...@telus-uds/components-base/v0.0.2-prerelease.3) (2021-10-12)
+
+### Features
+
+- **base:** add `Card` component ([#597](https://github.com/telus/universal-design-system/issues/597)) ([9e29d3c](https://github.com/telus/universal-design-system/commit/9e29d3c426c7082ec4d54a0c9d353986c0cc0b01))
+- **base:** add useSpacingScale hook, apply to Box ([#606](https://github.com/telus/universal-design-system/issues/606)) ([5109b4f](https://github.com/telus/universal-design-system/commit/5109b4f7537b8a732b86e34675bef992a54873e5))
+
+### [0.0.2-prerelease.2](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.1...@telus-uds/components-base/v0.0.2-prerelease.2) (2021-10-08)
+
+### Features
+
+- **base:** add the Pagination component ([#577](https://github.com/telus/universal-design-system/issues/577)) ([e24b644](https://github.com/telus/universal-design-system/commit/e24b6441b3d31be01187c0cac728f2c8e25f5157))
+
 ### [0.0.2-prerelease.1](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.0...@telus-uds/components-base/v0.0.2-prerelease.1) (2021-10-04)
 
 ### Features

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')
 
@@ -21,80 +23,48 @@ module.exports = {
     name: 'test'
   },
   components: {
-    Box: {
-      style: {},
-      levels: {
-        xs: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 36,
-          7: 40,
-          8: 48,
-          9: 64,
-          10: 80,
-          11: 96
-        },
-        sm: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 36,
-          7: 40,
-          8: 48,
-          9: 64,
-          10: 80,
-          11: 96
-        },
-        md: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 36,
-          7: 40,
-          8: 48,
-          9: 64,
-          10: 80,
-          11: 96
-        },
-        lg: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 40,
-          7: 48,
-          8: 64,
-          9: 72,
-          10: 96,
-          11: 120
-        },
-        xl: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 40,
-          7: 48,
-          8: 64,
-          9: 72,
-          10: 96,
-          11: 120
-        }
+    spacingScale: {
+      tokens: {
+        size: 36
       },
+      rules: [
+        { if: { space: 5 }, tokens: { size: 32 } },
+        { if: { space: 4 }, tokens: { size: 24 } },
+        { if: { space: 3 }, tokens: { size: 16 } },
+        { if: { space: 2 }, tokens: { size: 8 } },
+        { if: { space: 1 }, tokens: { size: 4 } },
+
+        { if: { compact: true }, tokens: { size: 12 } },
+        { if: { compact: true, space: 5 }, tokens: { size: 10 } },
+        { if: { compact: true, space: 4 }, tokens: { size: 8 } },
+        { if: { compact: true, space: 3 }, tokens: { size: 6 } },
+        { if: { compact: true, space: 2 }, tokens: { size: 4 } },
+        { if: { compact: true, space: 1 }, tokens: { size: 2 } },
+
+        { if: { responsive: true }, tokens: { size: 6 } },
+        { if: { responsive: true, space: 5 }, tokens: { size: 5 } },
+        { if: { responsive: true, space: 4 }, tokens: { size: 4 } },
+        { if: { responsive: true, space: 3 }, tokens: { size: 3 } },
+        { if: { responsive: true, space: 2 }, tokens: { size: 2 } },
+        { if: { responsive: true, space: 1 }, tokens: { size: 1 } },
+        { if: { responsive: true, viewport: ['sm', 'md'] }, tokens: { size: 8 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 5 }, tokens: { size: 7 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 4 }, tokens: { size: 6 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 3 }, tokens: { size: 5 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 2 }, tokens: { size: 4 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 1 }, tokens: { size: 3 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'] }, tokens: { size: 12 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 5 }, tokens: { size: 11 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 4 }, tokens: { size: 10 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 3 }, tokens: { size: 9 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 2 }, tokens: { size: 8 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 1 }, tokens: { size: 7 } },
+
+        { if: { space: 0 }, tokens: { size: 0 } }
+      ]
+    },
+    Box: {
+      tokens: {},
       variants: {
         lightest: {
           backgroundColor: '#ffffff'
@@ -169,12 +139,7 @@ module.exports = {
         paddingTop: 8,
         paddingBottom: 8,
 
-        width: null,
-
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: 0,
-        marginBottom: 0
+        width: null
       },
       rules: [
         {
@@ -329,6 +294,100 @@ module.exports = {
         direction: 'row'
       }
     },
+    Card: {
+      appearances: {
+        background: {
+          values: ['alternative'],
+          type: 'variant'
+        },
+        padding: {
+          values: ['narrow', 'intermediate', 'compact', 'custom'],
+          type: 'variant'
+        },
+        viewport: systemAppearances.viewport
+      },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#666666',
+        borderRadius: 6,
+        borderWidth: 1,
+        paddingBottom: 32,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 32
+      },
+      rules: [
+        {
+          if: { background: 'alternative' },
+          tokens: {
+            backgroundColor: '#f4f4f7'
+          }
+        },
+        {
+          if: { viewport: ['md', 'lg', 'xl'] },
+          tokens: {
+            paddingBottom: 48,
+            paddingLeft: 32,
+            paddingRight: 32,
+            paddingTop: 48
+          }
+        },
+        {
+          if: { padding: 'narrow' },
+          tokens: {
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 24
+          }
+        },
+        {
+          if: { padding: 'narrow', viewport: ['md', 'lg', 'xl'] },
+          tokens: {
+            paddingBottom: 32,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 32
+          }
+        },
+        {
+          if: { padding: 'intermediate' },
+          tokens: {
+            paddingBottom: 24,
+            paddingLeft: 24,
+            paddingRight: 24,
+            paddingTop: 24
+          }
+        },
+        {
+          if: { padding: 'intermediate', viewport: ['md', 'lg', 'xl'] },
+          tokens: {
+            paddingBottom: 32,
+            paddingLeft: 32,
+            paddingRight: 32,
+            paddingTop: 32
+          }
+        },
+        {
+          if: { padding: 'compact' },
+          tokens: {
+            paddingBottom: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 16
+          }
+        },
+        {
+          if: { padding: 'custom' },
+          tokens: {
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0
+          }
+        }
+      ]
+    },
     Divider: {
       appearances: {
         weight: {
@@ -442,8 +501,6 @@ module.exports = {
         fontSize: 16,
         color: '#2c2e30',
         lineHeight: 1.5,
-        marginTop: 8,
-        marginBottom: 8,
         fontScaleCap: 64
       },
       rules: [
@@ -677,8 +734,6 @@ module.exports = {
         blockFontWeight: '400',
         blockFontSize: 16,
         blockLineHeight: 1.5,
-        blockMarginTop: 8,
-        blockMarginBottom: 8,
 
         outerBorderColor: transparent,
         outerBorderOutline: 'none',
@@ -724,6 +779,52 @@ module.exports = {
         }
       ]
     },
+    Pagination: {
+      tokens: {
+        gap: 3
+      }
+    },
+    PaginationPageButton: {
+      tokens: {
+        paddingLeft: 4,
+        paddingRight: 4
+      },
+      rules: [
+        {
+          if: {
+            selected: true
+          },
+          tokens: {
+            fontWeight: '600',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: {
+            hover: true
+          },
+          tokens: {
+            color: 'blue'
+          }
+        }
+      ]
+    },
+    PaginationSideButton: {
+      tokens: {
+        paddingLeft: 4,
+        paddingRight: 4
+      },
+      rules: [
+        {
+          if: {
+            hover: true
+          },
+          tokens: {
+            color: 'blue'
+          }
+        }
+      ]
+    },
     SideNav: {},
     SideNavItem: {
       appearances: {
@@ -741,6 +842,9 @@ module.exports = {
       ]
     },
     SideNavItemsGroup: {},
+    StackView: {
+      tokens: {}
+    },
     ToggleSwitch: {
       appearances: {
         focus: toggleSwitchAppearances.focus,
@@ -815,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__/Box/Box.test.jsx

@@ -1,30 +1,20 @@
 import React from 'react'
 import { Text } from 'react-native'
 import { render, fireEvent } from '@testing-library/react-native'
-import { viewports } from '@telus-uds/system-constants'
 import { Box } from '../../src'
 import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-import testTheme from '../../__fixtures__/testTheme'
 
 const textContent = 'Some text content'
 
-function getSpacing(level, viewport) {
-  const spacing = testTheme.components.Box.levels[viewport][level]
-  if (typeof spacing !== 'number') {
-    throw new Error(
-      `Invalid spacing ${spacing} (${typeof spacing}) for level ${level}, viewport ${viewport}`
-    )
-  }
-  return spacing
-}
+// Based on testTheme
+const expectedScale = [0, 4, 8, 16, 24, 32, 36]
 
 describe('Box', () => {
   it('is scrollable if scroll props provided', async () => {
     const onScroll = jest.fn()
     const { getByText } = render(
       <Theme>
-        <Box scroll scrollProps={{ onScroll }}>
+        <Box scroll={{ onScroll }}>
           <Text>{textContent}</Text>
         </Box>
       </Theme>
@@ -36,53 +26,86 @@ describe('Box', () => {
     expect(onScroll).toHaveBeenCalledTimes(1)
   })
 
-  // Test the style resolution in every viewport
-  viewports.keys.forEach((viewport) => {
-    it(`maps regular props to RN styles at viewport ${viewport}`, () => {
-      const props = {
-        top: 1,
-        below: 2,
-        bottom: 3,
-        left: 4,
-        right: 5
-      }
-      const { getByText } = render(
-        <Theme>
-          <Viewport viewport={viewport}>
-            <Box {...props}>
-              <Text>{textContent}</Text>
-            </Box>
-          </Viewport>
-        </Theme>
-      )
-      expect(getByText(textContent).parent).toHaveStyle({
-        paddingTop: getSpacing(1, viewport),
-        marginBottom: getSpacing(2, viewport),
-        paddingBottom: getSpacing(3, viewport),
-        paddingLeft: getSpacing(4, viewport),
-        paddingRight: getSpacing(5, viewport)
-      })
+  it('maps regular props to RN styles', () => {
+    const props = {
+      top: 1,
+      bottom: 2,
+      left: 3,
+      right: 4
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingTop: expectedScale[1],
+      paddingBottom: expectedScale[2],
+      paddingLeft: expectedScale[3],
+      paddingRight: expectedScale[4]
+    })
+  })
+
+  it(`maps horizontal and vertical props to RN styles`, () => {
+    const props = {
+      horizontal: 1,
+      vertical: 2
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[1],
+      paddingRight: expectedScale[1],
+      paddingTop: expectedScale[2],
+      paddingBottom: expectedScale[2]
+    })
+  })
+
+  it(`maps all-sides space prop to RN styles`, () => {
+    const props = {
+      space: 3
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[3],
+      paddingRight: expectedScale[3],
+      paddingTop: expectedScale[3],
+      paddingBottom: expectedScale[3]
     })
+  })
 
-    it(`maps shorthand props to RN styles at viewport ${viewport}`, () => {
-      const props = {
-        horizontal: 6,
-        vertical: 7
-      }
-      const { getByText } = render(
-        <Theme>
-          <Viewport viewport={viewport}>
-            <Box {...props}>
-              <Text>{textContent}</Text>
-            </Box>
-          </Viewport>
-        </Theme>
-      )
-      expect(getByText(textContent).parent).toHaveStyle({
-        // Can't test for paddingTop etc - .toHaveStyle isn't that smart
-        paddingHorizontal: getSpacing(6, viewport),
-        paddingVertical: getSpacing(7, viewport)
-      })
+  it(`applies side overrides in increasing specificity`, () => {
+    const props = {
+      space: 1,
+      horizontal: 2,
+      top: 3,
+      right: 4
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[2],
+      paddingRight: expectedScale[4],
+      paddingTop: expectedScale[3],
+      paddingBottom: expectedScale[1]
     })
   })
 })

package/__tests__/Card/Card.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Text } from 'react-native'
+
+import { Card } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const contentText = 'This is a card'
+
+const setup = ({ tokens } = {}) =>
+  render(
+    <Theme>
+      <Card tokens={tokens}>
+        <Text>{contentText}</Text>
+      </Card>
+    </Theme>
+  )
+
+describe('Card', () => {
+  it('renders the card content', () => {
+    const { getByText } = setup()
+    const cardContent = getByText(contentText)
+    expect(cardContent).toBeTruthy()
+  })
+
+  it('renders the default style properly', () => {
+    const defaultStyle = testTheme.components.Card.tokens
+    const { getByText } = setup()
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle(defaultStyle)
+  })
+
+  it('renders a card with a custom background color', () => {
+    const backgroundColor = '#0F0F0F'
+    const { getByText } = setup({ tokens: { backgroundColor } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ backgroundColor })
+  })
+
+  it('renders a card with a custom border', () => {
+    const border = {
+      borderColor: '#123456',
+      borderWidth: 7,
+      borderRadius: 8
+    }
+    const { getByText } = setup({ tokens: { ...border } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ ...border })
+  })
+
+  it('renders a card with a custom padding', () => {
+    const padding = {
+      paddingBottom: 1,
+      paddingLeft: 2,
+      paddingRight: 3,
+      paddingTop: 4
+    }
+    const { getByText } = setup({ tokens: { ...padding } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ ...padding })
+  })
+})