Merge pull request #1693 from google/feature/1492-my-stories-grid-ite…

…m-captions

#1492 Dashboard: Update story grid item caption

assets/src/dashboard/app/views/myStories/index.js

@@ -131,6 +131,7 @@ function MyStories() {
             createTemplateFromStory={createTemplateFromStory}
             duplicateStory={duplicateStory}
             stories={orderedStories}
+            users={users}
             centerActionLabel={
               <>
                 <PlayArrowIcon />

assets/src/dashboard/app/views/shared/stories/storyGridView.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+/**
+ * Internal dependencies
+ */
+
+import StoryGridView from '../storyGridView';
+import formattedStoriesArray from '../../../../storybookUtils/formattedStoriesArray';
+import formattedUsersObject from '../../../../storybookUtils/formattedUsersObject';
+
+export default {
+  title: 'Dashboard/Components/StoryGridView',
+  component: StoryGridView,
+};
+
+export const _default = () => {
+  return (
+    <StoryGridView
+      stories={formattedStoriesArray}
+      users={formattedUsersObject}
+      centerActionLabel={text('centerActionLabel', 'Preview')}
+      bottomActionLabel={text('bottomActionLabel', 'MY CTA')}
+      createTemplateFromStory={boolean('createTemplateFromStory')}
+      updateStory={action('updateStory button clicked')}
+      trashStory={action('trashStory button clicked')}
+      duplicateStory={action('duplicateStory button clicked')}
+      isTemplate={boolean('isTemplate')}
+    />
+  );
+};

assets/src/dashboard/app/views/shared/storyGridView.js

@@ -30,15 +30,15 @@ import styled from 'styled-components';
 import {
   CardGrid,
   CardGridItem,
-  CardTitle,
   CardItemMenu,
+  CardTitle,
   CardPreviewContainer,
   ActionLabel,
   PreviewPage,
+  PreviewErrorBoundary,
 } from '../../../components';
-import { StoriesPropType } from '../../../types';
 import { STORY_CONTEXT_MENU_ACTIONS } from '../../../constants';
-import PreviewErrorBoundary from '../../../components/previewErrorBoundary';
+import { StoriesPropType, UsersPropType } from '../../../types';
 
 export const DetailRow = styled.div`
   display: flex;
@@ -56,6 +56,7 @@ const StoryGrid = styled(CardGrid)`
 
 const StoryGridView = ({
   stories,
+  users,
   centerActionLabel,
   bottomActionLabel,
   createTemplateFromStory,
@@ -137,12 +138,14 @@ const StoryGridView = ({
             <DetailRow>
               <CardTitle
                 title={story.title}
-                modifiedDate={story.modified.startOf('day').fromNow()}
+                status={story.status}
+                author={users[story.author]?.name}
+                displayDate={story.modified}
+                editMode={titleRenameId === story.id}
                 onEditComplete={(newTitle) =>
                   handleOnRenameStory(story, newTitle)
                 }
                 onEditCancel={() => setTitleRenameId(-1)}
-                editMode={titleRenameId === story.id}
               />
               <CardItemMenu
                 onMoreButtonSelected={setContextMenuId}
@@ -161,6 +164,7 @@ const StoryGridView = ({
 StoryGridView.propTypes = {
   isTemplate: PropTypes.bool,
   stories: StoriesPropType,
+  users: UsersPropType,
   centerActionLabel: ActionLabel,
   bottomActionLabel: ActionLabel,
   createTemplateFromStory: PropTypes.func,

assets/src/dashboard/app/views/shared/storyListView.js

@@ -61,6 +61,7 @@ import {
 import { PAGE_RATIO } from '../../../constants/pageStructure';
 import PreviewErrorBoundary from '../../../components/previewErrorBoundary';
 import { ReactComponent as ArrowIconSvg } from '../../../icons/download.svg';
+import getFormattedDisplayDate from '../../../utils/getFormattedDisplayDate';
 
 const ListView = styled.div`
   width: 100%;
@@ -219,13 +220,13 @@ export default function StoryListView({
                 </PreviewContainer>
               </TablePreviewCell>
               <TableCell>{story.title}</TableCell>
-              <TableCell>{users[story.author].name}</TableCell>
+              <TableCell>{users[story.author]?.name || '—'}</TableCell>
               <TableCell>
                 {metadataStringForIds(categories, story.categories)}
               </TableCell>
               <TableCell>{metadataStringForIds(tags, story.tags)}</TableCell>
-              <TableCell>{story.created.startOf('day').fromNow()}</TableCell>
-              <TableCell>{story.modified.startOf('day').fromNow()}</TableCell>
+              <TableCell>{getFormattedDisplayDate(story.created)}</TableCell>
+              <TableCell>{getFormattedDisplayDate(story.modified)}</TableCell>
               {storyStatus !== STORY_STATUS.DRAFT && (
                 <TableStatusCell>
                   {story.status === STORY_STATUS.PUBLISHED &&
@@ -244,7 +245,7 @@ StoryListView.propTypes = {
   stories: StoriesPropType,
   tags: TagsPropType,
   categories: CategoriesPropType,
-  users: UsersPropType,
+  users: UsersPropType.isRequired,
   handleSortChange: PropTypes.func.isRequired,
   handleSortDirectionChange: PropTypes.func.isRequired,
   storySort: PropTypes.string.isRequired,

assets/src/dashboard/components/cardGrid/stories/index.js

@@ -25,6 +25,7 @@ import { text } from '@storybook/addon-knobs';
  */
 import CardGrid from '../';
 import { CardGridItem, CardPreviewContainer, CardTitle } from '../../';
+import { STORY_STATUS } from '../../../constants';
 
 export default {
   title: 'Dashboard/Components/CardGrid',
@@ -53,7 +54,12 @@ const StorybookGridItem = (
     >
       <Card>{text('Sample Story Content', 'Sample Story')}</Card>
     </CardPreviewContainer>
-    <CardTitle title="Story Title" modifiedDate="12 days" />
+    <CardTitle
+      title="Story Title"
+      author={'Ron Weasley'}
+      status={STORY_STATUS.DRAFT}
+      displayDate={'Modified 2 minutes ago'}
+    />
   </CardGridItem>
 );
 

assets/src/dashboard/components/cardGridItem/cardTitle.js

@@ -17,29 +17,30 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * External dependencies
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 /**
  * Internal dependencies
  */
+import { STORY_STATUS } from '../../constants';
+import { getFormattedDisplayDate, useFocusOut } from '../../utils/';
 import { TextInput } from '../input';
-import useFocusOut from '../../utils/useFocusOut';
 
 const StyledCardTitle = styled.div`
   font-family: ${({ theme }) => theme.fonts.storyGridItem.family};
   font-size: ${({ theme }) => theme.fonts.storyGridItem.size}px;
-  font-weight: ${({ theme }) => theme.fonts.storyGridItem.weight};
+  font-weight: 500;
   letter-spacing: ${({ theme }) => theme.fonts.storyGridItem.letterSpacing}em;
   line-height: ${({ theme }) => theme.fonts.storyGridItem.lineHeight}px;
   padding-top: 12px;
-  max-width: 80%;
+  max-width: 90%;
 `;
 
 const StyledTitle = styled.p`
@@ -50,16 +51,29 @@ const StyledTitle = styled.p`
   text-overflow: ellipsis;
 `;
 
-const StyledDate = styled.p`
+const TitleBodyText = styled.p`
   margin: 0;
   color: ${({ theme }) => theme.colors.gray500};
-  font-weight: ${({ theme }) => theme.fonts.storyGridItemSub.weight};
-  font-family: ${({ theme }) => theme.fonts.storyGridItemSub.family};
+  font-weight: 300;
+`;
+
+const DateHelperText = styled.span`
+  text-transform: uppercase;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.gray900};
+  &:after {
+    content: '-';
+    color: ${({ theme }) => theme.colors.gray500};
+    font-weight: 400;
+    padding: 0 0.25em;
+  }
 `;
 
 const CardTitle = ({
+  author,
   title,
-  modifiedDate,
+  status,
+  displayDate,
   editMode,
   onEditComplete,
   onEditCancel,
@@ -98,6 +112,20 @@ const CardTitle = ({
     [newTitle, onEditComplete, onEditCancel]
   );
 
+  const displayDateText = useMemo(() => {
+    return status === STORY_STATUS.PUBLISHED
+      ? sprintf(
+          /* translators: %s: last modified date */
+          __('Published %s', 'web-stories'),
+          getFormattedDisplayDate(displayDate)
+        )
+      : sprintf(
+          /* translators: %s: last modified date */
+          __('Modified %s', 'web-stories'),
+          getFormattedDisplayDate(displayDate)
+        );
+  }, [status, displayDate]);
+
   return (
     <StyledCardTitle>
       {editMode ? (
@@ -112,16 +140,23 @@ const CardTitle = ({
       ) : (
         <StyledTitle>{title}</StyledTitle>
       )}
-      <StyledDate>{`
-      ${__('Modified', 'web-stories')} ${modifiedDate} `}</StyledDate>
+      <TitleBodyText>
+        {status === STORY_STATUS.DRAFT && (
+          <DateHelperText>{__('draft', 'web-stories')}</DateHelperText>
+        )}
+        {displayDateText}
+      </TitleBodyText>
+      {author && <TitleBodyText>{author}</TitleBodyText>}
     </StyledCardTitle>
   );
 };
 
 CardTitle.propTypes = {
   title: PropTypes.string.isRequired,
+  author: PropTypes.string,
+  status: PropTypes.oneOf(Object.values(STORY_STATUS)),
   editMode: PropTypes.bool,
-  modifiedDate: PropTypes.string.isRequired,
+  displayDate: PropTypes.object.isRequired,
   onEditComplete: PropTypes.func.isRequired,
   onEditCancel: PropTypes.func.isRequired,
 };