forstok-ui-lib 1.0.11 → 1.0.13

package/src/components/button/button.styles.ts

@@ -0,0 +1,238 @@
+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';
+
+const IconStyles = css`
+  display: inline-block;
+  pointer-events: none;
+`
+
+const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoading, $activated, $size, disabled, $iconLeft, $shadow }: { $mode?: string, $isIndicatorArrow: boolean, $isShown: boolean, $isLoading: boolean, $activated: boolean, $size?: string, disabled: boolean, $iconLeft?: string, $shadow: boolean }) => {
+  let style = ``;
+  if (!$isShown) {
+    return `display:none;`
+  }
+  if ($shadow) {
+    style += `
+      box-shadow: var(--act-shd-bx);
+    `
+  }
+  if ($size) {
+    if ($size === 'xsmall') {
+      style += `
+        font-size: 12px;
+        height: 20px;
+        padding: 0 8px;
+      `
+    } else if ($size === 'small') {
+      style += `
+        font-size: 13px;
+        height: 28px;
+        min-width: 75px;
+      `
+    } else if ($size === 'medium') {
+      style += `
+        height: 32px;
+      `
+    }
+  }
+  if ($mode === 'red') {
+    style += `
+      color: var(--act-clr);
+      background-color: var(--act-clr-bg);
+      &:hover {
+        background-color: var(--act-clr-bg__hvr);
+      }
+      & ${IndicatorsArrowIconSvg} {
+        fill: #ffffff;
+        stroke: #ffffff;
+      }
+    `
+  } else if ($mode === 'white') {
+    style += `
+      color: var(--mt-clr);
+      background-color: var(--cl-clr-bg);
+      border: 1px solid var(--sec-clr-ln);
+      &:hover { 
+        background-color: var(--cl-clr-bg__hvr);
+      }  
+    `
+  } else if ($mode === 'blue') {
+    style += `
+      &, &:hover {
+        background-color: var(--ck-clr-bg__act);
+        color: var(--act-clr);
+      }
+      & ${IndicatorsArrowIconSvg} {
+        fill: #ffffff;
+        stroke: #ffffff;
+      }
+    `
+  } else if ($mode === 'nude') {
+    style += `
+      &, &:hover { 
+        background-color: var(--ter-clr-bg); 
+      }  
+    `
+  } else if ($mode === 'clearL') {
+    style +=`
+      width: auto;
+      height: auto;
+      color: var(--pri-clr-lnk__hvr);
+      text-decoration: none;
+      padding: 0;
+      margin: 0;
+      &, &:hover { 
+        background-color: transparent; 
+      }
+      &:hover {
+        opacity: .9;
+      }
+    `
+  } else if ($mode === 'clearB') {
+    style += `
+      background-color: var(--cl-clr-bg);
+      color: var(--pri-clr-lnk__hvr);
+      svg {
+        fill: var(--pri-clr-lnk__hvr);
+        stroke: var(--pri-clr-lnk__hvr);
+      }
+      & ${IndicatorsArrowIconSvg} {
+        width: 14px;
+        height: 14px;
+        margin-top: -7px;
+      }
+      &:disabled {
+        span {color: var(--mt-clr);}
+      }
+    `
+  } 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') {
+    style += `
+      padding: 8px;
+      background-color: var(--mt-clr-bg__fc);
+      &:before { 
+        content: url(${IconDotted});
+        height: 14px;
+        width: 14px;
+        ${IconStyles}
+      }
+    `
+  } else if ($mode === 'round-close') {
+    style += `
+      background-color: transparent;
+      &:before { 
+        content: url(${IconClose});
+        width: 12px;
+        ${IconStyles}
+      }  
+    `
+  } else if ($mode === 'small-white-round-close') {
+    style += `
+      background-color: transparent;
+      &:before { 
+        content: url(${IconCloseWhite});
+        width: 8px;
+        ${IconStyles}
+      }  
+    `
+  } else if ($mode === 'page-option') {
+    style += `
+      border: 1px solid var(--ck-clr-ln);
+      background-color: transparent;
+      font-weight: 600;
+      cursor: pointer;
+      border-radius: var(--ter-rd);
+      padding: 6px 12px;
+      height: 28px;
+      & ${IndicatorsArrowIconSvg} {
+        width: 14px;
+        height: 14px;
+        margin-top: -7px;
+      }
+    `
+  }
+  if (disabled) {
+    style += `
+      &, &:hover {
+        background-color: var(--mt-clr-bg__fc) !important;
+        cursor: default;
+        color: var(--mt-clr);
+      }
+    `
+  }
+  if ($iconLeft) {
+    style += ` padding-left: 35px; `
+  }
+  if ($isIndicatorArrow) {
+    style += ` 
+      padding-right: 25px; 
+    `
+  }
+  if ($isLoading) {
+    style += ` 
+      padding-right: 30px !important; 
+    `
+  }
+  return style;
+}
+const getIndicatorsArrowIconSvgModifiedStyled = ({ color }:{ color?: string }) => {
+  let style = ``;
+  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, $shadow: boolean }>`
+  > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  ._refLoading {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -8px;
+  }
+  &._refButtonLoading._refHidden {
+    padding-right: 16px !important;
+  }
+  &._refButtonLoading {
+    padding-right: 30px !important;
+    
+  }
+  ${getButtonModifiedStyled}
+  
+`
+export const IndicatorsArrowIconSvg = styled.svg`
+  display: inline-block;
+  fill: currentColor;
+  stroke: currentColor;
+  stroke-width: 0;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  margin-top: -10px;
+  width: 14px;
+  height: 14px;
+  margin-top: -7px;
+  ${getIndicatorsArrowIconSvgModifiedStyled}
+`

