@hellobetterdigitalnz/selwynui 0.0.1-38 → 0.0.1-39

package/src/Components/Form/Textarea/Textarea.tsx

@@ -0,0 +1,74 @@
+import React, {useState} from "react";
+import cx from 'classnames';
+import TextareaProps from "./TextareaProps";
+import styles from './textarea.module.scss';
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const Textarea = (props: TextareaProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    rows,
+    displayChars,
+    maxLength,
+    onChange,
+    loading,
+    ...args
+  } = props;
+
+
+  const [text, setText] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target?.value);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const classes = [styles.textarea];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <div className={styles.field}>
+    {loading && <LoadingInput />}
+    <textarea
+      className={cx(classes)}
+      id={id}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      rows={rows}
+      onChange={handleChange}
+      disabled={disabled}
+      readOnly={readonly}
+      required={required}
+      autoComplete={autoComplete ? "on" : "off"}
+      aria-label={ariaLabel ? ariaLabel : name}
+      aria-required={required ? "true" : "false"}
+      aria-invalid={error ? "true" : "false"}
+      aria-disabled={disabled ? "true" : "false"}
+      aria-readonly={readonly ? "true" : "false"}
+      aria-autocomplete={autoComplete ? "list" : "none"}
+      {...args}
+    />
+    {!!displayChars && <p className={styles.length}>
+      {text.length} / {maxLength}
+    </p>}
+  </div>
+};
+
+export default Textarea;

package/src/Components/Form/Textarea/TextareaProps.tsx

@@ -0,0 +1,28 @@
+import {FocusEvent, MouseEvent, ChangeEvent} from 'react'
+
+interface TextareaProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  rows?: number,
+  displayChars?: boolean,
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  loading?:boolean;
+}
+
+export default TextareaProps;

package/src/Components/Form/Textarea/textarea.module.scss

@@ -0,0 +1,48 @@
+.textarea {
+  display: inline-block;
+  border: 1px solid #CACDC9;
+  border-radius: 6px;
+  resize: none;
+  padding: calc(var(--space-unit) * 3);
+  width: 100%;
+  height: 96px;
+  font-family: var(--font);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-h3);
+  font-weight: var(--font-weight-h3);
+
+  &::placeholder {
+    font-family: var(--font);
+    color: #727972;
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+  }
+
+  &:focus {
+      outline: none;
+      border: 2px solid var(--color-taste);
+      color: #253123;
+    }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &.error {
+    border: 1px solid var(--color-error);
+    background: var(--color-error-lite);
+
+    &:focus {
+      border: 2px solid var(--color-error);
+      background: #ffffff;
+    }
+  }
+}
+
+.length {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+}

package/src/Components/Form/index.ts

@@ -1,2 +1,7 @@
 export { default as Button } from './Button/Button';
-export type { default as ButtonProps } from './Button/ButtonProps';
+export type { default as ButtonProps } from './Button/ButtonProps';
+
+export { default as TextField } from './TextField/TextField';
+export type { default as TextFieldProps } from './TextField/TextFieldProps';
+
+export { default as  LoadingInput } from './LoadingInput/LoadingInput';

package/src/Components/Form/inputs.module.scss

@@ -0,0 +1,172 @@
+.field {
+  position: relative;
+}
+
+.input {
+
+  &[type="text"],
+  &[type="password"],
+  &[type="email"],
+  &[type="number"],
+  &[type="date"],
+  &[type="tel"],
+  &[type="time"] {
+    width: 100%;
+    max-width: 100%;
+    height: 48px;
+    padding: 18px 28px;
+    border: 1px solid #CACDC9;
+    border-radius: 4px;
+    font-family: var(--font);
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+
+    &::placeholder {
+      color: #727972;
+      font-size: var(--font-size-label);
+      line-height: var(--line-height-h3);
+      font-weight: var(--font-weight-h3);
+    }
+
+    &:focus {
+      outline: none;
+      border: 2px solid var(--color-taste);
+      color: #253123;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  &.error {
+
+    &[type="text"],
+    &[type="password"],
+    &[type="email"],
+    &[type="number"],
+    &[type="date"],
+    &[type="tel"],
+    &[type="time"] {
+      border: 1px solid var(--color-error);
+      background: var(--color-error-lite);
+
+      &:focus {
+        border: 2px solid var(--color-error);
+        background: #ffffff;
+      }
+    }
+  }
+}
+
+.passwordCon {
+  width: 100%;
+  position: relative;
+
+  [type="password"],
+  [type="text"] {
+    padding-right: calc(var(--space-unit) * 9);
+  }
+
+  .eyeicon {
+    display: flex;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.date,
+.time,
+.currency,
+.textField {
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+
+  [type="date"],
+  [type="time"] {
+    -webkit-appearance: none;
+  }
+
+  [type="date"],
+  [type="time"],
+  [type="number"] {
+    text-transform: uppercase;
+  }
+
+  [type="date"],
+  [type="text"],
+  [type="time"],
+  [type="number"] {
+    // padding-left: calc(var(--space-unit) * 11);
+    font-family: var(--font);
+
+    &::-webkit-calendar-picker-indicator {
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+
+  .calendarIcon,
+  .clockIcon,
+  .currencyIcon,
+  .textFieldIcon {
+    display: flex;
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+
+    svg {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.unitField {
+  position: relative;
+
+  .input {
+
+    &[type="text"],
+    &[type="number"] {
+      text-align: left;
+    }
+  }
+
+  .unitText {
+    display: flex;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--color-gray-500);
+    font-size: var(--font-size-input);
+    line-height: var(--line-height-input);
+    font-weight: var(--font-weight-input);
+
+    &.active {
+      color: var(--color-gray-900);
+    }
+
+  }
+
+}

package/src/Components/Layout/Footer/Footer.tsx

@@ -21,7 +21,6 @@ const Footer = (props: FooterProps) => {
                             <img src={logo} alt="" />
                         </div>
                         {footerMiddle}
-                        
                     </div>
                 </Container>
             </div>}

package/src/Components/Layout/Footer/FooterProps.tsx

@@ -5,7 +5,7 @@ interface FooterProps {
     footerMiddle?: ReactNode
     footerBottom?: ReactNode
     extraClass?: string
-    logo?: string
+    logo?: string | undefined
 }
 
 export default FooterProps;

package/src/Components/Shared/Container/container.module.scss

@@ -3,7 +3,7 @@
     margin: 0px auto;
 
   &.default{
-    max-width: 1432px;
+    max-width: 1520px;
   }
 
    @media screen and (min-width: 1748px) {