@telus-uds/components-web 1.1.0 → 1.3.0

package/src/OrderedList/OrderedList.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { selectSystemProps } from '@telus-uds/components-base'
+import { htmlAttrs } from '../utils'
+import OrderedListBase from './OrderedListBase'
+import Item from './Item'
+import { OL_COUNTER_NAME } from './constants'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
+  // Using CSS counters here to have better control over the number styling
+  listStyle: 'none',
+  counterReset: `${OL_COUNTER_NAME} ${start - 1}`
+}))
+
+/**
+ * Themed semantic ordered list.
+ */
+const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  // Pass any variants "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = variant
+    ? children.map((child) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        return {
+          ...child,
+          props: {
+            ...child.props,
+            variant: {
+              ...existingChildVariants,
+              ...variant
+            }
+          }
+        }
+      })
+    : children
+  return (
+    <StyledOrderedListBase {...selectProps(rest)} ref={ref} start={start}>
+      {childrenWithParentVariants}
+    </StyledOrderedListBase>
+  )
+})
+OrderedList.displayName = 'OrderedList'
+
+OrderedList.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+OrderedList.defaultProps = { start: 1 }
+
+OrderedList.Item = Item
+
+export default OrderedList

package/src/OrderedList/OrderedListBase.jsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import ItemBase from './ItemBase'
+
+const StyledList = styled.ol({
+  display: 'flex',
+  flexDirection: 'column',
+  listStylePosition: 'inside',
+  margin: 0,
+  padding: 0
+})
+
+/**
+ * Semantic ordered list.
+ */
+const OrderedListBase = forwardRef(({ children, start, ...rest }, ref) => (
+  <StyledList {...rest} ref={ref} start={start}>
+    {children}
+  </StyledList>
+))
+OrderedListBase.displayName = 'OrderedList'
+
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+OrderedListBase.defaultProps = { start: 1 }
+
+OrderedListBase.Item = ItemBase
+
+export default OrderedListBase

package/src/OrderedList/constants.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const OL_COUNTER_NAME = 'allium-ordered-list-counter'

package/src/OrderedList/index.js

@@ -0,0 +1,6 @@
+import OrderedList from './OrderedList'
+import Item from './Item'
+
+OrderedList.Item = Item
+
+export default OrderedList

package/src/Ribbon/Ribbon.jsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'
+// import palette from '@telus-uds/palette-allium/build/web/palette'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const RibbonWrapper = styled.div`
+  width: fit-content;
+  position: ${({ left, top }) => (left ?? top ? 'absolute' : 'relative')};
+  z-index: 1;
+  left: ${({ left }) => left && `${left}px`};
+  top: ${({ top }) => top && `${top}px`};
+`
+
+const RibbonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  background: ${({ backgroundColor }) => backgroundColor};
+  padding: ${({ padding }) => `${padding}`};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  width: fit-content;
+  box-shadow: ${({ boxShadow, shouldWrap }) => shouldWrap && boxShadow};
+`
+
+const RibbonCurve = styled.div`
+  background: ${({ curveBackgroundColor }) => curveBackgroundColor};
+  width: ${({ curveWidth }) => curveWidth};
+  height: ${({ curveHeight }) => curveHeight};
+  margin-top: -${({ curveMarginTop }) => curveMarginTop};
+  border-radius: 0 0 0 100%;
+  position: relative;
+  z-index: -1;
+  &::after {
+    content: '';
+    border-bottom-left-radius: ${({ curveAfterRadius }) => curveAfterRadius};
+    position: absolute;
+    height: ${({ curveAfterHeight }) => curveAfterHeight};
+    background: ${({ curveAfterBackgroundColor }) => curveAfterBackgroundColor};
+    width: ${({ curveAfterWidth }) => curveAfterWidth};
+  }
+`
+
+const Ribbon = ({
+  children,
+  tokens,
+  wrap: shouldWrap = false,
+  left,
+  top,
+  variant = {},
+  ...rest
+}) => {
+  const {
+    backgroundColor,
+    borderRadius,
+    boxShadowPaddingBottom,
+    boxShadowPaddingLeft,
+    boxShadowPaddingRight,
+    boxShadowPaddingTop,
+    boxShadowColor,
+    curveAfterBackgroundColor,
+    curveAfterHeight,
+    curveAfterWidth,
+    curveBackgroundColor,
+    curveHeight,
+    curveAfterRadius,
+    curveWidth,
+    curveMarginTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    gradient
+  } = useThemeTokens('Ribbon', tokens, variant)
+
+  const { purpose } = variant
+  const { type: gradientType, angle: gradientAngle, stops: gradientColors } = gradient
+  const isOfferPurpose = purpose === 'offer'
+  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`
+  const background = isOfferPurpose ? gradientBackground : backgroundColor
+
+  return (
+    <RibbonWrapper left={left} top={top} data-testid="ribbon-wrapper" {...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}`}
+      >
+        <Typography variant={{ size: 'micro', bold: true, inverse: true }}>{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}
+        />
+      )}
+    </RibbonWrapper>
+  )
+}
+
+Ribbon.propTypes = {
+  ...selectedSystemPropTypes,
+  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/Ribbon/index.js

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

package/src/index.js

@@ -1,4 +1,6 @@
 export { default as Badge } from './Badge'
+export { default as OrderedList } from './OrderedList'
+export { default as Ribbon } from './Ribbon'
 export { transformGradient } from './utils'
 
 export * from './baseExports'

package/types/Ribbon.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface RibbonProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+  left: Boolean
+  top: Boolean
+  wrap: Boolean
+}
+
+declare const Ribbon: ComponentType<RibbonProps>
+
+export default Ribbon