forstok-ui-lib 6.0.2 → 6.1.0

package/package.json

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

package/src/assets/images/icons/location.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="auto" height="auto" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.114-0.011c-6.559 0-12.114 5.587-12.114 12.204 0 6.93 6.439 14.017 10.77 18.998 0.017 0.020 0.717 0.797 1.579 0.797h0.076c0.863 0 1.558-0.777 1.575-0.797 4.064-4.672 10-12.377 10-18.998 0-6.618-4.333-12.204-11.886-12.204zM16.515 29.849c-0.035 0.035-0.086 0.074-0.131 0.107-0.046-0.032-0.096-0.072-0.133-0.107l-0.523-0.602c-4.106-4.71-9.729-11.161-9.729-17.055 0-5.532 4.632-10.205 10.114-10.205 6.829 0 9.886 5.125 9.886 10.205 0 4.474-3.192 10.416-9.485 17.657zM16.035 6.044c-3.313 0-6 2.686-6 6s2.687 6 6 6 6-2.687 6-6-2.686-6-6-6zM16.035 16.044c-2.206 0-4.046-1.838-4.046-4.044s1.794-4 4-4c2.207 0 4 1.794 4 4 0.001 2.206-1.747 4.044-3.954 4.044z"></path>
+</svg>

package/src/assets/images/icons/phone.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0376 5.31617L10.6866 6.4791C11.2723 7.52858 11.0372 8.90532 10.1147 9.8278C10.1147 9.8278 10.1147 9.8278 10.1147 9.8278C10.1146 9.82792 8.99588 10.9468 11.0245 12.9755C13.0525 15.0035 14.1714 13.8861 14.1722 13.8853C14.1722 13.8853 14.1722 13.8853 14.1722 13.8853C15.0947 12.9628 16.4714 12.7277 17.5209 13.3134L18.6838 13.9624C20.2686 14.8468 20.4557 17.0692 19.0628 18.4622C18.2258 19.2992 17.2004 19.9505 16.0669 19.9934C14.1588 20.0658 10.9183 19.5829 7.6677 16.3323C4.41713 13.0817 3.93421 9.84122 4.00655 7.93309C4.04952 6.7996 4.7008 5.77423 5.53781 4.93723C6.93076 3.54428 9.15317 3.73144 10.0376 5.31617Z" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/src/assets/stylesheets/shares.styles.ts

@@ -3460,9 +3460,9 @@ export const NavList = styled.ul`
   ${clearList}
   position: fixed; 
   overflow: auto;
-  height: calc(100vh - 50px);
-  width: 256px;
-  padding: 20px 1em 0 1.275em;
+  height: calc(100vh - 48px);
+  width: 187px;
+  padding: .5rem .5rem 0;
   @media only screen and (min-width: 1366px) {
     width: 220px;
   }
@@ -3470,68 +3470,170 @@ export const NavList = styled.ul`
     width: 80%;
   }
 `
+export const NavMobileHeaderWrapper = styled.div` 
+  display: none;
+  grid-template-columns: auto 15px;
+  margin-bottom: 15px;
+  @media (min-width: 1280px) {
+    margin-bottom: 25px;
+  }
+`
+export const NavContainerStyles = css`
+  display: none;
+  background-color: var(--pri-clr-bg);
+  @keyframes navleftslide {
+    0% { 
+      left: -150px; 
+    }
+    100% { 
+      left: 0px; 
+    }
+  }
+  @media only screen and (min-width: 1280px) {
+    position: relative;
+    display: inline-grid;
+    border-right: 1px solid var(--lay-clr-ln);
+    min-height: calc(100vh - 48px);
+  }
+  @media only screen and (max-width: 1279px) {
+    &.mobile-shown {
+      top: 0px;
+      display: block;
+      position: fixed; 
+      z-index: 11;
+      ${NavMobileOverlay} {
+        display: block;
+      }
+      ${NavMobileHeaderWrapper} {
+        display: grid;
+      }
+      ${NavList} {
+        animation: navleftslide .15s ease;
+        background: var(--pri-clr-bg);
+        height: 100%;
+        z-index: 102;
+      }
+    }
+  }
+`
+
+export const NavContainer = styled.nav`
+  ${NavContainerStyles}
+`
 export const NavMainItem = styled.li<{ $activated?: boolean }>` 
+  line-height: 1.25rem;
+  font-style: normal;
+  font-weight: 400;
+  color: var(--nav-clr);
   position: relative;
-  margin-bottom: 15px;
+  margin-bottom: .35rem;
   ._refCollapseNav {
     cursor: pointer;
     &.is-active {
-      font-weight: 600;
+      font-weight: 500;
+      color: rgba(28, 32, 36, 1)
     }
     &::after {
       position: absolute;
       content: '';
-      right: 3px;
-      top: 4px;
+      right: 10px;
+      top: 14px;
       padding: 2px;
       border-style: solid;
-      border-width: 0 2px 2px 0;
+      border-width: 0 1px 1px 0;
       transform: rotate(-45deg);
       margin-bottom: 2px;
+      border-color: var(--nav-clr);
     }
-    &:hover {
-      color: var(--sec-clr-lnk__hvr);
-    }
-  }
-  @media only screen and (max-width: 767.9px) {
-    margin-bottom: 20px;
   }
-  ${({ $activated }:{ $activated?: boolean }) => {
-    if ($activated) {
-      return css` 
-        > div > a {
-          font-weight: 600;
-          font-size: 14px;
-        } 
-      `
+  ${({ $activated }) => $activated && css`
+    > div {
+      background-color: var(--nav-clr-bg__hvr);
+      border-radius: var(--nav-rd);
     }
-  }}
+    > div > a {
+      &, &:hover {
+        color: var(--pri-clr-lnk__hvr) !important;
+      }
+    } 
+  `}
 `
-export const NavMainItemWrapper = styled.div` 
-  display: inline-grid;
-  grid-gap: 6px;
-  align-items: end;
-  font-size: 14px;
+export const NavChildLine = styled.hr`
+  border-top: 1px solid var(--sec-clr-ln);
+  margin: 0;
+  height: 0px;
+  border-bottom: 0;
 `
-export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: string }>`
+export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: 'counter' }>`
   display: grid;
   position: relative;
   grid-gap: 6px;
-  margin-bottom: 13px;
-  align-items: end;
+  margin-left: 1.5rem;
+  margin-top: .125rem;
+  margin-bottom: .125rem;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  font-weight: 400;
+  align-items: center;
+  height: auto;
+  min-height: 32px;
+  > a, > span  {
+    color: var(--nav-clr);
+  }
+  &:hover {
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    > a, > span {
+      &, &:hover {
+        color: var(--nav-clr);
+      } 
+    }
+  }
   .counter > span {
     font-size: 11px;
     padding: 2px 4px;
     position: absolute; 
     background-color: var(--mt-clr-bg__fc);
     border-radius: var(--ter-rd);
-    top: 0;
-    right: 0;
+    top: 50%;
+    right: 8px;
+    line-height: 11px;
+    transform: translateY(-50%);
   }
-  @media only screen and (max-width: 767px) {
-    margin-bottom: 18px;
+  ${({ $activated }) => $activated && css`
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    > a, > span {
+      &, &:hover {
+        color: var(--pri-clr-lnk__hvr) !important;
+      }
+    }
+  `}
+  ${({ $mode }) => $mode === 'counter' && css`
+    grid-template-columns: auto 20px;
+  `}
+`
+export const NavMainItemWrapper = styled.div` 
+  display: grid;
+  grid-template-columns: 15px auto;
+  grid-gap: .5rem;
+  align-items: center;
+  padding-top: .375rem;
+  padding-bottom: .375rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  &:hover {
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    > a {
+      &, 
+      &:hover {
+        color: var(--nav-clr);
+      }
+    }
   }
-  ${getNavChildItemModFunc}
 `
 export const TotalLabel = styled.span`
   letter-spacing: 1.25px;

package/src/components/icon/styles.ts

@@ -9,6 +9,8 @@ import IconProductLeftNav from '../../assets/images/navs/left/products.svg';
 import IconWarningChat from '../../assets/images/icons/warning-agent.svg';
 import IconCheckChat from '../../assets/images/icons/check.svg';
 import IconCheckChatBlue from '../../assets/images/icons/check-blue.svg';
+import IconPhone from '../../assets/images/icons/phone.svg';
+import IconLocation from '../../assets/images/icons/location.svg';
 
 const NotificationStyled = css`
   width: 44px;
@@ -314,7 +316,21 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
           content: url(${IconCheckChatBlue}); 
         }
       `
-      break;   
+      break;  
+    case 'phone': 
+      style += `
+        &:before { 
+          content: url(${IconPhone}); 
+        }
+      `
+      break;
+    case 'location': 
+      style += `
+        &:before { 
+          content: url(${IconLocation}); 
+        }
+      `
+      break; 
     default: 
       break;
   }