intelicoreact 0.0.3 → 0.0.7

package/src/Molecular/FormElements/FormElement.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import Label from '../../Atomic/FormElements/Label/Label';
+import './FormElement.scss';
+
+const RC = 'form-element';
+
+const FormElement = ({ label, required, children, error, className, hint }) => {
+  return (
+    <div className={cn(className, RC)}>
+      {label && <Label className={`${RC}__label`} label={label} hint={hint} isRequired={required} />}
+      {children}
+      {error && <span className={`${RC}__error`}>{error}</span>}
+    </div>
+  );
+};
+
+export default FormElement;

package/src/Molecular/FormElements/FormElement.scss

@@ -0,0 +1,8 @@
+.form-element__error {
+  margin-top: 2px;
+  margin-left: 1px;
+  position: absolute;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}

package/src/Molecular/FormElements/FormElement.stories.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import Input from '../../Atomic/FormElements/Input/Input';
+import FormElement from './FormElement';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/Form Element',
+  component: FormElement,
+  argTypes: {
+    label: {
+      description: 'string/JSX'
+    },
+    children: {
+      description: 'JSX'
+    },
+    error: {
+      description: 'string - print error if is errored'
+    },
+    required: {
+      description: 'boolean'
+    },
+    className: {
+      description: 'string'
+    },
+    hint: {
+      description: 'object {text: string, hintSide: bottom/right',
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+
+const Template = args => {
+  return (
+    <FormElement {...args}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <Input error={args.error} />
+    </FormElement>
+  );
+};
+
+export const InputTemplate = Template.bind({});
+
+InputTemplate.args = {
+  label: 'Text label',
+  error: 'error',
+  required: true,
+  hint: {
+    text: 'hint',
+    hintSide: 'bottom'
+  },
+  numStep: 1,
+  min: '0',
+  max: '5',
+  placeholder: 'Placeholder',
+  mask: ''
+};

package/src/scss/_vars.scss

@@ -1,4 +1,6 @@
 /* THEME COLORS*/
+@use "sass:math";
+
 $color--secondary: #f06d8d;
 $color--primary: #6b81dd;
 $color--dark: #1e1e2d;
@@ -43,4 +45,4 @@ $h4-fs: 22px;
 $h4-lh: 1.18;
 
 $txt: 14px;
-$txt--lh: (20 / 14);
+$txt--lh: math.div(20, 14);

package/src/scss/main.scss

@@ -1,5 +1,5 @@
 @import './fonts';
-@import './anme/styles.scss';
+@import '~anme/scss/styles.scss';
 
 body {
     font-family: 'Roboto', sans-serif;
@@ -35,6 +35,6 @@ button {
 
 .main {
     &__wrap {
-        display: flex;  
+        display: flex;
     }
-}
+}