@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Ribbon/Ribbon.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Ribbon__RibbonWrapper",
+  componentId: "components-web__sc-186270k-0"
+})(["width:fit-content;position:", ";z-index:1;left:", ";top:", ";"], _ref => {
+  let {
+    left,
+    top
+  } = _ref;
+  return left ?? top ? 'absolute' : 'relative';
+}, _ref2 => {
+  let {
+    left
+  } = _ref2;
+  return left && `${left}px`;
+}, _ref3 => {
+  let {
+    top
+  } = _ref3;
+  return top && `${top}px`;
+});
+const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Ribbon__RibbonContainer",
+  componentId: "components-web__sc-186270k-1"
+})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
+  let {
+    backgroundColor
+  } = _ref4;
+  return backgroundColor;
+}, _ref5 => {
+  let {
+    padding
+  } = _ref5;
+  return `${padding}`;
+}, _ref6 => {
+  let {
+    borderRadius
+  } = _ref6;
+  return borderRadius;
+}, _ref7 => {
+  let {
+    boxShadow,
+    shouldWrap
+  } = _ref7;
+  return shouldWrap && boxShadow;
+}, _ref8 => {
+  let {
+    borderRadiusBottomLeft
+  } = _ref8;
+  return borderRadiusBottomLeft;
+}, _ref9 => {
+  let {
+    borderRadiusBottomRight
+  } = _ref9;
+  return borderRadiusBottomRight;
+});
+const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Ribbon__RibbonCurve",
+  componentId: "components-web__sc-186270k-2"
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+  let {
+    curveBackgroundColor
+  } = _ref10;
+  return curveBackgroundColor;
+}, _ref11 => {
+  let {
+    curveWidth
+  } = _ref11;
+  return curveWidth;
+}, _ref12 => {
+  let {
+    curveHeight
+  } = _ref12;
+  return curveHeight;
+}, _ref13 => {
+  let {
+    curveMarginTop
+  } = _ref13;
+  return curveMarginTop;
+}, _ref14 => {
+  let {
+    curveAfterRadius
+  } = _ref14;
+  return curveAfterRadius;
+}, _ref15 => {
+  let {
+    curveAfterHeight
+  } = _ref15;
+  return curveAfterHeight;
+}, _ref16 => {
+  let {
+    curveAfterBackgroundColor
+  } = _ref16;
+  return curveAfterBackgroundColor;
+}, _ref17 => {
+  let {
+    curveAfterWidth
+  } = _ref17;
+  return curveAfterWidth;
+});
+const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
+  let {
+    children,
+    tokens,
+    wrap: shouldWrap = false,
+    left,
+    top,
+    variant = {},
+    ...rest
+  } = _ref18;
+  const {
+    backgroundColor,
+    borderRadius,
+    boxShadowPaddingBottom,
+    boxShadowPaddingLeft,
+    boxShadowPaddingRight,
+    boxShadowPaddingTop,
+    boxShadowColor,
+    curveAfterBackgroundColor,
+    curveAfterHeight,
+    curveAfterWidth,
+    curveBackgroundColor,
+    curveHeight,
+    curveAfterRadius,
+    curveWidth,
+    curveMarginTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    gradient,
+    fontColor,
+    borderRadiusBottomLeft,
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
+  } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, {
+    ...variant,
+    wrap: shouldWrap
+  });
+  let background = backgroundColor;
+  if (gradient) {
+    const {
+      type: gradientType,
+      angle: gradientAngle,
+      stops: gradientColors
+    } = gradient;
+    const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
+    background = gradientBackground;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonWrapper, {
+    left: left,
+    top: top,
+    "data-testid": "ribbon-wrapper",
+    ref: ref,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonContainer, {
+      shouldWrap: shouldWrap,
+      backgroundColor: background,
+      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      borderRadius: `${borderRadius}px`,
+      boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
+      borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
+      borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          bold: true,
+          inverse: true
+        },
+        tokens: {
+          color: fontColor,
+          fontName,
+          fontWeight,
+          fontSize,
+          lineHeight
+        },
+        children: children
+      })
+    }), shouldWrap && /*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonCurve, {
+      "data-testid": "ribbon-curve",
+      backgroundColor: backgroundColor,
+      curveMarginTop: `${curveMarginTop}px`,
+      curveWidth: `${curveWidth}px`,
+      curveHeight: `${curveHeight}px`,
+      curveBackgroundColor: curveBackgroundColor,
+      curveAfterRadius: `${curveAfterRadius}px`,
+      curveAfterWidth: `${curveAfterWidth}px`,
+      curveAfterHeight: `${curveAfterHeight}px`,
+      curveAfterBackgroundColor: curveAfterBackgroundColor
+    })]
+  });
+});
+Ribbon.displayName = 'Ribbon';
+Ribbon.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Ribbon'),
+  children: _propTypes.default.node,
+  /** show/hide the ribbon fold
+   * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
+   */
+  wrap: _propTypes.default.bool,
+  /** sets the left offset (triggers absolute positioning) */
+  left: _propTypes.default.number,
+  /** sets the top offset (triggers absolute positioning) */
+  top: _propTypes.default.number
+};
+var _default = exports.default = Ribbon;

