@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

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/Checkbox/CheckboxInput.web.js

@@ -1,57 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-/**
- * On Web we need to include an actual input but hide it.
- */
-
-const CheckboxInput = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
-  const handleClick = event => {
-    // Cancel the click dispatched via the label tag, since it's already wrapped
-    // in <Pressable>
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  return /*#__PURE__*/React.createElement("input", {
-    checked: isControlled ? checked : undefined,
-    defaultChecked: isControlled ? undefined : defaultChecked,
-    disabled: disabled,
-    hidden: true,
-    id: id,
-    name: name,
-    onChange: onChange,
-    onClick: handleClick,
-    ref: ref,
-    type: "checkbox",
-    value: value
-  });
-});
-CheckboxInput.displayName = 'CheckboxInput';
-CheckboxInput.propTypes = {
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-  isControlled: PropTypes.bool.isRequired,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string
-};
-CheckboxInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
-export default CheckboxInput;

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/Link/InlinePressable.web.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-/**
- * @typedef {import('react-native').PressableProps} PressableProps
- */
-
-/**
- * InlinePressable is an alternative to React Native's Pressable that works better when nested
- * inline inside Text. It accepts the same props as React Native's Pressable.
- *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
- * @param {PressableProps} PressableProps
- */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-
-const InlinePressable = ({
-  children,
-  style,
-  ...props
-}) => /*#__PURE__*/React.createElement(Pressable, Object.assign({
-  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style]
-}, props), pressState => typeof children === 'function' ? children(pressState) : children);
-
-const staticStyles = StyleSheet.create({
-  inline: {
-    // Stop Pressable defaulting to (block) flex
-    display: 'inline-flex'
-  }
-});
-export default InlinePressable;

package/lib/Radio/RadioInput.web.js

@@ -1,59 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-/**
- * On Web we need to include an actual input but hide it.
- */
-
-const RadioInput = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
-  const handleClick = event => {
-    // Cancel the click dispatched via the label tag, since it's already wrapped
-    // in <Pressable>
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  return /*#__PURE__*/React.createElement("input", {
-    checked: isControlled ? checked : undefined,
-    defaultChecked: isControlled ? undefined : defaultChecked,
-    disabled: disabled,
-    hidden: true,
-    id: id,
-    name: name,
-    onChange: onChange,
-    onClick: handleClick,
-    ref: ref,
-    type: "radio",
-    value: value
-  });
-});
-RadioInput.displayName = 'Radio';
-RadioInput.propTypes = {
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  isControlled: PropTypes.bool,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
-RadioInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  id: null,
-  isControlled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
-export default RadioInput;

package/lib/Select/Group.web.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-
-const Group = ({
-  children,
-  label
-}) => {
-  return /*#__PURE__*/React.createElement("optgroup", {
-    label: label
-  }, children);
-};
-
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  label: PropTypes.string.isRequired
-};

package/lib/Select/Item.web.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Item = ({
-  children,
-  value
-}) => /*#__PURE__*/React.createElement("option", {
-  value: value
-}, children);
-
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};

package/lib/Select/Picker.web.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-
-const Picker = ({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  style,
-  inactive,
-  children,
-  placeholder,
-  nativeID,
-  testID,
-  ...rest
-}) => {
-  const {
-    accessibilityLabel,
-    accessibilityDescribedBy,
-    accessibilityInvalid
-  } = rest;
-  return /*#__PURE__*/React.createElement("select", {
-    style: style,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: inactive,
-    value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value),
-    id: nativeID,
-    "aria-label": accessibilityLabel,
-    "aria-describedby": accessibilityDescribedBy,
-    "aria-invalid": accessibilityInvalid,
-    "data-testid": testID
-  }, placeholder !== undefined && /*#__PURE__*/React.createElement("option", {
-    value: placeholder.value,
-    disabled: true,
-    hidden: true
-  }, placeholder.label), children);
-};
-
-export default Picker;
-Picker.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  style: PropTypes.object,
-  inactive: PropTypes.bool,
-  children: componentPropType(['Item', 'Group']),
-  placeholder: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  }),
-  nativeID: PropTypes.string,
-  testID: PropTypes.string
-};

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/info/platform/platform.web.js

@@ -1 +0,0 @@
-export default '.web';

package/src/InputLabel/LabelContent.web.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-function LabelContent({ children, forId }) {
-  return <label htmlFor={forId}>{children}</label>
-}
-
-export default LabelContent
-
-LabelContent.propTypes = {
-  children: PropTypes.string,
-  forId: PropTypes.string
-}

package/src/Select/Picker.web.jsx

@@ -1,67 +0,0 @@
-import React from 'react'
-
-import PropTypes from 'prop-types'
-import { componentPropType } from '../utils'
-
-const Picker = ({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  style,
-  inactive,
-  children,
-  placeholder,
-  nativeID,
-  testID,
-  ...rest
-}) => {
-  const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
-
-  return (
-    <select
-      style={style}
-      onMouseOver={onMouseOver}
-      onMouseOut={onMouseOut}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      disabled={inactive}
-      value={value || (placeholder !== undefined ? placeholder.value : undefined)}
-      onChange={(event) => onChange(event.target.value)}
-      id={nativeID}
-      aria-label={accessibilityLabel}
-      aria-describedby={accessibilityDescribedBy}
-      aria-invalid={accessibilityInvalid}
-      data-testid={testID}
-    >
-      {placeholder !== undefined && (
-        <option value={placeholder.value} disabled hidden>
-          {placeholder.label}
-        </option>
-      )}
-      {children}
-    </select>
-  )
-}
-
-export default Picker
-
-Picker.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  style: PropTypes.object,
-  inactive: PropTypes.bool,
-  children: componentPropType(['Item', 'Group']),
-  placeholder: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  }),
-  nativeID: PropTypes.string,
-  testID: PropTypes.string
-}

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/info/platform/platform.web.js

@@ -1 +0,0 @@
-export default '.web'