Exercise 11

Integrate Hero

The next step to completing the pattern integration process is to map the drupal fields of the Hero paragraph type with the Hero's pattern fields. This is where you get to see the power of UI Patterns. In the past this was a manual process which required to create custom twig template suggestions debugging tools to identify the right field and format for mapping. Now you can do this by dragging fields into their respective regions.

1. Click Structure | Paragraph types | Hero | Manage Display
2. Scroll to the bottom and click the Layout for Hero in default tab
3. Under the Select a layout dropdown, scroll to the bottom and select Hero, which should be under Patterns
4. Click Save. Now you should see five new regions in the fields section (Hero heading, Hero eyebrow, Hero body, Image, Button)
5. Drag the Hero fields to each of the respective regions
6. Hide the fields labels by selecting - Hidden under the Label column
7. Click Save

Selecting individual field's patterns

First we selected the Hero pattern as the layout for our hero. Now we need to map each of the individual drupal fields with the right patterns so we can inherit the styles and behaviors associated with each individual pattern.

1. While still in the Hero Manage Display screen, click the cog icon located the most right of the Hero heading field
2. Under the Choose a field template dropdown select Pattern
3. Under the Pattern dropdown select Heading. A new set of fields will display just below the pattern dropdown
4. For the Heading source we want to use Heading as its destination. Do this now.
5. Click Update

Now let's repeat the process with the Hero body field

1. Click the cog icon to the right of Hero body**
2. Same as above
3. Under the Pattern dropdown select Body
4. For the Hero body source, select Body as its destination
5. Click Update

Now let's repeat the process with the Hero eyebrow field

1. Click the cog icon to the right of Hero eyebrow**
2. Same as above
3. Under the Pattern dropdown select Eyebrow
4. For the Hero eyebrow source, select Eyebrow as its destination
5. Click Update

Now let's repeat the process with the Image field

1. Click the cog icon to the right of Image**
2. Same as above
3. Under the Pattern dropdown select Image
4. For the Image source, select Image as its destination
5. Click Update

Now let's repeat the process with the Button field

1. Click the cog icon to the right of Button**
2. Same as above
3. Under the Pattern dropdown select Button
4. For the Button:uri source, select URL as its destination
5. For the Button:title source, select Text as its destination
6. Click Update
7. Scroll to the bottom of the page and click Save