@xplortech/apollo-core 0.5.3 → 1.0.0-beta.0

package/dist/stories/choicelist.stories.js

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,34 @@
+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/dropdown.stories.js

@@ -0,0 +1,377 @@
+export default {
+  title: 'Components/Dropdown',
+};
+export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
+  const attributes = {
+    'close-on-select': closeOnSelect,
+    mode,
+    open,
+    'select-on-focus': selectOnFocus,
+  };
+  const options = [
+    {
+      label: 'Choice 1',
+    },
+    {
+      label: 'Choice 2',
+      isSelected: true,
+    },
+    {
+      label: 'Choice 3 (disabled example)',
+      isDisabled: true,
+    },
+    {
+      label: 'Choice 4',
+    },
+    {
+      label: 'Choice 5',
+    },
+    {
+      label: 'Choice 6',
+    },
+    {
+      label: 'Choice 7',
+    },
+  ];
+  return `
+        <div style="width:75vw">
+        <div style="position: relative; min-width: 200px; width: 100%">
+            <xpl-dropdown
+                id="xpl-dropdown-simple"
+                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            >
+            </xpl-dropdown>
+        </div>
+        </div>
+        <script>
+            element = document.querySelector("#xpl-dropdown-simple");
+            element.options = ${JSON.stringify(options)}
+        </script>
+    `;
+};
+Simple.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: Simple,
+  },
+};
+Simple.argTypes = {
+  mode: {
+    options: ['single', 'multi'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+Simple.args = {
+  closeOnSelect: true,
+  isOpen: true,
+  mode: 'single',
+  selectOnFocus: false,
+};
+export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
+  const attributes = {
+    'close-on-select': closeOnSelect,
+    mode,
+    open,
+    'select-on-focus': selectOnFocus,
+  };
+  return `
+        <div style="width:75vw">
+        <div style="position: relative; min-width: 200px; width: 100%">
+            <xpl-dropdown
+                id="xpl-dropdown-simple"
+                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            >
+                <xpl-dropdown-option
+                    selected
+                    slot="options"
+                >
+                    <label slot="option">
+                        <input type="radio" name="animal" value="dog"/>
+                        dog
+                    </label>
+                </xpl-dropdown-option>
+                <xpl-dropdown-option
+                    disabled
+                    slot="options"
+                >
+                    <label slot="option">
+                        <input disabled type="radio" name="animal" value="cat"/>
+                        cat (disabled)
+                    </label>
+                </xpl-dropdown-option>
+                <xpl-dropdown-option
+                    slot="options"
+                >
+                    <label slot="option">
+                        <input type="radio" name="animal" value="fish"/>
+                        fish (selected)
+                    </label>
+                </xpl-dropdown-option>
+            </xpl-dropdown>
+        </div>
+        </div>
+    `;
+};
+SimpleWithChildren.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: SimpleWithChildren,
+  },
+};
+SimpleWithChildren.argTypes = {
+  mode: {
+    options: ['single', 'multi'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+SimpleWithChildren.args = {
+  closeOnSelect: false,
+  isOpen: true,
+  mode: 'single',
+  selectOnFocus: false,
+};
+export const Groups = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
+  const attributes = {
+    'close-on-select': closeOnSelect,
+    mode,
+    open,
+    'select-on-focus': selectOnFocus,
+  };
+  const options = [
+    {
+      label: 'Choice 1',
+    },
+    {
+      label: 'Choice 2',
+      isSelected: mode === 'multi' ? true : false,
+    },
+    {
+      groupName: 'Group 1',
+      options: [
+        {
+          label: 'Choice 3',
+          isSelected: true,
+        },
+        {
+          label: 'Choice 4',
+          isSelected: false,
+        },
+        {
+          label: 'Choice 5',
+          isSelected: mode === 'multi' ? true : false,
+        },
+      ],
+    },
+    {
+      groupName: 'Group 2',
+      options: [
+        {
+          label: 'Choice 6',
+          isSelected: mode === 'multi' ? true : false,
+        },
+        {
+          label: 'Choice 7',
+          isSelected: mode === 'multi' ? true : false,
+        },
+        {
+          label: 'Choice 8',
+          isSelected: false,
+        },
+      ],
+    },
+  ];
+  return `
+        <div style="width:75vw">
+        <div style="position: relative; min-width: 200px; width: 100%">
+            <xpl-dropdown
+                id="xpl-dropdown-groups"
+                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            >
+            </xpl-dropdown>
+        </div>
+        </div>
+        <script>
+            element = document.querySelector("#xpl-dropdown-groups");
+            element.options = ${JSON.stringify(options)}
+        </script>
+    `;
+};
+Groups.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: Groups,
+  },
+};
+Groups.argTypes = {
+  mode: {
+    options: ['single', 'multi'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+Groups.args = {
+  closeOnSelect: true,
+  isOpen: true,
+  mode: 'single',
+  selectOnFocus: false,
+};
+export const GroupsWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
+  const attributes = {
+    'close-on-select': closeOnSelect,
+    mode,
+    open,
+    'select-on-focus': selectOnFocus,
+  };
+  return `
+        <div style="width:75vw">
+        <div style="position: relative; min-width: 200px; width: 100%">
+            <xpl-dropdown
+                id="xpl-dropdown-groups"
+                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+            >
+                <xpl-dropdown-group
+                    label="Group Component Heading A"
+                    slot="options"
+                >
+                <xpl-dropdown-option
+                    label="Choice 1"
+                    slot="options"
+                ></xpl-dropdown-option>
+                <xpl-dropdown-option
+                    label="Choice 2 (disabled)"
+                    disabled
+                    slot="options"
+                ></xpl-dropdown-option>
+                <xpl-dropdown-heading
+                    slot="options"
+                >
+                    Sub Heading B
+                    <svg
+                        viewBox="0 0 16 16"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="black"
+                        height="16"
+                    >
+                        <path
+                            d="M10.7 5.3a.3.3 0 1 0 0 .7.3.3 0 0 0 0-.7Zm2.7-2.5a1 1 0 0 0-1 .1l-.9.8h-.3l-.9-.8a1 1 0 0 0-1.6.8V6.3l-1 .1c-1.4.2-2.6 1-3.4 2V6.5c0-1-.8-1.8-1.8-1.8a.5.5 0 1 0 0 1c.5 0 .8.4.8.9V11c0 1.5.9 2.3 1.9 2.3H9c.2 0 .3-.1.3-.3 0-.4-.3-.7-.6-.7h-.4V12l1.7-1v1.8c0 .3.3.6.7.6H12c.4 0 .7-.3.7-.6V8.3C13.5 7.8 14 7 14 6V3.7a1 1 0 0 0-.6-1Zm-1.7 9.5H11v-2a.7.7 0 0 0-1-.6L8 11c-.3-.5-.6-1-1.1-1.3-.2-.1-.4 0-.5.1l-.1.3c-.1.1-.1.3 0 .4.6.5 1 1.2 1 2H5.2a.8.8 0 0 1-.9-.9c0-2 1.5-3.8 3.6-4.1l1-.2c.5.9 1.4 1.5 2.4 1.5h.4v3.6ZM13 6a1.7 1.7 0 0 1-3.3 0V3.7l1 1H12l1.1-1V6Zm-1.3-.3a.3.3 0 1 0 .6 0 .3.3 0 0 0-.6 0Z"
+                        />
+                    </svg>
+                </xpl-dropdown-heading>
+                <xpl-dropdown-option
+                    label="Choice 3 (selected)"
+                    selected
+                    slot="options"
+                ></xpl-dropdown-option>
+                </xpl-dropdown-group>
+            </xpl-dropdown>
+        </div>
+        </div>
+    `;
+};
+GroupsWithChildren.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: GroupsWithChildren,
+  },
+};
+GroupsWithChildren.argTypes = {
+  mode: {
+    options: ['single', 'multi'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+GroupsWithChildren.args = {
+  closeOnSelect: true,
+  isOpen: true,
+  mode: 'single',
+  selectOnFocus: false,
+};
+export const OptionSubcomponent = ({ isDisabled: disabled, label, isSelected: selected, }) => {
+  const attributes = { disabled, selected };
+  return `
+        <xpl-dropdown-option
+            label="${label}"
+            ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+        ></xpl-dropdown-option>
+    `;
+};
+OptionSubcomponent.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: OptionSubcomponent,
+  },
+};
+OptionSubcomponent.args = {
+  isSelected: false,
+  isDisabled: false,
+  label: 'Choice 1',
+};
+export const HeadingSubcomponent = ({ label, }) => {
+  return `
+        <xpl-dropdown-heading
+            label="${label}"
+        ></xpl-dropdown-heading>
+    `;
+};
+HeadingSubcomponent.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: HeadingSubcomponent,
+  },
+};
+HeadingSubcomponent.args = {
+  label: 'Choice 1',
+};
+export const GroupSubComponent = ({ groupName, }) => {
+  const options = [
+    {
+      label: 'Choice 1',
+    },
+    {
+      label: 'Choice 2',
+      isSelected: true,
+    },
+    {
+      label: 'Choice 3 (disabled example)',
+      isDisabled: true,
+    },
+    {
+      label: 'Choice 4',
+    },
+    {
+      label: 'Choice 5',
+    },
+    {
+      label: 'Choice 6',
+    },
+    {
+      label: 'Choice 7',
+    },
+  ];
+  return `
+        <xpl-dropdown-group
+            id="xpl-option-group"
+            label="${groupName}"
+        ></xpl-dropdown-group>
+        <script>
+            element = document.querySelector("#xpl-option-group");
+            element.options = ${JSON.stringify(options)}
+        </script>
+    `;
+};
+GroupSubComponent.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: GroupSubComponent,
+  },
+};
+GroupSubComponent.args = {
+  groupName: 'Choice 1',
+};

package/dist/stories/grid.stories.js

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