Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add blog post cards into homepage #1192

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add blog post cards into homepage #1192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5a7245a
Add see-more button to solution section component
samirsm Nov 23, 2021
c2d6bb2
Add latest blog posts to homescreen
samirsm Nov 23, 2021
f723ec1
Add a carousel to solution items on mobile version
samirsm Nov 24, 2021
b87fce0
Padding adjustments on solutions sections
samirsm Nov 24, 2021
9458d3e
Update jest snapshot tests
samirsm Nov 24, 2021
7978b75
fix: modal test breaking
samirsm Nov 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 20 additions & 48 deletions packages/web/__tests__/pages/t/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,24 +287,6 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
justify-content: center;
}

.c20 .c48 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 700;
font-size: 1.4rem;
line-height: 2.4rem;
}

.c20 .c48 svg {
margin-right: 0.4rem;
}

.c11 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -433,11 +415,6 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
left: 0;
}

.c5 .styles__StyledStats-sc-1ybieaz-2 {
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}

.c4 {
background: none;
border: none;
Expand Down Expand Up @@ -1296,7 +1273,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
</div>
<div
class="c22 c23"
data-tabs="true"
data-rttabs="true"
>
<ul
class="c24 c25"
Expand All @@ -1307,6 +1284,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="about"
id="react-tabs-0"
role="tab"
Expand All @@ -1318,6 +1296,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="description"
id="react-tabs-2"
role="tab"
Expand All @@ -1329,6 +1308,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="geolocation"
id="react-tabs-4"
role="tab"
Expand All @@ -1340,6 +1320,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="costs"
id="react-tabs-6"
role="tab"
Expand All @@ -1351,6 +1332,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="review"
id="react-tabs-8"
role="tab"
Expand All @@ -1362,6 +1344,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="true"
class="c28 c29 react-tabs__tab--selected"
data-rttab="true"
data-testid="attachments"
id="react-tabs-10"
role="tab"
Expand All @@ -1374,6 +1357,7 @@ exports[`Technology Details Page render correctly when user is logged in 1`] = `
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="faq"
id="react-tabs-12"
role="tab"
Expand Down Expand Up @@ -1834,24 +1818,6 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
justify-content: center;
}

.c20 .styles__StyledButton-sc-9okshb-0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 700;
font-size: 1.4rem;
line-height: 2.4rem;
}

.c20 .styles__StyledButton-sc-9okshb-0 svg {
margin-right: 0.4rem;
}

.c11 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -1980,11 +1946,6 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
left: 0;
}

.c5 .styles__StyledStats-sc-1ybieaz-2 {
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}

.c4 {
background: none;
border: none;
Expand Down Expand Up @@ -2459,6 +2420,10 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
margin: 0 auto;
}

@media screen and (min-width:450px) {

}

@media screen and (min-width:768px) {

}
Expand Down Expand Up @@ -2823,7 +2788,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
</div>
<div
class="c22 c23"
data-tabs="true"
data-rttabs="true"
>
<ul
class="c24 c25"
Expand All @@ -2834,6 +2799,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="about"
id="react-tabs-14"
role="tab"
Expand All @@ -2845,6 +2811,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="description"
id="react-tabs-16"
role="tab"
Expand All @@ -2856,6 +2823,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="geolocation"
id="react-tabs-18"
role="tab"
Expand All @@ -2867,6 +2835,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="costs"
id="react-tabs-20"
role="tab"
Expand All @@ -2878,6 +2847,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="review"
id="react-tabs-22"
role="tab"
Expand All @@ -2889,6 +2859,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="true"
class="c28 c29 react-tabs__tab--selected"
data-rttab="true"
data-testid="attachments"
id="react-tabs-24"
role="tab"
Expand All @@ -2901,6 +2872,7 @@ exports[`Technology Details Page render correctly when user is not logged in 1`]
aria-disabled="false"
aria-selected="false"
class="c26 c27"
data-rttab="true"
data-testid="faq"
id="react-tabs-26"
role="tab"
Expand Down
8 changes: 4 additions & 4 deletions packages/web/__tests__/pages/user/my-account/curate/__snapshots__/profile.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -803,7 +803,7 @@ exports[`it renders Profile page and empty Specialties 1`] = `
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 1.4rem; font-family: 'Montserrat'; font-weight: 400; letter-spacing: normal; text-transform: none;"
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
Expand Down Expand Up @@ -878,7 +878,7 @@ exports[`it renders Profile page and empty Specialties 1`] = `
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 1.4rem; font-family: 'Montserrat'; font-weight: 400; letter-spacing: normal; text-transform: none;"
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
Expand Down Expand Up @@ -1828,7 +1828,7 @@ exports[`it renders Profile page correctly 1`] = `
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 1.4rem; font-family: 'Montserrat'; font-weight: 400; letter-spacing: normal; text-transform: none;"
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
Expand Down Expand Up @@ -1903,7 +1903,7 @@ exports[`it renders Profile page correctly 1`] = `
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 1.4rem; font-family: 'Montserrat'; font-weight: 400; letter-spacing: normal; text-transform: none;"
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions packages/web/components/Button/RectangularButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const RectangularButton = forwardRef(
name,
backgroundUrl,
fullWidth,
width,
autoX,
boxShadow,
uppercase,
Expand All @@ -33,6 +34,7 @@ const RectangularButton = forwardRef(
name={name}
backgroundUrl={backgroundUrl}
fullWidth={fullWidth}
width={width}
autoX={autoX}
boxShadow={boxShadow}
ref={ref}
Expand All @@ -56,6 +58,7 @@ RectangularButton.propTypes = {
name: PropTypes.string,
backgroundUrl: PropTypes.string,
fullWidth: PropTypes.bool,
width: PropTypes.string,
autoX: PropTypes.bool,
boxShadow: PropTypes.bool,
uppercase: PropTypes.bool,
Expand All @@ -71,6 +74,7 @@ RectangularButton.defaultProps = {
name: '',
backgroundUrl: '',
fullWidth: false,
width: null,
autoX: false,
boxShadow: false,
uppercase: false,
Expand Down
20 changes: 17 additions & 3 deletions packages/web/components/Button/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ export const RectangularButton = styled.button`
colorVariant,
backgroundUrl,
fullWidth,
width,
autoX,
boxShadow,
capitalize,
Expand Down Expand Up @@ -239,10 +240,24 @@ export const RectangularButton = styled.button`
cursor: not-allowed;
}

@media screen and (min-width: ${screens.medium}px) {
@media screen and (min-width: ${screens.small}px) {
width: ${width || '100%'};
}

${
width
? `@media screen and (min-width: ${screens.medium}px) {
width: ${width};
}`
: `@media screen and (min-width: ${screens.medium}px) {
width: ${fullWidth ? '100%' : 'fit-content'};
}`
}





color: ${colors[rectangularColorsToTheme[colorVariant]]};

:hover:not(:disabled) {
Expand All @@ -255,8 +270,7 @@ export const RectangularButton = styled.button`
box-shadow: 0px 0px 4px 2px ${colors.primary};
}

