add book list component for flexpages (#2736)

* add book list component for flexpages

* 👕

* 👕

* add spec

* fix type

Author: TomWoodward

src/app/components/book-tile/book-tile-display.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PromoteBadge from '~/components/promote-badge/promote-badge';
+import type {Item} from '~/models/book-titles';
+import {Book as BookInfo} from '~/pages/subjects/new/specific/context';
+import GetTheBookDropdown from './dropdown-menu';
+import cn from 'classnames';
+import './book-tile.scss';
+
+type AdditionalFields = Partial<{
+    promoteSnippet: Item['promote_snippet'];
+    bookState: string;
+}>
+
+export default function BookTile({book}: {book: BookInfo & AdditionalFields}) {
+    const {coverUrl, title, slug} = book;
+    const comingSoon = book.bookState === 'coming_soon';
+    const snippets = book.promoteSnippet?.filter((s) => s.value.image);
+    const promoteSnippet = snippets?.find((s) => s.value.image);
+    const classes = cn({
+        'book-tile': true,
+        'coming-soon': comingSoon,
+        promote: Boolean(promoteSnippet)
+    });
+
+    return (
+        <div className={classes}>
+            <a href={`/details/${slug}`} aria-label={`${title} book`}>
+                <img
+                    src={coverUrl}
+                    role='presentation'
+                    width='240'
+                    height='240'
+                />
+                {promoteSnippet?.value.image && (
+                    <PromoteBadge
+                        name={promoteSnippet.value.name}
+                        image={promoteSnippet.value.image}
+                    />
+                )}
+                <div className='text-block'>
+                    {title}
+                </div>
+            </a>
+            {comingSoon ? (
+                <div className='navmenu'>
+                    <button type='button' disabled>
+                        Coming soon
+                    </button>
+                </div>
+            ) : (
+                <GetTheBookDropdown bookInfo={book} />
+            )}
+        </div>
+    );
+}

src/app/components/book-tile/book-tile.tsx

@@ -1,54 +1,19 @@
 import React from 'react';
-import PromoteBadge from '~/components/promote-badge/promote-badge';
 import bookPromise, {Item} from '~/models/book-titles';
 import {Book as BookInfo} from '~/pages/subjects/new/specific/context';
-import GetTheBookDropdown from './dropdown-menu';
-import cn from 'classnames';
 import './book-tile.scss';
+import BookTileDisplay from './book-tile-display';
 
-// eslint-disable-next-line complexity
 export default function BookTile({book: [book]}: {book: [BookInfo]}) {
-    const {coverUrl, title, slug} = book;
     const info = useBookInfo(book.id);
-    const comingSoon = info?.book_state === 'coming_soon';
-    const snippets = info?.promote_snippet.filter((s) => s.value.image);
-    const promoteSnippet = snippets?.find((s) => s.value.image);
-    const classes = cn({
-        'book-tile': true,
-        'coming-soon': comingSoon,
-        promote: Boolean(promoteSnippet)
-    });
 
-    return (
-        <div className={classes}>
-            <a href={`/details/${slug}`} aria-label={`${title} book`}>
-                <img
-                    src={coverUrl}
-                    role='presentation'
-                    width='240'
-                    height='240'
-                />
-                {promoteSnippet?.value.image && (
-                    <PromoteBadge
-                        name={promoteSnippet.value.name}
-                        image={promoteSnippet.value.image}
-                    />
-                )}
-                <div className='text-block'>
-                    {title}
-                </div>
-            </a>
-            {comingSoon ? (
-                <div className='navmenu'>
-                    <button type='button' disabled>
-                        Coming soon
-                    </button>
-                </div>
-            ) : (
-                <GetTheBookDropdown bookInfo={book} />
-            )}
-        </div>
-    );
+    return <BookTileDisplay
+        book={{
+            ...book,
+            bookState: info?.book_state,
+            promoteSnippet: info?.promote_snippet
+        }}
+    />;
 }
 
 function useBookInfo(id: number) {

src/app/pages/flex-page/blocks/BookListBlock.scss

@@ -0,0 +1,16 @@
+@import 'pattern-library/core/pattern-library/headers';
+
+.flex-page.page div.content-block-book-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    margin: $normal-margin 0;
+    width: 100%;
+
+    @include width-up-to($phone-max) {
+        grid-gap: 1rem;
+    }
+
+    @include wider-than($phone-max) {
+        grid-gap: 4rem 2rem;
+    }
+}

src/app/pages/flex-page/blocks/BookListBlock.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cn from 'classnames';
+import './BookListBlock.scss';
+import BookTile from '~/components/book-tile/book-tile-display';
+
+/*
+ * the book data formatting in the CMS is currently fragemented,
+ * when it gets centralized we can centralize the types as well
+ */
+export type BookInfo = {
+    id: number;
+    slug: string;
+    title: string;
+    webviewRexLink: string;
+    webviewLink: string;
+    highResolutionPdfUrl: string;
+    lowResolutionPdfUrl: string;
+    coverUrl: string;
+    bookState: string;
+    promoteSnippet: {
+        value: {
+            id: number;
+            description: string;
+            image: string;
+            name: string;
+        };
+    }[];
+};
+
+export type BookListBlockConfig = {
+    id: string;
+    type: 'book_list';
+    value: {
+        books: BookInfo[];
+    };
+};
+
+export function BookListBlock({data}: {data: BookListBlockConfig}) {
+    return (
+        <div className={cn('content-block-book-list')}>
+            {data.value.books.map((book) => <BookTile key={book.id} book={book} />)}
+        </div>
+    );
+}

src/app/pages/flex-page/blocks/ContentBlock.tsx

@@ -9,6 +9,7 @@ import { HTMLBlockConfig, HTMLBlock } from './HTMLBlock';
 import { LinksBlockConfig, LinksBlock } from './LinksBlock';
 import { QuoteBlock, QuoteBlockConfig } from './QuoteBlock';
 import { FAQBlockConfig, FAQBlock } from './FAQBlock';
+import { BookListBlockConfig, BookListBlock } from './BookListBlock';
 
 export type ContentBlockConfig =
     LinksBlockConfig |
@@ -20,6 +21,7 @@ export type ContentBlockConfig =
     RichTextBlockConfig |
     QuoteBlockConfig |
     FAQBlockConfig |
+    BookListBlockConfig |
     CardsBlockConfig;
 
 export function ContentBlocks({data}: {data: ContentBlockConfig[]}) {
@@ -51,6 +53,8 @@ export function ContentBlock({data}: {data: ContentBlockConfig}) {
            return <QuoteBlock data={data} />;
         case 'faq':
            return <FAQBlock data={data} />;
+        case 'book_list':
+           return <BookListBlock data={data} />;
         default:
             return <pre>{JSON.stringify(data, null, 2)}</pre>;
     }

src/app/pages/flex-page/blocks/RichTextBlock.scss

@@ -9,12 +9,12 @@
     width: 100%;
     height: auto;
   }
-  
+
   img.richtext-image.left {
     float: left;
     margin-right: $normal-margin;
   }
-  
+
   img.richtext-image.right {
     float: right;
     margin-left: $normal-margin;
@@ -23,7 +23,7 @@
   > *:first-child {
     margin-top: 0;
   }
-  > *:last-child {
+  > *:not(h1, h2, h3, h4, h5, h6):last-child {
     margin-bottom: 0;
   }
 

src/app/pages/flex-page/flex-page.scss

@@ -0,0 +1,4 @@
+
+.page.flex-page {
+  overflow: visible;
+}

src/app/pages/flex-page/flex-page.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { LoadedPage } from '~/components/jsx-helpers/loader-page';
 import { ContentBlocks, ContentBlockConfig } from './blocks/ContentBlock';
+import './flex-page.scss';
 
 type Data = {
     body: ContentBlockConfig[];

test/src/pages/flex-page.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ShellContextProvider from '~/../../test/helpers/shell-context';
 import {render, screen} from '@testing-library/preact';
 import {describe, it} from '@jest/globals';
 import userEvent from '@testing-library/user-event';
@@ -38,9 +39,11 @@ let body: Data['body'];
 
 function Component() {
     return (
-        <MemoryRouter initialEntries={['']}>
-            <FlexPage data={{body}} />
-        </MemoryRouter>
+        <ShellContextProvider>
+            <MemoryRouter initialEntries={['']}>
+                <FlexPage data={{body}} />
+            </MemoryRouter>
+        </ShellContextProvider>
     );
 }
 
@@ -156,6 +159,11 @@ describe('flex-page', () => {
         expect(screen.getAllByText('Some text with')).toHaveLength(1);
         expect(screen.getAllByText('formatting')).toHaveLength(1);
     });
+    it('renders bookListBlock', () => {
+        body = [bookListBlock()];
+        render(<Component />);
+        expect(screen.getAllByText('book title')).toHaveLength(1);
+    });
 });
 
 function imageBlock(name: string) {
@@ -338,3 +346,26 @@ function sectionBlock(): ContentBlockConfig {
         }
     };
 }
+
+function bookListBlock(): ContentBlockConfig {
+    return {
+        id: 'book-list-id',
+        type: 'book_list',
+        value: {
+            books: [
+                {
+                    id: 1,
+                    slug: 'book-slug',
+                    title: 'book title',
+                    webviewRexLink: 'webview-rex-link',
+                    webviewLink: 'webview-link',
+                    highResolutionPdfUrl: 'high-res-url',
+                    lowResolutionPdfUrl: 'low-res-url',
+                    coverUrl: 'cover-url',
+                    bookState: 'book-state',
+                    promoteSnippet: [],
+                }
+            ]
+        }
+    };
+}