Gutenberg-mobile: [Home Page Picker] Extract reusable the header and footer container from Page Layout Picker

[chipsnyder]

Description

The design elements of the header and footer of the Modal Layout Picker (aka page layout picker, starter page picker) is being reused as part of the Home Page Picker. With that we'd like to extract the header and footer components from the Modal Layout Picker (MLP) into a reusable component to be used in the container (https://github.com/wordpress-mobile/gutenberg-mobile/issues/2717 ). This should include:

• The collapsible header
  
  
  
  • We would need to consider the MLP includes a filter bar where the Home Page Picker doesn’t have one.
  
  
• The footer
  
  
  
  • Would need to consider the footer might only be visible when an item is selected in the Home Page Picker.
  
  

Goals

• Sanity Test Modal Layout Picker
• The header has a customizable title, prompt, and filter bar (which can be hidden). As well as an optional accessory button (close in MLP and help or skip in Home page picker)
• The footer has customizable button titles and with an optional Unselected button.
  
  
  
  • If an unselected button isn't provided then the footer should hide.
  
  

Screenshots

| Base Container Goal Home Page Picker| Base Container Goal - MLP |
| --- | --- |
| | |

Additional context

📓Updated designs will come later than what is currently linked here.

Design i1

[antonis]

On Android:

• The header is implemented with a CollapsingToolbarLayout. The same implementation can be used in the Starter page picker. Extracting this as a custom component will not improve code reusability.
• The xml layouts used for the header/footer are already defined in separate layout files that are imported using include
• Styles and dimensions are defined separately and can be reused

Thus putting more effort to extract the header and footer behavior at this point is not needed. Minor refactoring (e.g. renaming layout resources to declare reusable nature) might be needed. This can be evaluated and implemented as needed during the development of Starter page picker.
cc @chipsnyder, @Tug