Skip to content

Commit

Permalink
chore: kill styled-components and related deps, port to css modules a…
Browse files Browse the repository at this point in the history
…s halfway step to tailwind
  • Loading branch information
jamiehenson committed Mar 6, 2024
1 parent 52df9b8 commit ce02c5d
Show file tree
Hide file tree
Showing 20 changed files with 291 additions and 536 deletions.
1 change: 0 additions & 1 deletion gatsby-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export const graphqlTypegen = true;

export const plugins = [
'gatsby-plugin-postcss',
'gatsby-plugin-styled-components',
'gatsby-plugin-image',
'gatsby-plugin-sharp',
'gatsby-transformer-yaml',
Expand Down
245 changes: 4 additions & 241 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@
"@types/cheerio": "^0.22.31",
"@types/prop-types": "^15.7.4",
"addsearch-js-client": "^0.7.0",
"babel-plugin-styled-components": "^2.0.2",
"cheerio": "^1.0.0-rc.10",
"classnames": "^2.3.1",
"diff": "^5.1.0",
Expand All @@ -62,7 +61,6 @@
"gatsby-plugin-root-import": "^2.0.9",
"gatsby-plugin-sharp": "^5.8.1",
"gatsby-plugin-sitemap": "^6.12.1",
"gatsby-plugin-styled-components": "^6.3.0",
"gatsby-source-filesystem": "^5.12.0",
"gatsby-transformer-remark": "^6.12.0",
"gatsby-transformer-sharp": "^5.3.0",
Expand All @@ -78,7 +76,6 @@
"react-helmet": "^6.1.0",
"react-medium-image-zoom": "^5.1.2",
"react-select": "^5.7.0",
"styled-components": "^5.3.3",
"tailwindcss": "^2.2.19",
"tailwindcss-filters": "^2.0.0",
"textile-js": "^2.1.1",
Expand All @@ -104,7 +101,6 @@
"@types/lodash.throttle": "^4.1.7",
"@types/react-helmet": "^6.1.6",
"@types/react-test-renderer": "^18.0.0",
"@types/styled-components": "^5.1.26",
"@types/turndown": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^5.46.1",
"autoprefixer": "^10.4.13",
Expand Down
25 changes: 8 additions & 17 deletions src/components/Link/LanguageLink.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,8 @@
import { Link } from 'gatsby';
import styled from 'styled-components';
import { usePageLanguage } from '../../contexts/page-language-context';
import languageLabels from '../../maps/language';
import { primary } from '../../styles/colors';
import { getLanguageDefaults } from '../common/language-defaults';

const HoverLink = styled(Link)`
cursor: pointer;
display: block;
position: relative;
user-select: none;
color: ${primary.black};
&:hover,
&.active,
&.is-active {
color: ${primary.richOrange};
}
`;

const LanguageLink = ({ language }: { language: string }) => {
const { currentLanguage: pageLanguage } = usePageLanguage();

Expand All @@ -27,7 +11,14 @@ const LanguageLink = ({ language }: { language: string }) => {
? `./language/${language}`
: `../../${isLanguageDefault ? '' : `language/${language}`}`;

return <HoverLink to={href}>{languageLabels[language] ?? language}</HoverLink>;
return (
<Link
className="cursor-pointer relative select-none block text-brand-black hover:text-brand-richOrange active:text-brand-richOrange"
to={href}
>
{languageLabels[language] ?? language}
</Link>
);
};

export default LanguageLink;
4 changes: 2 additions & 2 deletions src/components/blocks/Html/__snapshots__/Html.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ exports[`<Html /> renders correct Dl based on PageLanguageContext value 1`] = `
<dt
class="sc-jXbUNg dTJzXn"
class="listDt"
>
name
</dt>
<dd
class="sc-kAyceB hbEzdj"
class="font-light"
>
event name for the published message
<span
Expand Down
104 changes: 22 additions & 82 deletions src/components/blocks/dividers/Aside.tsx
Original file line number Diff line number Diff line change
@@ -1,115 +1,55 @@
// import GenericHtmlBlock from '../Html/GenericHtmlBlock';
import { HtmlComponentProps } from '../../html-component-props';
import Html from '../Html';
import styled from 'styled-components';
import { colors } from '../../../styles';
import Icon from '@ably/ui/core/Icon';
import { isArray } from 'lodash';
import HtmlDataTypes from '../../../../data/types/html';

/**
* This is required because Tailwind v2 does not offer a good way to style one side of a border.
* The closest to what design requires here is:
* rounded-lg bg-{#FAFAFB} ring-2 ring-{#d9d9da} ring-inset border-l-8 border-{#08ff13} e p-4
bg-{#08ff13} w-8 left-0 cursor-default
*/

const LeftsideElement = styled.span`
width: 8px;
border-radius: 0.5em 0 0 0.5em;
left: 0;
cursor: default;
grid-row-start: 1;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: 1;
height: 100%;
`;

const NoteElement = styled(LeftsideElement)`
background-color: #4af7ff;
`;
const PitfallElement = styled(LeftsideElement)`
background-color: #ff5416;
`;
const FurtherReadingElement = styled(LeftsideElement)`
background-color: #08fe13;
`;

const TipTitleElement = styled.strong`
margin-left: var(--spacing-12);
margin-top: var(--spacing-12);
padding: var(--spacing-16);
grid-column-start: 1;
grid-row-start: 1;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 18px;
`;

const InlineContentContainer = styled.div`
grid-row: 2;
grid-column: 1;
margin-left: var(--spacing-16);
padding-left: var(--spacing-16);
padding-right: var(--spacing-16);
padding-bottom: ${(props: { paddingBottom: string | false }) => (props.paddingBottom ? props.paddingBottom : '24px')};
margin-bottom: var(--spacing-8);
`;

const InlineGridParagraph = styled.aside`
display: inline-grid;
border-radius: 0.5em;
background-color: ${colors.containers.three};
border-width: 1px;
border-color: #d9d9da;
grid-template-rows: auto auto;
margin-bottom: 24px;
font-size: 16px;
line-height: 23px;
padding: 0;
width: 100%;
`;
import {
inlineGridParagraph,
inlineContentContainer,
pitfallElement,
leftSideElement,
furtherReadingElement,
noteElement,
tipTitleElement,
} from './dividers.module.css';

const Aside = ({ data, attribs }: HtmlComponentProps<'div'>) => {
let paddingBottom: string | false = false;
if (isArray(data) && data[data.length - 1].name === HtmlDataTypes.ul) {
paddingBottom = '0';
}
return (
<InlineGridParagraph className={`${attribs?.className}`}>
<aside className={`${inlineGridParagraph} ${attribs?.className}`}>
{attribs && attribs[`data-type`] === `important` ? (
<>
<PitfallElement>&nbsp;</PitfallElement>
<TipTitleElement>
<span className={`${leftSideElement} ${pitfallElement}`}>&nbsp;</span>
<strong className={tipTitleElement}>
<Icon name="icon-gui-warning" size="1rem" additionalCSS="mr-12" />
<span className="mb-48">Important</span>
</TipTitleElement>
</strong>
</>
) : attribs && attribs[`data-type`] === `further-reading` ? (
<>
<FurtherReadingElement>&nbsp;</FurtherReadingElement>
<TipTitleElement>
<span className={`${leftSideElement} ${furtherReadingElement}`}>&nbsp;</span>
<strong className={tipTitleElement}>
<Icon name="icon-gui-resources" size="1rem" additionalCSS="mr-12" />
<span className="mb-48">Further Reading</span>
</TipTitleElement>
</strong>
</>
) : (
<>
<NoteElement>&nbsp;</NoteElement>
<TipTitleElement>
<span className={`${leftSideElement} ${noteElement}`}>&nbsp;</span>
<strong className={tipTitleElement}>
<Icon name="icon-gui-document-generic" size="1rem" additionalCSS="mr-12" />
<span className="mb-48">Note</span>
</TipTitleElement>
</strong>
</>
)}

<InlineContentContainer paddingBottom={paddingBottom} className={`inline`}>
<div className={inlineContentContainer} style={{ paddingBottom: paddingBottom || '24px' }}>
<Html data={data} />
</InlineContentContainer>
</InlineGridParagraph>
</div>
</aside>
);
};

Expand Down
59 changes: 59 additions & 0 deletions src/components/blocks/dividers/dividers.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* Styles migrated to a CSS component to wean the repo off of styled-components
All styles to be migrated to Tailwind classes when convenient */

span.left-side-element {
width: 8px;
border-radius: 0.5em 0 0 0.5em;
left: 0;
cursor: default;
grid-row-start: 1;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: 1;
height: 100%;
}
.note-element {
background-color: #4af7ff;
}
.pitfall-element {
background-color: #ff5416;
}
.further-reading-element {
background-color: #08fe13;
}

strong.tip-title-element {
margin-left: var(--spacing-16);
padding: var(--spacing-16);
margin-top: var(--spacing-8);
grid-column-start: 1;
grid-row-start: 1;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 18px;
}

div.inline-content-container {
grid-row: 2;
grid-column: 1;
margin-left: var(--spacing-16);
padding-left: var(--spacing-16);
padding-right: var(--spacing-16);
margin-bottom: var(--spacing-8);
display: inline;
}

aside.inline-grid-paragraph {
display: inline-grid;
border-radius: 0.5em;
background-color: #fafafb;
border-width: 1px;
border-color: #d9d9da;
grid-template-rows: auto auto;
margin-bottom: 24px;
font-size: 16px;
line-height: 23px;
padding: 0;
width: 100%;
}
11 changes: 4 additions & 7 deletions src/components/blocks/list/Dd.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import GenericHtmlBlock from '../Html/GenericHtmlBlock';
import styled from 'styled-components';

const StyledDd = styled.dd`
font-weight: 300;
`;
const Dd: React.FC<{ className?: string }> = (props) => (
<dd {...props} className={`${props.className ? `${props.className} ` : ''}font-light`} />
);

const Dd = GenericHtmlBlock(StyledDd);

export default Dd;
export default GenericHtmlBlock(Dd);
20 changes: 5 additions & 15 deletions src/components/blocks/list/Dl/DefinitionListRow.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
import styled from 'styled-components';
import GenericHtmlBlock from '../../Html/GenericHtmlBlock';
import { definitionListRowStyles } from '../list.module.css';

const DefinitionListRowStyles = styled.div`
display: block;
min-height: 35px;
border-bottom: 1px solid #e1e1e1;
overflow: auto;
padding: 15px 0;
@media (min-width: 40em) {
display: flex;
padding: 0;
width: 100%;
}
`;

const DefinitionListRow = GenericHtmlBlock(DefinitionListRowStyles);
const DefinitionListRow = GenericHtmlBlock('div')({
data: null,
attribs: { className: definitionListRowStyles },
});

export default DefinitionListRow;
Loading

0 comments on commit ce02c5d

Please sign in to comment.