@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base';
-import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    onToggle = () => {},
-    tokens = {},
-    nativeID,
-    initialOpen = false,
-    ...rest
-  } = _ref;
-  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
-  const handleChange = (openPanels, event) => {
-    if (typeof onToggle === 'function') {
-      const isOpen = openPanels.length > 0;
-      onToggle(event, isOpen);
-    }
-  };
-  return /*#__PURE__*/_jsx(ExpandCollapse, {
-    onChange: handleChange,
-    tokens: tokens,
-    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
-    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
-      ...expandProps,
-      panelId: expandCollapeMiniPanelId,
-      variant: {
-        mini: true
-      },
-      controlTokens: {
-        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
-        icon: null,
-        borderColor: 'transparent',
-        textLine: 'none',
-        backgroundColor: 'transparent'
-      }
-      // TODO refactor
-      // eslint-disable-next-line react/no-unstable-nested-components
-      ,
-      control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
-        pressableState: pressableState,
-        ...rest
-      }),
-      controlRef: ref,
-      nativeID: nativeID,
-      children: children
-    })
-  });
-});
-ExpandCollapseMini.displayName = 'ExpandCollapseMini';
-ExpandCollapseMini.propTypes = {
-  ...ExpandCollapseMiniControl.propTypes,
-  /**
-   * Function to call on pressing the panel's control, which should open or close the panel.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * ID for DOM element on web
-   */
-  nativeID: PropTypes.string,
-  /**
-   * Children nodes that can be added
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Controls if the panel and the content is opened by default on the first load
-   */
-  initialOpen: PropTypes.bool,
-  tokens: getTokensPropType('ExpandCollapseMini')
-};
-export default ExpandCollapseMini;

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
-// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
-// and a more appropriate press area, defer interaction handling to it.
-const presentationOnly = {
-  accessibilityRole: null,
-  // Treat as regular flow content with the Control
-  pointerEvents: 'none',
-  // Stop RNW from stopping clicks from bubbling to Control
-  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
-};
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    pressableState,
-    collapseTitle,
-    expandTitle = collapseTitle,
-    iconPosition = 'right',
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref2;
-  const {
-    expanded,
-    hover,
-    focus
-  } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
-  const {
-    outerBorderColor
-  } = useThemeTokens('Link', {}, {}, {
-    focus
-  });
-  const {
-    size,
-    icon,
-    ...themeTokens
-  } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-    expanded,
-    focus
-  });
-
-  // Choose hover styles when any part of Control is hoverred
-  const appearance = {
-    ...variant,
-    hover
-  };
-  const getTokens = linkState => {
-    const {
-      hover: linkHover
-    } = linkState || {};
-    const isHovered = hover || linkHover;
-    if (isHovered) {
-      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-      return {
-        iconTranslateY: (expanded ? -1 : 1) * size
-      };
-    }
-    return {};
-  };
-  return /*#__PURE__*/_jsx(Link, {
-    variant: appearance,
-    icon: icon,
-    iconPosition: iconPosition,
-    tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
-    }),
-    ref: ref,
-    ...presentationOnly,
-    ...selectProps(rest),
-    children: expanded ? expandTitle : collapseTitle
-  });
-});
-ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl';
-ExpandCollapseMiniControl.propTypes = {
-  ...selectedSystemPropTypes,
-  ...Link.propTypes,
-  /**
-   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
-   */
-  onPress: PropTypes.func,
-  /**
-   * ExpandCollapseMiniControl title when expanded
-   */
-  expandTitle: PropTypes.string.isRequired,
-  /**
-   * ExpandCollapseMiniControl title when collapsed
-   */
-  collapseTitle: PropTypes.string.isRequired,
-  /**
-   * React Native's `Pressable`'s state object
-   */
-  pressableState: PropTypes.object,
-  variant: PropTypes.object
-};
-export default ExpandCollapseMiniControl;

package/lib/ExpandCollapseMini/index.js

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

package/lib/QuantitySelector/styles.js

@@ -1,18 +0,0 @@
-import { styledComponents } from '../utils';
-const {
-  styled
-} = styledComponents;
-export const InputField = styled.div`
-  order: 1;
-  text-align: center;
-  z-index: 10;
-  input {
-    text-align: center;
-  }
-`;
-export const InputWrapper = styled.div`
-  text-align: start;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-`;

package/lib/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/Table/Row.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx("tr", {
-    ref: ref,
-    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
-      isFirstInRow: index === 0
-    }))
-  });
-});
-Row.displayName = 'Row';
-Row.propTypes = {
-  children: PropTypes.node
-};
-export default Row;

package/lib/utils/theming/styled-components.js

