@xplortech/apollo-core 0.5.2 → 0.5.3

package/dist/stories/avatar.stories.js

@@ -1,173 +0,0 @@
-import { v4 as uuid } from "uuid";
-export default {
-  title: "Components/Avatar",
-};
-const script = ({ id }) => `
-    (function() {
-        const avatar = document.getElementById("${id}");
-        avatar.addEventListener('click', e => e.preventDefault());
-    })();
-`;
-export const Avatar = ({ placeholder, name, size, color, status, link, disabled, }) => {
-  const id = uuid();
-  let attrs = "";
-  if (placeholder === "")
-    attrs += ` src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"`;
-  if (name !== "")
-    attrs += ` name="${name}"`;
-  if (size !== "default")
-    attrs += ` size="${size}"`;
-  if (color !== "secondary")
-    attrs += ` color="${color}"`;
-  if (status !== "none")
-    attrs += ` status="${status}"`;
-  if (link)
-    attrs += ` href="#"`;
-  if (disabled)
-    attrs += ` disabled`;
-  return `<xpl-avatar id="${id}"${attrs}>${placeholder}</xpl-avatar><script>${script({ id })}</script>`;
-};
-Avatar.argTypes = {
-  placeholder: {
-    type: { name: "string", required: false },
-  },
-  name: {
-    type: { name: "string", required: false },
-  },
-  size: {
-    options: ["default", "md", "sm"],
-    control: {
-      type: "select",
-    },
-  },
-  color: {
-    options: ["green", "yellow", "pink", "primary", "secondary"],
-    control: {
-      type: "select",
-    },
-  },
-  status: {
-    options: ["none", "active", "warning", "inactive"],
-    control: {
-      type: "select",
-    },
-  },
-  link: {
-    control: {
-      type: "boolean",
-    },
-  },
-  disabled: {
-    control: {
-      type: "boolean",
-    },
-  },
-};
-Avatar.parameters = {
-  layout: "centered",
-  "web-component": {
-    render({ placeholder, name, size, color, status, link, disabled }) {
-      let attrs = "";
-      if (placeholder === "")
-        attrs += ` src="image.png"`;
-      if (name !== "")
-        attrs += ` name="${name}"`;
-      if (size !== "default")
-        attrs += ` size="${size}"`;
-      if (color !== "secondary")
-        attrs += ` color="${color}"`;
-      if (status !== "none")
-        attrs += ` status="${status}"`;
-      if (link)
-        attrs += ` href="#"`;
-      if (disabled)
-        attrs += ` disabled`;
-      return `<xpl-avatar${attrs}>${placeholder}</xpl-avatar>`;
-    },
-  },
-  html: {
-    render({ placeholder, name, size, color, status, link, disabled }) {
-      let className = "xpl-avatar";
-      if (size)
-        className += ` xpl-avatar--${size}`;
-      if (color)
-        className += ` xpl-avatar--${color}`;
-      let attrs = "";
-      if (link)
-        attrs += ` href="#"`;
-      const inner = `
-                <div>
-                    ${!placeholder
-        ? `  <img alt="${name}" src="image.png" />`
-        : `  <div class="xpl-avatar__placeholder">${placeholder}</div>`}${status !== "none"
-        ? `
-                                <div class="xpl-avatar__dot--${status}"></div>`
-        : ""}
-                </div>
-            `;
-      let tag = link && !disabled ? "a" : "div";
-      if (link && disabled) {
-        className += " xpl-avatar--disabled";
-        // do not show href
-        attrs = "";
-      }
-      return `<${tag} class="${className}"${attrs}>${inner}</${tag}>`;
-    },
-  },
-};
-Avatar.args = {
-  placeholder: "",
-  name: "Firstname Lastname",
-  size: "default",
-  color: "secondary",
-  status: "none",
-  link: false,
-  disabled: false,
-};
-/* export const AvatarGroup = ({ size, reverse }) => {
-    let className = "xpl-avatar-group";
-    if (size !== "default") className += " xpl-avatar-group--" + size;
-    if (reverse) className += " xpl-avatar-group--reverse";
-    return `<div class="${className}">
-        <img
-            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
-            alt=""
-        /><img
-            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
-            alt=""
-        /><img
-            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
-            alt=""
-        /><img
-            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
-            alt=""
-        /><img
-            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
-            alt=""
-        />
-    </div>`;
-};
-
-AvatarGroup.argTypes = {
-    size: {
-        options: ["s", "default", "l"],
-        control: {
-        type: "select",
-        },
-    },
-    reverse: {
-        control: {
-            type: "boolean",
-        },
-    },
-};
-
-AvatarGroup.parameters = {
-    layout: "centered",
-};
-
-AvatarGroup.args = {
-    size: "default",
-    reverse: false,
-};
-*/

