diff --git a/.github/semantic.yml b/.github/semantic.yml index 95ce622a15..16cd347c8f 100644 --- a/.github/semantic.yml +++ b/.github/semantic.yml @@ -53,7 +53,6 @@ scopes: - elements|ino-segment-button - elements|ino-segment-group - elements|ino-select - - elements|ino-sidebar - elements|ino-snackbar - elements|ino-spinner - elements|ino-switch @@ -104,7 +103,6 @@ scopes: - elements-angular|ino-segment-button - elements-angular|ino-segment-group - elements-angular|ino-select - - elements-angular|ino-sidebar - elements-angular|ino-snackbar - elements-angular|ino-spinner - elements-angular|ino-switch @@ -155,7 +153,6 @@ scopes: - elements-react|ino-segment-button - elements-react|ino-segment-group - elements-react|ino-select - - elements-react|ino-sidebar - elements-react|ino-snackbar - elements-react|ino-spinner - elements-react|ino-switch @@ -206,7 +203,6 @@ scopes: - elements-vue|ino-segment-button - elements-vue|ino-segment-group - elements-vue|ino-select - - elements-vue|ino-sidebar - elements-vue|ino-snackbar - elements-vue|ino-spinner - elements-vue|ino-switch @@ -257,7 +253,6 @@ scopes: - storybook|ino-segment-button - storybook|ino-segment-group - storybook|ino-select - - storybook|ino-sidebar - storybook|ino-snackbar - storybook|ino-spinner - storybook|ino-switch diff --git a/commit-scope-enum.js b/commit-scope-enum.js index b92f140e76..82778c9528 100644 --- a/commit-scope-enum.js +++ b/commit-scope-enum.js @@ -38,7 +38,6 @@ module.exports = [ 'elements|ino-segment-button', 'elements|ino-segment-group', 'elements|ino-select', - 'elements|ino-sidebar', 'elements|ino-snackbar', 'elements|ino-spinner', 'elements|ino-switch', @@ -88,7 +87,6 @@ module.exports = [ 'elements-angular|ino-segment-button', 'elements-angular|ino-segment-group', 'elements-angular|ino-select', - 'elements-angular|ino-sidebar', 'elements-angular|ino-snackbar', 'elements-angular|ino-spinner', 'elements-angular|ino-switch', @@ -138,7 +136,6 @@ module.exports = [ 'elements-react|ino-segment-button', 'elements-react|ino-segment-group', 'elements-react|ino-select', - 'elements-react|ino-sidebar', 'elements-react|ino-snackbar', 'elements-react|ino-spinner', 'elements-react|ino-switch', @@ -188,7 +185,6 @@ module.exports = [ 'elements-vue|ino-segment-button', 'elements-vue|ino-segment-group', 'elements-vue|ino-select', - 'elements-vue|ino-sidebar', 'elements-vue|ino-snackbar', 'elements-vue|ino-spinner', 'elements-vue|ino-switch', @@ -238,7 +234,6 @@ module.exports = [ 'storybook|ino-segment-button', 'storybook|ino-segment-group', 'storybook|ino-select', - 'storybook|ino-sidebar', 'storybook|ino-snackbar', 'storybook|ino-spinner', 'storybook|ino-switch', diff --git a/packages/elements-angular/elements/src/directives/proxies-list.ts b/packages/elements-angular/elements/src/directives/proxies-list.ts index ffcc318b11..104602021b 100644 --- a/packages/elements-angular/elements/src/directives/proxies-list.ts +++ b/packages/elements-angular/elements/src/directives/proxies-list.ts @@ -41,7 +41,6 @@ export const DIRECTIVES = [ d.InoSegmentButton, d.InoSegmentGroup, d.InoSelect, - d.InoSidebar, d.InoSnackbar, d.InoSpinner, d.InoSwitch, diff --git a/packages/elements-angular/elements/src/directives/proxies.ts b/packages/elements-angular/elements/src/directives/proxies.ts index b3b7a1e741..d9c3d25e2b 100644 --- a/packages/elements-angular/elements/src/directives/proxies.ts +++ b/packages/elements-angular/elements/src/directives/proxies.ts @@ -1046,34 +1046,6 @@ export class InoSelect { } -export declare interface InoSidebar extends Components.InoSidebar { - /** - * Emits an event if the user expands or collapses the sidebar - */ - openChange: EventEmitter>; - -} - -@ProxyCmp({ - defineCustomElementFn: undefined, - inputs: ['alignRight', 'name', 'open'] -}) -@Component({ - selector: 'ino-sidebar', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - inputs: ['alignRight', 'name', 'open'] -}) -export class InoSidebar { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - proxyOutputs(this, this.el, ['openChange']); - } -} - - export declare interface InoSnackbar extends Components.InoSnackbar { /** * Event that emits as soon as the action button is clicked. diff --git a/packages/elements-react-example/src/shared/InovexElements.ts b/packages/elements-react-example/src/shared/InovexElements.ts index c6a50ce563..fcac7493c6 100644 --- a/packages/elements-react-example/src/shared/InovexElements.ts +++ b/packages/elements-react-example/src/shared/InovexElements.ts @@ -30,7 +30,6 @@ export { InoTooltip, InoOption, InoDialog, - InoSidebar, InoNavItem, InoNavDrawer, InoHeader diff --git a/packages/elements-react/src/components/index.ts b/packages/elements-react/src/components/index.ts index 232aeea776..058a1acaf1 100644 --- a/packages/elements-react/src/components/index.ts +++ b/packages/elements-react/src/components/index.ts @@ -47,7 +47,6 @@ export const InoRange = /*@__PURE__*/createReactComponent('ino-segment-button'); export const InoSegmentGroup = /*@__PURE__*/createReactComponent('ino-segment-group'); export const InoSelect = /*@__PURE__*/createReactComponent('ino-select'); -export const InoSidebar = /*@__PURE__*/createReactComponent('ino-sidebar'); export const InoSnackbar = /*@__PURE__*/createReactComponent('ino-snackbar'); export const InoSpinner = /*@__PURE__*/createReactComponent('ino-spinner'); export const InoSwitch = /*@__PURE__*/createReactComponent('ino-switch'); diff --git a/packages/elements-vue/src/proxies.ts b/packages/elements-vue/src/proxies.ts index 5067da7d50..fd5522c635 100644 --- a/packages/elements-vue/src/proxies.ts +++ b/packages/elements-vue/src/proxies.ts @@ -444,14 +444,6 @@ export const InoSelect = /*@__PURE__*/ defineContainer('ino-selec 'value', 'v-value-change', 'valueChange'); -export const InoSidebar = /*@__PURE__*/ defineContainer('ino-sidebar', undefined, [ - 'alignRight', - 'open', - 'name', - 'openChange' -]); - - export const InoSnackbar = /*@__PURE__*/ defineContainer('ino-snackbar', undefined, [ 'message', 'actionText', diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts index 77e6599dfd..ffc53f5622 100644 --- a/packages/elements/src/components.d.ts +++ b/packages/elements/src/components.d.ts @@ -1085,20 +1085,6 @@ export namespace Components { */ "value"?: string; } - interface InoSidebar { - /** - * Aligns the sidebar to the right (true) or left (false) side - */ - "alignRight": boolean; - /** - * Name of the component - */ - "name"?: string; - /** - * Expands the sidebar - */ - "open": boolean; - } interface InoSnackbar { /** * The text to display for the action button. If no text is defined, the snack bar is displayed in an alternative feedback style. @@ -1451,10 +1437,6 @@ export interface InoSelectCustomEvent extends CustomEvent { detail: T; target: HTMLInoSelectElement; } -export interface InoSidebarCustomEvent extends CustomEvent { - detail: T; - target: HTMLInoSidebarElement; -} export interface InoSnackbarCustomEvent extends CustomEvent { detail: T; target: HTMLInoSnackbarElement; @@ -1718,12 +1700,6 @@ declare global { prototype: HTMLInoSelectElement; new (): HTMLInoSelectElement; }; - interface HTMLInoSidebarElement extends Components.InoSidebar, HTMLStencilElement { - } - var HTMLInoSidebarElement: { - prototype: HTMLInoSidebarElement; - new (): HTMLInoSidebarElement; - }; interface HTMLInoSnackbarElement extends Components.InoSnackbar, HTMLStencilElement { } var HTMLInoSnackbarElement: { @@ -1818,7 +1794,6 @@ declare global { "ino-segment-button": HTMLInoSegmentButtonElement; "ino-segment-group": HTMLInoSegmentGroupElement; "ino-select": HTMLInoSelectElement; - "ino-sidebar": HTMLInoSidebarElement; "ino-snackbar": HTMLInoSnackbarElement; "ino-spinner": HTMLInoSpinnerElement; "ino-switch": HTMLInoSwitchElement; @@ -2991,24 +2966,6 @@ declare namespace LocalJSX { */ "value"?: string; } - interface InoSidebar { - /** - * Aligns the sidebar to the right (true) or left (false) side - */ - "alignRight"?: boolean; - /** - * Name of the component - */ - "name"?: string; - /** - * Emits an event if the user expands or collapses the sidebar - */ - "onOpenChange"?: (event: InoSidebarCustomEvent) => void; - /** - * Expands the sidebar - */ - "open"?: boolean; - } interface InoSnackbar { /** * The text to display for the action button. If no text is defined, the snack bar is displayed in an alternative feedback style. @@ -3323,7 +3280,6 @@ declare namespace LocalJSX { "ino-segment-button": InoSegmentButton; "ino-segment-group": InoSegmentGroup; "ino-select": InoSelect; - "ino-sidebar": InoSidebar; "ino-snackbar": InoSnackbar; "ino-spinner": InoSpinner; "ino-switch": InoSwitch; @@ -3378,7 +3334,6 @@ declare module "@stencil/core" { "ino-segment-button": LocalJSX.InoSegmentButton & JSXBase.HTMLAttributes; "ino-segment-group": LocalJSX.InoSegmentGroup & JSXBase.HTMLAttributes; "ino-select": LocalJSX.InoSelect & JSXBase.HTMLAttributes; - "ino-sidebar": LocalJSX.InoSidebar & JSXBase.HTMLAttributes; "ino-snackbar": LocalJSX.InoSnackbar & JSXBase.HTMLAttributes; "ino-spinner": LocalJSX.InoSpinner & JSXBase.HTMLAttributes; "ino-switch": LocalJSX.InoSwitch & JSXBase.HTMLAttributes; diff --git a/packages/elements/src/components/ino-sidebar/MDCCustomDrawer.js b/packages/elements/src/components/ino-sidebar/MDCCustomDrawer.js deleted file mode 100644 index 56f6abbcc3..0000000000 --- a/packages/elements/src/components/ino-sidebar/MDCCustomDrawer.js +++ /dev/null @@ -1,10 +0,0 @@ -import { MDCDrawer } from '@material/drawer/component'; - -export class MDCCustomDrawer extends MDCDrawer { - constructor(mdcDrawer) { - super(mdcDrawer); - this.foundation.handleKeydown = () => { - // do nothing. - }; - } -} diff --git a/packages/elements/src/components/ino-sidebar/ino-sidebar.e2e.ts b/packages/elements/src/components/ino-sidebar/ino-sidebar.e2e.ts deleted file mode 100644 index b78bf8f75d..0000000000 --- a/packages/elements/src/components/ino-sidebar/ino-sidebar.e2e.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { setupPageWithContent } from '../../util/e2etests-setup'; - -const INO_SIDEBAR = ` - - -`; - -const SIDEBAR_SELECTOR = 'ino-sidebar'; -const ASIDE_SELECTOR = 'ino-sidebar >>> aside'; - -describe('ino-sidebar', () => { - describe('Properties', () => { - it('should render on the right side if alignRight is true', async () => { - const page = await setupPageWithContent(INO_SIDEBAR); - const sidebar = await page.find(SIDEBAR_SELECTOR); - const asideEl = await page.find(ASIDE_SELECTOR); - - await sidebar.setAttribute('align-right', true); - await page.waitForChanges(); - - expect(asideEl).toHaveClass('ino-sidebar--right'); - }); - }); - - describe('Events', () => { - it('should emit an openChange event upon changing the open property', async () => { - const page = await setupPageWithContent(INO_SIDEBAR); - const sidebar = await page.find(SIDEBAR_SELECTOR); - const event = await page.spyOnEvent('openChange'); - - await sidebar.setAttribute('open', true); - await page.waitForChanges(); - - expect(event).toHaveReceivedEvent(); - expect(event).toHaveReceivedEventDetail(true); - }); - }); -}); diff --git a/packages/elements/src/components/ino-sidebar/ino-sidebar.scss b/packages/elements/src/components/ino-sidebar/ino-sidebar.scss deleted file mode 100644 index 7d99076d29..0000000000 --- a/packages/elements/src/components/ino-sidebar/ino-sidebar.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use 'base/mdc-customize'; -@use '@material/drawer/mdc-drawer'; -@use '@material/drawer'; -@use 'base/theme'; - -$big-shadow: 0 8px 16px 0 rgba(61, 64, 245, 0.3), - 0 16px 32px 0 rgba(61, 214, 245, 0.14); - -:host { - /** - * @prop --sidebar-width: The width of the open sidebar. - */ - - --sidebar-width: var(--ino-sidebar-width, 250px); - - .mdc-drawer { - height: 100%; - box-shadow: $big-shadow; - @include drawer.width(var(--sidebar-width)); - - &.ino-sidebar--right { - left: unset; - right: 0; - - &.mdc-drawer--modal { - right: 0; - } - - &.mdc-drawer--animate { - transform: translateX(100%); - } - - &.mdc-drawer--opening { - transform: translateX(0); - } - - &.mdc-drawer--closing { - transform: translateX(100%); - } - } - } - - .mdc-drawer-scrim { - display: none; - } -} diff --git a/packages/elements/src/components/ino-sidebar/ino-sidebar.tsx b/packages/elements/src/components/ino-sidebar/ino-sidebar.tsx deleted file mode 100644 index 8a2c35b24c..0000000000 --- a/packages/elements/src/components/ino-sidebar/ino-sidebar.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { - Component, - Element, - Event, - EventEmitter, - Host, - Prop, - Watch, - h, -} from '@stencil/core'; -import classNames from 'classnames'; -import { MDCDrawer } from '@material/drawer/component'; - -import { MDCCustomDrawer } from './MDCCustomDrawer'; - -/** - * @slot header - For the header element - * @slot content - For the content - */ -@Component({ - tag: 'ino-sidebar', - styleUrl: 'ino-sidebar.scss', - shadow: true, -}) -export class InoSidebar { - private drawer?: MDCDrawer; - - @Element() el!: HTMLInoSidebarElement; - - /** - * Aligns the sidebar to the right (true) or left (false) side - */ - @Prop() alignRight = false; - - /** - * Expands the sidebar - */ - @Prop() open = false; - - @Watch('open') - openChanged(newValue: boolean) { - if (this.drawer) { - this.drawer.open = newValue; - this.openChange.emit(newValue); - } - } - - /** - * Name of the component - */ - @Prop() name?: string; - - /** - * Emits an event if the user expands or collapses the sidebar - */ - @Event() openChange: EventEmitter; - - componentDidLoad() { - this.drawer = new MDCCustomDrawer( - this.el.shadowRoot.querySelector('.mdc-drawer') - ); - if (this.drawer) { - this.drawer.open = this.open; - } - } - - render() { - const classes = classNames({ - 'mdc-drawer': true, - 'mdc-drawer--modal': true, - 'ino-sidebar--right': this.alignRight, - }); - - return ( - - -
- - ); - } -} diff --git a/packages/elements/src/components/ino-sidebar/readme.md b/packages/elements/src/components/ino-sidebar/readme.md deleted file mode 100644 index 09d753011a..0000000000 --- a/packages/elements/src/components/ino-sidebar/readme.md +++ /dev/null @@ -1,104 +0,0 @@ -# ino-sidebar - -The ino-sidebar is a modal sidebar that can be used to display additional information. -It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component. - -## Usage - -The component can be used as follows: - -### Web Component - -```js -document - .querySelector('ino-sidebar') - .addEventListener('openChange', (e) => console.log(`state of sidebar changed to ${e.detail}`); -``` - -```html - -
- -
-
- - - - -
- -``` - -### React - -```jsx -import React from 'react'; -import { Component } from 'react'; -import { InoSidebar, InoButton } from '@inovex.de/elements/dist/react'; - -class MyComponent extends Component { - - state = { - expanded: false - }; - - handleClick = () => { - this.setState((state) => ({ - expanded: !state.expanded - })); - }; - - render() { - return ( - this.handleClick()}>Sidebar - - ) - } - -} -``` - -## Sidenotes - -The empty `div` tag with the `tabindex="0"` attribute as well as the `
` tag -are indispensable for the sidebar to work properly. For further information, -refer to https://github.com/material-components/material-components-web/issues/5615 and -https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer. - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------ | ------------- | ----------------------------------------------------------- | --------- | ----------- | -| `alignRight` | `align-right` | Aligns the sidebar to the right (true) or left (false) side | `boolean` | `false` | -| `name` | `name` | Name of the component | `string` | `undefined` | -| `open` | `open` | Expands the sidebar | `boolean` | `false` | - - -## Events - -| Event | Description | Type | -| ------------ | ----------------------------------------------------------- | ------------------ | -| `openChange` | Emits an event if the user expands or collapses the sidebar | `CustomEvent` | - - -## Slots - -| Slot | Description | -| ----------- | ---------------------- | -| `"content"` | For the content | -| `"header"` | For the header element | - - -## CSS Custom Properties - -| Name | Description | -| ----------------- | ------------------------------ | -| `--sidebar-width` | The width of the open sidebar. | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/storybook/custom-elements.json b/packages/storybook/custom-elements.json index 26fe01d229..429070314f 100644 --- a/packages/storybook/custom-elements.json +++ b/packages/storybook/custom-elements.json @@ -4216,79 +4216,6 @@ ], "cssParts": [] }, - { - "name": "ino-sidebar", - "path": "./src/components/ino-sidebar/ino-sidebar.tsx", - "description": "The ino-sidebar is a modal sidebar that can be used to display additional information.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.", - "attributes": [ - { - "name": "align-right", - "type": "boolean", - "description": "Aligns the sidebar to the right (true) or left (false) side", - "defaultValue": "false", - "required": false - }, - { - "name": "name", - "type": "string", - "description": "Name of the component", - "required": false - }, - { - "name": "open", - "type": "boolean", - "description": "Expands the sidebar", - "defaultValue": "false", - "required": false - } - ], - "properties": [ - { - "name": "alignRight", - "type": "boolean", - "description": "Aligns the sidebar to the right (true) or left (false) side", - "defaultValue": "false", - "required": false - }, - { - "name": "name", - "type": "string", - "description": "Name of the component", - "required": false - }, - { - "name": "open", - "type": "boolean", - "description": "Expands the sidebar", - "defaultValue": "false", - "required": false - } - ], - "events": [ - { - "name": "openChange", - "description": "Emits an event if the user expands or collapses the sidebar" - } - ], - "methods": [], - "slots": [ - { - "name": "content", - "description": "For the content" - }, - { - "name": "header", - "description": "For the header element" - } - ], - "cssProperties": [ - { - "name": "--sidebar-width", - "description": "The width of the open sidebar." - } - ], - "cssParts": [] - }, { "name": "ino-snackbar", "path": "./src/components/ino-snackbar/ino-snackbar.tsx", diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json index d0f06872c8..7844b9b4f2 100644 --- a/packages/storybook/elements-stencil-docs.json +++ b/packages/storybook/elements-stencil-docs.json @@ -6917,111 +6917,6 @@ } ] }, - { - "filePath": "./src/components/ino-sidebar/ino-sidebar.tsx", - "fileName": "ino-sidebar.tsx", - "tag": "ino-sidebar", - "readme": "# ino-sidebar\n\nThe ino-sidebar is a modal sidebar that can be used to display additional information.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.\n\n## Usage\n\nThe component can be used as follows:\n\n### Web Component\n\n```js\ndocument\n .querySelector('ino-sidebar')\n .addEventListener('openChange', (e) => console.log(`state of sidebar changed to ${e.detail}`);\n```\n\n```html\n\n
\n \n
\n
\n \n \n \n \n
\n\n```\n\n### React\n\n```jsx\nimport React from 'react';\nimport { Component } from 'react';\nimport { InoSidebar, InoButton } from '@inovex.de/elements/dist/react';\n\nclass MyComponent extends Component {\n\n state = {\n expanded: false\n };\n\n handleClick = () => {\n this.setState((state) => ({\n expanded: !state.expanded\n }));\n };\n\n render() {\n return (\n this.handleClick()}>Sidebar\n \n )\n }\n\n}\n```\n\n## Sidenotes\n\nThe empty `div` tag with the `tabindex=\"0\"` attribute as well as the `
` tag\nare indispensable for the sidebar to work properly. For further information,\nrefer to https://github.com/material-components/material-components-web/issues/5615 and\nhttps://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer.\n", - "usage": {}, - "docs": "The ino-sidebar is a modal sidebar that can be used to display additional information.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.", - "docsTags": [ - { - "name": "slot", - "text": "header - For the header element" - }, - { - "name": "slot", - "text": "content - For the content" - } - ], - "encapsulation": "shadow", - "dependents": [], - "dependencies": [], - "dependencyGraph": {}, - "props": [ - { - "name": "alignRight", - "type": "boolean", - "mutable": false, - "attr": "align-right", - "reflectToAttr": false, - "docs": "Aligns the sidebar to the right (true) or left (false) side", - "docsTags": [], - "default": "false", - "values": [ - { - "type": "boolean" - } - ], - "optional": false, - "required": false - }, - { - "name": "name", - "type": "string", - "mutable": false, - "attr": "name", - "reflectToAttr": false, - "docs": "Name of the component", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": true, - "required": false - }, - { - "name": "open", - "type": "boolean", - "mutable": false, - "attr": "open", - "reflectToAttr": false, - "docs": "Expands the sidebar", - "docsTags": [], - "default": "false", - "values": [ - { - "type": "boolean" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [ - { - "event": "openChange", - "detail": "any", - "bubbles": true, - "cancelable": true, - "composed": true, - "docs": "Emits an event if the user expands or collapses the sidebar", - "docsTags": [] - } - ], - "styles": [ - { - "name": "--sidebar-width", - "annotation": "prop", - "docs": "The width of the open sidebar." - } - ], - "slots": [ - { - "name": "content", - "docs": "For the content" - }, - { - "name": "header", - "docs": "For the header element" - } - ], - "parts": [], - "listeners": [] - }, { "filePath": "./src/components/ino-snackbar/ino-snackbar.tsx", "fileName": "ino-snackbar.tsx", diff --git a/packages/storybook/src/stories/ino-sidebar/ino-sidebar.scss b/packages/storybook/src/stories/ino-sidebar/ino-sidebar.scss deleted file mode 100644 index 4ec34bb21c..0000000000 --- a/packages/storybook/src/stories/ino-sidebar/ino-sidebar.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use '../../../../elements/src/components/base/theme'; - -$small-shadow: 0 4px 8px 0 rgba(61, 64, 245, 0.3), - 0 12px 28px 0 rgba(61, 214, 245, 0.14); - -body { - margin: 0; -} - -.sidebar-iframe { - width: 100%; - height: 400px; - border: 1px theme.color(light, base) solid; -} - -.sidebar-demo { - display: block; - height: 100%; - - ino-icon { - --icon-color: #fff; - } - - .header { - position: absolute; - width: 100%; - display: flex; - height: 40px; - background-color: theme.$brand; - justify-content: flex-start; - flex-direction: row; - padding: 0 10px 0 10px; - - &--section { - justify-content: flex-start; - display: inline-flex; - align-items: center; - color: #fff; - font-size: 22px; - - p { - padding: 0 0 0 20px; - color: #fff; - } - } - } - - .content { - padding-top: 40px; - } -} - -.sidebar-header { - display: flex; - height: 60px; - flex-direction: row; - justify-content: flex-end; - - ino-icon { - --icon-color: #0d10f3; - } -} - -ino-sidebar[align-right] { - .sidebar-header { - justify-content: flex-start; - } -} - -.button__label { - pointer-events: none; -} diff --git a/packages/storybook/src/stories/ino-sidebar/ino-sidebar.stories.mdx b/packages/storybook/src/stories/ino-sidebar/ino-sidebar.stories.mdx deleted file mode 100644 index b3819bb217..0000000000 --- a/packages/storybook/src/stories/ino-sidebar/ino-sidebar.stories.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import { Meta, Description } from "@storybook/addon-docs"; -import readme from "../../../../elements/src/components/ino-sidebar/readme.md"; - - - - diff --git a/packages/storybook/src/stories/ino-sidebar/ino-sidebar.stories.ts b/packages/storybook/src/stories/ino-sidebar/ino-sidebar.stories.ts deleted file mode 100644 index 9a55bcc3f4..0000000000 --- a/packages/storybook/src/stories/ino-sidebar/ino-sidebar.stories.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { Components } from '@inovex.de/elements'; -import { useEffect } from '@storybook/client-api'; -import { Meta } from '@storybook/web-components'; -import { html } from 'lit-html'; -import { TemplateGenerator } from '../template-generator'; -import { decorateStoryWithClass } from '../utils'; -import './ino-sidebar.scss'; - -const eventHandler = (e) => { - const el: HTMLElement = e.target; - const elTagName = el.tagName.toLowerCase(); - - if (elTagName !== 'ino-icon' && elTagName !== 'button') { - return; - } - - const sidebar: HTMLInoSidebarElement = el - .closest('.sidebar-demo') - .querySelector('ino-sidebar'); - sidebar.open = !sidebar.open; -}; - -export default { - title: 'Structure/ino-sidebar', - component: 'ino-sidebar', - decorators: [ - (story) => decorateStoryWithClass(story, 'story-sidebar'), - (story) => { - useEffect(() => { - document.addEventListener('click', eventHandler); - return () => { - document.removeEventListener('click', eventHandler); - }; - }); - return story(); - }, - ], - args: { - alignRight: false, - name: '', - open: false, - } -} as Meta; - -const sidebarContent = html` -
- -
-
- - - - - - - - -
-`; - -const mainContent = html` -
-

- Cras magna diam, dictum a pretium non, elementum at nibh. Etiam laoreet - suscipit dui et feugiat. Vivamus id consectetur dolor. Morbi eget nunc vel - felis gravida scelerisque. Proin libero erat, suscipit pretium venenatis - vitae, fringilla sed enim. Maecenas elit est, finibus in tellus id, - interdum hendrerit ligula. Nam vitae sagittis enim. Donec pulvinar vel - quam a posuere. Maecenas egestas ex erat, quis convallis turpis blandit a. -

-

- Maecenas sodales mauris vitae feugiat egestas. Morbi porta laoreet odio - vel semper. Quisque rutrum varius nulla. Morbi sagittis metus quis nibh - congue, eu vehicula dui congue. Pellentesque ullamcorper eros in nulla - interdum auctor. Pellentesque congue, felis vitae tempor porta, ipsum - felis viverra dui, vel porttitor elit nibh sed purus. Nam eu diam magna. - Sed nec nunc lorem. Suspendisse vulputate odio lacus, eget dignissim augue - pharetra eget. Ut quis augue eu elit venenatis faucibus. Nam ut commodo - dui. . -

-

- Praesent eget augue sed nibh aliquam lacinia ac in lectus. Vivamus sapien - urna, pretium in turpis at, dapibus mattis orci.Maecenas sodales mauris - vitae feugiat egestas. Morbi porta laoreet odio vel semper. Quisque rutrum - varius nulla. Morbi sagittis metus quis nibh congue, eu vehicula dui - congue. Pellentesque ullamcorper eros in nulla interdum auctor. - Pellentesque congue, felis vitae tempor porta, ipsum felis viverra dui, - vel porttitor elit nibh sed purus. Nam eu diam magna. Sed nec nunc lorem. - Suspendisse vulputate odio lacus, eget dignissim augue pharetra eget. Ut - quis augue eu elit venenatis faucibus. Nam ut commodo dui. Praesent eget - augue sed nibh aliquam lacinia ac in lectus. Vivamus sapien urna, pretium - in turpis at, dapibus mattis orci -

-

- Proin sem nisi, tincidunt eget ipsum non, vestibulum feugiat tellus. Sed - nunc enim, sodales condimentum hendrerit eleifend, aliquam ac eros. - Maecenas ut molestie ligula. Aenean semper nunc felis, at cursus neque - congue in. Sed cursus mauris nunc, et scelerisque leo ornare nec. In nec - dui eu sem sodales sodales ac at enim. Integer sit amet libero vitae magna - facilisis malesuada sagittis nec dolor. Aenean eleifend dapibus ante, id - accumsan turpis luctus varius. Etiam accumsan tortor ex, sit amet suscipit - turpis vehicula et. Ut ultrices ex nisi, eget tristique nulla tempor eget. - Etiam sed vehicula velit. Nullam lacus libero, convallis in imperdiet sit - amet, hendrerit sed nunc. -

-
-`; - - -const template = new TemplateGenerator( - 'ino-sidebar', - args => html` -
- Toggle Sidebar - - ${sidebarContent} - -
-`); - -export const Playground = template.generatePlaygroundStory(); diff --git a/packages/storybook/src/stories/showcase/showcase.stories.js b/packages/storybook/src/stories/showcase/showcase.stories.js index 119b042d3b..3cf8f3d125 100644 --- a/packages/storybook/src/stories/showcase/showcase.stories.js +++ b/packages/storybook/src/stories/showcase/showcase.stories.js @@ -5,7 +5,6 @@ import libertyImg from '_local-assets/images/liberty.jpg'; import snackbarDemoImg from '_local-assets/images/InoSnackbar_Demo_Image.png'; import dialogDemoImg from '_local-assets/images/InoDialog_Demo_Image.jpeg'; import navDrawerDemoImg from '_local-assets/images/InoNavDrawer_Demo_Image.jpeg'; -import sidebarDemoImg from '_local-assets/images/InoSidebar_Demo_Image.png'; export default { title: 'Docs/Showcase', @@ -142,14 +141,6 @@ export const components = () => /*html*/ `

ino-nav-drawer

- -
- -
-
-

ino-sidebar

-
-