Toujou Snackbar

The toujou snackbar element is a way to provide brief messages / acknowledgements to the user.

It may or may not require an action from the user.

We can customize the toujou-snackbar type ('auto' or 'action'), message, duration and button properties, and use it with one of the available variants (default. success, warning, error, info).

Installation

  npm install @toujou/toujou-snackbar

Events

toujou-add-snackbar event

The toujou-snackbar element is triggered via the toujou-add-snackbar custom event (which can be dispatch by any other elements). The toujou-add-snackbar event needs:

| Property | Type | Description | Accepted Values | Default | Required by | |----------|------|-------------|-----------------|---------|-------------| | message | String | Text that will be displayed in the snackbar | - | - | Always | | type | String | This defines if the snackbar needs action from the user of if is temporary | 'action', 'auto' | - | always | | buttonText | String | Defines the text on the button | - | 'OK' | action' | | duration | Number | Number of milliseconds to show the snackbar | - | 3000 | 'auto' | | variant | String | Name of variant to use | 'success', 'warning', 'error', 'info' | - | - |

Examples of toujou-add-snackbar custom events

'Auto' Snackbar.

'Auto' Snackbars are dismissed automatically after a certain amount of time. The suggested values are between 3 and 10 seconds.

const addSnackbarEvent = new CustomEvent('toujou-add-snackbar', {
   bubbles: true,
   composed: true,
   detail: {
      message: `welcome to the bonus page!`,
      type: 'auto',
      duration: 4000,
      variant: 'success'
   }
})

'Action' Snackbar.

'Action' Snackbars are not dismissed automatically. The user needs to take action to dismiss them.

const addSnackbarEvent = new CustomEvent('toujou-add-snackbar', {
   bubbles: true,
   composed: true,
   detail: {
      message: `Settings saved!`,
      type: 'action',
      buttonText: 'Dismiss'
   }
})

Custom CSS properties

We can style the toujou-snackbar element by using custom css properties

Style the toujou-snackbar element:

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-bg-color | Set background-color of the element | #2c2c2c | | --toujou-snackbar-border | Set border of the element | 1px solid --bg-color | | --toujou-snackbar-display | Set display of the element | flex | | --toujou-snackbar-width | Set width of the element | calc(100% - 2rem) | | --toujou-snackbar-max-width | Set max-width of the element | 640px | | --toujou-snackbar-position | Set position of the element | fixed | | --toujou-snackbar-bottom | Set bottom of the element | 1rem | | --toujou-snackbar-left | Set left of the element | 1rem | | --toujou-snackbar-padding | Set padding of the element | 1rem | | --toujou-snackbar-border-radius | Set border-radius of the element | .25rem | | --toujou-snackbar-z-index | Set z-index of the element | 100 | | --toujou-snackbar-transform | Set transform of the element | translateY(calc(100% - 1rem)) | | --toujou-snackbar-opacity | Set opacity of the element | 0 | | --toujou-snackbar-transition | Set transition of the element | all .25s ease-out |

Style the toujou-snackbar[visible]:

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-visible-transform | Set transform of the element with visible attribute | translateY(0) | | --toujou-snackbar-visible-opacity | Set opacity of the element with visible attribute | 1 |

Style the .snackbar__message inside the toujou-snackbar element

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-message-grow | Set flex-grow of the .snackbar__message | 1 | | --toujou-snackbar-message-color | Set color of the .snackbar__message | white | | --toujou-snackbar-message-margin | Set margin of the .snackbar__message | 0 | | --toujou-snackbar-message-padding | Set padding of the .snackbar__message | 0 1rem 0 0 |

Style the .snackbar__button inside the toujou-snackbar element

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-button-border | Set border of the .snackbar__button | none | | --toujou-snackbar-button-bg | Set background of the .snackbar__button | none | | --toujou-snackbar-button-font-size | Set font-size of the .snackbar__button | .875rem | | --toujou-snackbar-button-text-transform | Set text-transform of the .snackbar__button | uppercase | | --toujou-snackbar-button-color| Set color of the .snackbar__button | --primary-color | | --toujou-snackbar-button-margin | Set margin of the .snackbar__button | 0 | | --toujou-snackbar-button-outline | Set outline of the .snackbar__button | none |

Style the .snackbar__button:hover inside the toujou-snackbar element

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-button-hover-cursor | Set cursor of the .snackbar__button:hover | pointer | | --toujou-snackbar-button-hover-opacity | Set opacity of the .snackbar__button:hover | .75 |

Variants

The toujou-snackbar element has 5 variants: default, success, warning, error and info.

To choose the variant you want to use you just need to add the variant property to the toujou-add-snackbar custom event.

If there is no variant property, the default variant will be used.

Variant styles

You can also customize some variant styles using custom CSS variables.

Success Variant

Should be used to show a success message to the user, for instance a 'successfully saved' message.

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-success-border | Set border of the toujou-snackbar[success] | 1px solid --success-color | | --toujou-snackbar-success-message-color | Set color of the toujou-snackbar[success] .snackbar__message | --success-color | | --toujou-snackbar-success-button-color | Set color of the toujou-snackbar[success] .snackbar__button | white |

Warning Variant

Should be used to show a warning message to the user, for instance a 'your consent expires tomorrow' message

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-warning-border | Set border of the toujou-snackbar[warning] | 1px solid --warning-color | | --toujou-snackbar-warning-message-color | Set color of the toujou-snackbar[warning] .snackbar__message | --warning-color | | --toujou-snackbar-warning-button-color | Set color of the toujou-snackbar[warning] .snackbar__button | white |

Error Variant

Should be used to show an error message to the user, for instance 'there was an error while saving your settings' message

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-error-border | Set border of the toujou-snackbar[error] | 1px solid --error-color | | --toujou-snackbar-error-message-color | Set color of the toujou-snackbar[error] .snackbar__message | --error-color | | --toujou-snackbar-error-button-color | Set color of the toujou-snackbar[error] .snackbar__button | white |

Info Variant

Should be used to show an information message to the user, for instance 'there is a new update available'

| Property | Description | Default | |----------|-------------|---------| | --toujou-snackbar-info-border | Set border of the toujou-snackbar[info] | 1px solid #81d4fa | | --toujou-snackbar-info-message-color | Set color of the toujou-snackbar[info] .snackbar__message | #81d4fa | | --toujou-snackbar-info-button-color | Set color of the toujou-snackbar[info] .snackbar__button | white |