Merge to master (#1019)

* Updated dependencies * Updated dependencies * Updated dependencies * Fd 2777 update design system for special cards (#1014) * Fd 2918 hybrid card 4 without an image not display correctly horizontal card 4 without an image should not have fd background color (#1018) * Added new cards to component library. Added new cards to README.md * FD-2886: Update read article cards 1, 2 and 4 (#1020) Co-authored-by: Floris Jansen <floris.jansen@kpn.com> Co-authored-by: Willem Liu <willem.liu@fdmediagroep.nl> Co-authored-by: AlexanderEerenberg <alexander.eerenberg@fdmediagroep.nl> Co-authored-by: floris-fd <89779242+floris-fd@users.noreply.github.com> Co-authored-by: Floris Jansen <floris.jansen@kpn.com>
FDMediagroep · Jul 28, 2022 · c979535 · c979535 · vercel · Jul 28, 2022
1 parent f36c39a
commit c979535
Show file tree

Hide file tree

Showing 80 changed files with 2,088 additions and 207 deletions.
diff --git a/README.md b/README.md
@@ -1191,6 +1191,50 @@ function Foo() {
 
 </details>
 
+<details>
+<summary>Horizontal Card 4</summary>
+
+[Demo](https://design-system.fd.nl/card/horizontal-4)
+
+Component CSS:
+
+```
+import "@fdmg/design-system/components/design-tokens/design-tokens.css";
+import "@fdmg/design-system/components/card/HorizontalCard4.css";
+import "@fdmg/design-system/components/utils/image/FdImgix";
+```
+
+```
+import { HorizontalCard3 } from "@fdmg/design-system/components/card/HorizontalCard4";
+import { FdImgix } from '@fdmg/design-system/components/utils/image/FdImgix';
+
+function Foo() {
+    return (
+        <HorizontalCard4
+            className="xs-12"
+            imageComponent={
+                <FdImgix
+                    src="https://fd-internal-development.imgix.net/XSsvNsfpytwq-OQdMRmsCm7J1i8.jpg?auto=format"
+                    imageSizes={{
+                        widthS: '160px',
+                        widthM: '244px',
+                        widthL: '244px',
+                    }}
+                />
+            }
+            id="1343052a"
+            url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
+            label="Omgekeerde kruistocht"
+            time="13:11"
+            title="Levensgevaarlijk Libanon"
+            intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
+        />
+    );
+}
+```
+
+</details>
+
 <details>
 <summary>Hybrid Card 1</summary>
 
@@ -1312,6 +1356,48 @@ function Foo() {
 
 </details>
 
+<details>
+<summary>Hybrid Card 4</summary>
+
+[Demo](https://design-system.fd.nl/card/hybrid-4)
+
+Component CSS:
+
+```
+import "@fdmg/design-system/components/design-tokens/design-tokens.css";
+import "@fdmg/design-system/components/card/HybridCard4.css";
+import "@fdmg/design-system/components/utils/image/FdImgix.css";
+```
+
+```
+import { HybridCard4 } from "@fdmg/design-system/components/card/HybridCard4";
+import { FdImgix } from '@fdmg/design-system/components/utils/image/FdImgix';
+
+function Foo() {
+    return (
+        <HybridCard4
+            id="1345386"
+            label="Markten"
+            title="Beleggers verwachten nieuwe klap op beurzen",
+            url="https://fd.nl/beurs/1345386/amerikaanse-technologiebeurs-nasdaq-wordt-mogelijk-strenger-dan-euronext"
+            intro: `Een tweede coronagolf staat bovenaan de lijst met zorgen van fondsmanagers, volgens een enquête van Bank of America.`,
+            imageComponent={
+                <FdImgix
+                    src="https://fd-internal-development.imgix.net/XSsvNsfpytwq-OQdMRmsCm7J1i8.jpg?auto=format"
+                    imageSizes={{
+                        widthS: '300px',
+                        widthM: '351px',
+                        widthL: '599px',
+                    }}
+                />
+            }
+        />
+    );
+}
+```
+
+</details>
+
 <details>
 <summary>LinkCard</summary>
 
@@ -1515,6 +1601,48 @@ function Foo() {
 
 </details>
 
+<details>
+<summary>Vertical Card 6</summary>
+
+[Demo](https://design-system.fd.nl/card/vertical-6)
+
+Component CSS:
+
+```
+import "@fdmg/design-system/components/design-tokens/design-tokens.css";
+import "@fdmg/design-system/components/card/VerticalCard6.css";
+import "@fdmg/design-system/components/utils/image/FdImgix.css";
+```
+
+```
+import { VerticalCard6 } from "@fdmg/design-system/components/card/VerticalCard6";
+import { FdImgix } from "@fdmg/design-system/components/utils/image/FdImgix";
+
+function Foo() {
+    return (
+        <VerticalCard6
+            className="xs-12 s-6 m-4 l-3"
+            imageComponent={
+                <FdImgix
+                    src={"https://fd-internal-development.imgix.net/XSsvNsfpytwq-OQdMRmsCm7J1i8.jpg?auto=format"}
+                    imageSizes={{
+                        widthS: '300px',
+                        widthM: '351px',
+                        widthL: '599px',
+                    }}
+                />
+            }
+            id="1345422"
+            label="Arbeidsmarkt"
+            title="Lockdown leidt tot recordstijging aantal WW-uitkeringen in april"
+            url="https://fd.nl/economie-politiek/1345422/lockdown-leidt-tot-recordstijging-aantal-ww-uitkeringen-in-april"
+        />
+    );
+}
+```
+
+</details>
+
 ### Misc.
 
 <details>

diff --git a/__tests__/components/Accordion.test.tsx b/__tests__/components/Accordion.test.tsx
@@ -178,7 +178,7 @@ describe('Accordion', () => {
         const { container } = render(<Accordion items={items} />);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/ArticleLinkCard.test.tsx b/__tests__/components/ArticleLinkCard.test.tsx
@@ -33,7 +33,7 @@ describe('ArticleLinkCard', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/ArticleMeta.test.tsx b/__tests__/components/ArticleMeta.test.tsx
@@ -50,7 +50,7 @@ describe('ArticleMeta', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/BulletPoint.test.tsx b/__tests__/components/BulletPoint.test.tsx
@@ -48,7 +48,7 @@ describe('BulletPoint', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/Modal.test.tsx b/__tests__/components/Modal.test.tsx
@@ -41,7 +41,7 @@ describe('Modal', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/NumberFrame.test.tsx b/__tests__/components/NumberFrame.test.tsx
@@ -21,7 +21,7 @@ describe('NumberFrame', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/Quote.test.tsx b/__tests__/components/Quote.test.tsx
@@ -18,7 +18,7 @@ describe('Quote', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/ReadMore.test.tsx b/__tests__/components/ReadMore.test.tsx
@@ -23,7 +23,7 @@ describe('ReadMore', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/StockTicker.test.tsx b/__tests__/components/StockTicker.test.tsx
@@ -65,12 +65,12 @@ describe('StockTicker', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();
         expect(
-            container.firstElementChild.classList.contains('test-class')
+            container.firstElementChild?.classList.contains('test-class')
         ).toBeTruthy();
     });
 });
diff --git a/__tests__/components/Summary.test.tsx b/__tests__/components/Summary.test.tsx
@@ -34,7 +34,7 @@ describe('Summary', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/TextFrame.test.tsx b/__tests__/components/TextFrame.test.tsx
@@ -27,7 +27,7 @@ describe('TextFrame', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/WordFrame.test.tsx b/__tests__/components/WordFrame.test.tsx
@@ -27,7 +27,7 @@ describe('WordFrame', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/article-image/ArticleImage.test.tsx b/__tests__/components/article-image/ArticleImage.test.tsx
@@ -48,7 +48,7 @@ describe('ArticleImage', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/article-image/InfographicExtended.test.tsx b/__tests__/components/article-image/InfographicExtended.test.tsx
@@ -95,7 +95,7 @@ describe('Infographic', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/article-tags/ArticleTags.test.tsx b/__tests__/components/article-tags/ArticleTags.test.tsx
@@ -104,7 +104,7 @@ describe('AuthorInfo', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/author-info/AuthorInfo.test.tsx b/__tests__/components/author-info/AuthorInfo.test.tsx
@@ -83,7 +83,7 @@ describe('AuthorInfo', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/button/Button.test.tsx b/__tests__/components/button/Button.test.tsx
@@ -40,7 +40,7 @@ describe('Button', () => {
         const { container } = render(<Button>Knopje</Button>);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/button/ButtonCta.test.tsx b/__tests__/components/button/ButtonCta.test.tsx
@@ -40,7 +40,7 @@ describe('ButtonCta', () => {
         const { container } = render(<ButtonCta>Knopje</ButtonCta>);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/button/ButtonFollow.test.tsx b/__tests__/components/button/ButtonFollow.test.tsx
@@ -39,7 +39,7 @@ describe('ButtonFollow', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/button/ButtonGhost.test.tsx b/__tests__/components/button/ButtonGhost.test.tsx
@@ -42,7 +42,7 @@ describe('ButtonGhost', () => {
         const { container } = render(<ButtonGhost>Knopje</ButtonGhost>);
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/button/Dropdown.test.tsx b/__tests__/components/button/Dropdown.test.tsx
@@ -60,7 +60,7 @@ describe('Dropdown', () => {
         const { container } = render(<Dropdown>Knopje</Dropdown>);
         console.log(container.firstElementChild.classList);
         // expect(
-        //     container.firstElementChild.classList.contains(
+        //     container.firstElementChild?.classList.contains(
         //         getCssClassNames()[0]
         //     )
         // ).toBeTruthy();

diff --git a/__tests__/components/card/HorizontalCard1.test.tsx b/__tests__/components/card/HorizontalCard1.test.tsx
@@ -20,7 +20,7 @@ describe('HorizontalCard1', () => {
         expect(getByText('This is the title')).toBeTruthy();
         expect(getByText('Ondernemen')).toBeTruthy();
         expect(getByText('11:40')).toBeTruthy();
-        expect(container.querySelector('[href]').getAttribute('href')).toBe(
+        expect(container.querySelector('[href]')?.getAttribute('href')).toBe(
             'https://example.com/1/This is the title'
         );
     });
@@ -68,7 +68,7 @@ describe('HorizontalCard1', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();

diff --git a/__tests__/components/card/HorizontalCard2.test.tsx b/__tests__/components/card/HorizontalCard2.test.tsx
@@ -22,7 +22,7 @@ describe('HorizontalCard2', () => {
         expect(getByText('This is the intro of the card')).toBeTruthy();
         expect(getByText('Ondernemen')).toBeTruthy();
         expect(getByText('11:50')).toBeTruthy();
-        expect(container.querySelector('[href]').getAttribute('href')).toBe(
+        expect(container.querySelector('[href]')?.getAttribute('href')).toBe(
             'https://example.com/1/This is the title'
         );
     });
@@ -55,7 +55,7 @@ describe('HorizontalCard2', () => {
         );
 
         expect(
-            container.firstElementChild.classList.contains(
+            container.firstElementChild?.classList.contains(
                 getCssClassNames()[0]
             )
         ).toBeTruthy();