Skip to content
This repository has been archived by the owner on Jul 12, 2023. It is now read-only.

Commit

Permalink
Use Emotion 11
Browse files Browse the repository at this point in the history
  • Loading branch information
@liywjl
liywjl committed Mar 1, 2021
1 parent a853889 commit a5d8552
Show file tree
Hide file tree
Showing 30 changed files with 210 additions and 251 deletions.
4 changes: 1 addition & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,13 @@
"timeago.js": "^4.0.2"
},
"peerDependencies": {
"@emotion/core": "^10.0.28",
"@emotion/react": "^11.1.5",
"@guardian/src-button": "^3.3.0",
"@guardian/src-foundations": "^3.3.0",
"@guardian/src-icons": "^3.3.0",
"@guardian/src-link": "^3.3.0",
"@guardian/src-text-input": "^3.3.0",
"@guardian/types": "^3.0.0",
"emotion": "^10.0.27",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"typescript": "^4.1.3"
Expand Down Expand Up @@ -68,7 +67,6 @@
"@types/react-dom": "^17.0.1",
"babel-loader": "^8.2.2",
"babel-plugin-const-enum": "^1.0.1",
"emotion": "^10.0.27",
"eslint-plugin-react-hooks": "^4.0.4",
"fetch-mock": "^9.3.1",
"husky": "^4.2.3",
Expand Down
18 changes: 9 additions & 9 deletions src/App.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { App } from './App';
import { css } from 'emotion';
import { css } from '@emotion/react';

import { Pillar } from '@guardian/types';

Expand All @@ -25,7 +25,7 @@ const aUser: UserProfile = {

export const LoggedOutHiddenPicks = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -51,7 +51,7 @@ LoggedOutHiddenPicks.story = {

export const InitialPage = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -76,7 +76,7 @@ InitialPage.story = { name: 'with initial page set to 3' };

export const Overrides = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -103,7 +103,7 @@ Overrides.story = { name: 'with page size overridden to 50' };

export const LoggedInHiddenNoPicks = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -130,7 +130,7 @@ LoggedInHiddenNoPicks.story = {

export const LoggedOutHiddenNoPicks = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -156,7 +156,7 @@ LoggedOutHiddenNoPicks.story = {

export const Closed = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -181,7 +181,7 @@ Closed.story = { name: 'Logged in but closed for comments' };

export const NoComments = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand All @@ -207,7 +207,7 @@ NoComments.story = {

export const LegacyDiscussion = () => (
<div
className={css`
css={css`
width: 100%;
max-width: 620px;
`}
Expand Down
18 changes: 9 additions & 9 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { css } from 'emotion';
import { css } from '@emotion/react';

import { neutral } from '@guardian/src-foundations/palette';
import { textSans } from '@guardian/src-foundations/typography';
Expand Down Expand Up @@ -83,7 +83,7 @@ const DEFAULT_FILTERS: FilterOptions = {

const NoComments = () => (
<div
className={css`
css={css`
color: ${neutral[46]};
${textSans.small()}
padding-top: ${space[5]}px;
Expand Down Expand Up @@ -373,7 +373,7 @@ export const App = ({

if (!isExpanded) {
return (
<div className={commentContainerStyles} data-component="discussion">
<div css={commentContainerStyles} data-component="discussion">
{user && !isClosedForComments && (
<CommentForm
pillar={pillar}
Expand All @@ -386,7 +386,7 @@ export const App = ({
/>
)}
{picks && picks.length ? (
<div className={picksWrapper}>
<div css={picksWrapper}>
{!!picks.length && (
<TopPicks
pillar={pillar}
Expand Down Expand Up @@ -422,7 +422,7 @@ export const App = ({
) : !comments.length ? (
<NoComments />
) : (
<ul className={commentContainerStyles}>
<ul css={commentContainerStyles}>
{comments.slice(0, 2).map((comment) => (
<li key={comment.id}>
<CommentContainer
Expand All @@ -447,7 +447,7 @@ export const App = ({
)}
{commentCount > 2 && (
<div
className={css`
css={css`
width: 250px;
`}
>
Expand All @@ -468,7 +468,7 @@ export const App = ({
}

return (
<div data-component="discussion" className={commentColumnWrapperStyles}>
<div data-component="discussion" css={commentColumnWrapperStyles}>
{user && !isClosedForComments && (
<CommentForm
pillar={pillar}
Expand Down Expand Up @@ -512,7 +512,7 @@ export const App = ({
) : !comments.length ? (
<NoComments />
) : (
<ul className={commentContainerStyles}>
<ul css={commentContainerStyles}>
{comments.map((comment) => (
<li key={comment.id}>
<CommentContainer
Expand All @@ -536,7 +536,7 @@ export const App = ({
</ul>
)}
{showPagination && (
<footer className={footerStyles}>
<footer css={footerStyles}>
<Pagination
totalPages={totalPages}
currentPage={page}
Expand Down
4 changes: 2 additions & 2 deletions src/components/AbuseReportForm/AbuseReportForm.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { css } from 'emotion';
import { css } from '@emotion/react';

import { Pillar } from '@guardian/types';

Expand All @@ -16,7 +16,7 @@ const wrapperStyles = css`
`;

export const Dialog = () => (
<div className={wrapperStyles}>
<div css={wrapperStyles}>
<AbuseReportForm
toggleSetShowForm={() => {}}
pillar={Pillar.Sport}
Expand Down
32 changes: 15 additions & 17 deletions src/components/AbuseReportForm/AbuseReportForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import { css, cx } from 'emotion';
import { css } from '@emotion/react';

import { palette } from '@guardian/src-foundations';
import { textSans } from '@guardian/src-foundations/typography';
Expand Down Expand Up @@ -167,9 +167,9 @@ export const AbuseReportForm: React.FC<{
const labelStylesClass = labelStyles(pillar);
return (
<div aria-modal="true" ref={modalRef}>
<form className={formWrapper} onSubmit={onSubmit}>
<div className={inputWrapper}>
<label className={labelStylesClass} htmlFor="category">
<form css={formWrapper} onSubmit={onSubmit}>
<div css={inputWrapper}>
<label css={labelStylesClass} htmlFor="category">
Category
</label>
<select
Expand Down Expand Up @@ -197,12 +197,12 @@ export const AbuseReportForm: React.FC<{
<option value="9">Other</option>
</select>
{errors.categoryId && (
<span className={errorMessageStyles}>{errors.categoryId}</span>
<span css={errorMessageStyles}>{errors.categoryId}</span>
)}
</div>

<div className={inputWrapper}>
<label className={labelStylesClass} htmlFor="reason">
<div css={inputWrapper}>
<label css={labelStylesClass} htmlFor="reason">
Reason (optional)
</label>
<textarea
Expand All @@ -217,12 +217,12 @@ export const AbuseReportForm: React.FC<{
value={formVariables.reason}
></textarea>
{errors.reason && (
<span className={errorMessageStyles}>{errors.reason}</span>
<span css={errorMessageStyles}>{errors.reason}</span>
)}
</div>

<div className={inputWrapper}>
<label className={labelStylesClass} htmlFor="email">
<div css={inputWrapper}>
<label css={labelStylesClass} htmlFor="email">
Email (optional)
</label>
<input
Expand All @@ -237,9 +237,7 @@ export const AbuseReportForm: React.FC<{
}
value={formVariables.email}
></input>
{errors.email && (
<span className={errorMessageStyles}>{errors.email}</span>
)}
{errors.email && <span css={errorMessageStyles}>{errors.email}</span>}
</div>

<div>
Expand All @@ -249,20 +247,20 @@ export const AbuseReportForm: React.FC<{

{errors.response && (
<span
className={cx(
css={[
errorMessageStyles,
css`
margin-left: 1em;
`,
)}
]}
>
{errors.response}
</span>
)}

{successMessage && (
<span
className={css`
css={css`
color: green;
margin-left: 1em;
`}
Expand All @@ -272,7 +270,7 @@ export const AbuseReportForm: React.FC<{
)}
</div>
<div
className={css`
css={css`
position: absolute;
right: ${space[3]}px;
top: ${space[3]}px;
Expand Down
14 changes: 4 additions & 10 deletions src/components/Avatar/Avatar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { css } from 'emotion';
import { css } from '@emotion/react';

type Props = {
imageUrl?: string;
Expand All @@ -20,17 +20,11 @@ export const Avatar = ({
}: Props) => {
switch (size) {
case 'small':
return (
<img src={imageUrl} alt={displayName} className={imageStyles(36)} />
);
return <img src={imageUrl} alt={displayName} css={imageStyles(36)} />;
case 'large':
return (
<img src={imageUrl} alt={displayName} className={imageStyles(60)} />
);
return <img src={imageUrl} alt={displayName} css={imageStyles(60)} />;
case 'medium':
default:
return (
<img src={imageUrl} alt={displayName} className={imageStyles(48)} />
);
return <img src={imageUrl} alt={displayName} css={imageStyles(48)} />;
}
};
14 changes: 7 additions & 7 deletions src/components/Badges/Badges.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { css, cx } from 'emotion';
import { css } from '@emotion/react';

import { space, neutral, brand } from '@guardian/src-foundations';
import { textSans } from '@guardian/src-foundations/typography';
Expand Down Expand Up @@ -35,32 +35,32 @@ const guardianPickLabel = css`
`;

export const GuardianStaff = () => (
<div className={staffBadge}>
<div css={staffBadge}>
<svg
width="36"
height="36"
viewBox="0 0 36 36"
className={cx(iconStyles, staffIcon)}
css={[iconStyles, staffIcon]}
>
<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
<path
fill={neutral[100]}
d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
></path>
</svg>
<p className={cx(labelText, staffLabel)}>Staff</p>
<p css={[labelText, staffLabel]}>Staff</p>
</div>
);

export const GuardianPick = () => (
<div className={staffBadge}>
<svg width="36" height="36" viewBox="0 0 36 36" className={iconStyles}>
<div css={staffBadge}>
<svg width="36" height="36" viewBox="0 0 36 36" css={iconStyles}>
<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
<path
fill={neutral[100]}
d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
></path>
</svg>
<p className={cx(labelText, guardianPickLabel)}>Guardian Pick</p>
<p css={[labelText, guardianPickLabel]}>Guardian Pick</p>
</div>
);
4 changes: 2 additions & 2 deletions src/components/Column/Column.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import { css } from 'emotion';
import { css } from '@emotion/react';

type Props = { children: JSX.Element | JSX.Element[] };

export const Column = ({ children }: Props) => (
<div
className={css`
css={css`
display: flex;
flex-direction: column;
`}
Expand Down
Loading

0 comments on commit a5d8552

Please sign in to comment.