@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/list/__snapshots__/List.test.tsx.snap

@@ -0,0 +1,360 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<List> Snapshots and structure should render story 'AsLink' 1`] = `
+<ul
+  className="lumx-list lumx-list--item-padding-big"
+  tabIndex={-1}
+>
+  <ListItem
+    before={
+      <Icon
+        icon="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+      />
+    }
+    className="lumx-color-background-dark-L6"
+    isHighlighted={false}
+    key=".0"
+    linkProps={
+      {
+        "href": "#",
+      }
+    }
+    linkRef={[Function]}
+    onFocus={[Function]}
+    onItemSelected={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    size="regular"
+  >
+    <span>
+      My first link
+    </span>
+  </ListItem>
+  <ListItem
+    after={
+      <Icon
+        icon="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
+      />
+    }
+    className="lumx-color-background-dark-L6"
+    isHighlighted={false}
+    key=".1"
+    linkProps={
+      {
+        "href": "http://www.google.com",
+        "target": "_blank",
+      }
+    }
+    linkRef={[Function]}
+    onFocus={[Function]}
+    onItemSelected={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    size="regular"
+  >
+    <span>
+      Google
+    </span>
+  </ListItem>
+</ul>
+`;
+
+exports[`<List> Snapshots and structure should render story 'KeyboardNavigation' 1`] = `
+<ul
+  className="lumx-list lumx-list--item-padding-big"
+  tabIndex={-1}
+>
+  <ListItem
+    isHighlighted={false}
+    key=".0"
+    linkRef={[Function]}
+    onFocus={[Function]}
+    onItemSelected={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    size="regular"
+  >
+    Clickable item 1
+  </ListItem>
+  <ListDivider
+    key=".1"
+  />
+  <ListItem
+    isHighlighted={false}
+    key=".2"
+    linkProps={
+      {
+        "href": "#",
+      }
+    }
+    linkRef={[Function]}
+    onFocus={[Function]}
+    onItemSelected={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    size="regular"
+  >
+    Link item 1
+  </ListItem>
+  <ListItem
+    key=".3..0"
+    size="regular"
+  >
+    Non clickable (=non navigable) item
+  </ListItem>
+  <ListSubheader
+    key=".3..1"
+  >
+    Header
+  </ListSubheader>
+  <ListItem
+    isHighlighted={false}
+    key=".3..2"
+    linkProps={
+      {
+        "href": "#",
+      }
+    }
+    linkRef={[Function]}
+    onFocus={[Function]}
+    onItemSelected={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    size="regular"
+  >
+    Link item 2
+  </ListItem>
+  <ListSubheader
+    key=".3..3"
+  >
+    Header
+  </ListSubheader>
+  <ListItem
+    isDisabled={true}
+    key=".4"
+    linkProps={
+      {
+        "href": "#",
+      }
+    }
+    size="regular"
+  >
+    Disabled link item
+  </ListItem>
+  <ListItem
+    isDisabled={true}
+    key=".5"
+    onItemSelected={[Function]}
+    size="regular"
+  >
+    Disabled button item
+  </ListItem>
+  <CustomListItem
+    key=".6"
+  />
+  <ListItem
+    isHighlighted={false}
+    key=".7:$1"
+    linkProps={
+      {
+        "href": "#",
+      }
+    }
+    linkRef={[Function]}
+    onFocus={[Function]}
+    onItemSelected={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    size="regular"
+  >
+    Link item 4
+  </ListItem>
+</ul>
+`;
+
+exports[`<List> Snapshots and structure should render story 'WithCustomChildren' 1`] = `
+<ul
+  className="lumx-list"
+  tabIndex={-1}
+>
+  <CustomListItem
+    key=".0"
+  />
+  <CustomListItem
+    key=".1"
+  />
+  <CustomListItem
+    key=".2"
+  />
+</ul>
+`;
+
+exports[`<List> Snapshots and structure should render story 'WithItemPadding' 1`] = `
+[
+  <ul
+    className="lumx-list lumx-list--item-padding-big"
+    tabIndex={-1}
+  >
+    <ListItem
+      className="lumx-color-background-dark-L6"
+      isHighlighted={false}
+      key=".0"
+      linkProps={
+        {
+          "href": "#",
+        }
+      }
+      linkRef={[Function]}
+      onFocus={[Function]}
+      onItemSelected={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      size="big"
+    >
+      <div>
+        Two-line item
+      </div>
+      <div
+        className="lumx-color-font-dark-L2"
+      >
+        Secondary text
+      </div>
+    </ListItem>
+    <ListItem
+      className="lumx-color-background-dark-L6"
+      isHighlighted={false}
+      key=".1"
+      linkProps={
+        {
+          "href": "#",
+        }
+      }
+      linkRef={[Function]}
+      onFocus={[Function]}
+      onItemSelected={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      size="big"
+    >
+      <div>
+        Two-line item
+      </div>
+      <div
+        className="lumx-color-font-dark-L2"
+      >
+        Secondary text
+      </div>
+    </ListItem>
+  </ul>,
+  <ul
+    className="lumx-list lumx-list--item-padding-big"
+    tabIndex={-1}
+  >
+    <ListItem
+      className="lumx-color-background-dark-L6"
+      isHighlighted={false}
+      key=".0"
+      linkProps={
+        {
+          "href": "#",
+        }
+      }
+      linkRef={[Function]}
+      onFocus={[Function]}
+      onItemSelected={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      size="big"
+    >
+      <div>
+        Two-line item
+      </div>
+      <div
+        className="lumx-color-font-dark-L2"
+      >
+        Secondary text
+      </div>
+    </ListItem>
+    <ListItem
+      className="lumx-color-background-dark-L6"
+      isHighlighted={false}
+      key=".1"
+      linkProps={
+        {
+          "href": "#",
+        }
+      }
+      linkRef={[Function]}
+      onFocus={[Function]}
+      onItemSelected={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      size="big"
+    >
+      <div>
+        Two-line item
+      </div>
+      <div
+        className="lumx-color-font-dark-L2"
+      >
+        Secondary text
+      </div>
+    </ListItem>
+  </ul>,
+  <ul
+    className="lumx-list lumx-list--item-padding-huge"
+    tabIndex={-1}
+  >
+    <ListItem
+      className="lumx-color-background-dark-L6"
+      isHighlighted={false}
+      key=".0"
+      linkProps={
+        {
+          "href": "#",
+        }
+      }
+      linkRef={[Function]}
+      onFocus={[Function]}
+      onItemSelected={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      size="big"
+    >
+      <div>
+        Two-line item
+      </div>
+      <div
+        className="lumx-color-font-dark-L2"
+      >
+        Secondary text
+      </div>
+    </ListItem>
+    <ListItem
+      className="lumx-color-background-dark-L6"
+      isHighlighted={false}
+      key=".1"
+      linkProps={
+        {
+          "href": "#",
+        }
+      }
+      linkRef={[Function]}
+      onFocus={[Function]}
+      onItemSelected={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      size="big"
+    >
+      <div>
+        Two-line item
+      </div>
+      <div
+        className="lumx-color-font-dark-L2"
+      >
+        Secondary text
+      </div>
+    </ListItem>
+  </ul>,
+]
+`;

package/dist/src/components/list/__snapshots__/ListDivider.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListDivider> Snapshots and structure should render story 'Default' 1`] = `
+<li
+  className="lumx-list-divider"
+/>
+`;

package/dist/src/components/list/__snapshots__/ListItem.test.tsx.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListItem> Snapshots and structure should render story 'Button' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    className="lumx-list-item__link"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'ButtonDisabled' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    aria-disabled={true}
+    className="lumx-list-item__link lumx-list-item__link--is-disabled"
+    onKeyDown={[Function]}
+    role="button"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'Highlighted' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    className="lumx-list-item__link lumx-list-item__link--is-highlighted"
+    href="#"
+    role="link"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'Link' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    className="lumx-list-item__link"
+    href="#"
+    role="link"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'LinkDisabled' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    aria-disabled={true}
+    className="lumx-list-item__link lumx-list-item__link--is-disabled"
+    role="link"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'NonClickable' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <div
+    className="lumx-list-item__wrapper"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </div>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'Selected' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    className="lumx-list-item__link lumx-list-item__link--is-selected"
+    href="#"
+    role="link"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'Sizes' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-tiny"
+>
+  <div
+    className="lumx-list-item__wrapper"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </div>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'WithCustomLink' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <div
+    className="lumx-list-item__wrapper"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      My custom link
+    </div>
+  </div>
+</li>
+`;

package/dist/src/components/list/__snapshots__/ListSubheader.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListSubheader> Snapshots and structure should render story 'Default' 1`] = `
+<li
+  className="lumx-list-subheader"
+>
+  Text
+</li>
+`;

package/dist/src/components/list/index.ts

@@ -0,0 +1,4 @@
+export * from './List';
+export * from './ListItem';
+export * from './ListDivider';
+export * from './ListSubheader';