feat(components): adding sidesheet component

libs/components/src/side-sheet/side-sheet.scss

@@ -0,0 +1,48 @@
+:host {
+  --td-side-sheet-width: 400px;
+}
+
+.mdc-dialog {
+  justify-content: flex-end;
+
+  .mdc-dialog__surface {
+    border-radius: 0;
+    height: 100%;
+    min-height: inherit;
+    max-height: inherit;
+    min-width: var(--td-side-sheet-width, 400px);
+  }
+}
+
+.mdc-dialog--opening {
+  .mdc-dialog__container {
+    transform: translate(100%, 0);
+    transition: transform 150ms cubic-bezier(0.4, 0, 1, 1);
+  }
+}
+
+.mdc-dialog--open {
+  .mdc-dialog__container {
+    transform: translate(0);
+  }
+}
+
+.mdc-dialog--closing {
+  .mdc-dialog__container {
+    opacity: 1;
+    transform: translate(100%, 0);
+    transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+:host([pushed]) {
+  .mdc-dialog__surface {
+    min-width: 100vw;
+  }
+}
+
+:host([noPadding]) {
+  .mdc-dialog .mdc-dialog__content {
+    padding: 0;
+  }
+}

libs/components/src/side-sheet/side-sheet.stories.js

@@ -0,0 +1,96 @@
+import './side-sheet';
+import '../button/button';
+import { Active as ActiveStatusHeader } from '../status-header/status-header.stories';
+import * as tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html';
+
+export default {
+  title: 'Components/Side sheet',
+  argTypes: { onClick: { action: 'clicked' } },
+  parameters: {
+    actions: {
+      handles: ['click td-button'],
+    },
+  },
+};
+
+export const Basic = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const sideSheet = document.querySelector('td-side-sheet');
+      document
+        .querySelector('td-button')
+        ?.addEventListener('click', () =>
+          sideSheet?.open ? sideSheet.close() : sideSheet?.show()
+        );
+    },
+    { once: true }
+  );
+  return `
+        <td-button raised>Open side sheet</td-button>
+        <td-side-sheet heading="Sample side sheet">
+        </td-side-sheet>
+    `;
+};
+
+export const Multiple = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const sideSheet = document.querySelector('#parentSideSheet');
+      const childSideSheet = document.querySelector('#childSideSheet');
+
+      document
+        .querySelector('#parentTarget')
+        ?.addEventListener('click', () =>
+          sideSheet?.open ? sideSheet.close() : sideSheet?.show()
+        );
+      document
+        .querySelector('#childTarget')
+        ?.addEventListener('click', () =>
+          childSideSheet?.open ? childSideSheet.close() : childSideSheet?.show()
+        );
+    },
+    { once: true }
+  );
+  return `
+        <td-button id="parentTarget" raised>Open side sheet</td-button>
+        <td-side-sheet id="parentSideSheet" heading="Sample side sheet">
+            <td-button id="childTarget" raised>Open child</td-button>
+        </td-side-sheet>
+        <td-side-sheet id="childSideSheet" heading="Child side sheet" >
+        </td-side-sheet>
+    `;
+};
+
+export const StatusHeader = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const sideSheet = document.querySelector('td-side-sheet');
+      console.log(sideSheet);
+      document
+        .querySelector('td-button')
+        ?.addEventListener('click', () =>
+          sideSheet?.open ? sideSheet.close() : sideSheet?.show()
+        );
+    },
+    { once: true }
+  );
+  return `
+        <style>
+            td-side-sheet {
+                --td-side-sheet-width: 800px;
+            }
+        </style>
+        <td-button raised>Open side sheet</td-button>
+        <td-side-sheet noPadding>
+            ${ActiveStatusHeader({
+              state: 'active',
+              status: 'Running',
+              title: 'Active item details',
+            })}
+            ${tableRowSelectionContent}
+        </td-side-sheet>
+    `;
+};

libs/components/src/side-sheet/side-sheet.ts

@@ -0,0 +1,31 @@
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from '@material/mwc-dialog/mwc-dialog.css';
+import { CovalentDialogBase } from '../dialog/dialog';
+import baseStyles from './side-sheet.scss';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'td-side-sheet': CovalentSideSheet;
+  }
+}
+
+/**
+ * Side sheet element.
+ *
+ * @slot - This element has a slot
+ */
+@customElement('td-side-sheet')
+export class CovalentSideSheet extends CovalentDialogBase {
+  static override styles = [styles, baseStyles];
+
+  @property({ type: Boolean, reflect: true })
+  pushed = false;
+
+  @property({ type: Boolean, reflect: true })
+  noPadding = false;
+
+  constructor() {
+    super();
+    this.hideActions = true;
+  }
+}