@xplortech/apollo-core 0.0.6 → 0.1.0

package/dist/stories/utility-bar.stories.js

@@ -0,0 +1,94 @@
+export default {
+  title: "Components/Navigation/Utility Bar",
+  argTypes: {
+    mainSlot: {
+      type: { name: 'string', required: false },
+    },
+    asideSlot: {
+      type: { name: 'string', required: false },
+    },
+  },
+};
+const Story = ({ mainSlot, asideSlot }) => `
+    <div style="width: 85vw;">
+        <xpl-utility-bar>
+            <ul slot="main">
+                ${mainSlot}
+            </ul>
+            <ul slot="aside">
+                ${asideSlot}
+            </ul>
+        </xpl-utility-bar>
+    </div>
+`;
+// This is a temporary hack to include a fontawesome icon as an example in this story. Icons will eventually be their own apollo component (or pure fontawesome).
+// When that happens we should update this story to use the component instead of the following svg.
+const bars = `
+    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
+`;
+const setMainSlot = () => `<li>${bars}</li>`;
+const setAsideSlot = (isMobile) => `
+    <li>
+        <xpl-button
+            type="submit"
+            variant="secondary"
+            ${isMobile ? 'icon-only' : 'icon-leading'}
+            icon="user-circle"
+            >Find Customer</xpl-button
+        >
+    </li>
+    <li>
+        <xpl-avatar
+            name="Jeremy"
+            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
+            status="inactive"
+        ></xpl-avatar>
+    </li>
+`;
+const globalParams = {
+  layout: "centered",
+  "web-component": {
+    render: ({ mainSlot, asideSlot }) => `
+            <xpl-utility-bar>
+                <ul slot="main">
+                    ${mainSlot}
+                </ul>
+                <ul slot="main">
+                    ${asideSlot}
+                </ul>
+            </xpl-utility-bar>
+        `,
+  },
+  html: {
+    render: ({ mainSlot, asideSlot }) => `
+            <nav class="xpl-utility-bar">
+                <ul slot="main">
+                    ${mainSlot}
+                </ul>
+                <ul slot="main">
+                    ${asideSlot}
+                </ul>
+            </nav>
+        `,
+  },
+};
+// BEGIN: Story for Utility Bar on Mobile
+export const UtilityBarMobile = Story.bind({});
+UtilityBarMobile.args = {
+  mainSlot: setMainSlot(),
+  asideSlot: setAsideSlot(true),
+};
+UtilityBarMobile.parameters = Object.assign(Object.assign({}, globalParams), { viewport: {
+    defaultViewport: 'iphone12',
+  } });
+UtilityBarMobile.storyName = 'Mobile';
+// END: Story for Utility Bar on Mobile
+// BEGIN: Story for Utility Bar on Desktop
+export const UtilityBarDesktop = Story.bind({});
+UtilityBarDesktop.args = {
+  mainSlot: setMainSlot(),
+  asideSlot: setAsideSlot(false),
+};
+UtilityBarDesktop.parameters = Object.assign({}, globalParams);
+UtilityBarDesktop.storyName = 'Desktop';
+// END: Story for Utility Bar on Desktop

package/dist/types/components/xpl-avatar/xpl-avatar.d.ts

@@ -0,0 +1,11 @@
+export declare class XplAvatar {
+  color?: "green" | "yellow" | "pink" | "primary" | "secondary";
+  disabled?: boolean;
+  href?: string;
+  name?: string;
+  size?: "md" | "sm";
+  src?: string;
+  status?: "active" | "warning" | "inactive";
+  target?: string;
+  render(): any;
+}

package/dist/types/components/xpl-badge/xpl-badge.d.ts

@@ -0,0 +1,5 @@
+export declare class XplBadge {
+  dot?: boolean;
+  variant?: "success" | "warning" | "inactive" | "error";
+  render(): any;
+}

package/dist/types/{.stencil → components}/xpl-button/xpl-button.d.ts

@@ -6,8 +6,10 @@ export declare class XplButton {
   icon?: string;
   iconOnly?: boolean;
   iconTrailing?: boolean;
+  name?: string;
   size: "default" | "sm" | "xs";
-  type?: string;
-  variant: "primary" | "secondary" | "subtle" | "error";
+  type?: "submit" | "reset" | "button";
+  value?: string;
+  variant: "primary" | "secondary" | "subtle" | "warning";
   render(): any;
 }

package/dist/types/components/xpl-checkbox/xpl-checkbox.d.ts

