forstok-ui-lib 8.5.13 → 8.5.15

package/package.json

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

package/src/components/button/styles.ts

@@ -99,9 +99,6 @@ const getButtonModifiedStyled = ({
         background-color: var(--ck-clr-bg__act);
         color: var(--act-clr);
       }
-      &:hover {
-        text-decoration: underline;
-      }
       & ${IndicatorsArrowIconSvg} {
         fill: #ffffff;
         stroke: #ffffff;

package/src/components/link/styles.ts

@@ -1,9 +1,9 @@
-import { Link } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { Link } from "react-router-dom";
+import styled, { css } from "styled-components";
 
-import IconXls from '../../assets/images/icons/xls.svg'
-import { multiElipsis } from '../../assets/stylesheets/bases.styles'
-import { LinkMode } from './typed'
+import IconXls from "../../assets/images/icons/xls.svg";
+import { multiElipsis } from "../../assets/stylesheets/bases.styles";
+import { LinkMode } from "./typed";
 
 const ButtonStyles = css`
   position: relative;
@@ -14,16 +14,21 @@ const ButtonStyles = css`
   height: 30px;
   align-items: center;
   transform-origin: 100% 0%;
-  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
-  &, 
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out;
+  &,
   &:hover {
     text-decoration: none;
   }
-`
+`;
 const modeStyles = {
   clear: css`
     color: var(--pri-clr-lnk);
-    &, 
+    &,
     &:hover {
       text-decoration: none;
     }
@@ -33,7 +38,7 @@ const modeStyles = {
   `,
   clearR: css`
     color: var(--pri-clr-lnk);
-    &, 
+    &,
     &:hover {
       text-decoration: none;
     }
@@ -42,10 +47,15 @@ const modeStyles = {
     }
   `,
   blue: css`
-    &, 
+    & {
+      text-decoration: none;
+    }
+    &,
     &:hover {
       color: var(--pri-clr-lnk__hvr);
-      text-decoration: none;
+    }
+    &:hover {
+      text-decoration: underline;
     }
   `,
   trans: css`
@@ -53,13 +63,13 @@ const modeStyles = {
     height: auto;
     padding: 0;
     opacity: 1;
-    &, 
-    &:hover { 
+    &,
+    &:hover {
       color: var(--pri-clr-lnk__hvr);
       text-decoration: none;
-    }  
+    }
     &:hover {
-      opacity: .9; 
+      opacity: 0.9;
     }
   `,
   hover: css`
@@ -71,7 +81,7 @@ const modeStyles = {
     left: -6px;
     color: initial;
     grid-gap: 4px;
-    &:hover { 
+    &:hover {
       border-radius: var(--ter-rd);
       box-shadow: 1px 1px var(--pri-clr-ln);
       background-color: var(--mt-clr-bg__fc);
@@ -83,10 +93,10 @@ const modeStyles = {
     color: var(--ter-clr);
     background-color: var(--cl-clr-bg);
     border: 1px solid var(--sec-clr-ln);
-    &, 
-    &:hover { 
+    &,
+    &:hover {
       background-color: var(--cl-clr-bg__hvr);
-    }  
+    }
   `,
   redB: css`
     ${ButtonStyles}
@@ -94,7 +104,7 @@ const modeStyles = {
     background-color: var(--act-clr-bg);
     &:hover {
       background-color: var(--act-clr-bg__hvr);
-    } 
+    }
   `,
   greyB: css`
     ${ButtonStyles}
@@ -102,7 +112,7 @@ const modeStyles = {
     background-color: var(--mt-clr-bg__fc);
     &:hover {
       background-color: var(--cl-clr-bg__hvr);
-    } 
+    }
   `,
   table: css`
     display: block;
@@ -110,22 +120,39 @@ const modeStyles = {
     text-wrap: wrap;
     word-wrap: break-word;
     font-size: 13px;
-  `
-} as const
-const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight, disabled }:{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }) => css`
+  `,
+} as const;
+const getLinkModifiedStyled = ({
+  mode,
+  $elipsis,
+  $activated,
+  $shadow,
+  $iconRight,
+  disabled,
+}: {
+  mode?: LinkMode;
+  $elipsis: boolean;
+  $activated: boolean;
+  $shadow: boolean;
+  $iconRight?: string;
+  disabled: boolean;
+}) => css`
   ${mode && modeStyles[mode]}
 
-  ${$activated && css`
+  ${$activated &&
+  css`
     color: var(--sta-clr);
     font-weight: 400;
   `}
 
