@telus-uds/components-web 3.4.0 → 4.1.0

package/src/WebVideo/WebVideo.jsx

@@ -2,12 +2,11 @@ import { selectSystemProps } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
 import React from 'react'
 import YouTube from 'react-youtube'
+import styled from 'styled-components'
 import VideoSplash from '../shared/VideoSplash/VideoSplash'
-import { htmlAttrs, styledComponents } from '../utils'
+import { htmlAttrs } from '../utils'
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledPlayerContainer = styled.div({
@@ -16,7 +15,7 @@ const StyledPlayerContainer = styled.div({
   outline: 'none'
 })
 
-const StyledYoutubePlayer = styled((props) => <YouTube {...props} />)({
+const StyledYoutubePlayer = styled(YouTube)({
   position: 'absolute',
   top: 0,
   left: 0,

package/src/index.js

@@ -36,6 +36,6 @@ export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
 
-export { ssrStyles, styledComponents } from './utils'
+export { ssrStyles } from './utils'
 
 export * from './baseExports'

package/src/shared/FullBleedContent/FullBleedContent.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { styledComponents } from '../../utils'
+import styled from 'styled-components'
 import ResponsiveImage from '../../ResponsiveImage'
 
-const { styled } = styledComponents
-
 const selectFullBleedContentProps = ({
   alt,
   height,

package/src/shared/VideoSplash/SplashButton/SplashButton.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '@telus-uds/components-base'
-import { styledComponents } from '../../../utils'
+import styled from 'styled-components'
 import { getAriaLabel, getTimestamp } from '../helpers'
 
-const { styled } = styledComponents
-
 const ButtonContainer = styled.button({
   background: 'none',
   border: 0,

package/src/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.jsx

@@ -1,12 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Typography, useThemeTokens } from '@telus-uds/components-base'
-import { styledComponents } from '../../../utils'
-
+import styled from 'styled-components'
 import { getAriaLabel, getTimestamp } from '../helpers'
 
-const { styled } = styledComponents
-
 const ButtonContainer = styled.button({
   background: 'none',
   border: 0,

package/src/shared/VideoSplash/VideoSplash.jsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { selectSystemProps, useViewport } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import { viewports } from '@telus-uds/system-constants'
 import SplashButton from './SplashButton/SplashButton'
 import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails'
 import videoText from '../../Video/videoText'
-import { htmlAttrs, styledComponents } from '../../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/utils/index.js

@@ -8,7 +8,6 @@ import isElementFocusable from './isElementFocusable'
 import renderStructuredContent from './renderStructuredContent'
 import useOverlaidPosition from './useOverlaidPosition'
 import scrollToAnchor from './scrollToAnchor'
-import styledComponents from './theming/styled-components'
 
 export {
   deprecate,
@@ -22,6 +21,5 @@ export {
   ssrStyles,
   isElementFocusable,
   useOverlaidPosition,
-  scrollToAnchor,
-  styledComponents
+  scrollToAnchor
 }

package/src/utils/ssr.js

@@ -1,5 +1,5 @@
+import { ServerStyleSheet } from 'styled-components'
 import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
-import styledComponents from './theming/styled-components'
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -22,7 +22,6 @@ const ssrStyles = (
   { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {},
   router = 'pages'
 ) => {
-  const { ServerStyleSheet } = styledComponents
   const sheet = new ServerStyleSheet()
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement()

package/types/Listbox.d.ts

@@ -0,0 +1,67 @@
+// TODO: Duplicate of the one in components-base. TS module resolution doesn't seem to be working from web -> base.
+import type { ComponentType, ElementType } from 'react'
+
+type ListboxTokens = {
+  groupBorderRadius?: number | string
+  groupBorderWidth?: number | string
+  groupFontSize?: number
+  groupFontName?: string
+  groupFontWeight?: string
+  groupColor?: string
+  groupBorderColor?: string
+  groupBackgroundColor?: string
+  groupPaddingTop?: number
+  groupPaddingBottom?: number
+  groupPaddingLeft?: number
+  groupPaddingRight?: number
+  groupIcon?: string
+  itemDisplay?: boolean
+  itemFontName?: string
+  itemFontWeight?: string
+  itemFontSize?: number
+  itemPaddingTop?: number
+  itemPaddingBottom?: number
+  itemPaddingLeft?: number
+  itemPaddingRight?: number
+  itemColor?: string
+  itemBackgroundColor?: string
+  itemBorderLeftColor?: string
+  itemBorderLeftWidth?: number | string
+  itemBorderWidth?: number | string
+  itemTextDecoration?: string
+  itemOutline?: number | string
+  shadow?: string
+  itemBorderRightColor?: string
+  itemBorderBottomColor?: string
+  itemBorderTopColor?: string
+  itemBorderRightWidth?: number | string
+  itemBorderBottomWidth?: number | string
+  itemBorderTopWidth?: number | string
+  itemBorderRadius?: number | string
+  minWidth?: number
+  minHeight?: number
+  itemHeight?: number
+  groupHeight?: number
+  lineHeight?: number
+}
+
+type ListboxItems = {
+  label: string
+  href: string
+  tokens?: ListboxTokens
+}
+
+export interface ListboxProps {
+  items: ListboxItems[]
+  firstItemRef?: object
+  parentRef?: object
+  LinkRouter?: ElementType
+  linkRouterProps?: object
+  tokens?: ListboxTokens
+  selectedId?: string
+  onClose?: () => void
+}
+
+declare const Listbox: ComponentType<ListboxProps>
+
+export default Listbox

package/types/index.d.ts

@@ -42,6 +42,9 @@ declare const ExpandCollapseMini: ComponentType<Props>
 export { default as FileUpload } from './FileUpload'
 export type { FileUploadProps, FileUploadTokens } from './FileUpload'
 
+// Listbox Exports
+export { default as Listbox } from './Listbox'
+
 declare const Footnote: ComponentType<Props> & {
   Link: ComponentType<Props>
 }