@telus-uds/components-web 2.23.0 → 2.25.0

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 10 Nov 2023 22:28:25 GMT and should not be manually modified.
+This log was last generated on Sat, 18 Nov 2023 02:25:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.25.0
+
+Sat, 18 Nov 2023 02:25:11 GMT
+
+### Minor changes
+
+- added onPlay, onPause and onEnd callbacks for youtube video analytics (kristina.kirpichnikova@telus.com)
+- Bump @telus-uds/components-base to v1.69.0
+- Bump @telus-uds/system-theme-tokens to v2.46.0
+
+### Patches
+
+- `TermsAndConditions`: Fix unexpected state handling in `ExpandCollapse.Panel` (shahzaibkhalidmalik@outlook.com)
+- adding types for Countdown component (jacqui.koroll@telus.com)
+
+## 2.24.0
+
+Wed, 15 Nov 2023 18:45:58 GMT
+
+### Minor changes
+
+- refactor badge component for multiplatform (guillermo.peitzner@telus.com)
+- Changes to improve alignment in list (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.68.0
+- Bump @telus-uds/system-theme-tokens to v2.45.0
+
+### Patches
+
+- corrected type for ssrStyles (kyle.king2@telus.com)
+
 ## 2.23.0
 
-Fri, 10 Nov 2023 22:28:25 GMT
+Fri, 10 Nov 2023 22:37:27 GMT
 
 ### Minor changes
 

package/lib/Badge/Badge.js

@@ -11,7 +11,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const [, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
@@ -61,14 +61,10 @@ const Badge = _ref6 => {
     borderColor,
     borderRadius,
     borderWidth,
-    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom,
-    fontName,
-    fontWeight,
-    fontSize
+    paddingBottom
   } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
   const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
   const {
@@ -83,31 +79,18 @@ const Badge = _ref6 => {
   } else if (purpose === 'offer' && gradient) {
     background = semanticGradient;
   }
-  const fontSizeMapping = {
-    12: 'micro',
-    14: 'small',
-    16: 'h6'
-  };
   return /*#__PURE__*/(0, _jsxRuntime.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}`,
-    ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-      tokens: {
-        fontName,
-        fontWeight,
-        color
-      },
-      variant: {
-        size: fontSizeMapping[fontSize]
-      },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Badge, {
+      tokens: tokens,
+      variant: variant,
+      ...rest,
       children: children
     })
   });

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -72,7 +72,6 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     expandTitleBorderColor,
     expandTitleUnderline
   } = getTokens();
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -100,7 +99,6 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         } = getTokens({
           expanded
         });
-        setIsExpanded(expanded);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
@@ -125,7 +123,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         borderColor: contentBorderColor,
         marginBottom: contentMarginBottom
       },
-      children: isExpanded ? children : null
+      children: children
     })
   });
 });

package/lib/WebVideo/WebVideo.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VideoProps = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _componentsBase = require("@telus-uds/components-base");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactYoutube = _interopRequireDefault(require("react-youtube"));
-var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
 var _utils = require("../utils");
 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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "WebVideo__StyledPlayerContainer",
@@ -61,6 +61,9 @@ const WebVideo = _ref => {
     beginMuted = false,
     videoLength,
     copy,
+    onPlay,
+    onPause,
+    onEnd,
     onStart = () => {},
     ...rest
   } = _ref;
@@ -91,7 +94,10 @@ const WebVideo = _ref => {
             rel: 0
           }
         },
-        onReady: initializeYoutubePlayer
+        onReady: initializeYoutubePlayer,
+        onPlay: onPlay,
+        onPause: onPause,
+        onEnd: onEnd
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
         poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
         videoLength: videoLength,
@@ -136,7 +142,19 @@ const VideoProps = {
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */
-  onStart: _propTypes.default.func
+  onStart: _propTypes.default.func,
+  /**
+   * A function to be run when the video is played.
+   */
+  onPlay: _propTypes.default.func,
+  /**
+   * A function to be run when the video is paused.
+   */
+  onPause: _propTypes.default.func,
+  /**
+   * A function to be run when the video ends.
+   */
+  onEnd: _propTypes.default.func
 };
 exports.VideoProps = VideoProps;
 WebVideo.propTypes = VideoProps;

package/lib-module/Badge/Badge.js

@@ -1,10 +1,10 @@
 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 { selectSystemProps, getTokensPropType, useThemeTokens, Badge as BaseBadge } from '@telus-uds/components-base';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
@@ -54,14 +54,10 @@ const Badge = _ref6 => {
     borderColor,
     borderRadius,
     borderWidth,
-    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom,
-    fontName,
-    fontWeight,
-    fontSize
+    paddingBottom
   } = useThemeTokens('Badge', tokens, variant);
   const semanticGradient = gradient && transformGradient(gradient);
   const {
@@ -76,31 +72,18 @@ const Badge = _ref6 => {
   } else if (purpose === 'offer' && gradient) {
     background = semanticGradient;
   }
-  const fontSizeMapping = {
-    12: 'micro',
-    14: 'small',
-    16: 'h6'
-  };
   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}`,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(Typography, {
-      tokens: {
-        fontName,
-        fontWeight,
-        color
-      },
-      variant: {
-        size: fontSizeMapping[fontSize]
-      },
+    children: /*#__PURE__*/_jsx(BaseBadge, {
+      tokens: tokens,
+      variant: variant,
+      ...rest,
       children: children
     })
   });

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
@@ -64,7 +64,6 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     expandTitleBorderColor,
     expandTitleUnderline
   } = getTokens();
-  const [isExpanded, setIsExpanded] = useState(false);
   return /*#__PURE__*/_jsx(ExpandCollapseBase, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -92,7 +91,6 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         } = getTokens({
           expanded
         });
-        setIsExpanded(expanded);
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
@@ -117,7 +115,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         borderColor: contentBorderColor,
         marginBottom: contentMarginBottom
       },
-      children: isExpanded ? children : null
+      children: children
     })
   });
 });

