forstok-ui-lib 5.4.7 → 5.4.8

package/package.json

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

package/src/assets/images/icons/notif-download-white.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 20 20" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 16.007812 10.878906 L 10 16.886719 L 3.992188 10.878906 L 5.097656 9.773438 L 9.21875 13.894531 L 9.21875 0 L 10.78125 0 L 10.78125 13.894531 L 14.902344 9.773438 Z M 20 18.4375 L 0 18.4375 L 0 20 L 20 20 Z M 20 18.4375 "/>
+</g>
+</svg>

package/src/assets/images/icons/notif-upload-white.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 20 20" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 5.097656 7.113281 L 3.992188 6.007812 L 10 0 L 16.007812 6.007812 L 14.902344 7.113281 L 10.78125 2.992188 L 10.78125 16.886719 L 9.21875 16.886719 L 9.21875 2.992188 Z M 0 18.410156 L 0 19.972656 L 20 19.972656 L 20 18.410156 Z M 0 18.410156 "/>
+</g>
+</svg>

package/src/components/icon/styles.ts

@@ -1,5 +1,5 @@
 import type { MouseEvent } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import IconArrowLeftBlue from '../../assets/images/icons/arrow-left-blue.svg';
 import IconSearch from '../../assets/images/icons/search.svg';
 import IconCheckGrey from '../../assets/images/icons/checkmark-tick-grey.svg';
@@ -29,6 +29,20 @@ import IconArrowRightDouble from '../../assets/images/icons/arrow-right-double.s
 import IconCalendar from '../../assets/images/icons/calendar.svg'
 import IconQuestion from '../../assets/images/icons/question.svg';
 import IconSortby from '../../assets/images/icons/sortby.svg';
+import IconNotificationDownload from '../../assets/images/icons/notif-download-white.svg';
+import IconNotificationUpload from '../../assets/images/icons/notif-upload-white.svg';
+
+const NotificationStyled = css`
+  width: 44px;
+  height: 44px;
+  vertical-align: middle;
+  text-align: center;
+  background-color: var(--mt-clr-bg);
+  border-radius: 100%;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+`
 
 const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: string, $name: string, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => {
   let style = ``;
@@ -237,6 +251,20 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break;
+    case 'NotificationDownload' :
+      style += `
+        ${NotificationStyled}
+        &:before { 
+          content: url(${IconNotificationDownload}); 
+        }`
+      break;
+    case 'NotificationUpload' :
+      style += `
+        ${NotificationStyled}
+        &:before { 
+          content: url(${IconNotificationUpload}); 
+        }`
+      break;
     default: 
       break;
   }