-  ${(mode === 'clear' || mode === 'clearR') && css`
-    font-weight: ${$activated ? '600' : 'normal'};
-    color: ${$activated ? 'var(--pri-clr-lnk__act) !important' : 'inherit'};
+  ${(mode === "clear" || mode === "clearR") &&
+  css`
+    font-weight: ${$activated ? "600" : "normal"};
+    color: ${$activated ? "var(--pri-clr-lnk__act) !important" : "inherit"};
   `}
 
-  ${$elipsis && css`
+  ${$elipsis &&
+  css`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -135,15 +162,17 @@ const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight
     ${multiElipsis}
   `}
 
-  ${$shadow && css`
+  ${$shadow &&
+  css`
     box-shadow: var(--act-shd-bx);
   `}
 
-  ${$iconRight === 'xls' && css`
+  ${$iconRight === "xls" &&
+  css`
     position: relative;
     padding-right: 21px;
-    &:before { 
-      content: url(${IconXls}); 
+    &:before {
+      content: url(${IconXls});
       position: absolute;
       right: 0px;
       top: -4px;
@@ -152,26 +181,48 @@ const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight
     }
   `}
 
-  ${disabled && css`
-    color: #A9A9A9;
+  ${disabled &&
+  css`
+    color: #a9a9a9;
     opacity: 0.7;
     pointer-events: none;
   `}
-`
-export const AnchorLinkContainer = styled.a<{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
+`;
+export const AnchorLinkContainer = styled.a<{
+  mode?: LinkMode;
+  $elipsis: boolean;
+  $activated: boolean;
+  $shadow: boolean;
+  $iconRight?: string;
+  disabled: boolean;
+}>`
   ${getLinkModifiedStyled}
-`
+`;
 
-export const ElLinkContainer = styled.span<{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
-  cursor:pointer;
+export const ElLinkContainer = styled.span<{
+  mode?: LinkMode;
+  $elipsis: boolean;
+  $activated: boolean;
+  $shadow: boolean;
+  $iconRight?: string;
+  disabled: boolean;
+}>`
+  cursor: pointer;
   ${getLinkModifiedStyled}
-`
+`;
 
-export const LinkContainer = styled(Link)<{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
+export const LinkContainer = styled(Link)<{
+  mode?: LinkMode;
+  $elipsis: boolean;
+  $activated: boolean;
+  $shadow: boolean;
+  $iconRight?: string;
+  disabled: boolean;
+}>`
   &._refHoverLink {
     padding: 3px 0px 0px 6px;
     position: relative;
     top: -3px;
   }
   ${getLinkModifiedStyled}
-`
+`;

package/src/components/text/styles.ts

@@ -1,76 +1,85 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from "styled-components";
 
-const elipsisStyle = css `
+const elipsisStyle = css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
   max-width: 100%;
   width: auto;
-`
+`;
 
-const getTextModifiedStyled = ({ $color, $elipsis }:{ $color?: string, $elipsis: boolean }) => {
+const getTextModifiedStyled = ({
+  $color,
+  $elipsis,
+}: {
+  $color?: string;
+  $elipsis: boolean;
+}) => {
   let style = ``;
-  if ($color === 'mute') { 
+  if ($color === "mute") {
     style += `
       color: var(--mt-clr);
-    `
-  } else if ($color === 'blue') { 
+    `;
+  } else if ($color === "blue") {
     style += `
       color: var(--pri-clr-lnk__hvr);
-    `
-  } else if ($color === 'green') { 
+    `;
+  } else if ($color === "green") {
     style += `
       color: green;
-    `
-  } else if ($color === 'red') { 
+    `;
+  } else if ($color === "red") {
     style += `
       color: var(--sta-clr);
-    `
-  } else if ($color === 'grey') { 
+    `;
+  } else if ($color === "grey") {
     style += `
       color: var(--mt-clr);
-    `
-  } else if ($color === 'darkgrey') { 
+    `;
+  } else if ($color === "darkgrey") {
     style += `
       color: var(--mt-clr);
-    `
-  } else if ($color === 'supergrey') { 
+    `;
+  } else if ($color === "supergrey") {
     style += `
       color: #929291;
-    `
-  } else if ($color === 'orange') { 
+    `;
+  } else if ($color === "orange") {
     style += `
       color: orange;
-    `
-  } else if($color === 'yellow') {
+    `;
+  } else if ($color === "yellow") {
     style += `
       color: #F8813E;
-    `
-  } else if ($color === 'black') { 
+    `;
+  } else if ($color === "black") {
     style += `
       color: #000000;
-    `
-  } else if ($color === 'lightgreen') { 
+    `;
+  } else if ($color === "lightgreen") {
     style += `
       color: #21BA45;
-    `
-  } else if ($color === 'mate') { 
+    `;
+  } else if ($color === "mate") {
     style += `
       color: #495057;
-    `
-  } else if ($color === 'initial') { 
+    `;
+  } else if ($color === "initial") {
     style += `
       color: var(--pri-clr);
-    `
+    `;
   }
   if ($elipsis) {
-    style += elipsisStyle
+    style += elipsisStyle;
   }
   return style;
-}
+};
 
-export const TextContainer = styled.span<{ $color?: string, $elipsis: boolean }>`
+export const TextContainer = styled.span<{
+  $color?: string;
+  $elipsis: boolean;
+}>`
   display: grid;
   line-height: normal;
   i {
@@ -78,4 +87,4 @@ export const TextContainer = styled.span<{ $color?: string, $elipsis: boolean }>
     margin-left: 5px;
   }
   ${getTextModifiedStyled}
-`
+`;