@toujou/toujou-snackbar

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

add-snackbar event

The toujou-snackbar element is triggered via the add-snackbar custom event (which can be dispatch by any other elements). The 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 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('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('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 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