forstok-ui-lib 8.5.12 → 8.5.13

package/package.json

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

package/src/components/button/styles.ts

@@ -1,46 +1,64 @@
-import styled, { css } from 'styled-components';
-import { buttonActiveStyle, buttonHoverStyle, buttonStyle } from '../../assets';
-import IconAgent from '../../assets/images/icons/agent.svg'
-import IconReport from '../../assets/images/icons/report.svg'
-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 IconArrowDownload from '../../assets/images/icons/arrow-download.svg'
-import IconArrowWhiteUpload from '../../assets/images/icons/arrow-white-upload.svg'
-import IconFilter from '../../assets/images/icons/filter.svg'
-import IconCalendar from '../../assets/images/icons/calendar.svg'
-import IconTag from '../../assets/images/icons/tag.svg'
+import styled, { css } from "styled-components";
+import { buttonActiveStyle, buttonHoverStyle, buttonStyle } from "../../assets";
+import IconAgent from "../../assets/images/icons/agent.svg";
+import IconReport from "../../assets/images/icons/report.svg";
+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 IconArrowDownload from "../../assets/images/icons/arrow-download.svg";
+import IconArrowWhiteUpload from "../../assets/images/icons/arrow-white-upload.svg";
+import IconFilter from "../../assets/images/icons/filter.svg";
+import IconCalendar from "../../assets/images/icons/calendar.svg";
+import IconTag from "../../assets/images/icons/tag.svg";
 
 const IconStyles = css`
   display: inline-block;
   pointer-events: none;
-`
+`;
 
-const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoading, $activated, $size, disabled, $iconLeft }: { $mode?: string, $isIndicatorArrow: boolean, $isShown: boolean, $isLoading: boolean, $activated: boolean, $size?: string, disabled: boolean, $iconLeft?: string }) => {
+const getButtonModifiedStyled = ({
+  $mode,
+  $isIndicatorArrow,
+  $isShown,
+  $isLoading,
+  $activated,
+  $size,
+  disabled,
+  $iconLeft,
+}: {
+  $mode?: string;
+  $isIndicatorArrow: boolean;
+  $isShown: boolean;
+  $isLoading: boolean;
+  $activated: boolean;
+  $size?: string;
+  disabled: boolean;
+  $iconLeft?: string;
+}) => {
   let style = ``;
   if (!$isShown) {
-    return `display:none;`
+    return `display:none;`;
   }
   if ($size) {
-    if ($size === 'xsmall') {
+    if ($size === "xsmall") {
       style += `
         font-size: 12px;
         height: 20px;
         padding: 0 8px;
-      `
-    } else if ($size === 'small') {
+      `;
+    } else if ($size === "small") {
       style += `
         font-size: 13px;
         height: 28px;
         min-width: 75px;
-      `
-    } else if ($size === 'medium') {
+      `;
+    } else if ($size === "medium") {
       style += `
         height: 32px;
-      `
+      `;
     }
   }
-  if ($mode === 'red') {
+  if ($mode === "red") {
     style += `
       color: var(--act-clr);
       background-color: var(--act-clr-bg);
@@ -52,8 +70,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         fill: #ffffff;
         stroke: #ffffff;
       }
-    `
-  } else if ($mode === 'green') {
+    `;
+  } else if ($mode === "green") {
     style += `
       color: var(--act-clr);
       background-color: rgb(33, 186, 69);
@@ -65,37 +83,40 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         fill: #ffffff;
         stroke: #ffffff;
       }
-    `
-  } else if ($mode === 'white') {
+    `;
+  } else if ($mode === "white") {
     style += `
       color: var(--mt-clr);
       background-color: var(--cl-clr-bg);
       &:hover { 
         background-color: var(--cl-clr-bg__hvr);
       }  
-    `
-  } else if ($mode === 'blue') {
+    `;
+  } else if ($mode === "blue") {
     style += `
       &, 
       &:hover {
         background-color: var(--ck-clr-bg__act);
         color: var(--act-clr);
       }
+      &:hover {
+        text-decoration: underline;
+      }
       & ${IndicatorsArrowIconSvg} {
         fill: #ffffff;
         stroke: #ffffff;
       }
-    `
-  } 
+    `;
+  }
   // else if ($mode === 'nude') {
   //   style += `
-  //     &, &:hover { 
-  //       background-color: var(--ter-clr-bg); 
-  //     }  
+  //     &, &:hover {
+  //       background-color: var(--ter-clr-bg);
+  //     }
   //   `
-  // } 
-  else if ($mode === 'clearL') {
-    style +=`
+  // }
+  else if ($mode === "clearL") {
+    style += `
       width: auto;
       height: auto;
       text-decoration: none;
@@ -115,8 +136,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         background-color: transparent !important; 
         color: var(--mt-clr);
       }
-    `
-  } else if ($mode === 'clearB') {
+    `;
+  } else if ($mode === "clearB") {
     style += `
       background-color: var(--cl-clr-bg);
       color: var(--pri-clr-lnk__hvr);
@@ -134,22 +155,22 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         fill: var(--pri-clr-lnk__hvr);
         stroke: var(--pri-clr-lnk__hvr);
       }
-    `
-  } else if ($mode === 'clear') {
-    style +=`
+    `;
+  } else if ($mode === "clear") {
+    style += `
       box-shadow: none !important;
       &, 
       &:hover { 
         background-color: transparent; 
       }
-    `
+    `;
     if ($activated) {
       style += `
         color: var(--pri-clr) !important;
         font-weight: 600;
-      `
+      `;
     }