package/lib-module/WebVideo/WebVideo.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { selectSystemProps } from '@telus-uds/components-base';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React, { useState } from 'react';
 import YouTube from 'react-youtube';
-import { selectSystemProps } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -52,6 +52,9 @@ const WebVideo = _ref => {
     beginMuted = false,
     videoLength,
     copy,
+    onPlay,
+    onPause,
+    onEnd,
     onStart = () => {},
     ...rest
   } = _ref;
@@ -82,7 +85,10 @@ const WebVideo = _ref => {
             rel: 0
           }
         },
-        onReady: initializeYoutubePlayer
+        onReady: initializeYoutubePlayer,
+        onPlay: onPlay,
+        onPause: onPause,
+        onEnd: onEnd
       }) : /*#__PURE__*/_jsx(VideoSplash, {
         poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
         videoLength: videoLength,
@@ -127,7 +133,19 @@ export const VideoProps = {
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */
-  onStart: PropTypes.func
+  onStart: PropTypes.func,
+  /**
+   * A function to be run when the video is played.
+   */
+  onPlay: PropTypes.func,
+  /**
+   * A function to be run when the video is paused.
+   */
+  onPause: PropTypes.func,
+  /**
+   * A function to be run when the video ends.
+   */
+  onEnd: PropTypes.func
 };
 WebVideo.propTypes = VideoProps;
 export default WebVideo;

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.67.1",
+    "@telus-uds/components-base": "1.69.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.44.1",
+    "@telus-uds/system-theme-tokens": "^2.46.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.23.0"
+  "version": "2.25.0"
 }

package/src/Badge/Badge.jsx

@@ -3,13 +3,13 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
-  Typography,
   getTokensPropType,
-  useThemeTokens
+  useThemeTokens,
+  Badge as BaseBadge
 } from '@telus-uds/components-base'
 import { htmlAttrs, transformGradient } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const BadgeContainer = styled.div`
   background: ${({ background }) => background};
@@ -36,14 +36,10 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
     borderColor,
     borderRadius,
     borderWidth,
-    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom,
-    fontName,
-    fontWeight,
-    fontSize
+    paddingBottom
   } = useThemeTokens('Badge', tokens, variant)
 
   const semanticGradient = gradient && transformGradient(gradient)
@@ -57,12 +53,6 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
     background = semanticGradient
   }
 
-  const fontSizeMapping = {
-    12: 'micro',
-    14: 'small',
-    16: 'h6'
-  }
-
   return (
     <BadgeContainer
       isOutlineOffer={isOutlineOffer}
@@ -70,18 +60,12 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
       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}`}
-      {...selectProps(rest)}
     >
-      <Typography
-        tokens={{ fontName, fontWeight, color }}
-        variant={{ size: fontSizeMapping[fontSize] }}
-      >
+      <BaseBadge tokens={tokens} variant={variant} {...rest}>
         {children}
