forstok-ui-lib 5.1.16 → 5.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.1.16",
+  "version": "5.2.3",
   "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/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/button/index.tsx

@@ -16,7 +16,7 @@ type TButton = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 const ButtonComponent = ({ children, $mode, $isIndicatorArrow=false, isIndicatorArrowColor='initial', $isShown=true, $shadow=false, $isLoading=false, refContainer, $activated=false, $size, $iconLeft, ...props }: TButton) => {
-  const { disabled } = props;
+  const { type, disabled } = props;
   const IndicatorArrowIconEl = $isIndicatorArrow ? (
           <IndicatorsArrowIconSvg color={isIndicatorArrowColor} height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false'>
             <path d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'></path>
@@ -24,6 +24,7 @@ const ButtonComponent = ({ children, $mode, $isIndicatorArrow=false, isIndicator
         ) : null;
   return (
     <ButtonContainer 
+      type={type || 'button'}
       {...$mode && { name: $mode }}
       $mode={$mode} 
       $isIndicatorArrow={$isIndicatorArrow ? true : false}