@telus-uds/components-web 1.4.0 → 1.6.0

package/src/Toast/Toast.jsx

@@ -0,0 +1,151 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  ChevronLink,
+  selectSystemProps,
+  useThemeTokens,
+  Typography,
+  withLinkRouter
+} from '@telus-uds/components-base'
+import styled, { keyframes, css } from 'styled-components'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const transform = (property) => (from, to) =>
+  keyframes`
+  from {
+    ${property}: ${from};
+  }
+  to {
+    ${property}: ${to};
+  }
+`
+
+const slideDown =
+  (property) =>
+  (from, to, end = to) =>
+    keyframes`
+  0% {
+    ${property}: ${from};
+  }
+  99% {
+    ${property}: ${to};
+  }
+  100% {
+    ${property}: ${end};
+  }
+`
+
+const animation = (props) => css`
+  ${slideDown('height')(
+    `${props.animationHeightBefore}px`,
+    `${props.animationHeightAfter}px`,
+    'auto'
+  )} 1s ease-in-out 2s forwards,
+    ${transform('padding-bottom')(
+    `${props.animationPaddingBottomBefore}px`,
+    `${props.animationPaddingBottomAfter}px`
+  )} 1s ease-in-out 2s forwards,
+    ${transform('padding-top')(
+    `${props.animationPaddingTopBefore}px`,
+    `${props.animationPaddingTopAfter}px`
+  )} 1s ease-in-out 2s forwards,
+    ${transform('background')(
+    props.animationBackgroundColorBefore,
+    props.animationBackgroundColorAfter
+  )} 1s ease-in-out 3.2s forwards;
+  & * {
+    animation: ${transform('color')(props.animationColorBefore, props.animationColorAfter)} 1s
+      ease-in-out 3s forwards;
+  }
+  & > a div {
+    animation: ${transform('color')(props.animationDivColorBefore, props.animationDivColorAfter)} 1s
+      ease-in-out 3s forwards;
+  }
+  & > a svg {
+    animation: ${transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter)}
+      1s ease-in-out 3s forwards;
+  }
+`
+
+const ToastContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  background: ${({ containerBackgroundColor }) => containerBackgroundColor};
+  gap: ${({ containerGap }) => containerGap};
+  height: 0;
+  overflow: hidden;
+  animation: ${animation};
+`
+
+const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) => {
+  const {
+    containerBackgroundColor,
+    containerGap,
+    animationHeightBefore,
+    animationHeightAfter,
+    animationPaddingBottomBefore,
+    animationPaddingBottomAfter,
+    animationPaddingTopBefore,
+    animationPaddingTopAfter,
+    animationBackgroundColorBefore,
+    animationBackgroundColorAfter,
+    animationColorBefore,
+    animationColorAfter,
+    animationFillColorBefore,
+    animationFillColorAfter
+  } = useThemeTokens('Toast', tokens, variant)
+
+  if (!toast) {
+    return null
+  }
+
+  return (
+    <ToastContainer
+      containerBackgroundColor={containerBackgroundColor}
+      containerGap={containerGap}
+      animationHeightBefore={animationHeightBefore}
+      animationHeightAfter={animationHeightAfter}
+      animationPaddingBottomBefore={animationPaddingBottomBefore}
+      animationPaddingBottomAfter={animationPaddingBottomAfter}
+      animationPaddingTopBefore={animationPaddingTopBefore}
+      animationPaddingTopAfter={animationPaddingTopAfter}
+      animationBackgroundColorBefore={animationBackgroundColorBefore}
+      animationBackgroundColorAfter={animationBackgroundColorAfter}
+      animationColorBefore={animationColorBefore}
+      animationColorAfter={animationColorAfter}
+      animationFillColorBefore={animationFillColorBefore}
+      animationFillColorAfter={animationFillColorAfter}
+      {...selectProps(rest)}
+    >
+      {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}
+      <Typography variant={{ inverse: true }}>{copy}</Typography>
+      {link && (
+        <ChevronLink
+          variant={{ inverse: true }}
+          href={link.href}
+          LinkRouter={link.LinkRouter}
+          linkRouterProps={link.linkRouterProps}
+        >
+          {link.text}
+        </ChevronLink>
+      )}
+    </ToastContainer>
+  )
+}
+
+Toast.propTypes = {
+  ...selectedSystemPropTypes,
+  toast: PropTypes.bool,
+  copy: PropTypes.string.isRequired,
+  headline: PropTypes.string,
+  link: PropTypes.shape({
+    href: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
+  })
+}
+
+export default Toast

package/src/Toast/index.js

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

package/src/WaffleGrid/WaffleGrid.jsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {
+  Link,
+  responsiveProps,
+  selectSystemProps,
+  useResponsiveProp,
+  useThemeTokens,
+  withLinkRouter
+} from '@telus-uds/components-base'
+import OrderedListBase from '../OrderedList/OrderedListBase'
+import ItemBase from '../OrderedList/ItemBase'
+import Image from '../Image'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const DEFAULT_ROW_SIZE = { sm: 2, lg: 3, xl: 6 }
+
+const row = (rowSize, rowBorderSize) => ({
+  flexBasis: `calc(100% / ${rowSize})`,
+  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+    borderLeftWidth: `${rowBorderSize}px`
+  },
+  [`:nth-of-type(n+${rowSize + 1})`]: {
+    borderTopWidth: `${rowBorderSize}px`
+  }
+})
+
+const Container = styled(OrderedListBase)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-start'
+})
+
+const Item = styled(ItemBase)(({ rowSize, itemPadding, itemBorderColor, rowBorderWidth }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 0,
+  flexShrink: 0,
+  padding: `${itemPadding}px`,
+  boxSizing: 'border-box',
+  borderStyle: 'solid',
+  borderColor: itemBorderColor,
+  borderWidth: 0,
+  '& > a': {
+    alignSelf: 'center'
+  },
+  ...row(rowSize, rowBorderWidth)
+}))
+
+const Center = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center'
+})
+
+/**
+ * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
+ */
+const WaffleGrid = ({
+  items,
+  rowSize = DEFAULT_ROW_SIZE,
+  LinkRouter,
+  tokens,
+  variant,
+  linkRouterProps,
+  ...rest
+}) => {
+  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant)
+  const currentRowSize = useResponsiveProp(rowSize)
+
+  return (
+    <Container {...selectProps(rest)}>
+      {items.map((child) => (
+        <Item {...themeTokens} key={child.href} rowSize={currentRowSize}>
+          <Link
+            href={child.href}
+            variant={{ alternative: true }}
+            LinkRouter={child.LinkRouter || LinkRouter}
+            linkRouterProps={{ ...linkRouterProps, ...child.linkRouterProps }}
+          >
+            <Center>
+              {typeof child.image === 'string' ? (
+                // Assuming that string passed is the image URL
+                <Image src={child.image} alt={child.imageAltText} width={64} height={64} />
+              ) : (
+                // Otherwise it must be an arbitrary content, which we just display by itself
+                child.image
+              )}
+              <span>{child.text}</span>
+            </Center>
+          </Link>
+        </Item>
+      ))}
+    </Container>
+  )
+}
+
+WaffleGrid.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The image and the link to display. `items` should be an array of objects with the following keys:
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * The src attribute for the HTML img element or custom JSX content to render instead
+       */
+      image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      /**
+       * The alt attribute for the HTML img element (note that this is ignored if a custom
+       * JSX content is used instead of an image URL)
+       */
+      imageAltText: PropTypes.string,
+      /**
+       * The text displayed under the image
+       */
+      text: PropTypes.string,
+      /**
+       * Target URL
+       */
+      href: PropTypes.string,
+      ...withLinkRouter.propTypes
+    })
+  ).isRequired,
+  /**
+   * Row size, optionally depending on the viewport
+   */
+  rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+  ...withLinkRouter.propTypes
+}
+
+export default WaffleGrid

package/src/WaffleGrid/index.js

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

package/src/baseExports.js

@@ -31,7 +31,6 @@ export {
   InputLabel,
   InputSupports,
   Link,
-  Modal,
   MultiSelectFilter,
   Notification,
   Pagination,

package/src/index.js

@@ -1,9 +1,11 @@
 export { default as Badge } from './Badge'
+export { default as Modal } from './Modal'
 export { default as OrderedList } from './OrderedList'
 export { default as PreviewCard } from './PreviewCard'
 export { default as ResponsiveImage } from './ResponsiveImage'
 export { default as Ribbon } from './Ribbon'
 export { default as DatePicker } from './DatePicker'
+export { default as Paragraph } from './Paragraph'
 export { default as Span } from './Span'
 export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Callout } from './Callout'
@@ -11,5 +13,9 @@ export { default as PriceLockup } from './PriceLockup'
 export { default as Footnote } from './Footnote'
 export { transformGradient } from './utils'
 export { default as Breadcrumbs } from './Breadcrumbs'
+export { default as Toast } from './Toast'
+export { default as Table } from './Table'
+export { default as Image } from './Image'
+export { default as WaffleGrid } from './WaffleGrid'
 
 export * from './baseExports'

package/types/Cell.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs } from './common'
+
+export interface CellProps extends HTMLAttrs {
+  children?: ReactNode
+  type?: 'default' | 'heading' | 'subHeading' | 'rowHeading'
+  isFirstInRow?: boolean
+  align: 'left' | 'center' | 'right'
+}
+
+declare const Cell: ComponentType<CellProps>
+
+export default Cell

package/types/Table.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface TableProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+  text?: 'small' | 'medium'
+}
+
+declare const Table: ComponentType<TableProps>
+
+export default Table