@@ -0,0 +1,11 @@
+export declare class XplCheckbox {
+  checked?: boolean;
+  description?: string;
+  disabled?: boolean;
+  indeterminate?: boolean;
+  name?: string;
+  required?: boolean;
+  value?: string;
+  id: string;
+  render(): any;
+}

package/dist/types/components/xpl-choicelist/xpl-choicelist.d.ts

@@ -0,0 +1,3 @@
+export declare class XplChoicelist {
+  render(): any;
+}

package/dist/types/components/xpl-radio/xpl-radio.d.ts

@@ -0,0 +1,10 @@
+export declare class XplRadio {
+  checked?: boolean;
+  description?: string;
+  disabled?: boolean;
+  name?: string;
+  required?: boolean;
+  value?: string;
+  id: string;
+  render(): any;
+}

package/dist/types/{.stencil → components}/xpl-table/xpl-table.d.ts

@@ -1,12 +1,12 @@
 import { Event, EventEmitter } from "../../stencil-public-runtime";
 export declare class XplTable {
   columns: string[];
-  data: (string | number)[][];
+  data: string[][];
   freeze: boolean;
   multiselect: boolean;
   striped: boolean;
   areAllSelected: boolean;
-  rowData: (string | number)[][];
+  rowData: string[][];
   hasScrolled: boolean;
   selected: boolean[];
   tableSelect: EventEmitter;

package/dist/types/components/xpl-utility-bar/xpl-utility-bar.d.ts

@@ -0,0 +1,3 @@
+export declare class XplUtilityBar {
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -6,15 +6,42 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface XplAvatar {
+        "color"?: "green" | "yellow" | "pink" | "primary" | "secondary";
+        "disabled"?: boolean;
+        "href"?: string;
+        "name"?: string;
+        "size"?: "md" | "sm";
+        "src"?: string;
+        "status"?: "active" | "warning" | "inactive";
+        "target"?: string;
+    }
+    interface XplBadge {
+        "dot"?: boolean;
+        "variant"?: "success" | "warning" | "inactive" | "error";
+    }
     interface XplButton {
         "disabled"?: boolean;
         "href"?: string;
         "icon"?: string;
         "iconOnly"?: boolean;
         "iconTrailing"?: boolean;
+        "name"?: string;
         "size": "default" | "sm" | "xs";
-        "type"?: string;
-        "variant": "primary" | "secondary" | "subtle" | "error";
+        "type"?: "submit" | "reset" | "button";
+        "value"?: string;
+        "variant": "primary" | "secondary" | "subtle" | "warning";
+    }
+    interface XplCheckbox {
+        "checked"?: boolean;
+        "description"?: string;
+        "disabled"?: boolean;
+        "indeterminate"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "value"?: string;
+    }
+    interface XplChoicelist {
     }
     interface XplPagination {
         /**
@@ -26,49 +53,128 @@ export namespace Components {
         "total": number;
         "waitForCallback": boolean;
     }
+    interface XplRadio {
+        "checked"?: boolean;
+        "description"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "value"?: string;
+    }
     interface XplTable {
         "columns": string[];
-        "data": (string | number)[][];
+        "data": string[][];
         "freeze": boolean;
         "multiselect": boolean;
         "striped": boolean;
     }
+    interface XplUtilityBar {
+    }
 }
 declare global {
+    interface HTMLXplAvatarElement extends Components.XplAvatar, HTMLStencilElement {
+    }
+    var HTMLXplAvatarElement: {
+        prototype: HTMLXplAvatarElement;
+        new (): HTMLXplAvatarElement;
+    };
+    interface HTMLXplBadgeElement extends Components.XplBadge, HTMLStencilElement {
+    }
+    var HTMLXplBadgeElement: {
+        prototype: HTMLXplBadgeElement;
+        new (): HTMLXplBadgeElement;
+    };
     interface HTMLXplButtonElement extends Components.XplButton, HTMLStencilElement {
     }
     var HTMLXplButtonElement: {
         prototype: HTMLXplButtonElement;
         new (): HTMLXplButtonElement;
     };
+    interface HTMLXplCheckboxElement extends Components.XplCheckbox, HTMLStencilElement {
+    }
+    var HTMLXplCheckboxElement: {
+        prototype: HTMLXplCheckboxElement;
+        new (): HTMLXplCheckboxElement;
+    };
+    interface HTMLXplChoicelistElement extends Components.XplChoicelist, HTMLStencilElement {
+    }
+    var HTMLXplChoicelistElement: {
+        prototype: HTMLXplChoicelistElement;
+        new (): HTMLXplChoicelistElement;
+    };
     interface HTMLXplPaginationElement extends Components.XplPagination, HTMLStencilElement {
     }
     var HTMLXplPaginationElement: {
         prototype: HTMLXplPaginationElement;
         new (): HTMLXplPaginationElement;
     };
+    interface HTMLXplRadioElement extends Components.XplRadio, HTMLStencilElement {
+    }
+    var HTMLXplRadioElement: {
+        prototype: HTMLXplRadioElement;
+        new (): HTMLXplRadioElement;
+    };
     interface HTMLXplTableElement extends Components.XplTable, HTMLStencilElement {
     }
     var HTMLXplTableElement: {
         prototype: HTMLXplTableElement;
         new (): HTMLXplTableElement;
     };
+    interface HTMLXplUtilityBarElement extends Components.XplUtilityBar, HTMLStencilElement {
+    }
+    var HTMLXplUtilityBarElement: {
+        prototype: HTMLXplUtilityBarElement;
+        new (): HTMLXplUtilityBarElement;
+    };
     interface HTMLElementTagNameMap {
+        "xpl-avatar": HTMLXplAvatarElement;
+        "xpl-badge": HTMLXplBadgeElement;
         "xpl-button": HTMLXplButtonElement;
+        "xpl-checkbox": HTMLXplCheckboxElement;
+        "xpl-choicelist": HTMLXplChoicelistElement;
         "xpl-pagination": HTMLXplPaginationElement;
+        "xpl-radio": HTMLXplRadioElement;
         "xpl-table": HTMLXplTableElement;
+        "xpl-utility-bar": HTMLXplUtilityBarElement;
     }
 }
 declare namespace LocalJSX {
+    interface XplAvatar {
+        "color"?: "green" | "yellow" | "pink" | "primary" | "secondary";
+        "disabled"?: boolean;
+        "href"?: string;
+        "name"?: string;
+        "size"?: "md" | "sm";
+        "src"?: string;
+        "status"?: "active" | "warning" | "inactive";
+        "target"?: string;
+    }
+    interface XplBadge {
+        "dot"?: boolean;
+        "variant"?: "success" | "warning" | "inactive" | "error";
+    }
     interface XplButton {
         "disabled"?: boolean;
         "href"?: string;
         "icon"?: string;
         "iconOnly"?: boolean;
         "iconTrailing"?: boolean;
+        "name"?: string;
         "size"?: "default" | "sm" | "xs";
-        "type"?: string;
-        "variant"?: "primary" | "secondary" | "subtle" | "error";
+        "type"?: "submit" | "reset" | "button";
+        "value"?: string;
+        "variant"?: "primary" | "secondary" | "subtle" | "warning";
+    }
+    interface XplCheckbox {
+        "checked"?: boolean;
+        "description"?: string;
+        "disabled"?: boolean;
+        "indeterminate"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "value"?: string;
+    }
+    interface XplChoicelist {
     }
     interface XplPagination {
         "onPage"?: (event: CustomEvent<any>) => void;
@@ -76,27 +182,49 @@ declare namespace LocalJSX {
         "total"?: number;
         "waitForCallback"?: boolean;
     }
+    interface XplRadio {
+        "checked"?: boolean;
+        "description"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "value"?: string;
+    }
     interface XplTable {
         "columns"?: string[];
-        "data"?: (string | number)[][];
+        "data"?: string[][];
         "freeze"?: boolean;
         "multiselect"?: boolean;
         "onTableSelect"?: (event: CustomEvent<any>) => void;
         "striped"?: boolean;
     }
+    interface XplUtilityBar {
+    }
     interface IntrinsicElements {
+        "xpl-avatar": XplAvatar;
+        "xpl-badge": XplBadge;
         "xpl-button": XplButton;
+        "xpl-checkbox": XplCheckbox;
+        "xpl-choicelist": XplChoicelist;
         "xpl-pagination": XplPagination;
+        "xpl-radio": XplRadio;
         "xpl-table": XplTable;
+        "xpl-utility-bar": XplUtilityBar;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "xpl-avatar": LocalJSX.XplAvatar & JSXBase.HTMLAttributes<HTMLXplAvatarElement>;
+            "xpl-badge": LocalJSX.XplBadge & JSXBase.HTMLAttributes<HTMLXplBadgeElement>;
             "xpl-button": LocalJSX.XplButton & JSXBase.HTMLAttributes<HTMLXplButtonElement>;
+            "xpl-checkbox": LocalJSX.XplCheckbox & JSXBase.HTMLAttributes<HTMLXplCheckboxElement>;
+            "xpl-choicelist": LocalJSX.XplChoicelist & JSXBase.HTMLAttributes<HTMLXplChoicelistElement>;
             "xpl-pagination": LocalJSX.XplPagination & JSXBase.HTMLAttributes<HTMLXplPaginationElement>;
+            "xpl-radio": LocalJSX.XplRadio & JSXBase.HTMLAttributes<HTMLXplRadioElement>;
             "xpl-table": LocalJSX.XplTable & JSXBase.HTMLAttributes<HTMLXplTableElement>;
+            "xpl-utility-bar": LocalJSX.XplUtilityBar & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
         }
     }
 }

package/dist/types/home/runner/work/apollo/apollo/.stencil/stories/avatar.stories.d.ts

@@ -0,0 +1,91 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Avatar: {
+  ({ placeholder, name, size, color, status, link, disabled, }: {
+    placeholder: any;
+    name: any;
+    size: any;
+    color: any;
+    status: any;
+    link: any;
+    disabled: any;
+  }): string;
+  argTypes: {
+    placeholder: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    name: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    size: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    color: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    status: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    link: {
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    layout: string;
+    "web-component": {
+      render({ placeholder, name, size, color, status, link, disabled }: {
+        placeholder: any;
+        name: any;
+        size: any;
+        color: any;
+        status: any;
+        link: any;
+        disabled: any;
+      }): string;
+    };
+    html: {
+      render({ placeholder, name, size, color, status, link, disabled }: {
+        placeholder: any;
+        name: any;
+        size: any;
+        color: any;
+        status: any;
+        link: any;
+        disabled: any;
+      }): string;
+    };
+  };
+  args: {
+    placeholder: string;
+    name: string;
+    size: string;
+    color: string;
+    status: string;
+    link: boolean;
+    disabled: boolean;
+  };
+};

package/dist/types/home/runner/work/apollo/apollo/.stencil/stories/badge.stories.d.ts

@@ -0,0 +1,48 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    dot: {
+      control: {
+        type: string;
+      };
+    };
+    text: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Badge: {
+  ({ variant, dot, text }: {
+    variant: any;
+    dot: any;
+    text: any;
+  }): string;
+  parameters: {
+    layout: string;
+    "web-component": {
+      render: any;
+    };
+    html: {
+      render({ dot, variant, text }: {
+        dot: any;
+        variant: any;
+        text: any;
+      }): string;
+    };
+  };
+  args: {
+    variant: string;
+    dot: boolean;
+    text: string;
+  };
+};

package/dist/types/home/runner/work/apollo/apollo/.stencil/stories/button.stories.d.ts

@@ -0,0 +1,74 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    text: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      control: {
+        type: string;
+      };
+    };
+    size: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    icon: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    iconTrailing: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Button: {
+  ({ variant, size, disabled, icon, iconTrailing, text, }: {
+    variant: any;
+    size: any;
+    disabled: any;
+    icon: any;
+    iconTrailing: any;
+    text: any;
+  }): string;
+  parameters: {
+    layout: string;
+    "web-component": {
+      render: any;
+    };
+    html: {
+      render: ({ variant, size, disabled, icon, iconTrailing, text }: {
+        variant: any;
+        size: any;
+        disabled: any;
+        icon: any;
+        iconTrailing: any;
+        text: any;
+      }) => string;
+    };
+  };
+  args: {
+    variant: string;
+    size: string;
+    disabled: boolean;
+    icon: string;
+    iconTrailing: boolean;
+    text: string;
+  };
+};

package/dist/types/home/runner/work/apollo/apollo/.stencil/stories/checkbox.stories.d.ts

@@ -0,0 +1,64 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    label: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    description: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    checked: {
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      control: {
+        type: string;
+      };
+    };
+    indeterminate: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Checkbox: {
+  ({ label, description, checked, disabled, indeterminate, }: {
+    label: any;
+    description: any;
+    checked: any;
+    disabled: any;
+    indeterminate: any;
+  }): string;
+  parameters: {
+    layout: string;
+    "web-component": {
+      render: any;
+    };
+    html: {
+      render({ label, description, checked, disabled, indeterminate }: {
+        label: any;
+        description: any;
+        checked: any;
+        disabled: any;
+        indeterminate: any;
+      }): string;
+    };
+  };
+  args: {
+    label: string;
+    description: string;
+    checked: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+  };
+};