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

package/docs/Icons.stories.mdx

@@ -1,144 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Guides/Icons" />
-
-# Icons
-
-Icons are available through their respective brand palettes as raw SVG resources.
-In order to use icons as React components we are using [SVGR](https://react-svgr.com/) to transform the SVG resources into components.
-In order to use UDS icons in your application you will need to apply the SVGR transform in your build pipeline (_e.g._ webpack config), instructions on how to do this are included for common use cases below.
-
-Using a build-time transform enables us to keep the rendering and theming React logic for icons in the same place as for all other components, and enable outcome teams to include only the icons which they need in their bundle.
-
-## Configuring icon transforms
-
-SVGR supports [cosmiconfig](https://github.com/davidtheclark/cosmiconfig#readme). You can use any of the cosmiconfig methods for applying the SVGR configuration exposed at `@telus-uds/components-base/config/svgr-icons`.
-For example, you can create a `svgr.config.js` file at the root of your project, and add the following line to it:
-
-```js
-module.exports = require(@telus-uds/components-base/config/svgr-icons)
-```
-
-Once you have SVGR configuration in place, you will need to add a build step. Included below are example configurations for common use cases.
-If your use case isn't covered below, or you are having problems configuring icons for your application, get in touch with the core UDS team.
-
-The SVGR configuration is configured to transform SVGs into React Native components.
-To do this it relies on `react-native-svg`. You will need to include this as a production dependency in your project.
-We also offer a config preset for web-only builds to avoid this (see Webpack for web-only below). This is recommended for web projects to avoid the need to include an alias `react-native-svg`
-
-### Standalone
-
-SVGR can be applied as a standalone transform, via its own [well-documented CLI](https://react-svgr.com/docs/cli/).
-
-### Webpack
-
-For Webpack you will need to create a new Webpack loader rule to apply the SVGR using '@svgr/webpack' which you will need to include as a dev dependency in your project.
-
-```js
-/* in your webpack.config.js */
-// create a new loader rule leveraging @svgr/webpack
-const iconLoaderRule = {
-  test: /\.icon\.svg$/,
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: '@svgr/webpack'
-    }
-  ]
-}
-
-// if you already have an svg loader rule, adjust it to avoid it matching icons
-const svgLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'))
-svgLoaderRule.exclude = iconLoaderRule.test
-
-// add your new rule
-config.module.rules.unshift(iconLoaderRule)
-```
-
-**Note**: if your Webpack config is using a `oneOf` rule to apply file loaders, you may need to tweak the above to target that `oneOf`:
-
-```js
-config.module.rules[1].oneOf.unshift(iconLoaderRule)
-```
-
-With a oneOf rule, you don't need to worry about adjusting existing SVG loaders, as long as you place your icon loader rule at the head of the list (_e.g._ via `unshift`).
-
-### Storybook
-
-Storybook uses Webpack under the hood, so the instructions are very similiar. You will again need to ensure that '@svgr/webpack' is included as a dev dependency.
-
-```js
-/* in your .storybook/main.js file */
-// create a new loader rule leveraging @svgr/webpack
-const iconLoaderRule = {
-  test: /\.icon\.svg$/,
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: '@svgr/webpack'
-    }
-  ]
-}
-
-module.exports = {
-  ...
-  webpackFinal: async (config) => {
-    // tweak existing rule to avoid matching *.icon.svg
-    const fileLoaderRule = config.module.rules.find((rule) => rule.test.test('.svg'))
-    fileLoaderRule.exclude = iconLoaderRule.test
-
-    // Add icon loader rule
-    config.module.rules.push(iconLoaderRule)
-    return config
-  }
-}
-```
-
-### Metro (React Native)
-
-For the Metro bundler the terminology is slightly different and we're applying a _transformer_ rather than a loader.
-The example below uses the expo default metro config, but you can switch `getDefaultConfig` out for any metro config generator.
-For Metro you will need to ensure you have `react-native-svg-transformer` installed as a dev dependency.
-
-````js
-/* in your metro.config.js file */
-const { getDefaultConfig } = require("@expo/metro-config");
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts }
-  } = await getDefaultConfig(__dirname);
-  return {
-    transformer: {
-      // apply the SVGR transformer
-      babelTransformerPath: require.resolve("react-native-svg-transformer")
-    },
-    resolver: {
-      // ensure SVGs are *not* treated as assets...
-      assetExts: assetExts.filter(ext => ext !== "svg"),
-      // ...but instead as source files to be transformed
-      sourceExts: [...sourceExts, "svg"]
-    }
-  };
-})();
-
-
-### Webpack for web-only
-If you are only targeting the web platform, and want to avoid the dependency on `react-native-svg`, you can follow the Webpack instructions above, but replace the contents of your `svgr.config.js` file with:
-
-```js
-module.exports = require(@telus-uds/components-base/config/svgr-icons-web)
-````
-
-## Using icons
-
-If you are using a standalone build you can use the generated files as you would any other React component.
-Assuming you are using Metro or Webpack and have applied the correct configuration as above, you can simply use your icons as components with
-
-```js
-const MyIconComponent = require('path/to/my-icon.icon.svg')
-
-...
-
-return <MyIconComponent />
-```

package/docs/Introduction.stories.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Guides/Introduction" />
-
-# Welcome to the UDS workshop
-
-This is the storybook for developing and documenting Universal Design System (UDS) components.
-
-<!-- @TODO fill out -->

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/InputLabel/LabelContent.web.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function LabelContent({
-  children,
-  forId
-}) {
-  return /*#__PURE__*/React.createElement("label", {
-    htmlFor: forId
-  }, children);
-}
-
-export default LabelContent;
-LabelContent.propTypes = {
-  children: PropTypes.string,
-  forId: PropTypes.string
-};

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