reso-ui 1.1.0

package/src/pending_components/form/input-file/input-file.js

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+
+const ALLOWED_FILE_TYPES = /jpg|jpeg|png/; // regex
+
+const InputFile = ({
+  value = "",
+  id = "inputFileComponent",
+  disabled = false,
+  placeholder,
+  required = false,
+  inputFileText = "Select",
+  onFileChange = () => {},
+  onError = () => {},
+  onReset = () => {},
+}) => {
+  const [tempFileName, setTempFileName] = useState(value);
+  const [fileChanged, setFileChanged] = useState(false);
+  const [inputError, setInputError] = useState(null);
+
+  useEffect(() => {
+    setTempFileName(value);
+  }, [value]);
+
+  const containerClasses = classnames({
+    component_inputfile_container: true,
+  });
+
+  const inputClasses = classnames({
+    input_text: true,
+    component_inputfile_inputfield: true,
+    component_inputfile_inputfield_error: inputError,
+  });
+
+  const fileInputClasses = classnames({
+    no_select: true,
+    button: true,
+    component_inputfile_button: true,
+  });
+
+  const resetButtonClasses = classnames({
+    no_select: true,
+    button: true,
+    component_disabled: !tempFileName || !fileChanged,
+    component_inputfile_button: true,
+    component_inputfile_resetButton: true,
+  });
+
+  const validateInput = (e) => {
+    setInputError(null);
+    const filename = e.target.files[0].name;
+    const spl = filename.split(".");
+    const mimeType = spl[spl.length - 1];
+    const typeOK = ALLOWED_FILE_TYPES.test(mimeType.toLowerCase());
+
+    let pass = false;
+    let err = null;
+
+    if (typeOK) {
+      pass = true;
+      err = null;
+    } else {
+      pass = false;
+      err = "Please choose image files only.";
+    }
+
+    setInputError(err);
+    if (err) {
+      onError();
+    }
+    return pass;
+  };
+
+  return (
+    <div className={containerClasses}>
+      <div className="component_inputfile_rowGroup">
+        <input
+          id={id}
+          type="text"
+          value={tempFileName}
+          required={required}
+          className={inputClasses}
+          placeholder={placeholder}
+          disabled
+        ></input>
+        <label className={fileInputClasses}>
+          <input
+            type="file"
+            disabled={disabled}
+            onChange={(event) => {
+              if (event && event.target && event.target.files[0]) {
+                if (validateInput(event)) {
+                  setTempFileName(event.target.files[0].name);
+                  onFileChange(event);
+                  setFileChanged(true);
+                }
+              }
+            }}
+          ></input>
+          {inputFileText}
+        </label>
+        <div
+          className={resetButtonClasses}
+          onClick={() => {
+            setTempFileName(value || "");
+            setInputError(null);
+            setFileChanged(false);
+            onReset();
+          }}
+          disabled={!tempFileName || !fileChanged}
+        >
+          Reset
+        </div>
+      </div>
+      <div className="component_inputfile_errorContainer">
+        {inputError && (
+          <p className="component_inputfile_error">{inputError}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InputFile;

package/src/pending_components/form/input-file/input-file.scss

@@ -0,0 +1,76 @@
+input[type="file"] {
+  display: none;
+}
+
+.component_inputfile_container {
+  // border: 2px solid blue;
+  // sometimes container is flex, otherwise take width 100%
+  flex: 1;
+  width: 100%;
+}
+
+.component_inputfile_rowGroup {
+  // border: 2px solid red;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.component_inputfile_errorContainer {
+  padding: $padding-xxxsmall $padding-small;
+  padding-bottom: 0;
+}
+
+.component_inputfile_inputfield {
+  margin-right: $margin-xxxsmall;
+  height: $input-text-height;
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  outline: none;
+  padding: $padding-xsmall $padding-small;
+  font-family: $font-family;
+  // sometimes container is flex, otherwise take width 100%
+  flex: 1;
+  width: 100%;
+  &:focus {
+    box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  }
+  &:disabled {
+    background-color: $primary-grey-medium-light;
+  }
+}
+
+.component_inputfile_inputfield_error {
+  border: 2px solid $error-red;
+}
+
+.component_inputfile_button {
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  height: $upload-button-height;
+  line-height: $upload-button-height;
+  width: 80px;
+  text-align: center;
+  cursor: pointer;
+  background-color: $primary-grey-light;
+  color: $fc-dark;
+  &:hover {
+    background-color: $primary-grey-medium;
+    color: $fc-light;
+  }
+}
+
+.component_inputfile_resetButton {
+  color: $fc-light;
+  background-color: $primary-grey-dark;
+  margin-left: $margin-xxxsmall;
+  &:hover {
+    background-color: $primary-grey-medium;
+  }
+}
+
+.component_inputfile_error {
+  font-weight: 600;
+  color: $error-red;
+}

package/src/pending_components/form/input-label/input-label.js

@@ -0,0 +1,47 @@
+import React from "react";
+import classnames from "classnames";
+
+const InputLabel = ({
+  label,
+  description,
+  className,
+  value = "",
+  htmlFor = "inputComponent",
+  required = false,
+  labelClassName,
+}) => {
+  const containerClasses = classnames({
+    component_inputlabel_container: true,
+    [className]: true,
+  });
+
+  const labelClasses = classnames({
+    no_select: true,
+    input_label: true,
+    component_inputlabel_label_margin: description ? true : false,
+    component_inputlabel_label_margin_right: required,
+    [labelClassName]: labelClassName !== null && labelClassName !== undefined,
+  });
+  return (
+    <div className={containerClasses}>
+      <div className="component_input_label_top">
+        <label htmlFor={htmlFor} className={labelClasses}>
+          {label}
+        </label>
+        {required && <span className="input_required">{`(*required)`}</span>}
+      </div>
+      {description &&
+        (typeof description === "string" ? (
+          description && (
+            <>
+              <p className="input_description">{description}</p>
+            </>
+          )
+        ) : (
+          <p className="input_description">{description[`${value}`]}</p>
+        ))}
+    </div>
+  );
+};
+
+export default InputLabel;

package/src/pending_components/form/input-label/input-label.scss

@@ -0,0 +1,17 @@
+.component_inputlabel_container {
+  // border: 1px solid blue;
+  width: 128px;
+  margin-right: $margin-large;
+}
+
+.component_input_label_top {
+  // border: 2px solid;
+}
+
+.component_inputlabel_label_margin {
+  margin-bottom: $margin-xxsmall;
+}
+
+.component_inputlabel_label_margin_right {
+  margin-right: $margin-xxxsmall;
+}

package/src/pending_components/form/radio-button/radio-button.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+const RadioButton = ({
+  id = "radioInputComponent",
+  value = "",
+  options = [],
+  name,
+  onChange = () => {},
+  disabled = false,
+  required = false,
+}) => {
+  return (
+    <div className="component_radiobutton_radio_container" id={id}>
+      {options.map((op, key) => (
+        <div key={key} className="component_radiobutton_radio_item">
+          <label htmlFor={op} className="component_radiobutton_text">
+            {op}
+          </label>
+          <input
+            type="radio"
+            disabled={disabled}
+            required={required}
+            id={op}
+            value={op}
+            name={name}
+            checked={value === op}
+            onChange={() => {
+              onChange(op);
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default RadioButton;

package/src/pending_components/form/radio-button/radio-button.scss

@@ -0,0 +1,18 @@
+.component_radiobutton_radio_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 220px;
+  height: 100%;
+  margin-right: $margin-medium;
+}
+
+.component_radiobutton_text {
+  margin-right: $margin-small;
+}
+
+.component_radiobutton_radio_item {
+  //   border: 1px solid blue;
+  margin-right: $margin-large;
+}

package/src/pending_components/form/submit-button/submit-button.js

@@ -0,0 +1,18 @@
+import React from "react";
+import classnames from "classnames";
+
+const SubmitButton = ({ value, className, disabled }) => {
+  const classes = classnames({
+    button: true,
+    component_submitbutton: true,
+    [`${className}`]: true,
+  });
+
+  return (
+    <button type="submit" className={classes} disabled={disabled}>
+      {value}
+    </button>
+  );
+};
+
+export default SubmitButton;

package/src/pending_components/form/submit-button/submit-button.scss

@@ -0,0 +1,24 @@
+.component_submitbutton {
+  width: 100%;
+  height: 48px;
+  margin-top: $margin-xsmall;
+  line-height: 48px;
+  text-align: center;
+  margin-bottom: $margin-medium;
+  border-radius: $border-radius-default;
+  background: $bg-button-primary;
+  color: $fc-light;
+  font-family: $font-family;
+  opacity: 0.9;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:disabled {
+    background: $bg-button-disabled;
+    opacity: 0.9;
+    cursor: default;
+  }
+}

package/src/pending_components/form/submit-button-fixed-button/submit-button-fixed-button.js

@@ -0,0 +1,17 @@
+import React from "react";
+import classnames from "classnames";
+
+const SubmitButtonFixedButton = ({ disabled, className, value }) => {
+  const buttonClasses = classnames({
+    button: true,
+    component_submitbuttonfixed_button: true,
+    [`${className}`]: true,
+  });
+  return (
+    <button type="submit" className={buttonClasses} disabled={disabled}>
+      {value}
+    </button>
+  );
+};
+
+export default SubmitButtonFixedButton;

package/src/pending_components/form/submit-button-fixed-button/submit-button-fixed-button.scss

@@ -0,0 +1,23 @@
+.component_submitbuttonfixed_button {
+  width: 228px;
+  height: 48px;
+  margin-right: $margin-medium;
+  line-height: 48px;
+  text-align: center;
+  border-radius: $border-radius-default;
+  background: $bg-button-primary;
+  color: $fc-light;
+  font-family: $font-family;
+  opacity: 0.9;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:disabled {
+    background: $bg-button-disabled;
+    cursor: default;
+    opacity: 0.9;
+  }
+}

package/src/pending_components/form/submit-button-fixed-container/submit-button-fixed-container.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const SubmitButtonFixed = ({ children }) => {
+  return (
+    <div className="component_submitbuttonfixed_container">{children}</div>
+  );
+};
+
+export default SubmitButtonFixed;

package/src/pending_components/form/submit-button-fixed-container/submit-button-fixed-container.scss

@@ -0,0 +1,15 @@
+.component_submitbuttonfixed_container {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 85%;
+  height: 106px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
+  padding: $padding-medium $padding-xxlarge;
+  text-align: right;
+  opacity: 1;
+  background-color: $white;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

package/src/pending_components/form/text-area/text-area.js

@@ -0,0 +1,42 @@
+import React from "react";
+import classnames from "classnames";
+
+const TextArea = ({
+  inputClassName,
+  id = "inputTextArea",
+  required,
+  placeholder,
+  text,
+  rows = "4",
+  cols = "50",
+  value = "",
+  disabled = false,
+  maxLength = "250",
+  onChange = () => {},
+}) => {
+  const textareaClasses = classnames({
+    component_textarea_input: true,
+    [inputClassName]: true,
+  });
+
+  return (
+    <textarea
+      id={id}
+      required={required}
+      rows={rows}
+      cols={cols}
+      placeholder={placeholder}
+      value={value ? value : ""}
+      className={textareaClasses}
+      onChange={(e) => {
+        onChange(e);
+      }}
+      disabled={disabled}
+      maxLength={maxLength}
+    >
+      {text}
+    </textarea>
+  );
+};
+
+export default TextArea;

package/src/pending_components/form/text-area/text-area.scss

@@ -0,0 +1,16 @@
+.component_textarea_input {
+  width: 100%;
+  flex: 1;
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  outline: none;
+  padding: $padding-xsmall $padding-small;
+  font-family: $font-family;
+  color: $fc-dark;
+  &:focus {
+    box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  }
+  &:disabled {
+    background-color: $primary-grey-medium-light;
+  }
+}

package/src/styles/_defaults.scss

@@ -0,0 +1,22 @@
+@use "mixins" as *;
+@use "variables" as *;
+
+.component_theme_base {
+  font-family: $font-family;
+  background: unset;
+  @include theme_nature("light");
+}
+
+.component_layout_default {
+  // layout
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-sizing: border-box;
+
+  font-family: $font-family;
+
+  // font-smoothing
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/styles/_fonts.scss

@@ -0,0 +1,153 @@
+/*
+* Global CSS Styles should ONLY be imported in [global.scss]
+*/
+//////////////////////////
+// Dancing Script
+// Bold
+@font-face {
+  font-family: "DancingScript";
+  src: url("fonts/Dancing_Script/static/DancingScript-Bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+}
+// Semi Bold
+@font-face {
+  font-family: "DancingScript";
+  src: url("fonts/Dancing_Script/static/DancingScript-SemiBold.ttf");
+  font-weight: 600;
+  font-style: normal;
+}
+// Medium
+@font-face {
+  font-family: "DancingScript";
+  src: url("fonts/Dancing_Script/static/DancingScript-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+}
+// regular
+@font-face {
+  font-family: "DancingScript";
+  src: url("fonts/Dancing_Script/static/DancingScript-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+//////////////////////////
+// Poppins
+// Black
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Black.ttf");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-BlackItalic.ttf");
+  font-weight: 900;
+  font-style: italic;
+}
+// Extra Bold
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-ExtraBold.ttf");
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-ExtraBoldItalic.ttf");
+  font-weight: 800;
+  font-style: italic;
+}
+// Bold
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-BoldItalic.ttf");
+  font-weight: 700;
+  font-style: italic;
+}
+// Semi Bold
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-SemiBold.ttf");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-SemiBoldItalic.ttf");
+  font-weight: 600;
+  font-style: italic;
+}
+// Medium
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-MediumItalic.ttf");
+  font-weight: 500;
+  font-style: italic;
+}
+// regular
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Italic.ttf");
+  font-weight: 400;
+  font-style: italic;
+}
+// light
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Light.ttf");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-LightItalic.ttf");
+  font-weight: 300;
+  font-style: italic;
+}
+// Extra light
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-ExtraLight.ttf");
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-ExtraLightItalic.ttf");
+  font-weight: 200;
+  font-style: italic;
+}
+// Thin
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-Thin.ttf");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Poppins";
+  src: url("fonts/Poppins/Poppins-ThinItalic.ttf");
+  font-weight: 100;
+  font-style: italic;
+}