forstok-ui-lib 5.1.16 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.1.16",
+  "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/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}
 `