@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

package/dist/collection/docs/config/replace-prop-controls.spec.js

@@ -1,32 +1,32 @@
 import { replacePropControls } from "./replace-prop-controls";
 describe('Get Args for Storybook', () => {
-  const mockComponentDocs = {
-    someProp: {
-      options: ['option1', 'option2'],
-      control: { type: 'radio' },
-    },
-  };
-  it('should override controls for props defined in controls param', () => {
-    const overrideControls = { someProp: 'select' };
-    const docs = replacePropControls(mockComponentDocs, overrideControls);
-    expect(docs['someProp'].control.type).toEqual('select');
-  });
-  it('should return undefined if component docs is undefined', () => {
-    const overrideControls = { someProp: 'select' };
-    const docs = replacePropControls(undefined, overrideControls);
-    expect(docs).toEqual(undefined);
-  });
-  it('should handle missing props', () => {
-    const overrideControls = { otherProp: 'select' };
-    const docs = replacePropControls(mockComponentDocs, overrideControls);
-    expect(docs).toEqual(mockComponentDocs);
-  });
-  it('should return default docs if controls is empty', () => {
-    const docs = replacePropControls(mockComponentDocs, {});
-    expect(docs).toEqual(mockComponentDocs);
-  });
-  it('should return default docs if controls is undefined', () => {
-    const docs = replacePropControls(mockComponentDocs);
-    expect(docs).toEqual(mockComponentDocs);
-  });
+    const mockComponentDocs = {
+        someProp: {
+            options: ['option1', 'option2'],
+            control: { type: 'radio' },
+        },
+    };
+    it('should override controls for props defined in controls param', () => {
+        const overrideControls = { someProp: 'select' };
+        const docs = replacePropControls(mockComponentDocs, overrideControls);
+        expect(docs['someProp'].control.type).toEqual('select');
+    });
+    it('should return undefined if component docs is undefined', () => {
+        const overrideControls = { someProp: 'select' };
+        const docs = replacePropControls(undefined, overrideControls);
+        expect(docs).toEqual(undefined);
+    });
+    it('should handle missing props', () => {
+        const overrideControls = { otherProp: 'select' };
+        const docs = replacePropControls(mockComponentDocs, overrideControls);
+        expect(docs).toEqual(mockComponentDocs);
+    });
+    it('should return default docs if controls is empty', () => {
+        const docs = replacePropControls(mockComponentDocs, {});
+        expect(docs).toEqual(mockComponentDocs);
+    });
+    it('should return default docs if controls is undefined', () => {
+        const docs = replacePropControls(mockComponentDocs);
+        expect(docs).toEqual(mockComponentDocs);
+    });
 });

package/dist/collection/docs/config/utils.js

@@ -6,8 +6,8 @@ import { replacePropControls } from "./replace-prop-controls";
   For all the control types see https://storybook.js.org/docs/react/essentials/controls#annotation
  */
 export const getArgTypes = (componentTag, controls) => {
-  const componentDocs = componentsArgs[componentTag];
-  return replacePropControls(componentDocs, controls);
+    const componentDocs = componentsArgs[componentTag];
+    return replacePropControls(componentDocs, controls);
 };
 /* Function to hide all arguments from a single story.
  I wasn't able to find a way to do this in Storybook.
@@ -16,9 +16,9 @@ export const getArgTypes = (componentTag, controls) => {
  * If you find a better way, remove this function and use Storybook solution
  * */
 export const hideAllControls = (argTypes) => {
-  const argsWithHiddenControls = {};
-  Object.keys(argTypes).map(key => {
-    argsWithHiddenControls[key] = { table: { disable: true } };
-  });
-  return argsWithHiddenControls;
+    const argsWithHiddenControls = {};
+    Object.keys(argTypes).map(key => {
+        argsWithHiddenControls[key] = { table: { disable: true } };
+    });
+    return argsWithHiddenControls;
 };

