Dashboard: Empty State Redesign (#6616)

* asset updates for desert * update zero state to new designs. * centering * tests * decrease max width on empty content message
GoogleForCreators · Mar 5, 2021 · 6029ddc · 6029ddc
1 parent 8acb044
commit 6029ddc
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 51 deletions.
diff --git a/assets/src/dashboard/app/views/exploreTemplates/content/index.js b/assets/src/dashboard/app/views/exploreTemplates/content/index.js
@@ -27,6 +27,14 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
+import {
+  Button,
+  BUTTON_SIZES,
+  BUTTON_TYPES,
+  Headline,
+  THEME_CONSTANTS,
+} from '../../../../../design-system';
+import { useConfig } from '../../../../../edit-story/app';
 import { UnitsProvider } from '../../../../../edit-story/units';
 import { TransformProvider } from '../../../../../edit-story/components/transform';
 import {
@@ -53,6 +61,7 @@ function Content({
   search,
   templateActions,
 }) {
+  const { newStoryURL } = useConfig();
   return (
     <Layout.Scrollable>
       <FontProvider>
@@ -91,16 +100,31 @@ function Content({
                 </>
               ) : (
                 <EmptyContentMessage>
-                  {search?.keyword
-                    ? sprintf(
-                        /* translators: %s: search term. */
-                        __(
-                          'Sorry, we couldn\'t find any results matching "%s"',
-                          'web-stories'
-                        ),
-                        search.keyword
-                      )
-                    : __('No templates currently available', 'web-stories')}
+                  <Headline
+                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
+                    as="h3"
+                  >
+                    {search?.keyword
+                      ? sprintf(
+                          /* translators: %s: search term. */
+                          __(
+                            'Sorry, we couldn\'t find any results matching "%s"',
+                            'web-stories'
+                          ),
+                          search.keyword
+                        )
+                      : __('No templates currently available.', 'web-stories')}
+                  </Headline>
+                  {!search?.keyword && (
+                    <Button
+                      type={BUTTON_TYPES.PRIMARY}
+                      size={BUTTON_SIZES.MEDIUM}
+                      as="a"
+                      href={newStoryURL}
+                    >
+                      {__('Create a new Story', 'web-stories')}
+                    </Button>
+                  )}
                 </EmptyContentMessage>
               )}
             </StandardViewContentGutter>

diff --git a/assets/src/dashboard/app/views/exploreTemplates/content/test/content.js b/assets/src/dashboard/app/views/exploreTemplates/content/test/content.js
@@ -95,7 +95,7 @@ describe('Explore Templates <Content />', function () {
     expect(useButtons).toHaveLength(fakeTemplates.length);
   });
 
-  it('should show "No templates currently available" if no templates are present.', function () {
+  it('should show "No templates currently available." if no templates are present.', function () {
     const { getByText } = renderWithProviders(
       <LayoutProvider>
         <Content
@@ -113,7 +113,7 @@ describe('Explore Templates <Content />', function () {
         />
       </LayoutProvider>
     );
-    expect(getByText('No templates currently available')).toBeInTheDocument();
+    expect(getByText('No templates currently available.')).toBeInTheDocument();
   });
 
   it('should show "Sorry, we couldn\'t find any results matching "scooby dooby doo" if no templates are found for a search query are present.', function () {

diff --git a/assets/src/dashboard/app/views/myStories/content/index.js b/assets/src/dashboard/app/views/myStories/content/index.js
@@ -23,8 +23,17 @@ import { __, sprintf } from '@web-stories-wp/i18n';
 /**
  * Internal dependencies
  */
+import {
+  Button,
+  BUTTON_SIZES,
+  BUTTON_TYPES,
+  Headline,
+  THEME_CONSTANTS,
+} from '../../../../../design-system';
 import { UnitsProvider } from '../../../../../edit-story/units';
 import { TransformProvider } from '../../../../../edit-story/components/transform';
+import { resolveRoute } from '../../../router';
+import { APP_ROUTES } from '../../../../constants';
 import {
   InfiniteScroller,
   Layout,
@@ -83,16 +92,31 @@ function Content({
                 </>
               ) : (
                 <EmptyContentMessage>
-                  {search?.keyword
-                    ? sprintf(
-                        /* translators: %s: search term. */
-                        __(
-                          'Sorry, we couldn\'t find any results matching "%s"',
-                          'web-stories'
-                        ),
-                        search.keyword
-                      )
-                    : __('Create a story to get started!', 'web-stories')}
+                  <Headline
+                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
+                    as="h3"
+                  >
+                    {search?.keyword
+                      ? sprintf(
+                          /* translators: %s: search term. */
+                          __(
+                            'Sorry, we couldn\'t find any results matching "%s"',
+                            'web-stories'
+                          ),
+                          search.keyword
+                        )
+                      : __('Start telling Stories.', 'web-stories')}
+                  </Headline>
+                  {!search?.keyword && (
+                    <Button
+                      type={BUTTON_TYPES.PRIMARY}
+                      size={BUTTON_SIZES.MEDIUM}
+                      as="a"
+                      href={resolveRoute(APP_ROUTES.TEMPLATES_GALLERY)}
+                    >
+                      {__('Explore templates', 'web-stories')}
+                    </Button>
+                  )}
                 </EmptyContentMessage>
               )}
             </StandardViewContentGutter>

diff --git a/assets/src/dashboard/app/views/myStories/content/test/content.js b/assets/src/dashboard/app/views/myStories/content/test/content.js
@@ -97,7 +97,7 @@ describe('My Stories <Content />', function () {
     expect(getAllByTestId(/^story-grid-item/)).toHaveLength(fakeStories.length);
   });
 
-  it('should show "Create a story to get started!" if no stories are present.', function () {
+  it('should show "Start telling Stories." if no stories are present.', function () {
     const { getByText } = renderWithProviders(
       <SnackbarProvider>
         <LayoutProvider>
@@ -124,7 +124,7 @@ describe('My Stories <Content />', function () {
       { features: { enableInProgressStoryActions: false } }
     );
 
-    expect(getByText('Create a story to get started!')).toBeInTheDocument();
+    expect(getByText('Start telling Stories.')).toBeInTheDocument();
   });
 
   it('should show "Sorry, we couldn\'t find any results matching "scooby dooby doo" if no stories are found for a search query are present.', function () {

diff --git a/assets/src/dashboard/app/views/savedTemplates/content/index.js b/assets/src/dashboard/app/views/savedTemplates/content/index.js
@@ -28,6 +28,7 @@ import { trackEvent } from '@web-stories-wp/tracking';
  */
 import { TransformProvider } from '../../../../../edit-story/components/transform';
 import { UnitsProvider } from '../../../../../edit-story/units';
+import { Headline, THEME_CONSTANTS } from '../../../../../design-system';
 import {
   Layout,
   StandardViewContentGutter,
@@ -146,19 +147,24 @@ function Content({
                 </>
               ) : (
                 <EmptyContentMessage>
-                  {search?.keyword
-                    ? sprintf(
-                        /* translators: %s: search term. */
-                        __(
-                          'Sorry, we couldn\'t find any results matching "%s"',
+                  <Headline
+                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
+                    as="h3"
+                  >
+                    {search?.keyword
+                      ? sprintf(
+                          /* translators: %s: search term. */
+                          __(
+                            'Sorry, we couldn\'t find any results matching "%s"',
+                            'web-stories'
+                          ),
+                          search.keyword
+                        )
+                      : __(
+                          'Bookmark a story or template to get started!',
                           'web-stories'
-                        ),
-                        search.keyword
-                      )
-                    : __(
-                        'Bookmark a story or template to get started!',
-                        'web-stories'
-                      )}
+                        )}
+                  </Headline>
                 </EmptyContentMessage>
               )}
             </StandardViewContentGutter>

diff --git a/assets/src/dashboard/app/views/shared/emptyContentMessage.js b/assets/src/dashboard/app/views/shared/emptyContentMessage.js
@@ -23,16 +23,37 @@ import styled from 'styled-components';
 /**
  * Internal dependencies
  */
-import { TypographyPresets } from '../../../components';
+import { DesertColor } from '../../../../design-system';
 
-const Message = styled.p`
-  ${TypographyPresets.Medium};
-  margin-top: 40px;
-  color: ${({ theme }) => theme.DEPRECATED_THEME.colors.gray200};
+const Message = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 400px;
+  margin: 20vh auto;
+
+  & > * {
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  /* Sometimes children will contain button or anchor as cta. */
+  button,
+  a {
+    margin-top: 48px;
+  }
 `;
 
+const EmptyImage = styled(DesertColor)`
+  margin-bottom: 48px;
+`;
 function EmptyContentMessage({ children }) {
-  return <Message>{children}</Message>;
+  return (
+    <Message>
+      <EmptyImage aria-hidden width={274} height={118} />
+      {children}
+    </Message>
+  );
 }
 
 EmptyContentMessage.propTypes = {

diff --git a/assets/src/design-system/images/desert_bw.svg b/assets/src/design-system/images/desert_bw.svg
diff --git a/assets/src/design-system/images/desert_color.svg b/assets/src/design-system/images/desert_color.svg
diff --git a/assets/src/design-system/images/index.js b/assets/src/design-system/images/index.js
@@ -22,3 +22,5 @@ export { ReactComponent as LogoColor } from './logo_color.svg';
 export { ReactComponent as LogoWithTypeCircle } from './logo_with_type_circle_bw.svg';
 export { ReactComponent as LogoWithTypeCircleColor } from './logo_with_type_circle_color.svg';
 export { ReactComponent as LogoWithType } from './logo_with_type_bw.svg';
+export { ReactComponent as DesertColor } from './desert_color.svg';
+export { ReactComponent as DesertBw } from './desert_bw.svg';
diff --git a/assets/src/design-system/images/stories/index.js b/assets/src/design-system/images/stories/index.js
@@ -22,13 +22,13 @@ import styled from 'styled-components';
  * Internal dependencies
  */
 import { Text } from '../../components';
-import * as Logos from '..';
+import * as Images from '..';
 
 export default {
   title: 'DesignSystem/Images',
 };
 
-const LogoList = styled.ul`
+const ImageList = styled.ul`
   list-style-type: none;
   display: flex;
   flex-direction: column;
@@ -42,19 +42,19 @@ const LogoList = styled.ul`
 
 export const Default = () => {
   return (
-    <LogoList>
-      {Object.keys(Logos).map((logoName) => {
+    <ImageList>
+      {Object.keys(Images).map((imageName) => {
         // eslint-disable-next-line import/namespace
-        const Logo = Logos[logoName];
+        const Image = Images[imageName];
         return (
-          <li key={logoName}>
-            <Logo />
+          <li key={imageName}>
+            <Image />
             <Text as="span" isBold>
-              {logoName}
+              {imageName}
             </Text>
           </li>
         );
       })}
-    </LogoList>
+    </ImageList>
   );
 };