Leho optimize cxl-app-layout stories, fix #269

packages/cxl-ui/src/components/cxl-section.js

@@ -1,26 +1,49 @@
-import { LitElement, html, svg } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
 
 @customElement('cxl-section')
 export class CXLSectionElement extends LitElement {
+  @property({ type: Boolean })
+  get hasWave() {
+    return this.classList.contains('has-wave');
+  }
+
+  static get observedAttributes() {
+    return ['class'];
+  }
+
   static get styles() {
     return [cxlSectionStyles];
   }
 
+  // Better Storybook DX.
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+
+    if (name === 'class') {
+      this.requestUpdate();
+    }
+  }
+
   render() {
     return html`
       <section class="wrap">
         <slot></slot>
       </section>
-      ${this.classList.contains('has-wave')
-        ? svg`
-        <svg id="wave" xmlns="http://www.w3.org/2000/svg">
-          <path d="M2054 128.79c-106.66 2.043-211.23 3.9-317.46 12.811-138.06 11.581-273.38 4.22-407.8-23.61C1134.57 77.796 984.18 17.54 742.28 14.259 565.44 11.857 259.72 7.614 0 0v246.37h2560c-65.21-27.369-126.32-63.768-195.36-84.649-98.3-29.68-205.7-34.945-310.64-32.932z" fill="#fff"></path>
-        </svg>
-      `
-        : ''}
+      ${when(
+        this.hasWave,
+        () => html`
+          <svg id="wave" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M2054 128.79c-106.66 2.043-211.23 3.9-317.46 12.811-138.06 11.581-273.38 4.22-407.8-23.61C1134.57 77.796 984.18 17.54 742.28 14.259 565.44 11.857 259.72 7.614 0 0v246.37h2560c-65.21-27.369-126.32-63.768-195.36-84.649-98.3-29.68-205.7-34.945-310.64-32.932z"
+              fill="#fff"
+            ></path>
+          </svg>
+        `
+      )}
     `;
   }
 }

packages/storybook/.storybook/main.js

@@ -17,6 +17,10 @@ module.exports = {
     },
   },
   features: {
+    /**
+     * @see https://github.com/storybookjs/storybook/pull/18464
+     * @todo Update stories to CSF3 `name` property.
+     */
     storyStoreV7: true,
   },
   // @see https://github.com/storybookjs/storybook/issues/12307

packages/storybook/cxl-lumo-styles/body-loading.stories.js

@@ -1,18 +1,15 @@
-import { withKnobs } from '@storybook/addon-knobs';
 import { html } from 'lit';
 import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css';
