forstok-ui-lib 5.1.15 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.1.15",
+  "version": "5.2.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -9,7 +9,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c --bundleConfigAsCjs",
-    "publish": "git add . && git commit -m 'patch' && git push origin master && npm run build && npm version patch && npm publish"
+    "patch": "npm run build && npm version patch && npm publish",
+    "master": "git add . && git commit -m 'patch' && git push origin master"
   },
   "repository": {
     "type": "git",

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

@@ -0,0 +1,10 @@
+<?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">
+<g id="style=fill">
+<g id="warning-circle">
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 6.25C12.4142 6.25 12.75 6.58579 12.75 7L12.75 14.1046C12.75 14.5189 12.4142 14.8547 12 14.8547C11.5858 14.8547 11.25 14.5189 11.25 14.1047L11.25 7C11.25 6.58579 11.5858 6.25 12 6.25ZM12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18L12.01 18C12.5623 18 13.01 17.5523 13.01 17C13.01 16.4477 12.5623 16 12.01 16L12 16Z" fill="#fc5c64"/>
+</g>
+</g>
+</svg>

package/src/assets/stylesheets/shares.styles.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { responseWidth} from './bases.styles';
+import { responseWidth, formLabel} from './bases.styles';
 
 const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
   let style = ``
@@ -20,6 +20,46 @@ const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
   }
   return style
 }
+const getInputGroupModFunc = ({ $mode, $required }:{ $mode?: string, $required?: boolean }) => {
+  let style = `` 
+  if ($mode === 'column') {
+    style +=` 
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-columns: 1.1fr 2fr;
+      align-items: baseline;
+      grid-gap: 10px;
+      > label, > aside {
+        padding: 0;
+        margin: 0;
+      }
+    `
+  } else if ($mode === 'column-product')  {
+    style +=` 
+      > div {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: max-content auto;
+        grid-gap: 10px;
+        ${MuteLabel} {
+          display: grid;
+          align-items: center;
+        }
+      }
+    `
+  }
+  if ($required) {
+    style +=` 
+      > label, > aside {
+        &:after {
+          content: '*';
+          color: red;
+        }
+      }
+    `
+  }
+  return style
+}
 
 export const PanelContainer = styled.section`
   position: relative;
@@ -166,4 +206,42 @@ export const InfoGroup = styled.div`
     overflow-wrap: break-word;
     word-break: break-word;
   }
+`
+export const MuteLabel = styled.span<{ $size?: string }>`
+  color: var(--mt-clr);
+  font-size: 12px;
+  word-break: break-all;
+  &._refWithIcon {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: start;
+    grid-gap: 4px;
+    * { 
+      margin-right: 0; 
+    }
+  }
+  ${({ $size }:{ $size?: string }) => {
+    if ($size === 'medium') 
+      return css` 
+        font-size: 13px;
+        line-height: 12px;
+        * { 
+          margin-right: 4px; 
+        }
+      `
+  }}
+`
+export const InputGroup = styled.article<{ $mode?: string, $required?: boolean }>`
+  > label, 
+  > aside {
+    ${formLabel}
+    margin-bottom: 6px;
+    padding: 0 6px;
+    display: block;
+    font-size: 14px;
+  }
+  > div { 
+    display: grid; 
+  }
+  ${getInputGroupModFunc}
 `

package/src/components/icon/styles.ts

@@ -19,6 +19,7 @@ import IconSuccess from '../../assets/images/icons/success.svg';
 import IconEmail from '../../assets/images/icons/email.svg';
 import IconPrint from '../../assets/images/icons/print.svg';
 import IconWarning from '../../assets/images/icons/warning.svg';
+import IconAlert from '../../assets/images/icons/alert.svg';
 import IconBarcode from '../../assets/images/icons/barcode.svg';
 
 const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: string, $name: string, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => {
@@ -150,6 +151,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break; 
+    case 'alert': 
+      style += `
+        &:before { 
+          content: url(${IconAlert}); 
+        }
+      `
+      break;
     case 'barcode': 
       style += `
         &:before {