From 1a75865b30870aa6d6e2f833d7d0bb9e32fea0d8 Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Tue, 26 Oct 2021 21:56:38 -0400
Subject: [PATCH 01/13] Initial Commit

---
 .gitignore                                    |  10 +-
 .../MenuItemCard/MenuItemCard.stories.tsx     |  35 +++++
 src/Containers/MenuItemCard/MenuItemCard.tsx  | 133 ++++++++++++++++++
 src/Containers/index.ts                       |   6 +
 4 files changed, 183 insertions(+), 1 deletion(-)
 create mode 100644 src/Containers/MenuItemCard/MenuItemCard.stories.tsx
 create mode 100644 src/Containers/MenuItemCard/MenuItemCard.tsx

diff --git a/.gitignore b/.gitignore
index aaa1317e..94dc8e4f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,12 @@ node_modules
 .awcache
 dist
 .idea
-debug.log
\ No newline at end of file
+debug.log
+src/Containers/HorizontalScrollList/HorizontalScrollList.tsx
+src/Containers/MiddleCanvas/DroppableElement.tsx
+src/Containers/Modal/Modal.tsx
+src/Containers/QuestionMarkHover/QuestionMarkHover.stories.tsx
+src/Containers/QuestionMarkHover/QuestionMarkHover.tsx
+src/Containers/SelectList/SelectList.tsx
+src/Fragments/InputFragment.tsx
+src/Inputs/Button/Button.tsx
diff --git a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
new file mode 100644
index 00000000..41893036
--- /dev/null
+++ b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { MenuItemCard, MenuItemCardProps, LoyaltyPoints, LimitedTimeBanner, SaleTag} from '../../index';
+import { createStoryTitle } from '../../Constants';
+
+export default {
+    title: createStoryTitle('MenuItemCard'),
+    component: MenuItemCard,
+    subcomponents: {LoyaltyPoints, LimitedTimeBanner, SaleTag}, 
+    argTypes: { onClick: { action: 'Item has been clicked' } },
+    args: {
+        animated: true,
+        flat: false,
+        widthFitContent: false,
+        sale: false,
+        soldOut: false,
+        loyaltyPointsToggle: true, 
+        limitedTimeBannerToggle: true, 
+        ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+        ItemName: 'Blackberry Pancakes',
+        ItemPrice: 14.99,
+        discountAmount: 3, 
+        
+        LoyaltyPoints: (
+            <LoyaltyPoints amount = '+10★'/>
+        ),
+        LimitedTimeBanner:(
+            <LimitedTimeBanner/>  
+        ),
+
+    }, 
+
+} as Meta;
+export const Basic: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints {...args}/> 
+    <LimitedTimeBanner {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
diff --git a/src/Containers/MenuItemCard/MenuItemCard.tsx b/src/Containers/MenuItemCard/MenuItemCard.tsx
new file mode 100644
index 00000000..9c608a42
--- /dev/null
+++ b/src/Containers/MenuItemCard/MenuItemCard.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Main, MainInterface, Responsive, ResponsiveInterface } from '@Utils/BaseStyles';
+import { transition, } from '@Utils/Mixins';
+import { Container } from '@Containers/FileUpload/StyledComponents';
+// eslint-disable-next-line import/no-cycle
+import { Heading } from '../../index';
+
+export const ItemCard: React.FC<MenuItemCardProps> = ({
+    children, 
+    ...props
+}): React.ReactElement => <MenuItemCardBox {...props}>{children}</MenuItemCardBox>;
+
+export interface MenuItemCardProps
+    extends MainInterface, ResponsiveInterface, React.HTMLAttributes<HTMLDivElement> {
+
+    LoyaltyPoints: React.ReactElement;  
+    LimitedTimeBanner: React.ReactElement;  
+    SaleTag: React.ReactElement;  
+    animated?: boolean;
+    flat?: boolean;
+    widthFitContent?: boolean;
+    sale?: boolean;
+    soldOut?: boolean;
+    loyaltyPointsToggle?: boolean;
+    limitedTimeBannerToggle?: boolean,
+    saleAmount: number, 
+    amount: string,
+    ItemImage: string, 
+    ItemName: string,
+    ItemPrice: number,
+    discountAmount: number,
+}
+
+export const MenuItemCard: React.FC<MenuItemCardProps> = ({
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    LoyaltyPoints,
+    LimitedTimeBanner,
+    animated,
+    flat,
+    widthFitContent,
+    sale,
+    soldOut,
+    saleAmount, 
+    amount, 
+    loyaltyPointsToggle,
+    limitedTimeBannerToggle,
+    ItemImage, 
+    ItemName,
+    ItemPrice,
+    discountAmount,
+    ...props
+    
+}): React.ReactElement => (
+    <ItemCard {...props} ItemImage={ItemImage} ItemName={ItemName} ItemPrice={ItemPrice} discountAmount={discountAmount} animated={animated} 
+        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} amount={amount} LoyaltyPoints = {LoyaltyPoints} saleAmount = {saleAmount}
+        loyaltyPointsToggle={loyaltyPointsToggle} LimitedTimeBanner = {LimitedTimeBanner} limitedTimeBannerToggle={limitedTimeBannerToggle}> 
+
+        <img src={ItemImage} alt={ItemName} style={{ width: 350, height: 200 }} />
+        <Heading bold>{ItemName}</Heading>
+
+        { limitedTimeBannerToggle && <Container><LimitedTimeBannerPosition>{LimitedTimeBanner}</LimitedTimeBannerPosition></Container> }
+     
+        { loyaltyPointsToggle && <Container><LoyaltyPointsPosition>{LoyaltyPoints}</LoyaltyPointsPosition></Container> } 
+        <Container>{saleAmount}</Container>
+        { sale? 
+            <>
+                <SalePropsSlash>{ItemPrice}</SalePropsSlash>
+                <OnSale>{ItemPrice - discountAmount}</OnSale>
+            </>
+            :
+            <SaleProps>{ItemPrice}</SaleProps>
+        }
+
+    </ItemCard> 
+);
+
+const SaleProps = styled.header`  
+    font-size: 30px; 
+    text-align: right; 
+`
+
+const OnSale = styled.header`
+    font-size: 40px;
+    text-align: right;
+    font-weight: bold; 
+    color: #EE2434; 
+`
+const SalePropsSlash = styled(SaleProps)`
+    text-decoration: line-through;
+    font-size: 25px;
+    opacity: .6; 
+`
+
+const LoyaltyPointsPosition = styled.div`
+    position: absolute;
+    top: 10%;  
+`
+const LimitedTimeBannerPosition = styled.div`
+    position: absolute;
+    top: 31%;
+`
+
+const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & ResponsiveInterface>`
+    background-color: white;
+    width: 350px;
+    height: 350px; 
+    
+    ${({ theme, ...props }): string => `
+    border-radius: ${theme.dimensions.radius};
+    font-family: ${theme.font.family};
+    padding: ${theme.dimensions.padding.container}; 
+
+    ${Main({
+        ...props,
+    })} `}
+
+    box-shadow: ${({ flat, theme }): string => theme.depth[flat ? 0 : 1]};
+
+    ${({ animated, flat, theme }): string =>
+        animated ? ` ${transition(['box-shadow'])} &:hover {
+            box-shadow: ${theme.depth[flat ? 1 : 2]};
+        }` : ''}
+
+    ${Responsive}
+
+    ${({ soldOut }) =>
+        soldOut && `
+      opacity: 0.5;
+      cursor: not-allowed; `}
+
+    ${({ widthFitContent }): string => `${widthFitContent ? 'width:fit-content;' : ''} `}
+`;
diff --git a/src/Containers/index.ts b/src/Containers/index.ts
index fb9a143e..60006355 100644
--- a/src/Containers/index.ts
+++ b/src/Containers/index.ts
@@ -76,3 +76,9 @@ export * from './EditDraggableCanvas/_DraggableTable';
 export * from './InviteComponent/Invite';
 export * from './SeatingInfoInput/SeatingInfoInput';
 export * from './PartyInfoInput/PartyInfoInput';
+// eslint-disable-next-line import/no-cycle
+export * from './MenuItemCard/MenuItemCard'
+// eslint-disable-next-line import/no-cycle
+export * from './LimitedTimeBanner/LimitedTimeBanner'
+export * from './LoyaltyPoints/LoyaltyPoints'
+export * from './SaleTag/SaleTag'
\ No newline at end of file

From 08383b96b0daa3a18f9769f8781602bc33f1c8ad Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Tue, 26 Oct 2021 22:18:42 -0400
Subject: [PATCH 02/13] (CEM-2514) Menu Item Card Initial Commit

---
 .../LimitedTimeBanner.stories.tsx             | 16 +++++
 .../LimitedTimeBanner/LimitedTimeBanner.tsx   | 61 +++++++++++++++++++
 .../LoyaltyPoints/LoyaltyPoints.stories.tsx   | 20 ++++++
 .../LoyaltyPoints/LoyaltyPoints.tsx           | 31 ++++++++++
 src/Containers/SaleTag/SaleTag.stories.tsx    | 16 +++++
 src/Containers/SaleTag/SaleTag.tsx            | 37 +++++++++++
 src/Themes/MainTheme.ts                       |  3 +
 src/Utils/BaseStyles/Main.ts                  |  8 +--
 8 files changed, 188 insertions(+), 4 deletions(-)
 create mode 100644 src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
 create mode 100644 src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
 create mode 100644 src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
 create mode 100644 src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
 create mode 100644 src/Containers/SaleTag/SaleTag.stories.tsx
 create mode 100644 src/Containers/SaleTag/SaleTag.tsx

diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
new file mode 100644
index 00000000..d6cb5b02
--- /dev/null
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { LimitedTimeBanner,LimitedTimeBannerProps} from '../../index';
+import { createStoryTitle} from '../../Constants';
+
+export default {
+    title: createStoryTitle('LimitedTimeBanner'),
+    component: LimitedTimeBanner,
+    args: {
+        HoursRemaining: '2 Hours Remaining'
+    },
+} as Meta;
+
+export const Basic: Story<LimitedTimeBannerProps> = (args) => (
+    <LimitedTimeBanner {...args}/>
+);
diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
new file mode 100644
index 00000000..86e915bf
--- /dev/null
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
@@ -0,0 +1,61 @@
+// import React, { useState, useRef, useLayoutEffect } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+import { Clock } from '@styled-icons/bootstrap/Clock';
+import { Main, MainInterface, ResponsiveInterface, } from '@Utils/BaseStyles';
+// eslint-disable-next-line import/no-cycle
+import { Paragraph } from '../../index';
+
+export interface IconProps {}
+
+const Icon = styled(Clock)<IconProps>`
+    width: 16px;
+    float: left;
+    margin-bottom: auto;
+    margin-top: auto;
+`;
+
+export interface ClockItemProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    header: string;
+    activeStyle: Function;
+}
+
+export interface BannerProps
+    extends MainInterface,
+        ResponsiveInterface,
+        React.HTMLAttributes<HTMLDivElement> {
+
+}
+
+export interface LimitedTimeBannerProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
+    ...props
+}): React.ReactElement => (
+    <BannerBox {...props}>
+        <Paragraph bold>&nbsp;&nbsp;&nbsp;2 hours remaining<Icon /></Paragraph>
+    </BannerBox>
+) ;
+
+const BannerBox = styled.div<BannerProps>`
+   background-color: black;
+    // Theme Stuff
+    ${({ theme, ...props }): string => `
+    font-family: ${theme.font.family};
+    color: white;
+    width: 318px;
+    opacity: 0.6;
+    height: 20px; 
+    
+    ${Main({
+        padding: theme.dimensions.padding.container,
+        ...props,
+    })}
+    `}
+
+`;
+
+export default LimitedTimeBanner;
\ No newline at end of file
diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
new file mode 100644
index 00000000..e5c3077a
--- /dev/null
+++ b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react'; 
+import { Meta, Story } from '@storybook/react';
+import { LoyaltyPointsProps, LoyaltyPoints } from "../../index";
+import { createStoryTitle } from '../../Constants';
+
+export default {
+  
+    title: createStoryTitle('LoyaltyPoints'),
+    component: LoyaltyPoints,
+    args:{
+        amount: '+10★'
+    }
+}as Meta;
+
+
+export const Basic: Story<LoyaltyPointsProps> = (args) => (
+    <LoyaltyPoints {...args}/> 
+)
+
+// todo switch star from text to icon using styled-icons import
\ No newline at end of file
diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
new file mode 100644
index 00000000..b609e3ca
--- /dev/null
+++ b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
@@ -0,0 +1,31 @@
+import React from 'react'; 
+import styled from 'styled-components';
+import { MainInterface } from '@Utils/BaseStyles'
+
+export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
+    amount, ...props
+}):React.ReactElement => <LoyaltyPointsBox {...props}><p>{amount}</p></LoyaltyPointsBox>;
+
+export interface LoyaltyPointsProps
+    extends MainInterface{
+            amount: string;
+        }
+
+const LoyaltyPointsBox = styled.div`
+
+    ${({theme}):string => `
+        font-family: ${theme.font.family};
+        font-size: 20px;
+        width: 60px;
+        height: 30px;
+        padding: 5px -10px;
+        border-radius:50px;
+        border-bottom-left-radius: 0px;
+        border-top-left-radius: 0px;
+        background-color: ${theme.colors.background};
+        text-align: center;
+        color: ${theme.colors.loyaltyText};
+        
+    `}
+
+`
\ No newline at end of file
diff --git a/src/Containers/SaleTag/SaleTag.stories.tsx b/src/Containers/SaleTag/SaleTag.stories.tsx
new file mode 100644
index 00000000..eee7e4e4
--- /dev/null
+++ b/src/Containers/SaleTag/SaleTag.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { SaleTag, SaleTagProps } from '../../index';
+import { createStoryTitle } from '../../Constants';
+
+export default {
+    title: createStoryTitle('SaleTag'),
+    component: SaleTag,
+    args: {
+        saleAmount: 2,
+    },
+} as Meta;
+
+export const Basic: Story<SaleTagProps> = (args) => (
+    <SaleTag {...args}/>
+);
\ No newline at end of file
diff --git a/src/Containers/SaleTag/SaleTag.tsx b/src/Containers/SaleTag/SaleTag.tsx
new file mode 100644
index 00000000..67665593
--- /dev/null
+++ b/src/Containers/SaleTag/SaleTag.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface SaleTagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    saleAmount: number;
+}
+
+export const SaleTag: React.FC<SaleTagProps> = ({
+    saleAmount = 2,
+    ...props
+}): React.ReactElement => (
+    <SaleTagDiv {...props} saleAmount={saleAmount}>
+        {saleAmount}$ off
+    </SaleTagDiv>
+);
+
+const SaleTagDiv = styled.span<SaleTagProps>`
+    ${({theme, ...props}):string => `
+        border-radius: 100px;
+        width: 100px;
+        height: 40px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        border-style: solid;
+        border-width: 1px;
+        font-size: 15px;
+        
+        background-color: ${theme.colors.background};
+        color: ${theme.colors.primary};
+        border-color: ${theme.colors.border};
+        font-family: ${theme.font.family};
+        font-weight: bolder;
+        text-align: center;
+    `}
+`;
\ No newline at end of file
diff --git a/src/Themes/MainTheme.ts b/src/Themes/MainTheme.ts
index 3df8d5fc..2b63234f 100644
--- a/src/Themes/MainTheme.ts
+++ b/src/Themes/MainTheme.ts
@@ -4,6 +4,7 @@ export interface MainThemeInterface extends ThemeTemplateInterface {
     colors: {
         primary: string;
         text: string;
+        loyaltyText: string;
         input: {
             default: string;
             success: string;
@@ -31,6 +32,7 @@ export interface MainThemeInterface extends ThemeTemplateInterface {
         chairTableBackground: string;
         chairOccupiedBackground: string;
         chairTableEditBackground: string;
+        
     };
 }
 
@@ -60,6 +62,7 @@ export const MainTheme: MainThemeInterface = {
         chairTableBackground: '#6c757d',
         chairOccupiedBackground: '#EE2434',
         chairTableEditBackground: '#C4C4C4',
+        loyaltyText: '#0000FF',
         PieChartColors: {
             Red: '#FF0000',
             Green: '#008000',
diff --git a/src/Utils/BaseStyles/Main.ts b/src/Utils/BaseStyles/Main.ts
index dae00a93..52d55f5a 100644
--- a/src/Utils/BaseStyles/Main.ts
+++ b/src/Utils/BaseStyles/Main.ts
@@ -17,10 +17,10 @@ export const Main = ({
 
     // Inline Styles
     ${
-        typeof inlineStyle === 'function'
-            ? inlineStyle({ ...props, margin, padding })
-            : inlineStyle
-    };
+    typeof inlineStyle === 'function'
+        ? inlineStyle({ ...props, margin, padding })
+        : inlineStyle
+};
 `;
 
 export const MainProps: string[] = ['margin', 'padding', 'inlineStyle'];

From 64ee9f9b35e0bc4e58f601eefacafeda9c15926f Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Thu, 28 Oct 2021 09:37:08 -0400
Subject: [PATCH 03/13] (CEM-2514) Soldout state + component  position fixes

---
 .../LimitedTimeBanner/LimitedTimeBanner.tsx   | 64 ++++++----------
 .../MenuItemCard/MenuItemCard.stories.tsx     | 20 +++--
 src/Containers/MenuItemCard/MenuItemCard.tsx  | 76 ++++++++++---------
 3 files changed, 75 insertions(+), 85 deletions(-)

diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
index 86e915bf..eeff04f4 100644
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
@@ -1,61 +1,41 @@
-// import React, { useState, useRef, useLayoutEffect } from 'react';
 import React from 'react';
 import styled from 'styled-components';
-import { Clock } from '@styled-icons/bootstrap/Clock';
-import { Main, MainInterface, ResponsiveInterface, } from '@Utils/BaseStyles';
-// eslint-disable-next-line import/no-cycle
-import { Paragraph } from '../../index';
-
-export interface IconProps {}
-
-const Icon = styled(Clock)<IconProps>`
-    width: 16px;
-    float: left;
-    margin-bottom: auto;
-    margin-top: auto;
-`;
-
-export interface ClockItemProps
-    extends React.HTMLAttributes<HTMLDivElement> {
-    header: string;
-    activeStyle: Function;
-}
-
-export interface BannerProps
-    extends MainInterface,
-        ResponsiveInterface,
-        React.HTMLAttributes<HTMLDivElement> {
-
-}
+import {Clock} from '@styled-icons/bootstrap/Clock';
+import { MainInterface} from '@Utils/BaseStyles';
 
 export interface LimitedTimeBannerProps
-    extends React.HTMLAttributes<HTMLDivElement> {
+    extends MainInterface {
+        HoursRemaining: number,
 }
 
 export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
-    ...props
+    HoursRemaining,...props
 }): React.ReactElement => (
     <BannerBox {...props}>
-        <Paragraph bold>&nbsp;&nbsp;&nbsp;2 hours remaining<Icon /></Paragraph>
+        <Icon />
+        <p>{HoursRemaining} Hours Remaining</p>
     </BannerBox>
 ) ;
 
-const BannerBox = styled.div<BannerProps>`
-   background-color: black;
+const BannerBox = styled.div`
     // Theme Stuff
-    ${({ theme, ...props }): string => `
+    ${({theme}):string => `
     font-family: ${theme.font.family};
-    color: white;
-    width: 318px;
-    opacity: 0.6;
-    height: 20px; 
-    
-    ${Main({
-        padding: theme.dimensions.padding.container,
-        ...props,
-    })}
+    color: ${theme.colors.background}};
     `}
+    background-color: rgba(0,0,0,0.5);
+    font-size: 25px;
+    text-align: center;
+    width: 350px;
+    height: 40px; 
+`;
 
+const Icon = styled(Clock)`
+    width: 25px;
+    float: left;
+    padding-top:5px;
+    padding-bottom:5px;
+    padding-left: 5px;
 `;
 
 export default LimitedTimeBanner;
\ No newline at end of file
diff --git a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
index 41893036..6a8b5fa7 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
@@ -7,7 +7,7 @@ export default {
     title: createStoryTitle('MenuItemCard'),
     component: MenuItemCard,
     subcomponents: {LoyaltyPoints, LimitedTimeBanner, SaleTag}, 
-    argTypes: { onClick: { action: 'Item has been clicked' } },
+    argTypes: { onClick: { action: 'Link to next step' } },
     args: {
         animated: true,
         flat: false,
@@ -16,20 +16,24 @@ export default {
         soldOut: false,
         loyaltyPointsToggle: true, 
         limitedTimeBannerToggle: true, 
+        saleTagToggle: true, 
         ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
         ItemName: 'Blackberry Pancakes',
         ItemPrice: 14.99,
         discountAmount: 3, 
-        
         LoyaltyPoints: (
-            <LoyaltyPoints amount = '+10★'/>
+            <LoyaltyPoints loyaltyAmount={10}/>
         ),
         LimitedTimeBanner:(
-            <LimitedTimeBanner/>  
+            <LimitedTimeBanner HoursRemaining= {3}/>  
         ),
-
+        SaleTag: (
+            <SaleTag saleTagAmount={5}/>
+        ), 
     }, 
-
 } as Meta;
-export const Basic: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints {...args}/> 
-    <LimitedTimeBanner {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
+
+export const Basic: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints loyaltyAmount={0} {...args}/> 
+    <LimitedTimeBanner HoursRemaining={0} {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
+
+
diff --git a/src/Containers/MenuItemCard/MenuItemCard.tsx b/src/Containers/MenuItemCard/MenuItemCard.tsx
index 9c608a42..78b46b50 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.tsx
@@ -24,8 +24,8 @@ export interface MenuItemCardProps
     soldOut?: boolean;
     loyaltyPointsToggle?: boolean;
     limitedTimeBannerToggle?: boolean,
-    saleAmount: number, 
-    amount: string,
+    saleTagToggle?: boolean, 
+    saleTagAmount: number, 
     ItemImage: string, 
     ItemName: string,
     ItemPrice: number,
@@ -36,15 +36,16 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     // eslint-disable-next-line @typescript-eslint/no-shadow
     LoyaltyPoints,
     LimitedTimeBanner,
+    SaleTag, 
     animated,
     flat,
     widthFitContent,
     sale,
     soldOut,
-    saleAmount, 
-    amount, 
+    saleTagAmount, 
     loyaltyPointsToggle,
     limitedTimeBannerToggle,
+    saleTagToggle, 
     ItemImage, 
     ItemName,
     ItemPrice,
@@ -53,20 +54,21 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     
 }): React.ReactElement => (
     <ItemCard {...props} ItemImage={ItemImage} ItemName={ItemName} ItemPrice={ItemPrice} discountAmount={discountAmount} animated={animated} 
-        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} amount={amount} LoyaltyPoints = {LoyaltyPoints} saleAmount = {saleAmount}
-        loyaltyPointsToggle={loyaltyPointsToggle} LimitedTimeBanner = {LimitedTimeBanner} limitedTimeBannerToggle={limitedTimeBannerToggle}> 
+        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} LoyaltyPoints = {LoyaltyPoints} saleTagAmount = {saleTagAmount}
+        loyaltyPointsToggle={loyaltyPointsToggle} LimitedTimeBanner = {LimitedTimeBanner} SaleTag = {SaleTag} saleTagToggle = {saleTagToggle}
+        limitedTimeBannerToggle={limitedTimeBannerToggle}> 
 
         <img src={ItemImage} alt={ItemName} style={{ width: 350, height: 200 }} />
         <Heading bold>{ItemName}</Heading>
 
         { limitedTimeBannerToggle && <Container><LimitedTimeBannerPosition>{LimitedTimeBanner}</LimitedTimeBannerPosition></Container> }
-     
+        { saleTagToggle && <Container><SaleTagPosition>{SaleTag}</SaleTagPosition></Container>}
         { loyaltyPointsToggle && <Container><LoyaltyPointsPosition>{LoyaltyPoints}</LoyaltyPointsPosition></Container> } 
-        <Container>{saleAmount}</Container>
+
         { sale? 
             <>
                 <SalePropsSlash>{ItemPrice}</SalePropsSlash>
-                <OnSale>{ItemPrice - discountAmount}</OnSale>
+                <OnSale>{ItemPrice - saleTagAmount}</OnSale>
             </>
             :
             <SaleProps>{ItemPrice}</SaleProps>
@@ -75,33 +77,8 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     </ItemCard> 
 );
 
-const SaleProps = styled.header`  
-    font-size: 30px; 
-    text-align: right; 
-`
-
-const OnSale = styled.header`
-    font-size: 40px;
-    text-align: right;
-    font-weight: bold; 
-    color: #EE2434; 
-`
-const SalePropsSlash = styled(SaleProps)`
-    text-decoration: line-through;
-    font-size: 25px;
-    opacity: .6; 
-`
-
-const LoyaltyPointsPosition = styled.div`
-    position: absolute;
-    top: 10%;  
-`
-const LimitedTimeBannerPosition = styled.div`
-    position: absolute;
-    top: 31%;
-`
-
 const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & ResponsiveInterface>`
+    position: relative; 
     background-color: white;
     width: 350px;
     height: 350px; 
@@ -131,3 +108,32 @@ const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & Responsiv
 
     ${({ widthFitContent }): string => `${widthFitContent ? 'width:fit-content;' : ''} `}
 `;
+
+const SaleProps = styled.header`  
+    font-size: 30px; 
+    text-align: right; 
+`
+const OnSale = styled.header`
+    font-size: 40px;
+    text-align: right;
+    font-weight: bold; 
+    color: #EE2434; 
+`
+const SalePropsSlash = styled(SaleProps)`
+    text-decoration: line-through;
+    font-size: 25px;
+    opacity: .6; 
+`
+const LoyaltyPointsPosition = styled.div`
+    position: absolute;
+    top: 30px; 
+`
+const LimitedTimeBannerPosition = styled.div`
+    position: absolute;
+    bottom: 150px; 
+`
+const SaleTagPosition = styled.div`
+    position: absolute;
+    right: 20px;
+    top: 30px;
+`

From db040092e28b222c36bbf7502b2cdea5896db4df Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Thu, 4 Nov 2021 16:13:17 -0400
Subject: [PATCH 04/13] Changed default, added multiple stories for state
 testing

---
 .../MenuItemCard/MenuItemCard.stories.tsx     |  80 +++++++++----
 src/Containers/MenuItemCard/MenuItemCard.tsx  | 112 ++++++++++++------
 2 files changed, 130 insertions(+), 62 deletions(-)

diff --git a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
index 6a8b5fa7..81d90bea 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
@@ -8,32 +8,62 @@ export default {
     component: MenuItemCard,
     subcomponents: {LoyaltyPoints, LimitedTimeBanner, SaleTag}, 
     argTypes: { onClick: { action: 'Link to next step' } },
-    args: {
-        animated: true,
-        flat: false,
-        widthFitContent: false,
-        sale: false,
-        soldOut: false,
-        loyaltyPointsToggle: true, 
-        limitedTimeBannerToggle: true, 
-        saleTagToggle: true, 
-        ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
-        ItemName: 'Blackberry Pancakes',
-        ItemPrice: 14.99,
-        discountAmount: 3, 
-        LoyaltyPoints: (
-            <LoyaltyPoints loyaltyAmount={10}/>
-        ),
-        LimitedTimeBanner:(
-            <LimitedTimeBanner HoursRemaining= {3}/>  
-        ),
-        SaleTag: (
-            <SaleTag saleTagAmount={5}/>
-        ), 
-    }, 
 } as Meta;
 
-export const Basic: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints loyaltyAmount={0} {...args}/> 
-    <LimitedTimeBanner HoursRemaining={0} {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
+const Template: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints loyaltyAmount={10} {...args}/> 
+    <LimitedTimeBanner  HoursRemaining={5} {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
+
+export const MenuItemCardBasic = Template.bind({}); 
+MenuItemCardBasic.args = {
+    ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+    ItemName: 'Blackberry Pancakes',
+    ItemPrice: 14.99,
+    sale: false,
+    soldOut: false,
+    loyaltyPointsToggle: true, 
+    limitedTimeBannerToggle: true,
+    saleTagToggle: true, 
+    widthFitContent: false,
+    heightFitContent: false,
+    animated: true,
+    flat: false,
+    saleTagAmount: 5,
+};
+
+export const MenuItemCardStates = Template.bind({}); 
+MenuItemCardStates.args = {
+    ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+    ItemName: 'Blackberry Pancakes',
+    ItemPrice: 14.99,
+    sale: true,
+    soldOut: true,
+    loyaltyPointsToggle: false, 
+    limitedTimeBannerToggle: false,
+    saleTagToggle: false, 
+    widthFitContent: false,
+    heightFitContent: false,
+    animated: true,
+    flat: false,
+    saleTagAmount: 5, 
+};
+
+export const MenuItemCardLongText = Template.bind({});
+MenuItemCardLongText.args = {
+    ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+    ItemName: 'Super crazy long combo special order with extra sides and drinks',
+    ItemPrice: 999.99,
+    sale: false,
+    soldOut: false,
+    loyaltyPointsToggle: true, 
+    limitedTimeBannerToggle: true,
+    saleTagToggle: true, 
+    widthFitContent: false,
+    heightFitContent: true,
+    animated: true,
+    flat: false,
+    saleTagAmount: 5, 
+};
+
+
 
 
diff --git a/src/Containers/MenuItemCard/MenuItemCard.tsx b/src/Containers/MenuItemCard/MenuItemCard.tsx
index 78b46b50..ffb51385 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.tsx
@@ -3,67 +3,68 @@ import styled from 'styled-components';
 import { Main, MainInterface, Responsive, ResponsiveInterface } from '@Utils/BaseStyles';
 import { transition, } from '@Utils/Mixins';
 import { Container } from '@Containers/FileUpload/StyledComponents';
-// eslint-disable-next-line import/no-cycle
-import { Heading } from '../../index';
-
-export const ItemCard: React.FC<MenuItemCardProps> = ({
-    children, 
-    ...props
-}): React.ReactElement => <MenuItemCardBox {...props}>{children}</MenuItemCardBox>;
 
 export interface MenuItemCardProps
     extends MainInterface, ResponsiveInterface, React.HTMLAttributes<HTMLDivElement> {
 
-    LoyaltyPoints: React.ReactElement;  
-    LimitedTimeBanner: React.ReactElement;  
-    SaleTag: React.ReactElement;  
+    LoyaltyPoints?: React.ReactElement;  
+    LimitedTimeBanner?: React.ReactElement;  
+    SaleTag?: React.ReactElement;  
     animated?: boolean;
     flat?: boolean;
     widthFitContent?: boolean;
+    heightFitContent?: boolean; 
     sale?: boolean;
     soldOut?: boolean;
     loyaltyPointsToggle?: boolean;
     limitedTimeBannerToggle?: boolean,
-    saleTagToggle?: boolean, 
-    saleTagAmount: number, 
+    saleTagToggle?: boolean,  
     ItemImage: string, 
     ItemName: string,
     ItemPrice: number,
-    discountAmount: number,
+    saleTagAmount: number, 
 }
 
+export const ItemCard: React.FC<MenuItemCardProps> = ({
+    children, 
+    ...props
+}): React.ReactElement => <MenuItemCardBox {...props}>{children}</MenuItemCardBox>;
+
+// To do: disable toggles + clickable when enabling sold out state
+// To do: fix argument values from composite components (declared in menuitemcard stories but doesn't update, how do you pass them properly?)
 export const MenuItemCard: React.FC<MenuItemCardProps> = ({
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     LoyaltyPoints,
     LimitedTimeBanner,
     SaleTag, 
     animated,
     flat,
     widthFitContent,
+    heightFitContent,
     sale,
     soldOut,
-    saleTagAmount, 
     loyaltyPointsToggle,
     limitedTimeBannerToggle,
     saleTagToggle, 
     ItemImage, 
     ItemName,
     ItemPrice,
-    discountAmount,
+    saleTagAmount, 
     ...props
-    
 }): React.ReactElement => (
-    <ItemCard {...props} ItemImage={ItemImage} ItemName={ItemName} ItemPrice={ItemPrice} discountAmount={discountAmount} animated={animated} 
+        
+    <ItemCard {...props} ItemImage={ItemImage} ItemName={ItemName} ItemPrice={ItemPrice} animated={animated} 
         flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} LoyaltyPoints = {LoyaltyPoints} saleTagAmount = {saleTagAmount}
         loyaltyPointsToggle={loyaltyPointsToggle} LimitedTimeBanner = {LimitedTimeBanner} SaleTag = {SaleTag} saleTagToggle = {saleTagToggle}
-        limitedTimeBannerToggle={limitedTimeBannerToggle}> 
+        limitedTimeBannerToggle={limitedTimeBannerToggle} heightFitContent = {heightFitContent}> 
+        
+        <img src={ItemImage} alt={ItemName} style={{ width: 350, height: 200 }}/>
+        <ItemHeader>{ItemName}</ItemHeader>
+        { soldOut && <Container><SoldOutBox>Sold Out</SoldOutBox></Container> }
+        { limitedTimeBannerToggle && <Container><LimitedTimeBannerPosition>{LimitedTimeBanner}</LimitedTimeBannerPosition></Container> }
 
-        <img src={ItemImage} alt={ItemName} style={{ width: 350, height: 200 }} />
-        <Heading bold>{ItemName}</Heading>
+        { loyaltyPointsToggle && <Container><LoyaltyPointsPosition>{LoyaltyPoints}</LoyaltyPointsPosition></Container> }
+        { saleTagToggle && <Container><SaleTagPosition>{SaleTag}</SaleTagPosition></Container>} 
 
-        { limitedTimeBannerToggle && <Container><LimitedTimeBannerPosition>{LimitedTimeBanner}</LimitedTimeBannerPosition></Container> }
-        { saleTagToggle && <Container><SaleTagPosition>{SaleTag}</SaleTagPosition></Container>}
-        { loyaltyPointsToggle && <Container><LoyaltyPointsPosition>{LoyaltyPoints}</LoyaltyPointsPosition></Container> } 
 
         { sale? 
             <>
@@ -73,7 +74,6 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
             :
             <SaleProps>{ItemPrice}</SaleProps>
         }
-
     </ItemCard> 
 );
 
@@ -82,12 +82,11 @@ const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & Responsiv
     background-color: white;
     width: 350px;
     height: 350px; 
+    z-index: 1; 
     
     ${({ theme, ...props }): string => `
     border-radius: ${theme.dimensions.radius};
     font-family: ${theme.font.family};
-    padding: ${theme.dimensions.padding.container}; 
-
     ${Main({
         ...props,
     })} `}
@@ -107,33 +106,72 @@ const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & Responsiv
       cursor: not-allowed; `}
 
     ${({ widthFitContent }): string => `${widthFitContent ? 'width:fit-content;' : ''} `}
+    ${({ heightFitContent }): string => `${heightFitContent ? 'height:fit-content;' : ''} `}
 `;
 
+const SoldOutBox = styled.div`
+    // Theme Stuff
+    ${({theme}):string => `
+    font-family: ${theme.font.family};
+    color: ${theme.colors.background}};
+    `}
+    position: absolute;
+    z-index: 2;
+    top: 0px;
+    background-color: rgba(48,48,48,48.0);
+    font-size: 25px;
+    text-align: center;
+    width: 350px;
+    height: 40px; 
+    padding-top: 15px; 
+`;
+const ItemHeader = styled.header`
+    font-weight: bold;
+    padding-left: 10px;
+    padding-right: 80px;
+    font-size: 40px;  
+`
 const SaleProps = styled.header`  
+    font-weight: bold; 
+    position: absolute;
     font-size: 30px; 
     text-align: right; 
+    right: 10px;
+    bottom: 20px;
+`
+const SalePropsSlash = styled(SaleProps)`
+    text-decoration: line-through;
+    font-size: 25px;
+    opacity: .6; 
+    bottom: 100px; 
 `
 const OnSale = styled.header`
+    position: absolute;
     font-size: 40px;
     text-align: right;
     font-weight: bold; 
     color: #EE2434; 
+    padding-right: 10px;
+    right: 10px;
+    bottom: 20px; 
 `
-const SalePropsSlash = styled(SaleProps)`
-    text-decoration: line-through;
-    font-size: 25px;
-    opacity: .6; 
-`
-const LoyaltyPointsPosition = styled.div`
+const TagsPosition = styled.div`
     position: absolute;
     top: 30px; 
+    display: flex; 
+    justify-content: space-between; 
 `
-const LimitedTimeBannerPosition = styled.div`
+const LoyaltyPointsPosition = styled.div`
     position: absolute;
-    bottom: 150px; 
+    top: 30px; 
 `
 const SaleTagPosition = styled.div`
     position: absolute;
-    right: 20px;
-    top: 30px;
+    right: 10px;
+    top: 53px;
 `
+
+const LimitedTimeBannerPosition = styled.div`
+    position: absolute;
+    bottom: 150px; 
+`
\ No newline at end of file

From 74a4b8cd22d1b5ab3753786a57de7ec4f57f2ccf Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Fri, 5 Nov 2021 10:34:35 -0400
Subject: [PATCH 05/13] Fixed children arguments, added rounding edge case,
 increased item text padding

---
 .../LimitedTimeBanner.stories.tsx             |  4 +-
 .../LimitedTimeBanner/LimitedTimeBanner.tsx   |  7 +-
 .../LoyaltyPoints/LoyaltyPoints.stories.tsx   |  2 +-
 .../LoyaltyPoints/LoyaltyPoints.tsx           |  6 +-
 .../MenuItemCard/MenuItemCard.stories.tsx     | 40 +++++----
 src/Containers/MenuItemCard/MenuItemCard.tsx  | 89 +++++++++++--------
 src/Containers/SaleTag/SaleTag.stories.tsx    |  2 +-
 src/Containers/SaleTag/SaleTag.tsx            | 10 +--
 8 files changed, 89 insertions(+), 71 deletions(-)

diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
index d6cb5b02..b9cec1b7 100644
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
@@ -7,10 +7,10 @@ export default {
     title: createStoryTitle('LimitedTimeBanner'),
     component: LimitedTimeBanner,
     args: {
-        HoursRemaining: '2 Hours Remaining'
+        hoursRemaining: 2, 
     },
 } as Meta;
 
 export const Basic: Story<LimitedTimeBannerProps> = (args) => (
     <LimitedTimeBanner {...args}/>
-);
+);
\ No newline at end of file
diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
index eeff04f4..76f57df1 100644
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
@@ -5,20 +5,19 @@ import { MainInterface} from '@Utils/BaseStyles';
 
 export interface LimitedTimeBannerProps
     extends MainInterface {
-        HoursRemaining: number,
+        hoursRemaining: number,
 }
 
 export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
-    HoursRemaining,...props
+    hoursRemaining,...props
 }): React.ReactElement => (
     <BannerBox {...props}>
         <Icon />
-        <p>{HoursRemaining} Hours Remaining</p>
+        <p>{hoursRemaining} Hours Remaining</p>
     </BannerBox>
 ) ;
 
 const BannerBox = styled.div`
-    // Theme Stuff
     ${({theme}):string => `
     font-family: ${theme.font.family};
     color: ${theme.colors.background}};
diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
index e5c3077a..96b06a82 100644
--- a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
+++ b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
@@ -8,7 +8,7 @@ export default {
     title: createStoryTitle('LoyaltyPoints'),
     component: LoyaltyPoints,
     args:{
-        amount: '+10★'
+        loyaltyAmount: 10,  
     }
 }as Meta;
 
diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
index b609e3ca..1c896cef 100644
--- a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
+++ b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
@@ -3,12 +3,12 @@ import styled from 'styled-components';
 import { MainInterface } from '@Utils/BaseStyles'
 
 export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
-    amount, ...props
-}):React.ReactElement => <LoyaltyPointsBox {...props}><p>{amount}</p></LoyaltyPointsBox>;
+    loyaltyAmount, ...props
+}):React.ReactElement => <LoyaltyPointsBox {...props}><p>+{loyaltyAmount}✪</p></LoyaltyPointsBox>;
 
 export interface LoyaltyPointsProps
     extends MainInterface{
-            amount: string;
+        loyaltyAmount: number; 
         }
 
 const LoyaltyPointsBox = styled.div`
diff --git a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
index 81d90bea..d55ca333 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
@@ -10,14 +10,17 @@ export default {
     argTypes: { onClick: { action: 'Link to next step' } },
 } as Meta;
 
-const Template: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints loyaltyAmount={10} {...args}/> 
-    <LimitedTimeBanner  HoursRemaining={5} {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
+const Template: Story<MenuItemCardProps> = (args) =>  <MenuItemCard  {...args}> <LoyaltyPoints {...args}/> 
+    <LimitedTimeBanner {...args}/>  <SaleTag {...args} /> </MenuItemCard>;
 
 export const MenuItemCardBasic = Template.bind({}); 
 MenuItemCardBasic.args = {
-    ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
-    ItemName: 'Blackberry Pancakes',
-    ItemPrice: 14.99,
+    itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+    itemName: 'Blackberry Pancakes',
+    itemPrice: 15.99,
+    saleTagAmount: 5,
+    loyaltyAmount: 20, 
+    hoursRemaining: 2, 
     sale: false,
     soldOut: false,
     loyaltyPointsToggle: true, 
@@ -27,14 +30,16 @@ MenuItemCardBasic.args = {
     heightFitContent: false,
     animated: true,
     flat: false,
-    saleTagAmount: 5,
 };
 
 export const MenuItemCardStates = Template.bind({}); 
 MenuItemCardStates.args = {
-    ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
-    ItemName: 'Blackberry Pancakes',
-    ItemPrice: 14.99,
+    itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+    itemName: 'Blackberry Pancakes',
+    itemPrice: 14.99,
+    saleTagAmount: 5,
+    loyaltyAmount: 10, 
+    hoursRemaining: 2,  
     sale: true,
     soldOut: true,
     loyaltyPointsToggle: false, 
@@ -44,14 +49,16 @@ MenuItemCardStates.args = {
     heightFitContent: false,
     animated: true,
     flat: false,
-    saleTagAmount: 5, 
 };
 
 export const MenuItemCardLongText = Template.bind({});
 MenuItemCardLongText.args = {
-    ItemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
-    ItemName: 'Super crazy long combo special order with extra sides and drinks',
-    ItemPrice: 999.99,
+    itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
+    itemName: 'Super crazy long combo special order with extra sides and drinks',
+    itemPrice: 999.99,
+    saleTagAmount: 5, 
+    loyaltyAmount: 10, 
+    hoursRemaining: 2, 
     sale: false,
     soldOut: false,
     loyaltyPointsToggle: true, 
@@ -61,9 +68,4 @@ MenuItemCardLongText.args = {
     heightFitContent: true,
     animated: true,
     flat: false,
-    saleTagAmount: 5, 
-};
-
-
-
-
+};
\ No newline at end of file
diff --git a/src/Containers/MenuItemCard/MenuItemCard.tsx b/src/Containers/MenuItemCard/MenuItemCard.tsx
index ffb51385..34742b62 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.tsx
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { Main, MainInterface, Responsive, ResponsiveInterface } from '@Utils/BaseStyles';
 import { transition, } from '@Utils/Mixins';
 import { Container } from '@Containers/FileUpload/StyledComponents';
+// eslint-disable-next-line import/no-cycle
+import {  LoyaltyPoints, LimitedTimeBanner, SaleTag } from '../../index';
 
 export interface MenuItemCardProps
     extends MainInterface, ResponsiveInterface, React.HTMLAttributes<HTMLDivElement> {
@@ -18,11 +20,13 @@ export interface MenuItemCardProps
     soldOut?: boolean;
     loyaltyPointsToggle?: boolean;
     limitedTimeBannerToggle?: boolean,
-    saleTagToggle?: boolean,  
-    ItemImage: string, 
-    ItemName: string,
-    ItemPrice: number,
-    saleTagAmount: number, 
+    saleTagToggle?: boolean,
+    loyaltyAmount: number,
+    saleTagAmount: number,
+    hoursRemaining: number,   
+    itemImage: string, 
+    itemName: string,
+    itemPrice: number,
 }
 
 export const ItemCard: React.FC<MenuItemCardProps> = ({
@@ -31,11 +35,7 @@ export const ItemCard: React.FC<MenuItemCardProps> = ({
 }): React.ReactElement => <MenuItemCardBox {...props}>{children}</MenuItemCardBox>;
 
 // To do: disable toggles + clickable when enabling sold out state
-// To do: fix argument values from composite components (declared in menuitemcard stories but doesn't update, how do you pass them properly?)
 export const MenuItemCard: React.FC<MenuItemCardProps> = ({
-    LoyaltyPoints,
-    LimitedTimeBanner,
-    SaleTag, 
     animated,
     flat,
     widthFitContent,
@@ -45,35 +45,51 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     loyaltyPointsToggle,
     limitedTimeBannerToggle,
     saleTagToggle, 
-    ItemImage, 
-    ItemName,
-    ItemPrice,
-    saleTagAmount, 
+    itemImage, 
+    itemName,
+    itemPrice,
+    saleTagAmount,
+    loyaltyAmount, 
+    hoursRemaining, 
     ...props
 }): React.ReactElement => (
         
-    <ItemCard {...props} ItemImage={ItemImage} ItemName={ItemName} ItemPrice={ItemPrice} animated={animated} 
-        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} LoyaltyPoints = {LoyaltyPoints} saleTagAmount = {saleTagAmount}
-        loyaltyPointsToggle={loyaltyPointsToggle} LimitedTimeBanner = {LimitedTimeBanner} SaleTag = {SaleTag} saleTagToggle = {saleTagToggle}
+    <ItemCard {...props} itemImage={itemImage} itemName={itemName} itemPrice={itemPrice} animated={animated} 
+        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} saleTagAmount = {saleTagAmount}
+        loyaltyPointsToggle={loyaltyPointsToggle} saleTagToggle = {saleTagToggle} loyaltyAmount = {loyaltyAmount} hoursRemaining = {hoursRemaining}
         limitedTimeBannerToggle={limitedTimeBannerToggle} heightFitContent = {heightFitContent}> 
         
-        <img src={ItemImage} alt={ItemName} style={{ width: 350, height: 200 }}/>
-        <ItemHeader>{ItemName}</ItemHeader>
+        <img src={itemImage} alt={itemName} style={{ width: 350, height: 200 }}/>
+        <ItemHeader>{itemName}</ItemHeader>
         { soldOut && <Container><SoldOutBox>Sold Out</SoldOutBox></Container> }
-        { limitedTimeBannerToggle && <Container><LimitedTimeBannerPosition>{LimitedTimeBanner}</LimitedTimeBannerPosition></Container> }
 
-        { loyaltyPointsToggle && <Container><LoyaltyPointsPosition>{LoyaltyPoints}</LoyaltyPointsPosition></Container> }
-        { saleTagToggle && <Container><SaleTagPosition>{SaleTag}</SaleTagPosition></Container>} 
+        { limitedTimeBannerToggle && <Container>
+            <LimitedTimeBannerPosition> <LimitedTimeBanner hoursRemaining={hoursRemaining}/></LimitedTimeBannerPosition> 
+        </Container> }
 
+        { loyaltyPointsToggle && <Container>
+            <LoyaltyPointsPosition> <LoyaltyPoints loyaltyAmount={loyaltyAmount}/></LoyaltyPointsPosition>
+        </Container> }
+
+        { saleTagToggle && <Container>
+            <SaleTagPosition><SaleTag saleTagAmount={saleTagAmount}/></SaleTagPosition>
+        </Container> } 
 
         { sale? 
             <>
-                <SalePropsSlash>{ItemPrice}</SalePropsSlash>
-                <OnSale>{ItemPrice - saleTagAmount}</OnSale>
+                <SalePropsSlash>{itemPrice}</SalePropsSlash>
+                <OnSale>{itemPrice - saleTagAmount}</OnSale>
             </>
-            :
-            <SaleProps>{ItemPrice}</SaleProps>
+            : [
+                itemPrice >= 1000 ? 
+                    <> 
+                        <SaleProps1k>{(Math.round(itemPrice * .1) / .1) / 1000}K</SaleProps1k>
+                    </> 
+                    : 
+                    <SaleProps>{itemPrice}</SaleProps>
+            ]
         }
+        
     </ItemCard> 
 );
 
@@ -83,6 +99,7 @@ const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & Responsiv
     width: 350px;
     height: 350px; 
     z-index: 1; 
+    cursor: pointer; 
     
     ${({ theme, ...props }): string => `
     border-radius: ${theme.dimensions.radius};
@@ -128,7 +145,8 @@ const SoldOutBox = styled.div`
 const ItemHeader = styled.header`
     font-weight: bold;
     padding-left: 10px;
-    padding-right: 80px;
+    padding-bottom: 10px; 
+    padding-right: 100px;
     font-size: 40px;  
 `
 const SaleProps = styled.header`  
@@ -137,14 +155,19 @@ const SaleProps = styled.header`
     font-size: 30px; 
     text-align: right; 
     right: 10px;
-    bottom: 20px;
+    top: 300px;
 `
 const SalePropsSlash = styled(SaleProps)`
     text-decoration: line-through;
     font-size: 25px;
     opacity: .6; 
-    bottom: 100px; 
+    top: 230px; 
 `
+const SaleProps1k = styled(SaleProps)`
+    color: green;
+    font-size: 35px;
+`
+
 const OnSale = styled.header`
     position: absolute;
     font-size: 40px;
@@ -153,13 +176,7 @@ const OnSale = styled.header`
     color: #EE2434; 
     padding-right: 10px;
     right: 10px;
-    bottom: 20px; 
-`
-const TagsPosition = styled.div`
-    position: absolute;
-    top: 30px; 
-    display: flex; 
-    justify-content: space-between; 
+    top: 300px; 
 `
 const LoyaltyPointsPosition = styled.div`
     position: absolute;
@@ -173,5 +190,5 @@ const SaleTagPosition = styled.div`
 
 const LimitedTimeBannerPosition = styled.div`
     position: absolute;
-    bottom: 150px; 
+    top: 135px; 
 `
\ No newline at end of file
diff --git a/src/Containers/SaleTag/SaleTag.stories.tsx b/src/Containers/SaleTag/SaleTag.stories.tsx
index eee7e4e4..8086406b 100644
--- a/src/Containers/SaleTag/SaleTag.stories.tsx
+++ b/src/Containers/SaleTag/SaleTag.stories.tsx
@@ -7,7 +7,7 @@ export default {
     title: createStoryTitle('SaleTag'),
     component: SaleTag,
     args: {
-        saleAmount: 2,
+        saleTagAmount: 2,
     },
 } as Meta;
 
diff --git a/src/Containers/SaleTag/SaleTag.tsx b/src/Containers/SaleTag/SaleTag.tsx
index 67665593..e3eedcdd 100644
--- a/src/Containers/SaleTag/SaleTag.tsx
+++ b/src/Containers/SaleTag/SaleTag.tsx
@@ -2,20 +2,20 @@ import React from 'react';
 import styled from 'styled-components';
 
 export interface SaleTagProps extends React.HTMLAttributes<HTMLSpanElement> {
-    saleAmount: number;
+    saleTagAmount: number;
 }
 
 export const SaleTag: React.FC<SaleTagProps> = ({
-    saleAmount = 2,
+    saleTagAmount,
     ...props
 }): React.ReactElement => (
-    <SaleTagDiv {...props} saleAmount={saleAmount}>
-        {saleAmount}$ off
+    <SaleTagDiv {...props} saleTagAmount={saleTagAmount}>
+        {saleTagAmount}$ off
     </SaleTagDiv>
 );
 
 const SaleTagDiv = styled.span<SaleTagProps>`
-    ${({theme, ...props}):string => `
+    ${({theme}):string => `
         border-radius: 100px;
         width: 100px;
         height: 40px;

From 6968e20ffc3da0486b3e823d2b71f133d548c67d Mon Sep 17 00:00:00 2001
From: Mackenzie Nisbet <91333450+mfnisbetLU@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:04:39 -0500
Subject: [PATCH 06/13] Delete LimitedTimeBanner.stories.tsx

---
 .../LimitedTimeBanner.stories.tsx                | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx

diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
deleted file mode 100644
index d6cb5b02..00000000
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { LimitedTimeBanner,LimitedTimeBannerProps} from '../../index';
-import { createStoryTitle} from '../../Constants';
-
-export default {
-    title: createStoryTitle('LimitedTimeBanner'),
-    component: LimitedTimeBanner,
-    args: {
-        HoursRemaining: '2 Hours Remaining'
-    },
-} as Meta;
-
-export const Basic: Story<LimitedTimeBannerProps> = (args) => (
-    <LimitedTimeBanner {...args}/>
-);

From 92fb926d8e508bbebba26e6fb8cb095cde117df8 Mon Sep 17 00:00:00 2001
From: Mackenzie Nisbet <91333450+mfnisbetLU@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:04:49 -0500
Subject: [PATCH 07/13] Delete LimitedTimeBanner.tsx

---
 .../LimitedTimeBanner/LimitedTimeBanner.tsx   | 41 -------------------
 1 file changed, 41 deletions(-)
 delete mode 100644 src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx

diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
deleted file mode 100644
index eeff04f4..00000000
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {Clock} from '@styled-icons/bootstrap/Clock';
-import { MainInterface} from '@Utils/BaseStyles';
-
-export interface LimitedTimeBannerProps
-    extends MainInterface {
-        HoursRemaining: number,
-}
-
-export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
-    HoursRemaining,...props
-}): React.ReactElement => (
-    <BannerBox {...props}>
-        <Icon />
-        <p>{HoursRemaining} Hours Remaining</p>
-    </BannerBox>
-) ;
-
-const BannerBox = styled.div`
-    // Theme Stuff
-    ${({theme}):string => `
-    font-family: ${theme.font.family};
-    color: ${theme.colors.background}};
-    `}
-    background-color: rgba(0,0,0,0.5);
-    font-size: 25px;
-    text-align: center;
-    width: 350px;
-    height: 40px; 
-`;
-
-const Icon = styled(Clock)`
-    width: 25px;
-    float: left;
-    padding-top:5px;
-    padding-bottom:5px;
-    padding-left: 5px;
-`;
-
-export default LimitedTimeBanner;
\ No newline at end of file

From 2d4a1ac5d3caa2524d4ad92e62168acbd5bfeff8 Mon Sep 17 00:00:00 2001
From: Mackenzie Nisbet <91333450+mfnisbetLU@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:04:56 -0500
Subject: [PATCH 08/13] Delete LoyaltyPoints.stories.tsx

---
 .../LoyaltyPoints/LoyaltyPoints.stories.tsx   | 20 -------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx

diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
deleted file mode 100644
index e5c3077a..00000000
--- a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'; 
-import { Meta, Story } from '@storybook/react';
-import { LoyaltyPointsProps, LoyaltyPoints } from "../../index";
-import { createStoryTitle } from '../../Constants';
-
-export default {
-  
-    title: createStoryTitle('LoyaltyPoints'),
-    component: LoyaltyPoints,
-    args:{
-        amount: '+10★'
-    }
-}as Meta;
-
-
-export const Basic: Story<LoyaltyPointsProps> = (args) => (
-    <LoyaltyPoints {...args}/> 
-)
-
-// todo switch star from text to icon using styled-icons import
\ No newline at end of file

From 8cc63c9786cd93f5937fc97ac74e728b3e9f12e4 Mon Sep 17 00:00:00 2001
From: Mackenzie Nisbet <91333450+mfnisbetLU@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:05:23 -0500
Subject: [PATCH 09/13] Delete SaleTag.stories.tsx

---
 src/Containers/SaleTag/SaleTag.stories.tsx | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 src/Containers/SaleTag/SaleTag.stories.tsx

diff --git a/src/Containers/SaleTag/SaleTag.stories.tsx b/src/Containers/SaleTag/SaleTag.stories.tsx
deleted file mode 100644
index eee7e4e4..00000000
--- a/src/Containers/SaleTag/SaleTag.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { SaleTag, SaleTagProps } from '../../index';
-import { createStoryTitle } from '../../Constants';
-
-export default {
-    title: createStoryTitle('SaleTag'),
-    component: SaleTag,
-    args: {
-        saleAmount: 2,
-    },
-} as Meta;
-
-export const Basic: Story<SaleTagProps> = (args) => (
-    <SaleTag {...args}/>
-);
\ No newline at end of file

From 0ac735a06f9c75e63b1649e4456fcba2ececcf3f Mon Sep 17 00:00:00 2001
From: Mackenzie Nisbet <91333450+mfnisbetLU@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:06:23 -0500
Subject: [PATCH 10/13] Delete LoyaltyPoints.tsx

---
 .../LoyaltyPoints/LoyaltyPoints.tsx           | 31 -------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 src/Containers/LoyaltyPoints/LoyaltyPoints.tsx

diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
deleted file mode 100644
index b609e3ca..00000000
--- a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'; 
-import styled from 'styled-components';
-import { MainInterface } from '@Utils/BaseStyles'
-
-export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
-    amount, ...props
-}):React.ReactElement => <LoyaltyPointsBox {...props}><p>{amount}</p></LoyaltyPointsBox>;
-
-export interface LoyaltyPointsProps
-    extends MainInterface{
-            amount: string;
-        }
-
-const LoyaltyPointsBox = styled.div`
-
-    ${({theme}):string => `
-        font-family: ${theme.font.family};
-        font-size: 20px;
-        width: 60px;
-        height: 30px;
-        padding: 5px -10px;
-        border-radius:50px;
-        border-bottom-left-radius: 0px;
-        border-top-left-radius: 0px;
-        background-color: ${theme.colors.background};
-        text-align: center;
-        color: ${theme.colors.loyaltyText};
-        
-    `}
-
-`
\ No newline at end of file

From 276f6d882a155fb103e92a1d118ad127dda031f5 Mon Sep 17 00:00:00 2001
From: Mackenzie Nisbet <91333450+mfnisbetLU@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:06:41 -0500
Subject: [PATCH 11/13] Delete SaleTag.tsx

---
 src/Containers/SaleTag/SaleTag.tsx | 37 ------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 src/Containers/SaleTag/SaleTag.tsx

diff --git a/src/Containers/SaleTag/SaleTag.tsx b/src/Containers/SaleTag/SaleTag.tsx
deleted file mode 100644
index 67665593..00000000
--- a/src/Containers/SaleTag/SaleTag.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export interface SaleTagProps extends React.HTMLAttributes<HTMLSpanElement> {
-    saleAmount: number;
-}
-
-export const SaleTag: React.FC<SaleTagProps> = ({
-    saleAmount = 2,
-    ...props
-}): React.ReactElement => (
-    <SaleTagDiv {...props} saleAmount={saleAmount}>
-        {saleAmount}$ off
-    </SaleTagDiv>
-);
-
-const SaleTagDiv = styled.span<SaleTagProps>`
-    ${({theme, ...props}):string => `
-        border-radius: 100px;
-        width: 100px;
-        height: 40px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-top: 3px;
-        padding-bottom: 3px;
-        border-style: solid;
-        border-width: 1px;
-        font-size: 15px;
-        
-        background-color: ${theme.colors.background};
-        color: ${theme.colors.primary};
-        border-color: ${theme.colors.border};
-        font-family: ${theme.font.family};
-        font-weight: bolder;
-        text-align: center;
-    `}
-`;
\ No newline at end of file

From b9d59e3e73daa0cc6f8e966ea23ea6416b2dacc4 Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Tue, 9 Nov 2021 17:12:38 -0500
Subject: [PATCH 12/13] Revised draft of Menu Item Card using variable names
 from related components

---
 .../MenuItemCard/MenuItemCard.stories.tsx     |  43 +++---
 src/Containers/MenuItemCard/MenuItemCard.tsx  | 123 +++++++++---------
 src/Themes/MainTheme.ts                       |   4 +
 3 files changed, 83 insertions(+), 87 deletions(-)

diff --git a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
index d55ca333..080a59f5 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.stories.tsx
@@ -18,14 +18,13 @@ MenuItemCardBasic.args = {
     itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
     itemName: 'Blackberry Pancakes',
     itemPrice: 15.99,
-    saleTagAmount: 5,
-    loyaltyAmount: 20, 
-    hoursRemaining: 2, 
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyamount: 20, 
+    loyaltypointlimit: 100,
+    minsRemaining: 120, 
     sale: false,
     soldOut: false,
-    loyaltyPointsToggle: true, 
-    limitedTimeBannerToggle: true,
-    saleTagToggle: true, 
     widthFitContent: false,
     heightFitContent: false,
     animated: true,
@@ -36,34 +35,32 @@ export const MenuItemCardStates = Template.bind({});
 MenuItemCardStates.args = {
     itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
     itemName: 'Blackberry Pancakes',
-    itemPrice: 14.99,
-    saleTagAmount: 5,
-    loyaltyAmount: 10, 
-    hoursRemaining: 2,  
+    itemPrice: 15.99,
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyamount: 0,
+    loyaltypointlimit: 100, 
+    minsRemaining: 0,  
     sale: true,
     soldOut: true,
-    loyaltyPointsToggle: false, 
-    limitedTimeBannerToggle: false,
-    saleTagToggle: false, 
     widthFitContent: false,
-    heightFitContent: false,
-    animated: true,
+    heightFitContent: true,
+    animated: false,
     flat: false,
 };
 
 export const MenuItemCardLongText = Template.bind({});
 MenuItemCardLongText.args = {
     itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg', 
-    itemName: 'Super crazy long combo special order with extra sides and drinks',
-    itemPrice: 999.99,
-    saleTagAmount: 5, 
-    loyaltyAmount: 10, 
-    hoursRemaining: 2, 
+    itemName: 'Super crazy long combo special order with extra sides and drinks blackberry pancakes',
+    itemPrice: 2560,
+    itemPriceLimit: 1000, 
+    saleAmount: 200, 
+    loyaltyamount: 150, 
+    loyaltypointlimit: 100,
+    minsRemaining: 24000, 
     sale: false,
     soldOut: false,
-    loyaltyPointsToggle: true, 
-    limitedTimeBannerToggle: true,
-    saleTagToggle: true, 
     widthFitContent: false,
     heightFitContent: true,
     animated: true,
diff --git a/src/Containers/MenuItemCard/MenuItemCard.tsx b/src/Containers/MenuItemCard/MenuItemCard.tsx
index 34742b62..3881b460 100644
--- a/src/Containers/MenuItemCard/MenuItemCard.tsx
+++ b/src/Containers/MenuItemCard/MenuItemCard.tsx
@@ -1,32 +1,29 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Main, MainInterface, Responsive, ResponsiveInterface } from '@Utils/BaseStyles';
-import { transition, } from '@Utils/Mixins';
-import { Container } from '@Containers/FileUpload/StyledComponents';
+import { transition } from '@Utils/Mixins';
 // eslint-disable-next-line import/no-cycle
-import {  LoyaltyPoints, LimitedTimeBanner, SaleTag } from '../../index';
+import { LoyaltyPoints, LimitedTimeBanner, SaleTag } from '../../index';
 
 export interface MenuItemCardProps
     extends MainInterface, ResponsiveInterface, React.HTMLAttributes<HTMLDivElement> {
-
     LoyaltyPoints?: React.ReactElement;  
     LimitedTimeBanner?: React.ReactElement;  
     SaleTag?: React.ReactElement;  
+    itemImage: string, // Image for the Menu Item Card, hosted on any server and converted to 350px x 200px 
+    itemName: string, // Item name, heightFitContent adjusts the item card size to fit any text (keeping min size of 350px)
+    itemPrice: number, // Price of the item, will be adjusted by saleAmount and will reduce + round if above 1000
+    itemPriceLimit: number, // Limit before item price is divided by 1000, should be greater than 1000
     animated?: boolean;
     flat?: boolean;
     widthFitContent?: boolean;
     heightFitContent?: boolean; 
     sale?: boolean;
     soldOut?: boolean;
-    loyaltyPointsToggle?: boolean;
-    limitedTimeBannerToggle?: boolean,
-    saleTagToggle?: boolean,
-    loyaltyAmount: number,
-    saleTagAmount: number,
-    hoursRemaining: number,   
-    itemImage: string, 
-    itemName: string,
-    itemPrice: number,
+    loyaltyamount: number,
+    loyaltypointlimit: number,
+    saleAmount: number,
+    minsRemaining: number,   
 }
 
 export const ItemCard: React.FC<MenuItemCardProps> = ({
@@ -34,7 +31,6 @@ export const ItemCard: React.FC<MenuItemCardProps> = ({
     ...props
 }): React.ReactElement => <MenuItemCardBox {...props}>{children}</MenuItemCardBox>;
 
-// To do: disable toggles + clickable when enabling sold out state
 export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     animated,
     flat,
@@ -42,74 +38,73 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     heightFitContent,
     sale,
     soldOut,
-    loyaltyPointsToggle,
-    limitedTimeBannerToggle,
-    saleTagToggle, 
     itemImage, 
     itemName,
     itemPrice,
-    saleTagAmount,
-    loyaltyAmount, 
-    hoursRemaining, 
+    itemPriceLimit,
+    saleAmount,
+    loyaltyamount,
+    loyaltypointlimit, 
+    minsRemaining, 
     ...props
-}): React.ReactElement => (
-        
+
+}): React.ReactElement => (  
     <ItemCard {...props} itemImage={itemImage} itemName={itemName} itemPrice={itemPrice} animated={animated} 
-        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} saleTagAmount = {saleTagAmount}
-        loyaltyPointsToggle={loyaltyPointsToggle} saleTagToggle = {saleTagToggle} loyaltyAmount = {loyaltyAmount} hoursRemaining = {hoursRemaining}
-        limitedTimeBannerToggle={limitedTimeBannerToggle} heightFitContent = {heightFitContent}> 
-        
+        flat={flat} widthFitContent={widthFitContent} sale={sale} soldOut={soldOut} saleAmount = {saleAmount} itemPriceLimit = {itemPriceLimit}
+        loyaltyamount = {loyaltyamount} minsRemaining = {minsRemaining} loyaltypointlimit = {loyaltypointlimit} heightFitContent = {heightFitContent}> 
+
         <img src={itemImage} alt={itemName} style={{ width: 350, height: 200 }}/>
         <ItemHeader>{itemName}</ItemHeader>
-        { soldOut && <Container><SoldOutBox>Sold Out</SoldOutBox></Container> }
-
-        { limitedTimeBannerToggle && <Container>
-            <LimitedTimeBannerPosition> <LimitedTimeBanner hoursRemaining={hoursRemaining}/></LimitedTimeBannerPosition> 
-        </Container> }
+        { soldOut && <SoldOutBox>Sold Out</SoldOutBox>}
 
-        { loyaltyPointsToggle && <Container>
-            <LoyaltyPointsPosition> <LoyaltyPoints loyaltyAmount={loyaltyAmount}/></LoyaltyPointsPosition>
-        </Container> }
+        { !!minsRemaining && 
+        <LimitedTimeBannerPosition> <LimitedTimeBanner minsRemaining={minsRemaining}/></LimitedTimeBannerPosition> } 
+    
+        { !!loyaltyamount && 
+        <LoyaltyPointsPosition> <LoyaltyPoints loyaltyamount={loyaltyamount} loyaltypointlimit = {loyaltypointlimit} /></LoyaltyPointsPosition> }
 
-        { saleTagToggle && <Container>
-            <SaleTagPosition><SaleTag saleTagAmount={saleTagAmount}/></SaleTagPosition>
-        </Container> } 
+        { !!saleAmount && 
+        <SaleTagPosition><SaleTag saleAmount={saleAmount}/></SaleTagPosition> }
 
-        { sale? 
-            <>
-                <SalePropsSlash>{itemPrice}</SalePropsSlash>
-                <OnSale>{itemPrice - saleTagAmount}</OnSale>
+        { sale
+            ? <>
+                <SalePropsSlash>${itemPrice}</SalePropsSlash>
+                <OnSale>${itemPrice - saleAmount}</OnSale>
             </>
-            : [
-                itemPrice >= 1000 ? 
-                    <> 
-                        <SaleProps1k>{(Math.round(itemPrice * .1) / .1) / 1000}K</SaleProps1k>
-                    </> 
-                    : 
-                    <SaleProps>{itemPrice}</SaleProps>
+            : [ itemPrice >= itemPriceLimit 
+                ? <> <SaleProps1k>${getItemValue(itemPrice, itemPriceLimit)}K</SaleProps1k> </> 
+                : <SaleProps>${itemPrice}</SaleProps> 
             ]
         }
-        
     </ItemCard> 
 );
+/**
+* Checks if the Item Price is greater than or equal to the item price limit 
+* Returns item price to the nearest tenth rounded
+* Also reduces the amount by 1000, the K is added in the component
+*/
+function getItemValue(itemPrice: number, itemPriceLimit: number){
+    if(itemPrice >= itemPriceLimit)
+        return ((Math.round(itemPrice * .1) / .1) / 1000) 
+    return itemPriceLimit };
 
 const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & ResponsiveInterface>`
     position: relative; 
-    background-color: white;
     width: 350px;
     height: 350px; 
+    min-height: 350px; 
     z-index: 1; 
-    cursor: pointer; 
+    cursor: pointer;
+    box-shadow: ${({ flat, theme }): string => theme.depth[flat ? 0 : 1]}; 
     
     ${({ theme, ...props }): string => `
     border-radius: ${theme.dimensions.radius};
-    font-family: ${theme.font.family};
+    font-family: ${theme.colors.background}};
+    background-color: white; 
     ${Main({
         ...props,
     })} `}
 
-    box-shadow: ${({ flat, theme }): string => theme.depth[flat ? 0 : 1]};
-
     ${({ animated, flat, theme }): string =>
         animated ? ` ${transition(['box-shadow'])} &:hover {
             box-shadow: ${theme.depth[flat ? 1 : 2]};
@@ -125,9 +120,7 @@ const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & Responsiv
     ${({ widthFitContent }): string => `${widthFitContent ? 'width:fit-content;' : ''} `}
     ${({ heightFitContent }): string => `${heightFitContent ? 'height:fit-content;' : ''} `}
 `;
-
 const SoldOutBox = styled.div`
-    // Theme Stuff
     ${({theme}):string => `
     font-family: ${theme.font.family};
     color: ${theme.colors.background}};
@@ -146,8 +139,8 @@ const ItemHeader = styled.header`
     font-weight: bold;
     padding-left: 10px;
     padding-bottom: 10px; 
-    padding-right: 100px;
-    font-size: 40px;  
+    padding-right: 120px;
+    font-size: 35px;  
 `
 const SaleProps = styled.header`  
     font-weight: bold; 
@@ -164,16 +157,19 @@ const SalePropsSlash = styled(SaleProps)`
     top: 230px; 
 `
 const SaleProps1k = styled(SaleProps)`
-    color: green;
     font-size: 35px;
+    ${({theme}):string => `
+    color: ${theme.colors.ItemCardSaleGreen};
+    `}
 `
-
 const OnSale = styled.header`
     position: absolute;
-    font-size: 40px;
+    font-size: 35px;
     text-align: right;
     font-weight: bold; 
-    color: #EE2434; 
+    ${({theme}):string => `
+    color: ${theme.colors.primary};
+    `}
     padding-right: 10px;
     right: 10px;
     top: 300px; 
@@ -187,8 +183,7 @@ const SaleTagPosition = styled.div`
     right: 10px;
     top: 53px;
 `
-
 const LimitedTimeBannerPosition = styled.div`
     position: absolute;
-    top: 135px; 
+    top: 160px; 
 `
\ No newline at end of file
diff --git a/src/Themes/MainTheme.ts b/src/Themes/MainTheme.ts
index 2b63234f..cfdf195d 100644
--- a/src/Themes/MainTheme.ts
+++ b/src/Themes/MainTheme.ts
@@ -5,6 +5,8 @@ export interface MainThemeInterface extends ThemeTemplateInterface {
         primary: string;
         text: string;
         loyaltyText: string;
+        bannerBackgroundColor: string;
+        ItemCardSaleGreen: string;  
         input: {
             default: string;
             success: string;
@@ -63,6 +65,8 @@ export const MainTheme: MainThemeInterface = {
         chairOccupiedBackground: '#EE2434',
         chairTableEditBackground: '#C4C4C4',
         loyaltyText: '#0000FF',
+        bannerBackgroundColor: 'rgba(0,0,0,0.5)',
+        ItemCardSaleGreen: '#04CC00', 
         PieChartColors: {
             Red: '#FF0000',
             Green: '#008000',

From 79f213e033ac4afb9a3de2d319f21d356a2bab5d Mon Sep 17 00:00:00 2001
From: MacAlmighty <mfnisbet@lakeheadu.ca>
Date: Tue, 9 Nov 2021 17:17:47 -0500
Subject: [PATCH 13/13] CEM-2514 Revised draft

Revised draft of the menu item card. Changes to formatting, added colors from themes, added a function, changed variable names to match with subcomponents.
---
 .gitignore                                    |  1 +
 .../LimitedTimeBanner.stories.tsx             |  2 +-
 .../LimitedTimeBanner/LimitedTimeBanner.tsx   | 54 ++++++++++++++-----
 .../LoyaltyPoints/LoyaltyPoints.stories.tsx   | 10 ++--
 .../LoyaltyPoints/LoyaltyPoints.tsx           | 46 ++++++++++------
 src/Containers/SaleTag/SaleTag.stories.tsx    |  2 +-
 src/Containers/SaleTag/SaleTag.tsx            | 21 ++++----
 src/Utils/positiveRounding.ts                 |  6 +++
 8 files changed, 92 insertions(+), 50 deletions(-)
 create mode 100644 src/Utils/positiveRounding.ts

diff --git a/.gitignore b/.gitignore
index 94dc8e4f..460313f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ src/Containers/QuestionMarkHover/QuestionMarkHover.tsx
 src/Containers/SelectList/SelectList.tsx
 src/Fragments/InputFragment.tsx
 src/Inputs/Button/Button.tsx
+
diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
index b9cec1b7..d25558c8 100644
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx
@@ -7,7 +7,7 @@ export default {
     title: createStoryTitle('LimitedTimeBanner'),
     component: LimitedTimeBanner,
     args: {
-        hoursRemaining: 2, 
+        minsRemaining: 120, 
     },
 } as Meta;
 
diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
index 76f57df1..da81da37 100644
--- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
+++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx
@@ -1,40 +1,66 @@
 import React from 'react';
 import styled from 'styled-components';
 import {Clock} from '@styled-icons/bootstrap/Clock';
-import { MainInterface} from '@Utils/BaseStyles';
+import {MainInterface} from '@Utils/BaseStyles';
+import moment from 'moment';
+
+const MINUTES_IN_YEAR = 524160;
 
 export interface LimitedTimeBannerProps
     extends MainInterface {
-        hoursRemaining: number,
-}
+        /* minutes until time runs out */ 
+        minsRemaining: number,
+    }
 
 export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
-    hoursRemaining,...props
+    minsRemaining,
+    ...props
 }): React.ReactElement => (
     <BannerBox {...props}>
         <Icon />
-        <p>{hoursRemaining} Hours Remaining</p>
+        <BannerHeader>
+            {alterTime(minsRemaining)} Remaining
+        </BannerHeader>
     </BannerBox>
-) ;
+);
+
+const BannerHeader = styled.header`
+text-align:center;
+line-height:40px;
+font-size:25px;
+text-transform: capitalize;
+`;
+
+/**
+* Turns an amount of time in minutes to Hours, Days, Months or a Year
+* Also checks if the time is to short (0 or less) or to long (more than a year) 
+* @param {number} value - The time remaining in minutes  
+* @returns {Strings} - The time remaining in a more concise and understandable form  
+*/
+const alterTime = (value:number)  => {
+    if(value <= 0){
+        return('No Time ')
+    }
+    if(value > MINUTES_IN_YEAR){
+        return('Over A Year ')
+    }
+    return(moment.duration(value,'minutes').humanize());
+}
 
 const BannerBox = styled.div`
     ${({theme}):string => `
     font-family: ${theme.font.family};
     color: ${theme.colors.background}};
+    background-color: ${theme.colors.bannerBackgroundColor};
     `}
-    background-color: rgba(0,0,0,0.5);
-    font-size: 25px;
-    text-align: center;
-    width: 350px;
-    height: 40px; 
+    width:350px;
+    height:40px;
 `;
 
 const Icon = styled(Clock)`
     width: 25px;
     float: left;
-    padding-top:5px;
-    padding-bottom:5px;
     padding-left: 5px;
+    height: 40px;
 `;
-
 export default LimitedTimeBanner;
\ No newline at end of file
diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
index 96b06a82..5d0fff79 100644
--- a/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
+++ b/src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx
@@ -5,16 +5,14 @@ import { createStoryTitle } from '../../Constants';
 
 export default {
   
-    title: createStoryTitle('LoyaltyPoints'),
+    title: createStoryTitle('LoyaltyPoints'),   
     component: LoyaltyPoints,
     args:{
-        loyaltyAmount: 10,  
+        loyaltyamount: 10,
+        loyaltypointlimit: 100,
     }
 }as Meta;
 
-
 export const Basic: Story<LoyaltyPointsProps> = (args) => (
     <LoyaltyPoints {...args}/> 
-)
-
-// todo switch star from text to icon using styled-icons import
\ No newline at end of file
+)
\ No newline at end of file
diff --git a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
index 1c896cef..e44e7cbb 100644
--- a/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
+++ b/src/Containers/LoyaltyPoints/LoyaltyPoints.tsx
@@ -1,31 +1,43 @@
 import React from 'react'; 
 import styled from 'styled-components';
-import { MainInterface } from '@Utils/BaseStyles'
-
-export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
-    loyaltyAmount, ...props
-}):React.ReactElement => <LoyaltyPointsBox {...props}><p>+{loyaltyAmount}✪</p></LoyaltyPointsBox>;
+import { Stars } from '@styled-icons/material/Stars';
 
 export interface LoyaltyPointsProps
-    extends MainInterface{
-        loyaltyAmount: number; 
+    extends React.HTMLAttributes<HTMLDivElement>{
+            loyaltyamount: number; // the amount of loyalty points that the user gets with purchase, used to display on component.
+            loyaltypointlimit: number; // the limit of loyalty points before it says 99+ instead.
         }
 
-const LoyaltyPointsBox = styled.div`
+export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
+    loyaltyamount,
+    loyaltypointlimit, 
+    ...props
+}):React.ReactElement => <LoyaltyPointsBox {...props}> 
+    <p>+{getLoyaltyPoints(loyaltyamount,loyaltypointlimit)}<Star /></p>   
+    
+</LoyaltyPointsBox>;
 
-    ${({theme}):string => `
+function getLoyaltyPoints(loyaltypoints: number,loyaltypointlimit: number){
+    if(loyaltypoints >= loyaltypointlimit){
+        return "99⁺";}
+    return Math.round(loyaltypoints);
+}
+
+const LoyaltyPointsBox = styled.div`
+    ${({theme,}):string => `
         font-family: ${theme.font.family};
         font-size: 20px;
-        width: 60px;
+        width: 70px;
         height: 30px;
-        padding: 5px -10px;
-        border-radius:50px;
-        border-bottom-left-radius: 0px;
-        border-top-left-radius: 0px;
+        white-space: wrap;
+        border-radius:0px 50px 50px 0px;
         background-color: ${theme.colors.background};
-        text-align: center;
         color: ${theme.colors.loyaltyText};
-        
+        vertical-allign: middle;
+        text-allign: center;
     `}
-
+`
+const Star = styled(Stars)`
+    width: 20px;
+    height: 20px;
 `
\ No newline at end of file
diff --git a/src/Containers/SaleTag/SaleTag.stories.tsx b/src/Containers/SaleTag/SaleTag.stories.tsx
index 8086406b..eee7e4e4 100644
--- a/src/Containers/SaleTag/SaleTag.stories.tsx
+++ b/src/Containers/SaleTag/SaleTag.stories.tsx
@@ -7,7 +7,7 @@ export default {
     title: createStoryTitle('SaleTag'),
     component: SaleTag,
     args: {
-        saleTagAmount: 2,
+        saleAmount: 2,
     },
 } as Meta;
 
diff --git a/src/Containers/SaleTag/SaleTag.tsx b/src/Containers/SaleTag/SaleTag.tsx
index e3eedcdd..7295829c 100644
--- a/src/Containers/SaleTag/SaleTag.tsx
+++ b/src/Containers/SaleTag/SaleTag.tsx
@@ -1,28 +1,27 @@
 import React from 'react';
 import styled from 'styled-components';
+import { positiveRounding } from '@Utils/positiveRounding';
 
-export interface SaleTagProps extends React.HTMLAttributes<HTMLSpanElement> {
-    saleTagAmount: number;
+export interface SaleTagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /* Amount to be displayed on SaleTag, the difference between a price and discounted price */
+    saleAmount: number;
 }
 
 export const SaleTag: React.FC<SaleTagProps> = ({
-    saleTagAmount,
+    saleAmount = 2,
     ...props
 }): React.ReactElement => (
-    <SaleTagDiv {...props} saleTagAmount={saleTagAmount}>
-        {saleTagAmount}$ off
+    <SaleTagDiv {...props}>
+        {positiveRounding(saleAmount)}$ off
     </SaleTagDiv>
 );
 
-const SaleTagDiv = styled.span<SaleTagProps>`
-    ${({theme}):string => `
+const SaleTagDiv = styled.span`
+    ${({theme, ...props}):string => `
         border-radius: 100px;
         width: 100px;
         height: 40px;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-top: 3px;
-        padding-bottom: 3px;
+        padding: 3px 10px;
         border-style: solid;
         border-width: 1px;
         font-size: 15px;
diff --git a/src/Utils/positiveRounding.ts b/src/Utils/positiveRounding.ts
new file mode 100644
index 00000000..9ca2b675
--- /dev/null
+++ b/src/Utils/positiveRounding.ts
@@ -0,0 +1,6 @@
+/**
+ * Rounds amount to the nearest positive integer above 0
+ * @param {number} amount - Number to round
+ * @returns {number} - Rounded amount above 0
+ */
+export const positiveRounding = (amount:number): number => (amount >= 1 ? Math.round(amount) : 1);
\ No newline at end of file