Back to Toast-guidelines

Web ComponentThe latest version of this package is: 0.6.9, Opens in new window

Webcomponent for Toast Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-wc/toast@0.6.9

Table of Contents

Usage

The <ids-toast>-webcomponent operates as a factory for toasts to be displayed. Use events to trigger toasts.

With the given markup:

<ids-toast></ids-toast>
<script src="…toast-webcomponent.iife.js"></script>

And the event:

const _dispatchToastEvent = ({ ...args }) => {
  const _event = new CustomEvent('ids:toast', {
    bubbles: !0,
    detail: {
      payload: { ...args },
    },
  });
  document.dispatchEvent(_event);
};

_dispatchToastEvent({
  target: e.target,
  toggle: () => {
    console.info('toggle');
  },
  message: 'Short message',
  type: 'info|success|warning|error',
  icon: true || false,
  action: () => {
    console.info('action');
  },
  actionText: 'Undo',
  close: () => {
    console.info('close');
  },
});

Options: Object

Name Type Default Mandatory?
target Element Element the toast is initiated from No
toggle Function A callback to be used when the toast is toggled No
message String The mssage to display Yes
type String Type of toast No
icon Boolean Use icon? No
action Function A callback to be used when the action is used No
actionText String Text of the action button Only if a callback for action is given
close Function A callback to be used when the toast is closing No

Api

IDSToast

Kind:

global class

new IDSToast()

This Webcomponent is to be included on the page where you want to have toasts. An CustomEvent is fired, and an appropriate toast is displayed.

Example

// Example usage with the CustomEvent
     const _dispatchToastEvent = ({ ...args }) => {
       const _event = new CustomEvent('ids:toast', {
         bubbles: !0,
         detail: {
           payload: { ...args }
         }
       });
       document.dispatchEvent(_event);
     };

     _dispatchToastEvent({
       target: e.target,
       toggle: () => {
         console.info('toggle');
       },
       message: 'Short message',
       type: 'info|success|warning|error',
       icon: true || false,
       action: () => {
         console.info('action');
       },
       actionText: 'Undo',
       close: () => {
         console.info('close');
       }
     });

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.3.7 (2022-03-09)

Miscellaneous chores

0.3.6 (2022-03-09)

Miscellaneous chores

0.3.5 (2022-03-08)

Miscellaneous chores

0.3.4 (2021-11-10)

Miscellaneous chores

  • Manually testing inclusion of CHANGELOG.md (f91eb76)

0.3.0 (2021-11-10)

Miscellaneous chores

0.2.3 (2021-10-28)

Documentation Updates

Miscellaneous chores

  • reinstall (0f764a7)

  • update after change of navigational structure (e8962a1)

0.2.1 (2021-10-14)

Miscellaneous chores

  • 🤖 Update dependencies (079ff16)

0.2.0 (2021-10-14)

Miscellaneous chores

  • 🤖 Update dependencies (a99466e)

0.1.0 (2021-10-01)

⚠ BREAKING CHANGES

  • 🧨 We are now serving IIFE files instead of UMD, for a better dev

experience when including scripts with script-tag

  • 🧨 All webcomponent versions has been reset, due to new scope; @ids-wc

✅ Closes: 467386

Bug Fixes

  • 🐛 Rename required file to use IIFE, escape correctly (dff7a27)

  • 🐛 Use correct package for import after scope rename (3c819bd), closes #467386

Documentation Updates

  • ✏️ Add and update docs for webcomponents (18f4342), closes #467386

Miscellaneous chores

  • 🤖 Remove babel, no longer required (9f6497c)

  • 🤖 Remove unneeded rc files (fdcac58)

  • 🤖 Remove usage of .npmignore, use files-prop instead (8b7c55e)

  • 🤖 Reset CHANGELOG.md files (bf1ef63)

  • 🤖 Reset versions for webcomponents, due to new scope (f540b01)

  • 🤖 Set correct output name (98da4f6)

  • 🤖 Update prettier rc files (7d0e3c9)

  • 🤖 Use correct dependencies after renaming of scope (38aba43), closes #467386

  • 🤖 Use iife instead of umd (ae0ebcc)

  • bootstrap (420cc99)

  • initial commit (8d74b20)

  • use correct import path (1fff2cb)

Contact us, Opens in new window