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

package/stories/supports.jsx

@@ -1,27 +1,97 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { Platform, ScrollView, View, StyleSheet } from 'react-native'
 import { useTheme, getComponentTheme } from '../lib/ThemeProvider'
 import { Typography } from '../lib'
 import { containers as platformContainers } from './platform-supports'
 
-const FlexRow = ({ children }) => <View style={styles.row}>{children}</View>
-FlexRow.propTypes = { children: PropTypes.node }
+const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
+RowWrap.propTypes = { children: PropTypes.node }
 
-const FlexColumn = ({ children }) => <View style={styles.column}>{children}</View>
-FlexColumn.propTypes = { children: PropTypes.node }
+const RowStretch = ({ children }) => (
+  <ScrollView horizontal contentContainerStyle={styles.rowStretch}>
+    {children}
+  </ScrollView>
+)
+RowStretch.propTypes = { children: PropTypes.node }
+
+const ColumnWrap = ({ children }) => (
+  <ScrollView
+    horizontal
+    style={styles.columnWrapContainer}
+    contentContainerStyle={styles.columnWrap}
+  >
+    {children}
+  </ScrollView>
+)
+ColumnWrap.propTypes = { children: PropTypes.node }
+
+const ColumnStretch = ({ children }) => (
+  <View containerStyle={styles.columnStretch}>{children}</View>
+)
+ColumnStretch.propTypes = { children: PropTypes.node }
 
 // TODO: find a way to give Base stories a complete empty SpacingObject for easy editting
 // while giving themed stories a simpler value.
 export const spacingObjectArg = { xs: 1, lg: 3 }
 
 export const parentTypes = {
-  FlexRow,
-  FlexColumn,
+  RowWrap,
+  RowStretch,
+  ColumnWrap,
+  ColumnStretch,
   ...platformContainers
 }
 
