fix(storybook): added lumos theme to storybook (#718)

Co-authored-by: Yana Harris <ybernadskaya@gmail.com>
momentum-design · Dec 8, 2020 · 408a0c2 · 408a0c2
1 parent 72d5131
commit 408a0c2
Show file tree

Hide file tree

Showing 32 changed files with 86 additions and 51 deletions.
diff --git a/web-components/src/components/activity-button/ActivityButton.stories.ts b/web-components/src/components/activity-button/ActivityButton.stories.ts
@@ -44,6 +44,7 @@ export default {
 
 export const ActivityButton = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const label = text("Title", "");
   const labelSize = "Size";
   const defaultValue = 68;
@@ -54,7 +55,7 @@ export const ActivityButton = () => {
   const disabled = boolean("Disabled", false);
 
   return html`
-  <md-theme class="theme-toggle" id="activity-button" ?darkTheme=${darkTheme}>
+  <md-theme class="theme-toggle" id="activity-button" ?darkTheme=${darkTheme} ?lumos=${lumos}>
     <md-activity-button ariaLabel="${label}" .label="${label}" .type="${type}" .size="${size}" ?disabled="${disabled}"></md-activity-button>
   </md-theme>
   `;

diff --git a/web-components/src/components/alert-banner/AlertBanner.stories.ts b/web-components/src/components/alert-banner/AlertBanner.stories.ts
@@ -32,12 +32,13 @@ export default {
 
 export const AlertBanner = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const type = select("type", ["default", "warning", "error"], "default");
   const closable = boolean("closable", false);
   const textContent = text("alert message", "Test Alert Message");
 
   return html`
-    <md-theme class="theme-toggle" id="alert-banner" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="alert-banner" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-alert-banner @alertBanner-hide=${(action('dispatchEvent'))} show type="${type}" ?closable=${closable} message="${textContent}">
         ${textContent ? `${textContent}` : `Text with slotted tag element`}
       </md-alert-banner>

diff --git a/web-components/src/components/avatar/Avatar.stories.ts b/web-components/src/components/avatar/Avatar.stories.ts
@@ -59,6 +59,7 @@ const options = {
 
 export const Avatar = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const type = select("Type", avatarType, "active");
   const title = text("Title", "Rachell Harris");
   const preDefinedColor = select("PreDefined Color", options, "mint");
@@ -74,7 +75,7 @@ export const Avatar = () => {
 
   if (composite) {
     return html`
-      <md-theme class="theme-toggle" id="avatar" ?darkTheme=${darkTheme}>
+      <md-theme class="theme-toggle" id="avatar" ?darkTheme=${darkTheme} ?lumos=${lumos}>
         <md-composite-avatar .size=${sizeComos}>
           <md-avatar title="Anthony Russell" type="dnd" has-notification alt="Avatar"></md-avatar>
           <md-avatar type="typing" title="Alyson Hoagland Pace" alt="Avatar"></md-avatar>

diff --git a/web-components/src/components/badge/Badge.stories.ts b/web-components/src/components/badge/Badge.stories.ts
@@ -34,17 +34,18 @@ export default {
 
 export const Badge = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const color = select("Color", badgeColor, "blue");
-  const bgColor = text("BG Color Overrides", "blue");
-  const textColor = text("Text Color Override", "white");
+  const bgColor = text("BG Color Overrides", "");
+  const textColor = text("Text Color Override", "");
   const height = text("Height Override", "");
   const width = text("Width Override", "");
   const circle = boolean("Circle", false);
   const small = boolean("Small", false);
   const icon = boolean("With icon", false)
 
   return html`
-  <md-theme class="theme-toggle" id="badge" ?darkTheme=${darkTheme}>
+  <md-theme class="theme-toggle" id="badge" ?darkTheme=${darkTheme} ?lumos=${lumos}>
     <md-badge .color=${color} .bgColor=${bgColor} .small=${small} .textColor=${textColor} .height=${height} .width=${width} .circle=${circle}>
       ${icon ? html`<md-icon name="chat-active_16"></md-icon>` : html`Badge ${color}`}
     </md-badge>

diff --git a/web-components/src/components/breadcrumb/Breadcrumb.stories.ts b/web-components/src/components/breadcrumb/Breadcrumb.stories.ts
@@ -44,9 +44,10 @@ const breadCrumb = [
 
 export const Breadcrumb = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
 
   return html`
-    <md-theme class="theme-toggle" id="breadcrumb" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="breadcrumb" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-breadcrumb .navCrumbs="${breadCrumb}"></md-breadcrumb>
     </md-theme>
   `;

diff --git a/web-components/src/components/button/Button.stories.ts b/web-components/src/components/button/Button.stories.ts
@@ -38,6 +38,7 @@ export default {
 
 export const Button = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const variant = select("Variant", buttonVariant, "secondary");
   const color = select("Color", buttonColor, "");
   const disabled = boolean("Disabled Mode", false);
@@ -48,7 +49,7 @@ export const Button = () => {
   const type = select("type", buttonType, "button");
 
   return html`
-    <md-theme class="theme-toggle" id="button" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="button" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-button @button-click=${(action('ditail'))} .variant=${variant} ariaLabel="Button Storybook" .color=${color} .disabled=${disabled} .circle=${circle} .loading=${loading} .size=${size} .tag=${tag} .type=${type}>
         ${circle ? html`<md-icon slot="icon" name="icon-search_12"></md-icon>` : html`<span slot="text">Button</span>` }
       </md-button>

diff --git a/web-components/src/components/chat-message/ChatMessage.stories.ts b/web-components/src/components/chat-message/ChatMessage.stories.ts
@@ -24,13 +24,14 @@ export default {
 };
 
 export const ChatMessage = () => {
-  const darkTheme = boolean("darkMode", false);
+  const darkTheme = boolean("Dark Theme", false);
+  const lumos = boolean("Lumos Theme", false);
   const title = text("title", "John Doe");
   const message = text("message", "I have issue with my silencer");
   const selfMode = boolean("Self", false);
 
   return html`
-  <md-theme class="theme-toggle" id="chat" ?darkTheme=${darkTheme}>
+  <md-theme class="theme-toggle" id="chat" ?darkTheme=${darkTheme} ?lumos=${lumos}>
     <md-chat-message .self=${selfMode} title=${title} time="11:27AM">
       <p slot="message">${message}</p>
     </md-chat-message>

diff --git a/web-components/src/components/checkbox/Checkbox.stories.ts b/web-components/src/components/checkbox/Checkbox.stories.ts
@@ -26,6 +26,7 @@ export default {
 
 export const Checkbox = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const check = boolean("Checked state", false);
   const label = text("Label", "Developing")
   const disable = boolean("Disabled State", false);
@@ -35,7 +36,7 @@ export const Checkbox = () => {
   return html`
     ${group ?
     html`
-      <md-theme class="theme-toggle" id="checkbox-group" ?darkTheme=${darkTheme}>
+      <md-theme class="theme-toggle" id="checkbox-group" ?darkTheme=${darkTheme} ?lumos=${lumos}>
         <md-checkboxgroup group-label="group_process">
           <md-checkbox slot="checkbox" .checked=${check}>Developing</md-checkbox>
           <md-checkbox slot="checkbox" .disabled=${disable}>Linting</md-checkbox>

diff --git a/web-components/src/components/chip/Chip.stories.ts b/web-components/src/components/chip/Chip.stories.ts
@@ -28,6 +28,7 @@ export default {
 
 export const Chip = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const color = select("Color", badgeColor, "blue");
   const bgColor = text("BG Color Overrides", "blue");
   const textColor = text("Text Color Override", "white");
@@ -47,16 +48,16 @@ export const Chip = () => {
 
     return type === "indeterminate"
       ? html`
-        <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme}>
+        <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
           <md-chip value="example-chip@cisco.com" indeterminateProgress> </md-chip>
         </md-theme>`
       : html`
-        <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme}>
+        <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
           <md-chip value="example-chip@cisco.com" determinateProgress="${value}"> </md-chip>
         </md-theme>`;
   } else if (slot) {
     return html`
-    <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-chip value="example-chip@cisco.com">
         <md-icon name="icon-alert_16" slot="custom-left-content"></md-icon>
         <md-icon name="icon-alarm_16" slot="custom-right-content"></md-icon>
@@ -68,12 +69,12 @@ export const Chip = () => {
     const colorIcon = select("icon color", iconColorSample, "");
 
     return html`
-    <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-chip value="example-chip@cisco.com" icon="${icon}" iconColor="${colorIcon}"> </md-chip>
     </md-theme>`;
   } else {
     return html`
-      <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme}>
+      <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
         <md-chip .color=${color} .bgColor=${bgColor} .textColor=${textColor} .small=${small} .height=${height} .value="${valueText}" .disabled=${disabled} ?readonly=${readonly}></md-chip>
       </md-theme>
     `;

diff --git a/web-components/src/components/combobox/ComboBox.stories.ts b/web-components/src/components/combobox/ComboBox.stories.ts
@@ -27,6 +27,7 @@ export default {
 
 export const Combobox = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const placeholder = text("placeholder", "Add Country");
   const disabled = boolean("Disabled", false);
   const trimSpace = boolean("Trim white space", false);
@@ -41,34 +42,34 @@ export const Combobox = () => {
 
   if (init) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox placeholder=${placeholder} .options=${comboBoxOptions} ?disabled=${disabled} ?search-trim-space=${trimSpace} .value=${[comboBoxOptions[3]]}></md-combobox>
     </md-theme>
     `;
   } else if (multi) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox placeholder=${placeholder} .options=${comboBoxOptions} is-multi></md-combobox>
     </md-theme>`;
   } else if (customValue) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}> 
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}> 
       <md-combobox placeholder=${placeholder} .options=${comboBoxOptions} is-multi=${multi} allow-custom-value></md-combobox>
     </md-theme>`;
   } else if (multiInit) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox placeholder=${placeholder} .options=${comboBoxOptions} is-multi .value=${[comboBoxOptions[3], comboBoxOptions[5]]}></md-combobox>
     </md-theme>
   `;
   } else if (object) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox placeholder=${placeholder} .options=${comboBoxObjectOptions} option-id="id" option-value="country" is-multi=${multi}></md-combobox>
     </md-theme>`;
   } else if (objectInit) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox
         placeholder=${placeholder}
         .options=${comboBoxObjectOptions}
@@ -82,7 +83,7 @@ export const Combobox = () => {
     `;
   } else if (customContent) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox with-custom-content is-multi=${multi}>
         <div slot="one" aria-label="Facebook" display-value="Facebook">
           <span>Facebook</span>
@@ -104,7 +105,7 @@ export const Combobox = () => {
     </md-theme>`;
   } else if (customContentInit) {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox with-custom-content is-multi .value=${[{ id: "Wikipedia", value: "Wikipedia" }]}>
         <div slot="one" aria-label="Facebook" display-value="Facebook">
           <span>Facebook</span>
@@ -126,7 +127,7 @@ export const Combobox = () => {
   </md-theme>`;
   } else {
     return html`
-    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="combobox" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-combobox .options=${comboBoxOptions} placeholder=${placeholder} ?disabled=${disabled} ?search-trim-space=${trimSpace}></md-combobox>
     </md-theme>`;
   }

diff --git a/web-components/src/components/datepicker/DatePicker.stories.ts b/web-components/src/components/datepicker/DatePicker.stories.ts
@@ -17,6 +17,7 @@ export default {
 
 export const DatePicker = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const minDate = text(
     "minimum date",
     now()
@@ -30,7 +31,7 @@ export const DatePicker = () => {
       .toSQLDate()
   );
   return html`
-    <md-theme ?darkTheme=${darkTheme}>
+    <md-theme ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-datepicker minDate=${minDate} maxDate=${maxDate}></md-datepicker>
     </md-theme>
   `;

diff --git a/web-components/src/components/editable-textfield/EditableTextfield.stories.ts b/web-components/src/components/editable-textfield/EditableTextfield.stories.ts
@@ -61,6 +61,7 @@ const messages: EditableMap = {
 
 export const EditableTextfield = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const fieldAlignment = select("Alignment", alignment, "left");
   const disabledSetting = boolean("disabled", false);
   const messageStatus = boolean("Add message Status", false);
@@ -73,7 +74,7 @@ export const EditableTextfield = () => {
     const message = select("message", messageOptions, "error");
 
     return html`
-    <md-theme class="theme-toggle" id="button" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="editable-field" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-editable-field .message=${{ ...messages[message] }}>
         ${message} Status
       </md-editable-field>

diff --git a/web-components/src/components/floating-modal/FloatingModal.stories.ts b/web-components/src/components/floating-modal/FloatingModal.stories.ts
@@ -44,13 +44,14 @@ export default {
 
 export const FloatingModal = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const show = boolean("show", false);
   const full = boolean("full-screen", false);
   const fixed = boolean("fixed-strategy", false)
 
   return html`
 
-    <md-theme class="theme-toggle" id="floating" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="floating" ?darkTheme=${darkTheme} ?lumos=${lumos}>
     <md-floating-modal ?show=${show} ?full-screen=${full} ?fixed-strategy=${fixed}>
       <md-radiogroup group-label="group_process">
         <md-radio slot="radio" value="Option 1">Option 1</md-radio>

diff --git a/web-components/src/components/icon/Icon.stories.ts b/web-components/src/components/icon/Icon.stories.ts
@@ -39,6 +39,7 @@ export default {
 
 export const Icon = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const name = select("Name", iconNames, "arrow-up_16");
   const color = text("Color", "red");
   const title = text("Title", "");
@@ -48,7 +49,7 @@ export const Icon = () => {
   const sizeOverrided = boolean("Size Override", false);
 
   return html`
-    <md-theme class="theme-toggle" id="floating" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="icon" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-icon 
         .name=${`icon-${name}`} 
         .title=${title} 

diff --git a/web-components/src/components/input/Input.stories.ts b/web-components/src/components/input/Input.stories.ts
@@ -64,6 +64,7 @@ const messageArr = [
 
 export const Input = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const placeholder = text("Enter Text", "Enter Text");
   const label = text("Label", "Label");
   const value = text("Value Text", "Value Text");
@@ -85,7 +86,7 @@ export const Input = () => {
     const nested = select("Nested Level", nestedLevel, 1);
 
     return html`
-    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-input label="Default Input"></md-input>
       <md-input label="Input Nested Level" containerSize="small-12" .nestedLevel=${nested}></md-input>
     </md-theme>
@@ -95,7 +96,7 @@ export const Input = () => {
     const nameIcon = select("Icon Name", iconNames, "accessibility_16");
 
     return html`
-      <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme}>
+      <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme} ?lumos=${lumos}>
         <md-input
           label="Input Icon"
           containerSize="small-12"
@@ -108,7 +109,7 @@ export const Input = () => {
     `;
   } else {
     return html`
-    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-input 
         .label=${label} 
         .placeholder=${placeholder} 

diff --git a/web-components/src/components/label/Label.stories.ts b/web-components/src/components/label/Label.stories.ts
@@ -36,13 +36,14 @@ export default {
 
 export const Label = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const label = text("Label", "Label");
   const withInput = boolean("With Input", false);
   const secondaryLabel = text("Secondary Label", "");
 
   if (withInput) {
     return html`
-    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="label" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-input @label-click=${action('click')} .label=${label} placeholder="placeholder text" .secondaryLabel=${secondaryLabel}> </md-input>
     </md-theme>
     `;

diff --git a/web-components/src/components/link/Link.stories.ts b/web-components/src/components/link/Link.stories.ts
@@ -26,6 +26,7 @@ export default {
 
 export const Link = () => {
   const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
   const href = text("href", "http://google.com");
   const tag = select("HTML Tag", linkTag, "");
   const disabled = boolean("Disabled", false);
@@ -34,7 +35,7 @@ export const Link = () => {
   const color = select("Link color", LinkColor, "blue")
 
   return html`
-    <md-theme class="theme-toggle" id="link" ?darkTheme=${darkTheme}>
+    <md-theme class="theme-toggle" id="link" ?darkTheme=${darkTheme} ?lumos=${lumos}>
       <md-link 
         .href=${href} 
         .tag=${tag}