Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

chore,refactor: Upgrade to Emotion 10; adapt in header & pagination #172

Merged
sagirk merged 4 commits into from
Mar 7, 2019
Merged

chore,refactor: Upgrade to Emotion 10; adapt in header & pagination #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6278fbb
chore: Update deps per emotion 10
BeniCheni Mar 5, 2019
753b950
refactor: Adapt emotion in the styles of header & pagination
BeniCheni Mar 5, 2019
052ae06
chore: Add back emotion dep to avoid unmet peer dependency
BeniCheni Mar 5, 2019
5e5e5c5
Merge branch 'master' into emotion-10
sagirk Mar 7, 2019
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
9 changes: 5 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
"author": "Adam Miller <[email protected]>",
"private": true,
"dependencies": {
"@emotion/core": "^10.0.7",
"@types/react-helmet": "^5.0.7",
"dotenv": "^6.0.0",
"emotion": "^9.2.12",
"emotion-server": "^9.2.12",
"emotion": "^10.0.7",
"emotion-server": "^10.0.7",
"gatsby": "^2.0.0",
"gatsby-plugin-canonical-urls": "^2.0.10",
"gatsby-plugin-catch-links": "^2.0.9",
"gatsby-plugin-emotion": "^2.0.5",
"gatsby-plugin-emotion": "^4.0.4",
"gatsby-plugin-manifest": "^2.0.2",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
Expand All @@ -27,7 +28,7 @@
"prismjs": "^1.15.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-emotion": "^9.2.12",
"react-emotion": "^10.0.0",
"react-helmet": "^5.2.0",
"tslint": "^5.11.0",
"typescript": "^3.1.1"
Expand Down
26 changes: 13 additions & 13 deletions src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import { Link } from 'gatsby';
import React from 'react';
import { css } from 'emotion';
import { css, SerializedStyles } from '@emotion/core';
import logo from '../images/logo.svg';

const ulStyles: SerializedStyles = css`
@media (max-width: 380px) {
padding: 0;
}
margin: 0 auto;
padding: 0 4.8rem;
display: flex;
align-items: center;
list-style: none;
`;

const Header = () => (
<nav className="nav">
<ul
css={css`
@media (max-width: 380px) {
padding: 0;
}
margin: 0 auto;
padding: 0 4.8rem;
display: flex;
align-items: center;
list-style: none;
`}
>
<ul css={ulStyles}>
<li>
<Link to="/" style={{ display: 'block' }}>
<img src={logo} alt="Node.js" className="nav__logo" />
Expand Down
19 changes: 10 additions & 9 deletions src/components/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { Link } from 'gatsby';
import React from 'react';
import { css, SerializedStyles } from '@emotion/core';
import { PaginationInfo } from '../types';

type Props = {
previous?: PaginationInfo;
next?: PaginationInfo;
}

const ulStyles: SerializedStyles = css`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 30px;
`;

const Pagination = ({ previous, next }: Props) => (
<ul
style={{
display: `flex`,
flexWrap: `wrap`,
justifyContent: `space-between`,
listStyle: `none`,
padding: '30px',
}}
>
<ul css={ulStyles}>
<li>
{previous && previous.title && (
<Link to={`/${previous.slug}`} rel="prev">
Expand Down
18 changes: 17 additions & 1 deletion test/components/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,23 @@ exports[`Tests for Header component renders correctly 1`] = `
className="nav"
>
<ul
css="css-k9ksbg"
css={
Object {
"map": undefined,
"name": "xzcnt4",
"next": undefined,
"styles": "
@media (max-width: 380px) {
padding: 0;
}
margin: 0 auto;
padding: 0 4.8rem;
display: flex;
align-items: center;
list-style: none;
",
}
}
>
<li>
<a
Expand Down
68 changes: 44 additions & 24 deletions test/components/__snapshots__/pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@

exports[`Pagination component only renders links to pages that has a title 1`] = `
<ul
style={
css={
Object {
"display": "flex",
"flexWrap": "wrap",
"justifyContent": "space-between",
"listStyle": "none",
"padding": "30px",
"map": undefined,
"name": "4bjqmt",
"next": undefined,
"styles": "
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 30px;
",
}
}
>
Expand All @@ -26,13 +31,18 @@ exports[`Pagination component only renders links to pages that has a title 1`] =

exports[`Pagination component renders correctly when there is no next page 1`] = `
<ul
style={
css={
Object {
"display": "flex",
"flexWrap": "wrap",
"justifyContent": "space-between",
"listStyle": "none",
"padding": "30px",
"map": undefined,
"name": "4bjqmt",
"next": undefined,
"styles": "
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 30px;
",
}
}
>
Expand All @@ -50,13 +60,18 @@ exports[`Pagination component renders correctly when there is no next page 1`] =

exports[`Pagination component renders correctly when there is no previous page 1`] = `
<ul
style={
css={
Object {
"display": "flex",
"flexWrap": "wrap",
"justifyContent": "space-between",
"listStyle": "none",
"padding": "30px",
"map": undefined,
"name": "4bjqmt",
"next": undefined,
"styles": "
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 30px;
",
}
}
>
Expand All @@ -74,13 +89,18 @@ exports[`Pagination component renders correctly when there is no previous page 1

exports[`Pagination component renders links to the next and previous page 1`] = `
<ul
style={
css={
Object {
"display": "flex",
"flexWrap": "wrap",
"justifyContent": "space-between",
"listStyle": "none",
"padding": "30px",
"map": undefined,
"name": "4bjqmt",
"next": undefined,
"styles": "
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 30px;
",
}
}
>
Expand Down
Loading