Skip to content

Commit

Permalink
Merge pull request #90 from FDMediagroep/develop
Browse files Browse the repository at this point in the history 
Horizontal card 1 without image
  • Loading branch information
@willemliufdmg
willemliufdmg authored Aug 27, 2020
2 parents 0930629 + 934e714 commit 029ce19
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 30 deletions.
26 changes: 18 additions & 8 deletions __tests__/components/card/__snapshots__/HorizontalCard1.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,15 @@ exports[`HorizontalCard1 should render is-read correctly 1`] = `
<a
href="https://example.com/1/This is the title"
>
<div
class="figure"
style="background-image: url(https://images.example.com/image.png);"
/>
<figure>
<picture>
<img
alt="This is the title"
src="https://images.example.com/image.png"
/>
</picture>
<figcaption />
</figure>
<div
class="teaserText"
>
Expand Down Expand Up @@ -50,10 +55,15 @@ exports[`HorizontalCard1 should render variant-1 correctly 1`] = `
<a
href="https://example.com/1/This is the title"
>
<div
class="figure"
style="background-image: url(https://images.example.com/image.png);"
/>
<figure>
<picture>
<img
alt="This is the title"
src="https://images.example.com/image.png"
/>
</picture>
<figcaption />
</figure>
<div
class="teaserText"
>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@fdmg/design-system",
"version": "0.4.22",
"version": "0.4.23",
"description": "FD Design System",
"types": "main.d.ts",
"main": "main.js",
Expand Down
24 changes: 24 additions & 0 deletions public/assets/images/fd-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 76 additions & 6 deletions src/components/card/HorizontalCard1.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,88 @@
margin-bottom: 0;
}

.figure.empty img {
max-width: 100%;
}
figure,
.figure.empty {
position: relative;
display: flex;
margin: 0;
flex: 0 0 100px;

picture {
position: relative;
width: 100px;
overflow: hidden;
}

img {
display: block;
margin: auto;
width: 64px;
position: absolute;
height: 100%;
left: 50%;
transform: translate(-50%, 0);
width: auto;
}

figcaption {
display: none;
font-family: map-deep-get($typography, 'font-family', 'bold'),
sans-serif;
}

&.themed {
justify-content: center;
align-items: center;
&:before {
content: '';
display: block;
width: 100%;
padding-top: 66.5%;
}
picture {
top: 0;
left: -50%;
margin: 0 -50%;
border-radius: 50%;
flex: 0 0 80px;
height: 80px;
}
&:after {
content: none;
}

&.theme1 {
background-color: #677381;
}
&.theme2 {
background-color: #f05031;
}
&.theme3 {
background-color: #ddac68;
}
&.theme4 {
background-color: #f3736b;
}
&.theme5 {
background-color: #917caa;
}
&.theme6 {
background-color: #4393ab;
}
&.theme7 {
background-color: #49a4a2;
}
&.theme8 {
background-color: #c5324b;
}
}
}

.figure.empty img {
width: 64px;
margin: auto;
}

.theme {
Expand Down Expand Up @@ -201,8 +275,4 @@
opacity: 0.5;
}
}

.empty.figure {
align-items: center;
}
}
91 changes: 84 additions & 7 deletions src/components/card/HorizontalCard1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,28 @@ import styles from './HorizontalCard1.module.scss';
import { ReadingTime } from './shared/ReadingTime';
import { getCssClassNames as getReadingTimeCssClassNames } from './shared/ReadingTime';

export type Themes =
| 'theme1'
| 'theme-1'
| 'theme2'
| 'theme-2'
| 'theme3'
| 'theme-3'
| 'theme4'
| 'theme-4'
| 'theme5'
| 'theme-5'
| 'theme6'
| 'theme-6'
| 'theme7'
| 'theme-7'
| 'theme8'
| 'theme-8';

