@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/SkeletonProvider/SkeletonImage.js

@@ -1,39 +0,0 @@
-var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Skeleton } from '@telus-uds/components-base';
-import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    rounded,
-    imgHeight,
-    size,
-    sizeIndex,
-    // Size automatically from image height, unless any size prop is passed in
-    sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
-    show,
-    children
-  } = _ref;
-  if (!show) {
-    return children;
-  }
-  const shape = rounded !== 'circle' ? 'box' : rounded;
-  return /*#__PURE__*/_jsx(Skeleton, {
-    size: size,
-    sizePixels: sizePixels,
-    sizeIndex: sizeIndex,
-    shape: shape,
-    ref: ref
-  });
-});
-SkeletonImage.displayName = 'SkeletonImage';
-SkeletonImage.propTypes = {
-  imgHeight: PropTypes.number,
-  rounded: PropTypes.oneOf(['circle', 'corners']),
-  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
-  show: PropTypes.bool.isRequired,
-  children: PropTypes.node
-};
-export default SkeletonImage;

package/lib-module/SkeletonProvider/SkeletonProvider.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Typography } from '@telus-uds/components-base';
-import Image from '../Image';
-import SkeletonTypography from './SkeletonTypography';
-import SkeletonImage from './SkeletonImage';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const SkeletonProvider = _ref => {
-  let {
-    children,
-    show
-  } = _ref;
-  if (!show) {
-    return children;
-  }
-  const mapChild = child => {
-    if (!child) {
-      return null;
-    }
-    let childElement = child;
-    if (childElement.props && 'children' in childElement.props) {
-      const {
-        children: elementChildren
-      } = childElement.props;
-      const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
-      childElement = /*#__PURE__*/React.cloneElement(childElement, {
-        children: mappedChildren
-      });
-    }
-    if (childElement.type === Typography) {
-      return /*#__PURE__*/_jsx(SkeletonTypography, {
-        ...childElement.props.skeleton,
-        show: show,
-        children: childElement
-      });
-    }
-    if (childElement.type === Image) {
-      return /*#__PURE__*/_jsx(SkeletonImage, {
-        ...childElement.props.skeleton,
-        imgHeight: childElement.props.height,
-        rounded: childElement.props.rounded,
-        show: show,
-        children: childElement
-      });
-    }
-    return childElement;
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: React.Children.map(children, mapChild)
-  });
-};
-SkeletonProvider.propTypes = {
-  show: PropTypes.bool.isRequired,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
-};
-export default SkeletonProvider;

package/lib-module/SkeletonProvider/SkeletonTypography.js

@@ -1,38 +0,0 @@
-var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Skeleton } from '@telus-uds/components-base';
-import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonTypography = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    show,
-    size,
-    sizeIndex,
-    sizePixels,
-    characters,
-    lines,
-    children
-  } = _ref;
-  if (!show) {
-    return children;
-  }
-  return /*#__PURE__*/_jsx(Skeleton, {
-    size: size,
-    sizeIndex: sizeIndex,
-    sizePixels: sizePixels,
-    characters: characters,
-    lines: lines,
-    ref: ref
-  });
-});
-SkeletonTypography.displayName = 'SkeletonTypography';
-SkeletonTypography.propTypes = {
-  show: PropTypes.bool.isRequired,
-  children: PropTypes.node,
-  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
-  characters: (_Skeleton$propTypes4 = Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
-  lines: (_Skeleton$propTypes5 = Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
-};
-export default SkeletonTypography;

package/lib-module/SkeletonProvider/index.js

@@ -1,2 +0,0 @@
-import SkeletonProvider from './SkeletonProvider';
-export default SkeletonProvider;

package/lib-module/Span/Span.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSpan = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Span__StyledSpan",
-  componentId: "components-web__sc-o7sihn-0"
-})(["", "};"], _ref => {
-  let {
-    flex
-  } = _ref;
-  return flex ? 'display: inline-flex' : '';
-});
-
-/**
- * Text as an HTML ```<span>``` element.
- *
- * Span may be used in cases where an inline span or direct access to HTML attributes is required.
- * In most cases, `Typography` should be used for text, or Paragraph for body text.
- */
-const Span = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    variant,
-    tokens,
-    testID,
-    flex,
-    ...rest
-  } = _ref2;
-  const style = useTypographyTheme(variant, tokens);
-  return /*#__PURE__*/_jsx(StyledSpan, {
-    "data-testid": testID,
-    flex: flex,
-    style: style,
-    ref: ref,
-    ...selectProps(rest),
-    children: children
-  });
-});
-Span.displayName = 'Span';
-Span.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.node.isRequired,
-  /**
-   * Adds `data-testid` attribute for testing
-   */
-  testID: PropTypes.string,
-  /**
-   * Sets display to inline-flex so that children are laid out using the flex model.
-   * Use this if the span contains children that expect to be inside a flex container.
-   */
-  flex: PropTypes.bool,
-  /**
-   * Span takes the same tokens overrides as Typography
-   */
-  tokens: getTokensPropType('Typography'),
-  /**
-   * Span can take any of Typography's theme variants
-   */
-  variant: PropTypes.exact({
-    bold: PropTypes.bool,
-    colour: PropTypes.oneOf(['secondary', 'tertiary']),
-    compact: PropTypes.bool,
-    inverse: PropTypes.bool,
-    size: PropTypes.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
-    weight: PropTypes.oneOf(['semibold', 'bold'])
-  })
-};
-export default Span;