-  } else if ($mode === 'more') {
+  } else if ($mode === "more") {
     style += `
       padding: 8px;
       background-color: var(--mt-clr-bg__fc);
@@ -159,8 +180,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         width: 14px;
         ${IconStyles}
       }
-    `
-  } else if ($mode === 'round-close') {
+    `;
+  } else if ($mode === "round-close") {
     style += `
       background-color: transparent;
       box-shadow: none;
@@ -169,8 +190,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         width: 12px;
         ${IconStyles}
       }  
-    `
-  } else if ($mode === 'small-white-round-close') {
+    `;
+  } else if ($mode === "small-white-round-close") {
     style += `
       &, 
       &:hover, 
@@ -183,8 +204,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         width: 8px;
         ${IconStyles}
       }  
-    `
-  } else if ($mode === 'page-option') {
+    `;
+  } else if ($mode === "page-option") {
     style += `
       font-weight: 600;
       cursor: pointer;
@@ -195,13 +216,13 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         height: 14px;
         margin-top: -7px;
       }
-    `
-  } else if ($mode === 'sortBy') {
+    `;
+  } else if ($mode === "sortBy") {
     style += `
       > span {
         display: none;
       }
-    `
+    `;
   }
   if (disabled) {
     style += `
@@ -212,11 +233,11 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
         cursor: default;
         color: var(--sec-clr);
       }
-    `
+    `;
   }
   if ($iconLeft) {
-    style += ` padding-left: 35px; `
-    if ($iconLeft === 'export') {
+    style += ` padding-left: 35px; `;
+    if ($iconLeft === "export") {
       style += `
         &:before {
           content: url(${IconArrowDownload}); 
@@ -226,8 +247,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           width: 14px;
           ${IconStyles}
         }
-      `
-    } else if ($iconLeft === 'import') {
+      `;
+    } else if ($iconLeft === "import") {
       style += `
         &:before { 
           content: url(${IconArrowWhiteUpload}); 
@@ -238,8 +259,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           margin-left: -8px;
           ${IconStyles}
         }
-      `
-    } else if ($iconLeft === 'filter') {
+      `;
+    } else if ($iconLeft === "filter") {
       style += `
         &:before { 
           content: url(${IconFilter}); 
@@ -250,8 +271,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           width: 14px;
           height: 16px;
         }
-      `
-    } else if ($iconLeft === 'calendar') {
+      `;
+    } else if ($iconLeft === "calendar") {
       style += `
         &:before { 
           content: url(${IconCalendar}); 
@@ -262,8 +283,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           width: 14px;
           height: 16px;
         }
-      `
-    } else if ($iconLeft === 'add') {
+      `;
+    } else if ($iconLeft === "add") {
       style += `
         &:before { 
           content: '+'; 
@@ -275,8 +296,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           height: 16px;
           font-size: 16px;
         }
-      `
-    } else if ($iconLeft === 'agent') {
+      `;
+    } else if ($iconLeft === "agent") {
       style += `
         &:before { 
           content: url(${IconAgent}); 
@@ -287,8 +308,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           width: 14px;
           height: 16px;
         }
-      `
-    } else if ($iconLeft === 'report') {
+      `;
+    } else if ($iconLeft === "report") {
       style += `
         &:before { 
           content: url(${IconReport}); 
@@ -299,8 +320,8 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           width: 14px;
           height: 16px;
         }
-      `
-    } else if ($iconLeft === 'tag') {
+      `;
+    } else if ($iconLeft === "tag") {
       style += `
         &:before { 
           content: url(${IconTag}); 
@@ -311,33 +332,46 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           width: 15px;
           height: 16px;
         }
-      `
+      `;
     }
   }
   if ($isIndicatorArrow) {
     style += ` 
       padding-right: 25px; 
-    `
+    `;
   }
   if ($isLoading) {
     style += ` 
       padding-right: 30px !important; 
-    `
+    `;
   }
   return style;
-}
-const getIndicatorsArrowIconSvgModifiedStyled = ({ color }:{ color?: string }) => {
+};
+const getIndicatorsArrowIconSvgModifiedStyled = ({
+  color,
+}: {
+  color?: string;
+}) => {
   let style = ``;
-  if (color && color !== 'initial') {
+  if (color && color !== "initial") {
     style += `
       fill: ${color};
       stroke: ${color};
-    `
+    `;
   }
   return style;
-}
+};
 
-export const ButtonContainer = styled.button<{ $mode?: string, $isIndicatorArrow: boolean, $isShown: boolean, $isLoading: boolean, $activated: boolean, $size?: string, disabled: boolean, $iconLeft?: string }>`
+export const ButtonContainer = styled.button<{
+  $mode?: string;
+  $isIndicatorArrow: boolean;
+  $isShown: boolean;
+  $isLoading: boolean;
+  $activated: boolean;
+  $size?: string;
+  disabled: boolean;
+  $iconLeft?: string;
+}>`
   ${buttonStyle}
   &:hover {
     ${buttonHoverStyle}
@@ -350,7 +384,6 @@ export const ButtonContainer = styled.button<{ $mode?: string, $isIndicatorArrow
   }
   &._refButtonLoading {
     padding-right: 30px !important;
-    
   }
   > span {
     white-space: nowrap;
@@ -364,8 +397,7 @@ export const ButtonContainer = styled.button<{ $mode?: string, $isIndicatorArrow
     margin-top: -8px;
   }
   ${getButtonModifiedStyled}
-  
-`
+`;
 export const IndicatorsArrowIconSvg = styled.svg<{ color?: string }>`
   display: inline-block;
   fill: currentColor;
@@ -379,4 +411,4 @@ export const IndicatorsArrowIconSvg = styled.svg<{ color?: string }>`
   height: 14px;
   margin-top: -7px;
   ${getIndicatorsArrowIconSvgModifiedStyled}
-`
+`;