@telus-uds/components-web 2.44.0 → 3.0.0

package/lib/utils/useOverlaidPosition.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { useCallback, useEffect, useRef, useState } from 'react';
 // TODO: add react-native as a peer dep and support native apps too.
 // That requires some fiddling with Allium repo storybook config, babel, etc,
 // unless ADS gets merged back into UDS monorepo.
+import Dimensions from "react-native-web/dist/exports/Dimensions";
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -132,14 +125,14 @@ const useOverlaidPosition = _ref3 => {
     }
   } = _ref3;
   // Element in main document flow that the targetRef element is positioned around
-  const sourceRef = (0, _react.useRef)(null);
-  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null);
 
   // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
-  const targetRef = (0, _react.useRef)(null);
-  const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
-  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
-  const onTargetLayout = (0, _react.useCallback)(_ref4 => {
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
     let {
       nativeEvent: {
         layout: {
@@ -164,13 +157,13 @@ const useOverlaidPosition = _ref3 => {
     });
   }, []);
   const readyToShow = Boolean(isShown && sourceRef.current);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const handleDimensionsChange = _ref5 => {
       var _sourceRef$current;
       let {
         window
       } = _ref5;
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 || _sourceRef$current.measureInWindow((x, y, width, height) => {
         // Could add a debouncer here if there's too many rerenders during gradual resizes
         setWindowDimensions(window);
         setSourceLayout({
@@ -187,17 +180,17 @@ const useOverlaidPosition = _ref3 => {
       if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
         // React Native >=0.65.0
         subscription.remove();
-      } else if (typeof _Dimensions.default.remove === 'function') {
+      } else if (typeof Dimensions.remove === 'function') {
         // React Native <0.65.0
-        _Dimensions.default.remove('change', handleDimensionsChange);
+        Dimensions.remove('change', handleDimensionsChange);
       }
       setSourceLayout(null);
       setTargetDimensions(null);
     };
     if (readyToShow) {
-      subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
       handleDimensionsChange({
-        window: _Dimensions.default.get('window')
+        window: Dimensions.get('window')
       });
     } else {
       unsubscribe();
@@ -220,5 +213,4 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-var _default = useOverlaidPosition;
-exports.default = _default;
+export default useOverlaidPosition;

package/lib/utils/useTypographyTheme.js

@@ -1,23 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _componentsBase = require("@telus-uds/components-base");
+import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base';
 const useTypographyTheme = (variant, tokens) => {
-  const viewport = (0, _componentsBase.useViewport)();
-  const themeTokens = (0, _componentsBase.useThemeTokens)('Typography', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
   const {
     themeOptions
-  } = (0, _componentsBase.useTheme)();
+  } = useTheme();
   const {
     fontSize,
     lineHeight,
     ...rnStyles
-  } = (0, _componentsBase.applyTextStyles)({
+  } = applyTextStyles({
     ...themeTokens,
     themeOptions
   });
@@ -27,5 +21,4 @@ const useTypographyTheme = (variant, tokens) => {
     lineHeight: `${lineHeight}px`
   };
 };
-var _default = useTypographyTheme;
-exports.default = _default;
+export default useTypographyTheme;

package/package.json

@@ -1,19 +1,20 @@
 {
   "author": "TELUS Digital",
+  "type": "module",
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.97.0",
-    "@telus-uds/system-constants": "^1.3.0",
+    "@telus-uds/components-base": "1.97.1",
+    "@telus-uds/system-constants": "^2.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "moment": "2.29.4",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.66.0",
+    "@telus-uds/system-theme-tokens": "^3.0.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -21,20 +22,20 @@
   },
   "exports": {
     ".": {
-      "import": "./lib-module/index.js",
-      "require": "./lib/index.js"
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
     },
     "./*": {
-      "import": "./lib-module/*/index.js",
-      "require": "./lib/*/index.js"
+      "import": "./lib/*/index.js",
+      "default": "./lib/index.js"
     },
     "./server": {
-      "import": "./lib-module/server.js",
-      "require": "./lib/server.js"
+      "import": "./lib/server.js",
+      "default": "./lib/server.js"
     },
     "./server/*": {
-      "import": "./lib-module/*/server.js",
-      "require": "./lib/server/*/server.js"
+      "import": "./lib/*/server.js",
+      "default": "./lib/*/server.js"
     }
   },
   "description": "UDS mult-brand web components",
@@ -56,12 +57,12 @@
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "MIT",
   "main": "lib/index.js",
-  "module": "lib-module/index.js",
+  "module": "lib/index.js",
   "name": "@telus-uds/components-web",
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
-    "react-native-web": "~0.17.7 || ~0.18.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native-web": "^0.19.10",
     "styled-components": "^5.3.0"
   },
   "repository": {
@@ -69,10 +70,7 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "build": "npm run build:code",
-    "build:main": "babel src -d lib",
-    "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "npm run build:main && npm run build:module",
+    "build": "babel src -d lib --env-name module",
     "format": "prettier --write .",
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
@@ -83,5 +81,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.44.0"
+  "version": "3.0.0"
 }

package/src/Card/Card.jsx

@@ -12,9 +12,9 @@ import {
   variantProp,
   a11yProps,
   viewProps,
-  PressableCardBase
+  PressableCardBase,
+  useResponsiveProp
 } from '@telus-uds/components-base'
-import { useResponsiveProp } from '@telus-uds/components-web'
 import styled from 'styled-components'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'

package/src/DatePicker/DatePicker.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
 import 'react-dates/initialize'
-import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker'
-import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController'
+import { SingleDatePicker, DayPickerSingleDateController } from 'react-dates'
 import {
   IconButton,
   TextInput,

package/src/PreviewCard/AuthorDate.jsx

@@ -10,10 +10,10 @@ import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-bas
  * Add same locale-based date formatting as StoryCard when ready.
  * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
  */
-const AuthorDate = ({ author, date }) => {
+const AuthorDate = React.forwardRef(({ author, date }, ref) => {
   const { separatorColor: color } = useThemeTokens('PreviewCard', {}, {})
   return (
-    <StackWrap space={2}>
+    <StackWrap space={2} ref={ref}>
       <Typography variant={{ size: 'small', colour: 'secondary' }}>{author}</Typography>
       <Typography variant={{ size: 'small' }} tokens={{ color }}>
         ·
@@ -21,7 +21,9 @@ const AuthorDate = ({ author, date }) => {
       <Typography variant={{ size: 'small', colour: 'secondary' }}>{date}</Typography>
     </StackWrap>
   )
-}
+})
+
+AuthorDate.displayName = 'AuthorDate'
 
 AuthorDate.propTypes = {
   /**

package/src/utils/logger.js

@@ -3,7 +3,7 @@ export const deprecate = (componentName, message) => {
     return
   }
 
-  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`) // eslint-disable-line no-console
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`)
 }
 
 export const warn = (componentName, message) => {
@@ -11,7 +11,7 @@ export const warn = (componentName, message) => {
     return
   }
 
-  console.warn(`[Allium] ${componentName}: ${message}`) // eslint-disable-line no-console
+  console.warn(`[Allium] ${componentName}: ${message}`)
 }
 
 export default {

package/lib-module/Badge/Badge.js

@@ -1,121 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
-import { htmlAttrs, transformGradient } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Badge__BadgeContainer",
-  componentId: "components-web__sc-tsiuo2-0"
-})(["background:", ";border:", ";display:inline-flex;justify-content:center;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
-  let {
-    background
-  } = _ref;
-  return background;
-}, _ref2 => {
-  let {
-    border
-  } = _ref2;
-  return border;
-}, _ref3 => {
-  let {
-    padding
-  } = _ref3;
-  return padding;
-}, _ref4 => {
-  let {
-    radius
-  } = _ref4;
-  return radius;
-}, _ref5 => {
-  let {
-    isOutlineOffer,
-    isAlternative,
-    gradient
-  } = _ref5;
-  return (isOutlineOffer || isAlternative) && `
-    > div {
-      background: ${gradient};
-	    -webkit-background-clip: text;
-	    ${gradient && '-webkit-text-fill-color: transparent;'}
-    }`;
-});
-const fontSizeMapping = {
-  12: 'micro',
-  14: 'small',
-  16: 'h6'
-};
-const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let {
-    children,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref6;
-  const {
-    backgroundColor,
-    gradient,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    color,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    fontName,
-    fontWeight,
-    fontSize
-  } = useThemeTokens('Badge', tokens, variant);
-  const semanticGradient = gradient && transformGradient(gradient);
-  const {
-    outline,
-    purpose,
-    alternative
-  } = variant;
-  let background = backgroundColor;
-  const isOutlineOffer = purpose === 'offer' && outline;
-  if ((isOutlineOffer || alternative) && gradient) {
-    background = `linear-gradient(#fff 0 0) padding-box, ${semanticGradient} border-box`;
-  } else if (purpose === 'offer' && gradient) {
-    background = semanticGradient;
-  }
-  return /*#__PURE__*/_jsx(BadgeContainer, {
-    isOutlineOffer: isOutlineOffer,
-    isAlternative: alternative,
-    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-    radius: `${borderRadius}px`,
-    background: background,
-    fontName: fontName,
-    fontWeight: fontWeight,
-    gradient: semanticGradient,
-    border: `${borderWidth}px solid ${borderColor}`,
-    ref: ref,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(Typography, {
-      tokens: {
-        fontName,
-        fontWeight,
-        color
-      },
-      variant: {
-        size: fontSizeMapping[fontSize]
-      },
-      children: children
-    })
-  });
-});
-Badge.displayName = 'Badge';
-Badge.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.node,
-  tokens: getTokensPropType('Badge'),
-  variant: PropTypes.exact({
-    outline: PropTypes.bool,
-    purpose: PropTypes.oneOf(['offer', 'editorial']),
-    alternative: PropTypes.bool,
-    inverse: PropTypes.bool
-  })
-};
-export default Badge;

package/lib-module/Badge/index.js

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

package/lib-module/BlockQuote/BlockQuote.js

@@ -1,204 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter, useViewport, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs, transformGradient } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const BlockQuoteContainer = /*#__PURE__*/styled.blockquote.withConfig({
-  displayName: "BlockQuote__BlockQuoteContainer",
-  componentId: "components-web__sc-vals3u-0"
-})(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
-  let {
-    paddingLeft
-  } = _ref;
-  return `${paddingLeft}px`;
-}, _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return `${paddingRight}px`;
-}, _ref3 => {
-  let {
-    paddingBottom
-  } = _ref3;
-  return `${paddingBottom}px`;
-}, _ref4 => {
-  let {
-    paddingTop
-  } = _ref4;
-  return `${paddingTop}px`;
-}, _ref5 => {
-  let {
-    width
-  } = _ref5;
-  return `${width}px`;
-}, _ref6 => {
-  let {
-    backgroundGradient
-  } = _ref6;
-  return backgroundGradient && transformGradient(backgroundGradient);
-});
-const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "BlockQuote__QuoteContainer",
-  componentId: "components-web__sc-vals3u-1"
-})(["margin-bottom:", ";"], _ref7 => {
-  let {
-    marginBottom
-  } = _ref7;
-  return `${marginBottom}px`;
-});
-const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
-  let {
-    children,
-    link,
-    additionalInfo,
-    linkHref,
-    textStyle = 'large',
-    LinkRouter,
-    linkRouterProps,
-    tokens,
-    variant,
-    ...rest
-  } = _ref8;
-  const viewport = useViewport();
-  const {
-    color,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    marginBottom,
-    width,
-    backgroundGradient,
-    titleHeadingFontSize,
-    titleHeadingFontName,
-    titleHeadingFontWeight,
-    titleHeadingLineHeight,
-    titleFontSize,
-    titleFontName,
-    titleFontWeight,
-    titleLineHeight,
-    linkFontSize,
-    linkFontName,
-    linkFontWeight,
-    linkLineHeight
-  } = useThemeTokens('BlockQuote', tokens, variant, {
-    viewport
-  });
-  const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
-  const titleTokens = textStyle === 'heading' ? {
-    fontSize: titleHeadingFontSize,
-    fontName: titleHeadingFontName,
-    fontWeight: titleHeadingFontWeight,
-    lineHeight: titleHeadingLineHeight
-  } : {
-    fontSize: titleFontSize,
-    fontName: titleFontName,
-    fontWeight: titleFontWeight,
-    lineHeight: titleLineHeight
-  };
-  const renderLink = () => {
-    if (linkHref) {
-      return /*#__PURE__*/_jsx(Link, {
-        href: linkHref,
-        tokens: {
-          blockFontSize: linkFontSize,
-          blockFontName: linkFontName,
-          blockFontWeight: linkFontWeight,
-          blockLineHeight: linkLineHeight,
-          color
-        },
-        variant: {
-          alternative: true
-        },
-        LinkRouter: LinkRouter,
-        linkRouterProps: linkRouterProps,
-        children: link
-      });
-    }
-    return /*#__PURE__*/_jsx(Typography, {
-      tokens: {
-        color,
-        fontName: linkFontName,
-        fontSize: linkFontSize,
-        fontWeight: linkFontWeight,
-        lineHeight: linkLineHeight
-      },
-      children: link
-    });
-  };
-  const renderQuote = () => {
-    const quote = /*#__PURE__*/_jsx(Typography, {
-      tokens: {
-        color,
-        ...titleTokens
-      },
-      variant: {
-        size: mappedTextSize
-      },
-      children: children
-    });
-    if (additionalInfo || link) {
-      return /*#__PURE__*/_jsx(QuoteContainer, {
-        marginBottom: marginBottom,
-        children: quote
-      });
-    }
-    return quote;
-  };
-  return /*#__PURE__*/_jsxs(BlockQuoteContainer, {
-    ...selectProps(rest),
-    paddingTop: paddingTop,
-    paddingBottom: paddingBottom,
-    paddingLeft: paddingLeft,
-    paddingRight: paddingRight,
-    width: width,
-    backgroundGradient: backgroundGradient,
-    ref: ref,
-    children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/_jsxs(StackView, {
-      space: 0,
-      children: [link && renderLink(), additionalInfo && /*#__PURE__*/_jsx(Typography, {
-        tokens: {
-          color
-        },
-        variant: {
-          size: 'small'
-        },
-        children: additionalInfo
-      })]
-    })]
-  });
-});
-BlockQuote.displayName = 'BlockQuote';
-BlockQuote.propTypes = {
-  ...selectedSystemPropTypes,
-  ...withLinkRouter.propTypes,
-  tokens: getTokensPropType('BlockQuote'),
-  variant: PropTypes.exact({
-    alternative: PropTypes.bool,
-    size: PropTypes.string
-  }),
-  /**
-   * Children nodes that can be added
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * External source's identifier (e.g. author's name)
-   */
-  link: PropTypes.string,
-  /**
-   * External source's URL
-   */
-  linkHref: PropTypes.string,
-  /**
-   * To provide additional information about the source, rendered underneath `link`
-   */
-  additionalInfo: PropTypes.string,
-  /**
-   * Whether to render BlockQuote as a heading size of `h3` or large text size
-   */
-  textStyle: PropTypes.oneOf(['large', 'heading'])
-};
-export default BlockQuote;

package/lib-module/BlockQuote/index.js

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