@salesforcedevs/dx-components 0.26.1 → 0.27.1

package/src/modules/dx/sidebarOld/sidebarOld.stories.ts

@@ -1,139 +0,0 @@
-import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
-
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-sidebar-old",
-    component: "dx-sidebar-old",
-    argTypes: {
-        header: {
-            defaultValue: "Guides",
-            control: {
-                type: "text"
-            }
-        },
-        trees: {
-            defaultValue: SAMPLE_TREES,
-            control: {
-                type: "object"
-            }
-        },
-        value: {
-            defaultValue: "terminology",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-const styles = (addStyles: string = "") => html`
-    <style>
-        dx-sidebar-old {
-            ${addStyles}
-        }
-
-        body.sb-main-padded.sb-show-main {
-            padding: 0;
-        }
-    </style>
-`;
-
-export const Base = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 100vh;")}
-
-    <dx-sidebar-old
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar-old>
-`;
-
-export const WidthAndMinHeightVariables = (args: any) => html`
-    ${styles(`
-        min-height: 500px;
-        --dx-c-sidebar-width: 400px;
-        --dx-c-sidebar-min-height: 500px;
-    `)}
-
-    <dx-sidebar-old
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar-old>
-`;
-
-export const WidthDrivenByContainer = (args: any) => html`
-    ${styles(`
-        display: block;
-        --dx-c-sidebar-min-height: 500px;
-        --dx-c-sidebar-width: unset;
-    `)}
-
-    <style>
-        @media screen and (min-width: 768px) {
-            .container {
-                width: 40%;
-            }
-        }
-    </style>
-    <div class="container">
-        <dx-sidebar-old
-            header="${args.header}"
-            trees="${JSON.stringify(args.trees)}"
-            value="${args.value}"
-        ></dx-sidebar-old>
-    </div>
-`;
-
-export const WithBadges = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 500px;")}
-
-    <div class="container">
-        <dx-sidebar-old
-            header="${args.header}"
-            trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
-            value="${args.value}"
-        ></dx-sidebar-old>
-    </div>
-`;
-
-export const PositionSticky = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-    `)}
-    <dx-sidebar-old
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    ></dx-sidebar-old>
-`;
-
-export const UseSlot = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-        --dx-c-sidebar-width: 300px;
-    `)}
-
-    <style>
-        span {
-            margin-left: auto;
-        }
-    </style>
-
-    <dx-sidebar-old
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    >
-        <span slot="header">I'm in the sidebar</span>
-    </dx-sidebar-old>
-`;