@newskit-render/core 0.0.0-d55b7d88

package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap

@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Lead should render Lead 1`] = `
+<DocumentFragment>
+  <div
+    class="css-mcaqg8"
+    data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
+  >
+    <div
+      class="css-13byt3y"
+      data-testid="featureVerticalCell"
+    >
+      <div
+        class="css-1v4r5rv"
+      >
+        <div
+          class="css-x4egtb"
+        >
+          <figure
+            class="css-1ig6h8n"
+          >
+            <img
+              alt=""
+              data-nimg="fill"
+              decoding="async"
+              loading="lazy"
+              sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+              src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
+              srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
+              style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent;"
+            />
+          </figure>
+        </div>
+        <div
+          class="css-1shocxe"
+        >
+          <div
+            class="css-l3wl0d"
+          >
+            <div
+              class="css-8oi1su"
+            >
+              <a
+                class="nk-card-link css-c1j6lb"
+                href="catagory-one/demo-1/test-headline"
+              >
+                <section
+                  class="nk-card-headline css-1jxtwhc"
+                >
+                  <h3
+                    class="nk-headline-heading css-oeq8ks"
+                  >
+                    test headline
+                  </h3>
+                </section>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="css-1gjeojb"
+    >
+      <div
+        class="css-13byt3y"
+        data-testid="titleVerticalCell-0"
+      >
+        <div
+          class="css-1z995g"
+        >
+          <div
+            class="css-1rsw0n0"
+          >
+            <figure
+              class="css-1ig6h8n"
+            >
+              <img
+                alt=""
+                data-nimg="fill"
+                decoding="async"
+                loading="lazy"
+                sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+                src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
+                srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
+                style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent;"
+              />
+            </figure>
+          </div>
+          <div
+            class="css-1r2lt0d"
+          >
+            <div
+              class="css-13pp6jk"
+            >
+              <div
+                class="css-6vc2ul"
+              >
+                <a
+                  class="nk-card-link css-c1j6lb"
+                  href="catagory-two/demo-2/test-headline-2"
+                >
+                  <section
+                    class="nk-card-headline css-4kc5mr"
+                  >
+                    <h3
+                      class="nk-headline-heading css-oeq8ks"
+                    >
+                      test headline 2
+                    </h3>
+                  </section>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="css-13byt3y"
+        data-testid="titleVerticalCell-1"
+      >
+        <div
+          class="css-1z995g"
+        >
+          <div
+            class="css-1rsw0n0"
+          >
+            <figure
+              class="css-1ig6h8n"
+            >
+              <img
+                alt=""
+                data-nimg="fill"
+                decoding="async"
+                loading="lazy"
+                sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+                src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
+                srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
+                style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent;"
+              />
+            </figure>
+          </div>
+          <div
+            class="css-1r2lt0d"
+          >
+            <div
+              class="css-13pp6jk"
+            >
+              <div
+                class="css-6vc2ul"
+              >
+                <a
+                  class="nk-card-link css-c1j6lb"
+                  href="catagory-three/demo-3/test-headline-3"
+                >
+                  <section
+                    class="nk-card-headline css-4kc5mr"
+                  >
+                    <h3
+                      class="nk-headline-heading css-oeq8ks"
+                    >
+                      test headline 3
+                    </h3>
+                  </section>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/components/section/layouts/__tests__/__snapshots__/SectionTitle.test.tsx.snap