-      </Typography>
+      </BaseBadge>
     </BadgeContainer>
   )
 }

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import {
   ExpandCollapse as ExpandCollapseBase,
@@ -47,8 +47,6 @@ const ExpandCollapse = forwardRef(
       expandTitleBorderColor,
       expandTitleUnderline
     } = getTokens()
-    const [isExpanded, setIsExpanded] = useState(false)
-
     return (
       <ExpandCollapseBase
         tokens={{
@@ -72,7 +70,6 @@ const ExpandCollapse = forwardRef(
             control={(pressableState) => {
               const { expanded } = pressableState || {}
               const { icon } = getTokens({ expanded })
-              setIsExpanded(expanded)
 
               return (
                 <ExpandCollapseControl ref={ref}>
@@ -95,7 +92,7 @@ const ExpandCollapse = forwardRef(
               marginBottom: contentMarginBottom
             }}
           >
-            {isExpanded ? children : null}
+            {children}
           </ExpandCollapseBase.Panel>
         )}
       </ExpandCollapseBase>

package/src/WebVideo/WebVideo.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+import { selectSystemProps } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import React, { useState } from 'react'
 import YouTube from 'react-youtube'
-import { selectSystemProps } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import VideoSplash from '../shared/VideoSplash/VideoSplash'
 import { htmlAttrs } from '../utils'
 
@@ -41,6 +41,9 @@ const WebVideo = ({
   beginMuted = false,
   videoLength,
   copy,
+  onPlay,
+  onPause,
+  onEnd,
   onStart = () => {},
   ...rest
 }) => {
@@ -74,6 +77,9 @@ const WebVideo = ({
               }
             }}
             onReady={initializeYoutubePlayer}
+            onPlay={onPlay}
+            onPause={onPause}
+            onEnd={onEnd}
           />
         ) : (
           <VideoSplash
@@ -123,7 +129,22 @@ export const VideoProps = {
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */
-  onStart: PropTypes.func
+  onStart: PropTypes.func,
+
+  /**
+   * A function to be run when the video is played.
+   */
+  onPlay: PropTypes.func,
+
+  /**
+   * A function to be run when the video is paused.
+   */
+  onPause: PropTypes.func,
+
+  /**
+   * A function to be run when the video ends.
+   */
+  onEnd: PropTypes.func
 }
 
 WebVideo.propTypes = VideoProps

package/types/Countdown.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentType } from 'react'
+import type { HTMLAttrs } from './common'
+
+interface CountdownVariant {
+  label?: boolean
+  noDivider?: boolean
+  large?: boolean
+  feature?: boolean
+  inverse?: boolean
+}
+
+interface GradientStop {
+  color: string
+  stop: number
+}
+
+interface ContainerGradient {
+  angle: number
+  stops: GradientStop[]
+  type: string
+}
+
+interface CountdownTokens {
+  containerBorderRadius?: string | number
+  containerGradient?: ContainerGradient
+  containerBorderWidth?: string | number
+  containerBorderColor?: string
+  containerInverseBorder?: string | number
+  containerInverseBorderColor?: string
+  inverseBorderColor?: string
+  containerPaddingBottomTop?: string | number
+  containerPaddingLeftRight?: string | number
+  labelBorderColor?: string
+  labelLineHeight?: number
+  textLineHeight?: number
+  labelFontSize?: number
+  textFontSize?: number
+  labelFontName?: string
+  textTimerFontName?: string
+  labelFontWeight?: string | number
+  textTimerFontWeight?: string | number
+}
+
+export interface CountdownProps extends HTMLAttrs {
+  tokens?: CountdownTokens
+  targetTime: Date | string
+  copy?: string
+  variant?: CountdownVariant
+}
+
+declare const Countdown: ComponentType<CountdownProps>
+
+export default Countdown

package/types/index.d.ts

@@ -17,6 +17,9 @@ export type { BoxProps } from './Box'
 export { default as Breadcrumbs } from './Breadcrumbs'
 export type { BreadcrumbsProps, BreadcrumbRouteProps } from './Breadcrumbs'
 
+export { default as Countdown } from './Countdown'
+export type { CountdownProps } from './Countdown'
+
 export { default as MultiSelectFilter } from './MultiSelectFilter'
 export type { MultiSelectFilterProps } from './MultiSelectFilter'
 
@@ -75,7 +78,7 @@ declare const WaffleGrid: ComponentType<Props>
 export { default as WebVideo } from './WebVideo'
 export type { WebVideoProps } from './WebVideo'
 
-declare const ssrStyles: (appName: string) => {
+declare const ssrStyles: (appName?: string) => {
   renderApp: (App: ComponentType<Props>, props: Props) => ReactElement<Props>
   getStyles: (...existingStyles: any[]) => any[]
 }