@telus-uds/components-web 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 03 Apr 2023 20:33:24 GMT and should not be manually modified.
+This log was last generated on Tue, 04 Apr 2023 14:45:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.2.0
+
+Tue, 04 Apr 2023 14:45:59 GMT
+
+### Minor changes
+
+- Add Ribbon component (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.32.0
+- Bump @telus-uds/system-theme-tokens to v2.16.0
+
 ## 1.1.0
 
-Mon, 03 Apr 2023 20:33:24 GMT
+Mon, 03 Apr 2023 20:41:50 GMT
 
 ### Minor changes
 

package/lib/Ribbon/Ribbon.js

@@ -0,0 +1,209 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import palette from '@telus-uds/palette-allium/build/web/palette'
+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:", ";"], _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;
+});
+
+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;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref8 => {
+  let {
+    curveBackgroundColor
+  } = _ref8;
+  return curveBackgroundColor;
+}, _ref9 => {
+  let {
+    curveWidth
+  } = _ref9;
+  return curveWidth;
+}, _ref10 => {
+  let {
+    curveHeight
+  } = _ref10;
+  return curveHeight;
+}, _ref11 => {
+  let {
+    curveMarginTop
+  } = _ref11;
+  return curveMarginTop;
+}, _ref12 => {
+  let {
+    curveAfterRadius
+  } = _ref12;
+  return curveAfterRadius;
+}, _ref13 => {
+  let {
+    curveAfterHeight
+  } = _ref13;
+  return curveAfterHeight;
+}, _ref14 => {
+  let {
+    curveAfterBackgroundColor
+  } = _ref14;
+  return curveAfterBackgroundColor;
+}, _ref15 => {
+  let {
+    curveAfterWidth
+  } = _ref15;
+  return curveAfterWidth;
+});
+
+const Ribbon = _ref16 => {
+  let {
+    children,
+    tokens,
+    wrap: shouldWrap = false,
+    left,
+    top,
+    variant = {},
+    ...rest
+  } = _ref16;
+  const {
+    backgroundColor,
+    borderRadius,
+    boxShadowPaddingBottom,
+    boxShadowPaddingLeft,
+    boxShadowPaddingRight,
+    boxShadowPaddingTop,
+    boxShadowColor,
+    curveAfterBackgroundColor,
+    curveAfterHeight,
+    curveAfterWidth,
+    curveBackgroundColor,
+    curveHeight,
+    curveAfterRadius,
+    curveWidth,
+    curveMarginTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    gradient
+  } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, variant);
+  const {
+    purpose
+  } = variant;
+  const {
+    type: gradientType,
+    angle: gradientAngle,
+    stops: gradientColors
+  } = gradient;
+  const isOfferPurpose = purpose === 'offer';
+  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
+  const background = isOfferPurpose ? gradientBackground : backgroundColor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonWrapper, {
+    left: left,
+    top: top,
+    "data-testid": "ribbon-wrapper",
+    ...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}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'micro',
+          bold: true,
+          inverse: true
+        },
+        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.propTypes = { ...selectedSystemPropTypes,
+  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 = Ribbon;
+exports.default = _default;

package/lib/Ribbon/index.js

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

package/lib/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
+  Ribbon: true,
   transformGradient: true
 };
 Object.defineProperty(exports, "Badge", {
@@ -13,6 +14,12 @@ Object.defineProperty(exports, "Badge", {
     return _Badge.default;
   }
 });
+Object.defineProperty(exports, "Ribbon", {
+  enumerable: true,
+  get: function () {
+    return _Ribbon.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -22,6 +29,8 @@ Object.defineProperty(exports, "transformGradient", {
 
 var _Badge = _interopRequireDefault(require("./Badge"));
 
+var _Ribbon = _interopRequireDefault(require("./Ribbon"));
+
 var _utils = require("./utils");
 
 var _baseExports = require("./baseExports");

package/lib-module/Ribbon/Ribbon.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'; // import palette from '@telus-uds/palette-allium/build/web/palette'
+
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const RibbonWrapper = /*#__PURE__*/styled.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__*/styled.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:", ";"], _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;
+});
+const RibbonCurve = /*#__PURE__*/styled.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;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref8 => {
+  let {
+    curveBackgroundColor
+  } = _ref8;
+  return curveBackgroundColor;
+}, _ref9 => {
+  let {
+    curveWidth
+  } = _ref9;
+  return curveWidth;
+}, _ref10 => {
+  let {
+    curveHeight
+  } = _ref10;
+  return curveHeight;
+}, _ref11 => {
+  let {
+    curveMarginTop
+  } = _ref11;
+  return curveMarginTop;
+}, _ref12 => {
+  let {
+    curveAfterRadius
+  } = _ref12;
+  return curveAfterRadius;
+}, _ref13 => {
+  let {
+    curveAfterHeight
+  } = _ref13;
+  return curveAfterHeight;
+}, _ref14 => {
+  let {
+    curveAfterBackgroundColor
+  } = _ref14;
+  return curveAfterBackgroundColor;
+}, _ref15 => {
+  let {
+    curveAfterWidth
+  } = _ref15;
+  return curveAfterWidth;
+});
+
+const Ribbon = _ref16 => {
+  let {
+    children,
+    tokens,
+    wrap: shouldWrap = false,
+    left,
+    top,
+    variant = {},
+    ...rest
+  } = _ref16;
+  const {
+    backgroundColor,
+    borderRadius,
+    boxShadowPaddingBottom,
+    boxShadowPaddingLeft,
+    boxShadowPaddingRight,
+    boxShadowPaddingTop,
+    boxShadowColor,
+    curveAfterBackgroundColor,
+    curveAfterHeight,
+    curveAfterWidth,
+    curveBackgroundColor,
+    curveHeight,
+    curveAfterRadius,
+    curveWidth,
+    curveMarginTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    gradient
+  } = useThemeTokens('Ribbon', tokens, variant);
+  const {
+    purpose
+  } = variant;
+  const {
+    type: gradientType,
+    angle: gradientAngle,
+    stops: gradientColors
+  } = gradient;
+  const isOfferPurpose = purpose === 'offer';
+  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
+  const background = isOfferPurpose ? gradientBackground : backgroundColor;
+  return /*#__PURE__*/_jsxs(RibbonWrapper, {
+    left: left,
+    top: top,
+    "data-testid": "ribbon-wrapper",
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_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}`,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'micro',
+          bold: true,
+          inverse: true
+        },
+        children: children
+      })
+    }), shouldWrap && /*#__PURE__*/_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.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.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.bool,
+
+  /** sets the left offset (triggers absolute positioning) */
+  left: PropTypes.number,
+
+  /** sets the top offset (triggers absolute positioning) */
+  top: PropTypes.number
+};
+export default Ribbon;

package/lib-module/Ribbon/index.js

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

package/lib-module/index.js

@@ -1,3 +1,4 @@
 export { default as Badge } from './Badge';
+export { default as Ribbon } from './Ribbon';
 export { transformGradient } from './utils';
 export * from './baseExports';

package/package.json

@@ -4,9 +4,9 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.31.0",
+    "@telus-uds/components-base": "1.32.0",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.15.0",
+    "@telus-uds/system-theme-tokens": "^2.16.0",
     "prop-types": "^15.7.2"
   },
   "description": "UDS mult-brand web components",
@@ -53,5 +53,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.1.0"
+  "version": "1.2.0"
 }

package/src/Ribbon/Ribbon.jsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'
+// import palette from '@telus-uds/palette-allium/build/web/palette'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const RibbonWrapper = styled.div`
+  width: fit-content;
+  position: ${({ left, top }) => (left ?? top ? 'absolute' : 'relative')};
+  z-index: 1;
+  left: ${({ left }) => left && `${left}px`};
+  top: ${({ top }) => top && `${top}px`};
+`
+
+const RibbonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  background: ${({ backgroundColor }) => backgroundColor};
+  padding: ${({ padding }) => `${padding}`};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  width: fit-content;
+  box-shadow: ${({ boxShadow, shouldWrap }) => shouldWrap && boxShadow};
+`
+
+const RibbonCurve = styled.div`
+  background: ${({ curveBackgroundColor }) => curveBackgroundColor};
+  width: ${({ curveWidth }) => curveWidth};
+  height: ${({ curveHeight }) => curveHeight};
+  margin-top: -${({ curveMarginTop }) => curveMarginTop};
+  border-radius: 0 0 0 100%;
+  position: relative;
+  z-index: -1;
+  &::after {
+    content: '';
+    border-bottom-left-radius: ${({ curveAfterRadius }) => curveAfterRadius};
+    position: absolute;
+    height: ${({ curveAfterHeight }) => curveAfterHeight};
+    background: ${({ curveAfterBackgroundColor }) => curveAfterBackgroundColor};
+    width: ${({ curveAfterWidth }) => curveAfterWidth};
+  }
+`
+
+const Ribbon = ({
+  children,
+  tokens,
+  wrap: shouldWrap = false,
+  left,
+  top,
+  variant = {},
+  ...rest
+}) => {
+  const {
+    backgroundColor,
+    borderRadius,
+    boxShadowPaddingBottom,
+    boxShadowPaddingLeft,
+    boxShadowPaddingRight,
+    boxShadowPaddingTop,
+    boxShadowColor,
+    curveAfterBackgroundColor,
+    curveAfterHeight,
+    curveAfterWidth,
+    curveBackgroundColor,
+    curveHeight,
+    curveAfterRadius,
+    curveWidth,
+    curveMarginTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    gradient
+  } = useThemeTokens('Ribbon', tokens, variant)
+
+  const { purpose } = variant
+  const { type: gradientType, angle: gradientAngle, stops: gradientColors } = gradient
+  const isOfferPurpose = purpose === 'offer'
+  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`
+  const background = isOfferPurpose ? gradientBackground : backgroundColor
+
+  return (
+    <RibbonWrapper left={left} top={top} data-testid="ribbon-wrapper" {...selectProps(rest)}>
+      <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}`}
+      >
+        <Typography variant={{ size: 'micro', bold: true, inverse: true }}>{children}</Typography>
+      </RibbonContainer>
+      {shouldWrap && (
+        <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}
+        />
+      )}
+    </RibbonWrapper>
+  )
+}
+
+Ribbon.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.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.bool,
+  /** sets the left offset (triggers absolute positioning) */
+  left: PropTypes.number,
+  /** sets the top offset (triggers absolute positioning) */
+  top: PropTypes.number
+}
+
+export default Ribbon

package/src/Ribbon/index.js

@@ -0,0 +1,3 @@
+import Ribbon from './Ribbon'
+
+export default Ribbon

package/src/index.js

@@ -1,4 +1,5 @@
 export { default as Badge } from './Badge'
+export { default as Ribbon } from './Ribbon'
 export { transformGradient } from './utils'
 
 export * from './baseExports'

package/types/Ribbon.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface RibbonProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+  left: Boolean
+  top: Boolean
+  wrap: Boolean
+}
+
+declare const Ribbon: ComponentType<RibbonProps>
+
+export default Ribbon