Skip to content

Commit

Permalink
Merge b11c19e into 378b29b
Browse files Browse the repository at this point in the history
  • Loading branch information
@willemliufdmg
willemliufdmg committed Mar 30, 2022
2 parents 378b29b + b11c19e commit 5b44a7f
Show file tree
Hide file tree
Showing 8 changed files with 199 additions and 165 deletions.
17 changes: 12 additions & 5 deletions __tests__/components/card/HybridCard2.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ describe('HybridCard2', () => {
const { container, getByText } = render(
<HybridCard2
id="1"
intro="This is the intro"
label="Ondernemen"
title="This is the title"
url="https://example.com/1/This is the title"
Expand All @@ -19,7 +18,6 @@ describe('HybridCard2', () => {

expect(getByText('This is the title')).toBeTruthy();
expect(getByText('Ondernemen')).toBeTruthy();
expect(getByText('This is the intro')).toBeTruthy();
expect(container.querySelector('[href]').getAttribute('href')).toBe(
'https://example.com/1/This is the title'
);
Expand All @@ -29,9 +27,12 @@ describe('HybridCard2', () => {
const { container } = render(
<HybridCard2
id="1"
intro="This is the intro"
label="Ondernemen"
title="This is the title"
imageUrl="https://images.example.com/image.png"
imageUrlS="https://images.example.com/imageS.png"
imageUrlM="https://images.example.com/imageM.png"
imageUrlL="https://images.example.com/imageL.png"
url="https://example.com/1/This is the title"
isRead={true}
/>
Expand All @@ -43,9 +44,12 @@ describe('HybridCard2', () => {
const { container } = render(
<HybridCard2
id="1"
intro="This is the intro"
label="Ondernemen"
title="This is the title"
imageUrl="https://images.example.com/image.png"
imageUrlS="https://images.example.com/imageS.png"
imageUrlM="https://images.example.com/imageM.png"
imageUrlL="https://images.example.com/imageL.png"
url="https://example.com/1/This is the title"
variant="variant-1"
/>
Expand All @@ -57,9 +61,12 @@ describe('HybridCard2', () => {
const { container } = render(
<HybridCard2
id="1"
intro="This is the intro"
label="Ondernemen"
title="This is the title"
imageUrl="https://images.example.com/image.png"
imageUrlS="https://images.example.com/imageS.png"
imageUrlM="https://images.example.com/imageM.png"
imageUrlL="https://images.example.com/imageL.png"
url="https://example.com/1/This is the title"
/>
);
Expand Down
140 changes: 48 additions & 92 deletions __tests__/components/card/__snapshots__/HybridCard2.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,29 @@ exports[`HybridCard2 should render is-read correctly 1`] = `
class="s__p-0 s__pt+4 s__pr+4 s__pl+4"
href="https://example.com/1/This is the title"
>
<figure
class="xs__m-0 s__mt-4 s__mr-4 s__mb+3 s__ml-4"
>
<picture>
<source
media="(max-width:639px)"
srcset="https://images.example.com/imageS.png"
/>
<source
media="(max-width:860px)"
srcset="https://images.example.com/imageM.png"
/>
<source
media="(min-width:861px)"
srcset="https://images.example.com/imageL.png"
/>
<img
alt="This is the title"
src="https://images.example.com/image.png"
/>
</picture>
<figcaption />
</figure>
<div
class="teaserText xs__pt+3 xs__pr+2 xs__pb+2 xs__pl+3 s__p-0"
>
Expand All @@ -22,6 +45,7 @@ exports[`HybridCard2 should render is-read correctly 1`] = `
>
Ondernemen
</span>
<time />
</div>
<div
class="textContainer"
Expand All @@ -31,55 +55,9 @@ exports[`HybridCard2 should render is-read correctly 1`] = `
>
This is the title
</h1>
<p
class="intro body-text sans s xs__m-0 xs__mt+2"
>
This is the intro
</p>
</div>
</div>
</a>
<footer
class="footer footer xs__p-0 xs__pr+4 xs__pb+4 xs__pl+4"
>
<menu
class="xs__m-0"
>
<a
class="xs__mt+2"
>
<span
class="icon"
>
<svg
fill="none"
height="28"
viewBox="0 0 28 28"
width="28"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M21 3.5V24.5L14 21L7 24.5V3.5H21ZM18.6667 5.83333H9.33333V20.7247L14 18.3913L18.6667 20.7247V5.83333Z"
fill="#73655F"
fill-rule="evenodd"
/>
</svg>
</span>
<span
data-bookmark="bookmark"
>
Bewaren
</span>
</a>
</menu>
</footer>
</article>
</div>
`;
Expand All @@ -96,6 +74,29 @@ exports[`HybridCard2 should render variant-1 correctly 1`] = `
class="s__p-0 s__pt+4 s__pr+4 s__pl+4"
href="https://example.com/1/This is the title"
>
<figure
class="xs__m-0 s__mt-4 s__mr-4 s__mb+3 s__ml-4"
>
<picture>
<source
media="(max-width:639px)"
srcset="https://images.example.com/imageS.png"
/>
<source
media="(max-width:860px)"
srcset="https://images.example.com/imageM.png"
/>
<source
media="(min-width:861px)"
srcset="https://images.example.com/imageL.png"
/>
<img
alt="This is the title"
src="https://images.example.com/image.png"
/>
</picture>
<figcaption />
</figure>
<div
class="teaserText xs__pt+3 xs__pr+2 xs__pb+2 xs__pl+3 s__p-0"
>
Expand All @@ -107,6 +108,7 @@ exports[`HybridCard2 should render variant-1 correctly 1`] = `
>
Ondernemen
</span>
<time />
</div>
<div
class="textContainer"
Expand All @@ -116,55 +118,9 @@ exports[`HybridCard2 should render variant-1 correctly 1`] = `
>
This is the title
</h1>
<p
class="intro body-text sans s xs__m-0 xs__mt+2"
>
This is the intro
</p>
</div>
</div>
</a>
<footer
class="footer footer xs__p-0 xs__pr+4 xs__pb+4 xs__pl+4"
>
<menu
class="xs__m-0"
>
<a
class="xs__mt+2"
>
<span
class="icon"
>
<svg
fill="none"
height="28"
viewBox="0 0 28 28"
width="28"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M21 3.5V24.5L14 21L7 24.5V3.5H21ZM18.6667 5.83333H9.33333V20.7247L14 18.3913L18.6667 20.7247V5.83333Z"
fill="#73655F"
fill-rule="evenodd"
/>
</svg>
</span>
<span
data-bookmark="bookmark"
>
Bewaren
</span>
</a>
</menu>
</footer>
</article>
</div>
`;
1 change: 1 addition & 0 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import '@fdmg/css-grid/css/flex.css';
import '@fdmg/css-grid/css/grid.css';
import '@fdmg/css-grid/GridContainer.css';
import '../public/assets/fonts/style.css';
import '../src/design-tokens/design-tokens.scss';
import './_app.scss';
import './_app_markdown.scss';
Expand Down
3 changes: 0 additions & 3 deletions pages/_document.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable @next/next/no-css-tags */
import React from 'react';
import Document, { Html, Main, NextScript, Head } from 'next/document';

Expand Down Expand Up @@ -84,8 +83,6 @@ class MyDocument extends Document<any> {
content="/ms-icon-144x144.png"
/>

<link href="/assets/fonts/style.css" rel="stylesheet" />

<meta property="og:site_name" content="FD Design System" />

<meta property="og:type" content="article" />
Expand Down
51 changes: 32 additions & 19 deletions pages/card/hybrid-2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,63 @@ import {
import Head from 'next/head';
import { globalCssClassNames } from '../../src/utils/globalCssClassNames';

const hybridCards1: any = [
const hybridCards2: any = [
{
id: '1345386',
label: 'Markten',
title: "'Beleggers verwachten nieuwe klap op beurzen'",
imageUrl:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300',
imageUrlS:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300',
imageUrlM:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=351&h=234',
imageUrlL:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=599&h=399',
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.`,
time: '08:10',
readingTime: 3,
},
{
id: '1345186',
label: 'Markten',
title: `Deloitte krijgt met Rianne Jans een onverstoorbare cfo in huis`,
imageUrl:
'https://images.fd.nl/MtOzOM5dkRKSllJlW5ZAjzO82yQ.jpg?rect=.21625%2c.1125703564727955%2c.50625%2c.7598499061913696&fit=crop&crop=faces&auto=format&q=45&w=300',
imageUrlS:
'https://images.fd.nl/MtOzOM5dkRKSllJlW5ZAjzO82yQ.jpg?rect=.21625%2c.1125703564727955%2c.50625%2c.7598499061913696&fit=crop&crop=faces&auto=format&q=45&w=300',
imageUrlM:
'https://images.fd.nl/MtOzOM5dkRKSllJlW5ZAjzO82yQ.jpg?rect=.095%2c.1069418386491557%2c.79625%2c.7954971857410882&fit=crop&crop=faces&auto=format&q=45&w=351&h=234',
imageUrlL:
'https://images.fd.nl/MtOzOM5dkRKSllJlW5ZAjzO82yQ.jpg?rect=.095%2c.1069418386491557%2c.79625%2c.7954971857410882&fit=crop&crop=faces&auto=format&q=45&w=599&h=399',
url: 'https://fd.nl/profiel/1345186/deloitte-krijgt-met-rianne-jans-een-onverstoorbare-cfo-in-huis',
intro: `Na een kortstondig avontuur bij het ruziënde Centric vindt financieel bestuurder Rianne Jans onderdak bij accountants. `,
time: '08:10',
variant: 'variant-1',
},
{
id: '1345444',
label: 'Arbeidsmarkt',
title: 'Bulk van de werklozen komt in de komende maanden',
imageUrl:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300',
imageUrlS:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300',
imageUrlM:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=351&h=234',
imageUrlL:
'https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=599&h=399',
url: 'https://fd.nl/economie-politiek/1345444/grootste-toename-werkloosheid-sinds-2003',
readingTime: 11,
time: '08:10',
isRead: true,
},
];

export const metaTitle = 'Hybrid Card 2';
export const metaDescription =
'Hybrid Card 2, without image, on small screens its similar to Horizontal Card 1 and wider screens similar to Vertical Card 1';
'Hybrid Card 2, without intro, on small screens its similar to Horizontal Card 1 and wider screens similar to Vertical Card 1';

function Page() {
const [bookmarked, setBookmarked] = useState(false);

function toggleBookmark() {
setBookmarked(!bookmarked);
}

return (
<>
<Head>
Expand Down Expand Up @@ -87,21 +106,15 @@ function Page() {
<>
<HybridCard2
className="xs-12 s-6 m-4 l-3"
onBookmark={toggleBookmark}
bookmarked={bookmarked}
{...hybridCards1[0]}
{...hybridCards2[0]}
/>
<HybridCard2
className="xs-12 s-6 m-4 l-3"
onBookmark={toggleBookmark}
bookmarked={bookmarked}
{...hybridCards1[1]}
{...hybridCards2[1]}
/>
<HybridCard2
className="xs-12 s-6 m-4 l-3"
onBookmark={toggleBookmark}
bookmarked={bookmarked}
{...hybridCards1[2]}
{...hybridCards2[2]}
/>
</>
</Explain>
Expand Down
2 changes: 1 addition & 1 deletion pages/cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function Page() {
</td>
<td>
<ul>
<li>Home</li>
<li>Home specials/categories</li>
</ul>
</td>
</tr>
Expand Down

0 comments on commit 5b44a7f

Please sign in to comment.