@xplortech/apollo-core 0.4.0 → 0.5.0

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.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,66 +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",
-      },
-    },
-  },
-};
-export const Checkbox = ({ label, description, checked, disabled, indeterminate, }) => {
-  let attrs = "";
-  if (description)
-    attrs += ` description="${description}"`;
-  if (checked)
-    attrs += ` checked`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (indeterminate)
-    attrs += ` indeterminate`;
-  return `<xpl-checkbox${attrs}>${label}</xpl-checkbox>`;
-};
-Checkbox.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Checkbox,
-  },
-  html: {
-    render({ label, description, checked, disabled, indeterminate }) {
-      let attrs = "";
-      if (checked)
-        attrs += ` checked`;
-      if (disabled)
-        attrs += ` disabled`;
-      if (indeterminate)
-        attrs += ` indeterminate`;
-      return `<div class="xpl-checkbox-container">
-                <input class="xpl-checkbox" id="id" type="checkbox"${attrs}></input>
-                <label for="id">${label}${description ? `<small>${description}</small>` : ""}</label>
-            </div>`;
-    },
-  },
-};
-Checkbox.args = {
-  label: "Checkbox",
-  description: "",
-  checked: false,
-  disabled: false,
-  indeterminate: false,
-};

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

@@ -1,53 +0,0 @@
-export default {
-  title: "Components/Content Area",
-  argTypes: {
-    size: {
-      options: ["wide", "narrow", "full"],
-      control: {
-        type: "select",
-      },
-    },
-  }
-};
-export const ContentArea = ({ size }) => `<xpl-content-area size="${size}">
-        <div>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
-            ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
-            explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-            sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
-            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
-            non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
-            ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
-            velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-            pariatur?
-        </div>
-    </xpl-content-area>`;
-ContentArea.parameters = {
-  "web-component": {
-    render: ContentArea,
-  },
-  html: {
-    render: ({ size }) => `
-             <main class="xpl-content-area-wrapper xpl-content-area-wrapper__${size}">
-                <div class="xpl-content-area">
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
-                    ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
-                    explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-                    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
-                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
-                    non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
-                    ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
-                    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-                    pariatur?
-                </div>
-             </main>
-            `,
-  },
-};
-ContentArea.args = {
-  size: "wide",
-};