+/**
+ * React Native (and therefore also React Native Web) components are usually at some level based on
+ * `View` and have some default layout styles that are quite different to regular web defaults:
+ *
+ *  - `display: flex` instead of `display: block`
+ *  - `flexDirection: column` instead of `flexDirection: row` when flex
+ *  - `position: relative`
+ *
+ * It's easy to fall into the trap of developing and testing something that works fine in a regular
+ * `View` but doesn't work as expected in other common layout containers. This is particularly true
+ * for UDS where internally we are devleoping entirely within React Native but many real-world use cases
+ * will mix UDS components with regular web HTML elements.
+ *
+ * The `EachParentType` support component and related `parentTypes` tooling are intended to make it easy
+ * to routinely test and demonstrate how UDS components behave in a wide range of parent types.
+ *
+ * To use it, pass as `children` a render function that takes the following and places them appropriately
+ * in a demonstration of your component (be careful to not wrap the component in a `View` or container as
+ * that will defeat the point of the exercise!):
+ *
+ * - `variant` - each theme variant will be rendered as siblings, pass this to the component's `variant` prop.
+ * - `label` - this will describe the parent type / variant combination and ideally should be somewhere easy to read
+ *   inside the component to help users understand what they are looking at.
+ * - `index` - the index of the currently rendered component variant (`0` if the component has no variants).
+ */
+export const EachParentType = ({ children, componentThemeName, ...args }) => {
+  const variants = useVariants(componentThemeName)
+  return Object.entries(parentTypes).map(([parentLabel, ParentType]) => (
+    <Container key={parentLabel} offWhite>
+      <ParentType>
+        {variants.map(([key, value, variantLabel], index) => {
+          const label = variantLabel ? `${parentLabel}: ${variantLabel}` : parentLabel
+          const variant = { ...args.variant, [key]: value }
+          return typeof children === 'function' ? children({ label, variant, index }) : children
+        })}
+      </ParentType>
+    </Container>
+  ))
+}
+
+const parentTypesList = `\`"${Object.keys(parentTypes).join('"`, `"')}"\``
+
+export const parentTypesParams = {
+  docs: {
+    storyDescription: `This tests how this component's variants render in each of the following types of container: ${parentTypesList}.`
+  }
+}
+
 export const Placeholder = ({ margin = false, ...props }) => (
   <View style={[styles.placeholder, margin && styles.margin]}>
     <Typography {...props} />
@@ -36,17 +106,29 @@ export const Container = ({
   padding = 8,
   dark = false,
   offWhite = false,
+  borderWidth,
+  style,
   children
 }) => (
-  <View style={[{ margin, padding }, dark && styles.dark, offWhite && styles.offWhite]}>
+  <View
+    style={[
+      { margin, padding },
+      dark && styles.dark,
+      offWhite && styles.offWhite,
+      { borderWidth },
+      style
+    ]}
+  >
     {children}
   </View>
 )
 Container.propTypes = {
   margin: PropTypes.number,
   padding: PropTypes.number,
+  borderWidth: PropTypes.number,
   dark: PropTypes.bool,
   offWhite: PropTypes.bool,
+  style: PropTypes.object,
   children: PropTypes.node
 }
 
@@ -57,6 +139,8 @@ const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `:
  */
 export const useVariants = (componentName) => {
   const theme = useTheme()
+  if (!componentName) return [['default', {}]]
+
   const { appearances } = getComponentTheme(theme, componentName)
 
   if (!appearances) {
@@ -66,7 +150,7 @@ export const useVariants = (componentName) => {
   }
 
   const variants = Object.entries(appearances).reduce(
-    (pairs, [key, { values, type }]) =>
+    (pairs, [key, { values, type } = {}]) =>
       type === 'variant'
         ? [...pairs, ...values.map((value) => [key, value, getVariantLabel(key, value)])]
         : pairs,
@@ -76,14 +160,26 @@ export const useVariants = (componentName) => {
 }
 
 const styles = StyleSheet.create({
-  row: {
+  rowWrap: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    flex: 1
+  },
+  rowStretch: {
     flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap'
+    flexGrow: 1
+  },
+  columnStretch: {
+    // alignItems: 'stretch' and flexDirection: 'column' are the default
   },
-  column: {
+  columnWrap: {
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    // Ensure the content columns wrap
+    ...Platform.select({ web: { maxHeight: 150 }, default: { height: 125, minWidth: '200%' } }),
+    flexGrow: 1
   },
   content: {
     maxWidth: 200,

package/__fixtures__/accessible.icon.svg

@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24">
-  <path
-    d="M4.2311 12.2566L4.8931 12.9186C4.2651 13.8746 3.9111 14.9836 3.9111 16.1536C3.9111 17.7386 4.5291 19.2316 5.6511 20.3536C6.7731 21.4746 8.2641 22.0926 9.8501 22.0926C10.9235 22.0926 11.9432 21.7951 12.842 21.2619L13.0841 21.1106L13.7311 21.7556C12.5641 22.5666 11.2141 22.9996 9.8501 22.9996C8.0961 22.9996 6.3411 22.3316 5.0061 20.9966C3.7121 19.7026 2.9991 17.9826 2.9991 16.1536C2.9991 14.8388 3.37676 13.586 4.06644 12.5034L4.2311 12.2566ZM10.0407 2.26661C10.2191 2.26661 10.3994 2.30373 10.5683 2.37899L10.743 2.4718C11.3183 2.80605 16.6402 5.89799 16.6497 5.90461C16.9567 6.09661 17.1567 6.39661 17.2287 6.72661C17.3529 7.16041 17.2827 7.64038 17.0086 8.02655L16.9097 8.15161L14.2287 10.8896C14.3347 10.9776 14.4398 11.0683 14.5423 11.1634L14.7084 11.3251L14.7217 11.3406L19.8577 10.7376L19.9287 10.7356C20.2777 10.7356 20.6147 10.8766 20.8597 11.1286C21.0898 11.364 21.2204 11.6759 21.228 12.0008L21.2237 12.1406L20.8337 18.8506C20.7837 19.6246 20.1427 20.2196 19.3787 20.2196L19.2847 20.2166C18.5271 20.1677 17.9457 19.55 17.9233 18.8064L17.9257 18.6656L18.2627 14.2006C18.2707 14.1446 18.2257 14.0976 18.1737 14.0976L16.4637 14.3986C16.9377 16.196 16.6627 18.145 15.6541 19.7655L15.4887 20.0186L14.8287 19.3596C15.4437 18.4086 15.7897 17.3106 15.7897 16.1526C15.7897 14.5676 15.1717 13.0746 14.0507 11.9536C12.9277 10.8316 11.4367 10.2136 9.8497 10.2136C8.78912 10.2136 7.77727 10.5043 6.88425 11.0257L6.6437 11.1736L5.9957 10.5256C6.89297 9.90834 7.89686 9.51172 8.93523 9.36958L9.2477 9.33461L11.7547 6.55661L10.2547 5.68061L8.3307 7.30961C8.0417 7.59861 7.6647 7.74361 7.2887 7.74361C6.9127 7.74361 6.5377 7.59961 6.2497 7.31161C5.70782 6.76973 5.69593 5.8886 6.17199 5.30432L6.2737 5.19161L9.1757 2.59561C9.4197 2.37861 9.7277 2.26661 10.0407 2.26661ZM20.2817 12.6526C20.3768 11.8055 19.8748 11.6893 19.5319 11.6977L19.4697 11.7006L15.4947 12.1676C15.7179 12.506 15.9053 12.8694 16.0711 13.2408L16.1917 13.5206L17.9407 13.2126L18.0177 13.1906L18.1737 13.1866C18.4617 13.1866 18.7357 13.3116 18.9277 13.5276C19.0777 13.7009 19.1638 13.9187 19.1739 14.1445L19.1707 14.2806L18.8337 18.7346C18.8247 18.8706 18.8727 19.0136 18.9697 19.1236C19.0457 19.2108 19.1454 19.2698 19.257 19.2951L19.3427 19.3076C19.6316 19.3076 19.8517 19.1283 19.9104 18.8861L19.9247 18.7926L20.2817 12.6526ZM10.0407 3.17761C9.9687 3.17761 9.89895 3.1973 9.83862 3.23414L9.7817 3.27661L6.9047 5.84961C6.6897 6.07961 6.6827 6.45661 6.8927 6.66661C7.0007 6.77361 7.1397 6.83261 7.2887 6.83261C7.4071 6.83261 7.52166 6.79485 7.61753 6.72445L7.6857 6.66561L7.7127 6.63861L10.1567 4.56861L13.1807 6.33461L10.5177 9.28661C11.4555 9.38172 12.3648 9.67199 13.2008 10.1371L13.5107 10.3196L16.2377 7.53561C16.3452 7.40644 16.393 7.24116 16.3729 7.07565L16.3527 6.97661L16.3397 6.92261C16.3267 6.86361 16.2887 6.75661 16.1747 6.68161L10.2347 3.23061C10.1757 3.19561 10.1087 3.17761 10.0407 3.17761ZM17.7427 0.999908C18.9037 0.999908 19.8487 1.94491 19.8487 3.10591C19.8487 4.26691 18.9037 5.21291 17.7427 5.21291C16.5817 5.21291 15.6367 4.26691 15.6367 3.10591C15.6367 1.94491 16.5817 0.999908 17.7427 0.999908ZM17.7427 1.91091C17.0837 1.91091 16.5477 2.44691 16.5477 3.10591C16.5477 3.76491 17.0837 4.30191 17.7427 4.30191C18.4017 4.30191 18.9377 3.76491 18.9377 3.10591C18.9377 2.44691 18.4017 1.91091 17.7427 1.91091Z"
-    fillRule="evenodd"
-  />
-</svg>

package/babel.config.json

@@ -1,8 +0,0 @@
-{
-  "presets": [["@babel/preset-react", { "useBuiltIns": true }]],
-  "env": {
-    "test": {
-      "presets": ["module:metro-react-native-babel-preset"]
-    }
-  }
-}

package/lib/ActivityIndicator/Spinner.web.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-const SVG_RADIUS = 20;
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
-const animationProps = {
-  begin: '0s',
-  dur: `${DURATION}ms`,
-  fill: 'freeze',
-  repeatCount: 'indefinite'
-};
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
-}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
-// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-
-const Spinner = ({
-  size,
-  color,
-  thickness,
-  label
-}) => /*#__PURE__*/React.createElement("svg", {
-  width: `${size}px`,
-  height: `${size}px`,
-  viewBox: "0 0 48 48",
-  "aria-valuetext": label,
-  role: "progressbar",
-  "aria-busy": true
-}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("animateTransform", Object.assign({
-  attributeName: "transform",
-  type: "rotate",
-  values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`
-}, animationProps)), /*#__PURE__*/React.createElement("circle", {
-  fill: "none",
-  stroke: color,
-  strokeWidth: thickness * 48 / size,
-  strokeLinecap: "round",
-  cx: "24",
-  cy: "24",
-  r: "20",
-  strokeDasharray: [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-  strokeDashoffset: 0
-}, /*#__PURE__*/React.createElement("animate", Object.assign({
-  attributeName: "stroke-dashoffset",
-  values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`
-}, animationProps, bezierProps)), /*#__PURE__*/React.createElement("animate", Object.assign({
-  attributeName: "stroke-dasharray",
-  values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`
-}, animationProps, bezierProps)))));
-
-Spinner.propTypes = propTypes;
-export default Spinner;

