@4alldigital/foundation-ui--core 3.0.0

package/src/components/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import FileUpload from '.';
+
+const meta: Meta<typeof FileUpload> = {
+  title: 'ATOMS/FileUpload',
+  component: FileUpload,
+};
+
+type Story = StoryObj<typeof FileUpload>;
+
+export const Default: Story = {
+  args: {
+    id: 'file',
+    name: 'file',
+  },
+};
+
+export default meta;

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './FileUpload.types';
+
+const FileUpload = React.forwardRef(function FileUploadInput(
+  { id, name, required, disabled, className, onChangeCallback, onChange, ...rest }: Props,
+  ref: any,
+) {
+  const handleFileChange = (event: React.ChangeEvent<any>) => {
+    if (onChangeCallback && typeof onChangeCallback === 'function') {
+      onChangeCallback(event);
+    }
+    if (onChange && typeof onChange === 'function') {
+      onChange({ target: { value: event.target.value, name: name } });
+    }
+  };
+
+  return (
+    <div data-testid="FileUpload" className={className}>
+      <input
+        ref={ref}
+        className={cx(
+          'form-item text-input file-upload p-0 relative m-0 min-w-0 flex-auto appearance-none block box-border bg-clip-padding file:p-3 file:cursor-pointer file:mr-3 file:overflow-hidden cursor-pointer file:border-0 file:rounded-none file:border-solid file:border-inherit file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] ',
+        )}
+        aria-describedby={name}
+        type="file"
+        disabled={disabled}
+        required={required}
+        name={name}
+        id={id}
+        onChange={handleFileChange}
+        {...rest}
+      />
+    </div>
+  );
+});
+
+FileUpload.displayName = 'FileUpload';
+
+export default FileUpload;
+export type { Props };

package/src/components/FileUpload/FileUpload.types.ts

@@ -0,0 +1,9 @@
+export interface Props {
+  id: string;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+  onChange?: (event: any) => void;
+  onChangeCallback?: (event: any) => void;
+}

package/src/components/FileUpload/index.ts

@@ -0,0 +1 @@
+export { default } from './FileUpload';