-import { CXLAppLayout } from '../cxl-ui/cxl-app-layout/layout=1c.stories';
+import { CXLAppLayout1c } from '../cxl-ui/cxl-app-layout.stories';
 
 export default {
-  decorators: [withKnobs],
   title: 'CXL Lumo Styles/Body',
 };
 
 /**
  * CXLLoadingSpinner.
  *
  * @param Loading
- * @returns {TemplateResult}
  * @constructor
  */
 export const CXLLoadingSpinner = ({ Loading }) => {
@@ -28,7 +25,7 @@ export const CXLLoadingSpinner = ({ Loading }) => {
     <style>
       ${cxlLoadingStyles}
     </style>
-    ${CXLAppLayout()}
+    ${CXLAppLayout1c.render(CXLAppLayout1c.args)}
   `;
 };
 

packages/storybook/cxl-lumo-styles/elements.stories.js

@@ -1,19 +1,17 @@
 import { html } from 'lit';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-lumo-styles';
 import '@vaadin/button';
 import '@vaadin/notification';
+import '@vaadin/tooltip';
 
 export default {
-  decorators: [withKnobs],
   title: 'CXL Lumo Styles/Elements',
 };
 
 /**
  * VaadinButton.
  *
  * @param Label
- * @returns {TemplateResult}
  * @constructor
  */
 export const VaadinButton = ({ Label }) => html`
@@ -50,7 +48,6 @@ Object.assign(VaadinButton, {
 /**
  * VaadinHorizontalLayout.
  *
- * @returns {TemplateResult}
  * @constructor
  */
 export const VaadinHorizontalLayout = () => html`
@@ -71,7 +68,6 @@ Object.assign(VaadinHorizontalLayout, {
  * @param Duration
  * @param Position
  * @param Theme
- * @returns {TemplateResult}
  * @constructor
  */
 export const VaadinNotification = ({ Duration, Position, Theme }) => html`
@@ -132,35 +128,27 @@ Object.assign(VaadinNotification, {
 
 /**
  * VaadinTooltip.
- *
- * @param Text
- * @returns {TemplateResult}
- * @constructor
  */
-export const VaadinTooltip = ({ Text }) => {
-  const manualTrigger = boolean('Manual trigger', false);
-
-  return html`
+export const VaadinTooltip = {
+  args: {
+    manualTrigger: false,
+    text: 'Status: publish',
+  },
+  name: 'vaadin-tooltip',
+  render: ({ text, manualTrigger }) => html`
     <h1 id="h1-entry-title" class="entry-title" style="margin-top: 0.75em;">
       <vaadin-tooltip
         for="h1-entry-title"
         ?opened=${manualTrigger}
         ?manual=${manualTrigger}
         position="top-start"
-        text="${Text}"
+        text="${text}"
       ></vaadin-tooltip>
       Grow faster.
     </h1>
-  `;
+  `,
 };
 
-Object.assign(VaadinTooltip, {
-  args: {
-    Text: 'Status: publish',
-  },
-  storyName: 'vaadin-tooltip',
-});
-
 export const VaadinBadge = () => html`
   <span theme="badge">Badge</span>
   <span theme="badge success">Success</span>

packages/storybook/cxl-ui/cxl-app-layout.stories.js

@@ -0,0 +1,80 @@
+import { html, nothing } from 'lit';
+import { CXLAppLayout1cContent } from './cxl-app-layout/layout=1c.story';
+import { CXLAppLayout1cwContent } from './cxl-app-layout/layout=1c-w.story';
+import { CXLAppLayout2clContent } from './cxl-app-layout/layout=2c-l.story';
+import { CXLAppLayout2crContent } from './cxl-app-layout/layout=2c-r.story';
+import { CXLMarketingNav } from './cxl-marketing-nav.stories';
+import { CXLFooterNav } from './footer-nav.stories';
+
+export default {
+  title: 'CXL UI/cxl-app-layout',
+};
+
+const CXLAppLayout = {
+  render: ({ layout, scroll, content }) => html`
+    <style>
+      .entry-content ul {
+        font-family: var(--cxl-lumo-font-secondary), serif;
+      }
+    </style>
+
+    <cxl-app-layout id="container" layout="${layout}" scroll="${scroll || nothing}">
+      ${CXLMarketingNav()} ${content} ${scroll === 'panels' ? nothing : CXLFooterNav()}
+    </cxl-app-layout>
+  `,
+};
+
+// @see https://storybook.js.org/docs/7.0/web-components/writing-stories/stories-for-multiple-components
+export const CXLAppLayout1c = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout1cContent,
+    layout: '1c',
+  },
+  name: '[layout=1c] (default)',
+};
+
+export const CXLAppLayout1cc = {
+  ...CXLAppLayout,
+  args: {
+    ...CXLAppLayout1c.args,
+    layout: '1c-c',
+  },
+  name: '[layout=1c-c]',
+};
+
+export const CXLAppLayout1cw = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout1cwContent,
+    layout: '1c-w',
+  },
+  name: '[layout=1c-w]',
+};
+
+export const CXLAppLayout2cl = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout2clContent({
+      postId: 1234,
+      userId: 5678,
+      playbookSaved: false,
+      hasWidgetBackground: false,
+    }),
+    layout: '2c-l',
+    scroll: 'panels',
+  },
+  name: '[layout=2c-l]',
+};
+
+export const CXLAppLayout2cr = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout2crContent({
+      hasWidgetBackground: false,
+    }),
+    layout: '2c-r',
+    scroll: 'panels',
+  },
+  name: '[layout=2c-r]',
+};

packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js

@@ -0,0 +1,3 @@
+import { html, nothing } from 'lit';
+import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
+import { CXLFooterNav } from '../footer-nav.stories';

packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+import { CXLVaadinAccordionThemeArchive } from '../cxl-vaadin-accordion.stories';
+
+export const CXLAppLayout1cwContent = html`
+  <article class="entry">
+    <header class="entry-header">
+      <label>Page</label>
+      <h1 class="entry-title">Join the top 1% of digital marketing.</h1>
+    </header>
+    <div class="entry-content">
+      <h2>
+        We find the absolute best practitioners in the world, and get them to teach their craft.
+        Learn from the top performers to become one.
+      </h2>
+      <p>
+        Self-paced online digital marketing courses on all things conversion optimization, digital
+        analytics and digital marketing.
+      </p>
+      <p><strong>All in a single subscription.</strong></p>
+
+      ${CXLVaadinAccordionThemeArchive()}
+    </div>
+  </article>
+`;