@xplortech/apollo-core 0.5.2 → 1.0.0-beta.0

package/dist/stories/input.stories.js

@@ -1,35 +1,35 @@
 export default {
-  title: "Components/Input",
+  title: 'Components/Input',
   argTypes: {
     label: {
-      type: { name: "string", required: true }
+      type: { name: 'string', required: true },
     },
     description: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
     disabled: {
       type: {
-        name: "boolean"
-      }
+        name: 'boolean',
+      },
     },
     error: {
       type: {
-        name: "boolean"
-      }
+        name: 'boolean',
+      },
     },
     errorMessage: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
     type: {
-      options: ["text", "number"],
+      options: ['text', 'number'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
-  }
+  },
 };
 export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type, }) => {
-  let attrs = "";
+  let attrs = '';
   if (label)
     attrs += ` label="${label}"`;
   if (description)
@@ -37,59 +37,67 @@ export const Input = ({ label, description, disabled, error, errorMessage, pre,
   if (disabled)
     attrs += ` disabled`;
   if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
+    attrs += ` error${errorMessage ? '="' + errorMessage + '"' : ''}`;
   if (pre)
     attrs += ` pre="${pre}"`;
   if (post)
     attrs += ` post="${post}"`;
-  if (type !== "text")
+  if (type !== 'text')
     attrs += ` type=${type}`;
   return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
 };
 Input.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Input,
   },
   html: {
     render({ label, description, disabled, error, errorMessage, pre, post, type, }) {
       const output = [];
-      let className = "xpl-input";
+      let className = 'xpl-input';
       if (disabled)
-        className += " xpl-input--disabled";
+        className += ' xpl-input--disabled';
       if (error)
-        className += " xpl-input--error";
+        className += ' xpl-input--error';
       output.push(`<div class="${className}">
     <label for="id">
-        ${label}${description ? `
-        <small>${description}</small>` : ''}
+        ${label}${description
+        ? `
+        <small>${description}</small>`
+        : ''}
     </label>
-    <div class="xpl-input-wrapper">${pre ? `
-        <label class="xpl-input-pre" for="id">${pre}</label>` : ''}
-        ${`<input ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder" type="${type}" />`}${post ? `
-        <label class="xpl-input-post" for="id">${post}</label>` : ''}
-    </div>${errorMessage ? `
+    <div class="xpl-input-wrapper">${pre
+        ? `
+        <label class="xpl-input-pre" for="id">${pre}</label>`
+        : ''}
+        ${`<input ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder" type="${type}" />`}${post
+        ? `
+        <label class="xpl-input-post" for="id">${post}</label>`
+        : ''}
+    </div>${errorMessage
+        ? `
     <label class="xpl-input-error" for="id">
         ${`<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>`}
         ${errorMessage}
-    </label>` : ''}
+    </label>`
+        : ''}
 </div>`);
       return output;
     },
   },
 };
 Input.args = {
-  label: "Input",
-  description: "A brief description",
+  label: 'Input',
+  description: 'A brief description',
   disabled: false,
   error: false,
-  errorMessage: "",
-  pre: "",
-  post: "",
-  type: "text",
+  errorMessage: '',
+  pre: '',
+  post: '',
+  type: 'text',
 };
 export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
-  let attrs = " multiline";
+  let attrs = ' multiline';
   if (label)
     attrs += ` label="${label}"`;
   if (description)