package/lib/Pagination/useCopy.js

@@ -1,10 +0,0 @@
-function useCopy({
-  dictionary,
-  copy
-}) {
-  const getCopy = key => dictionary[copy][key];
-
-  return getCopy;
-}
-
-export default useCopy;

package/lib/config/svgr-icons-web.js

@@ -1,9 +0,0 @@
-const native = require('./svgr-icons');
-
-module.exports = { ...native,
-  native: false,
-  svgProps: { ...native.svgProps,
-    role: '{title ? "img" : undefined }',
-    'aria-hidden': '{!title}'
-  }
-};

package/lib/config/svgr-icons.js

@@ -1,52 +0,0 @@
-function themedTemplate({
-  template
-}, opts, {
-  imports,
-  interfaces,
-  componentName,
-  jsx,
-  exports
-}) {
-  const plugins = ['jsx'];
-  return template.smart({
-    plugins
-  }).ast`${imports}
-import { Icon, iconComponentPropTypes, iconSvgPropTypes } from '@telus-uds/components-base'
-${interfaces}
-
-const IconSvg = ({ title, titleId, size, color }) => ${jsx}
-IconSvg.propTypes = iconSvgPropTypes
-const ${componentName} = (props) => <Icon {...props} IconSvg={IconSvg} />
-${componentName}.propTypes = iconComponentPropTypes
-
-${exports}
-  `;
-}
-
-module.exports = {
-  native: true,
-  svgProps: {
-    height: '{size}',
-    width: '{size}',
-    fill: '{color}' // @TODO figure out if we need any a11y props here for RN
-
-  },
-  expandProps: false,
-  template: themedTemplate,
-  titleProp: true,
-  svgoConfig: {
-    plugins: [{
-      inlineStyles: {
-        onlyMatchedOnce: false
-      }
-    }, {
-      removeViewBox: false
-    }, {
-      removeUnknownsAndDefaults: false
-    }, {
-      convertColors: {
-        currentColor: true
-      }
-    }]
-  }
-};

