@telus-uds/components-web 1.8.0 → 1.9.0

package/lib/QuantitySelector/QuantitySelector.js

@@ -0,0 +1,253 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _styles = require("./styles");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+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 {
+  isNaN
+} = Number;
+
+const isNumber = value => {
+  return typeof value === 'number' && !isNaN(value);
+};
+
+const QuantitySelector = _ref => {
+  let {
+    id,
+    minNumber,
+    maxNumber,
+    defaultValue,
+    label,
+    hint,
+    hintPosition,
+    tooltip,
+    onChange,
+    dictionary = _dictionary.default,
+    accessibilityLabel,
+    copy,
+    variant,
+    tokens,
+    testID
+  } = _ref;
+  const {
+    components: {
+      QuantitySelector: componentTheme
+    }
+  } = (0, _componentsBase.useTheme)();
+  const {
+    leftIcon,
+    rightIcon,
+    padding
+  } = (0, _componentsBase.useThemeTokens)('QuantitySelector', tokens, variant);
+  const [error, setError] = (0, _react.useState)('');
+  const {
+    alternative
+  } = variant;
+  const getCopy = (0, _componentsBase.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 initialValue = getValidatedNumber(defaultValue);
+  const {
+    currentValue: number,
+    setValue: setNumber
+  } = (0, _componentsBase.useInputValue)({
+    value: undefined,
+    initialValue,
+    onChange
+  });
+  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !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__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
+    forId: id,
+    label: label,
+    hint: hint,
+    hintPosition: hintPosition,
+    tooltip: tooltip
+  }) : null;
+
+  const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+    nativeID: id,
+    value: inputValue,
+    tokens: textInputState => {
+      const {
+        inputBorderColor,
+        inputBackgroundColor
+      } = (0, _componentsBase.getThemeTokens)(componentTheme, tokens, variant, textInputState);
+      return {
+        borderRadius: 0,
+        margin: 0,
+        padding: 0,
+        borderColor: inputBorderColor,
+        backgroundColor: inputBackgroundColor
+      };
+    },
+    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 getButtonTokens = isEnabled => buttonState => {
+    const disabled = !isEnabled;
+    const { ...buttonTokens
+    } = (0, _componentsBase.getThemeTokens)(componentTheme, tokens, variant, { ...buttonState,
+      disabled
+    });
+    return { ...buttonTokens,
+      outerBorderGap: 0,
+      padding
+    };
+  };
+
+  const renderLeftButton = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      icon: leftIcon,
+      tokens: getButtonTokens(isDecreaseEnabled),
+      onPress: event => updateNumber(number - 1, event),
+      onDoubleClick: event => updateNumber(number - 1, event),
+      accessibilityLabel: getCopy('accessibility').decreaseButton,
+      accessibilityDisabled: !isDecreaseEnabled
+    });
+  };
+
+  const renderRightButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    icon: rightIcon,
+    tokens: getButtonTokens(isIncreaseEnabled),
+    onPress: () => updateNumber(number + 1),
+    onDoubleClick: () => updateNumber(number + 1),
+    accessibilityLabel: getCopy('accessibility').increaseButton,
+    accessibilityDisabled: !isIncreaseEnabled
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+    space: 2,
+    testID: testID,
+    children: [renderLabel(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
+        className: `${alternative ? 'alternative' : ''}`,
+        children: renderTextInput()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightButtonWrapper, {
+        className: `${alternative ? 'alternative' : ''}`,
+        children: renderRightButton()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LeftButtonWrapper, {
+        className: `${alternative ? 'alternative' : ''}`,
+        children: renderLeftButton()
+      })]
+    }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+      vertical: 2,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Feedback, {
+        validation: "error",
+        children: error
+      })
+    }) : null]
+  });
+}; // If a language dictionary entry is provided, it must contain every key
+
+
+const dictionaryContentShape = _propTypes.default.shape({
+  accessibility: _propTypes.default.shape({
+    a11yLabel: _propTypes.default.string.isRequired,
+    increaseButton: _propTypes.default.string.isRequired,
+    decreaseButton: _propTypes.default.string.isRequired
+  }).isRequired,
+  errors: _propTypes.default.shape({
+    numberIsTooSmall: _propTypes.default.func.isRequired,
+    numberIsTooBig: _propTypes.default.func.isRequired,
+    invalidCharacters: _propTypes.default.string.isRequired
+  }).isRequired
+});
+
+QuantitySelector.propTypes = {
+  id: _propTypes.default.string,
+  minNumber: _propTypes.default.number,
+  maxNumber: _propTypes.default.number,
+  onChange: _propTypes.default.func,
+  defaultValue: _propTypes.default.number,
+  label: _propTypes.default.string,
+  hint: _propTypes.default.string,
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  tooltip: _propTypes.default.string,
+  accessibilityLabel: _propTypes.default.string,
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
+  variant: _propTypes.default.exact({
+    alternative: _propTypes.default.bool
+  }),
+  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+  testID: _propTypes.default.string
+};
+QuantitySelector.defaultProps = {
+  id: 'quantity-selector',
+  hintPosition: 'inline',
+  copy: 'en',
+  variant: {
+    alternative: false
+  },
+  testID: 'quantity-selector-testid'
+};
+var _default = QuantitySelector;
+exports.default = _default;

