@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Form/FormFieldHolder/FormFieldHolder.tsx

@@ -0,0 +1,57 @@
+import WarningCircle from "../../Icons/SecurityAndWarnings/WarningCircle/WarningCircle";
+import FormFieldHolderProps from "./FormFieldHolderProps";
+import styles from "./formHolder.module.scss";
+
+const FormFieldHolder = (props: FormFieldHolderProps) => {
+  const {
+    icon,
+    label,
+    bilingualLabel,
+    description,
+    extraClass = "",
+    children,
+    error,
+    require,
+    optional
+  } = props;
+
+  return (
+    <div
+      className={`field-holder ${extraClass} ${styles.holder} ${error ? styles.holderError : ""
+        }`}
+    >
+      {!!label && (
+        <div className={`${styles.label}`}>
+          {!!icon && (
+            <div className={styles.iconAction}>
+              {icon}
+            </div>
+          )}
+          <label>
+            {label} {bilingualLabel && <span>- {bilingualLabel}</span>} {require && <span>*</span>} {optional && <span>Optional</span>}
+          </label>
+        </div>
+      )}
+
+      <div className={styles.field}>{children}</div>
+
+      {!!description && (
+        <div className={styles.description}>
+          <>
+            {error && (
+              <div className={styles.helperIcon}>
+                <WarningCircle />
+              </div>
+            )}
+          </>
+          <>
+            {typeof description === "string" && <p>{description}</p>}
+            {typeof description !== "string" && <>{description}</>}
+          </>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormFieldHolder;

package/src/Components/Form/FormFieldHolder/FormFieldHolderProps.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface FormFieldHolderProps {
+  label?: string | any;
+  labelClass?: string;
+  bilingualLabel?: string;
+  description?: string | ReactNode;
+  extraClass?: string;
+  error?: boolean;
+  children: ReactNode;
+  icon?: ReactNode;
+  require?:boolean;
+  optional?:boolean;
+}
+
+export default FormFieldHolderProps;

package/src/Components/Form/FormFieldHolder/formHolder.module.scss

@@ -0,0 +1,71 @@
+.holder {
+  margin-bottom: 40px;
+  width: 100%;
+}
+
+.iconAction {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.holderError {
+  label {
+    color: var(--color-visit);
+  }
+}
+
+.label {
+  display: flex; 
+  flex-direction: column;
+  align-items: flex-start;
+
+  label {
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-body-regular);
+    font-weight: var(--font-weight-bold);
+    // margin-bottom: calc(4 * var(--space-unit));
+    margin-bottom: 12px;
+
+
+    span {
+      font-size: var(--font-size-optional-label);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-optional-label);
+      font-weight: var(--font-weight-optional-label);
+    }
+
+  }
+}
+
+
+.description {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+  padding-top: calc(var(--space-unit) * 2);
+  color: var(--color-description);
+
+  p {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    font-weight: var(--font-weight-body-sm);
+  }
+
+  .helperIcon {
+    margin-right: var(--space-unit);
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .holderError & {
+    color: var(--color-error);
+  }
+}

package/src/Components/Form/IconButton/IconButton.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import IconButton from "./IconButton";
+import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    icon: <CalendarBank />,
+    style: "solid",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    icon: <CalendarBank />,
+    style: "hollow",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Borderless: Story = {
+  args: {
+    icon: <CalendarBank type="bold" />,
+    style: "no-border",
+    size: "default",
+    scheme: "primary",
+  },
+};

package/src/Components/Form/IconButton/IconButton.tsx

@@ -0,0 +1,65 @@
+import cx from "classnames";
+import styles from "./iconButton.module.scss";
+import IconButtonProps from "./IconButtonProps";
+
+/**
+ * Primary UI component for user interaction
+ */
+const IconButton = (props: IconButtonProps) => {
+  const {
+    type = "button",
+    size = "default",
+    style,
+    disabled = false,
+    scheme,
+    icon,
+    loading,
+    ...args
+  } = props;
+
+  const classes = [
+    "button",
+    "btn",
+    `btn-${size}`,
+    `btn-${style}`,
+    `btn-${scheme}`,
+    styles.iconButton,
+  ];
+  if (size === "large") {
+    classes.push(styles.large);
+  } else if (size === "small") {
+    classes.push(styles.small);
+  } else if (size === "default") {
+    classes.push(styles.default);
+  }
+  if (style === "solid") {
+    classes.push(styles.solid);
+    classes.push(styles[`solid-${scheme}`]);
+  } else if (style === "hollow") {
+    classes.push(styles.hollow);
+    classes.push(styles[`hollow-${scheme}`]);
+  } else if (style === "no-border") {
+    classes.push(styles.noBorder);
+    classes.push(styles[`no-border-${scheme}`]);
+  }
+
+  if (disabled === true) {
+    classes.push(styles.disabled);
+  }
+
+  if (loading) {
+    classes.push(styles.loadingBtn);
+  }
+
+  return (
+    <button type={type} className={cx(classes)} disabled={disabled} {...args}>
+      {icon}
+      {loading &&
+        <div className={styles.loaderContainer}>
+          <div className={styles.customLoader}></div>
+        </div>}
+    </button>
+  );
+};
+
+export default IconButton;

package/src/Components/Form/IconButton/IconButtonProps.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface IconButtonProps {
+  type?: "button" | "submit" | "reset";
+  size?: "default" | "large" | "small";
+  style?: "solid" | "hollow" | "no-border";
+  scheme?: "primary" | "secondary" | "gray";
+  disabled?: boolean;
+  icon?: ReactNode;
+  loading?:boolean;
+  onClick?: () => void;
+  onHover?: () => void;
+  onFocus?: () => void;
+}
+
+export default IconButtonProps;

package/src/Components/Form/IconButton/iconButton.module.scss

@@ -0,0 +1,157 @@
+.iconButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: linear all 300ms;
+  font-family: var(--font);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.loadingBtn {
+    svg{
+      opacity: 0;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .primaryIcon,
+  .secondaryIcon {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.solid {
+  }
+
+  &.hollow {
+  }
+
+  &.noBorder {
+    border-color: transparent;
+  }
+
+  &.default {
+    padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 3);
+    min-height: 40px;
+  }
+
+  &.large {
+    padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 4);
+    min-height: 48px;
+  }
+
+  &.small {
+    padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+    min-height: 32px;
+  }
+
+  // @each $color in $colors {
+  //   &.solid-#{$color} {
+  //     color: var(--color-lite);
+  //     background-color: var(--color-#{$color}-500);
+  //     border-color: var(--color-#{$color}-500);
+
+  //     .customLoader {
+  //       border-top-color: var(--color-#{$color}-200);
+  //     }
+
+  //     &:hover:enabled {
+  //       background-color: var(--color-#{$color}-300);
+  //       border-color: var(--color-#{$color}-300);
+  //     }
+
+  //     &:active:enabled {
+  //       background-color: var(--color-#{$color}-600);
+  //       border-color: var(--color-#{$color}-600);
+  //     }
+  //   }
+  // }
+
+  // @each $color in $colors {
+  //   &.hollow-#{$color} {
+  //     background: transparent;
+  //     color: var(--color-#{$color}-800);
+  //     border-color: var(--color-#{$color}-600);
+
+  //     .customLoader {
+  //       border-top-color: var(--color-#{$color}-800);
+  //     }
+
+  //     &:hover:enabled {
+  //       background: var(--color-#{$color}-100);
+  //     }
+
+  //     &:active:enabled {
+  //       background: var(--color-#{$color}-100);
+  //       border-width: 2px;
+  //     }
+  //   }
+  // }
+
+  // @each $color in $colors {
+  //   &.no-border-#{$color} {
+  //     background: transparent;
+  //     color: var(--color-#{$color}-800);
+  //     border-color: transparent;
+
+  //     .customLoader {
+  //       border-top-color: var(--color-#{$color}-800);
+  //     }
+
+  //     &:hover:enabled {
+  //       background-color: var(--color-#{$color}-200);
+  //       color: var(--color-#{$color}-800);
+  //     }
+
+  //     &:active:enabled {
+  //       background-color: var(--color-#{$color}-100);
+  //       color: var(--color-#{$color}-800);
+  //     }
+  //   }
+  // }
+}
+
+
+.labelContainer {
+  position: relative; /* Ensure the loader can be positioned relative to this container */
+}
+
+.loaderContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.customLoader {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: relative;
+  border: 2px solid transparent;
+  animation: rotate-ring 1s infinite linear;
+}
+
+@keyframes rotate-ring {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+

package/src/Components/Form/InputProps.tsx

@@ -0,0 +1,30 @@
+import {FocusEvent, ChangeEvent, MouseEvent, KeyboardEvent} from "react";
+
+interface InputProps {
+  name?: string;
+  id?: string;
+  value?: string | number | bigint | any;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  min?: string,
+  max?: string,
+  minLength?: number;
+  maxLength?: number;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onKeyDown?:(e: KeyboardEvent<HTMLInputElement>) => void;
+  loading?:boolean;
+  
+}
+
+export default InputProps;

package/src/Components/Form/LandingPageForm/LandingPageForm.stories.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import LandingPageForm from "./LandingPageForm";
+import LandingPageFormLeft from "./LandingPageFormLeft";
+import LandingPageFormRight from "./LandingPageFormRight";
+import { ElementHolder } from "../../Shared";
+import FormFieldHolder from "../FormFieldHolder/FormFieldHolder";
+import TextField from "../TextField/TextField";
+import EmailField from "../EmailField/EmailField";
+import Textarea from "../Textarea/Textarea";
+import Checkbox from "../Checkbox/Checkbox";
+import Button from "../Button/Button";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+import Path from "../../Icons/MapAndTravel/Path/Path";
+import Mountains from "../../Icons/WeatherAndNature/Mountains/Mountains"
+import Clock from "../../Icons/Time/Clock/Clock"
+import Media from "../../DataDisplay/Media/Media"
+
+const meta: Meta = {
+    title: "Form / LandingPageForm",
+    component: LandingPageForm,
+    parameters: {
+        layout: 'fullscreen'
+    },
+    tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+
+const LandingPageFormTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="md" paddingBottom="md" pillar="visit" level="light">
+                <LandingPageForm landingPageFormLeft={
+                    <LandingPageFormLeft
+                        extraClass={"customHeadingStyle"}
+                        callToActions={[
+                            {
+                                title: "Lorem ipsum dolor sit",
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing.",
+                                icon: <Path type="fill" />
+                            },
+                            {
+                                title: "Lorem ipsum dolor sit",
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing.",
+                                icon: <Mountains type="fill" />
+                            },
+                            {
+                                title: "Lorem ipsum dolor sit",
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing.",
+                                icon: <Clock type="fill" />
+                            },
+                        ]}
+                    >
+                        <h4>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
+                        </h4>
+                        <br />
+                        <br />
+
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+
+                        <Media />
+                        <br />
+                        <br />
+
+                        <h5>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+                        </h5>
+                        <br />
+                        <br />
+
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+                        </p>
+                    </LandingPageFormLeft>
+                } landingPageFormRight={
+                    <LandingPageFormRight
+                        formImage={"/img/landing-page-form-image.png"}
+                        formTitle={'Go in the draw to win'}
+                        formText={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}
+                        pillar="visit"
+                        level="primary"
+                        children={
+                            <>
+                                <FormFieldHolder label={'Name*'} >
+                                    <TextField required />
+                                </FormFieldHolder>
+                                <FormFieldHolder label={'Email*'}><EmailField required /></FormFieldHolder>
+                                <FormFieldHolder label={'Phone number'}><TextField /></FormFieldHolder>
+                                <FormFieldHolder label={'What would you love to do most in Selwyn?'}><Textarea placeholder="Let us know what you would love to do in the Selwyn region..."/></FormFieldHolder>
+                                <Checkbox label={"I’d love to receive updates about events and happenings in Selwyn."} />
+                            </>
+                        }
+                        callToAction={<Button label="ENTER NOW" secondaryIcon={<ArrowRight />} pillar="visit" level="primary" />}
+                    />
+                }>
+                </LandingPageForm>
+            </ElementHolder>
+        );
+    }
+}
+
+export const LandingPageFormComponent = {
+    ...LandingPageFormTemplate
+}

package/src/Components/Form/LandingPageForm/LandingPageForm.tsx

@@ -0,0 +1,24 @@
+import { Container } from "../../Shared";
+import LandingPageFormProps from "./LandingPageFormProps"
+import styles from "./landingPageForm.module.scss";
+
+const LandingPageForm = (props: LandingPageFormProps) => {
+    const {
+        landingPageFormLeft,
+        landingPageFormRight,
+        extraClass,
+    } = props
+
+    return (
+        <div className={`${styles.landingPageFormBlock} ${extraClass}`}>
+            <Container>
+                <div className={styles.landingPageFormBlockWrapper}>
+                    {landingPageFormLeft}
+                    {landingPageFormRight}
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default LandingPageForm

package/src/Components/Form/LandingPageForm/LandingPageFormLeft.tsx

@@ -0,0 +1,51 @@
+import LandingPageFormLeftProps from "./LandingPageFormLeftProps";
+import styles from "./landingPageForm.module.scss";
+
+const LandingPageFormLeft = (props: LandingPageFormLeftProps) => {
+    const {
+        children,
+        callToActions,
+        extraClass
+    } = props;
+
+    return (
+        <div className={`${styles.landingPageFormLeftWrapper} ${extraClass}`}>
+            <div className={`${styles.landingPageFormLeftTop} typography`}>
+                {children}
+            </div>
+
+            <div className={styles.landingPageFormLeftBottom}>
+
+                {callToActions && callToActions.length > 0 && (
+                    <div className={styles.contentItemWrapper}>
+                        <ul>
+                            {
+                                callToActions?.map((callToAction, index) => (
+                                    <li key={index}>
+                                        <div className={styles.contentItemWrapperIcon}>
+                                            {callToAction.icon}
+                                        </div>
+
+                                        <div className={styles.contentListWrapper}>
+                                            <h1>
+                                                {callToAction.title}
+                                            </h1>
+
+                                            <h2>
+                                                {callToAction.text}
+                                            </h2>
+                                        </div>
+                                    </li>
+                                ))
+                            }
+                        </ul>
+                    </div>
+                )}
+            </div>
+
+
+        </div>
+    )
+}
+
+export default LandingPageFormLeft

package/src/Components/Form/LandingPageForm/LandingPageFormLeftProps.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react"
+export interface LandingFormContentItem {
+    title?: string
+    text?: string
+    icon?: ReactNode
+}
+interface LandingPageFormLeftProps {
+    children?: ReactNode
+    callToActions?: LandingFormContentItem[];
+    extraClass?: string;
+}
+
+export default LandingPageFormLeftProps

package/src/Components/Form/LandingPageForm/LandingPageFormProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface LandingPageFormProps {
+    landingPageFormLeft?: ReactNode
+    landingPageFormRight?: ReactNode
+    extraClass?: ReactNode
+}
+
+export default LandingPageFormProps;