forstok-ui-lib 8.1.2 → 8.2.0

package/package.json

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

package/src/assets/images/icons/arrow-down-grey.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 451.847 451.847" xml:space="preserve" style="fill: #c7c7cc;">
+	<path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
+		c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
+		c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
+</svg>

package/src/assets/images/icons/checkmark-x.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 700 700" enable-background="new 0 0 700 700" xml:space="preserve">
+<path fill="#fc5c64" d="M488.94,350.667l163.909-163.89c37.043-37.052,37.043-97.118,0-134.16
+	c-37.043-37.034-97.107-37.034-134.142,0L354.809,216.517L190.909,52.617c-37.033-37.034-97.117-37.034-134.151,0
+	c-37.042,37.042-37.042,97.108,0,134.16l163.9,163.89l-163.9,163.89c-37.042,37.052-37.042,97.118,0,134.161
+	c18.526,18.517,42.792,27.774,67.075,27.774c24.275,0,48.559-9.258,67.076-27.774l163.899-163.909l163.899,163.909
+	c18.518,18.517,42.782,27.774,67.066,27.774c24.283,0,48.559-9.258,67.075-27.774c37.043-37.043,37.043-97.109,0-134.161
+	L488.94,350.667z"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.25 11C10.25 10.4477 10.6977 10 11.25 10H12.75C13.3023 10 13.75 10.4477 13.75 11V18C13.75 18.5523 13.3023 19 12.75 19H11.25C10.6977 19 10.25 18.5523 10.25 18V11ZM14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9C13.1046 9 14 8.10457 14 7Z" fill="#758CA3"/>
+</svg>

package/src/assets/images/icons/link-green.svg

@@ -0,0 +1,12 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M14 10L10 14" stroke="#2DB84C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 13L18 11C19.3807 9.61929 19.3807 7.38071 18 6V6C16.6193 4.61929 14.3807 4.61929 13 6L11 8M8 11L6 13C4.61929 14.3807 4.61929 16.6193 6 18V18C7.38071 19.3807 9.61929 19.3807 11 18L13 16" stroke="#2DB84C" stroke-width="2" stroke-linecap="round"/> </g>
+
+</svg>

package/src/components/icon/index.tsx

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react';
 import LoadingComponent from '../loading';
 import { IconContainer } from './styles';
-import { IconMode, IconName } from './type';
+import { IconMode, IconName } from './typed';
 
 type TIcon = HTMLAttributes<HTMLElement> & {
   $mode?: IconMode

package/src/components/icon/styles.ts

@@ -98,8 +98,12 @@ import IconPrice from '../../assets/images/icons/price.svg'
 import IconThumb from '../../assets/images/icons/thumb.svg'
 import IconClipboard from '../../assets/images/icons/clipboard.svg'
 import IconReload from '../../assets/images/icons/reload.svg'
+import IconArrowDownGrey from '../../assets/images/icons/arrow-down-grey.svg'
+import IconCross from '../../assets/images/icons/checkmark-x.svg'
+import IconLinkGreen from '../../assets/images/icons/link-green.svg'
+import IconInfo from '../../assets/images/icons/info.svg'
 
-import { IconMode, IconName } from './type'
+import { IconMode, IconName } from './typed'
 
 const NotificationStyled = css`
   width: 44px;
@@ -210,7 +214,11 @@ const iconStyles = {
   'price': IconPrice, 
   'thumb': IconThumb, 
   'clipboard': IconClipboard,
-  'reload': IconReload
+  'reload': IconReload,
+  'arrow-down-grey': IconArrowDownGrey,
+  'cross': IconCross,
+  'link-green': IconLinkGreen,
+  'info': IconInfo
 } as const
 const modeStyles = {
   filter: css`
@@ -236,6 +244,14 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: Icon
     }
   `}
 
+  ${$name === 'link-green' && css`
+    &:before { 
+      position: relative;
+      top: 3px;
+      left: -2px;
+    }
+  `}
+
   ${($name === 'NotificationDownload' || $name === 'NotificationUpload') && css`
     ${NotificationStyled}
   `}

package/src/components/icon/{type.ts → typed.ts}

@@ -96,6 +96,10 @@ export type IconName =
   | 'thumb'
   | 'clipboard'
   | 'reload'
+  | 'arrow-down-grey'
+  | 'cross'
+  | 'link-green'
+  | 'info'
 
 export type IconMode = 
   | 'filter'

package/src/components/image/channel.tsx

@@ -3,7 +3,7 @@ import Image from '.'
 import { InitialContainer, APILabel } from '../../assets/stylesheets/shares.styles'
 import LinkComponent from '../link';
 
-import { ImageMode } from './type'
+import { ImageMode } from './typed'
 
 type TImage = {
   data?: any;

package/src/components/index.ts

@@ -39,6 +39,7 @@ export * from './select/typed';
 export * from './link/typed';
 export * from './dropdown/typed';
 export * from './date/typed';
+export * from './icon/typed';
 
 export * from './form/styles';
 export * from './date/styles';

package/src/components/table/index.tsx

@@ -2,7 +2,7 @@ import { isValidElement, useEffect } from 'react'
 
 import { TableContainer, TableHeadRow, TableHeadColumn, TableBodyRow, TableBodyColumn, TableFootRow, TableFootColumn, TableFinalRow, TableFinalColumn, TableBoldFootRow, TableBoldFootColumn } from './style'
 
-import type { TTable } from './type'
+import type { TTable } from './typed'
 
 const nameDefValue = `table_${new Date().getTime()}`
 

package/src/components/table/style.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import type { TableMode, TTable } from './type'
+import type { TableMode, TTable } from './typed'
 
 type TTableStyle = Omit<TTable, 'children'>