package/lib/utils/spacing/index.js

@@ -1,2 +0,0 @@
-export { default as useSpacingScale } from './useSpacingScale';
-export * from './utils';

package/lib/utils/spacing/utils.js

@@ -1,32 +0,0 @@
-import { viewports as systemViewports } from '@telus-uds/system-constants';
-export const resolveSpacingValue = (space, viewport) => {
-  // If spacing value has been passed as undefined or nullish, get the 0-index
-  if (!space) return 0; // Pass through simple non-responsive numbers (which may be in objects alongside options)
-
-  if (typeof space === 'number') return space;
-  if (typeof space.space === 'number') return space.space; // Get the appropriate space value for the current viewport.
-  // If no viewports available (e.g. SSR), default to the smallest.
-  // If no values are found (e.g. empty space object), default to 0.
-
-  return (viewport && systemViewports.inherit(space)[viewport]) ?? space.xs ?? 0;
-};
-export const resolveSpacingOptions = space => {
-  if (!space?.options) return {};
-  const {
-    size,
-    variant,
-    subtract = 0
-  } = space.options;
-  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
-  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
-  // https://github.com/telus/universal-design-system/issues/583
-
-  return {
-    tokens: {
-      size
-    },
-    variant,
-    overridden,
-    subtract
-  };
-};

