@xplortech/apollo-core 0.5.2 → 0.5.3

package/dist/stories/choicelist.stories.js

@@ -1,112 +0,0 @@
-import { v4 as uuid } from "uuid";
-export default {
-  title: "Components/Choicelist",
-  argTypes: {
-    multi: {
-      control: {
-        type: "boolean",
-      },
-    },
-    styled: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-const data = [
-  {
-    label: "Label #1",
-    description: "Lorem ipsum dolor sit amet",
-  },
-  {
-    label: "Label #2",
-    description: "Lorem ipsum dolor sit amet",
-  },
-  {
-    label: "Label #3",
-    description: "Lorem ipsum dolor sit amet",
-  }
-];
-const script = ({ id, multi, styled }) => `
-    (function() {
-        const choicelist = document.getElementById("${id}");
-        choicelist.choices = ${JSON.stringify(data)};
-        choicelist.multi = ${multi ? 'true' : 'false'};
-        choicelist.styled = ${styled ? 'true' : 'false'};
-    })();
-`;
-export const Choicelist = ({ multi, styled }) => {
-  const id = uuid();
-  return `<xpl-choicelist id="${id}" name="choicelist"></xpl-choicelist><script>${script({
-    id,
-    multi,
-    styled
-  })}</script>`;
-};
-Choicelist.parameters = {
-  layout: "centered",
-  "web-component": {
-    render({ multi, styled }) {
-      let attrs = "";
-      if (multi)
-        attrs += " multi";
-      if (styled)
-        attrs += " styled";
-      return [
-        `<xpl-choicelist${attrs} name="choicelist-name"></xpl-choicelist>`,
-        `choicelist.choices = [
-    {
-        label: "Label #1",
-        description: "Lorem ipsum dolor sit amet"
-    },
-    {
-        label: "Label #2",
-        description: "Lorem ipsum dolor sit amet"
-    },
-    ...
-];`,
-      ];
-    },
-  },
-  html: {
-    render({ multi, styled }) {
-      let className = "xpl-choicelist";
-      if (styled)
-        className += " xpl-choicelist--styled";
-      const output = [];
-      if (styled)
-        output.push(`WARNING: For \`styled\` choicelists, there is
-JS interactivity that is only provided by the web component
-(specifically highlighting the background of a choice). The
-code shown below does not reflect the additional \`styled\`
-choicelist markup and interactivity.`);
-      output.push(`<ul class="${className}">
-    <li>
-        <div class="xpl-${multi ? 'checkbox' : 'radio'}-container">
-            <input class="xpl-${multi ? 'checkbox' : 'radio'}" id="choice-1" name="choicelist-name" type="${multi ? 'checkbox' : 'radio'}" value="choice-1"></input>
-            <label for="choice-1">
-                Label #1
-                <small>Lorem ipsum dolor sit amet</small>
-            </label>
-        </div>
-    </li>
-    <li>
-        <div class="xpl-${multi ? 'checkbox' : 'radio'}-container">
-            <input class="xpl-${multi ? 'checkbox' : 'radio'}" id="choice-2" name="choicelist-name" type="${multi ? 'checkbox' : 'radio'}" value="choice-2"></input>
-            <label for="choice-2">
-                Label #2
-                <small>Lorem ipsum dolor sit amet</small>
-            </label>
-        </div>
-    </li>
-    ...
-</ul>`);
-      return output;
-    },
-  },
-};
-Choicelist.args = {
-  multi: false,
-  styled: 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",
-};

package/dist/stories/divider.stories.js

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

package/dist/stories/grid.stories.js

@@ -1,100 +0,0 @@
-export default {
-  title: "Components/Grid",
-  argTypes: {
-    unit1Lg: { control: { type: "number", }, },
-    unit1Md: { control: { type: "number", }, },
-    unit1Sm: { control: { type: "number", }, },
-    unit1Xs: { control: { type: "number", }, },
-    unit2Lg: { control: { type: "number", }, },
-    unit2Md: { control: { type: "number", }, },
-    unit2Sm: { control: { type: "number", }, },
-    unit2Xs: { control: { type: "number", }, },
-    unit3Lg: { control: { type: "number", }, },
-    unit3Md: { control: { type: "number", }, },
-    unit3Sm: { control: { type: "number", }, },
-    unit3Xs: { control: { type: "number", }, },
-    unit4Lg: { control: { type: "number", }, },
-    unit4Md: { control: { type: "number", }, },
-    unit4Sm: { control: { type: "number", }, },
-    unit4Xs: { control: { type: "number", }, },
-  },
-};
-export const Grid = ({ unit1Lg, unit1Md, unit1Sm, unit1Xs, unit2Lg, unit2Md, unit2Sm, unit2Xs, unit3Lg, unit3Md, unit3Sm, unit3Xs, unit4Lg, unit4Md, unit4Sm, unit4Xs, }) => {
-  return `<xpl-grid>
-    <xpl-grid-item lg="${unit1Lg}" md="${unit1Md}" sm="${unit1Sm}" xs="${unit1Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit2Lg}" md="${unit2Md}" sm="${unit2Sm}" xs="${unit2Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit3Lg}" md="${unit3Md}" sm="${unit3Sm}" xs="${unit3Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit4Lg}" md="${unit4Md}" sm="${unit4Sm}" xs="${unit4Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-  </xpl-grid>`;
-};
-Grid.parameters = {
-  layout: "centered",
-  "web-component": {
-    render({ unit1Lg, unit1Md, unit1Sm, unit1Xs, unit2Lg, unit2Md, unit2Sm, unit2Xs, unit3Lg, unit3Md, unit3Sm, unit3Xs, unit4Lg, unit4Md, unit4Sm, unit4Xs, }) {
-      return `<xpl-grid>
-    <xpl-grid-item lg="${unit1Lg}" md="${unit1Md}" sm="${unit1Sm}" xs="${unit1Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit2Lg}" md="${unit2Md}" sm="${unit2Sm}" xs="${unit2Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit3Lg}" md="${unit3Md}" sm="${unit3Sm}" xs="${unit3Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit4Lg}" md="${unit4Md}" sm="${unit4Sm}" xs="${unit4Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-</xpl-grid>`;
-    },
-  },
-  html: {
-    render() {
-      //         const columns = layout.split(",").map(c => +c);
-      //         return `<div class="xpl-grid" id="grid-id">
-      //     <style>
-      //         @media screen and (max-width: ${breakpoint}px) {
-      //         #grid-id {
-      //           display: block;
-      //         }
-      //         #grid-id [class^="xpl-grid__col"] {
-      //           margin-bottom: 1.5rem;
-      //           margin-right: 0;
-      //           width: 100%;
-      //         }
-      //       }
-      //     </style>${columns.map(c => {
-      //         return `
-      //     <div class="xpl-grid__col-${c}">
-      //         Lorem ipsum...
-      //     </div>`;
-      //     }).join("")}
-      // </div>`
-    },
-  },
-};
-Grid.args = {
-  unit1Lg: 4,
-  unit1Md: 3,
-  unit1Sm: 3,
-  unit1Xs: 6,
-  unit2Lg: 2,
-  unit2Md: 3,
-  unit2Sm: 3,
-  unit2Xs: 6,
-  unit3Lg: 2,
-  unit3Md: 3,
-  unit3Sm: 6,
-  unit3Xs: 6,
-  unit4Lg: 4,
-  unit4Md: 3,
-  unit4Sm: 6,
-  unit4Xs: 6,
-};

package/dist/stories/input.stories.js

@@ -1,252 +0,0 @@
-export default {
-  title: "Components/Input",
-  argTypes: {
-    label: {
-      type: { name: "string", required: true }
-    },
-    description: {
-      type: { name: "string", required: false },
-    },
-    disabled: {
-      type: {
-        name: "boolean"
-      }
-    },
-    error: {
-      type: {
-        name: "boolean"
-      }
-    },
-    errorMessage: {
-      type: { name: "string", required: false },
-    },
-    type: {
-      options: ["text", "number"],
-      control: {
-        type: "select",
-      },
-    },
-  }
-};
-export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type, }) => {
-  let attrs = "";
-  if (label)
-    attrs += ` label="${label}"`;
-  if (description)
-    attrs += ` description="${description}"`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
-  if (pre)
-    attrs += ` pre="${pre}"`;
-  if (post)
-    attrs += ` post="${post}"`;
-  if (type !== "text")
-    attrs += ` type=${type}`;
-  return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
-};
-Input.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Input,
-  },
-  html: {
-    render({ label, description, disabled, error, errorMessage, pre, post, type, }) {
-      const output = [];
-      let className = "xpl-input";
-      if (disabled)
-        className += " xpl-input--disabled";
-      if (error)
-        className += " xpl-input--error";
-      output.push(`<div class="${className}">
-    <label for="id">
-        ${label}${description ? `
-        <small>${description}</small>` : ''}
-    </label>
-    <div class="xpl-input-wrapper">${pre ? `
-        <label class="xpl-input-pre" for="id">${pre}</label>` : ''}
-        ${`<input ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder" type="${type}" />`}${post ? `
-        <label class="xpl-input-post" for="id">${post}</label>` : ''}
-    </div>${errorMessage ? `
-    <label class="xpl-input-error" for="id">
-        ${`<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>`}
-        ${errorMessage}
-    </label>` : ''}
-</div>`);
-      return output;
-    },
-  },
-};
-Input.args = {
-  label: "Input",
-  description: "A brief description",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  pre: "",
-  post: "",
-  type: "text",
-};
-export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
-  let attrs = " multiline";
-  if (label)
-    attrs += ` label="${label}"`;
-  if (description)
-    attrs += ` description="${description}"`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
-  if (maxCharacterCount >= 0)
-    attrs += ` max-character-count="${maxCharacterCount}"`;
-  return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
-};
-Multiline.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Multiline,
-  },
-  html: {
-    render({ disabled, error, errorMessage, label, description, maxCharacterCount }) {
-      const output = [];
-      if (maxCharacterCount > 0)
-        output.push(`WARNING: For multiline inputs with a max. character count,
-there is JS interactivity that is provided only by
-the web component. The code shown below does not
-reflect the additional markup and interactivity.`);
-      let className = "xpl-input";
-      if (disabled)
-        className += " xpl-input--disabled";
-      if (error)
-        className += " xpl-input--error";
-      output.push(`<div class="${className}">
-    <label for="id">
-        ${label}${description ? `
-        <small>${description}</small>` : ''}
-    </label>
-    <div class="xpl-input-wrapper">
-        ${`<textarea ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder"></textarea>`}
-    </div>${errorMessage ? `
-    <label class="xpl-input-error" for="id">
-        ${`<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>`}
-        ${errorMessage}
-    </label>` : ''}
-</div>`);
-      return output;
-    }
-  },
-};
-Multiline.args = {
-  label: "Multiline Input",
-  description: "A brief description",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  maxCharacterCount: 50,
-};
-export const Datepicker = ({ label, dateFormat, description, disabled, error, errorMessage, min, mode, max, }) => {
-  let attrs = ` type="date"`;
-  if (label)
-    attrs += ` label="${label}"`;
-  if (dateFormat)
-    attrs += ` date-format="${dateFormat}"`;
-  if (description)
-    attrs += ` description="${description}"`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
-  if (min)
-    attrs += ` min="${min}"`;
-  if (max)
-    attrs += ` max="${max}"`;
-  if (mode)
-    attrs += ` mode="${mode}"`;
-  return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
-};
-Datepicker.argTypes = {
-  mode: {
-    options: ["single", /* "multiple", */ "range"],
-    control: {
-      type: "select",
-    },
-  },
-};
-Datepicker.args = {
-  mode: "single",
-  label: "Datepicker",
-  dateFormat: "m/d/Y",
-  description: "A brief description",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  min: "01/01/2000",
-  max: "12/31/2099",
-};
-Datepicker.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Datepicker
-  },
-  html: {
-    render({ label, description, disabled, error, errorMessage, min, max, }) {
-      const output = [
-        `The full-featured Datepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is inlcuded here:`
-      ];
-      let className = "xpl-input";
-      if (disabled)
-        className += " xpl-input--disabled";
-      if (error)
-        className += " xpl-input--error";
-      output.push(`<div class="${className}">
-    <label for="id">
-        ${label}${description ? `
-        <small>${description}</small>` : ''}
-    </label>
-    <div class="xpl-input-wrapper">
-        ${`<input ${disabled ? 'disabled ' : ''}id="id"${min ? ` min="${min}"` : ''}${max ? ` max="${max}"` : ''} name="input-name" placeholder="Placeholder" type="date" />`}
-    </div>${errorMessage ? `
-    <label class="xpl-input-error" for="id">
-        ${`<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>`}
-        ${errorMessage}
-    </label>` : ''}
-</div>`);
-      return output;
-    },
-  },
-};
-export const Password = ({ label, description, disabled, error, errorMessage, pre, post, }) => {
-  let attrs = "";
-  if (label)
-    attrs += ` label="${label}"`;
-  if (description)
-    attrs += ` description="${description}"`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (error)
-    attrs += ` error${errorMessage ? ('="' + errorMessage + '"') : ''}`;
-  if (pre)
-    attrs += ` pre="${pre}"`;
-  if (post)
-    attrs += ` post="${post}"`;
-  return `<xpl-input type="password"${attrs} name="input-name"></xpl-input>`;
-};
-Password.parameters = {
-  layout: "centered",
-  "web-component": {
-    render: Password,
-  },
-  html: {
-    render() {
-      return `Sorry, the Password Input only supports web component usage.`;
-    },
-  },
-};
-Password.args = {
-  label: "Password",
-  description: "Enter a password:",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-};

package/dist/stories/list.stories.js

@@ -1,134 +0,0 @@
-import { v4 as uuid } from "uuid";
-export default {
-  title: "Components/List",
-  argTypes: {
-    avatar: {
-      options: ["none", "image", "placeholder"],
-      control: {
-        type: "select",
-      },
-    },
-    avatars: {
-      type: { name: "boolean", }
-    },
-    badges: {
-      type: { name: "boolean", }
-    },
-    link: {
-      type: { name: "boolean", }
-    },
-    metadata: {
-      type: { name: "boolean", }
-    },
-    title: {
-      type: { name: "string", },
-    },
-    subtext: {
-      type: { name: "string", },
-    },
-  },
-};
-const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext }) => `
-    (function() {
-        const list = document.getElementById("${id}");
-        const item = ${JSON.stringify({
-  avatar: avatar === "image" ? "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg" :
-    avatar === "placeholder" ? "ABC" :
-      null,
-  avatars: avatars ? [
-    "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg",
-    "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg",
-    "https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg",
-  ] : null,
-  badges: badges ? [
-    "Badge",
-    {
-      dot: "true",
-      text: "With Dot",
-    },
-    {
-      variant: "error",
-      text: "Error",
-    }
-  ] : null,
-  href: link ? "#" : null,
-  metadata: metadata ? [
-    "Metadata",
-    {
-      icon: "envelope",
-      text: "Metadata w/ Icon",
-    }
-  ] : null,
-  title,
-  subtext,
-})};
-        list.items = [item, item, item];
-    })();
-`;
-export const List = (props) => {
-  const id = uuid();
-  return `<xpl-list id="${id}"></xpl-list>
-    <script>${script(Object.assign({ id }, props))}</script>`;
-};
-List.parameters = {
-  layout: "centered",
-  "web-component": {
-    render({ avatar, avatars, badges, metadata, link, title, subtext }) {
-      return [
-        `<xpl-list id="list-id"></xpl-list>`,
-        `<script>
-const item = {${avatar !== "none" ? `
-    avatar: ${avatar === "placeholder" ? "\"ABC\"" : "\"https://example.jpg\""},` : ''}${avatars ? `
-    avatars: [
-        "https://example.jpg",
-        "https://example.jpg",
-        "https://example.jpg",
-    ],` : ''}${badges ? `
-    badges: [
-        "Badge",
-        {
-            dot: true,
-            text: "With Dot",
-        },
-        {
-            variant: "error",
-            text: "Error",
-        },
-    ],` : ''}${metadata ? `
-    metadata: [
-        "Metadata",
-        {
-            icon: "envelope",
-            text: "Metadata w/ Icon",
-        },
-    ],` : ''}${link ? `
-    link: "https://example.com",` : ""},
-    title: ${title},${subtext ? `
-    subtext: "${subtext}",` : ""}
-};
-document.getElementById("list-id").items = [
-    item,
-    item,
-    item
-];`
-      ];
-    },
-  },
-  html: {
-    render() {
-      // let className = "xpl-badge";
-      // if (dot) className += " xpl-badge--dot";
-      // if (variant !== "default") className += " xpl-badge--" + variant;
-      // return `<div class="${className}">${text}</div>`;
-    },
-  },
-};
-List.args = {
-  avatar: "none",
-  avatars: false,
-  badges: false,
-  link: true,
-  metadata: false,
-  title: "List Item",
-  subtext: ""
-};