forstok-ui-lib 6.7.5 → 6.7.7

package/package.json

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

package/src/components/button/styles.ts

@@ -1,5 +1,7 @@
 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'
 
 const IconStyles = css`
   display: inline-block;
@@ -256,6 +258,30 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           font-size: 16px;
         }
       `
+    } else if ($iconLeft === 'agent') {
+      style += `
+        &:before { 
+          content: url(${IconAgent}); 
+          position: absolute;
+          left: 12px;
+          top: 50%;
+          margin-top: -8px;
+          width: 14px;
+          height: 16px;
+        }
+      `
+    } else if ($iconLeft === 'report') {
+      style += `
+        &:before { 
+          content: url(${IconReport}); 
+          position: absolute;
+          left: 12px;
+          top: 50%;
+          margin-top: -8px;
+          width: 14px;
+          height: 16px;
+        }
+      `
     }
   }
   if ($isIndicatorArrow) {

package/src/components/image/channel.tsx

@@ -4,7 +4,7 @@ import { InitialContainer, APILabel } from '../../assets/stylesheets/shares.styl
 
 import { ImageMode } from './type'
 
-const ImageChannelComponent = ({ data, label, size, isImageOnly, $mode }:{ data?: any, label?: string, size?: string, isImageOnly?: boolean, $mode?: ImageMode }) => {
+const ImageChannelComponent = ({ data, label, size, isImageOnly, $mode, $isPhone }:{ data?: any, label?: string, size?: string, isImageOnly?: boolean, $mode?: ImageMode, $isPhone?: boolean }) => {
   const fontSize = size ? ((parseInt(size) / 2) > 10 ? (parseInt(size) / 2) : 10) : 10
   const defSize = size || '20px'
 
@@ -18,6 +18,7 @@ const ImageChannelComponent = ({ data, label, size, isImageOnly, $mode }:{ data?
   const defSrc = data?.icon || data?.imageUrl || data?.channelImage || data?.channel_image || ''
   const defColor = data?.color || data?.channelColor || data?.channel_color || '#ooo'
   const defInitial = data?.channelInitials || data?.channelInitial || data?.channel_initials || data?.initials || ''
+  const defPhone = data?.phone || data?.storeId || '-'
   const isAPI = data?.availableAPI
 
   return (
@@ -50,10 +51,21 @@ const ImageChannelComponent = ({ data, label, size, isImageOnly, $mode }:{ data?
         )}
       </div>
       {!isImageOnly && (
-        <span className='multi-elipsis' title={defName}>
-          {defName}
-          {isAPI && <APILabel className='_refLabel'>API</APILabel>}
-        </span>
+        $isPhone ? (
+          <>
+            <span className='multi-elipsis' title={defName}>
+              {defName}
+            </span>
+            <aside className='multi-elipsis' title={defPhone}>
+              {defPhone}
+            </aside>
+          </>
+        ) : (
+          <span className='multi-elipsis' title={defName}>
+            {defName}
+            {isAPI && <APILabel className='_refLabel'>API</APILabel>}
+          </span>
+        )
       )}
     </>
   )