@telus-uds/components-base 2.0.0 → 2.0.2

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,286 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
-import dictionary from './dictionary';
-import Box from '../Box';
-import { Button, ButtonDropdown } from '../Button';
-import { CheckboxGroup } from '../Checkbox';
-import Divider from '../Divider';
-import FlexGrid from '../FlexGrid';
-import Spacer from '../Spacer';
-import StackView from '../StackView';
-import Typography from '../Typography';
-import { TextButton } from '../Link';
-import ModalOverlay from './ModalOverlay';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  Col,
-  Row
-} = FlexGrid;
-
-const selectSubTitleTokens = _ref => {
-  let {
-    subtitleColor
-  } = _ref;
-  return {
-    color: subtitleColor
-  };
-};
-
-const selectDividerToknes = _ref2 => {
-  let {
-    dividerColor,
-    width,
-    decorative = true,
-    weight = 'thin'
-  } = _ref2;
-  return {
-    color: dividerColor,
-    width,
-    decorative,
-    weight
-  };
-};
-
-const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    label,
-    subtitle,
-    id = label,
-    variant,
-    tokens,
-    items = [],
-    values,
-    initialValues,
-    maxValues,
-    onChange,
-    copy = 'en',
-    readOnly = false,
-    inactive = false,
-    rowLimit = 12,
-    ...rest
-  } = _ref3;
-  const {
-    currentValues,
-    setValues
-  } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  });
-  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
-  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
-
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const [isOpen, setIsOpen] = useState(false);
-  const [checkedIds, setCheckedIds] = useState(currentValues !== null && currentValues !== void 0 ? currentValues : []);
-  const colSize = items.length > rowLimit ? 2 : 1;
-  const isSelected = currentValues.length > 0;
-  const uniqueFields = ['id', 'label'];
-
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
-  } // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-
-  const pressHandlers = getPressHandlersWithArgs(rest, [{
-    id,
-    label,
-    currentValues
-  }]);
-
-  const handleChange = event => {
-    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
-    setIsOpen(!isOpen);
-  };
-
-  const onApply = e => {
-    setValues(e);
-    setIsOpen(false);
-  };
-
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: ref,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && /*#__PURE__*/_jsxs(ModalOverlay, {
-      variant: {
-        width: colSize > 1 ? 'size576' : 's'
-      },
-      onClose: () => setIsOpen(false),
-      children: [/*#__PURE__*/_jsx(Row, {
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: 'h4'
-          },
-          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
-        })
-      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Spacer, {
-          space: 5
-        }), /*#__PURE__*/_jsx(Row, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: {
-              size: 'h5'
-            },
-            tokens: selectSubTitleTokens(themeTokens),
-            children: subtitle
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
-      }), /*#__PURE__*/_jsx(Box, {
-        scroll: true,
-        children: /*#__PURE__*/_jsx(Row, {
-          distribute: "between",
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
-            xs: 12 / colSize,
-            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
-              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
-              checkedIds: checkedIds,
-              onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/_jsx(Spacer, {
-              size: 4
-            })]
-          }, i))
-        })
-      }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({ ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/_jsx(Row, {
-        children: /*#__PURE__*/_jsxs(StackView, {
-          direction: "row",
-          space: 3,
-          tokens: {
-            alignItems: 'center'
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onPress: () => onApply(checkedIds),
-            variant: {
-              size: 'small',
-              priority: 'high'
-            },
-            children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/_jsx(Box, {
-            children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: () => setCheckedIds([]),
-              children: getCopy('clearButtonLabel')
-            })
-          })]
-        })
-      })]
-    })]
-  });
-});
-MultiSelectFilter.displayName = 'MultiSelectFilter';
-MultiSelectFilter.propTypes = {
-  /**
-   * The text displayed to the user in a ButtonDropdown.
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   * The text for the subtitle
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   * An optional unique string may be provided to identify the ButtonDropdown.
-   * If not provided, the label is used.
-   */
-  id: PropTypes.string,
-
-  /**
-   * Sets the variant for ButtonDropdown element.
-   */
-  variant: variantProp.propType,
-
-  /**
-   * Sets the tokens for ButtonDropdown element.
-   */
-  tokens: getTokensPropType('ButtonDropdown'),
-
-  /**
-   * The options a user may select.
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * The text displayed to the user with a checkbox, describing this option.
-     */
-    label: PropTypes.string.isRequired,
-
-    /**
-     * An optional unique string may be provided to identify this option.
-     * If not provided, the label is used.
-     */
-    id: PropTypes.string
-  })),
-
-  /**
-   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
-   * a parent component, pass an array of strings as well as an `onChange` handler.
-   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
-   * expects its state to be handled via `onChange` and so doesn't handle it itself.
-   */
-  values: PropTypes.arrayOf(PropTypes.string),
-
-  /**
-   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
-   * managing its own selected state, a default set of selections may be provided.
-   * Changing the `initialValues` does not change the user's selections.
-   */
-  initialValues: PropTypes.arrayOf(PropTypes.string),
-
-  /**
-   * If provided, sets a maximum number of items a user may select at once.
-   */
-  maxValues: PropTypes.number,
-
-  /**
-   * If provided, this function is called when the current selection is changed
-   * and is passed an array of the `id`s of all currently selected `items`.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Select English or French copy for the accessible label.
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-
-  /**
-   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
-   */
-  readOnly: PropTypes.string,
-
-  /**
-   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
-   * set as `disabled` and if the theme supports `inactive` appearances rules, these
-   * are applied.
-   */
-  inactive: PropTypes.string,
-
-  /**
-   * Sets the maximum number of items in one column. If number of items are more
-   * than the `rowLimit`, they will be rendered in 2 columns.
-   */
-  rowLimit: PropTypes.number
-};
-export default MultiSelectFilter;

