Skip to content
This repository has been archived by the owner on Feb 23, 2022. It is now read-only.

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

mfnisbetLU
Copy link
Member

New branch since the old one was on an old version of storybook and had other issues. Also added loyalty points since it was never merged to main. Made modifications to sale tag and limited time banner to make the dimensions adjustable and fit with my menu item card. Added new functions to get values of item image and prices. Changed HTML so sale tag and loyalty points are aligned.

2022-01-07.19-25-25.mp4

New branch since the old one was on an old version of storybook and had other issues. Added new functions to get values of item image and prices. Changed HTML so sale tag and loyalty points are aligned. Made modifications to SaleTag and limited time banner to make the dimensions adjustable and fit with my menu item card. Also added loyalty points since it was never merged to main.
@mfnisbetLU mfnisbetLU requested a review from ralph-dev January 8, 2022 00:44
@mfnisbetLU mfnisbetLU self-assigned this Jan 8, 2022
Copy link
Member

@ralph-dev ralph-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quite a bit of simple work needed.

@@ -9,14 +9,18 @@ const MINUTES_IN_YEAR = 524160;
export interface LimitedTimeBannerProps
extends MainInterface {
/* minutes until time runs out */
minsRemaining: number,
minsRemaining: number,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be optional

minsRemaining: number,
minsRemaining: number,
bannerWidth?: number,
bannerHeight?: number,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why can't these live in the props?


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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

camelCase

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/** docs */

argTypes: { onClick: { action: 'This card was clicked!' } },
} as Meta;

const Template: Story<MenuItemCardProps> = (args) => <MenuItemCard {...args}> <LoyaltyPoints {...args} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use round brackets only do this when it's one line not 3

*/
function getMenuItemStatus(sale: boolean, soldOut: boolean, itemPrice: number, itemPriceLimit: number, saleAmount: number) {

var itemSaleAmount;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No bars, use let

Fixed casing and documentation in the loyalty points tag. Removed banner width and height properties and made minutes remaining optional in the limited time banner. Changed 'var' to 'let' in menu item card functions. Added a new div with onClick that calls an action when not in the sold out state.
@mfnisbetLU mfnisbetLU requested a review from ralph-dev January 13, 2022 01:37
@@ -52,15 +48,13 @@ const alterTime = (value:number) => {
}

const BannerBox = styled.div<LimitedTimeBannerProps>`
width: 300px;
height; 40px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
height; 40px;
height: 40px;

typo


export default {
title: 'Components/Menu Item Card',
component: MenuItemCard,
subcomponents: { LoyaltyPoints, LimitedTimeBanner, SaleTag },
argTypes: { onClick: { action: 'This card was clicked!' } },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why remove the onclick handler?

Copy link
Member

@ralph-dev ralph-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Almost there, why remove the onClick Handler?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants