@xplortech/apollo-core 0.4.0 → 0.5.0

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