package/dist/stories/backdrop.stories.js

@@ -1,18 +0,0 @@
-export default {
-  title: "Components/Backdrop",
-};
-export const Backdrop = () => `
-    <img src="https://media.giphy.com/media/mi6DsSSNKDbUY/giphy-downsized-large.gif" />
-    <xpl-backdrop></xpl-backdrop>
-`;
-Backdrop.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Backdrop,
-  },
-  html: {
-    render() {
-      return `<div class="xpl-backdrop" aria-hidden="true"></div>`;
-    },
-  },
-};

package/dist/stories/badge.stories.js

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

package/dist/stories/breadcrumbs.stories.js

@@ -1,115 +0,0 @@
-export default {
-  title: "Components/Navigation/Breadcrumbs",
-  argTypes: {
-    items: {
-      options: [1, 2, 3],
-      control: {
-        type: "select",
-      },
-    },
-    first: {
-      type: { name: 'string', required: false }
-    },
-    second: {
-      type: { name: 'string', required: false }
-    },
-    third: {
-      type: { name: 'string', required: false }
-    }
-  }
-};
-export const Breadcrumbs = ({ first, second, third, items }) => {
-  const slotMap = {
-    0: first,
-    1: second,
-    2: third
-  };
-  const breadcrumbItems = Array.from({ length: items }).map((_u, i) => {
-    return `<xpl-breadcrumb-item>
-            ${slotMap[i]}
-        </xpl-breadcrumb-item>`;
-  }).join('\n');
-  return `
-        <xpl-breadcrumbs>
-            ${breadcrumbItems}
-        </xpl-breadcrumbs>
-    `;
-};
-const BreadCrumbsHTML = () => `
-<nav class="xpl-breadcrumbs" aria-label="Breadcrumb">
-    <ol role="list">
-        <li class="xpl-breadcrumb-item">
-            <a href="javascript:;">Locations</a>
-            <span
-                ><svg
-                    aria-hidden="true"
-                    focusable="false"
-                    data-prefix="fas"
-                    data-icon="chevron-right"
-                    class="svg-inline--fa fa-chevron-right fa-w-10"
-                    role="img"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 320 512"
-                >
-                    <path
-                        fill="currentColor"
-                        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-                    ></path></svg
-            ></span>
-        </li>
-        <li class="xpl-breadcrumb-item">
-            <a href="javascript:;">Dupont Circle</a>
-            <span
-                ><svg
-                    aria-hidden="true"
-                    focusable="false"
-                    data-prefix="fas"
-                    data-icon="chevron-right"
-                    class="svg-inline--fa fa-chevron-right fa-w-10"
-                    role="img"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 320 512"
-                >
-                    <path
-                        fill="currentColor"
-                        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-                    ></path></svg
-            ></span>
-        </li>
-        <li class="xpl-breadcrumb-item" aria-current=page>
-            <a href="javascript:;">Class A</a>
-            <span
-                ><svg
-                    aria-hidden="true"
-                    focusable="false"
-                    data-prefix="fas"
-                    data-icon="chevron-right"
-                    class="svg-inline--fa fa-chevron-right fa-w-10"
-                    role="img"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 320 512"
-                >
-                    <path
-                        fill="currentColor"
-                        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-                    ></path></svg
-            ></span>
-        </li>
-    </ol>
-</nav>
-`;
-Breadcrumbs.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Breadcrumbs
-  },
-  html: {
-    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
-};

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

