From 6029ddc1047c2a3f987376941a9e61bd0b03f254 Mon Sep 17 00:00:00 2001 From: Brittany Feenstra Date: Fri, 5 Mar 2021 08:50:25 -0700 Subject: [PATCH] Dashboard: Empty State Redesign (#6616) * asset updates for desert * update zero state to new designs. * centering * tests * decrease max width on empty content message --- .../views/exploreTemplates/content/index.js | 44 ++++++++++++++----- .../exploreTemplates/content/test/content.js | 4 +- .../app/views/myStories/content/index.js | 44 ++++++++++++++----- .../views/myStories/content/test/content.js | 4 +- .../app/views/savedTemplates/content/index.js | 30 ++++++++----- .../app/views/shared/emptyContentMessage.js | 33 +++++++++++--- assets/src/design-system/images/desert_bw.svg | 7 +++ .../src/design-system/images/desert_color.svg | 7 +++ assets/src/design-system/images/index.js | 2 + .../src/design-system/images/stories/index.js | 18 ++++---- 10 files changed, 142 insertions(+), 51 deletions(-) create mode 100644 assets/src/design-system/images/desert_bw.svg create mode 100644 assets/src/design-system/images/desert_color.svg diff --git a/assets/src/dashboard/app/views/exploreTemplates/content/index.js b/assets/src/dashboard/app/views/exploreTemplates/content/index.js index 6cc12854e2fc..8c83b7b79f56 100644 --- 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 ( @@ -91,16 +100,31 @@ function Content({ ) : ( - {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')} + + {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')} + + {!search?.keyword && ( + + )} )} diff --git a/assets/src/dashboard/app/views/exploreTemplates/content/test/content.js b/assets/src/dashboard/app/views/exploreTemplates/content/test/content.js index b2a96827344f..730995148860 100644 --- 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 ', 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( ', function () { /> ); - 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 index ac13e1982ff4..d6b54d70ebc7 100644 --- 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({ ) : ( - {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')} + + {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')} + + {!search?.keyword && ( + + )} )} diff --git a/assets/src/dashboard/app/views/myStories/content/test/content.js b/assets/src/dashboard/app/views/myStories/content/test/content.js index b8fe22fc6ea5..c9f37e6b3f4b 100644 --- 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 ', 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( @@ -124,7 +124,7 @@ describe('My Stories ', 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 index 4a70f91aa84c..12b7cfd6745c 100644 --- 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({ ) : ( - {search?.keyword - ? sprintf( - /* translators: %s: search term. */ - __( - 'Sorry, we couldn\'t find any results matching "%s"', + + {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' - )} + )} + )} diff --git a/assets/src/dashboard/app/views/shared/emptyContentMessage.js b/assets/src/dashboard/app/views/shared/emptyContentMessage.js index 1210d96a8000..df18085066a3 100644 --- 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 {children}; + return ( + + + {children} + + ); } EmptyContentMessage.propTypes = { diff --git a/assets/src/design-system/images/desert_bw.svg b/assets/src/design-system/images/desert_bw.svg new file mode 100644 index 000000000000..6a4d380391e6 --- /dev/null +++ b/assets/src/design-system/images/desert_bw.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/src/design-system/images/desert_color.svg b/assets/src/design-system/images/desert_color.svg new file mode 100644 index 000000000000..ffc7f0e1f7a1 --- /dev/null +++ b/assets/src/design-system/images/desert_color.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/src/design-system/images/index.js b/assets/src/design-system/images/index.js index 0236074cd042..fcfe747b35d2 100644 --- 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 index 1a16c93c6347..764116d1742a 100644 --- 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 ( - - {Object.keys(Logos).map((logoName) => { + + {Object.keys(Images).map((imageName) => { // eslint-disable-next-line import/namespace - const Logo = Logos[logoName]; + const Image = Images[imageName]; return ( -
  • - +
  • + - {logoName} + {imageName}
    • ); })} -     + ); };