package/lib-module/Span/index.js

@@ -1,2 +0,0 @@
-import Span from './Span';
-export default Span;

package/lib-module/Spinner/Spinner.js

@@ -1,215 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { Portal } from '@gorhom/portal';
-import SpinnerContent from './SpinnerContent';
-import { htmlAttrs, media } from '../utils';
-import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__SpinnerContainer",
-  componentId: "components-web__sc-116rqck-0"
-})(_ref => {
-  let {
-    inline,
-    fullScreen
-  } = _ref;
-  return {
-    position: 'relative',
-    ...(inline && {
-      display: 'block',
-      ...media().from('md').css({
-        display: 'inline-block'
-      })
-    }),
-    ...(fullScreen && {
-      top: '50%',
-      transform: 'translateY(-50%)'
-    })
-  };
-});
-const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__ContentOverlay",
-  componentId: "components-web__sc-116rqck-1"
-})({
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  zIndex: BACKDROP_Z_INDEX
-});
-const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__FullscreenOverlay",
-  componentId: "components-web__sc-116rqck-2"
-})(_ref2 => {
-  let {
-    fullScreenOverLayBackground
-  } = _ref2;
-  return {
-    position: 'fixed',
-    width: '100vw',
-    height: '100vh',
-    top: 0,
-    left: 0,
-    zIndex: BACKDROP_Z_INDEX,
-    backgroundColor: fullScreenOverLayBackground
-  };
-});
-const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__OpaqueContainer",
-  componentId: "components-web__sc-116rqck-3"
-})({
-  opacity: BACKDROP_OPACITY
-});
-const recursiveMap = (children, fn) => React.Children.map(children, child => {
-  if (! /*#__PURE__*/React.isValidElement(child)) {
-    return child;
-  }
-  if (child.props.children) {
-    return fn( /*#__PURE__*/React.cloneElement(child, {
-      children: recursiveMap(child.props.children, fn)
-    }));
-  }
-  return fn(child);
-});
-
-/**
- * Loading indicator.
- */
-const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    children,
-    fullScreen = false,
-    inline = false,
-    label,
-    labelPosition,
-    show = false,
-    isStatic = false,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-  const {
-    fullScreenOverLayBackground,
-    size,
-    thickness
-  } = useThemeTokens('Spinner', tokens, variant);
-  const {
-    size: sizeVariant = 'large'
-  } = variant;
-  useScrollBlocking([fullScreen, show]);
-  if (!show) {
-    return children ?? null;
-  }
-
-  // Full screen spinner
-  if (fullScreen) {
-    return /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(FullscreenOverlay, {
-        fullScreenOverLayBackground: fullScreenOverLayBackground,
-        children: /*#__PURE__*/_jsx(SpinnerContainer, {
-          inline: inline,
-          fullScreen: fullScreen,
-          "aria-live": "assertive",
-          ...selectProps(rest),
-          children: /*#__PURE__*/_jsx(SpinnerContent, {
-            label: label,
-            labelPosition: labelPosition,
-            overlay: true,
-            size: size,
-            thickness: thickness,
-            sizeVariant: sizeVariant,
-            isStatic: isStatic
-          })
-        })
-      })
-    });
-  }
-
-  // Overlay spinner
-  if (children) {
-    return /*#__PURE__*/_jsxs(SpinnerContainer, {
-      inline: inline,
-      "aria-live": "assertive",
-      ...selectProps(rest),
-      children: [/*#__PURE__*/_jsx(SpinnerContent, {
-        label: label,
-        labelPosition: labelPosition,
-        overlay: true,
-        size: size,
-        thickness: thickness,
-        sizeVariant: sizeVariant,
-        isStatic: isStatic
-      }), /*#__PURE__*/_jsx(ContentOverlay, {}), /*#__PURE__*/_jsx(OpaqueContainer, {
-        inert: "true",
-        children: recursiveMap(children, c => {
-          if (c) {
-            return /*#__PURE__*/React.cloneElement(c, {
-              tabIndex: '-1',
-              'aria-hidden': 'true'
-            });
-          }
-          return undefined;
-        })
-      })]
-    });
-  }
-
-  // Standalone spinner
-  return /*#__PURE__*/_jsx(SpinnerContainer, {
-    ref: ref,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(SpinnerContent, {
-      label: label,
-      labelPosition: labelPosition,
-      size: size,
-      thickness: thickness,
-      sizeVariant: sizeVariant,
-      isStatic: isStatic
-    })
-  });
-});
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Spinner'),
-  /**
-   * Content to be overlaid while the spinner is active. Can be text, any HTML element,
-   * or any component.
-   */
-  children: PropTypes.node,
-  /**
-   * Enables body locking.
-   */
-  fullScreen: PropTypes.bool,
-  /**
-   * Set the inline prop to true if the Spinner should only cover its children; if
-   * the Spinner should cover the full width of its parent regardless of the size of
-   * its children, inline should be set to false
-   */
-  inline: PropTypes.bool,
-  /**
-   * Communicates a message to assistive technology while visible. This same message
-   * will appear underneath the spinner when its `size` is `large`.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * The size of the spinner
-   */
-  // size: PropTypes.oneOf(['large', 'small']),
-  /**
-   * Whether or not to render the spinner.
-   */
-  show: PropTypes.bool,
-  /**
-   * If true, it should render a static spinner
-   */
-  isStatic: PropTypes.bool,
-  /**
-   * Determine where the label of the spinner should be placed, left, right, bottom or top.
-   */
-  labelPosition: PropTypes.string
-};
-export default Spinner;

