vincentrohde / steelcase-iot Goto Github PK

Style the CTAButton Component according to the given design for the Call2Action button.

As we have seen in the discussion on @nastasios PR, the icon appears super small once it is embedded somewhere. We need to make it flexible in its state, so we can decided the width in each component.

AC:

• Set AvatarIcon width to 100%, so it can be placed inside another container
• Correct the styling errors
• Use the Link component from react-router-dom like we did in the CTAButton component

QS:

• Test the component on different pages, using a container
• The icon size should be scalable.
• Test with the open PR( #24 ) from @nastasios .

We need some style/ structure for the Navigation component. Apply some flexbox properties.

We need a Component for the room lane. The design reference follows shortly after it's done.

This Component should load:

-Room-Component

For the background gradient-wave we need some reusable class that we can apply accross the project.

Try to implement it in the IntroPage Component.

AC:

• reusable class(ex. .wave-gradient)
• code is in index.scss
• uses the svg, as a background image

Download: wave.svg

We need some styling for the Dashboard and fixes in the structure.

AC:

• Build the Dashboard as in the design.
• Rename Rooms Component to Room.
• Build Rooms Component as Container for Room.
• Use the new Rooms Component inside the Lane.

This should be the presentation of the components:

We need a quick implementation of the CreateOrder/ UpdateOrder Page.

Implement a basic version of the given design.

Something about this is not right. Make it look like in the design.

AC:

• Fix the UserBoard Component
• Remove Room Component from UserBoard?

Something is not right here. Need to figure out how to prevent store reset on switching Routes/ Pages.

Maybe, it's related to the Provider being only wrapped around the parent, instead around the Router?

We need to be able to drag Chairs around inside the Grid component.

AC

• Chairs can be dragged around and placed(dropped) inside the Grid.

We need something like a first time force visit to our '/intro' route.

See this:
https://stackoverflow.com/questions/42875949/react-router-v4-redirect-not-working

We have to integrate ChairsStore in the regular Store. The current architecture is causing a memory leak on loading different routes.

AC:

• integrate chairs into Store.js
• remove deep-nested Provider

We need a Click Event Listener for the Order Components, that sends a WebSocket message(data) to the Pathfinder Team.

We need a page in the routes directory for the welcomepage. On the Page we need the following components. See below design reference.

Welcome page components:

• Headline
• Teasertext
• CTAButton

We need a Chair Component, that contains some basic grid information. In this ticket only create the Chair component, not the Grid Component.

AC:

• Pass props(x, y of Grid) to the Component
• Use CSS Grid + the props for the chairs position inside the Grid Component.
• Use the given Icon(see below) for the Chair component

Chair Icon

We want to be able, to dynamically generate Room Components inside the Rooms Component. You have to use the props(state=> rooms) from Lane to achieve this.

AC:

• Generate Room Components with a for loop(see logic in Grid Component)
• Use the rooms const from Lane as a prop for Rooms
• Display the room id in the Room template as your title

We need a component for the landing route('/').

Acceptance Criteria:

• Unique Route Component
• Components uses the '/' route

As discussed in the PR from @nastasios . We need to fix the AddButton, so it uses the SVG from the design.

AC:

• Use the SVG as a background image
• Remove the content inside the Component JSX
• Use the react-router-dom Link, like we did in the CTAButton

We need a component for the sideboard as seen in the image below.

Acceptance Criteria:

The Component should load three other components:

• User-card (Room, Time and AvatarIcon- component)
• OrderLane
• AddButton

We need a Component for LaneItemRoom. In this Component we need to see the number of the room and a svg in the background. Design reference follows shortly after.

Since we merged #24 just a while ago, unfortunately I just realised this issue.

The flexbox style used in the OrderLane component, is not good. You have to implement standards, to make it work without having to use css hacks. Margin hacks should disappear!

AC:

• Flex should work(without margin hacks)!
• OrderLane's class name => OrderLane
• remove the right class
• Flex Children should use flex properties
• Please review the component's style/structure and fix any issues that cross your path!

We need Animations for changing Pages.