@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -1,261 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback, getTokensPropType, selectSystemProps, a11yProps } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import { InputField, InputWrapper } from './styles';
-import defaultDictionary from './dictionary';
-import SideButton from './SideButton';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  isNaN
-} = Number;
-const isNumber = value => {
-  return typeof value === 'number' && !isNaN(value);
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
-const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    id = 'quantity-selector',
-    minNumber,
-    maxNumber,
-    defaultValue,
-    value,
-    label,
-    hint,
-    hintPosition = 'inline',
-    tooltip,
-    onChange,
-    dictionary = defaultDictionary,
-    accessibilityLabel,
-    copy = 'en',
-    variant = {
-      alternative: false
-    },
-    tokens,
-    testID = 'quantity-selector-testid',
-    ...rest
-  } = _ref;
-  const {
-    disabled
-  } = variant;
-  const [error, setError] = React.useState('');
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const getValidatedNumber = numberToEvaluate => {
-    if (isNaN(numberToEvaluate)) return null;
-    if (isNumber(minNumber) && numberToEvaluate < minNumber) throw getCopy('errors').numberIsTooSmall(minNumber);
-    if (isNumber(maxNumber) && numberToEvaluate > maxNumber) throw getCopy('errors').numberIsTooBig(maxNumber);
-    return numberToEvaluate;
-  };
-  const {
-    currentValue: number,
-    setValue: setNumber
-  } = useInputValue({
-    value: getValidatedNumber(value),
-    initialValue: getValidatedNumber(defaultValue),
-    onChange
-  });
-  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
-  const inputValue = isNumber(number) ? number.toString() : '';
-  const updateNumber = (newNumber, originalInputEvent) => {
-    try {
-      const validatedNumber = getValidatedNumber(newNumber);
-      setNumber(validatedNumber, originalInputEvent);
-      setError('');
-    } catch (e) {
-      setError(e);
-    }
-  };
-  const inputChangeHandler = (textInputValue, event) => {
-    if (textInputValue === '') setNumber(null);
-    const numberFromTextInput = Number(textInputValue);
-    if (isNumber(numberFromTextInput)) {
-      updateNumber(numberFromTextInput, event);
-    } else {
-      setError(getCopy('errors').invalidCharacters);
-    }
-  };
-  const renderLabel = () => label ? /*#__PURE__*/_jsx(InputLabel, {
-    forId: id,
-    label: label,
-    hint: hint,
-    hintPosition: hintPosition,
-    tooltip: tooltip
-  }) : null;
-  const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant);
-  const renderTextInput = () => /*#__PURE__*/_jsx(TextInput, {
-    nativeID: id,
-    value: inputValue,
-    defaultValue: defaultValue,
-    tokens: textInputState => {
-      const {
-        inputWidth,
-        inputBorderWidth,
-        inputBorderColor,
-        textColor,
-        inputBackgroundColor,
-        ...restOfTokens
-      } = getTokens({
-        ...textInputState
-      });
-      return {
-        ...restOfTokens,
-        order: 1,
-        borderWidth: inputBorderWidth,
-        backgroundColor: inputBackgroundColor,
-        color: textColor,
-        width: inputWidth,
-        borderColor: inputBorderColor,
-        borderRadius: 0,
-        outerBorderWidth: 0
-      };
-    },
-    onChange: inputChangeHandler
-    // Using title as an accessibility workaround
-    // given that accessibilityLabel is not available
-    ,
-    keyboardType: "numeric",
-    accessibilityLabel: accessibilityLabel ?? getCopy('accessibility').a11yLabel,
-    accessibilityRole: "spinbutton",
-    accessibilityValueMax: maxNumber,
-    accessibilityValueMin: minNumber,
-    accessibilityValueNow: number
-  });
-  const flexOrder = order => ({
-    order
-  });
-  return /*#__PURE__*/_jsxs(Box, {
-    testID: testID,
-    ref: ref,
-    ...selectProps(rest),
-    children: [renderLabel(), /*#__PURE__*/_jsx(Spacer, {
-      space: 2
-    }), /*#__PURE__*/_jsxs(InputWrapper, {
-      children: [/*#__PURE__*/_jsx(InputField, {
-        children: renderTextInput()
-      }), /*#__PURE__*/_jsx("div", {
-        style: flexOrder(0),
-        children: /*#__PURE__*/_jsx(SideButton, {
-          isEnabled: isDecreaseEnabled,
-          onPress: () => updateNumber(number - 1),
-          onDoubleClick: () => updateNumber(number - 1),
-          tokens: tokens,
-          variant: {
-            decrease: true,
-            ...variant
-          },
-          accessibilityLabel: getCopy('accessibility').decreaseButton,
-          accessibilityDisabled: !isDecreaseEnabled
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        style: flexOrder(2),
-        children: /*#__PURE__*/_jsx(SideButton, {
-          isEnabled: isIncreaseEnabled,
-          onPress: () => updateNumber(number + 1),
-          onDoubleClick: () => updateNumber(number + 1),
-          accessibilityLabel: getCopy('accessibility').increaseButton,
-          accessibilityDisabled: !isIncreaseEnabled,
-          tokens: tokens,
-          variant: {
-            increase: true,
-            ...variant
-          }
-        })
-      })]
-    }), error ? /*#__PURE__*/_jsx(Box, {
-      vertical: 2,
-      children: /*#__PURE__*/_jsx(Feedback, {
-        validation: "error",
-        children: error
-      })
-    }) : null]
-  });
-});
-
-// If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = PropTypes.shape({
-  accessibility: PropTypes.shape({
-    a11yLabel: PropTypes.string.isRequired,
-    increaseButton: PropTypes.string.isRequired,
-    decreaseButton: PropTypes.string.isRequired
-  }).isRequired,
-  errors: PropTypes.shape({
-    numberIsTooSmall: PropTypes.func.isRequired,
-    numberIsTooBig: PropTypes.func.isRequired,
-    invalidCharacters: PropTypes.string.isRequired
-  }).isRequired
-});
-QuantitySelector.displayName = 'QuantitySelector';
-QuantitySelector.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The id of the input field
-   */
-  id: PropTypes.string,
-  /**
-   * The minimum number allowed
-   */
-  minNumber: PropTypes.number,
-  /**
-   * The maximum number allowed
-   */
-  maxNumber: PropTypes.number,
-  /**
-   * The callback function that is called when the value of the input field changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * The default value of the input field
-   */
-  defaultValue: PropTypes.number,
-  /**
-   * If the input's state is to be controlled by a parent component, use this prop
-   * together with the `onChange` to pass down and update the lifted state.
-   */
-  value: PropTypes.number,
-  /**
-   * The label of the input field
-   */
-  label: PropTypes.string,
-  /**
-   * The hint of the input field
-   */
-  hint: PropTypes.string,
-  /**
-   * The position of the hint. Could be shown along side the label or below it
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  /**
-   * Adds a question mark which will display a tooltip when clicked
-   */
-  tooltip: PropTypes.string,
-  /**
-   * The accessibility label of the input field
-   */
-  accessibilityLabel: PropTypes.string,
-  /**
-   * The dictionary object containing the content for the input field
-   */
-  dictionary: PropTypes.shape({
-    en: dictionaryContentShape,
-    fr: dictionaryContentShape
-  }),
-  /**
-   * The language to use for the copy.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
-  variant: PropTypes.exact({
-    alternative: PropTypes.bool,
-    disabled: PropTypes.bool
-  }),
-  tokens: getTokensPropType('QuantitySelector'),
-  /**
-   * Sets `data-testid` attribute on the input field for testing purposes.
-   */
-  testID: PropTypes.string
-};
-export default QuantitySelector;

