forstok-ui-lib 5.1.0 → 5.1.2

package/package.json

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

package/src/components/error/index.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import IconComponent from '../icon';
+import { ErrorContainer } from './styles';
+
+const ErrorComponent = ({ children, $mode, ...props }:{ children?: ReactNode, $mode?: string }) => {
+  return (
+    <ErrorContainer $mode={$mode} className='_refErrorContainer' {...props}>
+      <IconComponent $name='alert' $width='11px'></IconComponent>
+      {children}
+    </ErrorContainer>
+  )
+}
+
+export default ErrorComponent

package/src/components/error/styles.ts

@@ -0,0 +1,58 @@
+import styled from 'styled-components'
+import { multiElipsis } from '../../assets/stylesheets/bases.styles';
+
+const getErrorModifiedStyle = ({ $mode }: { $mode?: string }) => {
+  let style = ``
+  if ($mode === 'api') 
+    style += `
+      color: var(--mt-clr);
+      width: auto;
+      padding: .5em .5em;
+      margin: 10px;
+      font-weight: 400;
+    `
+  else if ($mode === 'table') 
+    style += `
+      font-size: 12.5px;
+      > i {
+        top: 1.5px;
+      }
+    `
+  else if ($mode === 'list') 
+    style += `
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        li {
+          font-size: 12.5px;
+        }
+      }
+    `
+  return style
+}
+
+export const ErrorContainer = styled.div<{ $mode?: string }>`
+  display: inline-grid !important;
+  grid-auto-flow: column !important;
+  grid-template-columns: min-content !important;
+  grid-gap: 1px !important;
+  align-items: baseline !important;
+  color: var(--err-clr);
+  align-content: center !important;
+  width: 100%;
+  text-align: left;
+  font-size: 12px;
+  line-height: 1 !important;
+  margin-top: 4px;
+  font-weight: 400;
+  position: relative;
+  padding-left: 14px;
+  ${multiElipsis}
+  > i {
+    position: absolute;
+    top: 1px;
+    left: 0;
+  }
+  ${getErrorModifiedStyle}
+`

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as TextComponent } from './text';
 export { default as LinkComponent } from './link';
 export { default as InputComponent } from './input';
+export { default as InputRefComponent } from './input/ref';
 export { default as CheckboxComponent } from './checkbox';
 export { default as ButtonComponent } from './button';
 export { default as LabelComponent } from './label';
@@ -12,6 +13,8 @@ export { default as MessageQuestionComponent } from './message/question';
 export { default as PopupComponent } from './popup';
 export { default as ReactPortalComponent } from './portal';
 export { default as ImageComponent } from './image';
+export { default as SelectComponent } from './select';
+export { default as ErrorComponent } from './error';
 
 export * from './dropdown/typed';
 export * from './message/typed';