@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/src/Progress/ProgressBar.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {
   getTokensPropType,
-  Progress,
+  ProgressBar as ProgressBarBase,
   selectSystemProps,
   useThemeTokens,
   a11yProps,
@@ -14,17 +14,13 @@ import styled from 'styled-components'
 
 // Passes React Native-oriented system props through UDS Progress
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
-
-const { Bar: ProgressBarBase } = Progress
-const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
-  ({ gradient: { angle, stops, type }, borderRadius, shadow }) => ({
-    height: '100%',
-    width: '100%',
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
-    borderRadius,
-    ...applyShadowToken(shadow)
-  })
-)
+const Gradient = styled.div(({ $gradient: { angle, stops, type }, $borderRadius, $shadow }) => ({
+  height: '100%',
+  width: '100%',
+  background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+  borderRadius: $borderRadius,
+  ...applyShadowToken($shadow)
+}))
 
 /**
  * The `ProgressBar` is a visual representation of linear progression.
@@ -38,23 +34,32 @@ const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
  *
  */
 
-const ProgressBar = React.forwardRef(({ percentage, tokens, variant, offset, ...rest }, ref) => {
-  const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
-  const selectedProps = selectProps(rest)
+export const ProgressBar = React.forwardRef(
+  ({ percentage, tokens, variant, offset, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
+    const selectedProps = selectProps(rest)
 
-  return (
-    <ProgressBarBase
-      percentage={percentage}
-      tokens={tokens}
-      variant={variant}
-      ref={ref}
-      offset={offset}
-      {...selectedProps}
-    >
-      {themeTokens.gradient && <Gradient {...themeTokens} />}
-    </ProgressBarBase>
-  )
-})
+    return (
+      <ProgressBarBase
+        percentage={percentage}
+        tokens={tokens}
+        variant={variant}
+        ref={ref}
+        offset={offset}
+        {...selectedProps}
+      >
+        {themeTokens.gradient && (
+          <Gradient
+            data-testid="ProgressBar-Gradient"
+            $gradient={themeTokens.gradient}
+            $borderRadius={themeTokens.borderRadius}
+            $shadow={themeTokens.shadow}
+          />
+        )}
+      </ProgressBarBase>
+    )
+  }
+)
 
 ProgressBar.displayName = 'ProgressBar'
 
@@ -80,5 +85,3 @@ ProgressBar.propTypes = {
     current: PropTypes.number
   })
 }
-
-export default ProgressBar

package/src/QuantitySelector/QuantitySelector.jsx

@@ -16,8 +16,8 @@ import {
 import { htmlAttrs } from '../utils'
 
 import { InputField, InputWrapper } from './styles'
-import defaultDictionary from './dictionary'
-import SideButton from './SideButton'
+import { dictionary as defaultDictionary } from './dictionary'
+import { QuantitySelectorSideButton } from './QuantitySelectorSideButton'
 
 const { isNaN } = Number
 
@@ -27,7 +27,7 @@ const isNumber = (value) => {
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs])
 