package/src/components/button/button.tsx

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes, ReactNode, RefObject } from 'react' ;
+import { ButtonContainer, IndicatorsArrowIconSvg } from './button.styles';
+
+type TButton = ButtonHTMLAttributes<HTMLButtonElement> & {
+  children?: ReactNode
+  $mode?: string
+  $isIndicatorArrow?: boolean
+  isIndicatorArrowColor?: string
+  $isShown?: boolean
+  $isLoading?: boolean
+  refContainer?: RefObject<HTMLButtonElement>
+  $activated?: boolean
+  $size?: string
+  $iconLeft?: string
+  $shadow?: boolean
+};
+
+const ButtonComponent = ({ children, $mode, $isIndicatorArrow=false, isIndicatorArrowColor='initial', $isShown=true, $shadow=false, $isLoading=false, refContainer, $activated=false, $size, $iconLeft, ...props }: TButton) => {
+  const { disabled } = props;
+  const IndicatorArrowIconEl = $isIndicatorArrow ? (
+          <IndicatorsArrowIconSvg color={isIndicatorArrowColor} height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false'>
+            <path d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'></path>
+          </IndicatorsArrowIconSvg>
+        ) : null;
+  return (
+    <ButtonContainer 
+      $mode={$mode} 
+      $isIndicatorArrow={$isIndicatorArrow ? true : false} 
+      $isShown={$isShown ? true : false} 
+      $shadow={$shadow ? true : false} 
+      disabled={disabled || $isLoading || false}
+      $isLoading={ $isLoading ? true : false} 
+      ref={refContainer} 
+      $activated={$activated ? true : false} 
+      $size={$size} 
+      $iconLeft={$iconLeft} 
+      {...props}>
+        {children}
+        {IndicatorArrowIconEl}
+    </ButtonContainer>
+  );
+}
+
+export default ButtonComponent;

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as TextComponent } from './text/text';
 export { default as LinkComponent } from './link/link';
 export { default as InputComponent } from './input/input';
-export { default as CheckboxComponent } from './checkbox/checkbox';
+export { default as CheckboxComponent } from './checkbox/checkbox';
+export { default as ButtonComponent } from './button/button';

package/src/declarations.d.ts

@@ -0,0 +1,54 @@
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react'
+  export const ReactComponent: FunctionComponent & SVGProps<{ title?: string }>;
+  const src: string;
+  export default src;
+}
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/tsconfig.json

@@ -21,7 +21,8 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "src/declarations.d.ts"
   ],
   "exclude": [
     "node_modules",