CEM-2546- PartySizeSelector

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",

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<IPartySizeSelector> = (args) => <PartySizeSelector {...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",
+};
+

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<HTMLDivElement>{
+    clientIndexes: Array<number>;
+    partyName: string,
+    onPersonClick: (index: number) => void,
+    person?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
+    personFill?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
+}
+
+
+export const PartySizeSelector: React.FC<IPartySizeSelector> = ({
+    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 (
+                <Icon as={person}/>
+            );
+        }else {
+            return (
+                <Icon as={personFill}/>
+            );
+        }
+    }
+    const onPersonClickFinal = (clientIndex: number) => {
+        setPartySize(clientIndex);
+        onPersonClick(clientIndex);
+    }
+
+    /*makes the columns of icons*/
+    const cols = clientIndexes.map((clientIndex) =>
+            <Col key={clientIndex.toString()}>
+                <IconButton onClick={() => onPersonClickFinal(clientIndex)}>
+
+                    {getIcon(clientIndex)}
+                </IconButton>
+                <IndexNum>{clientIndex}</IndexNum>
+            </Col>
+    );
+
+    return(
+        <Content {...props}>
+            <Title>{partyName}</Title>
+            <Scrolling>
+                <Row>
+                    {cols}
+                </Row>
+            </Scrolling>
+        </Content>
+    )
+};
+
+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;
+`;
+
+
+
+
+

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(
-            <CalendarDay
-                faded={start.getMonth() !== date.getMonth()}
+            <DayWrapper
                 onClick={selectDate}
+                faded={start.getMonth() !== date.getMonth()}
                 selected={sameDate(start, value)}
-                key={start.toDateString()}
-                data={start.toISOString()}
             >
-                {start.getDate()}
-            </CalendarDay>,
+                <CalendarDay
+                    key={start.toDateString()}
+                    data={start.toISOString()}
+                >
+                    {start.getDate()}
+                    <br/>
+                    <Price
+                        priceColor={priceStatus}
+
+                    >{'$'+price}</Price>
+                </CalendarDay>
+
+            </DayWrapper>,
         );
         start.setDate(start.getDate() + 1);
         if (start.getDay() === 0) {
@@ -70,16 +87,20 @@ export interface DateboxProps extends React.HTMLAttributes<HTMLDivElement> {
     animate: boolean;
     value: Date | undefined;
     clearDate?: Function;
+    price:Number;
+    priceStatus:PriceStatus;
 }
 
 export const Datebox: React.FC<DateboxProps> = ({
-    changePage,
-    clearDate = (): void => undefined,
-    selectedDate,
-    selectDate,
-    animate,
-    value,
-}): React.ReactElement => (
+                                                    changePage,
+                                                    clearDate = (): void => undefined,
+                                                    selectedDate,
+                                                    selectDate,
+                                                    animate,
+                                                    value,
+                                                    price,
+                                                    priceStatus,
+                                                }): React.ReactElement => (
     <DateBox animate={animate}>
         <DateControls>
             <Button onClick={changePage(-1)} icon={AngleLeft} />
@@ -99,6 +120,8 @@ export const Datebox: React.FC<DateboxProps> = ({
                 selectedDate || new Date(),
                 value || new Date(),
                 selectDate,
+                priceStatus,
+                price,
             )}
         </Calendar>
         <Button onClick={(): void => clearDate()}>Clear</Button>
@@ -108,72 +131,78 @@ export const Datebox: React.FC<DateboxProps> = ({
 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;' : '')}
+
 `;
+
+
+

src/Inputs/Datepicker/Datepicker.stories.tsx

@@ -12,6 +12,8 @@ export default {
         label: 'label',
         placeholder: 'Placeholder',
         description: 'Description',
+        price:25,
+        priceStatus:0,
     },
 } as Meta;