{{#> web/layout/default title="Toast" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Static Toast</h2>

    <div class="docs-Stack">

      <!-- Toast show and hide demo: start -->
      <fieldset id="toast-in-dom-toggle" class="mb-0" style="border: 0;">
        <legend class="mb-500">Show hidden toast in the DOM:</legend>
        <button
          class="Button Button--medium Button--primary"
          data-spirit-toggle="toast"
          data-spirit-target="#my-hidden-dismissible-toast"
          onclick="this.setAttribute('disabled', 'disabled')"
          aria-expanded="false"
        >
          Show
        </button>
      </fieldset>
      <!-- Toast show and hide demo: end -->

      <div class="Toast Toast--top Toast--center" role="log">
        <div class="Toast__queue">

          <div id="my-hidden-dismissible-toast" class="ToastBar ToastBar--warning ToastBar--dismissible is-hidden">
            <div class="ToastBar__box">
              <div class="ToastBar__container">
                <svg width="20" height="20" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
                </svg>
                <div class="ToastBar__content">
                  <div class="text-truncate-multiline">I was hidden and you exposed me!</div>
                </div>
              </div>
              <button
                type="button"
                class="ToastBar__close"
                data-spirit-dismiss="toast"
                data-spirit-target="#my-hidden-dismissible-toast"
                aria-controls="my-hidden-dismissible-toast"
                aria-expanded="true"
              >
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
                </svg>
                <span class="accessibility-hidden">Close</span>
              </button>
            </div>
          </div>

        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Dynamic Toast Queue</h2>

    <div class="docs-Stack">

      <!-- Toast alignment demo: start -->
      <script>
        const setToastAlignmentX = (event, selector) => {
          const toastElement = document.querySelector(selector);

          toastElement.classList.remove('Toast--left', 'Toast--center', 'Toast--right');
          toastElement.classList.add(`Toast--${event.target.value}`);
        };

        const setToastAlignmentY = (event, selector) => {
          const toastElement = document.querySelector(selector);

          toastElement.classList.remove('Toast--top', 'Toast--bottom');
          toastElement.classList.add(`Toast--${event.target.value}`);
        };

        const setToastCollapsing = (event, selector) => {
          const toastElement = document.querySelector(selector);

          toastElement.classList.toggle('Toast--collapsible');
        };
      </script>

      <form>
        <fieldset onchange="setToastCollapsing(event, '#toast-example')" style="border: 0;">
          <label for="toast-is-collapsible" class="Checkbox">
            <input type="checkbox" id="toast-is-collapsible" class="Checkbox__input" name="is-collapsible"
                   autocomplete="off" checked/>
            <span class="Checkbox__text">
            <span class="Checkbox__label">Collapsible</span>
          </span>
          </label>
        </fieldset>
        <fieldset onchange="setToastAlignmentY(event, '#toast-example')" style="border: 0;">
          <legend>Vertical alignment:</legend>
          <label for="toast-alignment-top" class="Radio mr-600">
            <input type="radio" id="toast-alignment-top" name="toast-alignment-y" value="top" class="Radio__input"
                   autocomplete="off"/>
            <span class="Radio__text">
            <span class="Radio__label">Top</span>
          </span>
          </label>
          <label for="toast-alignment-bottom" class="Radio mr-600">
            <input type="radio" id="toast-alignment-bottom" name="toast-alignment-y" value="bottom" class="Radio__input"
                   autocomplete="off" checked/>
            <span class="Radio__text">
            <span class="Radio__label">Bottom</span>
          </span>
          </label>
        </fieldset>
        <fieldset onchange="setToastAlignmentX(event, '#toast-example')" style="border: 0;">
          <legend>Horizontal alignment:</legend>
          <label for="toast-alignment-left" class="Radio mr-600">
            <input type="radio" id="toast-alignment-left" name="toast-alignment-x" value="left" class="Radio__input"
                   autocomplete="off"/>
            <span class="Radio__text">
            <span class="Radio__label">Left</span>
          </span>
          </label>
          <label for="toast-alignment-center" class="Radio mr-600">
            <input type="radio" id="toast-alignment-center" name="toast-alignment-x" value="center" class="Radio__input"
                   autocomplete="off" checked/>
            <span class="Radio__text">
            <span class="Radio__label">Center</span>
          </span>
          </label>
          <label for="toast-alignment-right" class="Radio mr-600">
            <input type="radio" id="toast-alignment-right" name="toast-alignment-x" value="right" class="Radio__input"
                   autocomplete="off"/>
            <span class="Radio__text">
            <span class="Radio__label">Right</span>
          </span>
          </label>
        </fieldset>
      </form>
      <!-- Toast alignment demo: end -->

      <!-- Dynamic queue demo: start -->
      <script type="module">
        import {addDynamicToast, clearQueue} from './dynamic-toast.mjs';

        window.addDynamicToast = addDynamicToast;
        window.clearQueue = clearQueue;

        // Disable interval field if auto close is not checked.
        const autoCloseIntervalField = document.getElementById('toast-auto-close-interval');
        const enableAutoCloseCheckbox = document.getElementById('toast-enable-auto-close');

        enableAutoCloseCheckbox.addEventListener('change', (event) => {
          autoCloseIntervalField.disabled = !event.target.checked;
        });

        // Initialize the field state.
        autoCloseIntervalField.disabled = !enableAutoCloseCheckbox.checked;

        // Disable link props fields if enable link is not checked.
        const linkField = document.getElementById('toast-link');
        const enableLinkFieldCheckbox = document.getElementById('toast-enable-link');

        enableLinkFieldCheckbox.addEventListener('change', (event) => {
          linkField.disabled = !event.target.checked;
        });

        // Initialize the field state.
        linkField.disabled = !enableLinkFieldCheckbox.checked;
      </script>

      <form>
        <fieldset style="border: 0;">
          <legend class="mb-500">New Toast:</legend>
          <div class="Stack Stack--hasSpacing">
            <div class="Select">
              <label for="toast-color" class="Select__label">Color</label>
              <div class="Select__inputContainer">
                <select id="toast-color" name="color" class="Select__input" autocomplete="off">
                  <option value="neutral">Neutral</option>
                  <option value="success">Success</option>
                  <option value="warning">Warning</option>
                  <option value="danger">Danger</option>
                  <option value="informative">Informative</option>
                </select>
                <div class="Select__icon">
                  <svg width="24" height="24" aria-hidden="true">
                    <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
                  </svg>
                </div>
              </div>
            </div>
            <label for="toast-has-icon" class="Checkbox">
              <input type="checkbox" id="toast-has-icon" class="Checkbox__input" name="is-dismissible" autocomplete="off"
                     checked/>
              <span class="Checkbox__text">
              <span class="Checkbox__label">Has icon</span>
            </span>
            </label>
            <label for="toast-is-dismissible" class="Checkbox">
              <input type="checkbox" id="toast-is-dismissible" class="Checkbox__input" name="is-dismissible"
                     autocomplete="off" checked/>
              <span class="Checkbox__text">
              <span class="Checkbox__label">Dismissible</span>
            </span>
            </label>
            <label for="toast-enable-auto-close" class="Checkbox">
              <input type="checkbox" id="toast-enable-auto-close" class="Checkbox__input" name="enable-auto-close"
                     autocomplete="off" checked/>
              <span class="Checkbox__text">
              <span class="Checkbox__label">Enable AutoClose</span>
            </span>
            </label>
            <div class="TextField">
              <label for="toast-auto-close-interval" class="TextField__label">AutoClose interval (ms)</label>
              <input type="number" min="0" max="60000" step="500" value="3000" id="toast-auto-close-interval"
                     name="auto-close-interval" class="TextField__input"/>
            </div>
            <div class="TextArea">
              <label for="toast-message" class="TextArea__label">Message</label>
              <textarea id="toast-message" class="TextArea__input"
                        autocomplete="off">This is a new toast message.</textarea>
              <div class="TextArea__helperText">Can contain HTML.</div>
            </div>
            <label for="toast-enable-link" class="Checkbox">
              <input type="checkbox" id="toast-enable-link" class="Checkbox__input" name="enable-link" autocomplete="off"
                     checked/>
              <span class="Checkbox__text">
              <span class="Checkbox__label">Add link</span>
            </span>
            </label>
            <div class="TextArea">
              <label for="toast-link" class="TextArea__label">Link</label>
              <textarea id="toast-link" class="TextArea__input" autocomplete="off">This is a toast link.</textarea>
              <div class="TextArea__helperText">Can contain HTML.</div>
            </div>
            <div>
              <button
                type="button"
                class="Button Button--medium Button--primary"
                onclick="addDynamicToast(event, 'toast-example');"
              >
                Add
              </button>
              <button
                type="button"
                class="Button Button--medium Button--secondary"
                onclick="clearQueue(event, 'toast-example')"
              >
                Clear queue
              </button>
            </div>
          </div>
        </fieldset>
      </form>
      <!-- Dynamic queue demo: end -->

      <!-- Toast and virtual keyboard demo: start -->
      <script>
        // Experimental, Chrome 94+ on Android only:
        // Enable CSS to detect the presence of virtual keyboard.
        if ('virtualKeyboard' in navigator) {
          navigator.virtualKeyboard.overlaysContent = true;
        }
      </script>
      <form>
        <fieldset style="border: 0;">
          <legend class="mb-500">Virtual keyboard interaction:</legend>
          <div class="TextField">
            <label for="text-field-for-focus" class="TextField__label">In Chrome on Android, tap into this text field to
              see how Toast position updates:</label>
            <input type="text" id="text-field-for-focus" class="TextField__input" name="default" placeholder="Tap here!"/>
          </div>
        </fieldset>
      </form>
      <!-- Toast and virtual keyboard demo: end -->

      <div id="toast-example" class="Toast Toast--bottom Toast--center Toast--collapsible" role="log">
        <div class="Toast__queue" data-spirit-element="toast-queue">

          <template data-spirit-snippet="item">
            <div class="ToastBar is-hidden" data-spirit-color="neutral" data-spirit-populate-field="item">
              <div class="ToastBar__box">
                <div class="ToastBar__container">
                  <svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
                    <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
                  </svg>
                  <div class="ToastBar__content">
                    <div class="text-truncate-multiline" data-spirit-populate-field="message"></div>
                    <a class="ToastBar__link" data-spirit-populate-field="link"></a>
                  </div>
                </div>
                <button
                  type="button"
                  class="ToastBar__close"
                  data-spirit-populate-field="close-button"
                  data-spirit-dismiss="toast"
                  aria-expanded="true"
                >
                  <svg width="24" height="24" aria-hidden="true">
                    <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
                  </svg>
                  <span class="accessibility-hidden">Close</span>
                </button>
              </div>
            </div>
          </template>

          <div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible is-visible">
            <div class="ToastBar__box">
              <div class="ToastBar__container">
                <svg width="20" height="20" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#check-plain"/>
                </svg>
                <div class="ToastBar__content">
                  <div class="text-truncate-multiline">I was first!</div>
                  <a href="#" class="ToastBar__link link-underlined">Action</a>
                </div>
              </div>
              <button
                type="button"
                class="ToastBar__close"
                data-spirit-dismiss="toast"
                data-spirit-target="#my-dismissible-toast"
                aria-controls="my-dismissible-toast"
                aria-expanded="true"
              >
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
                </svg>
                <span class="accessibility-hidden">Close</span>
              </button>
            </div>
          </div>

          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible is-visible">
            <div class="ToastBar__box">
              <div class="ToastBar__container">
                <svg width="20" height="20" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
                </svg>
                <div class="ToastBar__content">
                  <div class="text-truncate-multiline">I appeared later. This toast has a long message that wraps
                    automatically.
                  </div>
                  <a href="#" class="ToastBar__link link-underlined">Action</a>
                </div>
              </div>
              <button
                type="button"
                class="ToastBar__close"
                data-spirit-dismiss="toast"
                data-spirit-target="#my-other-dismissible-toast"
                aria-controls="my-other-dismissible-toast"
                aria-expanded="true"
              >
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
                </svg>
                <span class="accessibility-hidden">Close</span>
              </button>
            </div>

          </div>

        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Content Variations</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="ToastBar ToastBar--neutral">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Message only</div>
            </div>
          </div>
        </div>
      </div>

      <div class="ToastBar ToastBar--neutral">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Message with action</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
        </div>
      </div>

      <div class="ToastBar ToastBar--neutral">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">When the text is long and reaches the maximum width limit, the action
                automatically wraps to the next line.
              </div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
        </div>
      </div>

      <div class="ToastBar ToastBar--neutral">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Message with icon and action</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
        </div>
      </div>

      <div id="my-toast-variation-dismissible" class="ToastBar ToastBar--neutral ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Dismissible message</div>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-variation-dismissible"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

      <div id="my-toast-variation-dismissible-with-icon-and-action"
           class="ToastBar ToastBar--neutral ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#download"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Dismissible message with custom icon and action</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-variation-dismissible-with-icon-and-action"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Colors</h2>

    <div class="docs-Stack docs-Stack--start">

      <div id="my-toast-color-neutral" class="ToastBar ToastBar--neutral ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Neutral</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-color-neutral"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

      <div id="my-toast-color-informative" class="ToastBar ToastBar--informative ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Informative</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-color-informative"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

      <div id="my-toast-color-success" class="ToastBar ToastBar--success ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#check-plain"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Success</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-color-success"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

      <div id="my-toast-color-warning" class="ToastBar ToastBar--warning ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Warning</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-color-warning"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

      <div id="my-toast-color-danger" class="ToastBar ToastBar--danger ToastBar--dismissible">
        <div class="ToastBar__box">
          <div class="ToastBar__container">
            <svg width="20" height="20" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#danger"/>
            </svg>
            <div class="ToastBar__content">
              <div class="text-truncate-multiline">Danger</div>
              <a href="#" class="ToastBar__link link-underlined">Action</a>
            </div>
          </div>
          <button
            type="button"
            class="ToastBar__close"
            data-spirit-dismiss="toast"
            aria-controls="my-toast-color-danger"
            aria-expanded="true"
          >
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
            </svg>
            <span class="accessibility-hidden">Close</span>
          </button>
        </div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default}}