@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

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,117 +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,68 +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,122 +0,0 @@
-export default {
-  title: 'Components/Button',
-  argTypes: {
-    text: {
-      type: { name: 'string', required: false },
-    },
-    variant: {
-      options: ['primary', 'secondary', 'subtle'],
-      control: {
-        type: 'select',
-      },
-    },
-    state: {
-      options: ['neutral', 'success', 'warning'],
-      control: {
-        type: 'select',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    size: {
-      options: ['default', 'sm', 'xs'],
-      control: {
-        type: 'select',
-      },
-    },
-    fullWidth: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      options: ['none', 'leading', 'trailing'],
-      control: {
-        type: 'select',
-      },
-    },
-    link: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-export const Button = ({ variant, size, disabled, fullWidth, state, text, icon, link, }) => {
-  let attrs = '';
-  if (variant !== 'primary')
-    attrs += ` variant="${variant}"`;
-  if (size !== 'default')
-    attrs += ` size="${size}"`;
-  if (disabled)
-    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 `<div style="width: 50vw; text-align: center;"><xpl-button
-                id="123"
-                variant='${variant}'
-                size='${size}'
-                state='${state}'
-                data-test-attribute
-                data-test-attribute-with-value="1"
-                ${attrs}
-                ${link ? 'link' : ''}
-                ${fullWidth ? 'full-width' : ''}
-                >
-                ${innerHtml(link)}
-            </xpl-button></div>`;
-};
-const HtmlButton = ({ variant, size, state, disabled, text, icon, link, fullWidth, }) => {
-  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>`;
-  let className = `xpl-button
-        xpl-button--${size}
-        xpl-button--${state}
-        xpl-button--${variant} `;
-  let attrs = '';
-  if (disabled)
-    attrs += ' disabled';
-  if (fullWidth)
-    className += ' xpl-button--full-width';
-  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': {
-    render: Button,
-  },
-  html: {
-    render: HtmlButton,
-  },
-};
-Button.args = {
-  link: false,
-  variant: 'primary',
-  size: 'default',
-  disabled: false,
-  state: 'neutral',
-  text: 'Get Coffee',
-  icon: 'leading',
-  fullWidth: true,
-};

package/dist/stories/checkbox.stories.js

@@ -1,78 +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,
-};