# All files / src/Toast Toast.tsx

100% Statements 22/22
100% Branches 7/7
100% Functions 3/3
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    1072x
    2x
    2x
    2x

    2x

    2x
    2x
    2x

    2x
    2x
    2x
    2x

    2x

    4x
    4x

    2x
    2x
    2x

    2x

     import { Check, Clear, Error } from '@procore/core-icons'
    import React from 'react'
    import { useI18nContext } from '../_hooks/I18n'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import {
      ButtonAttributes,
      DivAttributes,
      Props,
      SpanAttributes,
    } from '../_utils/types'
    import { StyledToast, StyledToastButton, StyledToastText } from './Toast.styles'
    import { ToastProps } from './Toast.types'

    /**
     * Toasts are concise and are written in sentence case with punctuation.
     * Toasts have a suggested character count limit of 65.

      @since 11.12.0
     */
    const Text = React.forwardRef<HTMLSpanElement, SpanAttributes & Props>(
      function Label({ children, ...props }, ref) {
        return (
          <StyledToastText
            aria-live="assertive"
            aria-atomic="true"
            ref={ref}
            {...props}
          >
            {children}
          </StyledToastText>
        )
      }
    )

    /**
     Button to dismiss/close/hide the Toast. For accessible 'enough time' patterns,
     Toasts can be extended and have an action to dismiss the Toast. Otherwise,
     Toasts do not present the user with an action. If an action needs to be performed
     because of the particular message, use a banner.

     @since 11.12.0

     */
    const Dismiss = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(
      function ToastDismiss({ ...props }, ref) {
        const I18n = useI18nContext()
        return (
          <StyledToastButton
            ref={ref}
            variant="tertiary"
            aria-hidden="false"
            aria-label={I18n.t('core.toast.a11y.dismiss')}
            {...props}
          >
            <Clear />
          </StyledToastButton>
        )
      }
    )

    /**

     We use toasts to temporarily display information to a user. For example,
     as a confirmation that an action was successfully or unsuccessfully completed.

     Toasts do not present the user with an action. If an action needs to be
     performed because of the particular message, use a banner. However, for
     accessible 'enough time' patterns, Toasts can be extended and can have
     an action to dismiss the Toast.

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-toast--demo)

     @see [Design Guidelines](https://design.procore.com/toast)

     */
    export const Toast_ = React.forwardRef<
      HTMLDivElement,
      DivAttributes & ToastProps
    >(function Toast({ children, variant, ...props }, ref) {
      return (
        <StyledToast {...props} $variant={variant} ref={ref}>
          {variant === 'success' ? <Check size="lg" /> : <Error size="lg" />}
          {typeof children === 'string' ||
          (children && typeof (children as Array<unknown>)[0] === 'string') ? (
            // legacy path automates and wraps direct text with the subcomponent
            <StyledToastText $legacy>{children}</StyledToastText>
          ) : (
            children
          )}
        </StyledToast>
      )
    })

    Toast_.displayName = 'Toast'
    Dismiss.displayName = 'Toast.Dismiss'
    Text.displayName = 'Toast.Text'

    export const Toast = addSubcomponents(
      {
        Dismiss,
        Text,
      },
      Toast_
    )