@@ -97,52 +105,56 @@ export const Multiline = ({ label, description, disabled, error, errorMessage, m
   if (disabled)
     attrs += ` disabled`;
   if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
+    attrs += ` error${errorMessage ? '="' + errorMessage + '"' : ''}`;
   if (maxCharacterCount >= 0)
     attrs += ` max-character-count="${maxCharacterCount}"`;
   return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
 };
 Multiline.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Multiline,
   },
   html: {
-    render({ disabled, error, errorMessage, label, description, maxCharacterCount }) {
+    render({ disabled, error, errorMessage, label, description, maxCharacterCount, }) {
       const output = [];
       if (maxCharacterCount > 0)
         output.push(`WARNING: For multiline inputs with a max. character count,
 there is JS interactivity that is provided only by
 the web component. The code shown below does not
 reflect the additional markup and interactivity.`);
-      let className = "xpl-input";
+      let className = 'xpl-input';
       if (disabled)
-        className += " xpl-input--disabled";
+        className += ' xpl-input--disabled';
       if (error)
-        className += " xpl-input--error";
+        className += ' xpl-input--error';
       output.push(`<div class="${className}">
     <label for="id">
-        ${label}${description ? `
-        <small>${description}</small>` : ''}
+        ${label}${description
+        ? `
+        <small>${description}</small>`
+        : ''}
     </label>
     <div class="xpl-input-wrapper">
         ${`<textarea ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder"></textarea>`}
-    </div>${errorMessage ? `
+    </div>${errorMessage
+        ? `
     <label class="xpl-input-error" for="id">
         ${`<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>`}
         ${errorMessage}
-    </label>` : ''}
+    </label>`
+        : ''}
 </div>`);
       return output;
-    }
+    },
   },
 };
 Multiline.args = {
-  label: "Multiline Input",
-  description: "A brief description",
+  label: 'Multiline Input',
+  description: 'A brief description',
   disabled: false,
   error: false,
-  errorMessage: "",
+  errorMessage: '',
   maxCharacterCount: 50,
 };
 export const Datepicker = ({ label, dateFormat, description, disabled, error, errorMessage, min, mode, max, }) => {
@@ -156,7 +168,7 @@ export const Datepicker = ({ label, dateFormat, description, disabled, error, er
   if (disabled)
     attrs += ` disabled`;
   if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
+    attrs += ` error${errorMessage ? '="' + errorMessage + '"' : ''}`;
   if (min)
     attrs += ` min="${min}"`;
   if (max)
@@ -167,57 +179,61 @@ export const Datepicker = ({ label, dateFormat, description, disabled, error, er
 };
 Datepicker.argTypes = {
   mode: {
-    options: ["single", /* "multiple", */ "range"],
+    options: ['single', /* "multiple", */ 'range'],
     control: {
-      type: "select",
+      type: 'select',
     },
   },
 };
 Datepicker.args = {
-  mode: "single",
-  label: "Datepicker",
-  dateFormat: "m/d/Y",
-  description: "A brief description",
+  mode: 'single',
+  label: 'Datepicker',
+  dateFormat: 'm/d/Y',
+  description: 'A brief description',
   disabled: false,
   error: false,
-  errorMessage: "",
-  min: "01/01/2000",
-  max: "12/31/2099",
+  errorMessage: '',
+  min: '01/01/2000',
+  max: '12/31/2099',
 };
 Datepicker.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Datepicker
+  layout: 'centered',
+  'web-component': {
+    render: Datepicker,
   },
   html: {
     render({ label, description, disabled, error, errorMessage, min, max, }) {
       const output = [
-        `The full-featured Datepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is inlcuded here:`
+        `The full-featured Datepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is inlcuded here:`,
       ];
-      let className = "xpl-input";
+      let className = 'xpl-input';
       if (disabled)
-        className += " xpl-input--disabled";
+        className += ' xpl-input--disabled';
       if (error)
-        className += " xpl-input--error";
+        className += ' xpl-input--error';
       output.push(`<div class="${className}">
     <label for="id">
-        ${label}${description ? `
-        <small>${description}</small>` : ''}
+        ${label}${description
+        ? `
+        <small>${description}</small>`
+        : ''}
     </label>
     <div class="xpl-input-wrapper">
         ${`<input ${disabled ? 'disabled ' : ''}id="id"${min ? ` min="${min}"` : ''}${max ? ` max="${max}"` : ''} name="input-name" placeholder="Placeholder" type="date" />`}
-    </div>${errorMessage ? `
+    </div>${errorMessage
+        ? `
     <label class="xpl-input-error" for="id">
         ${`<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>`}
         ${errorMessage}
-    </label>` : ''}
+    </label>`
+        : ''}
 </div>`);
       return output;
     },
   },
 };
 export const Password = ({ label, description, disabled, error, errorMessage, pre, post, }) => {
-  let attrs = "";
+  let attrs = '';
   if (label)
     attrs += ` label="${label}"`;
   if (description)
@@ -225,7 +241,7 @@ export const Password = ({ label, description, disabled, error, errorMessage, pr
   if (disabled)
     attrs += ` disabled`;
   if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
+    attrs += ` error${errorMessage ? '="' + errorMessage + '"' : ''}`;
   if (pre)
     attrs += ` pre="${pre}"`;
   if (post)
@@ -233,8 +249,8 @@ export const Password = ({ label, description, disabled, error, errorMessage, pr
   return `<xpl-input type="password"${attrs} name="input-name"></xpl-input>`;
 };
 Password.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Password,
   },
   html: {
@@ -244,9 +260,9 @@ Password.parameters = {
   },
 };
 Password.args = {
-  label: "Password",
-  description: "Enter a password:",
+  label: 'Password',
+  description: 'Enter a password:',
   disabled: false,
   error: false,
-  errorMessage: "",
+  errorMessage: '',
 };

package/dist/stories/list.stories.js

@@ -1,64 +1,72 @@
-import { v4 as uuid } from "uuid";
+import { v4 as uuid } from 'uuid';
 export default {
-  title: "Components/List",
+  title: 'Components/List',
   argTypes: {
     avatar: {
-      options: ["none", "image", "placeholder"],
+      options: ['none', 'image', 'placeholder'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
     avatars: {
-      type: { name: "boolean", }
+      type: { name: 'boolean' },
     },
     badges: {
-      type: { name: "boolean", }
+      type: { name: 'boolean' },
     },
     link: {
-      type: { name: "boolean", }
+      type: { name: 'boolean' },
     },
     metadata: {
-      type: { name: "boolean", }
+      type: { name: 'boolean' },
     },
     title: {
-      type: { name: "string", },
+      type: { name: 'string' },
     },
     subtext: {
-      type: { name: "string", },
+      type: { name: 'string' },
     },
   },
 };
-const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext }) => `
+const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext, }) => `
     (function() {
         const list = document.getElementById("${id}");
         const item = ${JSON.stringify({
-  avatar: avatar === "image" ? "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg" :
-    avatar === "placeholder" ? "ABC" :
-      null,
-  avatars: avatars ? [
-    "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg",
-    "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg",
-    "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg",
-  ] : null,
-  badges: badges ? [
-    "Badge",
-    {
-      dot: "true",
-      text: "With Dot",
-    },
-    {
-      variant: "error",
-      text: "Error",
-    }
-  ] : null,
-  href: link ? "#" : null,
-  metadata: metadata ? [
-    "Metadata",
-    {
-      icon: "envelope",
-      text: "Metadata w/ Icon",
-    }
-  ] : null,
+  avatar: avatar === 'image'
+    ? 'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg'
+    : avatar === 'placeholder'
+      ? 'ABC'
+      : null,
+  avatars: avatars
+    ? [
+      'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg',
+      'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg',
+      'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg',
+    ]
+    : null,
+  badges: badges
+    ? [
+      'Badge',
+      {
+        dot: 'true',
+        text: 'With Dot',
+      },
+      {
+        variant: 'error',
+        text: 'Error',
+      },
+    ]
+    : null,
+  href: link ? '#' : null,
+  metadata: metadata
+    ? [
+      'Metadata',
+      {
+        icon: 'envelope',
+        text: 'Metadata w/ Icon',
+      },
+    ]
+    : null,
   title,
   subtext,
 })};
@@ -71,19 +79,24 @@ export const List = (props) => {
     <script>${script(Object.assign({ id }, props))}</script>`;
 };
 List.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render({ avatar, avatars, badges, metadata, link, title, subtext }) {
       return [
         `<xpl-list id="list-id"></xpl-list>`,
         `<script>
-const item = {${avatar !== "none" ? `
-    avatar: ${avatar === "placeholder" ? "\"ABC\"" : "\"https://example.jpg\""},` : ''}${avatars ? `
+const item = {${avatar !== 'none'
+          ? `
+    avatar: ${avatar === 'placeholder' ? '"ABC"' : '"https://example.jpg"'},`
+          : ''}${avatars
+          ? `
     avatars: [
         "https://example.jpg",
         "https://example.jpg",
         "https://example.jpg",
-    ],` : ''}${badges ? `
+    ],`
+          : ''}${badges
+          ? `
     badges: [
         "Badge",
         {
@@ -94,23 +107,30 @@ const item = {${avatar !== "none" ? `
             variant: "error",
             text: "Error",
         },
-    ],` : ''}${metadata ? `
+    ],`
+          : ''}${metadata
+          ? `
     metadata: [
         "Metadata",
         {
             icon: "envelope",
             text: "Metadata w/ Icon",
         },
-    ],` : ''}${link ? `
-    link: "https://example.com",` : ""},
-    title: ${title},${subtext ? `
-    subtext: "${subtext}",` : ""}
+    ],`
+          : ''}${link
+          ? `
+    link: "https://example.com",`
+          : ''},
+    title: ${title},${subtext
+          ? `
+    subtext: "${subtext}",`
+          : ''}
 };
 document.getElementById("list-id").items = [
     item,
     item,
     item
-];`
+];`,
       ];
     },
   },
