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

src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx

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

src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx

@@ -9,14 +9,18 @@ const MINUTES_IN_YEAR = 524160;
 export interface LimitedTimeBannerProps
     extends MainInterface {
         /* minutes until time runs out */ 
-        minsRemaining: number,
+    minsRemaining: number,
+    bannerWidth?: number,
+    bannerHeight?: number,
     }
 
 export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
     minsRemaining,
+    bannerWidth,
+    bannerHeight,
     ...props
 }): React.ReactElement => (
-    <BannerBox {...props}>
+    <BannerBox minsRemaining={minsRemaining} bannerWidth={bannerWidth} bannerHeight={bannerHeight} {...props}>
         <Icon />
         <BannerHeader>
             {alterTime(minsRemaining)} Remaining
@@ -47,14 +51,16 @@ const alterTime = (value:number)  => {
     return(moment.duration(value,'minutes').humanize());
 }
 
-const BannerBox = styled.div`
+const BannerBox = styled.div<LimitedTimeBannerProps>`
     ${({theme}):string => `
     font-family: ${theme.font.family};
     color: ${theme.colors.background}};
     background-color:  ${theme.colors.bannerBackgroundColor};
     `}
-    width:350px;
-    height:40px;
+    ${({ bannerWidth, bannerHeight }): string => `
+    width: ${bannerWidth}px;
+    height: ${bannerHeight}px;
+    `}
 `;
 
 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,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Stars } from '@styled-icons/material/Stars';
+
+export interface LoyaltyPointsProps
+    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.
+}
+
+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,86 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { MenuItemCard, MenuItemCardProps, LoyaltyPoints, LimitedTimeBanner, SaleTag } from '../../index';
+
+export default {
+    title: 'Components/Menu Item Card',
+    component: MenuItemCard,
+    subcomponents: { LoyaltyPoints, LimitedTimeBanner, SaleTag },
+    argTypes: { onClick: { action: 'This card was clicked!' } },
+} 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: 20,
+    loyaltypointlimit: 100,
+    bannerWidth: 280,
+    bannerHeight: 40,
+    minsRemaining: 120,
+    sale: false,
+    soldOut: false,
+    animated: true,
+    flat: false,
+};
+
+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: 15.99,
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyamount: 0,
+    loyaltypointlimit: 100,
+    bannerWidth: 300,
+    bannerHeight: 40,
+    minsRemaining: 0,
+    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,
+    bannerWidth: 300,
+    bannerHeight: 40,
+    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,
+    bannerWidth: 300,
+    bannerHeight: 40,
+    sale: false,
+    soldOut: false,
+    animated: false,
+    flat: false,
+};
+