@telus-uds/components-web 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # 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 19:53:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.3.0
+
+Tue, 04 Apr 2023 19:53:51 GMT
+
+### Minor changes
+
+- feat: move 'OrderedList' into components-web & pass variants to children(list items) (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.33.0
+- Bump @telus-uds/system-theme-tokens to v2.17.0
+- Bump @telus-uds/palette-allium to v2.12.3
+
+## 1.2.0
+
+Tue, 04 Apr 2023 14:52:45 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/OrderedList/Item.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _ItemBase = _interopRequireDefault(require("./ItemBase"));
+
+var _utils = require("../utils");
+
+var _constants = require("./constants");
+
+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 [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor
+  } = _ref;
+  return (0, _componentsBase.applyTextStyles)({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+
+const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+  displayName: "Item__StyledItemBase",
+  componentId: "components-web__sc-7jzwcq-0"
+})(_ref2 => {
+  let {
+    interItemMargin,
+    itemBulletContainerWidth,
+    itemBulletContainerAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor
+  } = _ref2;
+  return {
+    counterIncrement: _constants.OL_COUNTER_NAME,
+    '::before': {
+      content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
+      display: 'inline-flex',
+      color: itemColor,
+      width: itemBulletContainerWidth,
+      paddingRight: listGutter,
+      textAlign: itemBulletContainerAlign,
+      ...(0, _componentsBase.applyTextStyles)({
+        fontWeight: itemFontWeight,
+        fontSize: itemFontSize,
+        fontName: itemFontName,
+        themeOptions
+      }),
+      lineHeight: `${itemLineHeight * itemFontSize}px`
+    },
+    ':not(:last-child)': {
+      marginBottom: interItemMargin
+    }
+  };
+});
+
+const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Item__ItemContent",
+  componentId: "components-web__sc-7jzwcq-1"
+})({
+  flex: 1
+});
+
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    counterName,
+    title,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  // We are reusing some tokens from the list component here in order to provide a unified
+  // experience
+  const themeTokens = (0, _componentsBase.useThemeTokens)('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const itemContent = (0, _componentsBase.wrapStringsInText)(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemBase, {
+    ref: ref,
+    themeOptions: themeOptions,
+    ...themeTokens,
+    ...selectProps(rest),
+    children: title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      tokens: {
+        flexShrink: 1
+      },
+      space: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: headingTokens,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, { ...themeTokens,
+        children: itemContent
+      })]
+    }) : itemContent
+  });
+});
+Item.displayName = 'OrderedListItem';
+Item.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string,
+
+  /**
+   * Item tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('List')
+};
+Item.defaultProps = {
+  title: undefined,
+  tokens: {}
+};
+var _default = Item;
+exports.default = _default;

package/lib/OrderedList/ItemBase.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledItem = /*#__PURE__*/_styledComponents.default.li.withConfig({
+  displayName: "ItemBase__StyledItem",
+  componentId: "components-web__sc-o0oiv5-0"
+})({
+  display: 'flex'
+});
+
+const Item = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItem, { ...rest,
+    children: children
+  });
+};
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired
+};
+var _default = Item;
+exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _OrderedListBase = _interopRequireDefault(require("./OrderedListBase"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _constants = require("./constants");
+
+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 [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "OrderedList__StyledOrderedListBase",
+  componentId: "components-web__sc-t5az8z-0"
+})(_ref => {
+  let {
+    start
+  } = _ref;
+  return {
+    // Using CSS counters here to have better control over the number styling
+    listStyle: 'none',
+    counterReset: `${_constants.OL_COUNTER_NAME} ${start - 1}`
+  };
+});
+/**
+ * Themed semantic ordered list.
+ */
+
+const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    start,
+    variant,
+    ...rest
+  } = _ref2;
+  // Pass any variants "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = variant ? children.map(child => {
+    var _child$props;
+
+    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+    return { ...child,
+      props: { ...child.props,
+        variant: { ...existingChildVariants,
+          ...variant
+        }
+      }
+    };
+  }) : children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedListBase, { ...selectProps(rest),
+    ref: ref,
+    start: start,
+    children: childrenWithParentVariants
+  });
+});
+OrderedList.displayName = 'OrderedList';
+OrderedList.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+OrderedList.defaultProps = {
+  start: 1
+};
+OrderedList.Item = _Item.default;
+var _default = OrderedList;
+exports.default = _default;

package/lib/OrderedList/OrderedListBase.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ItemBase = _interopRequireDefault(require("./ItemBase"));
+
+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 StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
+  displayName: "OrderedListBase__StyledList",
+  componentId: "components-web__sc-4m9lgj-0"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  listStylePosition: 'inside',
+  margin: 0,
+  padding: 0
+});
+/**
+ * Semantic ordered list.
+ */
+
+
+const OrderedListBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, { ...rest,
+    ref: ref,
+    start: start,
+    children: children
+  });
+});
+OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+OrderedListBase.defaultProps = {
+  start: 1
+};
+OrderedListBase.Item = _ItemBase.default;
+var _default = OrderedListBase;
+exports.default = _default;

package/lib/OrderedList/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OL_COUNTER_NAME = void 0;
+// eslint-disable-next-line import/prefer-default-export
+const OL_COUNTER_NAME = 'allium-ordered-list-counter';
+exports.OL_COUNTER_NAME = OL_COUNTER_NAME;

package/lib/OrderedList/index.js

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

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,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
+  OrderedList: true,
+  Ribbon: true,
   transformGradient: true
 };
 Object.defineProperty(exports, "Badge", {
@@ -13,6 +15,18 @@ Object.defineProperty(exports, "Badge", {
     return _Badge.default;
   }
 });
+Object.defineProperty(exports, "OrderedList", {
+  enumerable: true,
+  get: function () {
+    return _OrderedList.default;
+  }
+});
+Object.defineProperty(exports, "Ribbon", {
+  enumerable: true,
+  get: function () {
+    return _Ribbon.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -22,6 +36,10 @@ Object.defineProperty(exports, "transformGradient", {
 
 var _Badge = _interopRequireDefault(require("./Badge"));
 
+var _OrderedList = _interopRequireDefault(require("./OrderedList"));
+
+var _Ribbon = _interopRequireDefault(require("./Ribbon"));
+
 var _utils = require("./utils");
 
 var _baseExports = require("./baseExports");