interface Props {
id: string;
url: string;
imageUrl: string;
imageUrl?: string;
label: string;
/**
* Reading time in minutes.
Expand All @@ -17,6 +35,7 @@ interface Props {
isRead?: boolean;
updated?: boolean;
variant?: 'variant-1';
theme?: Themes;
[x: string]: any;
}

Expand All @@ -25,6 +44,41 @@ interface Props {
* @param props
*/
function HorizontalCard1(props: Props) {
let theme: string;
switch (props.theme) {
case 'theme1':
case 'theme-1':
theme = styles.theme1;
break;
case 'theme2':
case 'theme-2':
theme = styles.theme2;
break;
case 'theme3':
case 'theme-3':
theme = styles.theme3;
break;
case 'theme4':
case 'theme-4':
theme = styles.theme4;
break;
case 'theme5':
case 'theme-5':
theme = styles.theme5;
break;
case 'theme6':
case 'theme-6':
theme = styles.theme6;
break;
case 'theme7':
case 'theme-7':
theme = styles.theme7;
break;
case 'theme8':
case 'theme-8':
theme = styles.theme8;
break;
}
return (
<article
style={props.style}
Expand All @@ -34,12 +88,35 @@ function HorizontalCard1(props: Props) {
id={props.id}
>
<a href={props.url}>
<div
className={styles.figure}
style={{
backgroundImage: `url(${props.imageUrl})`,
}}
></div>
{!theme && props.imageUrl && (
<figure>
<picture>
<img
src={`${props.imageUrl}`}
alt={props.caption ?? props.title}
/>
</picture>
<figcaption>{props.caption}</figcaption>
</figure>
)}

{theme && (
<figure className={`${styles.themed} ${theme}`}>
<picture>
<img
src={`${props.imageUrl}`}
alt={props.caption}
/>
</picture>
<figcaption>{props.caption}</figcaption>
</figure>
)}

{!props.imageUrl && (
<div className={`${styles.figure} ${styles.empty}`}>
<img src="/assets/images/fd-logo.svg" />
</div>
)}

<div className={styles.teaserText}>
<div className={styles.meta}>
Expand Down
26 changes: 18 additions & 8 deletions src/pages/card/horizontal-1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,23 @@ const horizontalCards1: any = [
readingTime: 7,
},
{
id: '1343780',
url:
'https://fd.nl/economie-politiek/1343780/maak-meer-gebruik-van-het-placebo-effect-in-het-coronabeleid',
id: '1334870',
url: 'http://local.fd.nl:8888/opinie/1334870/een-europese-rente',
imageUrl:
'https://images.fd.nl/tB2lwMoC_9MPDyo28ovDjM-YPz8.jpg?fit=crop&crop=faces&auto=format&q=45&w=300',
label: 'Coronaspreekuur',
time: '06:00',
title: "'Maak meer gebruik van het placebo-effect in het coronabeleid'",
'https://fd-external-development.imgix.net/bd426d8e140cd2b07ee8e4ee8e4c70e4bc9dd3b4.jpg?fit=crop&crop=faces&auto=format,compress&q=45&w=300&h=300',
label: 'Kleintje groot',
time: '1 aug',
title: 'Eén Europese rente',
variant: 'variant-1',
theme: 'theme-7',
},
{
id: '1353344',
url:
'https://fd.nl/economie-politiek/1353344/huiseigenaren-minder-bezorgd-over-kanteling-op-woningmarkt',
label: 'Woningmarkt',
time: '6 aug',
title: 'Huiseigenaren minder bezorgd over kanteling op woningmarkt',
},
];

Expand Down Expand Up @@ -87,7 +95,8 @@ function Page() {
<li>default</li>
<li>updated</li>
<li>is read</li>
<li>variant-1</li>
<li>variant-1 themed</li>
<li>no image</li>
</ul>
</>
}
Expand All @@ -97,6 +106,7 @@ function Page() {
<HorizontalCard1 {...horizontalCards1[1]} />
<HorizontalCard1 {...horizontalCards1[2]} />
<HorizontalCard1 {...horizontalCards1[3]} />
<HorizontalCard1 {...horizontalCards1[4]} />
</>
</Explain>
</>
Expand Down

1 comment on commit 029ce19

@vercel
Copy link

@vercel vercel bot commented on 029ce19 Aug 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.