[PWA-156] Added Drawer Footer Styleguide.

[revanth0212]

Description

Drawer Footer Styleguide.

Related Issue

Closes PWA-156

Verification Stakeholders

@jimbo @soumya-ashok @jcalcaben

Verification Steps

1. yarn workspace @magento/venia-styleguide run start
2. Navigate to /page/drawer-footer

Screenshots

Checklist

1. To be merged only after Add a button section to the styleguide #2088 is merged.

[PWAStudioBot]

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-156.

Generated by 🚫 dangerJS against 0a881f0

[jimbo]

Approved, but blocked by preceding PRs:

• Add color section to styleguide #2030
• Add a button section to the styleguide #2088

The base branch was changed.

[soumya-ashok]

@revanth0212 @jimbo I've just had a look at the implementation.

A few questions:

• I see a white background behind the buttons. Is that intentional?
• Also, I assume that the way they are placed is meant to indicate that they should be vertically and horizontally aligned to or around the center, depending on how many buttons there are but this is not obvious.
• In the first two button example, we have 2 secondary buttons. This shouldn't typically happen. The more regular case would be a secondary and primary like in the third example.
• Are we addressing break-points and relative spacing or is this for the smallest mobile view?

[revanth0212]

I see a white background behind the buttons. Is that intentional?

As far as I remember, this is intentional. I can revert it if that's not expected.

Also, I assume that the way they are placed is meant to indicate that they should be vertically and horizontally aligned to or around the center, depending on how many buttons there are but this is not obvious.

If we need a vertical example, I can add it to the styleguide. @jimbo what do you think?

In the first two button example, we have 2 secondary buttons. This shouldn't typically happen. The more regular case would be a secondary and primary like in the third example.

Can it not be a case where 2 buttons will definitely not be primary? As an example, next and back both can be secondary.

Are we addressing break-points and relative spacing or is this for the smallest mobile view?

Not sure of this.

[jimbo]

I see a white background behind the buttons. Is that intentional?

Yes. Drawers (and footers) have a white background.

Also, I assume that the way they are placed is meant to indicate that they should be vertically and horizontally aligned to or around the center, depending on how many buttons there are but this is not obvious.

Yes, there are a maximum of two buttons, vertically and horizontally centered in a single row. There is not an example of vertically stacked buttons in a footer, because a footer has a single row.

In the first two button example, we have 2 secondary buttons. This shouldn't typically happen. The more regular case would be a secondary and primary like in the third example.

@soumya-ashok Agreed, examples should show one high and one low priority button, since that's the typical case.

@revanth0212 You're correct, it could potentially be two low priority buttons, but that would be unusual.

Are we addressing break-points and relative spacing or is this for the smallest mobile view?

In this case, there are no breakpoints, since a drawer's width (and thus the footer's width) matches our smallest breakpoint.

[soumya-ashok]

@revanth0212 and @jimbo Thanks for clarifying.

We don't need vertically stacked buttons, I meant center-aligned along the height.
There could be a case when someone chooses to use 2 secondary buttons alongside one another but I don't want to advocate it. Even in the case of "next" and "back", "next" is presumably the preferred action, and would be indicated with a primary button.

[revanth0212]

There could be a case when someone chooses to use 2 secondary buttons alongside one another but I don't want to advocate it. Even in the case of "next" and "back", "next" is presumably the preferred action, and would be indicated with a primary button.

You are right here. But consider this scenario, the Drawer Footer is just 1 component in a page and sometimes it may not have a primary action but the page housing the drawer footer might have. In such situations, having 2 secondary buttons it is a valid use case.

[revanth0212]

We can merge this PR for now and circle back later to discuss the missing use cases once we have a matured style guide.