[Page] Add thumbnail and subtitle to Page

[dleroux]

WHY are these changes introduced?

Fixes #1711 and adds a subtitle prop

WHAT is this pull request doing?

Add 2 props to page: Thumbnail and Subtitle.

We opted with props for now until we get time to investigate the best approach to have more composable components.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {PageDownMajorMonotone} from '@shopify/polaris-icons';
import {Page, Badge, Avatar} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page
        breadcrumbs={[{content: 'Bills', url: '/settings/billing'}]}
        title="Invoice, but this page could have a longer title"
        subtitle="Statement period: May 3, 2019 to June 2, 2019"
        titleMetadata={<Badge status="success">Paid</Badge>}
        thumbnail={<Avatar customer />}
        secondaryActions={[{content: 'Download', icon: PageDownMajorMonotone}]}
        primaryAction={{content: 'Save', disabled: true}}
        actionGroups={[
          {
            title: 'Promote',
            actions: [
              {
                content: 'Share on Facebook',
                accessibilityLabel: 'Individual action label',
                onAction: () => {},
              },
            ],
          },
        ]}
        pagination={{
          hasPrevious: true,
          hasNext: true,
        }}
        separator
      >
        <p>Page content</p>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[dleroux]

Since we want the metadata to be inline and DisplayText is block by default I needed to do this :(

Another option would be to simply make this an H1 and style it myself

[sarahill]

This looks good. The changes you made helps a lot 👍

[dleroux]

How is this for valid types?

[chloerice]

💯

[dleroux]

Display block on DisplayText needs to display: inline if there's meta data

[chloerice]

I like this a lot. Much better than metadata wrapping to a new line like it does currently. This makes it actually behave like the style guide says it does.

Before	After

[chloerice]

This looks great, Dan!! Can you update the Page with all its elements example to include the subtitle and thumbnail?

Click to see screenshots of title variations

	Large screen	Small screen
With titleMetadata, thumbnail, and subtitle
With all but thumbnail
With all but titleMetadata
With all but subtitle
With just thumbnail
With just titleMetadata
With just subtitle
With just title

[chloerice]

Since this doesn't live outside of the /Page directory, we can just call this Title.

[chloerice]

Let's add an example for thumbnail too.

Page with title thumbnail

Use when an image will help merchants identify the purpose of the page.

<Page
  breadcrumbs={[{content: 'Products', url: '/products/31'}]}
  title="3/4 inch Leather pet collar"
  titleMetadata={<Badge status="success">Paid</Badge>}
  thumbnail={<Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" alt="Black leather pet collar" />}
  secondaryActions={[
    {
      content: 'Duplicate',
      icon: DuplicateMinor
    },
    {
      content: 'View',
      icon: ViewMinor
    },
  ]}
  actionGroups={[
    {
      title: 'Promote',
      actions: [{content: 'Share on Facebook'}],
    },
    {
      title: 'More actions',
      actions: [{content: 'Embed on a website'}],
    },
  ]}
  pagination={{
    hasPrevious: true,
    hasNext: true,
  }}
>
  <p>Page content</p>
</Page>