remove unused empty state element
This commit is contained in:
@@ -1,65 +0,0 @@
|
||||
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
|
||||
import { css, html, LitElement, customElement, property } from '@umbraco-cms/backoffice/external/lit';
|
||||
|
||||
@customElement('umb-empty-state')
|
||||
export class UmbEmptyStateElement extends LitElement {
|
||||
/**
|
||||
* Set the text size
|
||||
*/
|
||||
@property({ type: String })
|
||||
size: 'small' | 'large' = 'large';
|
||||
|
||||
/**
|
||||
* Set the element position
|
||||
* 'center' => element is absolutely centered
|
||||
* undefined => element has auto margin, to center in parent
|
||||
*/
|
||||
@property({ type: String })
|
||||
position: 'center' | undefined;
|
||||
|
||||
render() {
|
||||
return html`<slot></slot>`;
|
||||
}
|
||||
|
||||
static styles = [
|
||||
UmbTextStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: var(--uui-size-space-4);
|
||||
}
|
||||
|
||||
:host([position='center']) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 400px;
|
||||
width: 80%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
:host(:not([position='center'])) {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
:host(:not([size='small'])) {
|
||||
font-size: var(--uui-size-6);
|
||||
}
|
||||
|
||||
:host([size='small']) {
|
||||
font-size: var(--uui-size-5);
|
||||
}
|
||||
|
||||
slot {
|
||||
margin: auto;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'umb-empty-state': UmbEmptyStateElement;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
import { html } from '@umbraco-cms/backoffice/external/lit';
|
||||
import './empty-state.element.js';
|
||||
import type { UmbEmptyStateElement } from './empty-state.element.js';
|
||||
|
||||
const meta: Meta<UmbEmptyStateElement> = {
|
||||
title: 'Components/Empty State',
|
||||
component: 'umb-empty-state',
|
||||
render: (args) =>
|
||||
html` <umb-empty-state .position=${args.position} .size=${args.size}
|
||||
>There are no items to be found</umb-empty-state
|
||||
>`,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<UmbEmptyStateElement>;
|
||||
|
||||
export const Overview: Story = {
|
||||
args: {
|
||||
size: 'large',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
size: 'small',
|
||||
},
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './empty-state.element.js';
|
||||
@@ -5,7 +5,6 @@ export * from './backoffice-notification-container/backoffice-notification-conta
|
||||
export * from './body-layout/body-layout.element.js';
|
||||
export * from './code-block/index.js';
|
||||
export * from './dropdown/index.js';
|
||||
export * from './empty-state/index.js';
|
||||
export * from './entity-actions-bundle/index.js';
|
||||
export * from './extension-slot/index.js';
|
||||
export * from './footer-layout/index.js';
|
||||
|
||||
Reference in New Issue
Block a user