@operato/context 2.0.0-alpha.99 → 2.0.0-beta.0

package/stories/ox-context-page-toolbar-select.stories.ts

@@ -1,18 +1,20 @@
 import '@material/web/icon/icon.js'
 import '../src/layouts/ox-context-page-toolbar.js'
 import '../src/tools/ox-page-action-context-bar.js'
-import { CommonHeaderStyles } from '@operato/styles'
 import { TOOL_POSITION } from '@operato/layout'
+import { sleep } from '@operato/utils'
 
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-page-toolbar-select',
   component: 'ox-context-page-toolbar',
   argTypes: {
-    label: { control: 'string' }
+    label: { control: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -24,71 +26,105 @@ interface Story<T> {
 
 interface ArgTypes {
   label?: string
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <style>
-    body {
-      background-color: white;
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
     }
 
-    ${CommonHeaderStyles.cssText}
+    ox-buttons-radio {
+      padding: 20px;
+    }
   </style>
 
-  <div style="height:600px;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <div class="header">
-      <div class="title">
-        ${label}
-      </div>
-
-      <div class="filters">
-        <label>Filter</label><input type="text"></input>
-      </div>
-
-      <ox-context-page-toolbar class="actions" 
-      .tools=${[
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        },
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'smile',
-                action: () => {},
-                select: ['', 'delete', 'hahaha', 'hohoho']
-              },
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              }
-            ]}
-          ></ox-page-action-context-bar>`
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: false
-      }}
-        
-      }> </ox-context-page-toolbar>
+      <div class="title">${label}</div>
+
+      <div class="filters"><label>Filter</label><input type="text" /></div>
+
+      <ox-context-page-toolbar
+        class="actions"
+        .tools=${[
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>download</md-icon> `,
+            context: 'exportable'
+          },
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>upload</md-icon> `,
+            context: 'importable'
+          },
+          {
+            position: TOOL_POSITION.CENTER,
+            template: html`<ox-page-action-context-bar
+              .actions=${[
+                {
+                  type: 'icon',
+                  title: 'favorite',
+                  icon: 'favorite',
+                  action: async () => {
+                    await sleep(1000)
+                  }
+                },
+                {
+                  title: 'smile',
+                  action: () => {},
+                  select: ['', 'delete', 'hahaha', 'hohoho']
+                },
+                {
+                  title: 'save',
+                  action: () => {},
+                  icon: 'save'
+                }
+              ]}
+            ></ox-page-action-context-bar>`
+          }
+        ]}
+        .context=${{
+          exportable: true,
+          importable: true,
+          toolbar: false
+        }}
+      >
+      </ox-context-page-toolbar>
     </div>
   </div>
 `

package/stories/ox-context-page-toolbar.stories.ts

@@ -7,12 +7,14 @@ import { TOOL_POSITION } from '@operato/layout'
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-page-toolbar',
   component: 'ox-context-page-toolbar',
   argTypes: {
-    label: { control: 'string' }
+    label: { control: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -24,79 +26,106 @@ interface Story<T> {
 
 interface ArgTypes {
   label?: string
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
-  
   <style>
-    body {
-      background-color: white;
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
     }
 
-    ${CommonHeaderStyles.cssText}
+    ox-buttons-radio {
+      padding: 20px;
+    }
   </style>
 
-  <div style="height:600px;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <div class="header">
-      <div class="title">
-        ${label}
-      </div>
-
-      <div class="filters">
-        <label>Filter</label><input type="text"></input>
-      </div>
-
-      <ox-context-page-toolbar class="actions" 
-      .tools=${[
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        },
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete',
-                emphasis: {
-                  danger: true
+      <div class="title">${label}</div>
+
+      <div class="filters"><label>Filter</label><input type="text" /></div>
+
+      <ox-context-page-toolbar
+        class="actions"
+        .tools=${[
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>download</md-icon> `,
+            context: 'exportable'
+          },
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>upload</md-icon> `,
+            context: 'importable'
+          },
+          {
+            position: TOOL_POSITION.CENTER,
+            template: html`<ox-page-action-context-bar
+              .actions=${[
+                {
+                  title: 'save',
+                  action: () => {},
+                  icon: 'save'
+                },
+                {
+                  title: 'copy',
+                  action: () => {},
+                  icon: 'content_copy'
+                },
+                {
+                  title: 'delete',
+                  action: () => {},
+                  icon: 'delete',
+                  emphasis: {
+                    danger: true
+                  }
                 }
-              }
-            ]}
-          ></ox-page-action-context-bar>`
+              ]}
+            ></ox-page-action-context-bar>`
+          }
+        ]}
+        .context=${{
+          exportable: true,
+          importable: true,
+          toolbar: false
+        }}
         }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: false
-      }}
-        
-      }> </ox-context-page-toolbar>
+      >
+      </ox-context-page-toolbar>
     </div>
   </div>
 `

package/stories/ox-context-toolbar-complex.stories.ts

@@ -6,11 +6,14 @@ import { TOOL_POSITION } from '@operato/layout'
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-toolbar complex',
   component: 'ox-context-toolbar',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -19,12 +22,16 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-const Template: Story<ArgTypes> = () => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
-  <link href="/themes/context-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,12 +47,30 @@ const Template: Story<ArgTypes> = () => html`
   />
 
   <style>
-    body {
-      background-color: white;
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
+    }
+
+    ox-buttons-radio {
+      padding: 20px;
     }
   </style>
 
-  <div style="height:100px; padding: 10px; background-color: black;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[
         {

package/stories/ox-context-toolbar-cooldown.stories.ts

@@ -0,0 +1,112 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import { TOOL_POSITION } from '@operato/layout'
+
+import { sleep } from '@operato/utils'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-toolbar empty',
+  component: 'ox-context-toolbar',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = () => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" rel="stylesheet" />
+  <link href="/themes/context-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+      background-color: var(--md-sys-color-surface);
+    }
+  </style>
+
+  <div style="display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: black;">
+    <ox-context-toolbar
+      .tools=${[]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+
+    <ox-context-toolbar
+      .tools=${[
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+
+    <ox-context-toolbar
+      .tools=${[
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                type: 'icon',
+                action: async () => {},
+                icon: 'check'
+              },
+              {
+                title: 'short-take(0secs)',
+                action: async () => {},
+                icon: 'delete'
+              },
+              {
+                title: 'long-take(3secs)',
+                action: async () => {
+                  await sleep(3000)
+                },
+                icon: 'save'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/stories/ox-context-toolbar-empty.stories.ts

@@ -3,14 +3,17 @@ import '../src/layouts/ox-context-toolbar.js'
 import '../src/tools/ox-page-action-context-bar.js'
 import { TOOL_POSITION } from '@operato/layout'
 
-import '@operato/styles'
+import { sleep } from '@operato/utils'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-toolbar empty',
   component: 'ox-context-toolbar',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -19,12 +22,16 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-const Template: Story<ArgTypes> = () => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
-  <link href="/themes/context-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,12 +47,30 @@ const Template: Story<ArgTypes> = () => html`
   />
 
   <style>
-    body {
-      background-color: white;
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
+    }
+
+    ox-buttons-radio {
+      padding: 20px;
     }
   </style>
 
-  <div style="display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: black;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[]}
       .context=${{
@@ -75,15 +100,7 @@ const Template: Story<ArgTypes> = () => html`
       .tools=${[
         {
           position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              }
-            ]}
-          ></ox-page-action-context-bar>`
+          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
         }
       ]}
       .context=${{