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

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.

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

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

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