@telus-uds/components-web 2.6.0 → 2.8.0

package/src/StoryCard/StoryCard.jsx

@@ -115,21 +115,17 @@ const StoryCard = forwardRef(
                   space={1}
                   tokens={{ justifyContent: 'space-between', alignItems: 'baseline' }}
                 >
-                  {Boolean(tag) && (
-                    <Typography variant={{ size: 'eyebrow', colour: 'secondary' }}>
-                      {tag}
-                    </Typography>
-                  )}
+                  {Boolean(tag) && <Typography variant={{ size: 'eyebrow' }}>{tag}</Typography>}
                   {Boolean(date) && (
                     // 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
-                    <Typography variant={{ size: 'small', colour: 'secondary' }}>{date}</Typography>
+                    <Typography variant={{ size: 'small' }}>{date}</Typography>
                   )}
                 </StackWrap>
                 <Spacer space={2} />
                 <Divider variant={{ decorative: true }} />
                 <Spacer space={3} />
-                <Typography variant={{ size: 'h3', colour: 'secondary' }}>{title}</Typography>
+                <Typography variant={{ size: 'h3' }}>{title}</Typography>
                 <Spacer space={2} />
                 <Typography>{description}</Typography>
               </Box>

package/src/Table/Table.jsx

@@ -36,7 +36,7 @@ export const useTableContext = () => useContext(TableContext)
  * - Use `Table.Row` and `Table.Cell` to build up the tabular data
  * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
-const Table = ({ children, fullWidth = false, text = 'medium', tokens, variant, ...rest }) => {
+const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, ...rest }) => {
   const { tablePaddingBottom } = useThemeTokens('Table', tokens, variant)
   const containerRef = useRef()
   const tableRef = useRef()

package/src/WebPortal/WebPortal.jsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WebPortal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `WebPortal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const WebPortal = ({ children }) => {
+  const portalContainer = document.createElement('div')
+
+  useEffect(() => {
+    document.body.appendChild(portalContainer)
+
+    return () => {
+      document.body.removeChild(portalContainer)
+    }
+  }, [portalContainer])
+
+  return ReactDOM.createPortal(children, portalContainer)
+}
+
+export default WebPortal

package/src/WebPortal/index.js

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

package/src/WebVideo/WebVideo.jsx

@@ -119,7 +119,7 @@ export const VideoProps = {
   /**
    * The splash screen UI's language as an ISO language code. It currently supports English and French.
    */
-  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */

package/src/baseExports.js

@@ -67,5 +67,6 @@ export {
   // Enable access to the viewports system for app-specific responsive layouts and features
   useResponsiveProp,
   useViewport, // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
-  useCarousel
+  useCarousel,
+  useSetTheme
 } from '@telus-uds/components-base'

package/src/index.js

@@ -37,6 +37,7 @@ export { default as TermsAndConditions } from './TermsAndConditions'
 export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
+export { default as WebPortal } from './WebPortal'
 
 export { ssrStyles } from './utils'
 

package/types/WebVideo.d.ts

@@ -8,8 +8,8 @@ export interface WebVideoProps extends HTMLAttrs {
   defaultVolume?: number
   beginMuted?: boolean
   videoLength: number
-  copy: 'en' | 'fr'
-  onStart: () => void
+  copy?: 'en' | 'fr'
+  onStart?: () => void
 }
 
 declare const WebVideo: ComponentType<WebVideoProps>