-
Notifications
You must be signed in to change notification settings - Fork 14
Mac-LU-CEM2514-Menu Item Card + Loyalty Points #429
base: master
Are you sure you want to change the base?
Conversation
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.
There was a problem hiding this 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, |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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} /> |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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.
@@ -52,15 +48,13 @@ const alterTime = (value:number) => { | |||
} | |||
|
|||
const BannerBox = styled.div<LimitedTimeBannerProps>` | |||
width: 300px; | |||
height; 40px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!' } }, |
There was a problem hiding this comment.
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?
There was a problem hiding this 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?
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