@@ -0,0 +1,354 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1hrjdv4"
+    data-testid="SectionTitleBar"
+  >
+    <div
+      class="css-14v8j6o"
+    >
+      <div
+        class="css-16bai6p"
+      >
+        <section
+          class="css-3bvy7k"
+        >
+          <h3
+            class="nk-headline-heading css-b3iww6"
+          >
+            Section 1
+          </h3>
+        </section>
+      </div>
+      <div
+        class="css-1h0bvuz"
+      >
+        <a
+          class="css-3gj75m"
+          href="/section-one"
+        >
+          <span
+            class="css-1xnclyu"
+          >
+            <span
+              class="css-1o99qvy"
+            >
+              <span
+                class="css-14vfegn"
+              >
+                Link
+              </span>
+            </span>
+            <span
+              class="css-1o99qvy"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-19o8to0-EmotionIconBase ex0cdmw0"
+                fill="currentColor"
+                focusable="false"
+                overrides="[object Object]"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                />
+              </svg>
+            </span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SectionTitle SectionTitle with title 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1ujfthp"
+    data-testid="SectionTitleBar"
+  >
+    <div
+      class="css-14v8j6o"
+    >
+      <div
+        class="css-16bai6p"
+      >
+        <section
+          class="css-3bvy7k"
+        >
+          <h3
+            class="nk-headline-heading css-4eltk5"
+          >
+            Section 1
+          </h3>
+        </section>
+      </div>
+      <div
+        class="css-1h0bvuz"
+      >
+        <a
+          class="css-686sn5"
+          href="/section-one"
+        >
+          <span
+            class="css-1xnclyu"
+          >
+            <span
+              class="css-1o99qvy"
+            >
+              <span
+                class="css-14vfegn"
+              >
+                Link
+              </span>
+            </span>
+            <span
+              class="css-1o99qvy"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-19o8to0-EmotionIconBase ex0cdmw0"
+                fill="currentColor"
+                focusable="false"
+                overrides="[object Object]"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                />
+              </svg>
+            </span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SectionTitle SectionTitle without extra space 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="css-1ms0cs2"
+        data-testid="addTopSpace"
+      >
+        <hr
+          aria-hidden="true"
+          class="css-90bet9"
+          data-testid="divider"
+        />
+      </div>
+      <div
+        class="css-1ujfthp"
+        data-testid="SectionTitleBar"
+      >
+        <div
+          class="css-14v8j6o"
+        >
+          <div
+            class="css-16bai6p"
+          >
+            <section
+              class="css-3bvy7k"
+            >
+              <h3
+                class="nk-headline-heading css-4eltk5"
+              >
+                Section 1
+              </h3>
+            </section>
+          </div>
+          <div
+            class="css-1h0bvuz"
+          >
+            <a
+              class="css-686sn5"
+              href="/section-one"
+            >
+              <span
+                class="css-1xnclyu"
+              >
+                <span
+                  class="css-1o99qvy"
+                >
+                  <span
+                    class="css-14vfegn"
+                  >
+                    Link
+                  </span>
+                </span>
+                <span
+                  class="css-1o99qvy"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="css-19o8to0-EmotionIconBase ex0cdmw0"
+                    fill="currentColor"
+                    focusable="false"
+                    overrides="[object Object]"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M0 0h24v24H0z"
+                      fill="none"
+                    />
+                    <path
+                      d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="css-1ms0cs2"
+      data-testid="addTopSpace"
+    >
+      <hr
+        aria-hidden="true"
+        class="css-90bet9"
+        data-testid="divider"
+      />
+    </div>
+    <div
+      class="css-1ujfthp"
+      data-testid="SectionTitleBar"
+    >
+      <div
+        class="css-14v8j6o"
+      >
+        <div
+          class="css-16bai6p"
+        >
+          <section
+            class="css-3bvy7k"
+          >
+            <h3
+              class="nk-headline-heading css-4eltk5"
+            >
+              Section 1
+            </h3>
+          </section>
+        </div>
+        <div
+          class="css-1h0bvuz"
+        >
+          <a
+            class="css-686sn5"
+            href="/section-one"
+          >
+            <span
+              class="css-1xnclyu"
+            >
+              <span
+                class="css-1o99qvy"
+              >
+                <span
+                  class="css-14vfegn"
+                >
+                  Link
+                </span>
+              </span>
+              <span
+                class="css-1o99qvy"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="css-19o8to0-EmotionIconBase ex0cdmw0"
+                  fill="currentColor"
+                  focusable="false"
+                  overrides="[object Object]"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/components/section/layouts/gridUtils.ts

