From fe420baf3739ed751f3d883874fb1f43fafe1952 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Tue, 16 Nov 2021 23:35:02 -0800 Subject: [PATCH 1/5] Added new chair color css prop and interface --- .../AdvancedChair/AdvancedChair.stories.tsx | 16 +++ .../AdvancedChair/AdvancedChair.tsx | 120 ++++++++++++++++++ 2 files changed, 136 insertions(+) create mode 100644 src/Containers/AdvancedChair/AdvancedChair.stories.tsx create mode 100644 src/Containers/AdvancedChair/AdvancedChair.tsx diff --git a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx new file mode 100644 index 000000000..ccb5857f8 --- /dev/null +++ b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { AdvancedChair, IAdvancedChair } from './AdvancedChair'; +import { createStoryTitle } from '../../Constants'; + +export default { + title: createStoryTitle('AdvancedChair'), + component: AdvancedChair, +} as Meta; + +const Template: Story = (args) => ; + +export const VacantChair = Template.bind({}); +VacantChair.args = { + +}; diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx new file mode 100644 index 000000000..4847fa5c0 --- /dev/null +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import styled from "styled-components"; + +type Position = 'top' | 'bottom' | 'left' | 'right'; + +type tableUseTypes = + | 'AddTableButton' + | 'TableForEditCanvas' + | 'TableForManagement'; + +export interface IAdvancedChair extends React.HTMLAttributes { + position: Position; + isSeated: boolean; + occupiedBy: string; + isVisible: boolean; + relativeSize: number; + tableUse: tableUseTypes; + tableIndex: number; + chairIndex: number; + selectedIndex: number; + chairColor: string; + onChairClick: ( + parentTableIndex: number, + chairIndex: number, + selectedIndex: number, + ) => void; +} + +export const AdvancedChair: React.FC = ({ + position = 'top', + isSeated = false, + occupiedBy = '', + isVisible = true, + relativeSize = 1.0, + tableUse = 'TableForManagement', + tableIndex = -1, + chairIndex = -1, + selectedIndex = -1, + chairColor = '#6495ED', + onChairClick, + ...props +}) => { + return ( + + + + + + + + +) +} + +const ChairBody = styled.div` + color: ${({ theme }) => theme.colors.background}; + display: grid; + grid-template-columns: 7px 21px 4px; + grid-template-rows: 2px 3px 5px 12px 5px 3px 2px; + grid-template-areas: + "back . ." + "back seat ." + "back seat firstleg" + "back seat ." + "back seat secondleg" + "back seat ." + "back . ." +`; + +interface IBackOfChair { + chairColor: string; +} + +const BackOfChair = styled.div` + grid-area: back; + border-radius: 1px 3px 3px 1px; + ${({ chairColor }) => { + return` background: linear-gradient(to right, ${chairColor}, #adbcf9)`; + }} +`; + +interface IChairSeat { + chairColor: string; +} + +const ChairSeat = styled.div` + grid-area: seat; + border-radius: 0px 3px 3px 0px; + ${({ chairColor }) => { + return` background: linear-gradient(to right, ${chairColor}, #adbcf9)`; + }} +`; + +interface ITopChairLeg { + chairColor: string; +} + +const TopChairLeg = styled.div` + grid-area: firstleg; + border-radius: 0px 3px 3px 0px; + ${({ chairColor }) => { + return`background: ${chairColor}`; + }} +`; + +interface IBottomChairLeg { + chairColor: string; +} + +const BottomChairLeg = styled.div` + grid-area: secondleg; + border-radius: 0px 3px 3px 0px; + ${({ chairColor }) => { + return` background: ${chairColor}`; + }} +`; \ No newline at end of file From d726bb7d9f83d7ec5fc664937349767088effdc8 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Thu, 27 Jan 2022 17:22:28 -0800 Subject: [PATCH 2/5] added initials on top of chair and removed unused table props --- .../AdvancedChair/AdvancedChair.stories.tsx | 7 +- .../AdvancedChair/AdvancedChair.tsx | 121 +++++++++++------- 2 files changed, 82 insertions(+), 46 deletions(-) diff --git a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx index ccb5857f8..d2a7d1fd6 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import { AdvancedChair, IAdvancedChair } from './AdvancedChair'; import { createStoryTitle } from '../../Constants'; +import {action} from "@storybook/addon-actions"; export default { title: createStoryTitle('AdvancedChair'), @@ -12,5 +13,9 @@ const Template: Story = (args) => ; export const VacantChair = Template.bind({}); VacantChair.args = { - + position: 'right', + relativeSize: .05, + occupiedBy: 'JS', + onChairClick: action('The chair is clicked'), + TopChairLegProps: {onClick: () => console.log('hello'), style:{backgroundColor:"pink"}} }; diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx index 4847fa5c0..b3e79507a 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -1,61 +1,73 @@ import React from 'react'; -import styled from "styled-components"; +import styled, {css} from "styled-components"; type Position = 'top' | 'bottom' | 'left' | 'right'; -type tableUseTypes = - | 'AddTableButton' - | 'TableForEditCanvas' - | 'TableForManagement'; +type getChairTextType = () => JSX.Element; +// TODO: try to add initials on the chair export interface IAdvancedChair extends React.HTMLAttributes { position: Position; isSeated: boolean; occupiedBy: string; isVisible: boolean; relativeSize: number; - tableUse: tableUseTypes; - tableIndex: number; chairIndex: number; selectedIndex: number; chairColor: string; + secondaryChairColor: string; + TopChairLegProps: React.HTMLAttributes; onChairClick: ( - parentTableIndex: number, - chairIndex: number, - selectedIndex: number, ) => void; } - +// TODO: delete unused props export const AdvancedChair: React.FC = ({ position = 'top', isSeated = false, occupiedBy = '', isVisible = true, relativeSize = 1.0, - tableUse = 'TableForManagement', - tableIndex = -1, chairIndex = -1, selectedIndex = -1, chairColor = '#6495ED', + secondaryChairColor= '#adbcf9', onChairClick, + TopChairLegProps, ...props }) => { + const getChairText: getChairTextType = () => { + return( + + {occupiedBy} + + + ); + + }; return ( - + + chairColor = {chairColor} + secondaryChairColor = {secondaryChairColor}/> + chairColor = {chairColor} + secondaryChairColor = {secondaryChairColor} + > + {getChairText()} + + chairColor = {chairColor} + secondaryChairColor = {secondaryChairColor} + {...TopChairLegProps}/> + chairColor = {chairColor} + secondaryChairColor = {secondaryChairColor}/> ) } - +// style for the chair body const ChairBody = styled.div` color: ${({ theme }) => theme.colors.background}; display: grid; @@ -71,50 +83,69 @@ const ChairBody = styled.div` "back . ." `; -interface IBackOfChair { +// this interface is for the chair's color +interface IChairColorStyle{ chairColor: string; + secondaryChairColor: string; } -const BackOfChair = styled.div` +// styles for the chair's props +const BackOfChair = styled.div` grid-area: back; border-radius: 1px 3px 3px 1px; - ${({ chairColor }) => { - return` background: linear-gradient(to right, ${chairColor}, #adbcf9)`; - }} + ${({chairColor, secondaryChairColor}) => { + return `background: linear-gradient(to right, ${chairColor}, 50%, ${secondaryChairColor})`; + }}; `; -interface IChairSeat { - chairColor: string; -} - -const ChairSeat = styled.div` +const ChairSeat = styled.div` grid-area: seat; border-radius: 0px 3px 3px 0px; - ${({ chairColor }) => { - return` background: linear-gradient(to right, ${chairColor}, #adbcf9)`; + ${({chairColor, secondaryChairColor}) => { + return `background: linear-gradient(to right, ${chairColor}, 50%, ${secondaryChairColor})`; }} `; -interface ITopChairLeg { - chairColor: string; -} - -const TopChairLeg = styled.div` +const TopChairLeg = styled.div` grid-area: firstleg; border-radius: 0px 3px 3px 0px; - ${({ chairColor }) => { - return`background: ${chairColor}`; + ${({chairColor, secondaryChairColor}) => { + return `background: linear-gradient(to right, ${chairColor}, 10%, ${secondaryChairColor})`; }} `; -interface IBottomChairLeg { - chairColor: string; -} - -const BottomChairLeg = styled.div` +const BottomChairLeg = styled.div` grid-area: secondleg; border-radius: 0px 3px 3px 0px; - ${({ chairColor }) => { - return` background: ${chairColor}`; + ${({chairColor, secondaryChairColor}) => { + return `background: linear-gradient(to right, ${chairColor}, 10%, ${secondaryChairColor})`; }} +`; + + +// text styles for the chair +const textBaseStyle = css>` + ${({ relativeSize }) => { + const BASE_CHAIR_FONT_SIZE = 1.5; + return `font-size: ${BASE_CHAIR_FONT_SIZE * relativeSize}em;`; +}} + color: ${({ theme }) => theme.colors.background}; + font-weight: bold; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +`; + +const textChairStyle = css>` + ${textBaseStyle}; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +`; + +const AdvancedChairText = styled.div>` + ${textChairStyle}; `; \ No newline at end of file From b355884c345ff789be7247e5d5c3c4969fb235e7 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Thu, 27 Jan 2022 17:34:24 -0800 Subject: [PATCH 3/5] Removed TODO and included comments for the getChairText function --- src/Containers/AdvancedChair/AdvancedChair.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx index b3e79507a..248ad0686 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -5,7 +5,6 @@ type Position = 'top' | 'bottom' | 'left' | 'right'; type getChairTextType = () => JSX.Element; -// TODO: try to add initials on the chair export interface IAdvancedChair extends React.HTMLAttributes { position: Position; isSeated: boolean; @@ -20,7 +19,7 @@ export interface IAdvancedChair extends React.HTMLAttributes { onChairClick: ( ) => void; } -// TODO: delete unused props + export const AdvancedChair: React.FC = ({ position = 'top', isSeated = false, @@ -35,6 +34,9 @@ export const AdvancedChair: React.FC = ({ TopChairLegProps, ...props }) => { + /** + * Function to return a text string for occupiedBy + */ const getChairText: getChairTextType = () => { return( From 0e0648e7d8bcc8c34aed0525373b2fc8b6b98258 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Thu, 27 Jan 2022 19:48:22 -0800 Subject: [PATCH 4/5] Renamed TopChairLegProps to ChairLegProps and added ChairLegProps to both chair legs --- .../AdvancedChair/AdvancedChair.stories.tsx | 13 +++++++++++-- src/Containers/AdvancedChair/AdvancedChair.tsx | 11 +++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx index d2a7d1fd6..1e5b498dd 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx @@ -14,8 +14,17 @@ const Template: Story = (args) => ; export const VacantChair = Template.bind({}); VacantChair.args = { position: 'right', - relativeSize: .05, + relativeSize: 0.5, occupiedBy: 'JS', onChairClick: action('The chair is clicked'), - TopChairLegProps: {onClick: () => console.log('hello'), style:{backgroundColor:"pink"}} + ChairLegProps: {onClick: () => console.log('hello'), style:{backgroundColor:"pink"}} }; + +export const PersonalizedChair = Template.bind({}); +PersonalizedChair.args = { + position: 'right', + relativeSize: 0.5, + occupiedBy: 'YZ', + onChairClick: action('The chair is clicked'), + ChairLegProps: {onClick: () => console.log('hello'), style:{borderRadius: 0}} +}; \ No newline at end of file diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx index 248ad0686..060626d9b 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -15,7 +15,7 @@ export interface IAdvancedChair extends React.HTMLAttributes { selectedIndex: number; chairColor: string; secondaryChairColor: string; - TopChairLegProps: React.HTMLAttributes; + ChairLegProps: React.HTMLAttributes; onChairClick: ( ) => void; } @@ -31,7 +31,7 @@ export const AdvancedChair: React.FC = ({ chairColor = '#6495ED', secondaryChairColor= '#adbcf9', onChairClick, - TopChairLegProps, + ChairLegProps, ...props }) => { /** @@ -44,7 +44,6 @@ export const AdvancedChair: React.FC = ({ ); - }; return ( @@ -61,10 +60,11 @@ export const AdvancedChair: React.FC = ({ + {...ChairLegProps}/> + secondaryChairColor = {secondaryChairColor} + {...ChairLegProps}/> ) @@ -124,7 +124,6 @@ const BottomChairLeg = styled.div` }} `; - // text styles for the chair const textBaseStyle = css>` ${({ relativeSize }) => { From 045e502678612802fe7f754d8e96664b3bb78241 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Thu, 27 Jan 2022 20:29:50 -0800 Subject: [PATCH 5/5] Added back chair and seat props --- .../AdvancedChair/AdvancedChair.stories.tsx | 4 ++-- src/Containers/AdvancedChair/AdvancedChair.tsx | 18 ++++++++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx index 1e5b498dd..16d639dda 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx @@ -17,7 +17,7 @@ VacantChair.args = { relativeSize: 0.5, occupiedBy: 'JS', onChairClick: action('The chair is clicked'), - ChairLegProps: {onClick: () => console.log('hello'), style:{backgroundColor:"pink"}} + chairLegProps: {onClick: () => console.log('hello'), style:{backgroundColor:"pink"}} }; export const PersonalizedChair = Template.bind({}); @@ -26,5 +26,5 @@ PersonalizedChair.args = { relativeSize: 0.5, occupiedBy: 'YZ', onChairClick: action('The chair is clicked'), - ChairLegProps: {onClick: () => console.log('hello'), style:{borderRadius: 0}} + chairLegProps: {onClick: () => console.log('hello'), style:{borderRadius: 0}} }; \ No newline at end of file diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx index 060626d9b..452e2449d 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -15,7 +15,9 @@ export interface IAdvancedChair extends React.HTMLAttributes { selectedIndex: number; chairColor: string; secondaryChairColor: string; - ChairLegProps: React.HTMLAttributes; + backChairProp:React.HTMLAttributes; + chairSeatProp:React.HTMLAttributes; + chairLegProps: React.HTMLAttributes; onChairClick: ( ) => void; } @@ -31,7 +33,9 @@ export const AdvancedChair: React.FC = ({ chairColor = '#6495ED', secondaryChairColor= '#adbcf9', onChairClick, - ChairLegProps, + backChairProp, + chairSeatProp, + chairLegProps, ...props }) => { /** @@ -42,7 +46,6 @@ export const AdvancedChair: React.FC = ({ {occupiedBy} - ); }; return ( @@ -50,25 +53,28 @@ export const AdvancedChair: React.FC = ({ + secondaryChairColor = {secondaryChairColor} + {...backChairProp}/> {getChairText()} + {...chairLegProps}/> + {...chairLegProps}/> ) } + // style for the chair body const ChairBody = styled.div` color: ${({ theme }) => theme.colors.background};