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

package/dist/stories/badge.stories.js

@@ -1,48 +1,48 @@
 export default {
-  title: "Components/Badge",
+  title: 'Components/Badge',
   argTypes: {
     variant: {
-      options: ["default", "success", "warning", "inactive", "error"],
+      options: ['default', 'success', 'warning', 'inactive', 'error'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
     dot: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
     text: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
   },
 };
 export const Badge = ({ variant, dot, text }) => {
-  let attrs = "";
-  if (variant !== "default")
+  let attrs = '';
+  if (variant !== 'default')
     attrs += ` variant="${variant}"`;
   if (dot)
-    attrs += " dot";
+    attrs += ' dot';
   return `<xpl-badge${attrs}>${text}</xpl-badge>`;
 };
 Badge.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Badge,
   },
   html: {
     render({ dot, variant, text }) {
-      let className = "xpl-badge";
+      let className = 'xpl-badge';
       if (dot)
-        className += " xpl-badge--dot";
-      if (variant !== "default")
-        className += " xpl-badge--" + variant;
+        className += ' xpl-badge--dot';
+      if (variant !== 'default')
+        className += ' xpl-badge--' + variant;
       return `<div class="${className}">${text}</div>`;
     },
   },
 };
 Badge.args = {
-  variant: "default",
+  variant: 'default',
   dot: false,
-  text: "Badge",
+  text: 'Badge',
 };

package/dist/stories/breadcrumbs.stories.js

