Skip to content

Commit

Permalink
Merge pull request #549 from appearhere/add-contenthub-card
Browse files Browse the repository at this point in the history 
LFR-3193: Add ContentHub Card
  • Loading branch information
@jamero102
jamero102 authored Nov 18, 2020
2 parents 359b4d5 + e0a9f53 commit e51cd04
Show file tree
Hide file tree
Showing 11 changed files with 404 additions and 3 deletions.
4 changes: 2 additions & 2 deletions packages/core/src/components/Cards/Card/Card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import css from './Card.css';

type Props = {
className?: string,
href: string,
target: '_blank' | '_self' | '_parent' | '_top',
href?: string,
target?: '_blank' | '_self' | '_parent' | '_top',
children: React.Node,
}

Expand Down
143 changes: 143 additions & 0 deletions packages/core/src/components/Cards/EditorialCard/ContentHubCard.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
.root {
display: flex;
width: 100%;
font-family: var(--font-avenir);
box-sizing: border-box;
height: 100%;
background: var(--color-white);
}

.root:after {
content: '';
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
opacity: 0;
top: 0;
left: 0;
transition: opacity 200ms ease-in-out;
z-index: -1;
box-shadow: 0px 0px 5px 0px rgb(216,216,216,1), 0px 0px 15px 0px rgb(0,0,0,0.25);
}

.root:focus {
border: 2px solid var(--color-greyLighter);
box-sizing: content-box;
margin: -2px;
}

.imageContainer, .content {
vertical-align: top;
}

.imageContainer {
width: 40%;
}

.image {
width: 100%;
height: 100%;
object-fit: cover;
}

.content {
width: 60%;
padding: 1rem;
display: flex;
flex-direction: column;
}

.categoryContainer {
display: flex;
font-style: normal;
font-weight: var(--fontweight-regular);
font-size: var(--fontsize-small-i);
line-height: var(--lineheight-large-i);
}

.category {
color: var(--color-gold);
margin-right: 0.5rem;
text-decoration-line: underline;
}

.date {
color: var(--color-black);
margin-left: 0.5rem;
}

.title {
margin-block-end: 0rem;
margin-block-start: 0.5rem;
}

.titleLink {
color: var(--color-black);
font-style: normal;
font-weight: var(--fontweight-demi);
font-size: var(--fontsize-large-i);
line-height: var(--fontsize-large-iii);
text-transform: none;
margin-top: 0.5rem;
width: 100%;
text-decoration: none;
}

.titleLink:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.description {
font-size: var(--fontsize-small-i);
color: var(--color-greyDark);
margin: 0.25rem 0 0 0;
}

.chipContainer {
margin-top: 1rem;
position: relative;
}

.btn {
margin-top: 1rem;
width: fit-content;
position: relative;
}

@media(hover) {
.root:hover:after {
opacity: 1;
}
}

@media (max-width: 23.125rem) {
.root {
flex-direction: column;
}

.imageContainer {
width: 100%;
}

.image {
width: 100%;
height: auto;
max-width: 23.125rem;
max-height: 15rem;
}

.content {
width: 100%;
}

.titleLink {
font-size: var(--font-large-ii);
line-height: var(--lineheight-large-i);
}
}
78 changes: 78 additions & 0 deletions packages/core/src/components/Cards/EditorialCard/ContentHubCard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
// @flow
import * as React from 'react';

import Card from '../Card/Card';
import css from './ContentHubCard.css';
import FittedImage from '../../FittedImage/FittedImage';
import ChipGroup from '../../ChipGroup/ChipGroup';
import Btn from '../../Btn/Btn';
import cx from 'classnames';

type Tag = {
href: string,
name: string,
}

type Props = {
description?: string,
category?: string,
date?: string,
cta?: string,
tags?: Array<Tag>,
src: string,
title: string,
href: string,
onButtonClick?: Function,
className?: string,
};

const ContentHubCard = ({
description,
category,
date,
cta,
tags,
src,
title,
href,
onButtonClick,
className,
}: Props) => {

const handleButtonClick = e => {
e.stopPropagation();
e.preventDefault();
onButtonClick && onButtonClick();
};

const classes = cx(className, css.root);

return (
<Card className={classes}>
<div className={css.imageContainer}>
<FittedImage src={src} alt={title} className={css.image} />
</div>
<div className={css.content}>
<div className={css.categoryContainer}>
<span className={css.category}>{category}</span>
{date && category && ' · '}
<span className={css.date}>{date}</span>
</div>
<h3 className={css.title}><a href={href} className={css.titleLink}>{title}</a></h3>
<p className={css.description}>{description}</p>
{ tags && <ChipGroup tags={tags} className={css.chipContainer} />}
{cta &&
<Btn
className={css.btn}
context="primary"
onClick={handleButtonClick}
>
{cta}
</Btn>
}
</div>
</Card>
);
}

export default ContentHubCard;
8 changes: 8 additions & 0 deletions packages/core/src/components/ChipGroup/ChipGroup.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.root {
display: block;
}

.chip {
margin-right: 1px;
margin-bottom: 1px;
}
31 changes: 31 additions & 0 deletions packages/core/src/components/ChipGroup/ChipGroup.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// @flow

import * as React from 'react';
import cx from 'classnames';
import css from './ChipGroup.css';
import Chip from '../Chip/Chip';

type Tag = {
href: string,
name: string,
}

type Props = {
tags: Array<Tag>,
className?: string,
};