@@ -1,26 +0,0 @@
-/**
- * Currently, `styled` is only available as the default export in `styled-components`.
- * In transpiled/CommonJS environments, that works as expected, but it breaks server-side ESM usage of `styled-components`.
- *
- * To make `styled-components` work server-side, instead of:
- *
- *  import styled from 'styled-components';
- *
- * We must write:
- *
- *  import styledWrapper from 'styled-components';
- *  const styled = styledWrapper.default;
- *
- * This approach is confusing and not a viable option for code that should run in both browser and server.
- */
-
-import _styled, { css, keyframes, createGlobalStyle, ServerStyleSheet } from 'styled-components';
-const styled = typeof _styled === 'function' ? _styled : _styled.default;
-const styledComponents = {
-  styled,
-  css,
-  keyframes,
-  createGlobalStyle,
-  ServerStyleSheet
-};
-export default styledComponents;

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base'
-import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
-
-const ExpandCollapseMini = React.forwardRef(
-  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
-    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
-    const handleChange = (openPanels, event) => {
-      if (typeof onToggle === 'function') {
-        const isOpen = openPanels.length > 0
-        onToggle(event, isOpen)
-      }
-    }
-
-    return (
-      <ExpandCollapse
-        onChange={handleChange}
-        tokens={tokens}
-        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
-      >
-        {(expandProps) => (
-          <ExpandCollapse.Panel
-            {...expandProps}
-            panelId={expandCollapeMiniPanelId}
-            variant={{ mini: true }}
-            controlTokens={{
-              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
-              icon: null,
-              borderColor: 'transparent',
-              textLine: 'none',
-              backgroundColor: 'transparent'
-            }}
-            // TODO refactor
-            // eslint-disable-next-line react/no-unstable-nested-components
-            control={(pressableState) => (
-              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
-            )}
-            controlRef={ref}
-            nativeID={nativeID}
-          >
-            {children}
-          </ExpandCollapse.Panel>
-        )}
-      </ExpandCollapse>
-    )
-  }
-)
-ExpandCollapseMini.displayName = 'ExpandCollapseMini'
-
-ExpandCollapseMini.propTypes = {
-  ...ExpandCollapseMiniControl.propTypes,
-  /**
-   * Function to call on pressing the panel's control, which should open or close the panel.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * ID for DOM element on web
-   */
-  nativeID: PropTypes.string,
-  /**
-   * Children nodes that can be added
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Controls if the panel and the content is opened by default on the first load
-   */
-  initialOpen: PropTypes.bool,
-  tokens: getTokensPropType('ExpandCollapseMini')
-}
-
-export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
-// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
-// and a more appropriate press area, defer interaction handling to it.
-const presentationOnly = {
-  accessibilityRole: null, // Treat as regular flow content with the Control
-  pointerEvents: 'none', // Stop RNW from stopping clicks from bubbling to Control
-  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
-}
-
-const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
-  color,
-  textLine,
-  blockLineHeight: lineHeight,
-  blockFontSize: fontSize
-})
-
-const ExpandCollapseMiniControl = React.forwardRef(
-  (
-    {
-      pressableState,
-      collapseTitle,
-      expandTitle = collapseTitle,
-      iconPosition = 'right',
-      tokens,
-      variant = {},
-      ...rest
-    },
-    ref
-  ) => {
-    const { expanded, hover, focus } = pressableState || {}
-    // we only want focus outline when focusing, if user is pressing we don't want the border.
-    const { outerBorderColor } = useThemeTokens('Link', {}, {}, { focus })
-    const { size, icon, ...themeTokens } = useThemeTokens(
-      'ExpandCollapseMiniControl',
-      tokens,
-      variant,
-      { expanded, focus }
-    )
-
-    // Choose hover styles when any part of Control is hoverred
-    const appearance = { ...variant, hover }
-
-    const getTokens = (linkState) => {
-      const { hover: linkHover } = linkState || {}
-      const isHovered = hover || linkHover
-      if (isHovered) {
-        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-        return { iconTranslateY: (expanded ? -1 : 1) * size }
-      }
-
-      return {}
-    }
-
-    return (
-      <Link
-        variant={appearance}
-        icon={icon}
-        iconPosition={iconPosition}
-        tokens={(linkState) => ({
-          ...getTokens(linkState),
-          ...selectLinkTokens(themeTokens),
-          outerBorderColor
-        })}
-        ref={ref}
-        {...presentationOnly}
-        {...selectProps(rest)}
-      >
-        {expanded ? expandTitle : collapseTitle}
-      </Link>
-    )
-  }
-)
-
-ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl'
-
-ExpandCollapseMiniControl.propTypes = {
-  ...selectedSystemPropTypes,
-  ...Link.propTypes,
-  /**
-   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
-   */
-  onPress: PropTypes.func,
-  /**
-   * ExpandCollapseMiniControl title when expanded
-   */
-  expandTitle: PropTypes.string.isRequired,
-  /**
-   * ExpandCollapseMiniControl title when collapsed
-   */
-  collapseTitle: PropTypes.string.isRequired,
-  /**
-   * React Native's `Pressable`'s state object
-   */
-  pressableState: PropTypes.object,
-  variant: PropTypes.object
-}
-
-export default ExpandCollapseMiniControl

package/src/ExpandCollapseMini/index.js

@@ -1,3 +0,0 @@
-import ExpandCollapseMini from './ExpandCollapseMini'
-
-export default ExpandCollapseMini

package/src/utils/theming/styled-components.js

@@ -1,23 +0,0 @@
-/**
- * Currently, `styled` is only available as the default export in `styled-components`.
- * In transpiled/CommonJS environments, that works as expected, but it breaks server-side ESM usage of `styled-components`.
- *
- * To make `styled-components` work server-side, instead of:
- *
- *  import styled from 'styled-components';
- *
- * We must write:
- *
- *  import styledWrapper from 'styled-components';
- *  const styled = styledWrapper.default;
- *
- * This approach is confusing and not a viable option for code that should run in both browser and server.
- */
-
-import _styled, { css, keyframes, createGlobalStyle, ServerStyleSheet } from 'styled-components'
-
-const styled = typeof _styled === 'function' ? _styled : _styled.default
-
-const styledComponents = { styled, css, keyframes, createGlobalStyle, ServerStyleSheet }
-
-export default styledComponents