@@ -124,11 +144,11 @@ document.getElementById("list-id").items = [
   },
 };
 List.args = {
-  avatar: "none",
+  avatar: 'none',
   avatars: false,
   badges: false,
   link: true,
   metadata: false,
-  title: "List Item",
-  subtext: ""
+  title: 'List Item',
+  subtext: '',
 };

package/dist/stories/main-nav.stories.js

@@ -1,13 +1,13 @@
 export default {
-  title: "Components/Navigation/Main Nav",
+  title: 'Components/Navigation/Main Nav',
   argTypes: {
     width: {
-      options: ["default", "sm", "md"],
+      options: ['default', 'sm', 'md'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
-  }
+  },
 };
 export const MainNav = ({ width }) => `
 <xpl-main-nav width="${width}">
@@ -295,14 +295,14 @@ const HtmlMainNav = ({ width }) => `
 
 `;
 MainNav.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: MainNav,
   },
   html: {
-    render: HtmlMainNav
+    render: HtmlMainNav,
   },
 };
 MainNav.args = {
-  width: "default"
+  width: 'default',
 };

package/dist/stories/radio.stories.js

@@ -1,31 +1,31 @@
 export default {
-  title: "Components/Radio",
+  title: 'Components/Radio',
   argTypes: {
     label: {
-      type: { name: "string", required: true },
+      type: { name: 'string', required: true },
     },
     description: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
     checked: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
     styled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
   },
 };
 export const Radio = ({ label, description, checked, disabled, styled }) => {
-  let attrs = "";
+  let attrs = '';
   if (description)
     attrs += ` description="${description}"`;
   if (checked)
@@ -37,29 +37,31 @@ export const Radio = ({ label, description, checked, disabled, styled }) => {
   return `<xpl-radio${attrs}>${label}</xpl-radio>`;
 };
 Radio.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Radio,
   },
   html: {
     render({ label, description, checked, disabled, styled }) {
-      let attrs = "";
+      let attrs = '';
       if (checked)
         attrs += ` checked`;
       if (disabled)
         attrs += ` disabled`;
-      return `<div class="xpl-checkbox-radio-container${styled ? " styled" : ""}${disabled ? " disabled" : ""}">
+      return `<div class="xpl-checkbox-radio-container${styled ? ' styled' : ''}${disabled ? ' disabled' : ''}">
     <input class="xpl-radio" id="id" type="radio"${attrs}></input>
-    <label class="xpl-label${disabled ? " xpl-label--disabled" : ""}" for="id">${label}${description ? `
-        <small class="xpl-description${disabled ? " xpl-description--disabled" : ""}">${description}</small>
-    ` : ""}</label>
+    <label class="xpl-label${disabled ? ' xpl-label--disabled' : ''}" for="id">${label}${description
+        ? `
+        <small class="xpl-description${disabled ? ' xpl-description--disabled' : ''}">${description}</small>
+    `
+        : ''}</label>
 </div>`;
     },
   },
 };
 Radio.args = {
-  label: "Radio Button",
-  description: "",
+  label: 'Radio Button',
+  description: '',
   checked: false,
   disabled: false,
   styled: false,

package/dist/stories/secondary-nav.stories.js

@@ -1,5 +1,5 @@
 export default {
-  title: "Components/Navigation/Secondary Nav"
+  title: 'Components/Navigation/Secondary Nav',
 };
 export const SecondaryNav = () => `
 <div class="secondary-nav-storybook-container">
@@ -66,11 +66,11 @@ const HtmlSecondaryNav = () => `
     </nav>
 </div>`;
 SecondaryNav.parameters = {
-  layout: "fullscreen",
-  "web-component": {
+  layout: 'fullscreen',
+  'web-component': {
     render: SecondaryNav,
   },
   html: {
-    render: HtmlSecondaryNav
-  }
+    render: HtmlSecondaryNav,
+  },
 };