package/dist/collection/docs/tokens/color.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit-html";
 import allTokens from "@otto-de/b2b-tokens/build/js/default.json";
 import "./styles.css";
 const tokenRow = token => {
-  return html `
+    return html `
     <tr>
       <td>
         <div style="background-color:${token.value};" class="color-box"></div>
@@ -13,35 +13,35 @@ const tokenRow = token => {
   `;
 };
 const tokenTable = (tokenGroup, groupName) => {
-  return html `
+    return html `
     ${groupName && html `<b2b-headline size="200">${groupName}</b2b-headline>`}
     <table style="width: 600px;">
       <tbody>
         ${tokenGroup.map(type => {
-    const tokens = allTokens.color[type];
-    return html `
+        const tokens = allTokens.color[type];
+        return html `
             <tr>
               <td colspan="3" class="token-type">${type}</td>
             </tr>
             ${tokens.map(token => tokenRow(token))}
           `;
-  })}
+    })}
       </tbody>
     </table>
   `;
 };
 const semanticTopTokensList = [
-  'background',
-  'border',
-  'copy',
-  'headline',
-  'icon',
-  'table',
+    'background',
+    'border',
+    'copy',
+    'headline',
+    'icon',
+    'table',
 ];
 const semanticBottomTokensList = ['error', 'warning', 'success', 'info'];
 const basicTokensList = ['black', 'white', 'grey', 'red'];
 const ColorTokens = ({}) => {
-  return html `
+    return html `
     <b2b-headline>Color</b2b-headline>
     <br />
     ${tokenTable(semanticTopTokensList, 'Semantic Tokens')}
@@ -58,18 +58,18 @@ const ColorTokens = ({}) => {
 export const story010ColorTokens = ColorTokens.bind({});
 story010ColorTokens.storyName = 'Color';
 story010ColorTokens.parameters = {
-  controls: { hideNoControlsWarning: true },
+    controls: { hideNoControlsWarning: true },
 };
 export default {
-  title: 'Design Tokens/Color',
-  viewMode: 'docs',
-  parameters: {
-    options: {
-      showPanel: false, // hides addons panel
-    },
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#fff' }],
+    title: 'Design Tokens/Color',
+    viewMode: 'docs',
+    parameters: {
+        options: {
+            showPanel: false, // hides addons panel
+        },
+        backgrounds: {
+            default: 'docsBackground',
+            values: [{ name: 'docsBackground', value: '#fff' }],
+        },
     },
-  },
 };

package/dist/collection/docs/tokens/font.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit-html";
 import allTokens from "@otto-de/b2b-tokens/build/js/default.json";
 import "./styles.css";
 const tokenRow = (token, size) => {
-  return html `
+    return html `
     <tr>
       <td>${token.name}</td>
       <td>${token.value}</td>
@@ -16,8 +16,8 @@ const semanticTokens = html `
   <table style="width: 600px;">
     ${html `
       ${['family', 'weight'].map(type => {
-  const tokens = allTokens.font[type];
-  return html `
+    const tokens = allTokens.font[type];
+    return html `
           <tr>
             <td colspan="3" class="token-type">${type}</td>
           </tr>
@@ -38,22 +38,22 @@ const sizeTokens = html `
     </thead>
     ${html `
       ${['copy', 'headline'].map(type => {
-  const tokens = allTokens.size[type];
-  return html `
+    const tokens = allTokens.size[type];
+    return html `
           <tr>
             <td colspan="3" class="token-type">${type}</td>
           </tr>
           ${tokens.map(token => {
-    const valueInPixels = parseFloat(token.value) * 16 + 'px';
-    return tokenRow(token, valueInPixels);
-  })}
+        const valueInPixels = parseFloat(token.value) * 16 + 'px';
+        return tokenRow(token, valueInPixels);
+    })}
         `;
 })}
     `}
   </table>
 `;
 const FontTokens = ({}) => {
-  return html `
+    return html `
     <b2b-headline>Font</b2b-headline>
     <br />
     ${semanticTokens}
@@ -69,14 +69,14 @@ const FontTokens = ({}) => {
 export const story010FontTokens = FontTokens.bind({});
 story010FontTokens.storyName = 'Font';
 export default {
-  title: 'Design Tokens/Font',
-  parameters: {
-    options: {
-      showPanel: false, // hides addons panel
+    title: 'Design Tokens/Font',
+    parameters: {
+        options: {
+            showPanel: false, // hides addons panel
+        },
+        backgrounds: {
+            default: 'docsBackground',
+            values: [{ name: 'docsBackground', value: '#fff' }],
+        },
     },
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#fff' }],
-    },
-  },
 };

package/dist/collection/docs/tokens/size.stories.js

@@ -1,8 +1,8 @@
 import { html } from "lit-html";
 import allTokens from "@otto-de/b2b-tokens/build/js/default.json";
 const tokenRow = token => {
-  const valueInPixels = parseFloat(token.value) * 16 + 'px';
-  return html `
+    const valueInPixels = parseFloat(token.value) * 16 + 'px';
+    return html `
     <tr>
       <td>${token.name}</td>
       <td>${token.value}</td>
@@ -11,7 +11,7 @@ const tokenRow = token => {
   `;
 };
 const tokenTable = (tokenGroup, groupName) => {
-  return html `
+    return html `
     ${groupName && html `<b2b-headline size="200">${groupName}</b2b-headline>`}
     <br />
     <table style="width: 600px;">
@@ -24,20 +24,20 @@ const tokenTable = (tokenGroup, groupName) => {
       </thead>
       ${html `
         ${tokenGroup.map(type => {
-    const tokens = allTokens.size[type];
-    return html `
+        const tokens = allTokens.size[type];
+        return html `
             <tr>
               <td colspan="3" class="token-type">${type}</td>
             </tr>
             ${tokens.map(token => tokenRow(token))}
           `;
-  })}
+    })}
       `}
     </table>
   `;
 };
 const SizeTokens = ({}) => {
-  return html `
+    return html `
     <b2b-headline>Size</b2b-headline>
     <br />
     ${tokenTable(['icon', 'space', 'padding', 'border'], 'Semantic Tokens')}
@@ -54,15 +54,15 @@ const SizeTokens = ({}) => {
 export const story010SizeTokens = SizeTokens.bind({});
 story010SizeTokens.storyName = 'Size';
 export default {
-  title: 'Design Tokens/Size',
-  viewMode: 'docs',
-  parameters: {
-    options: {
-      showPanel: false, // hides addons panel
-    },
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#fff' }],
+    title: 'Design Tokens/Size',
+    viewMode: 'docs',
+    parameters: {
+        options: {
+            showPanel: false, // hides addons panel
+        },
+        backgrounds: {
+            default: 'docsBackground',
+            values: [{ name: 'docsBackground', value: '#fff' }],
+        },
     },
-  },
 };

package/dist/collection/utils/focus-trap.js

@@ -14,82 +14,82 @@
  * @returns {HTMLElement[]}
  */
 export function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
-  const matches = [];
-  // If the depth is above the max depth, abort the searching here.
-  if (depth >= maxDepth) {
-    return matches;
-  }
-  // Traverses a slot element
-  const traverseSlot = ($slot) => {
-    // Only check nodes that are of the type Node.ELEMENT_NODE
-    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
-    const assignedNodes = $slot
-      .assignedNodes()
-      .filter(node => node.nodeType === 1);
-    if (assignedNodes.length > 0) {
-      const $slotParent = assignedNodes[0].parentElement;
-      return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
-    }
-    return [];
-  };
-  // Go through each child and continue the traversing if necessary
-  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
-  // Therefore we fallback to an empty array if it is undefined.
-  const children = Array.from(root.children || []);
-  for (const $child of children) {
-    // Check if the element and its descendants should be skipped
-    if (skipNode($child)) {
-      // console.log('-- SKIP', $child);
-      continue;
-    }
-    // console.log('$child', $child);
-    // If the element matches we always add it
-    if (isMatch($child)) {
-      matches.push($child);
-    }
-    if ($child.shadowRoot != null) {
-      // If the element has a shadow root we need to traverse it
-      matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+    const matches = [];
+    // If the depth is above the max depth, abort the searching here.
+    if (depth >= maxDepth) {
+        return matches;
     }
-    else if ($child.tagName === 'SLOT') {
-      // If the child is a slot we need to traverse each assigned node
-      matches.push(...traverseSlot($child));
+    // Traverses a slot element
+    const traverseSlot = ($slot) => {
+        // Only check nodes that are of the type Node.ELEMENT_NODE
+        // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+        const assignedNodes = $slot
+            .assignedNodes()
+            .filter(node => node.nodeType === 1);
+        if (assignedNodes.length > 0) {
+            const $slotParent = assignedNodes[0].parentElement;
+            return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
+        }
+        return [];
+    };
+    // Go through each child and continue the traversing if necessary
+    // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
+    // Therefore we fallback to an empty array if it is undefined.
+    const children = Array.from(root.children || []);
+    for (const $child of children) {
+        // Check if the element and its descendants should be skipped
+        if (skipNode($child)) {
+            // console.log('-- SKIP', $child);
+            continue;
+        }
+        // console.log('$child', $child);
+        // If the element matches we always add it
+        if (isMatch($child)) {
+            matches.push($child);
+        }
+        if ($child.shadowRoot != null) {
+            // If the element has a shadow root we need to traverse it
+            matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+        }
+        else if ($child.tagName === 'SLOT') {
+            // If the child is a slot we need to traverse each assigned node
+            matches.push(...traverseSlot($child));
+        }
+        else {
+            // Traverse the children of the element
+            matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+        }
     }
-    else {
-      // Traverse the children of the element
-      matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
-    }
-  }
-  return matches;
+    return matches;
 }
 /**
  * Returns whether the element is hidden.
  * @param $elem
  */
 export function isHidden($elem) {
-  return ($elem.hasAttribute('hidden') ||
-    ($elem.hasAttribute('aria-hidden') &&
-      $elem.getAttribute('aria-hidden') !== 'false') ||
-    // A quick and dirty way to check whether the element is hidden.
-    // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
-    // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
-    // we won't be able to catch it here. We accept it due to the huge performance benefits.
-    $elem.style.display === `none` ||
-    $elem.style.opacity === `0` ||
-    $elem.style.visibility === `hidden` ||
-    $elem.style.visibility === `collapse`);
-  // If offsetParent is null we can assume that the element is hidden
-  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
-  // || $elem.offsetParent == null;
+    return ($elem.hasAttribute('hidden') ||
+        ($elem.hasAttribute('aria-hidden') &&
+            $elem.getAttribute('aria-hidden') !== 'false') ||
+        // A quick and dirty way to check whether the element is hidden.
+        // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
+        // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
+        // we won't be able to catch it here. We accept it due to the huge performance benefits.
+        $elem.style.display === `none` ||
+        $elem.style.opacity === `0` ||
+        $elem.style.visibility === `hidden` ||
+        $elem.style.visibility === `collapse`);
+    // If offsetParent is null we can assume that the element is hidden
+    // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
+    // || $elem.offsetParent == null;
 }
 /**
  * Returns whether the element is disabled.
  * @param $elem
  */
 export function isDisabled($elem) {
-  return ($elem.hasAttribute('disabled') ||
-    ($elem.hasAttribute('aria-disabled') &&
-      $elem.getAttribute('aria-disabled') !== 'false'));
+    return ($elem.hasAttribute('disabled') ||
+        ($elem.hasAttribute('aria-disabled') &&
+            $elem.getAttribute('aria-disabled') !== 'false'));
 }
 /**
  * Determines whether an element is focusable.
@@ -98,23 +98,23 @@ export function isDisabled($elem) {
  * @param $elem
  */
 export function isFocusable($elem) {
-  // Discard elements that are removed from the tab order.
-  if ($elem.getAttribute('tabindex') === '-1' ||
-    isHidden($elem) ||
-    isDisabled($elem)) {
-    return false;
-  }
-  return (
-  // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
-  $elem.hasAttribute('tabindex') ||
-    // Anchor tags or area tags with a href set
-    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&
-      $elem.hasAttribute('href')) ||
-    // Form elements which are not disabled
-    $elem instanceof HTMLButtonElement ||
-    $elem instanceof HTMLInputElement ||
-    $elem instanceof HTMLTextAreaElement ||
-    $elem instanceof HTMLSelectElement ||
-    // IFrames
-    $elem instanceof HTMLIFrameElement);
+    // Discard elements that are removed from the tab order.
+    if ($elem.getAttribute('tabindex') === '-1' ||
+        isHidden($elem) ||
+        isDisabled($elem)) {
+        return false;
+    }
+    return (
+    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
+    $elem.hasAttribute('tabindex') ||
+        // Anchor tags or area tags with a href set
+        (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&
+            $elem.hasAttribute('href')) ||
+        // Form elements which are not disabled
+        $elem instanceof HTMLButtonElement ||
+        $elem instanceof HTMLInputElement ||
+        $elem instanceof HTMLTextAreaElement ||
+        $elem instanceof HTMLSelectElement ||
+        // IFrames
+        $elem instanceof HTMLIFrameElement);
 }

package/dist/collection/utils/icon/request.js

@@ -0,0 +1,41 @@
+import { Env, getAssetPath } from "@stencil/core";
+import { ICON_PATH } from "../resources";
+export const iconContent = new Map();
+const requests = new Map();
+export const fetchIcon = (icon) => {
+    // see if we already have a request for this url
+    let req = requests.get(icon);
+    if (req === undefined || null) {
+        if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+            // we don't already have a request
+            req = fetch(icon).then(rsp => {
+                if (rsp.ok) {
+                    return rsp.text().then(svgContent => {
+                        iconContent.set(icon, svgContent || '');
+                    });
+                }
+                iconContent.set(icon, '');
+            });
+            // cache for the same requests
+            requests.set(icon, req);
+        }
+        else {
+            // set to empty for ssr scenarios and resolve promise
+            iconContent.set(icon, '');
+            return Promise.resolve();
+        }
+    }
+    return req;
+};
+export const buildPath = (icon, folderName) => {
+    // fetch icons from local dir for development
+    if (Env.env === 'dev') {
+        return getAssetPath(`./${folderName}/${icon}.svg`);
+    }
+    else if (folderName === 'icons') {
+        return `${ICON_PATH}/icons/${icon}.svg`;
+    }
+    else {
+        return `${ICON_PATH}/${icon}.svg`;
+    }
+};

package/dist/collection/utils/resources.js

@@ -1 +1 @@
-export const ICON_PATH = 'https://portal.otto.market/design-system/dist/b2b-core-components/icons';
+export const ICON_PATH = 'https://portal.otto.market/design-system/dist/b2b-core-components';

package/dist/collection/utils/theme.js

@@ -1,17 +1,17 @@
 export const getClassList = (classes) => {
-  if (classes !== undefined) {
-    const array = Array.isArray(classes) ? classes : classes.split(' ');
-    return array
-      .filter(c => c != null)
-      .map(c => c.trim())
-      .filter(c => c !== '');
-  }
-  return [];
+    if (classes !== undefined) {
+        const array = Array.isArray(classes) ? classes : classes.split(' ');
+        return array
+            .filter(c => c != null)
+            .map(c => c.trim())
+            .filter(c => c !== '');
+    }
+    return [];
 };
 // helper function if classes are provided as string list
 export const getClassMap = (classes) => {
-  const map = {};
-  getClassList(classes).forEach(c => (map[c] = true));
-  console.log(map);
-  return map;
+    const map = {};
+    getClassList(classes).forEach(c => (map[c] = true));
+    console.log(map);
+    return map;
 };

package/dist/collection/utils/types/table.types.js

@@ -1,38 +1,39 @@
 export const TableSizes = {
-  EQUAL: 'equal',
-  EXPAND: 'expand',
+    EQUAL: 'equal',
+    EXPAND: 'expand',
+    COLSPAN: 'colspan',
 };
 export const TableRowgroupTypes = {
-  HEADER: 'header',
-  BODY: 'body',
-  FOOTER: 'footer',
+    HEADER: 'header',
+    BODY: 'body',
+    FOOTER: 'footer',
 };
 export const ContentAlignment = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center',
+    LEFT: 'left',
+    RIGHT: 'right',
+    CENTER: 'center',
 };
 export const SortIconAlignment = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center',
+    LEFT: 'left',
+    RIGHT: 'right',
+    CENTER: 'center',
 };
 export const TableSortDirections = {
-  NOT: 'not-sorted',
-  ASC: 'ascending',
-  DESC: 'descending',
+    NOT: 'not-sorted',
+    ASC: 'ascending',
+    DESC: 'descending',
 };
 export const TableAccordionRowTypes = {
-  PARENT: 'parent',
-  CHILD: 'child',
-  HEADER: 'header',
+    PARENT: 'parent',
+    CHILD: 'child',
+    HEADER: 'header',
 };
 export const TableCheckboxTypes = {
-  HEADER: 'header',
-  ROW: 'row',
+    HEADER: 'header',
+    ROW: 'row',
 };
 export const TableColourOptions = {
-  DEFAULT: 'default',
-  SELECTED: 'selected',
-  GROUP: 'group',
+    DEFAULT: 'default',
+    SELECTED: 'selected',
+    GROUP: 'group',
 };

package/dist/collection/utils/types/wizard.types.js

@@ -1,6 +1,6 @@
 export const WizardStatus = {
-  DEFAULT: 'default',
-  COMPLETED: 'completed',
-  PENDING: 'pending',
-  DISABLED: 'disabled',
+    DEFAULT: 'default',
+    COMPLETED: 'completed',
+    PENDING: 'pending',
+    DISABLED: 'disabled',
 };