package/lib/QuantitySelector/dictionary.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    accessibility: {
+      a11yLabel: 'Quantity Selector control',
+      increaseButton: 'Increase quantity button',
+      decreaseButton: 'Decrease quantity button'
+    },
+    errors: {
+      numberIsTooSmall: minNumber => `Number must be equal or greater than ${minNumber}`,
+      numberIsTooBig: maxNumber => `Number must be equal or less than ${maxNumber}`,
+      invalidCharacters: 'This control does not allow alphabetical or symbol characters. Try using numbers only'
+    }
+  },
+  fr: {
+    accessibility: {
+      a11yLabel: 'Contrôleur de sélection de nombre',
+      increaseButton: `Bouton d'augmentation de quantité`,
+      decreaseButton: `Bouton de diminution de quantité`
+    },
+    errors: {
+      numberIsTooSmall: minNumber => `Le nombre doit être plus grand ou égal que ${minNumber}`,
+      numberIsTooBig: maxNumber => `Le nombre doit être plus petit ou égal que ${maxNumber}`,
+      invalidCharacters: `Ce champ ne supporte pas les caractères alphabétiques ni les symboles. Essayez d'utiliser des chiffres uniquement`
+    }
+  }
+};
+exports.default = _default;

package/lib/QuantitySelector/index.js

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

package/lib/QuantitySelector/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightButtonWrapper = exports.LeftButtonWrapper = exports.InputWrapper = exports.InputField = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputField = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__InputField",
+  componentId: "components-web__sc-1lrz1xk-0"
+})(["order:2;min-width:3.5rem;max-width:5 rem;height:28px;padding:0;width:64px;text-align:center;z-index:10;input{text-align:center;}&.alternative{input{height:40px;}}"]);
+
+exports.InputField = InputField;
+
+const ButtonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__ButtonWrapper",
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["&.alternative{div[role='button']{height:42px;> div{height:40px;> div{padding:12px 16px;}}}}"]);
+
+const LeftButtonWrapper = /*#__PURE__*/(0, _styledComponents.default)(ButtonWrapper).withConfig({
+  displayName: "styles__LeftButtonWrapper",
+  componentId: "components-web__sc-1lrz1xk-2"
+})(["order:0;div[role='button']{border-radius:4px 0px 0px 4px !important;> div{border-right:none;border-radius:4px 0px 0px 4px !important;}}&.alternative{div[role='button']{border-radius:36px 0px 0px 36px !important;> div{border-radius:24px 0px 0px 24px !important;}}}"]);
+exports.LeftButtonWrapper = LeftButtonWrapper;
+const RightButtonWrapper = /*#__PURE__*/(0, _styledComponents.default)(ButtonWrapper).withConfig({
+  displayName: "styles__RightButtonWrapper",
+  componentId: "components-web__sc-1lrz1xk-3"
+})(["order:3;div[role='button']{border-radius:0px 4px 4px 0px !important;> div{border-left:none;border-radius:0px 4px 4px 0px !important;}}&.alternative{div[role='button']{border-radius:0px 36px 36px 0px !important;> div{border-radius:0px 36px 36px 0px !important;}}}"]);
+exports.RightButtonWrapper = RightButtonWrapper;
+
+const InputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "components-web__sc-1lrz1xk-4"
+})(["textalign:start;display:flex;flexdirection:row;flexwrap:nowrap;justifycontent:center;"]);
+
+exports.InputWrapper = InputWrapper;

