forstok-ui-lib 5.4.4 → 5.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.4.4",
+  "version": "5.4.6",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/button/styles.ts

@@ -202,7 +202,7 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           height: 16px;
         }
       `
-    } else if (iconLeft === 'add') {
+    } else if ($iconLeft === 'add') {
       style += `
         &:before { 
           content: '+'; 

package/src/components/index.ts

@@ -25,6 +25,7 @@ export { default as DateTimeComponent } from './datetime';
 export { default as RadioComponent } from './radio';
 export { default as SwitchComponent } from './switch';
 export { default as MasterTableComponent } from './masterTable';
+export { default as ListComponent } from './list';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/list/index.tsx

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { ListContainer } from './styles';
+
+const ListComponent = ({ children, $mode, $selected, $type, onClick, forwardRef, ...props }: HTMLAttributes<HTMLDivElement> & { children: React.ReactNode, $mode: string, $selected: boolean, $type: string, onClick: () => void, forwardRef: React.RefObject<HTMLDivElement> }) => {
+  return (    
+    <ListContainer $mode={$mode} $selected={$selected} $type={$type} onClick={onClick} ref={forwardRef} {...props} >
+      {children}
+    </ListContainer>
+  )
+}
+
+export default ListComponent

package/src/components/list/styles.tsx

@@ -0,0 +1,150 @@
+import styled, { css } from 'styled-components'
+
+const ListContainerStyles = css`
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  padding: 14px 16px 13px;
+  border-bottom: 1px solid var(--pri-clr-ln);
+`
+
+const getListContainerModifiedStyles = ({ $mode, $selected, $type }:{ $mode: string, $selected: boolean, $type: string }) => {
+  let style = ``;
+  if($mode === 'check' || $mode === 'uncheck' ) {
+    if($type === 'order' || $type === 'return') {
+      style += `
+        grid-template-columns: 24px 38px 50% 30%;
+        @media (min-width: 375px) {
+          grid-template-columns: 24px 38px 50% 32%;
+        }
+        @media (min-width: 425px) {
+          grid-template-columns: 24px 38px 50% 34%;
+        }
+        @media (min-width: 768px) {
+          grid-template-columns: 24px 38px 2.5fr 1.5fr;
+        }
+      `
+    } else if($type === 'confirm'){
+      style += `
+        grid-template-columns: 24px 38px 3.5fr 25px 1fr;
+        
+        div:nth-child(3) {
+          grid-row-start: 1;
+        }
+        div:nth-child(4) {
+          grid-row-start: 1;
+          grid-row-end: 3;
+          justify-self: center;
+          padding-top: 8px;
+          padding-left: 4px;
+        }
+      `
+    } else if($type === 'item' || $type === 'price') {
+      style += `
+        grid-auto-flow: column;
+        grid-template-columns: 24px 38px auto 100px 158px 100px;
+        ._refCheckboxWrapper, figure {
+          grid-row: unset !important;
+        }
+        *:nth-child(3) {
+          padding-right: 1em;
+        }
+      `
+    } else {
+      style += `
+        grid-template-columns: 24px 38px 3fr 1fr;
+      `
+    }
+    style += `
+      align-items: center;
+      :hover {
+        background-color: var(--hg-clr-bg);
+      }
+      ._refCheckboxWrapper {
+        grid-row-start: 1;
+        grid-row-end: 4;
+      }
+      figure {
+        grid-row-start: 1;
+        grid-row-end: 4;
+      }
+      &.is-selected {
+        &, &:hover {
+          background-color: var(--hg-clr-bg__fc); 
+        }
+      }
+    `
+  }
+  else if($mode === 'clear') {
+    style += `
+      display: block;
+      padding: 4px 16px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      font-size: 13px;
+      line-height: 21px
+      text-transform: uppercase;
+      @media (min-width: 425px) {
+        font-size: 13px;
+      }
+    `
+  } else if($mode === 'remove') {
+    style += `
+      grid-template-columns: 40px 3fr 1fr 20px;
+      align-items:start;
+      padding: 14px 16px 13px;
+      @media (min-width: 768px) {
+        grid-template-columns: 40px 3fr 1fr 30px;
+        padding: 12px 16px;
+      }
+      figure {
+        grid-row-start: 1;
+        grid-row-end: 4;
+      }
+      i {
+        display: grid;
+        justify-content: end;
+      }
+      &, &:hover {
+        background-color: var(--hg-clr-bg__fc); 
+      }
+    `
+  }
+
+  if($mode === `uncheck`) {
+    style += `
+      figure {
+        grid-column-start: 2;
+      }
+      div:nth-child(2) {
+        grid-column-start: 3;
+      }
+      div:nth-child(3) {
+        grid-column-start: 4;
+      }
+      div:nth-child(4) {
+        grid-column-start: 3;
+      }
+      div:nth-child(5) {
+        grid-column-start: 4;
+      }
+    `
+  }
+
+  if($mode === 'check' && $selected) {
+    style += ` 
+      &, &:hover {
+        background-color: var(--hg-clr-bg__fc); 
+      }
+    `
+  }
+  style += ` cursor: pointer; `
+
+  return style
+}
+
+export const ListContainer = styled.div<{ $mode: string, $selected: boolean, $type: string }>`
+  ${ListContainerStyles}
+  ${getListContainerModifiedStyles}
+`