package/lib/cjs/Ribbon/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Ribbon = _interopRequireDefault(require("./Ribbon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Ribbon.default;

package/lib/cjs/SkeletonProvider/SkeletonImage.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    rounded,
+    imgHeight,
+    size,
+    sizeIndex,
+    // Size automatically from image height, unless any size prop is passed in
+    sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
+    show,
+    children
+  } = _ref;
+  if (!show) {
+    return children;
+  }
+  const shape = rounded !== 'circle' ? 'box' : rounded;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+    size: size,
+    sizePixels: sizePixels,
+    sizeIndex: sizeIndex,
+    shape: shape,
+    ref: ref
+  });
+});
+SkeletonImage.displayName = 'SkeletonImage';
+SkeletonImage.propTypes = {
+  imgHeight: _propTypes.default.number,
+  rounded: _propTypes.default.oneOf(['circle', 'corners']),
+  size: _componentsBase.Skeleton.propTypes?.size,
+  sizeIndex: _componentsBase.Skeleton.propTypes?.sizeIndex,
+  sizePixels: _componentsBase.Skeleton.propTypes?.sizePixels,
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node
+};
+var _default = exports.default = SkeletonImage;

package/lib/cjs/SkeletonProvider/SkeletonProvider.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _Image = _interopRequireDefault(require("../Image"));
+var _SkeletonTypography = _interopRequireDefault(require("./SkeletonTypography"));
+var _SkeletonImage = _interopRequireDefault(require("./SkeletonImage"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SkeletonProvider = _ref => {
+  let {
+    children,
+    show
+  } = _ref;
+  if (!show) {
+    return children;
+  }
+  const mapChild = child => {
+    if (!child) {
+      return null;
+    }
+    let childElement = child;
+    if (childElement.props && 'children' in childElement.props) {
+      const {
+        children: elementChildren
+      } = childElement.props;
+      const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
+      childElement = /*#__PURE__*/_react.default.cloneElement(childElement, {
+        children: mappedChildren
+      });
+    }
+    if (childElement.type === _componentsBase.Typography) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, {
+        ...childElement.props.skeleton,
+        show: show,
+        children: childElement
+      });
+    }
+    if (childElement.type === _Image.default) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, {
+        ...childElement.props.skeleton,
+        imgHeight: childElement.props.height,
+        rounded: childElement.props.rounded,
+        show: show,
+        children: childElement
+      });
+    }
+    return childElement;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: _react.default.Children.map(children, mapChild)
+  });
+};
+SkeletonProvider.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired
+};
+var _default = exports.default = SkeletonProvider;

package/lib/cjs/SkeletonProvider/SkeletonTypography.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    show,
+    size,
+    sizeIndex,
+    sizePixels,
+    characters,
+    lines,
+    children
+  } = _ref;
+  if (!show) {
+    return children;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+    size: size,
+    sizeIndex: sizeIndex,
+    sizePixels: sizePixels,
+    characters: characters,
+    lines: lines,
+    ref: ref
+  });
+});
+SkeletonTypography.displayName = 'SkeletonTypography';
+SkeletonTypography.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node,
+  size: _componentsBase.Skeleton.propTypes?.size,
+  sizeIndex: _componentsBase.Skeleton.propTypes?.sizeIndex,
+  sizePixels: _componentsBase.Skeleton.propTypes?.sizePixels,
+  characters: _componentsBase.Skeleton.propTypes?.characters,
+  lines: _componentsBase.Skeleton.propTypes?.lines
+};
+var _default = exports.default = SkeletonTypography;

package/lib/cjs/SkeletonProvider/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _SkeletonProvider.default;

package/lib/cjs/Span/Span.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
+  displayName: "Span__StyledSpan",
+  componentId: "components-web__sc-o7sihn-0"
+})(["", "};"], _ref => {
+  let {
+    flex
+  } = _ref;
+  return flex ? 'display: inline-flex' : '';
+});
+
+/**
+ * Text as an HTML ```<span>``` element.
+ *
+ * Span may be used in cases where an inline span or direct access to HTML attributes is required.
+ * In most cases, `Typography` should be used for text, or Paragraph for body text.
+ */
+const Span = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    flex,
+    ...rest
+  } = _ref2;
+  const style = (0, _utils.useTypographyTheme)(variant, tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
+    "data-testid": testID,
+    flex: flex,
+    style: style,
+    ref: ref,
+    ...selectProps(rest),
+    children: children
+  });
+});
+Span.displayName = 'Span';
+Span.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Adds `data-testid` attribute for testing
+   */
+  testID: _propTypes.default.string,
+  /**
+   * Sets display to inline-flex so that children are laid out using the flex model.
+   * Use this if the span contains children that expect to be inside a flex container.
+   */
+  flex: _propTypes.default.bool,
+  /**
+   * Span takes the same tokens overrides as Typography
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('Typography'),
+  /**
+   * Span can take any of Typography's theme variants
+   */
+  variant: _propTypes.default.exact({
+    bold: _propTypes.default.bool,
+    colour: _propTypes.default.oneOf(['secondary', 'tertiary']),
+    compact: _propTypes.default.bool,
+    inverse: _propTypes.default.bool,
+    size: _propTypes.default.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
+    weight: _propTypes.default.oneOf(['semibold', 'bold'])
+  })
+};
+var _default = exports.default = Span;

package/lib/cjs/Span/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Span = _interopRequireDefault(require("./Span"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Span.default;