package/lib/StoryCard/StoryCard.js

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+
+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; }
+
+/* eslint-disable react/require-default-props */
+// Passes React Native-oriented system props through UDS PressableCardBase
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]); // Stop changes to the card's inner border width causing the size and
+// apparent position of the full bleed image to change.
+
+const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-yhvivu-0"
+})(_ref => {
+  let {
+    borderOffset
+  } = _ref;
+  return {
+    overflow: 'hidden',
+    marginTop: borderOffset * 2
+  };
+});
+
+const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-yhvivu-1"
+})(_ref2 => {
+  let {
+    borderOffset
+  } = _ref2;
+  return {
+    position: 'relative',
+    margin: 0 - borderOffset
+  };
+});
+/**
+ * Showcase and guide users to another page, offering a description of that page's story.
+ * Whole card is interactive, width expands based on column or container.
+ *
+ * - Use `tag` to show category of content
+ * - Use `date` to show when the story was published
+ * - Use `title` to show title of the story
+ * - Use `description` to show description of the story
+ * - Use `href` to set the target URL
+ * - Use `fullBleedContent` to set the thumbnail image
+ */
+
+
+const StoryCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    tag,
+    date,
+    title,
+    description,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    onPress,
+    href,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    fullBleedContentPosition,
+    contentStackDirection,
+    fullBleedContentProps
+  } = (0, _FullBleedContent.useFullBleedContentProps)({ ...fullBleedContent,
+    position: 'bottom'
+  });
+  const generalTokens = (0, _componentsBase.useThemeTokens)('StoryCard', tokens, variant);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('StoryCard', tokens, variant);
+
+  const getPressableCardTokens = cardState => getTokens(cardState);
+
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    ref: ref,
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderRadius,
+        borderWidth
+      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
+
+      const borderOffset = borderWidth - generalTokens.borderWidth;
+      const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius + borderOffset, fullBleedContentPosition);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        direction: contentStackDirection,
+        tokens: {
+          justifyContent: 'space-between',
+          flexGrow: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+          horizontal: {
+            xs: 4,
+            lg: 5,
+            options: {
+              subtract: borderOffset
+            }
+          },
+          vertical: {
+            xs: 5,
+            lg: 7,
+            options: {
+              subtract: borderOffset
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackWrap, {
+            space: 1,
+            tokens: {
+              justifyContent: 'space-between',
+              alignItems: 'baseline'
+            },
+            children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'eyebrow',
+                colour: 'secondary'
+              },
+              children: tag
+            }), Boolean(date) &&
+            /*#__PURE__*/
+            // TODO: get user locale and apply date formatting: "MMM DD, YYYY" for `en` and "YYYY-MM-DD" for `fr`
+            // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
+            (0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'small',
+                colour: 'secondary'
+              },
+              children: date
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+            variant: {
+              decorative: true
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 3
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              size: 'h3',
+              colour: 'secondary'
+            },
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            children: description
+          })]
+        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
+          borderOffset: borderOffset,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
+            borderOffset: borderOffset,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+              borderRadius: fullBleedBorderRadius,
+              ...fullBleedContentProps
+            })
+          })
+        })]
+      });
+    }
+  });
+});
+StoryCard.displayName = 'StoryCard';
+StoryCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
+   * a `StoryCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
+   * Please use `onPress` prop instead `href` to organize navigation in cases like this.
+   *
+   * @see https://github.com/telus/allium-design-system/issues/6
+   */
+  href: _propTypes.default.string,
+
+  /**
+   * Optional function to be called on press e.g. for within-page navigation.
+   */
+  onPress: _propTypes.default.func,
+
+  /**
+   * Text stating the category of the content.
+   */
+  tag: _propTypes.default.string,
+
+  /**
+   * Text stating the date a story was published.
+   */
+  date: _propTypes.default.string.isRequired,
+
+  /**
+   * Text stating the title or headline of the story.
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * Text giving a short description of the story. One paragraph of plain text.
+   */
+  description: _propTypes.default.string.isRequired,
+
+  /**
+   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
+   *
+   * @deprecated
+   */
+  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
+
+  /**
+   * Full bleed image to be placed on the card.
+   */
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(StoryCard);
+
+exports.default = _default;

package/lib/StoryCard/index.js

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