diff --git a/package.json b/package.json index bed40ed7..a42f6709 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cheapreats/react-ui", - "version": "2.4.38", + "version": "2.4.39", "description": "React UI library for CheaprEats", "main": "./dist/index.js", "module": "./dist/index.es.js", diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx new file mode 100644 index 00000000..39ceca3a --- /dev/null +++ b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import {Meta, Story} from "@storybook/react"; +import {IPartySizeSelector, PartySizeSelector} from "@Containers/PartySizeSelector/PartySizeSelector"; +import {createStoryTitle} from "../../Constants"; +import {action} from "@storybook/addon-actions"; + +export default { + title: createStoryTitle('PartySizeSelector'), + component: PartySizeSelector, +} as Meta; + +const Template: Story = (args) => ; + +export const PartySizeSelectorComponent = Template.bind({}); + +PartySizeSelectorComponent.args = { + onPersonClick: action("person was selected"), + clientIndexes: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25], + partyName: "duck party", +}; + diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.tsx new file mode 100644 index 00000000..1959b82d --- /dev/null +++ b/src/Containers/PartySizeSelector/PartySizeSelector.tsx @@ -0,0 +1,117 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import {Person} from '@styled-icons/bootstrap/Person' +import {PersonFill} from '@styled-icons/bootstrap/PersonFill' +import { Mixins } from '../../Utils'; + +export interface IPartySizeSelector extends React.HTMLAttributes{ + clientIndexes: Array; + partyName: string, + onPersonClick: (index: number) => void, + person?: React.ForwardRefExoticComponent>; + personFill?: React.ForwardRefExoticComponent>; +} + + +export const PartySizeSelector: React.FC = ({ + clientIndexes= [], + partyName= "", + onPersonClick, + person = Person, + personFill = PersonFill, + ...props +}) => { + + const [partySize, setPartySize] = useState(0); + + /**changes icons that have a smaller index then selected*/ + const getIcon = (clientIndex: number) =>{ + if(clientIndex > partySize) { + return ( + + ); + }else { + return ( + + ); + } + } + const onPersonClickFinal = (clientIndex: number) => { + setPartySize(clientIndex); + onPersonClick(clientIndex); + } + + /*makes the columns of icons*/ + const cols = clientIndexes.map((clientIndex) => + + onPersonClickFinal(clientIndex)}> + + {getIcon(clientIndex)} + + {clientIndex} + + ); + + return( + + {partyName} + + + {cols} + + + + ) +}; + +const Content = styled.div` +`; + +const Scrolling = styled.div` + ${Mixins.scroll} + overflow: auto; + &::-webkit-scrollbar { + background-color: transparent; + } + /*overflow-x: scroll; + overflow-y: hidden;*/ +`; + +const Icon = styled.svg` + fill: ${({theme}) => theme.colors.statusColors.orange}; + width: 35px; +`; + +const IconButton = styled.button` + background-color: ${({theme}) => theme.colors.background}; + border: none; + +`; + +const Title = styled.div` + fill: ${({theme}) => theme.colors.text}; + padding-bottom: 3px; + font-weight: bold; + font-size: 1.3rem; + margin-left: 13px; +`; + +const Col = styled.div` + margin-bottom: 6px; +`; + +const Row = styled.div` + display: inline-flex; +`; + +const IndexNum = styled.div` + fill: ${({theme}) => theme.colors.text}; + font-weight: bold; + display: flex; + justify-content: center; +`; + + + + + diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index d1e6fbef..c7b732e6 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -14,6 +14,12 @@ import { Button } from '../Button/Button'; const SIZE = 40; +export enum PriceStatus{ + Good, + Okay, + Surge +} + const displayDate = (date: Date = new Date()): string => `${MONTHS[date.getMonth()]}, ${date.getFullYear()}`; @@ -26,6 +32,8 @@ const buildCalendar = ( date: Date, value: Date, selectDate: React.MouseEventHandler, + priceStatus: PriceStatus, + price: Number, ): React.ReactElement[] => { const start = new Date(date); start.setDate(1); @@ -36,15 +44,24 @@ const buildCalendar = ( let exit = false; while (!exit) { row.push( - - {start.getDate()} - , + + {start.getDate()} +
+ {'$'+price} + + + , ); start.setDate(start.getDate() + 1); if (start.getDay() === 0) { @@ -70,16 +87,20 @@ export interface DateboxProps extends React.HTMLAttributes { animate: boolean; value: Date | undefined; clearDate?: Function; + price:Number; + priceStatus:PriceStatus; } export const Datebox: React.FC = ({ - changePage, - clearDate = (): void => undefined, - selectedDate, - selectDate, - animate, - value, -}): React.ReactElement => ( + changePage, + clearDate = (): void => undefined, + selectedDate, + selectDate, + animate, + value, + price, + priceStatus, + }): React.ReactElement => ( @@ -108,72 +131,78 @@ export const Datebox: React.FC = ({ const DateBox = styled.div<{ animate: boolean; }>` - ${position('absolute', 'auto', '100%', 'auto', 'auto')} - margin: 0 auto auto 0; - padding: 15px 10px 10px; - box-sizing: border-box; - background-color: white; - text-align: center; - font-size: 0.9rem; - z-index: 90; - - // Theme Stuff - ${({ theme }): string => ` + ${position('absolute', 'auto', '100%', 'auto', 'auto')} + margin: 0 auto auto 0; + padding: 15px 10px 10px; + box-sizing: border-box; + background-color: white; + text-align: center; + font-size: 0.9rem; + z-index: 90; + + // Theme Stuff + ${({ theme }): string => ` ${transition(['transform', 'opacity'])} border-radius: ${theme.dimensions.radius}; font-family: ${theme.font.family}; box-shadow: ${theme.depth[1]}; `} - ${({ animate }): string => - !animate - ? ` + ${({ animate }): string => + !animate + ? ` transform: translateY(-20px); opacity: 0; ` - : ''} + : ''} `; const DateControls = styled.div` - ${flex('center')} - padding-bottom: 8px; + ${flex('center')} + padding-bottom: 8px; `; + const DateDisplay = styled.span` - font-weight: bold; - font-size: 1.05rem; - margin: auto; + font-weight: bold; + font-size: 1.05rem; + margin: auto; `; const WeekDays = styled.ul` - ${flex()} - padding: 0; - margin: 0; - list-style-type: none; + ${flex()} + padding: 0; + margin: 0; + list-style-type: none; `; const WeekDay = styled.li` - font-weight: bold; - padding: 5px 0; - width: ${SIZE}px; + font-weight: bold; + padding: 5px 0; + width: ${SIZE}px; `; const Calendar = styled.ul` - ${flex('column')} - list-style-type: none; - flex-wrap: wrap; - padding: 0; - margin: 0; + ${flex('column')} + list-style-type: none; + flex-wrap: wrap; + padding: 0; + margin: 0; `; const CalendarWeek = styled.li` - ${flex()} + ${flex()} `; const CalendarDay = styled.span<{ + data: string; +}>` + +`; + +const DayWrapper = styled.div<{ faded: boolean; selected: boolean; - data: string; }>` ${transition(['background-color', 'color'])} ${flex('center')} @@ -184,13 +213,25 @@ const CalendarDay = styled.span<{ ${({ faded }): string => (faded ? 'opacity: 0.3;' : '')} ${({ selected, theme }): string => - styledCondition( - selected, - ` + styledCondition( + selected, + ` background-color: ${theme.colors.primary}; cursor: pointer; color: white; `, - clickable('#ffffff', 0.05), - )} + clickable('#ffffff', 0.05), + )} +`; + +const Price = styled.div<{ + priceColor: PriceStatus; +}>` + ${({ priceColor }): string => (priceColor == 0 ? 'color: green;' : '')} + ${({ priceColor }): string => (priceColor == 1 ? 'color: yellow;' : '')} + ${({ priceColor }): string => (priceColor == 2 ? 'color: red;' : '')} + `; + + + diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index 120ceed3..54de6fcf 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -12,6 +12,8 @@ export default { label: 'label', placeholder: 'Placeholder', description: 'Description', + price:25, + priceStatus:0, }, } as Meta; diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index 6a05f9a6..c4da0ab6 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -14,7 +14,7 @@ import { LabelLayout as LL, LabelLayoutProps, } from '../../Fragments'; -import { Datebox } from './Datebox'; +import {Datebox, PriceStatus} from './Datebox'; const printDate = (date?: Date): string => { if (date) { @@ -33,6 +33,8 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; + price:Number; + priceStatus:PriceStatus; } export const Datepicker: React.FC = ({ @@ -41,6 +43,8 @@ export const Datepicker: React.FC = ({ onClear = (): void => undefined, placeholder = 'MM-DD-YYYY', initialShow, + price, + priceStatus, ...props }): React.ReactElement => { const theme = useTheme(); @@ -161,6 +165,8 @@ export const Datepicker: React.FC = ({ animate={animate} value={value} clearDate={clearDate} + price={price} + priceStatus={priceStatus} /> )}