forstok-ui-lib 5.2.46 → 5.2.48

package/package.json

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

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

@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="100%" height="100%" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M940 4343 c-174 -29 -331 -159 -391 -323 l-20 -55 -194 3 c-217 3
+-257 -3 -300 -48 -25 -26 -30 -40 -30 -80 0 -40 5 -54 30 -80 43 -45 83 -51
+300 -48 l195 3 11 -35 c32 -98 110 -202 193 -259 65 -45 167 -81 248 -87 222
+-19 431 110 515 316 l22 55 1753 5 c1718 5 1754 5 1785 25 34 20 63 68 63 105
+0 37 -29 85 -63 105 -31 20 -67 20 -1785 25 l-1753 5 -22 55 c-89 219 -326
+352 -557 313z m159 -259 c104 -30 181 -135 181 -244 0 -188 -204 -314 -370
+-230 -89 46 -140 128 -140 230 0 76 21 129 71 178 73 74 158 96 258 66z"/>
+<path d="M3991 3060 c-171 -36 -329 -182 -385 -352 -5 -17 -97 -18 -1738 -18
+-1111 0 -1746 -4 -1769 -10 -19 -5 -48 -24 -65 -41 -24 -25 -29 -39 -29 -79 0
+-40 5 -54 29 -79 17 -17 46 -36 65 -41 23 -6 658 -10 1769 -10 1641 0 1733 -1
+1738 -17 74 -227 297 -379 529 -359 210 17 380 153 448 358 5 15 30 17 224 20
+242 3 254 6 293 71 24 39 25 66 4 110 -32 66 -53 72 -297 75 -194 3 -219 5
+-224 20 -52 157 -171 281 -319 333 -68 23 -206 33 -273 19z m218 -269 c90 -47
+141 -129 141 -231 0 -102 -51 -184 -140 -230 -166 -84 -370 42 -370 230 0 187
+205 314 369 231z"/>
+<path d="M2443 1776 c-143 -35 -272 -137 -337 -268 -20 -39 -36 -77 -36 -84 0
+-12 -156 -14 -967 -14 -607 0 -981 -4 -1004 -10 -19 -5 -48 -24 -65 -41 -24
+-25 -29 -39 -29 -79 0 -40 5 -54 29 -79 17 -17 46 -36 65 -41 23 -6 397 -10
+1004 -10 811 0 967 -2 967 -14 0 -7 16 -45 36 -84 84 -169 268 -282 457 -282
+202 1 396 133 468 320 l24 60 985 2 c931 3 987 4 1013 21 34 22 67 74 67 104
+0 37 -30 89 -64 109 -30 18 -69 19 -1016 22 l-985 2 -24 60 c-88 230 -347 364
+-588 306z m196 -252 c99 -29 181 -140 181 -244 0 -133 -127 -260 -260 -260
+-133 0 -260 127 -260 260 0 101 82 215 176 244 64 19 99 19 163 0z"/>
+</g>
+</svg>

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/button/styles.ts

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import IconDotted from '../../assets/images/icons/dotted.svg';
 import IconClose from '../../assets/images/icons/close.svg';
 import IconCloseWhite from '../../assets/images/icons/close-white.svg';
+import IconFilter from '../../assets/images/icons/filter.svg';
 import IconCalendar from '../../assets/images/icons/calendar.svg';
 
 const IconStyles = css`
@@ -177,7 +178,19 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
   }
   if ($iconLeft) {
     style += ` padding-left: 35px; `
-    if ($iconLeft === 'calendar') {
+    if ($iconLeft === 'filter') {
+      style += `
+        &:before { 
+          content: url(${IconFilter}); 
+          position: absolute;
+          left: 12px;
+          top: 50%;
+          margin-top: -8px;
+          width: 14px;
+          height: 16px;
+        }
+      `
+    } else if ($iconLeft === 'calendar') {
       style += `
         &:before { 
           content: url(${IconCalendar}); 

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}
 `