From ba0ed0b594329cec7038d1c88a834416f9bcff8a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 20 Mar 2022 08:18:36 -0700
Subject: [PATCH] breaking: remove deprecated components

---
 src/Icon/Icon.svelte                          |  41 ----
 src/Icon/IconSkeleton.svelte                  |  19 --
 src/Icon/index.js                             |   2 -
 .../NotificationTextDetails.svelte            |  37 ---
 src/Notification/index.js                     |   1 -
 src/ToggleSmall/ToggleSmall.svelte            |  86 -------
 src/ToggleSmall/ToggleSmallSkeleton.svelte    |  54 -----
 src/ToggleSmall/index.js                      |   2 -
 .../GlobalHeader/HeaderActionSearch.svelte    | 220 ------------------
 src/UIShell/index.js                          |   1 -
 src/UIShell/searchStore.js                    |  58 -----
 src/index.js                                  |   4 -
 12 files changed, 525 deletions(-)
 delete mode 100644 src/Icon/Icon.svelte
 delete mode 100644 src/Icon/IconSkeleton.svelte
 delete mode 100644 src/Icon/index.js
 delete mode 100644 src/Notification/NotificationTextDetails.svelte
 delete mode 100644 src/ToggleSmall/ToggleSmall.svelte
 delete mode 100644 src/ToggleSmall/ToggleSmallSkeleton.svelte
 delete mode 100644 src/ToggleSmall/index.js
 delete mode 100644 src/UIShell/GlobalHeader/HeaderActionSearch.svelte
 delete mode 100644 src/UIShell/searchStore.js

diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte
deleted file mode 100644
index 0726a79a..00000000
--- a/src/Icon/Icon.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  /**
-   * @extends {"./IconSkeleton.svelte"} IconSkeletonProps
-   * @restProps {svg}
-   */
-
-  /**
-   * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
-   */
-  export let render = undefined;
-
-  /** Set to `true` to display the skeleton state */
-  export let skeleton = false;
-
-  import IconSkeleton from "./IconSkeleton.svelte";
-</script>
-
-<!-- @component
-@deprecated This component is deprecated.
-Use icons from "carbon-icons-svelte" instead.
--->
-
-{#if skeleton}
-  <IconSkeleton
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-  />
-{:else}
-  <svelte:component
-    this="{render}"
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-  />
-{/if}
diff --git a/src/Icon/IconSkeleton.svelte b/src/Icon/IconSkeleton.svelte
deleted file mode 100644
index bb65630a..00000000
--- a/src/Icon/IconSkeleton.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  /** Set the size of the icon */
-  export let size = 16;
-</script>
-
-<!-- @component
-@deprecated This component is deprecated.
--->
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div
-  class:bx--icon--skeleton="{true}"
-  {...$$restProps}
-  style="{$$restProps.style}; width: {size}px; height: {size}px"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-></div>
diff --git a/src/Icon/index.js b/src/Icon/index.js
deleted file mode 100644
index 551efcd3..00000000
--- a/src/Icon/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Icon } from "./Icon.svelte";
-export { default as IconSkeleton } from "./IconSkeleton.svelte";
diff --git a/src/Notification/NotificationTextDetails.svelte b/src/Notification/NotificationTextDetails.svelte
deleted file mode 100644
index a2d96980..00000000
--- a/src/Notification/NotificationTextDetails.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  /**
-   * Set the type of notification
-   * @type {"toast" | "inline"}
-   */
-  export let notificationType = "toast";
-
-  /** Specify the title text */
-  export let title = "Title";
-
-  /** Specify the subtitle text */
-  export let subtitle = "";
-
-  /** Specify the caption text */
-  export let caption = "Caption";
-</script>
-
-<!-- @component
-@deprecated This component is deprecated.
--->
-
-{#if notificationType === "toast"}
-  <div class:bx--toast-notification__details="{true}">
-    <h3 class:bx--toast-notification__title="{true}">{title}</h3>
-    <div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
-    <div class:bx--toast-notification__caption="{true}">{caption}</div>
-    <slot />
-  </div>
-{/if}
-
-{#if notificationType === "inline"}
-  <div class:bx--inline-notification__text-wrapper="{true}">
-    <p class:bx--inline-notification__title="{true}">{title}</p>
-    <div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
-    <slot />
-  </div>
-{/if}
diff --git a/src/Notification/index.js b/src/Notification/index.js
index ad3c5e5b..61874384 100644
--- a/src/Notification/index.js
+++ b/src/Notification/index.js
@@ -3,4 +3,3 @@ export { default as InlineNotification } from "./InlineNotification.svelte";
 export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
 export { default as NotificationButton } from "./NotificationButton.svelte";
 export { default as NotificationIcon } from "./NotificationIcon.svelte";
-export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte";
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
deleted file mode 100644
index 29652e0e..00000000
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-  /** Set to `true` to toggle the checkbox input */
-  export let toggled = false;
-
-  /** Set to `true` to disable checkbox input */
-  export let disabled = false;
-
-  /** Specify the label for the untoggled state */
-  export let labelA = "Off";
-
-  /** Specify the label for the toggled state */
-  export let labelB = "On";
-
-  /** Specify the label text */
-  export let labelText = "";
-
-  /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
-
-  /**
-   * Specify a name attribute for the checkbox input
-   * @type {string}
-   */
-  export let name = undefined;
-</script>
-
-<!-- @component
-@deprecated This component is deprecated.
-Use`<Toggle size="sm" />` instead.
--->
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div
-  class:bx--form-item="{true}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
-  <input
-    type="checkbox"
-    checked="{toggled}"
-    disabled="{disabled}"
-    id="{id}"
-    name="{name}"
-    class:bx--toggle-input="{true}"
-    class:bx--toggle-input--small="{true}"
-    on:change
-    on:change="{() => {
-      toggled = !toggled;
-    }}"
-    on:keyup
-    on:keyup="{(e) => {
-      if (e.key === ' ' || e.key === 'Enter') {
-        e.preventDefault();
-        toggled = !toggled;
-      }
-    }}"
-    on:focus
-    on:blur
-  />
-  <label
-    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
-    for="{id}"
-    class:bx--toggle-input__label="{true}"
-  >
-    {labelText}
-    <span class:bx--toggle__switch="{true}">
-      <svg
-        width="6"
-        height="5"
-        viewBox="0 0 6 5"
-        class:bx--toggle__check="{true}"
-      >
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
-      </svg>
-      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
-        {labelA}
-      </span>
-      <span aria-hidden="true" class:bx--toggle__text--on="{true}"
-        >{labelB}</span
-      >
-    </span>
-  </label>
-</div>
diff --git a/src/ToggleSmall/ToggleSmallSkeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte
deleted file mode 100644
index 569b3deb..00000000
--- a/src/ToggleSmall/ToggleSmallSkeleton.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-  /** Specify the label text */
-  export let labelText = "";
-
-  /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
-</script>
-
-<!-- @component
-@deprecated This component is deprecated.
-Use`<ToggleSkeleton size="sm" />` instead.
--->
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div
-  class:bx--form-item="{true}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
-  <input
-    type="checkbox"
-    id="{id}"
-    class:bx--toggle="{true}"
-    class:bx--toggle--small="{true}"
-    class:bx--skeleton="{true}"
-  />
-  <label
-    aria-label="{labelText
-      ? undefined
-      : $$props['aria-label'] || 'Toggle is loading'}"
-    class:bx--toggle__label="{true}"
-    class:bx--skeleton="{true}"
-    for="{id}"
-  >
-    {#if labelText}
-      <span class:bx--toggle__label-text="{true}">{labelText}</span>
-    {/if}
-    <span class:bx--toggle__appearance="{true}">
-      <svg
-        class:bx--toggle__check="{true}"
-        width="6"
-        height="5"
-        viewBox="0 0 6 5"
-      >
-        <path
-          d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
-        ></path>
-      </svg>
-    </span>
-  </label>
-</div>
diff --git a/src/ToggleSmall/index.js b/src/ToggleSmall/index.js
deleted file mode 100644
index ad88325b..00000000
--- a/src/ToggleSmall/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ToggleSmall } from "./ToggleSmall.svelte";
-export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte";
diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
deleted file mode 100644
index 17e59f90..00000000
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ /dev/null
@@ -1,220 +0,0 @@
-<script>
-  /**
-   * @event {{ action: "search"; textInput: string; }} inputSearch
-   */
-
-  /** Set to `true` to focus the search */
-  export let searchIsActive = false;
-
-  import { createEventDispatcher } from "svelte";
-  import Close20 from "../../icons/Close20.svelte";
-  import Search20 from "../../icons/Search20.svelte";
-  import searchStore from "../searchStore";
-
-  const dispatch = createEventDispatcher();
-
-  let searchTabIndex = "0";
-  let closeTabIndex = "-1";
-  let elInput = undefined;
-  let elTypeSearch = undefined;
-  let isSearchFocus = false;
-
-  function dispatchInputs(event) {
-    const params = {
-      action: "search",
-      textInput: event.target.value,
-    };
-
-    dispatch("inputSearch", params);
-  }
-
-  $: if (!searchIsActive) {
-    if (elInput) {
-      elInput.value = "";
-    }
-    searchStore.clear();
-  }
-  $: if (searchIsActive) {
-    searchTabIndex = "-1";
-    closeTabIndex = "0";
-  } else {
-    searchTabIndex = "0";
-    closeTabIndex = "-1";
-  }
-  $: if (isSearchFocus) {
-    elInput.focus();
-  }
-  $: showResults = $searchStore ? true : false;
-</script>
-
-<svelte:window
-  on:mouseup="{({ target }) => {
-    if (target && elTypeSearch) {
-      if (!elTypeSearch.contains(target)) {
-        searchIsActive = false;
-        isSearchFocus = false;
-      }
-    }
-  }}"
-/>
-
-<!-- @component
-@deprecated
-This component is deprecated. Use `HeaderSearch` instead.
--->
-<div
-  bind:this="{elTypeSearch}"
-  role="search"
-  class="search-wrapper"
-  class:search-wrapper-hidden="{!searchIsActive}"
-  class:search-focus="{isSearchFocus || searchIsActive}"
->
-  <div
-    id="right-panel-action-search"
-    class="search-wrapper-2"
-    role="combobox"
-    aria-expanded="{searchIsActive}"
-  >
-    <button
-      tabindex="{searchTabIndex}"
-      aria-label="Search"
-      class:bx--header__action="{true}"
-      class:btn-search="{true}"
-      class:btn-search-disabled="{searchIsActive}"
-      on:click="{() => {
-        isSearchFocus = true;
-        searchIsActive = true;
-        dispatch('focusInputSearch');
-      }}"
-      type="button"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <svelte:component this="{Search20}" title="Search" tabindex="0" />
-    </button>
-    <input
-      bind:this="{elInput}"
-      id="input-search-field"
-      type="text"
-      autocomplete="off"
-      tabindex="{closeTabIndex}"
-      class="input-search"
-      class:input-hidden="{!searchIsActive}"
-      placeholder="Search"
-      on:focus="{() => dispatch('focusInputSearch')}"
-      on:focusout="{() => dispatch('focusOutInputSearch')}"
-      on:input="{dispatchInputs}"
-    />
-    <button
-      id="right-panel-close-search"
-      tabindex="{closeTabIndex}"
-      class:bx--header__action="{true}"
-      class:btn-clear="{true}"
-      class:btn-clear-hidden="{!searchIsActive}"
-      type="button"
-      aria-label="Clear search"
-      on:click="{() => {
-        isSearchFocus = false;
-        searchIsActive = false;
-        searchStore.clear();
-      }}"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <svelte:component this="{Close20}" title="Close" tabindex="0" />
-    </button>
-  </div>
-</div>
-
-<style>
-  .search-wrapper {
-    position: relative;
-    display: flex;
-    max-width: 28rem;
-    width: 100%;
-    margin-left: 0.5rem;
-    height: 3rem;
-    background-color: #393939;
-    color: #fff;
-    transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
-      background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  .search-wrapper-hidden {
-    max-width: 3rem;
-    background-color: #161616;
-  }
-
-  .search-focus {
-    outline: 2px solid #fff;
-    outline-offset: -2px;
-  }
-
-  .search-wrapper-2 {
-    display: flex;
-    flex-grow: 1;
-    border-bottom: 1px solid #393939;
-  }
-
-  .btn-search {
-    width: 3rem;
-    height: 100%;
-    padding: 0;
-    flex-shrink: 0;
-    opacity: 1;
-    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
-      opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  .btn-search-disabled {
-    border: none;
-    pointer-events: none;
-  }
-
-  .input-search {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.375rem;
-    letter-spacing: 0;
-    color: #fff;
-    caret-color: #fff;
-    background-color: initial;
-    border: none;
-    outline: none;
-    width: 100%;
-    height: 3rem;
-    padding: 0;
-    transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  .input-hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .btn-clear {
-    width: 3rem;
-    height: 100%;
-    padding: 0;
-    flex-shrink: 0;
-    opacity: 1;
-    display: block;
-    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
-      opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  .btn-clear:hover {
-    background-color: #4c4c4c;
-  }
-
-  .btn-clear-hidden {
-    opacity: 0;
-    display: none;
-  }
-</style>
diff --git a/src/UIShell/index.js b/src/UIShell/index.js
index b91bd2d3..ed9d3773 100644
--- a/src/UIShell/index.js
+++ b/src/UIShell/index.js
@@ -1,7 +1,6 @@
 export { default as Header } from "./GlobalHeader/Header.svelte";
 export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte";
 export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.svelte";
-export { default as HeaderActionSearch } from "./GlobalHeader/HeaderActionSearch.svelte";
 export { default as HeaderNav } from "./GlobalHeader/HeaderNav.svelte";
 export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte";
 export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte";
diff --git a/src/UIShell/searchStore.js b/src/UIShell/searchStore.js
deleted file mode 100644
index c013bbfa..00000000
--- a/src/UIShell/searchStore.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { writable } from "svelte/store";
-
-const data = [
-  {
-    href: "#",
-    title: "Test title search 1",
-    menu: "Test menu 1",
-    description: "This is a description for seach #1",
-  },
-  {
-    href: "#",
-    title: "Changing text to simulate search",
-    menu: "Test menu 2",
-    description: "This is a description for seach #2",
-  },
-  {
-    href: "#",
-    title: "More testing texts",
-    menu: "Test menu 3",
-    description: "This is a description for seach #3",
-  },
-  {
-    href: "#",
-    title: "We can find here another test text",
-    menu: "Test menu 4",
-    description: "This is a description for seach #4",
-  },
-];
-
-const globalStore = writable(undefined);
-
-const store = {
-  subscribe: globalStore.subscribe,
-  search: (searchString) => {
-    if (searchString.length > 1) {
-      let resultSearch = [];
-
-      data.forEach((item) => {
-        if (item.title.toLowerCase().includes(searchString.toLowerCase())) {
-          resultSearch.push(item);
-        }
-      });
-
-      if (resultSearch.length > 0) {
-        globalStore.set(resultSearch);
-      } else {
-        globalStore.set(undefined);
-      }
-    } else {
-      globalStore.set(undefined);
-    }
-  },
-  clear: () => {
-    globalStore.set(undefined);
-  },
-};
-
-export default store;
diff --git a/src/index.js b/src/index.js
index d6f040b3..29a42b44 100644
--- a/src/index.js
+++ b/src/index.js
@@ -54,7 +54,6 @@ export { FormGroup } from "./FormGroup";
 export { FormItem } from "./FormItem";
 export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
-export { Icon, IconSkeleton } from "./Icon";
 export { ImageLoader } from "./ImageLoader";
 export { InlineLoading } from "./InlineLoading";
 export { Link, OutboundLink } from "./Link";
@@ -77,7 +76,6 @@ export {
   NotificationActionButton,
   NotificationButton,
   NotificationIcon,
-  NotificationTextDetails,
 } from "./Notification";
 export { NumberInput, NumberInputSkeleton } from "./NumberInput";
 export { OrderedList } from "./OrderedList";
@@ -123,7 +121,6 @@ export {
 } from "./Tile";
 export { TimePicker, TimePickerSelect } from "./TimePicker";
 export { Toggle, ToggleSkeleton } from "./Toggle";
-export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
 export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
@@ -133,7 +130,6 @@ export {
   Header,
   HeaderAction,
   HeaderActionLink,
-  HeaderActionSearch,
   HeaderNav,
   HeaderNavItem,
   HeaderNavMenu,