Add Contextual VideoCard and VideoThumbnail components

.storybook/polaris-readme-loader.js

@@ -189,7 +189,9 @@ import {
   TrapFocus,
   Truncate,
   UnstyledLink,
-  VisuallyHidden
+  VisuallyHidden,
+  MediaCard,
+  VideoThumbnail
 } from '@shopify/polaris';
 import {
   PlusMinor,

UNRELEASED.md

@@ -2,8 +2,15 @@
 
 ### Breaking changes
 
+### New components
+
+- Added [`MediaCard`](https://polaris.shopify.com/components/structure/video-card) and [`VideoThumbnail`](https://polaris.shopify.com/components/images-and-icons/video-thumbnail) ([#2725](https://github.com/Shopify/polaris-react/pull/2725))
+- Added [`VideoThumbnail`](https://polaris.shopify.com/components/images-and-icons/video-thumbnail) ([#2725](https://github.com/Shopify/polaris-react/pull/2725))
+
 ### Enhancements
 
+- Added utilities for parsing video duration (https://polaris.shopify.com/components/images-and-icons/video-thumbnail) ([#2725](https://github.com/Shopify/polaris-react/pull/2725))
+
 ### Bug fixes
 
 ### Documentation

locales/en.json

@@ -4,11 +4,9 @@
       "label": "Avatar",
       "labelWithInitials": "Avatar with initials {initials}"
     },
-
     "Autocomplete": {
       "spinnerAccessibilityLabel": "Loading"
     },
-
     "Badge": {
       "PROGRESS_LABELS": {
         "incomplete": "Incomplete",
@@ -23,12 +21,10 @@
         "new": "New"
       }
     },
-
     "Button": {
       "spinnerAccessibilityLabel": "Loading",
       "connectedDisclosureAccessibilityLabel": "Related actions"
     },
-
     "Common": {
       "checkbox": "checkbox",
       "undo": "Undo",
@@ -39,19 +35,16 @@
       "submit": "Submit",
       "more": "More"
     },
-
     "ContextualSaveBar": {
       "save": "Save",
       "discard": "Discard"
     },
-
     "DataTable": {
       "sortAccessibilityLabel": "sort {direction} by",
       "navAccessibilityLabel": "Scroll table {direction} one column",
       "totalsRowHeading": "Totals",
       "totalRowHeading": "Total"
     },
-
     "DatePicker": {
       "previousMonth": "Show previous month, {previousMonthName} {showPreviousYear}",
       "nextMonth": "Show next month, {nextMonth} {nextYear}",
@@ -80,20 +73,17 @@
         "sunday": "Su"
       }
     },
-
     "DiscardConfirmationModal": {
       "title": "Discard all unsaved changes",
       "message": "If you discard changes, you’ll delete any edits you made since you last saved.",
       "primaryAction": "Discard changes",
       "secondaryAction": "Continue editing"
     },
-
     "DropZone": {
       "overlayTextFile": "Drop file to upload",
       "overlayTextImage": "Drop image to upload",
       "errorOverlayTextFile": "File type is not valid",
       "errorOverlayTextImage": "Image type is not valid",
-
       "FileUpload": {
         "actionTitleFile": "Add file",
         "actionTitleImage": "Add image",
@@ -102,28 +92,23 @@
         "label": "Upload file"
       }
     },
-
     "EmptySearchResult": {
       "altText": "Empty search results"
     },
-
     "Frame": {
       "skipToContent": "Skip to content",
       "Navigation": {
         "closeMobileNavigationLabel": "Close navigation"
       }
     },
-
     "Icon": {
       "backdropWarning": "The {color} icon doesn’t accept backdrops. The icon colors that have backdrops are: {colorsWithBackDrops}"
     },
-
     "ActionMenu": {
       "RollupActions": {
         "rollupButton": "Actions"
       }
     },
-
     "Filters": {
       "moreFilters": "More filters",
       "moreFiltersWithCount": "More filters ({count})",
@@ -135,23 +120,19 @@
       "clear": "Clear",
       "clearLabel": "Clear {filterName}"
     },
-
     "Modal": {
       "iFrameTitle": "body markup",
       "modalWarning": "These required properties are missing from Modal: {missingProps}"
     },
-
     "Pagination": {
       "previous": "Previous",
       "next": "Next",
       "pagination": "Pagination"
     },
-
     "ProgressBar": {
       "negativeWarningMessage": "Values passed to the progress prop shouldn’t be negative. Resetting {progress} to 0.",
       "exceedWarningMessage": "Values passed to the progress prop shouldn’t exceed 100. Setting {progress} to 100."
     },
-
     "ResourceList": {
       "sortingLabel": "Sort by",
       "defaultItemSingular": "item",
@@ -171,34 +152,28 @@
       "a11yCheckboxSelectAllMultiple": "Select all {itemsLength} {resourceNamePlural}",
       "ariaLiveSingular": "{itemsLength} item",
       "ariaLivePlural": "{itemsLength} items",
-
       "Item": {
         "actionsDropdownLabel": "Actions for {accessibilityLabel}",
         "actionsDropdown": "Actions dropdown",
         "viewItem": "View details for {itemName}"
       },
-
       "BulkActions": {
         "actionsActivatorLabel": "Actions",
         "moreActionsActivatorLabel": "More actions",
         "warningMessage": "To provide a better user experience. There should only be a maximum of {maxPromotedActions} promoted actions."
       },
-
       "FilterCreator": {
         "filterButtonLabel": "Filter",
         "selectFilterKeyPlaceholder": "Select a filter\u2026",
         "addFilterButtonLabel": "Add filter",
         "showAllWhere": "Show all {resourceNamePlural} where:"
       },
-
       "FilterControl": {
         "textFieldLabel": "Search {resourceNamePlural}"
       },
-
       "FilterValueSelector": {
         "selectFilterValuePlaceholder": "Select a filter\u2026"
       },
-
       "DateSelector": {
         "dateFilterLabel": "Select a value",
         "dateValueLabel": "Date",
@@ -230,35 +205,79 @@
         }
       }
     },
-
     "SkeletonPage": {
       "loadingLabel": "Page loading"
     },
-
     "Spinner": {
       "warningMessage": "The color {color} is not meant to be used on {size} spinners. The colors available on large spinners are: {colors}"
     },
-
     "Tabs": {
       "toggleTabsLabel": "More tabs"
     },
-
     "Tag": {
       "ariaLabel": "Remove {children}"
     },
-
     "TextField": {
       "characterCount": "{count} characters",
       "characterCountWithMaxLength": "{count} of {limit} characters used"
     },
-
     "TopBar": {
       "toggleMenuLabel": "Toggle menu",
-
       "SearchField": {
         "clearButtonLabel": "Clear",
         "search": "Search"
       }
+    },
+    "MediaCard": {
+      "popoverButton": "Actions"
+    },
+    "VideoThumbnail": {
+      "playButtonA11yLabel": {
+        "default": "Play video",
+        "defaultWithDuration": "Play video of length {duration}",
+        "duration": {
+          "hours": {
+            "other": {
+              "only": "{hourCount} hours",
+              "andMinutes": "{hourCount} hours and {minuteCount} minutes",
+              "andMinute": "{hourCount} hours and {minuteCount} minute",
+              "minutesAndSeconds": "{hourCount} hours, {minuteCount} minutes, and {secondCount} seconds",
+              "minutesAndSecond": "{hourCount} hours, {minuteCount} minutes, and {secondCount} second",
+              "minuteAndSeconds": "{hourCount} hours, {minuteCount} minute, and {secondCount} seconds",
+              "minuteAndSecond": "{hourCount} hours, {minuteCount} minute, and {secondCount} second",
+              "andSeconds": "{hourCount} hours and {secondCount} seconds",
+              "andSecond": "{hourCount} hours and {secondCount} second"
+            },
+            "one": {
+              "only": "{hourCount} hour",
+              "andMinutes": "{hourCount} hour and {minuteCount} minutes",
+              "andMinute": "{hourCount} hour and {minuteCount} minute",
+              "minutesAndSeconds": "{hourCount} hour, {minuteCount} minutes, and {secondCount} seconds",
+              "minutesAndSecond": "{hourCount} hour, {minuteCount} minutes, and {secondCount} second",
+              "minuteAndSeconds": "{hourCount} hour, {minuteCount} minute, and {secondCount} seconds",
+              "minuteAndSecond": "{hourCount} hour, {minuteCount} minute, and {secondCount} second",
+              "andSeconds": "{hourCount} hour and {secondCount} seconds",
+              "andSecond": "{hourCount} hour and {secondCount} second"
+            }
+          },
+          "minutes": {
+            "other": {
+              "only": "{minuteCount} minutes",
+              "andSeconds": "{minuteCount} minutes and {secondCount} seconds",
+              "andSecond": "{minuteCount} minutes and {secondCount} second"
+            },
+            "one": {
+              "only": "{minuteCount} minute",
+              "andSeconds": "{minuteCount} minute and {secondCount} seconds",
+              "andSecond": "{minuteCount} minute and {secondCount} second"
+            }
+          },
+          "seconds": {
+            "other": "{secondCount} seconds",
+            "one": "{secondCount} second"
+          }
+        }
+      }
     }
   }
 }

