@navinc/base-react-components
Version:
Nav's Pattern Library
275 lines (259 loc) • 10.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState, useLayoutEffect } from 'react';
import styled, { useTheme } from 'styled-components';
import htmr from 'htmr';
import AuthorCard from './author-card.js';
import BlockQuote from './block-quote.js';
import Copy from './copy.js';
import Header from './header.js';
import Icon from './icon.js';
import Link from './link.js';
import PropTypes from 'prop-types';
import isRebrand from './is-rebrand.js';
const ArticleContent = styled.div.withConfig({ displayName: "brc-sc-ArticleContent", componentId: "brc-sc-wfc140" }) `
li {
font-size: 16px;
}
p,
span,
ul,
ol {
padding-bottom: 16px;
}
ul,
ol {
padding-left: 40px;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
.wp-block-image,
.callout-img {
text-align: center;
img {
max-width: 100%;
}
}
.title {
font-weight: bold;
}
/*
Creates an alert box that appears like a yellow banner,
selecting only those that are not children of the same (in case of nested alerts)
*/
:not(.alert-box-warning) > .alert-box-warning {
background-color: ${({ theme }) => (isRebrand(theme) ? theme.navSecondary200 : theme.flounderYellow100)};
position: relative;
padding: 16px;
border-radius: 12px;
box-shadow: 0 10px 11px -8px rgba(0, 0, 0, 0.12);
p {
margin-left: 40px;
}
.icon-container {
position: relative;
height: 0;
/* Renders the alert icon, parsing out # into its code so the SVG code does not break */
::before {
position: absolute;
top: 0;
left: 0;
content: ${({ theme }) => `url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="${String(isRebrand(theme) ? theme.navSecondary400 : theme.flounderYellow200).replace('#', '%23')}" viewBox="0 0 24 24" width="24" height="24"><path d="M12,8 C12.552,8 13,8.447 13,9 L13,13 C13,13.553 12.552,14 12,14 C11.448,14 11,13.553 11,13 L11,9 C11,8.447 11.448,8 12,8 Z M12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 C12.5522847,15 13,15.4477153 13,16 C13,16.5522847 12.5522847,17 12,17 Z M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z"></path></svg>')`};
}
}
::before {
content: '';
width: 100%;
height: 8px;
position: absolute;
left: 0;
top: 0;
background: ${({ theme }) => (isRebrand(theme) ? theme.navSeconary400 : theme.flounderYellow200)};
border-radius: 14px 14px 0 0;
}
}
/* Non-urgent callout cards in the middle of a paragraph */
.wp-block-nav-card,
.nav-blocks-card-2 {
padding: 16px;
border-radius: 4px;
box-shadow: 0 3px 23px rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
}
/* Table */
table {
border-collapse: separate;
border-spacing: 0;
td,
th {
padding: 16px;
border-right: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral300 : theme.scuttleGray300)};
border-bottom: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral300 : theme.scuttleGray300)};
vertical-align: top;
}
tr {
td:first-child,
th:first-child {
border-left: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral300 : theme.scuttleGray300)};
}
}
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 20px;
}
td:last-child,
th:last-child {
border-top-right-radius: 20px;
}
td,
th {
border-top: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral300 : theme.scuttleGray300)};
}
}
tr:last-child {
td:first-child {
border-bottom-left-radius: 20px;
}
td:last-child {
border-bottom-right-radius: 20px;
}
}
tbody {
tr:nth-child(even) {
td,
th {
background-color: ${({ theme }) => (isRebrand(theme) ? theme.navSecondary100 : theme.bubbleBlue100)};
}
}
tr:nth-child(odd) {
td,
th {
background-color: ${({ theme }) => isRebrand(theme) && theme.navSecondary};
}
}
}
}
`;
const HeaderContentWrapper = styled.div.withConfig({ displayName: "brc-sc-HeaderContentWrapper", componentId: "brc-sc-1wrbiy3" }) `
text-align: left;
display: grid;
grid-gap: 8px;
padding-bottom: 24px;
`;
const HeaderWrapper = styled.div.withConfig({ displayName: "brc-sc-HeaderWrapper", componentId: "brc-sc-1yuzpj4" }) `
display: flex;
justify-content: space-between;
`;
const SectionWrapper = styled.div.withConfig({ displayName: "brc-sc-SectionWrapper", componentId: "brc-sc-4tudhi" }) `
display: flex;
flex-direction: column;
padding: 18px;
scroll-margin-top: 200px;
`;
const IconWrapper = styled.div.withConfig({ displayName: "brc-sc-IconWrapper", componentId: "brc-sc-1mcib35" }) `
text-align: right;
padding-top: 16px;
`;
const CloseButton = styled.div.withConfig({ displayName: "brc-sc-CloseButton", componentId: "brc-sc-1piyeya" }) `
display: flex;
justify-content: flex-end;
padding-top: 16px;
& > ${Icon} {
fill: ${({ theme }) => (isRebrand(theme) ? theme.navNeutralDark : theme.neutral400)};
margin-left: 8px;
}
&:hover {
cursor: pointer;
}
`;
const transform = {
b: (node, props, children) => {
var _a;
return (_jsx(Copy, Object.assign({ bold: true }, props, { children: (_a = node === null || node === void 0 ? void 0 : node.children) !== null && _a !== void 0 ? _a : children })));
},
p: Copy,
span: Copy,
a: Link,
h2: (node, props, children) => {
var _a;
return (_jsx(Header, Object.assign({ size: "md" }, props, { children: (_a = node === null || node === void 0 ? void 0 : node.children) !== null && _a !== void 0 ? _a : children })));
},
h3: (node, props, children) => {
var _a;
return (_jsx(Header, Object.assign({ size: "sm" }, props, { children: (_a = node === null || node === void 0 ? void 0 : node.children) !== null && _a !== void 0 ? _a : children })));
},
h4: (node, props, children) => {
var _a;
return (_jsx(Header, Object.assign({ size: "xs" }, props, { children: (_a = node === null || node === void 0 ? void 0 : node.children) !== null && _a !== void 0 ? _a : children })));
},
blockquote: (node, props, children) => { var _a; return _jsx(BlockQuote, Object.assign({}, props, { children: (_a = node === null || node === void 0 ? void 0 : node.children) !== null && _a !== void 0 ? _a : children })); },
};
export const transformHTML = (content = '') => {
content = content.replace(/\r\n\r\n/g, '<br /><br />');
return htmr(content, { transform });
};
export const Article = ({ author, dateGmt, content, modifiedGmt, excerpt, title, shouldStartOpen }) => {
const article = useRef(null);
const [isOpen, setIsOpen] = useState(shouldStartOpen);
const [articleHeight, setArticleHeight] = useState(0);
const [hasFirstLoadFinished, setHasFirstLoadFinished] = useState(false);
const hashId = title === null || title === void 0 ? void 0 : title.split(' ').join('-');
const hasBeenUpdated = !!modifiedGmt;
const dateString = hasBeenUpdated
? `Updated ${new Date(modifiedGmt).toLocaleDateString()}`
: new Date(dateGmt).toLocaleDateString();
const { name: authorName, bio, image, jobTitle } = author;
useEffect(() => {
if (shouldStartOpen && !isOpen) {
setIsOpen(true);
}
}, [shouldStartOpen, isOpen]);
// Calculating the offsetTop of the element should refresh each time it is toggled open/shut
useEffect(() => {
var _a, _b;
if (article.current) {
setArticleHeight((_b = (_a = article.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0);
}
}, [article, isOpen]);
/*
When the article is closed, we should scroll to its top,
and should only depend on when isOpen changes.
*/
useLayoutEffect(() => {
if (!isOpen && hasFirstLoadFinished && articleHeight > 0) {
window.scrollTo({ top: articleHeight });
}
}, [isOpen, hasFirstLoadFinished, articleHeight]);
// Set when the article has loaded so we prevent automatic scroll to the top
useEffect(() => {
if (!hasFirstLoadFinished) {
setHasFirstLoadFinished(true);
}
}, [hasFirstLoadFinished]);
const theme = useTheme();
return (hasFirstLoadFinished && (_jsxs(SectionWrapper, Object.assign({ id: hashId, ref: article }, { children: [_jsxs(HeaderWrapper, Object.assign({ "data-testid": `article:header:${title}`, onClick: () => setIsOpen((isOpen) => !isOpen) }, { children: [_jsxs(HeaderContentWrapper, { children: [_jsx(Header, Object.assign({ size: isRebrand(theme) ? 'xs' : 'lg' }, { children: title })), _jsx(Copy, Object.assign({ light: true, size: "sm", boldType: "semiBold" }, { children: `${dateString} | by ${authorName}` })), !isOpen && _jsx(ArticleContent, { children: transformHTML(excerpt) })] }), _jsx(IconWrapper, { children: _jsx(Icon, { name: `actions/carrot-${isOpen ? 'up' : 'down'}` }) })] })), isOpen && (_jsxs(_Fragment, { children: [_jsx(ArticleContent, Object.assign({ "data-testid": `article:content:${title}` }, { children: transformHTML(content) })), _jsx(AuthorCard, { description: bio, img: image, imgAlt: authorName, name: authorName, title: jobTitle }), _jsxs(CloseButton, Object.assign({ "data-testid": `close-article:${title}`, onClick: () => {
setIsOpen(false);
} }, { children: [_jsx(Copy, Object.assign({ light: true }, { children: "Close" })), _jsx(Icon, { name: "actions/carrot-up" })] }))] }))] }))));
};
Article.propTypes = {
/** Should have name, bio, jobTitle and image properties */
author: PropTypes.object,
/** Date that the article was written */
dateGmt: PropTypes.string,
/** The whole article that is pulled from Wordpress (raw html) */
content: PropTypes.string,
/** Date for the last time the article was updated */
modifiedGmt: PropTypes.string,
/** Minified text for the article, in raw html */
excerpt: PropTypes.string,
/** Title for the article */
title: PropTypes.string,
/** Defining if the article should start open */
shouldStartOpen: PropTypes.bool,
};
export default Article;
//# sourceMappingURL=article.js.map