forstok-ui-lib 5.2.45 → 5.2.47

package/package.json

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

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

@@ -0,0 +1,9 @@
+<svg width="100%" height="100%" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.32495 2.20001C3.32495 1.66153 3.76148 1.22501 4.29995 1.22501H9.09995C9.13631 1.22501 9.1712 1.23945 9.19691 1.26517L12.4348 4.50305C12.4605 4.52876 12.475 4.56365 12.475 4.60001V11.8C12.475 12.3385 12.0384 12.775 11.5 12.775H4.29995C3.76147 12.775 3.32495 12.3385 3.32495 11.8V2.20001Z" fill="white"/>
+<path d="M3.32495 2.20001C3.32495 1.66153 3.76148 1.22501 4.29995 1.22501H9.09995C9.13631 1.22501 9.1712 1.23945 9.19691 1.26517L12.4348 4.50305C12.4605 4.52876 12.475 4.56365 12.475 4.60001V11.8C12.475 12.3385 12.0384 12.775 11.5 12.775H4.29995C3.76147 12.775 3.32495 12.3385 3.32495 11.8V2.20001Z" stroke="#D0D5DD"/>
+<path d="M3.32495 2.20001C3.32495 1.66153 3.76148 1.22501 4.29995 1.22501H9.09995C9.13631 1.22501 9.1712 1.23945 9.19691 1.26517L12.4348 4.50305C12.4605 4.52876 12.475 4.56365 12.475 4.60001V11.8C12.475 12.3385 12.0384 12.775 11.5 12.775H4.29995C3.76147 12.775 3.32495 12.3385 3.32495 11.8V2.20001Z" stroke="black" stroke-opacity="0.2"/>
+<path d="M9.1001 1.14999V3.39999C9.1001 4.06272 9.63737 4.59999 10.3001 4.59999H12.5501" stroke="#D0D5DD"/>
+<path d="M9.1001 1.14999V3.39999C9.1001 4.06272 9.63737 4.59999 10.3001 4.59999H12.5501" stroke="black" stroke-opacity="0.2"/>
+<path d="M8.50005 6.39999H1.90005C1.56868 6.39999 1.30005 6.66862 1.30005 6.99999V10.6C1.30005 10.9314 1.56868 11.2 1.90005 11.2H8.50005C8.83142 11.2 9.10005 10.9314 9.10005 10.6V6.99999C9.10005 6.66862 8.83142 6.39999 8.50005 6.39999Z" fill="#099250"/>
+<path d="M2.91599 7.8182L3.35598 8.56181H3.37303L3.81514 7.8182H4.33608L3.67026 8.90909L4.35099 10H3.82047L3.37303 9.25535H3.35598L2.90854 10H2.38013L3.06301 8.90909L2.39291 7.8182H2.91599ZM4.62799 10V7.8182H5.08929V9.61967H6.02467V10H4.62799ZM7.51375 8.44568C7.50523 8.35973 7.46863 8.29298 7.40401 8.2454C7.33939 8.19782 7.25167 8.17403 7.14087 8.17403C7.06558 8.17403 7.00204 8.18468 6.95016 8.20598C6.89832 8.22656 6.85855 8.25533 6.83086 8.29226C6.80385 8.32919 6.79039 8.3711 6.79039 8.41799C6.78895 8.45705 6.79711 8.49113 6.81487 8.52026C6.83335 8.54936 6.85855 8.57459 6.89053 8.59589C6.92248 8.6165 6.95941 8.63459 7.00132 8.65022C7.04323 8.66513 7.08795 8.67791 7.13554 8.68859L7.33156 8.73545C7.42675 8.75675 7.51411 8.78515 7.59364 8.82068C7.6732 8.85619 7.74208 8.89988 7.80031 8.95171C7.85857 9.00356 7.90366 9.06464 7.93561 9.13496C7.96828 9.20528 7.98498 9.28589 7.98567 9.37679C7.98498 9.51032 7.95088 9.62609 7.88341 9.72409C7.81666 9.82139 7.72006 9.89702 7.59364 9.95098C7.46794 10.0043 7.31629 10.0309 7.13875 10.0309C6.96262 10.0309 6.8092 10.0039 6.67852 9.94993C6.54856 9.89597 6.44698 9.81605 6.37384 9.71024C6.30139 9.60371 6.26338 9.47195 6.25984 9.31499H6.7062C6.71118 9.38816 6.73213 9.44924 6.76906 9.49823C6.80671 9.54653 6.85678 9.58309 6.91927 9.60796C6.98248 9.63212 7.05388 9.64418 7.13341 9.64418C7.21153 9.64418 7.27936 9.63281 7.33689 9.6101C7.39513 9.58736 7.44025 9.55577 7.4722 9.51526C7.50415 9.47479 7.52013 9.42827 7.52013 9.37571C7.52013 9.32672 7.50559 9.28552 7.47646 9.25214C7.44805 9.21874 7.40614 9.19034 7.35076 9.16691C7.29607 9.14348 7.22893 9.12217 7.14939 9.10298L6.91183 9.04334C6.72786 8.99858 6.58264 8.92862 6.47611 8.83346C6.36958 8.7383 6.31666 8.61011 6.31738 8.44886C6.31666 8.31677 6.35182 8.20136 6.42283 8.10263C6.49455 8.00393 6.59293 7.92686 6.71794 7.87145C6.84292 7.81607 6.98497 7.78835 7.14406 7.78835C7.306 7.78835 7.44733 7.81607 7.56808 7.87145C7.68952 7.92686 7.78399 8.00393 7.85146 8.10263C7.91893 8.20136 7.95373 8.31572 7.95586 8.44568H7.51375Z" fill="white"/>
+</svg>