const ChipGroup = ({ className, tags }: Props) => (
<div className={cx(className, css.root)}>
{tags && tags.map((tag) => (
<Chip
href={tag.href}
text={tag.name}
className={css.chip}
/>
))}
</div>
);

export default ChipGroup;

2 changes: 2 additions & 0 deletions packages/core/src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export Btn from './Btn/Btn';
export BtnContainer from './BtnContainer/BtnContainer';
export BtnGroup from './BtnGroup/BtnGroup';
export Chip from './Chip/Chip';
export ChipGroup from './ChipGroup/ChipGroup';
export CalendarItem from './Calendar/CalendarItem/CalendarItem';
export CalendarMonth from './Calendar/CalendarMonth/CalendarMonth';
export DayPicker from './Calendar/DayPicker/DayPicker';
Expand All @@ -19,6 +20,7 @@ export CondensedSpaceCard from './Cards/CondensedSpaceCard/CondensedSpaceCard';
export DestinationListingCard from './Cards/DestinationListingCard/DestinationListingCard';
export EditorialCard from './Cards/EditorialCard/EditorialCard';
export EventCard from './Cards/EditorialCard/EventCard';
export ContentHubCard from './Cards/EditorialCard/ContentHubCard';
export GuideCard from './Cards/EditorialCard/GuideCard';
export EmptyListingCard from './Cards/EmptyListingCard/EmptyListingCard';
export PictureCard from './Cards/PictureCard/PictureCard';
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/globals/typography.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,4 +190,4 @@
.letSpacingLargeI { letter-spacing: var(--letter-spacing-large-i); }
.letSpacingRegular { letter-spacing: var(--letter-spacing-regular); }
.letSpacingSmallI { letter-spacing: var(--letter-spacing-small-i); }
.letSpacingSmallIi { letter-spacing: var(--letter-spacing-small-ii); }
.letSpacingSmallIi { letter-spacing: var(--letter-spacing-small-ii); }
2 changes: 2 additions & 0 deletions packages/playground/.storybook/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './fonts.css';
import { configure } from '@storybook/react';
import '@appearhere/bloom/dist/bloom.css';

Expand All @@ -15,6 +16,7 @@ function loadStories() {
require('../stories/Cards.story.js');
require('../stories/Carousel.story.js');
require('../stories/Chip.story.js');
require('../stories/ChipGroup.story.js');
require('../stories/MobileCarousel.story.js');
require('../stories/Checkbox.story.js');
require('../stories/CheckboxGroup.story.js');
Expand Down
47 changes: 47 additions & 0 deletions packages/playground/.storybook/fonts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
@font-face{
font-family:"Avenir Next W01";
font-display: swap;
src: url("https://cdn-1.ah-assets.net/uploads/fonts/web/17c55b27-e9ab-43cd-b948-d49f97480d68.eot?#iefix");
src: url("https://cdn-1.ah-assets.net/uploads/fonts/web/17c55b27-e9ab-43cd-b948-d49f97480d68.eot?#iefix") format("eot"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/2e3f5cb9-101f-46cf-a7b3-dfaa58261e03.woff2") format("woff2"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/fa19948e-5e38-4909-b31e-41acd170d6f2.woff") format("woff"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/6de0ce4d-9278-467b-b96f-c1f5f0a4c375.ttf") format("truetype"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/9fd4ea0c-b19a-4b21-9fdf-37045707dd78.svg#9fd4ea0c-b19a-4b21-9fdf-37045707dd78") format("svg");
font-weight: 300;
font-style: normal;
}
@font-face{
font-family:"Avenir Next W01";
font-display: swap;
src:url("https://cdn-1.ah-assets.net/uploads/fonts/web/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix");
src:url("https://cdn-1.ah-assets.net/uploads/fonts/web/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/52a192b1-bea5-4b48-879f-107f009b666f.svg#52a192b1-bea5-4b48-879f-107f009b666f") format("svg");
font-weight: 400;
font-style: normal;
}
@font-face{
font-family:"Avenir Next W01";
font-display: swap;
src:url("https://cdn-1.ah-assets.net/uploads/fonts/web/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix");
src:url("https://cdn-1.ah-assets.net/uploads/fonts/web/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/a0f4c2f9-8a42-4786-ad00-fce42b57b148.ttf") format("truetype"),
url("https://cdn-1.ah-assets.net/uploads/fonts/web/99affa9a-a5e9-4559-bd07-20cf0071852d.svg#99affa9a-a5e9-4559-bd07-20cf0071852d") format("svg");
font-weight: 700;
font-style: normal;
}
@font-face{
font-family:"Avenir Next W01";
font-display: swap;
src:url("https://cdn-1.ah-assets.net/uploads/fonts/web/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix");
src:url("https://cdn-1.ah-assets.net/uploads/fonts/web/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix") format("eot"),
url("https://cdn-1.ah-assets.net/uploads/uploads/fonts/web/14c73713-e4df-4dba-933b-057feeac8dd1.woff2") format("woff2"),url("https://cdn-1.ah-assets.net/uploads/uploads/fonts/web/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff") format("woff"),
url("https://cdn-1.ah-assets.net/uploads/uploads/fonts/web/890bd988-5306-43ff-bd4b-922bc5ebdeb4.ttf") format("truetype"),
url("https://cdn-1.ah-assets.net/uploads/uploads/fonts/web/ed104d8c-7f39-4e8b-90a9-4076be06b857.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
font-weight: 800;
font-style: normal;
}
Loading

1 comment on commit e51cd04

@vercel
Copy link

@vercel vercel bot commented on e51cd04 Nov 18, 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.