@@ -1,64 +0,0 @@
-export default {
-  title: "Components/Button Row",
-  argTypes: {
-    primary: {
-      type: { name: "string", required: true },
-    },
-    secondary: {
-      type: { name: "string", required: false },
-    },
-    tertiary: {
-      type: { name: "string", required: false },
-    },
-  },
-};
-export const ButtonRow = ({ primary, secondary, tertiary }) => {
-  let attrs = "";
-  if (primary)
-    attrs += ` primary="${primary}"`;
-  if (secondary)
-    attrs += ` secondary="${secondary}"`;
-  if (tertiary)
-    attrs += ` tertiary="${tertiary}"`;
-  return `<xpl-button-row${attrs}></xpl-button-row>
-
-<!-- add event listeners to the buttons like this: -->
-<script>
-    const buttonRow = document.getElementById("button-row");
-    buttonRow.addEventListener("clickPrimary", () => { ... });
-    buttonRow.addEventListener("clickSecondary", () => { ... });
-    buttonRow.addEventListener("clickTertiary", () => { ... });
-</script>
-`;
-};
-ButtonRow.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: ButtonRow,
-  },
-  html: {
-    render({ primary, secondary, tertiary }) {
-      return `<div class="xpl-button-row">
-    <div class="xpl-button-row-inner">${secondary ? `
-        <button class="xpl-button xpl-button--secondary">
-            ${secondary}
-        </button>` : `
-        <div></div><!-- empty div included for layout only -->`}
-        <div>${tertiary ? `
-            <button class="xpl-button xpl-button--subtle">
-                ${tertiary}
-            </button>` : ''}
-            <button class="xpl-button">
-                ${primary}
-            </button>
-        </div>
-    </div>
-</div>`;
-    },
-  },
-};
-ButtonRow.args = {
-  primary: "Save",
-  secondary: "",
-  tertiary: "",
-};

package/dist/stories/button.stories.js

@@ -1,98 +0,0 @@
-export default {
-  title: "Components/Button",
-  argTypes: {
-    text: {
-      type: { name: "string", required: false },
-    },
-    variant: {
-      options: ["primary", "secondary", "subtle", "warning"],
-      control: {
-        type: "select",
-      },
-    },
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-    },
-    size: {
-      options: ["default", "sm", "xs"],
-      control: {
-        type: "select",
-      },
-    },
-    icon: {
-      options: ["", "home", "user", "heart", "check"],
-      control: {
-        type: "select",
-      },
-    },
-    iconTrailing: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-export const Button = ({ variant, size, disabled, icon, iconTrailing, text, }) => {
-  let attrs = "";
-  if (variant !== "primary")
-    attrs += ` variant="${variant}"`;
-  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>`;
-};
-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 = "";
-  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>`;
-};
-Button.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Button,
-  },
-  html: {
-    render: HtmlButton,
-  },
-};
-Button.args = {
-  variant: "primary",
-  size: "default",
-  disabled: false,
-  icon: "",
-  iconTrailing: false,
-  text: "Click Me",
-};

package/dist/stories/checkbox.stories.js

@@ -1,76 +0,0 @@
-export default {
-  title: "Components/Checkbox",
-  argTypes: {
-    label: {
-      type: { name: "string", required: true },
-    },
-    description: {
-      type: { name: "string", required: false },
-    },
-    checked: {
-      control: {
-        type: "boolean",
-      },
-    },
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-    },
-    indeterminate: {
-      control: {
-        type: "boolean",
-      },
-    },
-    styled: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-export const Checkbox = ({ label, description, checked, disabled, indeterminate, styled, }) => {
-  let attrs = "";
-  if (description)
-    attrs += ` description="${description}"`;
-  if (checked)
-    attrs += ` checked`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (indeterminate)
-    attrs += ` indeterminate`;
-  if (styled)
-    attrs += ` styled`;
-  return `<xpl-checkbox${attrs}>${label}</xpl-checkbox>`;
-};
-Checkbox.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Checkbox,
-  },
-  html: {
-    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" : ""}">
-    <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>
-</div>`;
-    },
-  },
-};
-Checkbox.args = {
-  label: "Checkbox",
-  description: "",
-  checked: false,
-  disabled: false,
-  indeterminate: false,
-  styled: false
-};