package/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Footer from '.';
+
+const meta: Meta<typeof Footer> = {
+  title: 'LAYOUTS/Footer',
+  component: Footer,
+};
+
+type Story = StoryObj<typeof Footer>;
+
+export const Default: Story = {
+  args: {
+    testID: 'footer-story',
+  },
+};
+
+export default meta;

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,78 @@
+import React, { useContext } from 'react';
+import cx from 'classnames';
+import { Props } from './Footer.types';
+import Logo from '../Logo';
+import Copy from '../Copy';
+import VisitUs from '../VisitUs';
+import Menu from '../Menu';
+import { AppContext } from '../../context/App';
+import STRINGS from '../../translations';
+import { COPY_ALIGN, COPY_TAG } from '../Copy/Copy.types';
+import Container from '../Container';
+
+const Footer = ({ testID, className }: Props) => {
+  const context = useContext(AppContext);
+
+  return (
+    <footer
+      className={cx(
+        'w-full z-10 pt-16 pb-8 bg-footer-bg dark:bg-darkFooterBackground text-footer-text dark:text-darkFooterText',
+        className,
+      )}>
+      <Container padded>
+        <div data-testid={testID || '"Footer"'} className="footer flex flex-col md:flex-row py-8 gap-8">
+          <div className="relative w-full md:w-1/3 flex flex-col gap-4 items-center md:items-start">
+            {context?.brand?.logo && (
+              <div className="relative w-24">
+                <Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
+              </div>
+            )}
+            {context.footer?.about && (
+              <div>
+                <Copy>{context.footer.about}</Copy>
+              </div>
+            )}
+            <div>
+              <VisitUs
+                facebook={context.footer?.visitUs?.facebook}
+                twitter={context.footer?.visitUs?.twitter}
+                instagram={context.footer?.visitUs?.instagram}
+                linkedin={context.footer?.visitUs?.linkedin}
+                youtube={context.footer?.visitUs?.youtube}
+              />
+            </div>
+          </div>
+          <div className="flex gap-4 flex-1 flex-col">
+            {context.footer?.menus && (
+              <div className="flex gap-4 flex-1 flex-col md:flex-row items-center md:items-start">
+                {context.footer.menus.map((menu, index) => (
+                  <div key={`${menu.title}--${index}`} className="flex flex-1">
+                    <Menu title={menu.title} links={menu.links} inline={false} />
+                  </div>
+                ))}
+              </div>
+            )}
+            {context?.footer?.custom && (
+              <div className="flex gap-4 flex-1 flex-col md:flex-row items-center md:items-start">
+                {context.footer.custom}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center justify-center flex-col">
+          <Copy align={COPY_ALIGN.CENTER} as={COPY_TAG.SMALL}>
+            © {new Date().getFullYear()} {STRINGS.UI.COPYRIGHT} {context.brand?.name}
+          </Copy>
+          <Copy align={COPY_ALIGN.CENTER} as={COPY_TAG.SMALL}>
+            {STRINGS.UI.ALL_RIGHTS_RESERVED}
+          </Copy>
+        </div>
+      </Container>
+    </footer>
+  );
+};
+
+Footer.displayName = 'Footer';
+
+export default Footer;
+export type { Props };

package/src/components/Footer/Footer.types.ts

@@ -0,0 +1,4 @@
+export interface Props {
+  testID?: string;
+  className?: string;
+}

package/src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from './Footer';

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Form from '.';
+import FormField from '../FormField';
+import { FIELD_TYPES } from '../FormField/FormField.types';
+import Container from '../Container';
+
+const meta: Meta<typeof Form> = {
+  title: 'MOLECULES/Form',
+  component: Form,
+};
+
+type Story = StoryObj<typeof Form>;
+
+export const Default: Story = {
+  args: {
+    children: <>Form items go here</>,
+    submit: 'Submit',
+  },
+};
+
+export const Example: Story = {
+  render: () => {
+    const onSubmit = (data: any) => {
+      console.log('custom onSubmit', data);
+    };
+
+    return (
+      <Container className="bg-grey-900 p-2">
+        <Form onSubmit={onSubmit} submit="Register">
+          <FormField
+            name="select"
+            label="Select an option"
+            type={FIELD_TYPES.SELECT}
+            validations={{ required: 'This field is required' }}
+            options={[
+              { value: 'value-1', label: 'Option one' },
+              { value: 'value-2', label: 'Option two' },
+              { value: 'value-3', label: 'Option three' },
+              { value: 'value-4', label: 'Option four' },
+              { value: 'value-5', label: 'Option five' },
+              { value: 'value-6', label: 'Option six' },
+              { value: 'value-7', label: 'Option seven' },
+            ]}
+          />
+        </Form>
+      </Container>
+    );
+  },
+};
+
+export const ExampleNoSubmit: Story = {
+  render: () => {
+    const handleOnChange = (data: any) => {
+      console.log('custom onChange', data);
+    };
+
+    return (
+      <>
+        <Form
+          onChange={handleOnChange}
+          initialValues={{
+            'group-options': 'editorial',
+          }}>
+          <FormField
+            name="group-options"
+            type={FIELD_TYPES.RADIO}
+            label="Favourite Radio"
+            required
+            options={[
+              { value: 'editorial', label: 'Editorial' },
+              { value: 'guest', label: 'On air guest use' },
+              { value: 'educational', label: 'Educational Use' },
+            ]}
+          />
+        </Form>
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Form/Form.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from 'react';
+import cx from 'classnames';
+import { useForm, FormProvider } from 'react-hook-form';
+import { Props } from './Form.types';
+import Button from '../Button';
+import { BTN_TYPES, BTN_VARIANTS } from '../Button/Button.types';
+
+const Form = ({
+  children,
+  className,
+  submit,
+  onSubmit = () => {},
+  onChange,
+  hideSubmit,
+  ariaSubmitLabel,
+  submitID,
+  submitVariant = BTN_VARIANTS.PRIMARY,
+  initialValues = {},
+  isBoxed = false,
+  submitType = BTN_TYPES.SUBMIT,
+  disabledSubmitWithReturn = true,
+  isDisabled = false,
+}: Props) => {
+  const methods = useForm({
+    defaultValues: initialValues,
+    mode: 'onBlur',
+    reValidateMode: 'onChange',
+  });
+
+  // Watch form values to ensure reset only happens when values truly differ
+  // Use a ref to store the previous initialValues to compare in useEffect
+  const previousInitialValues = useRef(initialValues);
+
+  useEffect(() => {
+    // Only reset the form when initialValues change
+    if (JSON.stringify(previousInitialValues.current) !== JSON.stringify(initialValues)) {
+      methods.reset(initialValues);
+      previousInitialValues.current = initialValues; // Update the ref with the new initialValues
+    }
+  }, [initialValues]);
+
+  useEffect(() => {
+    if (onChange && typeof onChange === 'function') {
+      const subscription = methods.watch((value, event) => {
+        onChange(value, event);
+      });
+      return () => subscription.unsubscribe();
+    }
+  }, []);
+
+  const submitClasses = cx({ 'sr-only': hideSubmit });
+
+  const {
+    formState: { isSubmitting, isValid },
+  } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <div data-testid="Form" className={cx('w-full max-w-s @containers @form')}>
+        <form
+          onSubmit={methods.handleSubmit(onSubmit)}
+          onKeyDown={(event) => {
+            if (disabledSubmitWithReturn && event.key === 'Enter') {
+              event.preventDefault();
+            }
+          }}
+          className={cx(
+            'w-2xs relative',
+            { 'form px-8 pt-6 pb-8 ': isBoxed },
+            { 'opacity-50': isSubmitting },
+            className,
+          )}>
+          {children}
+          {submit && (
+            <div className="flex items-center justify-end">
+              <Button
+                id={submitID || submit}
+                className={submitClasses}
+                ariaLabel={ariaSubmitLabel || submit || 'Submit'}
+                type={submitType}
+                outline
+                isLoading={isSubmitting}
+                disabled={isSubmitting || !isValid || isDisabled}
+                variant={submitVariant}>
+                {submit}
+              </Button>
+            </div>
+          )}
+        </form>
+      </div>
+    </FormProvider>
+  );
+};
+
+Form.displayName = 'Form';
+
+export default Form;
+export type { Props };

package/src/components/Form/Form.types.ts

@@ -0,0 +1,34 @@
+import { BTN_TYPES, BTN_VARIANTS } from '../Button/Button.types';
+
+export interface Props {
+  /** The form inputs and content. */
+  children: React.ReactNode;
+  /** Additional classes. */
+  className?: string;
+  /** Disable form inputs validation. */
+  noValidate?: boolean;
+  /** The submit handler that will fire once the form is submitted. */
+  onSubmit?: (values: any, event?: any) => void;
+  /** The on change handler that will fire once the form is updated. */
+  onChange?: (values: any, event?: any) => void;
+  /** The label for the submit button. */
+  submit?: string;
+  /** Hide submit button. */
+  hideSubmit?: boolean;
+  /** The aria-label attribute value for the submit button. */
+  ariaSubmitLabel?: string;
+  /** Unique form submit button id. */
+  submitID?: string;
+  /** Initial form values. */
+  initialValues?: { [k: string]: any };
+  /** The submit button variant. */
+  submitVariant?: BTN_VARIANTS;
+  /** The form is boxed. */
+  isBoxed?: boolean;
+  /** The submit button type. */
+  submitType?: BTN_TYPES.SUBMIT | BTN_TYPES.BUTTON;
+  /** Disable submit button with return key. */
+  disabledSubmitWithReturn?: boolean;
+  /** Disable the form submit button. */
+  isDisabled?: boolean;
+}

package/src/components/Form/index.ts

@@ -0,0 +1 @@
+export { default } from './Form';

package/src/components/FormField/FormField.stories.tsx

@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import FormField from '.';
+import Container from '../Container';
+import Form from '../Form';
+import { FIELD_TYPES } from './FormField.types';
+import { BTN_VARIANTS } from '../Button/Button.types';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+
+const meta: Meta<typeof FormField> = {
+  title: 'MOLECULES/FormField',
+  component: FormField,
+};
+
+type Story = StoryObj<typeof FormField>;
+
+export const Default: Story = {
+  render: args => {
+    return (
+      <>
+        <Form onSubmit={values => console.log('values', values)} submit="Register">
+          <FormField {...args} />
+        </Form>
+      </>
+    );
+  },
+};
+
+Default.args = {
+  name: 'Name',
+  type: FIELD_TYPES.TEXT,
+  label: 'First Name',
+  required: true,
+};
+
+export const Example: Story = {
+  render: () => {
+    const initialValues = {
+      firstName: 'joe',
+      lastName: '',
+      email: 'JOE@JOE.COM',
+      password: 'password',
+      question: '',
+      count: 0,
+      dateOfBirth: '',
+      entryDate: '',
+      entry: '',
+      sex: true,
+      terms: true,
+      age: true,
+      options: '',
+      'favourite-radio': 'value-4',
+      switch: false,
+      file: '',
+    };
+
+    const options = [
+      { value: 'value-1', label: 'Option one' },
+      { value: 'value-2', label: 'Option two' },
+      { value: 'value-3', label: 'Option three' },
+      { value: 'value-4', label: 'Option four' },
+      { value: 'value-5', label: 'Option five' },
+      { value: 'value-6', label: 'Option six' },
+      { value: 'value-7', label: 'Option seven' },
+    ];
+
+    const onSubmit: SubmitHandler<FieldValues> = (data: any) => {
+      console.log('FormField Example onSubmit', data);
+    };
+
+    return (
+      <>
+        <Container>
+          <Form
+            onSubmit={onSubmit}
+            submit="Submit"
+            submitVariant={BTN_VARIANTS.SECONDARY}
+            initialValues={initialValues}>
+            <FormField
+              name="firstName"
+              type={FIELD_TYPES.TEXT}
+              label="First name"
+              required
+              validations={{
+                required: 'First name is required',
+              }}
+            />
+            <FormField name="lastName" type={FIELD_TYPES.TEXT} label="Last name" disabled />
+            <FormField
+              name="email"
+              type={FIELD_TYPES.EMAIL}
+              label="Email"
+              required
+              icon="mdi:email-outline"
+              description="Must be the email that is registered with CNBC Media."
+            />
+            <FormField
+              name="password"
+              type={FIELD_TYPES.PASSWORD}
+              label="Password"
+              required
+              icon="mdi:eye-outline"
+              validations={{
+                pattern: {
+                  value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$%!])[A-Za-z\d@$!%*?&]{8,30}$/,
+                  message: 'Password does not meet requirements',
+                },
+                required: 'Password is required',
+              }}
+            />
+            <FormField name="question" type={FIELD_TYPES.TEXTAREA} label="Question" />
+            <FormField name="count" type={FIELD_TYPES.NUMBER} label="Count" />
+            <FormField name="dateOfBirth" type={FIELD_TYPES.DATE} label="Date of  Birth" />
+            <FormField name="entryDate" type={FIELD_TYPES.DATE} label="Entry date" icon="mdi:calendar" />
+            <FormField name="entry" type={FIELD_TYPES.DATETIME} label="Entry date/time" />
+            <div>
+              <FormField name="sex" type={FIELD_TYPES.CHECKBOX} label="Male/Female" required />
+              <FormField name="terms" type={FIELD_TYPES.CHECKBOX} label="Agree to terms" required />
+              <FormField name="age" type={FIELD_TYPES.CHECKBOX} label="I am over 18" required />
+            </div>
+            <FormField name="options" type={FIELD_TYPES.SELECT} label="Options" options={options} required />
+            <FormField name="favourite-radio" type={FIELD_TYPES.RADIO} label="Favourite Radio" options={options} />
+            <FormField name="switch" type={FIELD_TYPES.SWITCH} label="Switch" />
+            <FormField name="file" type={FIELD_TYPES.FILE} label="File" />
+          </Form>
+        </Container>
+      </>
+    );
+  },
+};
+
+export const FieldValidation: Story = {
+  render: () => {
+    const onSubmit: SubmitHandler<FieldValues> = (data: any) => {
+      console.log('FormField Example onSubmit', data);
+    };
+
+    return (
+      <>
+        <Container>
+          <Form onSubmit={onSubmit} submit="Submit" submitVariant={BTN_VARIANTS.SECONDARY}>
+            <FormField
+              name="password"
+              type={FIELD_TYPES.PASSWORD}
+              label="Password"
+              required
+              icon="mdi:eye-outline"
+              description="Password must be between 8 and 30 characters and contain at least 1 uppercase, 1 lowercase, 1 number and a symbol (eg. @$%)."
+              validations={{
+                pattern: {
+                  value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$%!])[A-Za-z\d@$!%*?&]{8,30}$/,
+                  message: 'Password does not meet requirements',
+                },
+                required: 'Password is required',
+              }}
+            />
+            <FormField
+              name="phone"
+              type={FIELD_TYPES.TEL}
+              label="Phone"
+              required
+              icon="mdi:phone-outline"
+              description="Please enter a valid phone number."
+              validations={{
+                pattern: {
+                  value: /^\+?(\d{1,3})?[-.\s]?\(?\d{1,4}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/,
+                  message: 'Please enter a valid phone number',
+                },
+                required: 'Phone number is required',
+              }}
+            />
+          </Form>
+        </Container>
+      </>
+    );
+  },
+};
+
+export const AvatarUpload: Story = {
+  render: () => {
+    const onSubmit: SubmitHandler<FieldValues> = (data: any, event: any) => {
+      console.log('FormField Example onSubmit', data);
+      console.log('event', event);
+      const file = event.target?.files?.[0];
+      console.log('file', file);
+    };
+
+    const onFileChange = (event: any) => {
+      console.log('onFileChange event', event);
+      const file = event.target?.files?.[0];
+      console.log('file', file);
+    };
+
+    return (
+      <>
+        <Container>
+          <Form onSubmit={onSubmit} submit="Submit" submitVariant={BTN_VARIANTS.SECONDARY}>
+            <FormField name="avatar" type={FIELD_TYPES.FILE} label="Avatar" fileUploadCallback={onFileChange} />
+          </Form>
+        </Container>
+      </>
+    );
+  },
+};
+
+export default meta;