package/src/components/icon/styles.ts

@@ -26,6 +26,7 @@ import IconArrowLeft from '../../assets/images/icons/arrow-left.svg'
 import IconArrowLeftDouble from '../../assets/images/icons/arrow-left-double.svg'
 import IconArrowRight from '../../assets/images/icons/arrow-right.svg'
 import IconArrowRightDouble from '../../assets/images/icons/arrow-right-double.svg'
+import IconCalendar from '../../assets/images/icons/calendar.svg'
 
 const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: string, $name: string, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => {
   let style = ``;
@@ -212,6 +213,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break
+    case 'calendar': 
+      style += `
+        &:before { 
+          content: url(${IconCalendar}); 
+        }
+      `
+      break
     default: 
       break;
   }

package/src/components/link/index.tsx

@@ -7,6 +7,7 @@ type TLinkBase = {
   $activated?: boolean
   $elipsis?: boolean
   $shadow?: boolean
+  $iconRight?: string
   disabled?: boolean
 } & (
   (AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -19,7 +20,7 @@ type TLinkBase = {
   })
 );
 
-const LinkComponent = ({ children, mode, $activated=false, href, $elipsis=false, $shadow=false, disabled=false, ...props }: TLinkBase) => {
+const LinkComponent = ({ children, mode, $activated=false, href, $elipsis=false, $shadow=false, $iconRight ,disabled=false, ...props }: TLinkBase) => {
   const { onClick } = props
   return (
     href ? (
@@ -29,6 +30,7 @@ const LinkComponent = ({ children, mode, $activated=false, href, $elipsis=false,
         $activated={$activated}
         $elipsis={$elipsis}
         $shadow={$shadow}
+        $iconRight={$iconRight}
         disabled={disabled}
         href={href}
         {...props}
@@ -42,6 +44,7 @@ const LinkComponent = ({ children, mode, $activated=false, href, $elipsis=false,
         $activated={$activated}
         $elipsis={$elipsis}
         $shadow={$shadow}
+        $iconRight={$iconRight}
         disabled={disabled}
         onClick={onClick}
         {...props}

package/src/components/link/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { multiElipsis } from '../../assets/stylesheets/bases.styles';
+import IconXls from '../../assets/images/icons/xls.svg';
 
 const ClearStyles = css`
   color: var(--pri-clr-lnk);
@@ -36,7 +37,7 @@ const ButtonStyles = css`
     text-decoration: none;
   }
 `
-const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, disabled }:{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }) => {
+const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight, disabled }:{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }) => {
   let style = ``;
   if (mode === 'clear') {
     style += ClearStyles
@@ -134,6 +135,20 @@ const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, disabled }
       box-shadow: var(--act-shd-bx);
     `
   }
+  if ($iconRight === 'xls') {
+    style += `
+      position: relative;
+      padding-right: 21px;
+      &:before { 
+        content: url(${IconXls}); 
+        position: absolute;
+        right: 0px;
+        top: -4px;
+        width: 18px;
+        height: 18px;
+      }
+    `
+  }
   if(disabled) {
     style += `
       color: #A9A9A9;
@@ -144,10 +159,10 @@ const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, disabled }
   return style;
 }
 
-export const AnchorLinkContainer = styled.a<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }>`
+export const AnchorLinkContainer = styled.a<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
   ${getLinkModifiedStyled}
 `
-export const ElLinkContainer = styled.span<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, disabled: boolean }>`
+export const ElLinkContainer = styled.span<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
   cursor:pointer;
   ${getLinkModifiedStyled}
 `