@xplortech/apollo-core 0.5.2 → 0.5.3

package/dist/stories/table.stories.js

@@ -1,107 +0,0 @@
-import { v4 as uuid } from "uuid";
-export default {
-  title: "Components/Table",
-  argTypes: {
-    freeze: { control: { type: "boolean" } },
-    multiselect: { control: { type: "boolean" } },
-    striped: { control: { type: "boolean" } },
-  },
-};
-const columns = [
-  "Name",
-  "Total Days Played",
-  "Average Days Played",
-  "Seasons",
-  "Individual Immunity Wins",
-  "Votes Against",
-];
-const data = [
-  ["Boston Rob Mariano", "152", "30.4", "S4, S8, S20, S22, S40", "9", "24"],
-  ["Parvati Shallow", "149", "37.25", "S13, S16, S20", "4", "17"],
-  ["Ozzy Lusth", "128", "32.0", "S13, S16, S23, S34", "7", "34"],
-  ["Cirie Fields", "121", "30.25", "S12, S16, S20, S34", "2", "9"],
-  ["Tyson Apostol", "116.5", "29.1", "S18, S20, S27, S40", "4", "22"],
-];
-const script = ({ id }) => `
-    (function() {
-        const table = document.getElementById("${id}");
-        table.columns = ${JSON.stringify(columns)};
-        table.data = ${JSON.stringify(data)};
-    })();
-`;
-export const Table = ({ freeze, multiselect, striped }) => {
-  const id = uuid();
-  let attrs = "";
-  if (freeze)
-    attrs += " freeze";
-  if (multiselect)
-    attrs += " multiselect";
-  if (striped)
-    attrs += " striped";
-  return `<div style="max-width: 600px;"><xpl-table id="${id}"${attrs}></xpl-table></div><script>${script({
-    id,
-  })}</script>`;
-};
-Table.parameters = {
-  layout: "centered",
-  "web-component": {
-    render({ freeze, multiselect, striped }) {
-      let attrs = "";
-      if (freeze)
-        attrs += " freeze";
-      if (multiselect)
-        attrs += " multiselect";
-      if (striped)
-        attrs += " striped";
-      return [
-        `<xpl-table${attrs}></xpl-table>`,
-        `table.columns = [
-                    "Name", "Total Days Played", ...
-                ];`,
-        `table.data = [
-                    ["Boston Rob Mariano", ...],
-                    ["Parvati Shallow", ...],
-                    ...
-                ];`,
-      ];
-    },
-  },
-  html: {
-    render({ freeze, striped }) {
-      let className = "xpl-table";
-      if (striped)
-        className += " xpl-table--striped";
-      if (freeze)
-        className += " xpl-table--freeze";
-      return [
-        `WARNING: For \`multiselect\` tables, there is JS interactivity that is provided only by the web component. The code shown below does not reflect the additional \`multiselect\` table markup and interactivity.`,
-        `<div class="xpl-table-container">
-                    <table class="${className}">
-                        <thead>
-                            <th>Name</th>
-                            <th>Total Days Played</th>
-                            ...
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Boston Rob Mariano</td>
-                                <td>152</td>
-                                ...
-                            </tr>
-                            <tr>
-                                <td>Parvati Shallow</td>
-                                <td>149</td>
-                                ...
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>`,
-      ];
-    },
-  },
-};
-Table.args = {
-  freeze: true,
-  multiselect: false,
-  striped: false,
-};

package/dist/stories/tabs.stories.js

@@ -1,24 +0,0 @@
-/* export default {
-  title: "Components/Tabs",
-};
-
-export const Tabs = () =>
-  `<div class="xpl-tabs">
-    <nav aria-label="Tabs">
-      <a href="#" class="current" aria-current="page">
-        Applied
-        <span>52</span>
-      </a>
-      <a href="#">
-        Phone Screening
-        <span>6</span>
-      </a>
-      <a href="#">
-        Interview
-        <span>4</span>
-      </a>
-      <a href="#">Offer</a>
-      <a href="#">Disqualified</a>
-    </nav>
-  </div>`;
-*/

package/dist/stories/toggle.stories.js