package/lib-module/Spinner/SpinnerContent.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import { BACKDROP_Z_INDEX, LARGE } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Container = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SpinnerContent__Container",
-  componentId: "components-web__sc-1c8bd8e-0"
-})(_ref => {
-  let {
-    overlay
-  } = _ref;
-  return {
-    display: 'inline-flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    ...(overlay && {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      zIndex: BACKDROP_Z_INDEX
-    })
-  };
-});
-const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    label,
-    labelPosition,
-    overlay = false,
-    sizeVariant,
-    size,
-    thickness,
-    isStatic,
-    ...rest
-  } = _ref2;
-  const labelMapping = {
-    top: 'column-reverse',
-    bottom: 'column',
-    left: 'row-reverse',
-    right: 'row'
-  };
-  return /*#__PURE__*/_jsx(Container, {
-    overlay: overlay,
-    ref: ref,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: 3,
-      tokens: {
-        alignItems: 'center'
-      },
-      direction: labelMapping[labelPosition],
-      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-        label: label,
-        tokens: {
-          size,
-          thickness
-        },
-        isStatic: isStatic,
-        ...selectProps(rest)
-      }), sizeVariant === LARGE && /*#__PURE__*/_jsx(Typography, {
-        children: label
-      })]
-    })
-  });
-});
-SpinnerContent.displayName = 'SpinnerContent';
-SpinnerContent.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Whether the container has to have an overlay styling.
-   */
-  overlay: PropTypes.bool,
-  /**
-   * Size (width and height) of the spinner.
-   */
-  size: PropTypes.number,
-  /**
-   * The size of the spinner
-   */
-  sizeVariant: PropTypes.oneOf(['large', 'small']),
-  /**
-   * If true, it should render a static spinner
-   */
-  isStatic: PropTypes.bool
-};
-export default SpinnerContent;

package/lib-module/Spinner/constants.js

@@ -1,4 +0,0 @@
-export const BACKDROP_OPACITY = 0.06;
-export const BACKDROP_Z_INDEX = 1400;
-export const LARGE = 'large';
-export const SMALL = 'small';

package/lib-module/Spinner/index.js

@@ -1,2 +0,0 @@
-import Spinner from './Spinner';
-export default Spinner;