Mac-LU-CEM2514-Menu Item Card + Loyalty Points

src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx

@@ -7,7 +7,7 @@ export default {
     title: 'Components/LimitedTimeBanner',
     component: LimitedTimeBanner,
     args: {
-        minsRemaining: 120, 
+        minsRemaining: 120,
     },
 } as Meta;
 

src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx

@@ -8,18 +8,18 @@ const MINUTES_IN_YEAR = 524160;
 
 export interface LimitedTimeBannerProps
     extends MainInterface {
-        /* minutes until time runs out */ 
-        minsRemaining: number,
+    /* minutes until time runs out */ 
+    minsRemaining?: number,
     }
 
 export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
     minsRemaining,
     ...props
 }): React.ReactElement => (
-    <BannerBox {...props}>
+    <BannerBox minsRemaining={minsRemaining} {...props}>
         <Icon />
         <BannerHeader>
-            {alterTime(minsRemaining)} Remaining
+            {alterTime(minsRemaining!)} Remaining
         </BannerHeader>
     </BannerBox>
 );
@@ -47,14 +47,14 @@ const alterTime = (value:number)  => {
     return(moment.duration(value,'minutes').humanize());
 }
 
-const BannerBox = styled.div`
+const BannerBox = styled.div<LimitedTimeBannerProps>`
+    width: 300px;
+    height; 40px;
     ${({theme}):string => `
     font-family: ${theme.font.family};
     color: ${theme.colors.background}};
     background-color:  ${theme.colors.bannerBackgroundColor};
     `}
-    width:350px;
-    height:40px;
 `;
 
 const Icon = styled(Clock)`

src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { LoyaltyPointsProps, LoyaltyPoints } from '../../index';
+
+export default {
+
+    title: 'Components/LoyaltyPoints',
+    component: LoyaltyPoints,
+    args: {
+        loyaltyAmount: 10,
+        loyaltyPointLimit: 100,
+    }
+} as Meta;
+
+export const Basic: Story<LoyaltyPointsProps> = (args) => (
+    <LoyaltyPoints {...args} />
+)

src/Containers/LoyaltyPoints/LoyaltyPoints.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Stars } from '@styled-icons/material/Stars';
+
+export interface LoyaltyPointsProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    /* The amount of loyalty points displayed on the component */
+    loyaltyAmount: number;
+    /* Limit before loyalty amount displays only this number instead */
+    loyaltyPointLimit: number; 
+}
+
+export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
+    loyaltyAmount,
+    loyaltyPointLimit,
+    ...props
+}): React.ReactElement => <LoyaltyPointsBox {...props}>
+    <header>+{getLoyaltyPoints(loyaltyAmount, loyaltyPointLimit)}<Star /></header>
+    </LoyaltyPointsBox>;
+
+function getLoyaltyPoints(loyaltypoints: number, loyaltyPointLimit: number) {
+    if (loyaltypoints >= loyaltyPointLimit) {
+        return loyaltyPointLimit + "⁺";
+    }
+    return Math.round(loyaltypoints);
+}
+
+const LoyaltyPointsBox = styled.div`
+    ${({ theme }): string => `
+        font-family: ${theme.font.family};
+        font-size: 20px;
+        width: fit-content;
+        min-width: 60px;
+        height: 30px;
+        border-radius:0px 50px 50px 0px;
+        background-color: ${theme.colors.background};
+        color: ${theme.colors.loyaltyText};
+        text-align: center;
+    `}
+`
+const Star = styled(Stars)`
+    width: 20px;
+    height: 20px;
+`

src/Containers/MenuItemCard/MenuItemCard.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { MenuItemCard, MenuItemCardProps, LoyaltyPoints, LimitedTimeBanner, SaleTag } from '../../index';
+import { action } from "@storybook/addon-actions";
+
+export default {
+    title: 'Components/Menu Item Card',
+    component: MenuItemCard,
+    subcomponents: { LoyaltyPoints, LimitedTimeBanner, SaleTag },
+} as Meta;
+
+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: 15.99,
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyAmount: 0,
+    loyaltyPointLimit: 100,
+    minsRemaining: 0,
+    cardWasClicked: action("Card was clicked and not sold out!"),
+    sale: false,
+    soldOut: false,
+    animated: true,
+    flat: false,
+};
+
+export const MenuItemCardSale = Template.bind({});
+MenuItemCardSale.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,
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyAmount: 20,
+    loyaltyPointLimit: 100,
+    minsRemaining: 120,
+    cardWasClicked: action("Card was clicked and not sold out!"),
+    sale: true,
+    soldOut: false,
+    animated: true,
+    flat: false,
+};
+
+export const MenuItemCardSoldOut = Template.bind({});
+MenuItemCardSoldOut.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,
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyAmount: 0,
+    loyaltyPointLimit: 100,
+    minsRemaining: 0,
+    cardWasClicked: action("Card was clicked and not sold out!"),
+    sale: true,
+    soldOut: 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: 2560,
+    itemPriceLimit: 1000,
+    saleAmount: 200,
+    loyaltyAmount: 1500,
+    loyaltyPointLimit: 1200,
+    minsRemaining: 24000,
+    cardWasClicked: action("Card was clicked and not sold out!"),
+    sale: true,
+    soldOut: false,
+    animated: true,
+    flat: false,
+};
+
+export const MenuItemCardEmpty = Template.bind({});
+MenuItemCardEmpty.args = {
+    itemImage: '',
+    itemName: '',
+    itemPrice: 0,
+    itemPriceLimit: 1000,
+    saleAmount: 0,
+    loyaltyAmount: 0,
+    loyaltyPointLimit: 100,
+    minsRemaining: 0,
+    sale: false,
+    soldOut: false,
+    animated: false,
+    flat: false,
+};
+