@omniumretail/component-library 0.1.13 → 0.1.15

package/dist/main.css

@@ -296,3 +296,40 @@
 .e3BZiSKkbgvekUOREMi6 .ant-radio:hover .ant-radio-inner {
   border-color: var(--color-orange);
 }
+/*!***************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Footer/styles.module.scss ***!
+  \***************************************************************************************************************************************************************/
+.D8zh2JqbXPRwa7HPZoou {
+  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;
+}
+.D8zh2JqbXPRwa7HPZoou .rLcS8I6I0aB1gd6Ro7Ix {
+  color: var(--grey2);
+  width: 100%;
+  margin-bottom: 4px;
+}
+.D8zh2JqbXPRwa7HPZoou .I18ixqhkBJrOHeIm9ELH {
+  margin-left: 8px;
+}
+.D8zh2JqbXPRwa7HPZoou .XVFO_EVWpXwEwbcS7OwM,
+.D8zh2JqbXPRwa7HPZoou .I18ixqhkBJrOHeIm9ELH {
+  display: inline-block;
+}
+.D8zh2JqbXPRwa7HPZoou .Ch59mk3ENKwL_xUV4kwI {
+  height: 25px;
+  align-self: flex-end;
+}

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,4 @@
+export interface FooterProps {
+    storeName: string;
+}
+export declare const Footer: (props: FooterProps) => JSX.Element;

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

@@ -10,3 +10,4 @@ export * from './Table';
 export * from './Tag';
 export * from './DatePicker';
 export * from './Radio';
+export * from './Footer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "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",
@@ -67,6 +68,7 @@
     "tailwindcss": "^3.0.2",
     "terser-webpack-plugin": "^5.2.5",
     "typescript": "^4.9.3",
+    "url-loader": "^4.1.1",
     "web-vitals": "^2.1.0",
     "webpack-dev-server": "^4.6.0",
     "webpack-manifest-plugin": "^4.0.2",

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;
+    }
+}

package/src/components/index.tsx

@@ -10,3 +10,4 @@ export * from './Table';
 export * from './Tag';
 export * from './DatePicker';
 export * from './Radio';
+export * from './Footer';

package/webpack.config.js

@@ -33,7 +33,8 @@ module.exports = {
                 test: /\.(png|svg|jpg|gif)$/,
                 loader: 'url-loader',
                 options: {
-                    limit: Infinity // everything
+                    limit: Infinity, // everything
+                    name: '[name].[hash:7].[ext]',
                 }
             },
             { test: /\.tsx?$/, use: 'ts-loader' },