How to use @tds/shared-styles - 10 common examples

import Text from '@tds/core-text'

import { borders } from '@tds/shared-styles'

const dimensions = {
  bubbleTriggerSize: '24px',
  bubbleOffset: '7px',
  bubbleTriangleHeight: '10px',
  bubbleTriangleWidth: '7px',
  bubbleTrianglePosition: '12px', // bubbleTriangleWidth + 5
}

const BubbleStyle = styled(({ bubbleDimensions, direction, open, ...rest }) => (
  
)).attrs(({ id }) => ({ 'data-testid': 'bubble', id }))(
  borders.rounded,
  ({ bubbleDimensions, direction, open }) => ({
    ...{ display: open ? undefined : 'none' },
    position: 'absolute',
    bottom: `calc(100% + ${bubbleDimensions.bubbleTriangleHeight})`,
    backgroundColor: colorWhite,
    boxShadow: `0 0 2px 0 ${colorGreyShark}, 0 3px 2px 0 rgba(84, 89, 95, 0.25)`,

    ...{ right: direction === 'left' ? `-${bubbleDimensions.bubbleOffset}` : undefined },

    ...{
      left:
        direction === 'right'
          ? `calc(100% - ${bubbleDimensions.bubbleTriggerSize} - ${bubbleDimensions.bubbleOffset})`
          : undefined,
    },

import { deprecate } from '../../shared/utils/warn'

import Icon from '../../shared/components/Icon/Icon'

const mobileDeviceTapArea = 32 // https://www.w3.org/TR/mobile-accessibility-mapping/#touch-target-size-and-spacing
const touchAreaStyles = iconSize => {
  const length = (mobileDeviceTapArea - iconSize) / 2

  return {
    padding: `${length}px`,
    margin: `-${length}px`,
  }
}

const StandaloneIconClickable = styled.button(buttons.noStyle)

/**
 * @deprecated An icon that has meaning within the context of the page, which should be communicated to screen readers.
 *
 * @version ./package.json
 */
const StandaloneIcon = ({ symbol, variant, size, onClick, a11yText, innerRef, ...rest }) => {
  useEffect(() => {
    deprecate(
      '@tds/core-standalone-icon',
      'The StandaloneIcon component is deprecated. Please use a InteractiveIcon instead.'
    )
  }, [])
  const iconProps = {
    symbol,
    variant,

},
  ({ disabled }) => {
    if (disabled) {
      return {
        backgroundColor: colorGreyAthens,
        borderColor: 'transparent',
        '&:not(:focus)': {
          borderColor: 'transparent',
        },
      }
    }
    return {}
  }
)

const StyledFeedbackIcon = styled.div(position.absolute, {
  right: '1rem',
  top: '0.5rem',
  overflow: 'visible', // Prevents icon cut-off on Mobile Safari
})

const showFeedbackIcon = feedback => feedback === 'error' || feedback === 'success'
const renderHint = (hint, Component, id) => (
  
    {hint}
  
)
const renderError = (error, errorId) => (
  
    {error}
  
)

.replace('™', '\u2122')
    .replace('®', '\u00AE')
    .split('^^')
    .map((line, index) => {
      if (line === '') {
        return ''
      }
      if (index % 2 === 0) {
        return line
      }
      return <sup>{line}</sup>
    })
  return t
}

const HeaderButtonClickable = styled.button(buttons.noStyle, ({ panelDisabled }) =&gt; ({
  width: '100%',
  textAlign: 'left',
  ...(panelDisabled &amp;&amp; { background: colorGreyAthens, cursor: 'default' }),
}))

const CaretContainer = styled.div(({ isDisabled }) =&gt; ({
  ...(isDisabled &amp;&amp; { visibility: 'hidden' }),
}))

const HeaderContainer = styled.div(({ direction }) =&gt; ({
  display: 'flex',
  flexDirection: direction,
  flex: '1 1 auto',
  width: '100%',
  alignItems: 'flex-start',
}))

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import { borders } from '@tds/shared-styles'
import { safeRest } from '@tds/util-helpers'

import { warn } from '../../shared/utils/warn'

const StyledImage = styled.img({
  height: 'auto',
  maxWidth: '100%',
})
const StyledRoundedImage = styled(StyledImage)(borders.rounded)
const StyledCircularImage = styled(StyledImage)(borders.circular)

/**
 * @version ./package.json
 */
const Image = ({ src, width, height, alt, rounded, ...rest }) => {
  const isCircle = rounded === 'circle'
  const isCorners = rounded === 'corners'
  const isSquare = width === height

  if (isCircle && !isSquare) {
    warn(
      'Image',
      'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.'
    )
  }

textOverflow: 'ellipsis',
    borderColor: colorGreyShuttle,
    backgroundColor: colorWhite,

    '&::placeholder': {
      font: 'inherit',
      letterSpacing: 'inherit',
      lineHeight: 'inherit',
      color: colorGreyShuttle,
    },
  },
  ({ showFeedbackIcon }) => ({
    padding: `0.5rem ${showFeedbackIcon ? '4' : '3'}rem 0.5rem 1rem`,
  }),
  borders.thin,
  borders.rounded,
  forms.font,
  medium,
  mediumFont,
  color,
  ({ withFeedbackIcon }) => ({
    '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
      appearance: 'none',
      margin: 0,
    },
    '-moz-appearance': 'textfield',
    minHeight: forms.inputHeight.height,
    maxHeight: forms.inputHeight.height,
    padding: withFeedbackIcon ? '0.5rem 4rem 0.5rem 1rem' : '0.5rem 3rem 0.5rem 1rem',
  }),
  {
    '&:focus': {

})
const StyledInput = styled.input({
  position: 'fixed',
  opacity: '0',
  '&:checked ~ label': {
    backgroundColor: colorTelusPurple,
    boxShadow: `0px 0px 0px 0px ${colorTelusPurple}`,
    color: colorWhite,
  },
  '&:focus ~ label': {
    boxShadow: `0px 0px 0px 2px ${colorTelusPurple}, 0px 0px 8px 1px ${colorTelusPurple}`,
  },
})
const StyledLabel = styled.label(
  borders.none,
  borders.rounded,
  medium,
  boldFont,
  forms.buttonHeight,
  forms.font,
  baseButton,
  {
    transition: 'background 0.2s, color 0.2s, box-shadow 0.2s',
    backgroundColor: colorWhite,
    boxShadow: `0px 0px 0px 1px ${colorTelusPurple}`,
    color: colorTelusPurple,
    whiteSpace: 'nowrap',
    minWidth: '136px',
    '&:hover': {
      backgroundColor: colorWhite,
      color: colorTelusPurple,
      boxShadow: `0px 0px 0px 2px ${colorTelusPurple}, 0px 0px 8px 1px ${colorTelusPurple}`,

const StyledInput = styled.input(
  {
    width: '100%',
    margin: 0,
    outline: 0,
    textOverflow: 'ellipsis',
    borderColor: colorGreyShuttle,
    '&::placeholder': {
      font: 'inherit',
      letterSpacing: 'inherit',
      lineHeight: 'inherit',
      color: colorGreyShuttle,
    },
  },
  borders.thin,
  borders.rounded,
  forms.font,
  medium,
  mediumFont,
  color,
  ({ withFeedbackIcon }) => ({
    '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
      appearance: 'none',
      margin: 0,
    },
    '-moz-appearance': 'textfield',
    minHeight: forms.inputHeight.height,
    maxHeight: forms.inputHeight.height,
    padding: withFeedbackIcon ? '0.5rem 3rem 0.5rem 1rem' : '0.5rem 1rem',
  }),
  {
    '&:focus': {

transition: 'background 0.2s',
  display: 'flex',
  width: '100%',
  alignItems: 'center',
  justifyContent: 'center',

  ...media.from('md').css({
    display: 'inline-flex',
    width: 'auto',
    minWidth: '180px',
  }),
}

export const StyledButton = styled.button(
  borders.none,
  borders.rounded,
  medium,
  boldFont,
  forms.buttonHeight,
  forms.font,
  baseButton,
  ({ variant }) => {
    let backgroundColor
    let color
    const hover = {
      boxShadow: '0 0 0 1px',
    }

    if (variant === 'primary') {
      backgroundColor = colorPrimary
      color = colorWhite
      hover.backgroundColor = colorWhite

minHeight: '1.25rem',
  minWidth: '1.25rem',

  outline: 0,
  lineHeight: 0,

  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  cursor: 'pointer',

  marginTop: '0.125rem',

  transition: 'border-color 0.1s linear, background-color 0.1s linear',
  ...borders.thin,
  ...borders.rounded,

  borderColor: colorGreyShuttle,
  backgroundColor: colorWhite,
  '& > i': {
    display: 'none',
  },
})
const HiddenInput = styled.input({
  position: 'fixed',
  opacity: '0',
  pointerEvents: 'none',
})

const StyledLabel = styled.label(({ isError }) => ({
  display: 'flex',
  cursor: 'pointer',