package/src/Pagination/useCopy.js

@@ -1,7 +0,0 @@
-function useCopy({ dictionary, copy }) {
-  const getCopy = (key) => dictionary[copy][key]
-
-  return getCopy
-}
-
-export default useCopy

package/src/config/svgr-icons-web.js

@@ -1,11 +0,0 @@
-const native = require('./svgr-icons')
-
-module.exports = {
-  ...native,
-  native: false,
-  svgProps: {
-    ...native.svgProps,
-    role: '{title ? "img" : undefined }',
-    'aria-hidden': '{!title}'
-  }
-}

package/src/config/svgr-icons.js

@@ -1,46 +0,0 @@
-function themedTemplate({ template }, opts, { imports, interfaces, componentName, jsx, exports }) {
-  const plugins = ['jsx']
-
-  return template.smart({ plugins }).ast`${imports}
-import { Icon, iconComponentPropTypes, iconSvgPropTypes } from '@telus-uds/components-base'
-${interfaces}
-
-const IconSvg = ({ title, titleId, size, color }) => ${jsx}
-IconSvg.propTypes = iconSvgPropTypes
-const ${componentName} = (props) => <Icon {...props} IconSvg={IconSvg} />
-${componentName}.propTypes = iconComponentPropTypes
-
-${exports}
-  `
-}
-
-module.exports = {
-  native: true,
-  svgProps: {
-    height: '{size}',
-    width: '{size}',
-    fill: '{color}'
-    // @TODO figure out if we need any a11y props here for RN
-  },
-  expandProps: false,
-  template: themedTemplate,
-  titleProp: true,
-  svgoConfig: {
-    plugins: [
-      {
-        inlineStyles: {
-          onlyMatchedOnce: false
-        }
-      },
-      {
-        removeViewBox: false
-      },
-      {
-        removeUnknownsAndDefaults: false
-      },
-      {
-        convertColors: { currentColor: true }
-      }
-    ]
-  }
-}

package/src/utils/spacing/index.js

@@ -1,3 +0,0 @@
-export { default as useSpacingScale } from './useSpacingScale'
-
-export * from './utils'

package/src/utils/spacing/utils.js

@@ -1,28 +0,0 @@
-import { viewports as systemViewports } from '@telus-uds/system-constants'
-
-export const resolveSpacingValue = (space, viewport) => {
-  // If spacing value has been passed as undefined or nullish, get the 0-index
-  if (!space) return 0
-
-  // Pass through simple non-responsive numbers (which may be in objects alongside options)
-  if (typeof space === 'number') return space
-  if (typeof space.space === 'number') return space.space
-
-  // Get the appropriate space value for the current viewport.
-  // If no viewports available (e.g. SSR), default to the smallest.
-  // If no values are found (e.g. empty space object), default to 0.
-  return (viewport && systemViewports.inherit(space)[viewport]) ?? space.xs ?? 0
-}
-
-export const resolveSpacingOptions = (space) => {
-  if (!space?.options) return {}
-
-  const { size, variant, subtract = 0 } = space.options
-  const overridden = typeof size === 'number'
-
-  // Might need an option that adapts the size value by current user's system font scale, so that
-  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
-  // https://github.com/telus/universal-design-system/issues/583
-
-  return { tokens: { size }, variant, overridden, subtract }
-}