mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

breaking: remove deprecated components

Browse source
This commit is contained in:
Eric Liu 2022-03-20 08:18:36 -07:00
commit ba0ed0b594
12 changed files with 0 additions and 525 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/Icon/Icon.svelte
View file

@ -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}

19
src/Icon/IconSkeleton.svelte
View file

@ -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>

2
src/Icon/index.js
View file

@ -1,2 +0,0 @@
export { default as Icon } from "./Icon.svelte";
export { default as IconSkeleton } from "./IconSkeleton.svelte";

37
src/Notification/NotificationTextDetails.svelte
View file

@ -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}

1
src/Notification/index.js
View file

@ -3,4 +3,3 @@ export { default as InlineNotification } from "./InlineNotification.svelte";
export { default as NotificationActionButton } from "./NotificationActionButton.svelte"; export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
export { default as NotificationButton } from "./NotificationButton.svelte"; export { default as NotificationButton } from "./NotificationButton.svelte";
export { default as NotificationIcon } from "./NotificationIcon.svelte"; export { default as NotificationIcon } from "./NotificationIcon.svelte";
export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte";

86
src/ToggleSmall/ToggleSmall.svelte
View file

@ -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>

54
src/ToggleSmall/ToggleSmallSkeleton.svelte
View file

@ -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>

2
src/ToggleSmall/index.js
View file

@ -1,2 +0,0 @@
export { default as ToggleSmall } from "./ToggleSmall.svelte";
export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte";

220
src/UIShell/GlobalHeader/HeaderActionSearch.svelte
View file

@ -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>

1
src/UIShell/index.js
View file

@ -1,7 +1,6 @@
export { default as Header } from "./GlobalHeader/Header.svelte"; export { default as Header } from "./GlobalHeader/Header.svelte";
export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte"; export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte";
export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.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 HeaderNav } from "./GlobalHeader/HeaderNav.svelte";
export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte"; export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte";
export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte"; export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte";

58
src/UIShell/searchStore.js
View file

@ -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;

4
src/index.js
View file

@ -54,7 +54,6 @@ export { FormGroup } from "./FormGroup";
export { FormItem } from "./FormItem"; export { FormItem } from "./FormItem";
export { FormLabel } from "./FormLabel"; export { FormLabel } from "./FormLabel";
export { Grid, Row, Column } from "./Grid"; export { Grid, Row, Column } from "./Grid";
export { Icon, IconSkeleton } from "./Icon";
export { ImageLoader } from "./ImageLoader"; export { ImageLoader } from "./ImageLoader";
export { InlineLoading } from "./InlineLoading"; export { InlineLoading } from "./InlineLoading";
export { Link, OutboundLink } from "./Link"; export { Link, OutboundLink } from "./Link";
@ -77,7 +76,6 @@ export {
NotificationActionButton, NotificationActionButton,
NotificationButton, NotificationButton,
NotificationIcon, NotificationIcon,
NotificationTextDetails,
} from "./Notification"; } from "./Notification";
export { NumberInput, NumberInputSkeleton } from "./NumberInput"; export { NumberInput, NumberInputSkeleton } from "./NumberInput";
export { OrderedList } from "./OrderedList"; export { OrderedList } from "./OrderedList";
@ -123,7 +121,6 @@ export {
} from "./Tile"; } from "./Tile";
export { TimePicker, TimePickerSelect } from "./TimePicker"; export { TimePicker, TimePickerSelect } from "./TimePicker";
export { Toggle, ToggleSkeleton } from "./Toggle"; export { Toggle, ToggleSkeleton } from "./Toggle";
export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
export { Tooltip, TooltipFooter } from "./Tooltip"; export { Tooltip, TooltipFooter } from "./Tooltip";
export { TooltipDefinition } from "./TooltipDefinition"; export { TooltipDefinition } from "./TooltipDefinition";
export { TooltipIcon } from "./TooltipIcon"; export { TooltipIcon } from "./TooltipIcon";
@ -133,7 +130,6 @@ export {
Header, Header,
HeaderAction, HeaderAction,
HeaderActionLink, HeaderActionLink,
HeaderActionSearch,
HeaderNav, HeaderNav,
HeaderNavItem, HeaderNavItem,
HeaderNavMenu, HeaderNavMenu,