package/lib-module/MultiSelectFilter/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    filterByLabel: 'Filter by %{filterCategory}:',
-    applyButtonLabel: 'Apply',
-    clearButtonLabel: 'Clear'
-  },
-  fr: {
-    filterByLabel: 'Filtrer par %{filterCategory}:',
-    applyButtonLabel: 'Appliquer',
-    clearButtonLabel: 'Effacer'
-  }
-};

package/lib-module/MultiSelectFilter/index.js

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

package/lib-module/Notification/Notification.js

@@ -1,230 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp } from '../utils';
-import ButtonBase from '../Button/ButtonBase';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectContainerStyles = tokens => ({ ...tokens
-});
-
-const selectTextStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
-  themeOptions
-});
-
-const selectIconProps = _ref => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-
-const selectIconContainerStyles = _ref2 => {
-  let {
-    iconGap
-  } = _ref2;
-  return {
-    paddingRight: iconGap
-  };
-};
-
-const selectDismissIconProps = _ref3 => {
-  let {
-    dismissIconSize,
-    dismissIconColor
-  } = _ref3;
-  return {
-    size: dismissIconSize,
-    color: dismissIconColor
-  };
-};
-
-const selectDismissButtonContainerStyles = _ref4 => {
-  let {
-    dismissButtonGap
-  } = _ref4;
-  return {
-    paddingLeft: dismissButtonGap
-  };
-};
-
-const selectContentContainerStyle = maxWidth => ({
-  width: maxWidth || '100%'
-});
-/**
- * A banner that highlights important messages:
- * - Status message to show there is an error or outage of services
- * - Confirmation message in response to user action
- * - Account information letting the user know they have almost used all their data
- *
- * ## Usage criteria
- * - Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs
- * - Show notifications before the content that the message is related to, otherwise show at the top of the main content
- * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
- * - When showing multiple notifications, show them in order of importance from top to bottom
- * - Use variants to visually show the type of message contained within the Notification.
- * - The icon and colour will indicate meaning and importance
- *
- * ### Variants
- * - Use `variant.style` to set the visual style of the notification
- * - Use `dismissible` prop to enable dismissible functionality
- * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
- *
- * ### When to use the system prop?
- * - Use `system` to show system-based messages coming from the application
- * - Don’t use `system` when the message is in response to user action
- *
- * ## Variants
- *
- * #### Success
- * Use the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.
- *
- * #### Warning
- * Use the warning variant to provide feedback of a warning; users would still be able to proceed forward.
- * The message will include an icon to indicate meaning and importance.
- *
- * #### Error
- * Use the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.
- *
- * #### Dismissible
- * Dismissible notifications should only be used for default or success notifications where there is no action needed from the user.
- * If the information is passive then it should be dismissible as indicated by an interactive close button on the far right.
- * If the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.
- *
- * Use the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.
- *
- * Please note:
- *
- * - Default and Success variants are dismissible
- * - Error and Warning variants are not dismissible
- *
- * #### System message
- * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
- * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
- */
-
-
-const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
-  let {
-    children,
-    system,
-    dismissible,
-    copy = 'en',
-    tokens,
-    variant,
-    ...rest
-  } = _ref5;
-  const [isDismissed, setIsDismissed] = useState(false);
-  const themeTokens = useThemeTokens('Notification', tokens, variant, {
-    system
-  });
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    themeOptions
-  } = useTheme();
-  const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-
-  if (isDismissed) {
-    return null;
-  }
-
-  const textStyles = selectTextStyles(themeTokens, themeOptions);
-  const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles,
-    variant
-  }) : children, {
-    style: textStyles
-  });
-  const {
-    icon: IconComponent,
-    dismissIcon: DismissIconComponent
-  } = themeTokens;
-
-  const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-
-
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: staticStyles.contentContainer,
-        children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: selectIconContainerStyles(themeTokens),
-          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
-          })
-        }), content && typeof content === 'function' ? content({
-          textStyles,
-          variant
-        }) : content]
-      }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-        style: selectDismissButtonContainerStyles(themeTokens),
-        children: /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: onDismissPress,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('dismiss'),
-          children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
-          })
-        })
-      })]
-    })
-  });
-});
-Notification.displayName = 'Notification';
-Notification.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Content of the `Notification`.
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-
-  /**
-   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
-   */
-  system: PropTypes.bool,
-
-  /**
-   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
-   */
-  dismissible: PropTypes.bool,
-
-  /**
-   * Select English or French copy for the accessible label of the dismiss button.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
-    dismiss: PropTypes.string
-  })]),
-  tokens: getTokensPropType('Notification'),
-  variant: variantProp.propType
-};
-export default Notification;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-});

package/lib-module/Notification/dictionary.js

@@ -1,8 +0,0 @@
-export default {
-  en: {
-    dismiss: 'Close'
-  },
-  fr: {
-    dismiss: 'Fermer'
-  }
-};

package/lib-module/Notification/index.js

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

package/lib-module/Pagination/PageButton.js

@@ -1,66 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ButtonBase from '../Button/ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp, withLinkRouter } from '../utils';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    label,
-    onPress,
-    href,
-    isActive,
-    copy,
-    variant,
-    tokens,
-    ...props
-  } = _ref;
-  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-
-  const activeProps = isActive ? {
-    selected: true,
-    ...a11yProps.nonFocusableProps,
-    // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
-    // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-    key: 'active-item'
-  } : {};
-  const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
-  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  };
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    ...buttonProps,
-    tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
-});
-PageButton.displayName = 'PageButton';
-PageButton.propTypes = { ...linkProps.types,
-  label: PropTypes.string,
-  isActive: PropTypes.bool,
-  copy: copyPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('PaginationPageButton')
-};
-export default withLinkRouter(PageButton);