${!!variant &&
rectangularButtonVariants[variant](colors, colorVariant, metrics, backgroundUrl)};
${!!variant && rectangularButtonVariants[variant](colors, colorVariant, metrics, backgroundUrl)};

${!!uppercase &&
css`
Expand Down
48 changes: 48 additions & 0 deletions packages/web/components/Card/BlogPostCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from '../Link';
import { formatDateLong } from '../../utils/helper';
import { getServiceTypeThumbnail } from '../../utils/service';
import { CardContainer, ImageContainer, Content, ShortTitle, PublishedDate } from './styles';

const BlogPostCard = ({ published_at, thumbnail, locale, title, type, url }) => {
const serviceThumbnail = thumbnail || getServiceTypeThumbnail(type?.trim());
const formattedDate = formatDateLong(published_at, locale, { month: 'short' })
.toLowerCase()
.split(' de ')
.join(' ');

return (
<Link href={url} target="_blank">
<CardContainer>
<ImageContainer short>
<img src={serviceThumbnail} alt={title} />
</ImageContainer>
<Content>
<ShortTitle data-testid="card-title">{title}</ShortTitle>
<PublishedDate>{formattedDate}</PublishedDate>
</Content>
</CardContainer>
</Link>
);
};

BlogPostCard.propTypes = {
published_at: PropTypes.string,
locale: PropTypes.string,
thumbnail: PropTypes.string,
title: PropTypes.string,
type: PropTypes.string,
url: PropTypes.string,
};

BlogPostCard.defaultProps = {
published_at: Date.now(),
thumbnail: '',
locale: 'pt-BR',
title: '',
type: '',
url: '',
};

export default BlogPostCard;
1 change: 1 addition & 0 deletions packages/web/components/Card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { default as TechnologyCard } from './TechnologyCard';
export { default as ServiceCard } from './ServiceCard';
export { default as BlogPostCard } from './BlogPostCard';
export { default as Likes } from './Likes';
export { default as Share } from './Share';
Loading