-const QuantitySelector = React.forwardRef(
+export const QuantitySelector = React.forwardRef(
   (
     {
       id = 'quantity-selector',
@@ -171,7 +171,7 @@ const QuantitySelector = React.forwardRef(
         <InputWrapper>
           <InputField>{renderTextInput()}</InputField>
           <div style={flexOrder(0)}>
-            <SideButton
+            <QuantitySelectorSideButton
               isEnabled={isDecreaseEnabled}
               onPress={() => updateNumber(number - 1)}
               onDoubleClick={() => updateNumber(number - 1)}
@@ -182,7 +182,7 @@ const QuantitySelector = React.forwardRef(
             />
           </div>
           <div style={flexOrder(2)}>
-            <SideButton
+            <QuantitySelectorSideButton
               isEnabled={isIncreaseEnabled}
               onPress={() => updateNumber(number + 1)}
               onDoubleClick={() => updateNumber(number + 1)}
@@ -292,5 +292,3 @@ QuantitySelector.propTypes = {
    */
   inactive: PropTypes.bool
 }
-
-export default QuantitySelector

package/src/QuantitySelector/{SideButton.jsx → QuantitySelectorSideButton.jsx}

@@ -2,7 +2,7 @@ import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-ud
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const SideButton = React.forwardRef(
+export const QuantitySelectorSideButton = React.forwardRef(
   (
     {
       isEnabled = true,
@@ -56,9 +56,9 @@ const SideButton = React.forwardRef(
   }
 )
 
-SideButton.displayName = 'QuantitySelectorSideButton'
+QuantitySelectorSideButton.displayName = 'QuantitySelectorSideButton'
 
-SideButton.propTypes = {
+QuantitySelectorSideButton.propTypes = {
   isEnabled: PropTypes.bool,
   onPress: PropTypes.func,
   onDoubleClick: PropTypes.func,
@@ -67,4 +67,3 @@ SideButton.propTypes = {
   tokens: getTokensPropType('QuantitySelectorSideButton'),
   variant: PropTypes.object
 }
-export default SideButton

package/src/QuantitySelector/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     accessibility: {
       a11yLabel: 'Quantity selector',

package/src/ResponsiveImage/ResponsiveImage.jsx

@@ -13,7 +13,7 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = React.forwardRef(
+export const ResponsiveImage = React.forwardRef(
   (
     { xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, loading = 'eager', dataSet, ...rest },
     ref
@@ -74,5 +74,3 @@ ResponsiveImage.propTypes = {
    */
   dataSet: PropTypes.object
 }
-
-export default ResponsiveImage

package/src/Ribbon/Ribbon.jsx

@@ -22,36 +22,36 @@ const RibbonWrapper = styled.div`
 const RibbonContainer = styled.div`
   display: flex;
   justify-content: center;
-  background: ${({ backgroundColor }) => backgroundColor};
-  padding: ${({ padding }) => `${padding}`};
-  border-radius: ${({ borderRadius }) => borderRadius};
+  background: ${({ $backgroundColor }) => $backgroundColor};
+  padding: ${({ $padding }) => `${$padding}`};
+  border-radius: ${({ $borderRadius }) => $borderRadius};
   width: fit-content;
-  box-shadow: ${({ boxShadow, shouldWrap }) => shouldWrap && boxShadow};
-  border-bottom-right-radius: ${({ borderRadiusBottomLeft }) => borderRadiusBottomLeft};
-  border-bottom-left-radius: ${({ borderRadiusBottomRight }) => borderRadiusBottomRight};
+  box-shadow: ${({ $boxShadow }) => $boxShadow};
+  border-bottom-right-radius: ${({ $borderRadiusBottomLeft }) => $borderRadiusBottomLeft};
+  border-bottom-left-radius: ${({ $borderRadiusBottomRight }) => $borderRadiusBottomRight};
 `
 
 const RibbonCurve = styled.div`
-  background: ${({ curveBackgroundColor }) => curveBackgroundColor};
-  width: ${({ curveWidth }) => curveWidth};
-  height: ${({ curveHeight }) => curveHeight};
-  margin-top: -${({ curveMarginTop }) => curveMarginTop};
+  background: ${({ $curveBackgroundColor }) => $curveBackgroundColor};
+  width: ${({ $curveWidth }) => $curveWidth};
+  height: ${({ $curveHeight }) => $curveHeight};
+  margin-top: -${({ $curveMarginTop }) => $curveMarginTop};
   border-radius: 0 0 0 100%;
   position: relative;
   z-index: -1;
   overflow: hidden;
   &::after {
     content: '';
-    border-bottom-left-radius: ${({ curveAfterRadius }) => curveAfterRadius};
+    border-bottom-left-radius: ${({ $curveAfterRadius }) => $curveAfterRadius};
     position: absolute;
-    height: ${({ curveAfterHeight }) => curveAfterHeight};
-    background: ${({ curveAfterBackgroundColor }) => curveAfterBackgroundColor};
-    width: ${({ curveAfterWidth }) => curveAfterWidth};
+    height: ${({ $curveAfterHeight }) => $curveAfterHeight};
+    background: ${({ $curveAfterBackgroundColor }) => $curveAfterBackgroundColor};
+    width: ${({ $curveAfterWidth }) => $curveAfterWidth};
   }
 `
 
-const Ribbon = React.forwardRef(
-  ({ children, tokens, wrap: shouldWrap = false, left, top, variant = {}, ...rest }, ref) => {
+export const Ribbon = React.forwardRef(
+  ({ children, tokens, left, top, variant = {}, ...rest }, ref) => {
     const {
       backgroundColor,
       borderRadius,
@@ -80,7 +80,7 @@ const Ribbon = React.forwardRef(
       fontWeight,
       fontSize,
       lineHeight
-    } = useThemeTokens('Ribbon', tokens, { ...variant, wrap: shouldWrap })
+    } = useThemeTokens('Ribbon', tokens, { ...variant })
 
     let background = backgroundColor
     if (gradient) {
@@ -97,13 +97,12 @@ const Ribbon = React.forwardRef(
         {...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}`}
-          borderRadiusBottomLeft={`${borderRadiusBottomLeft}px`}
-          borderRadiusBottomRight={`${borderRadiusBottomRight}px`}
+          $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`}
         >
           <Typography
             variant={{ bold: true, inverse: true }}
@@ -118,20 +117,18 @@ const Ribbon = React.forwardRef(
             {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}
-          />
-        )}
+        <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>
     )
   }
@@ -143,14 +140,8 @@ 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/src/SkeletonProvider/SkeletonImage.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Skeleton } from '@telus-uds/components-base'
 
-const SkeletonImage = React.forwardRef(
+export const SkeletonImage = React.forwardRef(
   (
     {
       rounded,
@@ -38,5 +38,3 @@ SkeletonImage.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.node
 }
-
-export default SkeletonImage

package/src/SkeletonProvider/SkeletonProvider.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Typography } from '@telus-uds/components-base'
-import Image from '../Image'
-import SkeletonTypography from './SkeletonTypography'
-import SkeletonImage from './SkeletonImage'
+import { Image } from '../Image/Image'
+import { SkeletonTypography } from './SkeletonTypography'
+import { SkeletonImage } from './SkeletonImage'
 
-const SkeletonProvider = ({ children, show }) => {
+export const SkeletonProvider = ({ children, show }) => {
   if (!show) {
     return children
   }
@@ -19,9 +19,7 @@ const SkeletonProvider = ({ children, show }) => {
 
     if (childElement.props && 'children' in childElement.props) {
       const { children: elementChildren } = childElement.props
-      const mappedChildren = Array.isArray(elementChildren)
-        ? elementChildren.map(mapChild)
-        : mapChild(elementChildren)
+      const mappedChildren = React.Children.map(elementChildren, mapChild)
       childElement = React.cloneElement(childElement, {
         children: mappedChildren
       })
@@ -58,5 +56,3 @@ SkeletonProvider.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
 }
-
-export default SkeletonProvider

package/src/SkeletonProvider/SkeletonTypography.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Skeleton } from '@telus-uds/components-base'
 
-const SkeletonTypography = React.forwardRef(
+export const SkeletonTypography = React.forwardRef(
   ({ show, size, sizeIndex, sizePixels, characters, lines, children }, ref) => {
     if (!show) {
       return children
@@ -32,5 +32,3 @@ SkeletonTypography.propTypes = {
   characters: Skeleton.propTypes?.characters,
   lines: Skeleton.propTypes?.lines
 }
-
-export default SkeletonTypography

package/src/Span/Span.jsx

@@ -6,7 +6,7 @@ import { htmlAttrs, useTypographyTheme } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const StyledSpan = styled.span`${({ flex }) => (flex ? 'display: inline-flex' : '')}};`
+const StyledSpan = styled.span`${({ $flex }) => ($flex ? 'display: inline-flex' : '')}};`
 
 /**
  * Text as an HTML ```<span>``` element.
@@ -14,14 +14,16 @@ const StyledSpan = styled.span`${({ flex }) => (flex ? 'display: inline-flex' :
  * 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 = React.forwardRef(({ children, variant, tokens, testID, flex, ...rest }, ref) => {
-  const style = useTypographyTheme(variant, tokens)
-  return (
-    <StyledSpan data-testid={testID} flex={flex} style={style} ref={ref} {...selectProps(rest)}>
-      {children}
-    </StyledSpan>
-  )
-})
+export const Span = React.forwardRef(
+  ({ children, variant, tokens, testID, flex, ...rest }, ref) => {
+    const style = useTypographyTheme(variant, tokens)
+    return (
+      <StyledSpan data-testid={testID} $flex={flex} style={style} ref={ref} {...selectProps(rest)}>
+        {children}
+      </StyledSpan>
+    )
+  }
+)
 
 Span.displayName = 'Span'
 
@@ -66,5 +68,3 @@ Span.propTypes = {
     weight: PropTypes.oneOf(['semibold', 'bold'])
   })
 }
-
-export default Span

package/src/Spinner/Spinner.jsx

@@ -8,21 +8,21 @@ import {
 } from '@telus-uds/components-base'
 import { Portal } from '@gorhom/portal'
 import styled from 'styled-components'
-import SpinnerContent from './SpinnerContent'
+import { SpinnerContent } from './SpinnerContent'
 import { htmlAttrs, media } from '../utils'
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const SpinnerContainer = styled.div(({ inline, fullScreen, overlay }) => ({
+const SpinnerContainer = styled.div(({ $inline, $fullScreen, $overlay }) => ({
   position: 'relative',
-  ...(inline && {
-    display: overlay ? 'inline-block' : 'block',
+  ...($inline && {
+    display: $overlay ? 'inline-block' : 'block',
     ...media().from('md').css({
       display: 'inline-block'
     })
   }),
-  ...(fullScreen && { top: '50%', transform: 'translateY(-50%)' })
+  ...($fullScreen && { top: '50%', transform: 'translateY(-50%)' })
 }))
 
 const ContentOverlay = styled.div({
@@ -35,18 +35,18 @@ const ContentOverlay = styled.div({
   pointerEvents: 'none'
 })
 
-const FullscreenOverlay = styled.div(({ fullScreenOverLayBackground }) => ({
+const FullscreenOverlay = styled.div(({ $fullScreenOverLayBackground }) => ({
   position: 'fixed',
   width: '100vw',
   height: '100vh',
   top: 0,
   left: 0,
   zIndex: BACKDROP_Z_INDEX,
-  backgroundColor: fullScreenOverLayBackground
+  backgroundColor: $fullScreenOverLayBackground
 }))
 
-const OpaqueContainer = styled.div(({ show = true }) => ({
-  ...(show && {
+const OpaqueContainer = styled.div(({ $show = true }) => ({
+  ...($show && {
     opacity: BACKDROP_OPACITY
   })
 }))
@@ -70,7 +70,7 @@ const recursiveMap = (children, fn) =>
 /**
  * Loading indicator.
  */
-const Spinner = React.forwardRef(
+export const Spinner = React.forwardRef(
   (
     {
       children,
@@ -100,9 +100,9 @@ const Spinner = React.forwardRef(
     // Overlay spinner with persistChildrenState enabled
     if (children && persistChildrenState) {
       return (
-        <SpinnerContainer inline={inline} aria-live="assertive" overlay {...selectProps(rest)}>
+        <SpinnerContainer $inline={inline} aria-live="assertive" $overlay {...selectProps(rest)}>
           {/* Children ALWAYS rendered in same position - OpaqueContainer styles toggle with show */}
-          <OpaqueContainer show={show} {...(show ? { inert: 'true', 'aria-hidden': 'true' } : {})}>
+          <OpaqueContainer $show={show} {...(show ? { inert: true, 'aria-hidden': 'true' } : {})}>
             {children}
           </OpaqueContainer>
           <ContentOverlay />
@@ -129,10 +129,10 @@ const Spinner = React.forwardRef(
     if (fullScreen) {
       return (
         <Portal>
-          <FullscreenOverlay fullScreenOverLayBackground={fullScreenOverLayBackground}>
+          <FullscreenOverlay $fullScreenOverLayBackground={fullScreenOverLayBackground}>
             <SpinnerContainer
-              inline={inline}
-              fullScreen={fullScreen}
+              $inline={inline}
+              $fullScreen={fullScreen}
               aria-live="assertive"
               {...selectProps(rest)}
             >
@@ -154,7 +154,7 @@ const Spinner = React.forwardRef(
     // Overlay spinner
     if (children && !persistChildrenState) {
       return (
-        <SpinnerContainer inline={inline} aria-live="assertive" overlay {...selectProps(rest)}>
+        <SpinnerContainer $inline={inline} aria-live="assertive" $overlay {...selectProps(rest)}>
           <SpinnerContent
             label={label}
             labelPosition={labelPosition}
@@ -167,7 +167,7 @@ const Spinner = React.forwardRef(
 
           <ContentOverlay />
 
-          <OpaqueContainer inert="true">
+          <OpaqueContainer $show={show} inert>
             {recursiveMap(children, (c) => {
               if (c) {
                 return React.cloneElement(c, { tabIndex: '-1', 'aria-hidden': 'true' })
@@ -243,5 +243,3 @@ Spinner.propTypes = {
    */
   persistChildrenState: PropTypes.bool
 }
-
-export default Spinner

package/src/Spinner/SpinnerContent.jsx

@@ -7,11 +7,11 @@ import { BACKDROP_Z_INDEX, LARGE } from './constants'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const Container = styled.div(({ overlay }) => ({
+const Container = styled.div(({ $overlay }) => ({
   display: 'inline-flex',
   flexDirection: 'column',
   alignItems: 'center',
-  ...(overlay && {
+  ...($overlay && {
     position: 'absolute',
     top: '50%',
     left: '50%',
@@ -20,7 +20,7 @@ const Container = styled.div(({ overlay }) => ({
   })
 }))
 
-const SpinnerContent = React.forwardRef(
+export const SpinnerContent = React.forwardRef(
   (
     {
       label,
@@ -36,7 +36,7 @@ const SpinnerContent = React.forwardRef(
     ref
   ) => {
     return (
-      <Container overlay={overlay} ref={ref} aria-label={label} role="status">
+      <Container $overlay={overlay} ref={ref} aria-label={label} role="status">
         <ActivityIndicator
           role="progressbar"
           aria-busy="true"
@@ -78,5 +78,3 @@ SpinnerContent.propTypes = {
    */
   isStatic: PropTypes.bool
 }
-
-export default SpinnerContent

package/src/StoryCard/StoryCard.jsx

@@ -19,7 +19,8 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import FullBleedContent, {
+import {
+  FullBleedContent,
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
@@ -33,13 +34,13 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 
 // Stop changes to the card's inner border width causing the size and
 // apparent position of the full bleed image to change.
-const FullBleedOffsetOuter = styled.div(({ borderOffset }) => ({
+const FullBleedOffsetOuter = styled.div(({ $borderOffset }) => ({
   overflow: 'hidden',
-  marginTop: borderOffset * 2
+  marginTop: $borderOffset * 2
 }))
-const FullBleedOffsetInner = styled.div(({ borderOffset }) => ({
+const FullBleedOffsetInner = styled.div(({ $borderOffset }) => ({
   position: 'relative',
-  margin: 0 - borderOffset
+  margin: 0 - $borderOffset
 }))
 
 /**
@@ -60,8 +61,7 @@ const StoryCard = React.forwardRef(
       date,
       title,
       description,
-      fullBleedImage,
-      fullBleedContent = fullBleedImage,
+      fullBleedContent,
       onPress,
       href,
       tokens,
@@ -130,8 +130,8 @@ const StoryCard = React.forwardRef(
                 <Typography>{description}</Typography>
               </Box>
               {Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && (
-                <FullBleedOffsetOuter borderOffset={borderOffset}>
-                  <FullBleedOffsetInner borderOffset={borderOffset}>
+                <FullBleedOffsetOuter $borderOffset={borderOffset}>
+                  <FullBleedOffsetInner $borderOffset={borderOffset}>
                     <FullBleedContent
                       borderRadius={fullBleedBorderRadius}
                       {...fullBleedContentProps}
@@ -180,16 +180,15 @@ StoryCard.propTypes = {
    * Text giving a short description of the story. One paragraph of plain text.
    */
   description: PropTypes.string.isRequired,
-  /**
-   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
-   *
-   * @deprecated
-   */
-  fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
   /**
    * Full bleed image to be placed on the card.
    */
   fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
 }
 
-export default withLinkRouter(StoryCard)
+// Export unwrapped component for react-docgen to extract info for docsite
+export { StoryCard as StoryCardBase }
+
+// Export wrapped component as main StoryCard export
+const StoryCardWithRouter = withLinkRouter(StoryCard)
+export { StoryCardWithRouter as StoryCard }