forstok-ui-lib 5.0.1 → 5.0.3

package/package.json

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

package/src/components/button/index.tsx

@@ -24,6 +24,7 @@ const ButtonComponent = ({ children, $mode, $isIndicatorArrow=false, isIndicator
         ) : null;
   return (
     <ButtonContainer 
+      {...$mode && { name: $mode }}
       $mode={$mode} 
       $isIndicatorArrow={$isIndicatorArrow ? true : false} 
       $isShown={$isShown ? true : false} 

package/src/components/image/index.tsx

@@ -0,0 +1,17 @@
+import type { ImgHTMLAttributes, ReactEventHandler } from 'react';
+import ImagePlaceholder from '../../assets/images/image-placeholder.jpg';
+import { ImageContainer } from './styles';
+
+type TImage = ImgHTMLAttributes<HTMLImageElement> & {
+  $mode?: string
+} 
+
+const ImageComponent = ({ $mode, ...props }: TImage) => {
+  const { width, height } = props;
+  const evError: ReactEventHandler<HTMLImageElement> = e => {
+    (e.target as HTMLImageElement).src = ImagePlaceholder;
+  }
+  return <ImageContainer $mode={$mode} width={width} height={height} onError={evError} {...props} />;
+}
+
+export default ImageComponent;

package/src/components/image/styles.ts

@@ -0,0 +1,39 @@
+import styled, { css } from 'styled-components'
+
+const storeStyles = css `
+  width: 32px;
+  height: 32px;
+`
+const productStyles = css`
+  background-color: var(--mt-clr-bg);
+`
+
+const getImageModifiedStyled = ({ $mode, width, height }: { $mode?: string, width?: string|number, height?: string|number }) => {
+  let style = ''
+  if ($mode === 'store') {
+    style += storeStyles
+  } else if ($mode === 'product') {
+    style += productStyles
+  }
+  if (width && height) {
+    style += `
+      width:${width}; 
+      height:${height};
+    `
+  } else if (width) {
+    style += `
+      width:${width}; 
+      height:${width};
+    `
+  } else if (height) {
+    style += `
+      width:${width}; 
+      height:${height};
+    `
+  }
+  return style
+}
+
+export const ImageContainer = styled.img<{ $mode?: string, width?: string|number, height?: string|number }>`
+  ${getImageModifiedStyled}
+`

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as MessageComponent } from './message';
 export { default as MessageQuestionComponent } from './message/question'; 
 export { default as PopupComponent } from './popup';
 export { default as ReactPortalComponent } from './portal';
+export { default as ImageComponent } from './image';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/popup/styles.ts

@@ -102,13 +102,13 @@ const getPopupHeaderWrapperModifiedStyled = ({ $width, $mode, $isOpen }:Pick<TPo
       position: fixed;
       z-index: 10;
       border-bottom: 1px solid var(--sec-clr-ln);
-      button[mode=round-close] {
+      button[name=round-close] {
         position: absolute; 
         top: 12px;
         right: 0px;
       }
       @media only screen and (min-width: 768px) {
-        button[mode=round-close] {
+        button[name=round-close] {
           top: 16px;
           right: 20px;
         }

package/tsconfig.json

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