src/components/MediaCard/MediaCard.scss

@@ -0,0 +1,63 @@
+@import '../../styles/common';
+
+$portrait-breakpoint: 804px;
+
+.MediaCard {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+
+  &.portrait {
+    flex-flow: column nowrap;
+  }
+
+  @include breakpoint-before($portrait-breakpoint, inclusive) {
+    flex-flow: column nowrap;
+  }
+}
+
+.MediaContainer {
+  &:not(.portrait) {
+    flex-basis: 40%;
+  }
+}
+
+.InfoContainer {
+  position: relative;
+
+  &:not(.portrait) {
+    flex-basis: 60%;
+  }
+}
+
+.Popover {
+  position: absolute;
+  z-index: z-index(overlay);
+  top: spacing();
+  right: spacing();
+}
+
+.Heading {
+  margin-right: spacing(extra-loose);
+}
+
+.PrimaryAction {
+  margin-right: spacing(tight);
+}
+
+.SecondaryAction {
+  margin-left: -spacing(tight);
+}
+
+.ActionContainer {
+  padding-top: spacing(tight);
+
+  &.portrait {
+    padding-top: spacing(extra-loose);
+  }
+
+  @include breakpoint-before($portrait-breakpoint, inclusive) {
+    padding-top: spacing(extra-loose);
+  }
+}