[FRNT-506] Rewrite list

src/ui/atoms/index.ts

@@ -7,7 +7,7 @@ export { HeaderPanel } from './header-panel';
 export { Heading } from './heading';
 export { Input } from './input';
 export { Label } from './label';
-export { List } from './list';
+export { ListItem, ListContainer } from './list';
 export { Notification } from './notification';
 export { Separator } from './separator';
 export { Surface } from './surface';

src/ui/atoms/list/index.tsx

@@ -1,189 +1,105 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-import { keyHandlerList, keyboardEventHandle } from 'lib';
-interface List {
-  className?: string;
-  disabled?: boolean;
-  list: Array<{
-    left?: React.ReactNode;
-    right?: React.ReactNode;
-    text: React.ReactNode;
-    id: string;
-    disabled?: boolean;
-    onClick?: React.EventHandler<React.SyntheticEvent>;
-  }>;
-}
-
-const ListBase: React.FC<List & Variant> = ({
-  className,
-  list,
-  variant = 'default',
-  disabled = false,
-}) => {
-  const tabIndex = disabled ? -1 : 0;
-  const itemListRef = React.useRef(null);
-
-  const onKeyDown = React.useCallback(
-    (event: React.KeyboardEvent) => {
-      const listNode = itemListRef.current;
-
-      if (!document || !listNode || event.key === 'Tab') {
-        return;
-      }
-
-      event.preventDefault();
-
-      const handlerList = keyHandlerList({
-        listNode,
-      });
-
-      keyboardEventHandle({
-        event,
-        keyHandler: handlerList,
-      });
-    },
-    [itemListRef],
-  );
-  return (
-    <ul
-      className={className}
-      data-disabled={disabled}
-      data-variant={variant}
-      onKeyDown={onKeyDown}
-      ref={itemListRef}
-      role="listbox"
-      tabIndex={tabIndex}
-    >
-      {list.map(({ left, right, text, id, onClick, disabled }) => (
-        <li data-disabled={disabled} data-type="list-item" key={id} onClick={onClick} tabIndex={-1}>
-          {left && <span data-icon="left">{left}</span>}
-          <span data-text="text">{text}</span>
-          {right && <span data-icon="right">{right}</span>}
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export const List = styled(ListBase)`
-  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
-  );
-
-  --local-gap: var(--local-vertical);
-  --local-compensate: var(--woly-const-m);
-  --local-margin: var(--woly-border-width);
-
-  --local-color: var(--woly-canvas-text-default);
-  --local-background: var(--woly-shape-text-default);
-  --local-item-background: var(--woly-canvas-default);
-  --local-border: var(--woly-canvas-default);
-
-  box-sizing: border-box;
-
-  width: 100%;
-  outline: none;
-
-  padding: 0;
-  margin: 0;
-
-  border: var(--woly-border-width) solid var(--local-border);
-
-  list-style-type: none;
-
-  li[data-type='list-item'] {
-    display: flex;
-    align-items: center;
 
-    padding: var(--local-vertical) 0;
-    margin-bottom: var(--local-margin);
+import { Box, Elements } from '../../elements/quarks';
 
-    font-size: var(--woly-font-size, 15px);
-    line-height: var(--woly-line-height, 24px);
-
-    color: var(--local-color);
-    background: var(--local-item-background);
-
-    cursor: pointer;
-    outline: none;
-
-    [data-text] {
-      display: flex;
-      flex: 1;
-      padding: 0 var(--local-horizontal);
-    }
-
-    & > [data-text]:not(:only-child, :last-child) {
-      padding-right: 0;
-    }
+interface ListElementsProps {
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  text: React.ReactNode;
+}
 
-    [data-icon] {
-      --local-icon-size: var(--woly-line-height);
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
+interface ListItemProps {
+  as?: 'a' | 'li';
+  disabled?: boolean;
+  href?: string;
+  tabIndex?: number;
+}
 
-      width: var(--local-icon-size);
-      height: var(--local-icon-size);
+const mapContainer = (properties: { columns: number } & Variant) => ({
+  'data-variant': properties.variant || 'secondary',
+});
 
-      svg > path {
-        fill: var(--local-color);
-      }
-    }
+const mapItem = (properties: ListItemProps & Variant) => ({
+  'data-variant': properties.variant || 'secondary',
+  'data-type': properties.as,
+  'data-disabled': properties.disabled,
+});
 
-    [data-icon='left'] {
-      padding: 0 0 0 calc(var(--local-horizontal) - var(--local-compensate));
-    }
+export const ListContainer = styled.div.attrs(mapContainer)`
+  --local-gap: calc(var(--woly-border-width) * 2);
 
-    [data-icon='right'] {
-      padding: 0 calc(var(--local-horizontal) - var(--local-compensate)) 0 0;
-    }
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--local-gap);
+  background-color: var(--woly-shape-text-default);
+  padding: 0;
+  margin: 0;
+` as StyledComponent<'div', Record<string, unknown>, Variant>;
+
+/**
+ * Fix ListItemContainer after implementing box element
+ */
+const ListItemContainer = styled(Box).attrs(mapItem)`
+  --local-icon-color: var(--woly-canvas-text-default);
+  --local-backgound: var(--woly-canvas-default);
+  --local-color: var(--woly-canvas-text-default)
+
+  cursor: pointer;
+  font-size: var(--woly-font-size);
+  line-height: var(--woly-line-height);
+  text-decoration: none;
+  background-color: var(--local-backgound);
+  color: var(--local-color);
 
-    [data-icon='left'] ~ [data-text],
-    [data-text] ~ [data-icon='right'] {
-      padding-left: var(--local-gap);
-    }
+  list-style-type: none;
 
-    &:hover {
-      --local-item-background: var(--woly-canvas-disabled);
-    }
-    &:focus {
-      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
-    }
-    &:active {
-      --local-item-background: var(--woly-focus);
-      --local-color: var(--woly-shape-text-active);
+  span {
+    svg > path {
+      fill: var(--local-icon-color);
     }
+  }
 
-    &[data-disabled='true'] {
-      --local-color: var(--woly-canvas-text-disabled);
-      --local-item-background: var(--woly-canvas-disabled);
-
-      pointer-events: none;
-
-      [data-icon] {
-        --local-color: var(--woly-canvas-text-disabled);
-      }
-    }
+  &:hover {
+    --local-backgound: var(--woly-canvas-disabled);
   }
 
-  &:focus {
+  &[data-type='a']:focus-within,
+  &[data-type='li']:focus {
+    --local-icon-color: var(--woly-shape-text-active);
+    --local-backgound: var(--woly-focus);
+    --local-color: var(--woly-shape-text-active);
+
+    outline: none;
     box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
   &[data-disabled='true'] {
+    --local-icon-color: var(--woly-canvas-text-disabled);
+    --local-color: var(--woly-canvas-text-disabled);
+
     pointer-events: none;
-
-    li[data-type='list-item'] {
-      --local-color: var(--woly-canvas-text-disabled);
-      --local-item-background: var(--woly-canvas-disabled);
-    }
-
-    [data-icon] {
-      --local-color: var(--woly-canvas-text-disabled);
-    }
   }
-` as StyledComponent<'ul', Record<string, unknown>, List & Variant>;
+` as StyledComponent<'div', Record<string, unknown>, ListItemProps & Variant>;
+
+export const ListItem: React.FC<ListItemProps & ListElementsProps & Variant> = ({
+  as,
+  disabled = false,
+  href,
+  iconLeft,
+  iconRight,
+  tabIndex,
+  text,
+  variant = 'secondary',
+}) => (
+  <ListItemContainer
+    as={as}
+    href={href}
+    disabled={disabled}
+    tabIndex={disabled ? -1 : tabIndex}
+    variant={variant}
+  >
+    <Elements text={text} iconLeft={iconLeft} iconRight={iconRight} variant={variant} />
+  </ListItemContainer>
+);