Skip to main content

Layout library

Proposed change​

Create a library for common page layouts.

How it looks now​

import { ContentSection, HeroSection } from '@pm-netbank/components';

<HeroSection>
  <Component />
</HeroSection>

<ContentSection>
  <Component />
</ContentSection>

Alternative​

Having a standard page layout.

import { PageLayout } from '@pm-netbank/layouts';

<PageLayout>
  <PageLayout.BreadCrumb>
    <BreadCrumb />
  </PageLayout.BreadCrumb>

  <PageLayout.Title>Example Title Text</PageLayout.Title>

  <PageLayout.SubTitle>Example Subtitle Text</PageLayout.SubTitle>

  <PageLayout.Actions>
    <Button>Example Button</Button>
    <Button>Another Example Button</Button>
  </PageLayout.Actions>

  <PageLayout.Tabs>
    <TabComponent />
  </PageLayout.Tabs>

  <PageLayout.Content>Example page text.</PageLayout.Content>

  {children}
</PageLayout>;

Each of the elements will have a clear data-testid which can be used for testing the layout of a page.

Another example​

import { FilterLayout } from '@pm-netbank/layouts';

<FilterLayout>
  <FilterLayout.Filter>
    <FilterComponent />
  </FilterLayout.Filter>

  <FilterLayout.Content>
    <Component />
  </FilterLayout.Content>
</FilterLayout>;

Motivation​

  • Creating standard layouts will help us have more consistent pages.
  • We're already importing components to create layouts, but this is resulting in a lot of duplication and inconsistency.
  • With Storybook it will be easy for us to browse what kind of layouts we have available, and how to use them.
  • This will also allow us to address layout updates from one central place instead of having to implement the change across all apps and pages.
  • Header accessibility doesn't need to be set for every single page, and it will give the user a more uniform accessibility experience across the different pages.

Proposed transition strategy​

We will have to refactor all the apps to use this library once the layouts are created, but that shouldn't be too difficult.

Once the layout has been created, we can search for all instances of <HeroSection> and update those to use the new layout. We already have our layout split between HeroSection and ContentSection, which is how the new layout would work. It'll be as moving the code from one component to another.

Other info about the proposal​

New layouts should be discussed with the team and the designers to make sure that we're building to specification.