Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pax components and styles #49

Merged
merged 10 commits into from
Nov 20, 2024
Merged

Pax components and styles #49

merged 10 commits into from
Nov 20, 2024

Conversation

jacksonhyde
Copy link
Collaborator

@jacksonhyde jacksonhyde commented Nov 19, 2024

Tickets:

New Components:

  • PaxCard - the '5 to 10 mins' cards on the arrivals page
  • PaxDataSourceIcon - status icons for pax datasources
  • PaxHighlight - correctly coloured highlighted text for pax datasources
  • Highlight - generic highlight component
  • InfoTooltip - generic i tooltip

New Stories & Styles:

  • PaxFormLayout - example layout of the Pax form using default material components
  • Material Table - styled to match arrivals table
  • ToggleButton + ToggleButtonGroup - primary colour styles updated to match pax form designs
  • Correctly sets error, warning, info and success theme colours

Bits & Bobs:

  • Adds @mui-x/datepickers as a (peer) dependency
  • Tidies up Storybook taxonomy
  • See PaxSearchForm.stories.tsx for example of how to provide custom controls to our stories!
  • Proposes 1.6.0 release 💥

@jacksonhyde jacksonhyde force-pushed the arrival-table-components branch 2 times, most recently from a1f0403 to daba6fc Compare November 19, 2024 16:54
@jacksonhyde jacksonhyde force-pushed the arrival-table-components branch from daba6fc to ca91e49 Compare November 19, 2024 16:58
Copy link
Contributor

@richbirch richbirch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work mate:

  • We need to un-hardcode the queues in the pax component so we can pass different queues for different ports
  • A bunch of lets can be consts


export const PaxDatasource = ({status}: IPaxDatasource) => {

let content = getPaxContent(status);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const


export const PaxHighlight = ({status}: IPaxHighlight) => {

let content = getPaxContent(status);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const


export const getPaxContent = (status: DatasourceStatus) : PaxStatusContent => {

let content: PaxStatusContent = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const here even though its members are assigned later

return `${datetime.getHours()}:${datetime.getMinutes()}`
}

export const PaxCard = ({EEA = 0, nonEEA = 0, eGates = 0, timeRange, startTime, endTime}: IPaxCard) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to pass an array of queue types with counts because each port can have a different set of queues

src/drt-theme.ts Outdated
@@ -42,13 +43,46 @@ declare module "@mui/material/Typography" {
}
}

let defaultValues = createTheme();
let defaultValues = createTheme({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const

src/drt-theme.ts Outdated
},
}
});

let drtTheme = createTheme({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const

Comment on lines 8 to 9
title: "DRT Components/MUI Components",
component: MuiTable,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

too much indent here



export const Table: Story = {
render: (storyContext) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

too much indent here

Copy link
Contributor

@richbirch richbirch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wicked! A tiny bit of indentation in StyledTableStories.tsx

@jacksonhyde jacksonhyde merged commit 4398ba1 into main Nov 20, 2024
2 checks passed
@jacksonhyde jacksonhyde deleted the arrival-table-components branch November 20, 2024 18:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants