Component Request - gallery-list - 3hrs

[drewbaker]

Component Description

This component is used on the home page to show a list of links with talent names. On hover of a name, it will show a featured image for that talent.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://xd.adobe.com/view/f8aeaa9a-81f3-4967-a3d2-e8fe5abce4e8-adfd/

NOTE
On mobile please go to 1 column of names.
The designs show the image hover on "Jamie Ford".

Slots

None.

Props

props: {
    items: {
        // The list of talent. Can use mock API `directors` for these. Use the `featuredImage` for hover.
        type: Array,
        default: () => []
    }
}

Developer Tips

The trick will be getting the columns aligning correctly. Note the component should align vertically, and horizontally. The last column should align to the right edge of screen when sized similar to the design. If the list of names isn't the ideal length, the last column of names should align to the top of the previous column.

1. --color-yellow for the font color
2. --color-white for the font hover color
3. Use unit-gap css var for padding on sides.
4. Please have a max width of 1280px for the entire component.
5. Please set min-height to unit-100vh.

Events

None.

Required components

1. Use wp-image for the background image. Set it to mode="fullbleed" and use `position: absolute" with a height and width set to have it size correctly. Alternatively, use a regular image tag if you want, be sure to use src-set correct.
2. Each name should be a nuxt-link.

Screenshots

[nickberens360]

@drewbaker it looks like ~/assets/svg/logo-funkhaus is missing which is causing an error when storybook is trying to build the GlobalHamburger.stories.js story. Currently I have the import in GlobalHamburger.stories.js commented out as a workaround. I know submitting a PR with changes outside the assigned component is against best practices. I noticed that in the example PR that the developer went through the history to find the image but that option also feels like it would be making a change outside of the assigned component. I figured I'd ask to see if you had a preferred way of handling situations like this? Unless this is part of the test. If so, just tell me to figure it out ;) Thanks

[drewbaker]

@nickberens360 I removed the the missing logo from the repo just now. Good catch!