@@ -1,34 +1,36 @@
 export default {
-  title: "Components/Navigation/Breadcrumbs",
+  title: 'Components/Navigation/Breadcrumbs',
   argTypes: {
     items: {
       options: [1, 2, 3],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
     first: {
-      type: { name: 'string', required: false }
+      type: { name: 'string', required: false },
     },
     second: {
-      type: { name: 'string', required: false }
+      type: { name: 'string', required: false },
     },
     third: {
-      type: { name: 'string', required: false }
-    }
-  }
+      type: { name: 'string', required: false },
+    },
+  },
 };
 export const Breadcrumbs = ({ first, second, third, items }) => {
   const slotMap = {
     0: first,
     1: second,
-    2: third
+    2: third,
   };
-  const breadcrumbItems = Array.from({ length: items }).map((_u, i) => {
+  const breadcrumbItems = Array.from({ length: items })
+    .map((_u, i) => {
     return `<xpl-breadcrumb-item>
             ${slotMap[i]}
         </xpl-breadcrumb-item>`;
-  }).join('\n');
+  })
+    .join('\n');
   return `
         <xpl-breadcrumbs>
             ${breadcrumbItems}
@@ -99,17 +101,17 @@ const BreadCrumbsHTML = () => `
 </nav>
 `;
 Breadcrumbs.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Breadcrumbs
+  layout: 'centered',
+  'web-component': {
+    render: Breadcrumbs,
   },
   html: {
-    render: BreadCrumbsHTML
-  }
+    render: BreadCrumbsHTML,
+  },
 };
 Breadcrumbs.args = {
   first: '<a href="javascript:;">Locations</a>',
   second: '<a href="javascript:;">Dupont Circle</a>',
   third: '<a href="javascript:;">Class A</a>',
-  items: 3
+  items: 3,
 };

package/dist/stories/button-row.stories.js

@@ -1,19 +1,19 @@
 export default {
-  title: "Components/Button Row",
+  title: 'Components/Button Row',
   argTypes: {
     primary: {
-      type: { name: "string", required: true },
+      type: { name: 'string', required: true },
     },
     secondary: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
     tertiary: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
   },
 };
 export const ButtonRow = ({ primary, secondary, tertiary }) => {
-  let attrs = "";
+  let attrs = '';
   if (primary)
     attrs += ` primary="${primary}"`;
   if (secondary)
@@ -32,22 +32,26 @@ export const ButtonRow = ({ primary, secondary, tertiary }) => {
 `;
 };
 ButtonRow.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: ButtonRow,
   },
   html: {
     render({ primary, secondary, tertiary }) {
       return `<div class="xpl-button-row">
-    <div class="xpl-button-row-inner">${secondary ? `
+    <div class="xpl-button-row-inner">${secondary
+        ? `
         <button class="xpl-button xpl-button--secondary">
             ${secondary}
-        </button>` : `
+        </button>`
+        : `
         <div></div><!-- empty div included for layout only -->`}
-        <div>${tertiary ? `
+        <div>${tertiary
+        ? `
             <button class="xpl-button xpl-button--subtle">
                 ${tertiary}
-            </button>` : ''}
+            </button>`
+        : ''}
             <button class="xpl-button">
                 ${primary}
             </button>
@@ -58,7 +62,7 @@ ButtonRow.parameters = {
   },
 };
 ButtonRow.args = {
-  primary: "Save",
-  secondary: "",
-  tertiary: "",
+  primary: 'Save',
+  secondary: '',
+  tertiary: '',
 };

package/dist/stories/button.stories.js

@@ -1,87 +1,98 @@
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   argTypes: {
     text: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
     variant: {
-      options: ["primary", "secondary", "subtle", "warning"],
+      options: ['primary', 'secondary', 'subtle'],
       control: {
-        type: "select",
+        type: 'select',
+      },
+    },
+    state: {
+      options: ['neutral', 'success', 'warning'],
+      control: {
+        type: 'select',
       },
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
     size: {
-      options: ["default", "sm", "xs"],
+      options: ['default', 'sm', 'xs'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
     icon: {
-      options: ["", "home", "user", "heart", "check"],
+      options: ['none', 'leading', 'trailing'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
-    iconTrailing: {
+    link: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
   },
 };
-export const Button = ({ variant, size, disabled, icon, iconTrailing, text, }) => {
-  let attrs = "";
-  if (variant !== "primary")
+export const Button = ({ variant, size, disabled, state, text, icon, link, }) => {
+  let attrs = '';
+  if (variant !== 'primary')
     attrs += ` variant="${variant}"`;
-  if (size !== "default")
+  if (size !== 'default')
     attrs += ` size="${size}"`;
   if (disabled)
-    attrs += " disabled";
-  if (icon)
-    attrs += ` icon="${icon}"`;
-  if (iconTrailing)
-    attrs += " icon-trailing";
-  if (text === "")
-    attrs += " icon-only";
-  return `<xpl-button${attrs}>${text}</xpl-button>`;
+    attrs += ' disabled';
+  if (text === '')
+    attrs += ' icon-only';
+  const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>`;
+  const innerHtml = (link) => {
+    const textBlock = `
+                ${icon == 'leading' ? iconSvg : ''}
+                ${text}
+                ${icon == 'trailing' ? iconSvg : ''}
+            `;
+    return link ? `<a href='javascript:;'>${textBlock}</a>` : textBlock;
+  };
+  return `<xpl-button
+                variant='${variant}'
+                size='${size}'
+                state='${state}'
+                ${attrs}
+                ${link ? 'link' : ''}
+                >
+                ${innerHtml(link)}
+            </xpl-button>`;
 };
-const HtmlButton = ({ variant, size, disabled, icon, iconTrailing, text }) => {
-  let className = "xpl-button";
-  if (variant === "secondary")
-    className += " xpl-button--secondary";
-  if (variant === "subtle")
-    className += " xpl-button--subtle";
-  if (variant === "warning")
-    className += " xpl-button--warning";
-  if (size === "sm")
-    className += " xpl-button--sm";
-  if (size === "xs")
-    className += " xpl-button--xs";
-  const iconOnly = icon && text === "";
-  if (iconOnly)
-    className += " xpl-button--icon-only";
-  let attrs = "";
+const HtmlButton = ({ variant, size, state, disabled, text, icon, link }) => {
+  const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>`;
+  const className = `xpl-button
+        xpl-button--${size}
+        xpl-button--${state}
+        xpl-button--${variant} `;
+  let attrs = '';
   if (disabled)
-    attrs += " disabled";
-  const iconHtml = icon
-    ? `<i class="far fa-${icon} ${iconTrailing
-      ? "trailing"
-      : iconOnly
-        ? ""
-        : "leading"}"></i>`
-    : "";
-  return `<button class="${className}"${attrs}>
-        ${icon && !iconTrailing ? iconHtml : ""}${iconOnly ? `<span class="sr-only">${text}</span>` : text}${icon && iconTrailing ? iconHtml : ""}
-    </button>`;
+    attrs += ' disabled';
+  const innerHtml = (link) => {
+    const textBlock = `
+                ${icon == 'leading' ? iconSvg : ''}
+                ${text}
+                ${icon == 'trailing' ? iconSvg : ''}
+            `;
+    return link
+      ? `<a href='javascript:;' ${attrs}>${textBlock}</a>`
+      : `<button>${textBlock}</button>`;
+  };
+  return `<span class=${className}>${innerHtml(link)}</span>`;
 };
 Button.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Button,
   },
   html: {
@@ -89,10 +100,11 @@ Button.parameters = {
   },
 };
 Button.args = {
-  variant: "primary",
-  size: "default",
+  link: false,
+  variant: 'primary',
+  size: 'default',
   disabled: false,
-  icon: "",
-  iconTrailing: false,
-  text: "Click Me",
+  state: 'neutral',
+  text: 'Get Coffee',
+  icon: 'leading',
 };

package/dist/stories/checkbox.stories.js

@@ -1,36 +1,36 @@
 export default {
-  title: "Components/Checkbox",
+  title: 'Components/Checkbox',
   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',
       },
     },
     indeterminate: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
     styled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
   },
 };
 export const Checkbox = ({ label, description, checked, disabled, indeterminate, styled, }) => {
-  let attrs = "";
+  let attrs = '';
   if (description)
     attrs += ` description="${description}"`;
   if (checked)
@@ -44,33 +44,35 @@ export const Checkbox = ({ label, description, checked, disabled, indeterminate,
   return `<xpl-checkbox${attrs}>${label}</xpl-checkbox>`;
 };
 Checkbox.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Checkbox,
   },
   html: {
-    render({ label, description, checked, disabled, indeterminate, styled }) {
-      let attrs = "";
+    render({ label, description, checked, disabled, indeterminate, styled, }) {
+      let attrs = '';
       if (checked)
         attrs += ` checked`;
       if (disabled)
         attrs += ` disabled`;
       if (indeterminate)
         attrs += ` indeterminate`;
-      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-checkbox" id="id" type="checkbox"${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>`;
     },
   },
 };
 Checkbox.args = {
-  label: "Checkbox",
-  description: "",
+  label: 'Checkbox',
+  description: '',
   checked: false,
   disabled: false,
   indeterminate: false,
-  styled: false
+  styled: false,
 };

package/dist/stories/choicelist.stories.js

@@ -1,32 +1,32 @@
-import { v4 as uuid } from "uuid";
+import { v4 as uuid } from 'uuid';
 export default {
-  title: "Components/Choicelist",
+  title: 'Components/Choicelist',
   argTypes: {
     multi: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
     styled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
     },
   },
 };
 const data = [
   {
-    label: "Label #1",
-    description: "Lorem ipsum dolor sit amet",
+    label: 'Label #1',
+    description: 'Lorem ipsum dolor sit amet',
   },
   {
-    label: "Label #2",
-    description: "Lorem ipsum dolor sit amet",
+    label: 'Label #2',
+    description: 'Lorem ipsum dolor sit amet',
   },
   {
-    label: "Label #3",
-    description: "Lorem ipsum dolor sit amet",
-  }
+    label: 'Label #3',
+    description: 'Lorem ipsum dolor sit amet',
+  },
 ];
 const script = ({ id, multi, styled }) => `
     (function() {
@@ -41,18 +41,18 @@ export const Choicelist = ({ multi, styled }) => {
   return `<xpl-choicelist id="${id}" name="choicelist"></xpl-choicelist><script>${script({
     id,
     multi,
-    styled
+    styled,
   })}</script>`;
 };
 Choicelist.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render({ multi, styled }) {
-      let attrs = "";
+      let attrs = '';
       if (multi)
-        attrs += " multi";
+        attrs += ' multi';
       if (styled)
-        attrs += " styled";
+        attrs += ' styled';
       return [
         `<xpl-choicelist${attrs} name="choicelist-name"></xpl-choicelist>`,
         `choicelist.choices = [
@@ -71,9 +71,9 @@ Choicelist.parameters = {
   },
   html: {
     render({ multi, styled }) {
-      let className = "xpl-choicelist";
+      let className = 'xpl-choicelist';
       if (styled)
-        className += " xpl-choicelist--styled";
+        className += ' xpl-choicelist--styled';
       const output = [];
       if (styled)
         output.push(`WARNING: For \`styled\` choicelists, there is

package/dist/stories/content-area.stories.js

@@ -1,13 +1,13 @@
 export default {
-  title: "Components/Content Area",
+  title: 'Components/Content Area',
   argTypes: {
     size: {
-      options: ["wide", "narrow", "full"],
+      options: ['wide', 'narrow', 'full'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
-  }
+  },
 };
 export const ContentArea = ({ size }) => `<xpl-content-area size="${size}">
         <div>
@@ -25,7 +25,7 @@ export const ContentArea = ({ size }) => `<xpl-content-area size="${size}">
         </div>
     </xpl-content-area>`;
 ContentArea.parameters = {
-  "web-component": {
+  'web-component': {
     render: ContentArea,
   },
   html: {
@@ -49,5 +49,5 @@ ContentArea.parameters = {
   },
 };
 ContentArea.args = {
-  size: "wide",
+  size: 'wide',
 };

package/dist/stories/divider.stories.js

@@ -1,25 +1,25 @@
 export default {
-  title: "Components/Divider",
+  title: 'Components/Divider',
   argTypes: {
     tier: {
       options: [3, 2, 1, 0],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
     text: {
-      type: { name: "string", required: false },
+      type: { name: 'string', required: false },
     },
   },
 };
 export const Divider = ({ tier, text }) => {
-  let attrs = "";
+  let attrs = '';
   attrs += ` tier="${tier}"`;
   return `<xpl-divider${attrs}>${text}</xpl-divider>`;
 };
 Divider.parameters = {
-  layout: "centered",
-  "web-component": {
+  layout: 'centered',
+  'web-component': {
     render: Divider,
   },
   html: {
@@ -30,5 +30,5 @@ Divider.parameters = {
 };
 Divider.args = {
   tier: 3,
-  text: "Lorem Ipsum",
+  text: 'Lorem Ipsum',
 };