@@ -1,80 +0,0 @@
-export default {
-  title: "Components/Toggle",
-  argTypes: {
-    checked: {
-      control: {
-        type: "boolean"
-      }
-    },
-    variant: {
-      options: ["default", "small"],
-      control: {
-        type: "select",
-      },
-    },
-    heading: {
-      type: { name: "string", required: true },
-    },
-    label: {
-      type: { name: "string", required: true },
-    },
-    description: {
-      type: { name: "string", required: false },
-    },
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-export const Toggle = ({ checked, description, disabled, label, heading, variant }) => {
-  let attrs = "";
-  if (checked)
-    attrs += ` checked`;
-  if (description)
-    attrs += ` description="${description}"`;
-  if (heading)
-    attrs += ` heading="${heading}"`;
-  if (label)
-    attrs += ` label="${label}"`;
-  if (variant === "small")
-    attrs += ' variant="small"';
-  if (disabled)
-    attrs += ` disabled`;
-  return `<xpl-toggle${attrs}></xpl-toggle>`;
-};
-Toggle.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Toggle,
-  },
-  html: {
-    render({ label, heading, checked, description, disabled, variant }) {
-      let attrs = "";
-      if (disabled)
-        attrs += ` disabled`;
-      if (checked)
-        attrs += ` checked`;
-      let className = "xpl-toggle";
-      if (variant === "small")
-        className += " xpl-toggle--small";
-      return `<div class="xpl-toggle-container">${heading || description ? `
-    <label for="id">
-        ${heading}${description ? `
-        <small>${description}</small>` : ""}
-    </label>` : ''}
-    <input class="${className}" id="id" type="checkbox"${attrs}></input>
-    <label for="id">${label}</label>
-</div>`;
-    },
-  },
-};
-Toggle.args = {
-  checked: false,
-  heading: "Toggle Heading",
-  label: "Label",
-  variant: "default",
-  description: "Lorem ipsum dolor sit amet",
-  disabled: false,
-};

package/dist/stories/utility-bar.stories.js

@@ -1,94 +0,0 @@
-export default {
-  title: "Components/Navigation/Utility Bar",
-  argTypes: {
-    mainSlot: {
-      type: { name: 'string', required: false },
-    },
-    asideSlot: {
-      type: { name: 'string', required: false },
-    },
-  },
-};
-const Story = ({ mainSlot, asideSlot }) => `
-    <div style="width: 85vw;">
-        <xpl-utility-bar>
-            <ul slot="main">
-                ${mainSlot}
-            </ul>
-            <ul slot="aside">
-                ${asideSlot}
-            </ul>
-        </xpl-utility-bar>
-    </div>
-`;
-// This is a temporary hack to include a fontawesome icon as an example in this story. Icons will eventually be their own apollo component (or pure fontawesome).
-// When that happens we should update this story to use the component instead of the following svg.
-const bars = `
-    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
-`;
-const setMainSlot = () => `<li>${bars}</li>`;
-const setAsideSlot = (isMobile) => `
-    <li>
-        <xpl-button
-            type="submit"
-            variant="secondary"
-            ${isMobile ? 'icon-only' : 'icon-leading'}
-            icon="user-circle"
-            >Find Customer</xpl-button
-        >
-    </li>
-    <li>
-        <xpl-avatar
-            name="Jeremy"
-            src="https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg"
-            status="inactive"
-        ></xpl-avatar>
-    </li>
-`;
-const globalParams = {
-  layout: "centered",
-  "web-component": {
-    render: ({ mainSlot, asideSlot }) => `
-            <xpl-utility-bar>
-                <ul slot="main">
-                    ${mainSlot}
-                </ul>
-                <ul slot="main">
-                    ${asideSlot}
-                </ul>
-            </xpl-utility-bar>
-        `,
-  },
-  html: {
-    render: ({ mainSlot, asideSlot }) => `
-            <nav class="xpl-utility-bar">
-                <ul slot="main">
-                    ${mainSlot}
-                </ul>
-                <ul slot="main">
-                    ${asideSlot}
-                </ul>
-            </nav>
-        `,
-  },
-};
-// BEGIN: Story for Utility Bar on Mobile
-export const UtilityBarMobile = Story.bind({});
-UtilityBarMobile.args = {
-  mainSlot: setMainSlot(),
-  asideSlot: setAsideSlot(true),
-};
-UtilityBarMobile.parameters = Object.assign(Object.assign({}, globalParams), { viewport: {
-    defaultViewport: 'iphone12',
-  } });
-UtilityBarMobile.storyName = 'Mobile';
-// END: Story for Utility Bar on Mobile
-// BEGIN: Story for Utility Bar on Desktop
-export const UtilityBarDesktop = Story.bind({});
-UtilityBarDesktop.args = {
-  mainSlot: setMainSlot(),
-  asideSlot: setAsideSlot(false),
-};
-UtilityBarDesktop.parameters = Object.assign({}, globalParams);
-UtilityBarDesktop.storyName = 'Desktop';
-// END: Story for Utility Bar on Desktop