@omniumretail/component-library 0.1.13 → 0.1.14

package/.storybook/preview.js

@@ -9,4 +9,5 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  layout: 'fullscreen',
 }

package/dist/types/components/Footer/Footer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { FooterProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<FooterProps>;

package/dist/types/components/Footer/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface FooterProps {
+    storeName: string;
+}
+export declare const Footer: (props: FooterProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -44,6 +44,7 @@
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
     "mini-css-extract-plugin": "^2.7.2",
+    "moment": "^2.29.4",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",

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

@@ -0,0 +1,14 @@
+import { Meta, Story } from "@storybook/react";
+import { Footer, FooterProps } from '.';
+
+export default {
+    title: 'Footer',
+    component: Footer,
+} as Meta;
+
+const Template: Story<FooterProps> = (args) => <Footer {...args}></Footer>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    storeName: 'Levis'
+};

package/src/components/Footer/index.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import moment from 'moment';
+import styles from './styles.module.scss';
+import omniumLogo from '../../assets/images/omnium-retail-logo-white.png';
+
+export interface FooterProps {
+    storeName: string;
+}
+
+export const Footer = (props: FooterProps) => {
+    const [date, setDate] = useState(moment());
+    const { storeName = 'Missing Store Name' } = props;
+
+    useEffect(() => {
+        const time = (function updateDate() {
+            const nextMinute = moment().add(1, 'minute');
+            return setTimeout(() => {
+                setDate(moment());
+                updateDate();
+            }, nextMinute.valueOf() - moment().valueOf());
+        }());
+
+        return () => clearTimeout(time);
+    });
+
+    return (
+        <div className={styles.footer}>
+            <div className={styles.content}>
+                <div className={styles.brand}>{storeName}</div>
+                <div className={styles.date}>{date.format('DD/MM/yyyy')}</div>
+                <div className={styles.time}>{date.format('HH:mm')}</div>
+            </div>
+            <img src={omniumLogo} className={styles.omniumLogoImg} alt="omnium logo" />
+        </div>
+    );
+};
+
+

package/src/components/Footer/styles.module.scss

@@ -0,0 +1,38 @@
+.footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0 16px;
+    background-color: var(--color-black);
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 12px 24px;
+    font-size: var(--font-size-body-1);
+    color: var(--color-grey-light);
+    height: 60px;
+    flex-direction: row;
+    text-align: left;
+    box-sizing: border-box;
+
+    .brand {
+        color: var(--grey2);
+        width: 100%;
+        margin-bottom: 4px;
+    }
+
+    .time {
+        margin-left: 8px;
+    }
+
+    .date,
+    .time {
+        display: inline-block;
+    }
+
+    .omniumLogoImg {
+        height: 25px;
+        align-self: flex-end;
+    }
+}