@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/OrderedList/Item.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
+import Typography from '../Typography';
+import ItemBase from './ItemBase';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontHeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor,
+    itemTextColor
+  } = _ref;
+  return applyTextStyles({
+    fontWeight: itemFontHeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor || itemTextColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+const selectItemCounterStyles = _ref2 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletTextAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    itemColor,
+    itemTextColor
+  } = _ref2;
+  return {
+    color: itemColor || itemTextColor,
+    width: itemBulletContainerWidth,
+    textAlign: itemBulletTextAlign,
+    ...applyTextStyles({
+      fontWeight: itemFontWeight,
+      fontSize: itemFontSize,
+      fontName: itemFontName,
+      themeOptions
+    }),
+    lineHeight: itemLineHeight * itemFontSize
+  };
+};
+const selectItemContentStyles = (_ref3, isLastChild) => {
+  let {
+    interItemMargin,
+    listGutter,
+    ...themeTokens
+  } = _ref3;
+  return {
+    ...themeTokens,
+    marginLeft: listGutter,
+    marginBottom: !isLastChild ? interItemMargin : 0
+  };
+};
+const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    children,
+    index,
+    isLastChild,
+    title,
+    tokens = {},
+    variant,
+    ...rest
+  } = _ref4;
+  const themeTokens = useThemeTokens('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = useTheme();
+  const itemContent = wrapStringsInText(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  const itemCounter = wrapStringsInText(`${index}.`, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/_jsxs(ItemBase, {
+    ref: ref,
+    style: {
+      ...staticStyles.container,
+      ...themeTokens
+    },
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
+      children: itemCounter
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
+      children: [title && /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          tokens: headingTokens,
+          children: title
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        children: itemContent
+      })]
+    })]
+  });
+});
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item index
+   */
+  index: PropTypes.number,
+  /**
+   * If true, the item is the last one on the list
+   */
+  isLastChild: PropTypes.bool,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
+  title: PropTypes.string,
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('OrderedList'),
+  /**
+   * Item variant
+   */
+  variant: variantProp.propType
+};
+Item.displayName = 'OrderedListItem';
+export default Item;
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  itemCounter: {
+    alignItems: 'flex-end'
+  },
+  itemContent: {
+    flexShrink: 1
+  }
+});

package/lib/OrderedList/ItemBase.js

@@ -0,0 +1,43 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getAccessibilityRole = () => Platform.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
+const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: getAccessibilityRole(),
+    ref: ref,
+    style: [staticStyles.container, style],
+    ...rest,
+    children: children
+  });
+});
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item custom styles
+   */
+  style: PropTypes.object
+};
+Item.displayName = 'OrderedListItem';
+export default Item;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+});

package/lib/OrderedList/OrderedList.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
+import OrderedListBase from './OrderedListBase';
+import Item from './Item';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    start = 1,
+    variant = {},
+    tokens = {},
+    ...rest
+  } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = React.useMemo(() => {
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
+      return /*#__PURE__*/React.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
+        }
+      });
+    };
+    if (variant || tokens) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
+      }
+      return [addVariantAndTokensToProps(children, 0, true)];
+    }
+    return children;
+  }, [children, variant, start, tokens]);
+  return /*#__PURE__*/_jsx(OrderedListBase, {
+    ref: ref,
+    ...selectProps(rest),
+    children: childrenWithParentVariants
+  });
+});
+OrderedList.propTypes = {
+  ...selectedSystemPropsTypes,
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
+};
+OrderedList.displayName = 'OrderedList';
+OrderedList.Item = Item;
+export default OrderedList;

package/lib/OrderedList/OrderedListBase.js

@@ -0,0 +1,36 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ItemBase from './ItemBase';
+import { jsx as _jsx } from "react/jsx-runtime";
+const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "list",
+    ref: ref,
+    style: staticStyles.container,
+    ...rest,
+    children: children
+  });
+});
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: PropTypes.node.isRequired
+};
+OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.Item = ItemBase;
+export default OrderedListBase;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0
+  }
+});

package/lib/OrderedList/index.js

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

package/lib/Pagination/PageButton.js

@@ -1,33 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+import React, { createElement as _createElement } 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';
+const PageButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     label,
     onPress,
@@ -38,30 +16,26 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     ...props
   } = _ref;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
-
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
-
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
   const activeProps = isActive ? {
     selected: true,
-    ..._utils.a11yProps.nonFocusableProps,
+    ...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 key = isActive ? 'active-item' : undefined;
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
-  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
-
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
-
+  } = hrefAttrsProp.bundle(props);
   const buttonProps = {
     accessibilityRole,
     accessibilityLabel,
@@ -70,23 +44,30 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/_createElement(ButtonBase, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
+    key: key,
+    ...activeProps
+  }, label);
 });
 PageButton.displayName = 'PageButton';
-PageButton.propTypes = { ..._utils.linkProps.types,
-  label: _propTypes.default.string,
-  isActive: _propTypes.default.bool,
-  copy: _utils.copyPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
+PageButton.propTypes = {
+  ...linkProps.types,
+  /**
+   * To set custom label for the button
+   */
+  label: PropTypes.string,
+  /**
+   * To set `PageButton` to active state
+   */
+  isActive: PropTypes.bool,
+  /**
+   * To change the language for labels
+   */
+  copy: copyPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('PaginationPageButton')
 };
-
-var _default = (0, _utils.withLinkRouter)(PageButton);
-
-exports.default = _default;
+export default withLinkRouter(PageButton);