package/lib-module/QuantitySelector/SideButton.js

@@ -1,70 +0,0 @@
-import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-uds/components-base';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const SideButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    isEnabled = true,
-    onPress = () => {},
-    onDoubleClick = () => {},
-    accessibilityLabel = '',
-    accessibilityDisabled = false,
-    tokens = {},
-    variant = {}
-  } = _ref;
-  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant);
-  const getButtonTokens = _ref2 => {
-    let {
-      buttonState,
-      disabled
-    } = _ref2;
-    const {
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      ...rest
-    } = getTokens({
-      ...buttonState,
-      disabled
-    });
-    return {
-      ...rest,
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      outerBorderRadius: borderRadius,
-      outerBorderTopLeftRadius: borderTopLeftRadius,
-      outerBorderTopRightRadius: borderTopRightRadius,
-      outerBorderBottomLeftRadius: borderBottomLeftRadius,
-      outerBorderBottomRightRadius: borderBottomRightRadius,
-      outerBorderGap: 0,
-      outerBorderWidth: 0
-    };
-  };
-  return /*#__PURE__*/_jsx(IconButton, {
-    tokens: buttonState => getButtonTokens({
-      disabled: !isEnabled,
-      buttonState
-    }),
-    onPress: onPress,
-    onDoubleClick: onDoubleClick,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityDisabled: accessibilityDisabled,
-    ref: ref
-  });
-});
-SideButton.displayName = 'QuantitySelectorSideButton';
-SideButton.propTypes = {
-  isEnabled: PropTypes.bool,
-  onPress: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  accessibilityLabel: PropTypes.string,
-  accessibilityDisabled: PropTypes.bool,
-  tokens: getTokensPropType('QuantitySelectorSideButton'),
-  variant: PropTypes.object
-};
-export default SideButton;

package/lib-module/QuantitySelector/dictionary.js

