@hellobetterdigitalnz/selwynui 0.0.1-1

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

@@ -0,0 +1,178 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Footer from "./Footer";
+import FooterTop from "./FooterTop";
+import FooterMiddle from "./FooterMiddle";
+import FooterItem from "./FooterItem";
+import FooterBottom from "./FooterBottom";
+import FooterBottomLeft from "./FooterBottomLeft";
+import FooterBottomRight from "./FooterBottomRight";
+
+const meta: Meta = {
+    title: "Layout / Footer",
+    component: Footer,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const FooterTemplate: Story = {
+    render: () => {
+        const footerTop = (
+            <FooterTop title={'Selwyn.'} subtitle={'A place for more.'}>
+                <p>Stay in the know, sign up to our newsletter.</p>
+                <div>
+                   
+                    {/* need to add the NEWSLETTER SIGNUP component */}
+                </div>
+            </FooterTop>
+        )
+
+        const footerMiddle = (
+            <FooterMiddle>
+                <FooterItem title={'Visit'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Live'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Business'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Taste'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Participate'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+
+                </FooterItem>
+            </FooterMiddle>
+        )
+
+        const footerBottom = (
+            <FooterBottom>
+                <FooterBottomLeft logoImgUrl="./img/footer-logo.svg" copyRightYear={2025} copyRightText={'Selwyn District Council'} footerLinks={[
+                    { title: "Privacy Policy", link: "#" },
+                    { title: "Terms of Use", link: "#" }
+                ]}>
+                </FooterBottomLeft>
+
+                <FooterBottomRight facebookLink="#" instagramLink="#" linkedinLink="#" />
+            </FooterBottom>
+        );
+
+        return (
+            <Footer
+                logo='img\waikirikiri-full-logo.svg'
+                footerTop={footerTop}
+                footerMiddle={footerMiddle}
+                footerBottom={footerBottom}
+            >
+            </Footer>
+        )
+    }
+}
+
+export const FooterComponent = {
+    ...FooterTemplate
+};

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

@@ -0,0 +1,33 @@
+import Container from "../../Shared/Container/Container";
+import FooterProps from "./FooterProps";
+import styles from "./footer.module.scss";
+
+const Footer = (props: FooterProps) => {
+    const {
+        footerTop,
+        footerMiddle,
+        footerBottom,
+        extraClass,
+        logo
+    } = props
+
+    return (
+        <footer className={`${styles.footer} ${extraClass}`}>
+            {footerTop}
+            {footerMiddle && <div className={styles.footerMiddle}>
+                <Container>
+                    <div className={styles.footerMiddleWrapper}>
+                        <div className={styles.footerLogoContainer}>
+                            <img src={logo} alt="" />
+                        </div>
+                        {footerMiddle}
+                        
+                    </div>
+                </Container>
+            </div>}
+            {footerBottom}
+        </footer>
+    )
+}
+
+export default Footer;

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

@@ -0,0 +1,21 @@
+import Container from "../../Shared/Container/Container";
+import FooterBottomProps from "./FooterBottomProps";
+import styles from "./footer.module.scss";
+
+const FooterBottom = (props: FooterBottomProps) => {
+    const {
+        children 
+    } = props
+
+    return (
+        <div className={styles.footerBottom}>
+            <Container>
+                <div className={styles.footerBottomWrapper}>
+                    {children}
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default FooterBottom;

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

@@ -0,0 +1,31 @@
+import FooterBottomLeftProps from "./FooterBottomLeftProps";
+import styles from './footer.module.scss';
+
+const FooterBottomLeft = (props: FooterBottomLeftProps) => {
+    const {logoImgUrl, copyRightYear, copyRightText, footerLinks} = props;
+
+    return (
+        <div className={styles.footerBottomLeft}>
+            <div className={styles. footerBottomLeftWrapper}>
+                <div className={styles.footerBottomLeftLogo}>
+                    <img src={logoImgUrl} alt="" />
+                    <p>© <span>{copyRightYear}</span> {copyRightText}</p>
+                </div>
+
+                <div className={styles.footerBottomLeftLinks}>
+                    <ul>
+                        {
+                            footerLinks?.map((footerLink, index) => (
+                                <li key={index}>
+                                    <a href={footerLink.link}>{footerLink.title}</a>
+                                </li>
+                            ))
+                        }
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FooterBottomLeft;

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

@@ -0,0 +1,13 @@
+export interface FooterLinkItem {
+    title?: string;
+    link?: string;
+}
+
+interface FooterBottomLeftProps {
+    logoImgUrl?: string;
+    copyRightYear?: number | string;
+    copyRightText?: string;
+    footerLinks?: FooterLinkItem[];
+}
+
+export default FooterBottomLeftProps;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+interface FooterBottomProps {
+    children?: ReactNode;
+}
+
+export default FooterBottomProps;

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

@@ -0,0 +1,47 @@
+import FooterBottomRightProps from "./FooterBottomRightProps";
+import styles from "./footer.module.scss";
+import FacebookLogo from "../../Icons/Brands/FacebookLogo/FacebookLogo";
+import InstagramLogo from "../../Icons/Brands/InstagramLogo/InstagramLogo";
+import LinkedinLogo from "../../Icons/Brands/LinkedinLogo/LinkedinLogo";
+
+
+const FooterBottomRight = (props: FooterBottomRightProps) => {
+    const {
+        facebookLink,
+        instagramLink,
+        linkedinLink,
+    } = props
+
+    return (
+        <div className={styles.footerBottomRight}>
+            <div className={styles.footerBottomRightWrapper}>
+                <div className={styles.footerLogoWrapper}>
+                    {facebookLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={facebookLink}>
+                            <FacebookLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+
+                <div className={styles.footerLogoWrapper}>
+                    {instagramLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={instagramLink}>
+                            <InstagramLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+
+
+                <div className={styles.footerLogoWrapper}>
+                    {linkedinLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={linkedinLink}>
+                            <LinkedinLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FooterBottomRight;

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

@@ -0,0 +1,7 @@
+interface FooterBottomRightProps {
+    facebookLink?: string;
+    instagramLink?: string;
+    linkedinLink?: string;
+}
+
+export default FooterBottomRightProps;

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

@@ -0,0 +1,17 @@
+import FooterMiddleItemProps from "./FooterItemProps";
+import styles from "./footer.module.scss"
+
+const FooterMiddleItem = (props: FooterMiddleItemProps) => {
+    const {title, children} = props
+
+    return (
+        <div className={styles.footerItem}>
+            <h3>{title}</h3>
+            <ul>
+                {children}
+            </ul>
+        </div>
+    )
+}
+
+export default FooterMiddleItem

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

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+interface FooterMiddleItemProps {
+    title?: string;
+    children?: ReactNode;
+}
+
+export default FooterMiddleItemProps;

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

@@ -0,0 +1,18 @@
+import FooterBottomRight from "./FooterBottomRight"
+import FooterMiddleProps from "./FooterMiddleProps"
+import styles from "./footer.module.scss"
+
+const FooterMiddle = (props: FooterMiddleProps) => {
+    const { children } = props
+
+    return <>
+        <div className={styles.footerMiddleLinks}>
+            {children}
+            <div className={styles.footerSocialMediaLogos}>
+                <FooterBottomRight facebookLink="#" instagramLink="#" linkedinLink="#" />
+            </div>
+        </div>
+    </>
+}
+
+export default FooterMiddle;

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

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+interface FooterMiddleProps {
+    children?: ReactNode
+    extraClass?: string
+}
+
+export default FooterMiddleProps;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface FooterProps {
+    footerTop?: ReactNode
+    footerMiddle?: ReactNode
+    footerBottom?: ReactNode
+    extraClass?: string
+    logo?: string
+}
+
+export default FooterProps;

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

@@ -0,0 +1,30 @@
+import Container from "../../Shared/Container/Container";
+import FooterTopProps from "./FooterTopProps";
+import FooterBgDesign from "./footer-bg-design";
+import styles from './footer.module.scss'
+
+const FooterTop = (props: FooterTopProps) => {
+    const { title, subtitle, children } = props
+
+    return (
+        <div className={styles.footerTop}>
+            <Container>
+                <div className={styles.footerTopWrapper}>
+                    <div className={styles.footerTopLeft}>
+                        <h1>{title}</h1>
+                        <h2>{subtitle}</h2>
+                    </div>
+
+                    <div className={styles.footerTopRight}>
+                        {children}
+                    </div>
+                </div>
+                <div className={styles.footerBgDesignContainer}>
+                    <FooterBgDesign />
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default FooterTop

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface FooterTopProps {
+    title?: string;
+    subtitle?: string;
+    children?: ReactNode;
+}
+
+export default FooterTopProps;

package/src/Components/Layout/Footer/footer-bg-design.tsx

@@ -0,0 +1,21 @@
+const FooterBgDesign = () => {
+    return (
+        <svg width="524" height="240" viewBox="0 0 524 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.2">
+                <path opacity="0.5" d="M0 80C48.1937 80 87.2727 115.822 87.2727 160H0V80Z" fill="#EFEAE7" />
+                <path opacity="0.25" d="M174.546 80C126.352 80 87.2729 115.822 87.2729 160H174.546V80Z" fill="#EFEAE7" />
+                <path opacity="0.5" d="M523.636 160C475.443 160 436.364 124.178 436.364 80H523.636V160Z" fill="#EFEAE7" />
+                <path opacity="0.75" d="M87.2729 160C135.467 160 174.546 195.822 174.546 240H87.2729V160Z" fill="#EFEAE7" />
+                <path opacity="0.5" d="M174.545 240C222.739 240 261.818 204.178 261.818 160H174.545V240Z" fill="#EFEAE7" />
+                <path opacity="0.25" d="M349.091 240C300.897 240 261.818 204.178 261.818 160H349.091V240Z" fill="#EFEAE7" />
+                <path opacity="0.75" d="M436.364 160C388.17 160 349.091 195.822 349.091 240H436.364V160Z" fill="#EFEAE7" />
+                <path opacity="0.25" d="M349.091 0C397.285 0 436.364 35.8225 436.364 80H349.091V0Z" fill="#EFEAE7" />
+                <path opacity="0.5" d="M261.818 160C310.012 160 349.091 124.178 349.091 80H261.818V160Z" fill="#EFEAE7" />
+                <path opacity="0.75" d="M174.545 80C222.739 80 261.818 44.1775 261.818 0H174.545V80Z" fill="#EFEAE7" />
+            </g>
+        </svg>
+    )
+}
+
+export default FooterBgDesign;
+