Add Contextual VideoCard and VideoThumbnail components #2725

mSitkovets · 2020-02-06T21:52:46Z

WHY are these changes introduced?

The Contextual Learning team would like contribute components to Polaris for use when publishing contextual learning videos in the admin.

Unicorn project

WHAT is this pull request doing?

Adds two new components: MediaCard and VideoThumbnail

Video thumbnail	MediaCard

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useState, useCallback} from 'react';
import {Page, Layout, MediaCard, VideoThumbnail} from '../src';

export function Playground() {
  const [customThumbnail, setCustomThumbnail] = useState(false);
  const toggleCustom = useCallback(() => {
    setCustomThumbnail((customThumbnail) => !customThumbnail);
  }, [setCustomThumbnail]);
  const thumbnailMarkup = customThumbnail ? (
    <img
      alt=""
      width="100%"
      height="100%"
      style={{objectFit: 'cover', objectPosition: 'center'}}
      src="https://burst.shopifycdn.com/photos/smiling-businesswoman-in-office.jpg?width=1850"
    />
  ) : (
    <VideoThumbnail
      onClick={() => {}}
      videoLength={80}
      thumbnailUrl="https://burst.shopifycdn.com/photos/smiling-businesswoman-in-office.jpg?width=1850"
    />
  );
  return (
    <Page
      title="Playground"
      primaryAction={{
        content: `View with ${customThumbnail ? 'Media' : 'custom'} thumbnail`,
        onAction: toggleCustom,
      }}
    >
      <Layout>
        <Layout.Section>
          <MediaCard
            title="Getting started, sure, but this could totally possibly be a way longer title though really"
            primaryAction={{
              content: 'Learn about getting started',
              onAction: () => {},
            }}
            secondaryAction={{
              content: 'Do something less important',
              onAction: () => {},
            }}
            description="Discover how Shopify can help you get started on building your business."
            popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
          >
            {thumbnailMarkup}
          </MediaCard>
        </Layout.Section>
        <Layout.Section>
          <MediaCard
            title="Getting started, sure, but this could totally possibly be a way longer title though really"
            primaryAction={{
              content: 'Learn about getting started',
              onAction: () => {},
            }}
            secondaryAction={{
              content: 'Do something less important',
              onAction: () => {},
            }}
            description="Discover how Shopify can help you get started on building your business."
            popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
          >
            {thumbnailMarkup}
          </MediaCard>
          <MediaCard
            portrait
            title="Getting started, sure, but this could totally possibly be a way longer title though really"
            primaryAction={{
              content: 'Learn about getting started',
              onAction: () => {},
            }}
            secondaryAction={{
              content: 'Do something less important',
              onAction: () => {},
            }}
            description="Discover how Shopify can help you get started on building your business."
            popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
          >
            {thumbnailMarkup}
          </MediaCard>
        </Layout.Section>
        <Layout.Section secondary>
          <MediaCard
            portrait
            title="Getting started, sure, but this could totally possibly be a way longer title though really"
            primaryAction={{
              content: 'Learn about getting started',
              onAction: () => {},
            }}
            secondaryAction={{
              content: 'Do something less important',
              onAction: () => {},
            }}
            description="Discover how Shopify can help you get started on building your business."
            popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
          >
            {thumbnailMarkup}
          </MediaCard>
        </Layout.Section>
      </Layout>
    </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
For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

ghost · 2020-02-06T21:52:50Z

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

github-actions · 2020-02-06T21:54:51Z

🟢 This pull request modifies 18 files and might impact 3 other files.

Details:

All files potentially affected (total: 3)

📄 .storybook/polaris-readme-loader.js (total: 0)

Files potentially affected (total: 0)

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

📄 locales/en.json (total: 0)

Files potentially affected (total: 0)

🎨 src/components/MediaCard/MediaCard.scss (total: 1)

Files potentially affected (total: 1)

/src/components/MediaCard/MediaCard.tsx

🧩 src/components/MediaCard/MediaCard.tsx (total: 0)

Files potentially affected (total: 0)

📄 src/components/MediaCard/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/MediaCard/index.ts (total: 0)

Files potentially affected (total: 0)

🧩 src/components/MediaCard/tests/MediaCard.test.tsx (total: 0)

Files potentially affected (total: 0)

📄 src/components/VideoThumbnail/README.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/VideoThumbnail/VideoThumbnail.scss (total: 1)

Files potentially affected (total: 1)

/src/components/VideoThumbnail/VideoThumbnail.tsx

🧩 src/components/VideoThumbnail/VideoThumbnail.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/VideoThumbnail/illustrations/index.ts (total: 1)

Files potentially affected (total: 1)

/src/components/VideoThumbnail/VideoThumbnail.tsx

📄 src/components/VideoThumbnail/illustrations/play.svg (total: 2)

Files potentially affected (total: 2)

🧩 src/components/VideoThumbnail/index.ts (total: 0)

Files potentially affected (total: 0)

🧩 src/components/VideoThumbnail/tests/VideoThumbnail.test.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/index.ts (total: 0)

Files potentially affected (total: 0)

🧩 src/utilities/duration.ts (total: 1)

Files potentially affected (total: 1)

/src/components/VideoThumbnail/VideoThumbnail.tsx

🧩 src/utilities/tests/duration.test.ts (total: 0)

Files potentially affected (total: 0)

chloerice · 2020-02-25T20:12:35Z

Hi @mSitkovets 👋 I'm so excited for your team's contribution, these are the first new components ever contributed 🎉!!

Because there's so many files and these are net new components, there's a lot of requested changes and it's gonna likely take a couple of re-reviews to get these ready to ship as we work together to align on the API etc.

I'll be pinging crafters from other disciplines to get extra eyes on things like content and design language change requests. I find it easiest to review large PRs by making and testing the changes in my editor, then referring to the diff in VSCode to comment the suggestions here on GitHub. To make viewing and copy/pasting easier, take a look at the split diff of my branch.

Even though GitHub is back up now (🎉) I'm splitting the initial review up to attempt to make it a bit easier to get started with iteration: docs, straight forward code changes, and high level API changes/questions/feedback.

If you get lost in the sea of comments, I'm happy to walk through the requested changes together 😊 Just throw a pairing session in my calendar 📆 I'll be keeping an eye out for replies to comments, but I'm Polaris ATC today so I'll be glued to Slack if you want to DM for faster response.

chloerice

Okay! Here's review part 1 - Content eyes needed 📄 👀 cc @selenehinkley @janahue @krismausser

A lot of the request changes have been made already from the branch I shared, but there's a few things that were missing/out of sync between my review and the branch.

UNRELEASED.md

locales/en.json

src/components/VideoCard/README.md

src/components/VideoThumbnail/README.md

src/components/VideoCard/README.md

src/components/VideoThumbnail/README.md

chloerice

Okay! Here's review part 1** - Content eyes needed 📄 👀 cc @selenehinkley @janahue @krismausser

(**A lot of the requested content changes have been made already from the branch I shared, but there's a few things that were missing/out of sync between my review and the branch.)

Initial requested changes made

locales/en.json

BPScott

Hi friends,

Here's a little drive-by review with a few little nitpicks :) Awesome work overall!

src/components/MediaCard/MediaCard.tsx

.storybook/polaris-readme-loader.js

src/components/index.ts

src/components/VideoThumbnail/VideoThumbnail.tsx

locales/en.json

ghost · 2020-04-08T16:36:42Z

🎉 Thanks for your contribution to Polaris React!

* Initial commit of adding the two components * Rewrote tests to follow Polaris test style * requested changes for easier diff viewing/copying * Renamed VideoCard to MediaCard * Edited documentation * Renamed media card variables * First doc edits from content session 1 * [MediaCard] Finished README; require children * [VideoThumbnail] finalized doc * add missing prop descriptions * fix into doc commit * [VideoThumbnail] Call onBeforeStartPlaying onFocus for keyboard supportted video preloading * [VideoThumbnail] Account for all combos of hours, mins, and secs * [VideoThumbnail] Fix test coverage * fix change log * lint 😑 * [MediaCard] remove Popover.preventAutofocus * little fixes Co-authored-by: Chloe Rice <chloe.rice@shopify.com>

mSitkovets force-pushed the video-card-and-thumbnail-components branch from 9bad553 to 8f3a1a7 Compare February 7, 2020 16:46

sarahill requested review from chloerice, yourpalsonja and sarahill February 7, 2020 18:00

mSitkovets force-pushed the video-card-and-thumbnail-components branch from 8f3a1a7 to 39e5274 Compare February 7, 2020 19:15

mSitkovets changed the title ~~[WIP] Add Contextual VideoCard and VideoThumbnail components~~ Add Contextual VideoCard and VideoThumbnail components Feb 7, 2020

mSitkovets force-pushed the video-card-and-thumbnail-components branch from 39e5274 to daf9d1c Compare February 7, 2020 19:42

yoshicn force-pushed the video-card-and-thumbnail-components branch 2 times, most recently from fb42862 to b91e215 Compare February 9, 2020 08:32

mSitkovets force-pushed the video-card-and-thumbnail-components branch from b91e215 to a9e1dd1 Compare February 11, 2020 15:18

chloerice requested changes Feb 25, 2020

View reviewed changes

chloerice previously requested changes Feb 25, 2020

View reviewed changes

chloerice force-pushed the video-card-and-thumbnail-components branch from ef8f162 to 0ba7868 Compare March 6, 2020 16:50

chloerice force-pushed the video-card-and-thumbnail-components branch 5 times, most recently from 4d9b616 to efc76aa Compare March 25, 2020 00:39

chloerice force-pushed the video-card-and-thumbnail-components branch from efc76aa to ebe0492 Compare April 4, 2020 00:42

translation-platform bot reviewed Apr 4, 2020

View reviewed changes