@@ -0,0 +1,21 @@
+// xsMargin="space000" margins on Grid
+// xsColumnGutter="space000" padding on left and right of cells
+// xsRowGutter="space000" margin-top of cells
+
+// TODO: figure out column gutters
+
+export const outerGridOverride = {
+  rowGap: {
+    xs: 'space070',
+    md: 'space060',
+    xl: 'space000',
+  },
+}
+
+export const innerGridOverride = {
+  rowGap: {
+    xs: 'space070',
+    md: 'space060',
+    xl: 'space050',
+  },
+}

package/components/section/layouts/index.tsx

@@ -0,0 +1,4 @@
+export * from './Lead'
+export * from './SectionTitle'
+export * from './FallBack'
+export * from './Rows'

package/components/section/layouts/types.ts

@@ -0,0 +1,13 @@
+import { MQ } from 'newskit'
+import { Article } from '@newskit-render/standalone-components'
+import { ArticleSlice } from '../../../helpers/global-types'
+import { VariantsName } from '../../teaser/teaserVariants'
+
+export type LayoutProps = {
+  slice?: ArticleSlice
+  articles?: Article[]
+  sectionURL?: string
+  variant?: VariantsName
+  colums?: MQ<string>
+  'data-testid'?: string
+}

package/components/section/pageBlock.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import CollectionBlock from './CollectionBlock'
+import { CollectionBlock as Collection } from '../../helpers/global-types'
+/* 
+  We are using collections from the page schema but there are other block types that could be implemented (image, paragraph, tweet and more).
+  See the schema for the full list
+*/
+// CollectionBlock(collection, i)
+const pageBlock = (type: string) => {
+  const blockTypes = {
+    collection: (collection: Collection, i: number) => (
+      <CollectionBlock collection={collection} index={i} />
+    ),
+    image: () => null,
+    paragraph: () => null,
+    tweet: () => null,
+    default: () => null,
+  }
+
+  return blockTypes[type] || blockTypes.default
+}
+
+export default pageBlock

package/components/section/sectionUtils.ts

@@ -0,0 +1,61 @@
+import {
+  Media,
+  ArticleTeaser,
+  TeaserCategory,
+} from '../../helpers/global-types'
+
+export const ratioMap: Record<string, string> = {
+  portrait: '2:3',
+  landscape: '3:2',
+  hero: '16:9',
+}
+
+export const getMedia = (media?: Media) => {
+  if (!media) {
+    return {
+      src: '',
+      alt: '',
+      loadingAspectRatio: '',
+    }
+  }
+  return 'crops' in media
+    ? {
+        src: media?.crops[0].url || '',
+        alt: media?.crops[0].alt || '',
+        loadingAspectRatio: ratioMap[media?.crops[0].aspectRatio]
+          ? ratioMap[media?.crops[0].aspectRatio]
+          : media?.crops[0].aspectRatio || '',
+      }
+    : {
+        src: media?.posterImage?.crop?.url || '',
+        alt: media?.posterImage?.crop?.alt || '',
+        loadingAspectRatio: ratioMap[media?.posterImage?.crop?.aspectRatio]
+          ? ratioMap[media?.posterImage?.crop?.aspectRatio]
+          : media?.posterImage?.crop?.aspectRatio || '',
+      }
+}
+
+export const teaserSummary = (summary: { children?: { text?: string }[] }) =>
+  summary?.children?.[0]?.text || ''
+
+export const generateArticleSlug = (title: string): string =>
+  title
+    .replace(/[^a-zA-Z0-9 ]/g, '')
+    .replace(/\s\s+/g, ' ')
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .trim()
+
+export const getCategorySlug = (categories: { slug: string }[]): string => {
+  if (!Array.isArray(categories) || categories.length === 0)
+    return 'uncategorized'
+  return categories[0].slug || 'uncategorized'
+}
+
+export const teaserURL = (teaser: ArticleTeaser) => {
+  const { id, headline, categories } = teaser
+  const catagory = getCategorySlug(categories as TeaserCategory[])
+  return id && headline
+    ? `${catagory}/${id}/${generateArticleSlug(headline)}`
+    : catagory
+}