@@ -1,26 +0,0 @@
-export default {
-  en: {
-    accessibility: {
-      a11yLabel: 'Quantity selector',
-      increaseButton: 'Increase quantity',
-      decreaseButton: 'Decrease quantity'
-    },
-    errors: {
-      numberIsTooSmall: minNumber => `You can enter a number equal or greater than ${minNumber}.`,
-      numberIsTooBig: maxNumber => `You can enter a number equal or less than ${maxNumber}.`,
-      invalidCharacters: 'Try using numbers only. Alphabetical or symbols characters are not allowed.'
-    }
-  },
-  fr: {
-    accessibility: {
-      a11yLabel: 'Sélecteur de quantité',
-      increaseButton: `Augmenter la quantité`,
-      decreaseButton: `Réduire la quantité`
-    },
-    errors: {
-      numberIsTooSmall: minNumber => `Vous pouvez saisir un nombre égal ou supérieur à ${minNumber}.`,
-      numberIsTooBig: maxNumber => `Vous pouvez saisir un nombre égal ou inférieur à ${maxNumber}.`,
-      invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
-    }
-  }
-};

package/lib-module/QuantitySelector/index.js

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

package/lib-module/QuantitySelector/styles.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-export const InputField = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__InputField",
-  componentId: "components-web__sc-1lrz1xk-0"
-})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
-export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__InputWrapper",
-  componentId: "components-web__sc-1lrz1xk-1"
-})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);

package/lib-module/ResponsiveImage/ResponsiveImage.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps } from '@telus-uds/components-base';
-import { viewports } from '@telus-uds/system-constants';
-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 staticStyles = {
-  image: {
-    display: 'block',
-    width: '100%'
-  }
-};
-
-/**
- * Provide different image sources for different screen sizes.
- */
-const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    xsSrc,
-    smSrc,
-    mdSrc,
-    lgSrc,
-    xlSrc,
-    fallbackSrc,
-    alt,
-    loading = 'eager',
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsxs("picture", {
-    ...selectProps(rest),
-    ref: ref,
-    children: [/*#__PURE__*/_jsx("source", {
-      srcSet: xlSrc,
-      media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
-    }), /*#__PURE__*/_jsx("source", {
-      srcSet: lgSrc,
-      media: `(min-width: ${viewports.map.get(viewports.lg)}px)`
-    }), /*#__PURE__*/_jsx("source", {
-      srcSet: mdSrc,
-      media: `(min-width: ${viewports.map.get(viewports.md)}px)`
-    }), /*#__PURE__*/_jsx("source", {
-      srcSet: smSrc,
-      media: `(min-width: ${viewports.map.get(viewports.sm)}px)`
-    }), /*#__PURE__*/_jsx("source", {
-      srcSet: xsSrc,
-      media: `(max-width: ${viewports.map.get(viewports.sm) - 1}px)`
-    }), /*#__PURE__*/_jsx("img", {
-      src: fallbackSrc,
-      alt: alt,
-      style: staticStyles.image,
-      loading: loading
-    })]
-  });
-});
-ResponsiveImage.displayName = 'ResponsiveImage';
-ResponsiveImage.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The src attribute used for screen widths up to 575px
-   */
-  xsSrc: PropTypes.string.isRequired,
-  /**
-   * The src attribute used for screen widths greater than 576px
-   */
-  smSrc: PropTypes.string.isRequired,
-  /**
-   * The src attribute used for screen widths greater than 768px
-   */
-  mdSrc: PropTypes.string,
-  /**
-   * The src attribute used for screen widths greater than 992px
-   */
-  lgSrc: PropTypes.string,
-  /**
-   * The src attribute used for screen widths greater than 1200px
-   */
-  xlSrc: PropTypes.string,
-  /**
-   * The src attribute used for browsers that don't support responsive images (InternetExplorer)
-   */
-  fallbackSrc: PropTypes.string.isRequired,
-  /**
-   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
-   */
-  alt: PropTypes.string.isRequired,
-  /**
-   * Loading strategy.
-   * @default 'eager'
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
-   */
-  loading: PropTypes.oneOf(['eager', 'lazy'])
-};
-export default ResponsiveImage;

package/lib-module/ResponsiveImage/index.js

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

package/lib-module/Ribbon/Ribbon.js

@@ -1,216 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-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:", ";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__*/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;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.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
-  } = 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__*/_jsxs(RibbonWrapper, {
-    left: left,
-    top: top,
-    "data-testid": "ribbon-wrapper",
-    ref: ref,
-    ...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}`,
-      borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
-      borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          bold: true,
-          inverse: true
-        },
-        tokens: {
-          color: fontColor,
-          fontName,
-          fontWeight,
-          fontSize,
-          lineHeight
-        },
-        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.displayName = 'Ribbon';
-Ribbon.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Ribbon'),
-  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

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