forstok-ui-lib 5.0.0 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "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/form/styles.ts

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components'
+
+const PartialFormContainerStyles = css`
+  display: grid;
+  grid-row-gap: 12px;
+  grid-column-gap: 16px;
+  width: 100%;
+  margin-bottom: 12px;
+  align-items: start;
+`
+
+const getFormContainerModifiedStyles = ({ name }:{ name?: string }) => {
+  let style = ``
+  if (name === 'invoiceForm') {
+    style += `
+      grid-gap: 15px;
+    `
+  }
+  return style
+}
+
+const getInnerFormContainerModifiedStyles =({ $width }:{ $width?: string | number }) => {
+  let style = ``
+  if ($width) {
+    style += ` 
+      @media (min-width: 768px) {
+        width: ${$width}; 
+      }
+    `
+  }
+  return style
+}
+
+export const FormContainer = styled.form.attrs((props: { name?: string; autoComplete?: string }) => ({
+    name: props.name || 'form',
+    autoComplete: props.autoComplete || 'off'
+}))<{ name?: string }>`
+  display: inline-grid;
+  grid-auto-flow: row;
+  grid-gap: 25px;
+  width: 100%;
+  height: 100%;
+  [class*='singleValue'] {
+    width: 100%;
+    color: var(--inp-clr);
+    ._refLabel {
+      top: 5.5px;
+      right: 0;
+    }
+  }
+  ${getFormContainerModifiedStyles}
+`
+export const SingleFormContainer = styled.section<{ $width?: string | number }>`
+  ${PartialFormContainerStyles}
+  ${getInnerFormContainerModifiedStyles}
+`

package/src/components/index.ts

@@ -14,4 +14,6 @@ export { default as ReactPortalComponent } from './portal';
 
 export * from './dropdown/typed';
 export * from './message/typed';
-export * from './popup/typed';
+export * from './popup/typed';
+
+export * from './form/styles';

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;
         }