-
);
}
diff --git a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss
index 18e59c74236..4ec6b581381 100644
--- a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss
+++ b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss
@@ -1,27 +1,15 @@
.code-block-wrapper {
position: relative;
margin-bottom: 1.5rem;
-}
-
-.code-block {
- background-color: #2d3748;
- color: #e2e8f0;
- padding: 1rem;
- padding-right: 3.5rem;
- border-radius: 0.5rem;
- overflow-x: auto;
- font-size: 0.875rem;
- line-height: 1.5;
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
- code {
- font-family: monospace;
+ &:hover .copy-button {
+ opacity: 1;
}
}
.copy-button {
position: absolute;
- top: 0.32rem;
+ top: 0.5rem;
right: 0.5rem;
z-index: 10;
@@ -34,18 +22,19 @@
font-size: 0.75rem;
font-weight: 500;
- /* Always visible */
- opacity: 1;
+ /* visible on hover */
+ opacity: 0;
- background-color: #7c3aed;
+ background-color: #175d96;
color: #e2e8f0;
transition:
background-color 0.2s,
- transform 0.1s;
+ transform 0.1s,
+ opacity 0.3s;
&:hover {
- background-color: #6d28d9;
+ background-color: #2f85d0;
}
/* Success */
@@ -66,6 +55,7 @@
&:focus {
outline: none;
+ opacity: 1;
}
&:active {
diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.jsx
similarity index 72%
rename from src/components/Configuration/components.js
rename to src/components/Configuration/components.jsx
index 40a9c0f1373..3012b4f87cd 100644
--- a/src/components/Configuration/components.js
+++ b/src/components/Configuration/components.jsx
@@ -1,40 +1,40 @@
-import { isValidElement, Component } from 'react';
-import Popover from 'react-tiny-popover';
-import './Configuration.scss';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import { Component, isValidElement } from "react";
+import Popover from "react-tiny-popover";
+import "./Configuration.scss";
const DEFAULT_CHILDREN_SIZE = 4;
-const isFirstChild = (child) => typeof child === 'string' && child !== ' ';
+const isFirstChild = (child) => typeof child === "string" && child !== " ";
const removeSpaces = (child) => (isFirstChild(child) ? child.trim() : child);
-const addLink = (child, i, url) => {
- return isFirstChild(child) ? (
+const addLink = (child, i, url) =>
+ isFirstChild(child) ? (
{child}
) : (
child
);
-};
-const Card = ({ body }) => {
- return (
-
-
- );
-};
+const Card = ({ body }) => (
+
- {body}
-
-
+
+);
+
Card.propTypes = {
body: PropTypes.node,
};
+
export class Details extends Component {
static propTypes = {
url: PropTypes.string,
myChilds: PropTypes.arrayOf(PropTypes.node),
};
+
constructor(props) {
super(props);
this.state = {
@@ -57,13 +57,15 @@ export class Details extends Component {
const closeDefaultTagIndex = myChilds.findIndex((child) => {
if (isValidElement(child)) {
return (
- child.props.className.includes('tag') &&
+ child.props.className.includes("tag") &&
child.props.children.length === DEFAULT_CHILDREN_SIZE
);
}
+
+ return false;
});
- const content = myChilds.slice();
+ const content = [...myChilds];
// Summary is the part of the snippet that would be shown in the code snippet,
// to get it we need to cut the
+ {body}
+
+ Child content
+
+
+`;
+
+exports[`Container renders correctly without className 1`] = `
++ Child content +
+
+
+ Simple child
+
+
+`;
diff --git a/src/components/Contributors/404.js b/src/components/Contributors/404.js
index dc56737e8f6..70fcfbf27e4 100644
--- a/src/components/Contributors/404.js
+++ b/src/components/Contributors/404.js
@@ -1,12 +1,12 @@
// contributors 404
export const contributorsNotFound = [
- 'bartushek',
- 'rynclark',
- 'henriquea',
- 'makuzaverite',
- 'MijaelWatts',
- 'Kolhar730',
- 'grrizzly',
- 'maxloh',
- 'varunjayaraman',
+ "bartushek",
+ "rynclark",
+ "henriquea",
+ "makuzaverite",
+ "MijaelWatts",
+ "Kolhar730",
+ "grrizzly",
+ "maxloh",
+ "varunjayaraman",
];
diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index 8d0eca7cc0b..aaf7af908a7 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/src/components/Contributors/Contributors.jsx
@@ -1,17 +1,9 @@
-import { useState } from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
-import SmallIcon from '../../assets/icon-square-small-slack.png';
-import PropTypes from 'prop-types';
-import { contributorsNotFound } from './404.js';
+import PropTypes from "prop-types";
+import { useState } from "react";
+import VisibilitySensor from "react-visibility-sensor";
+import SmallIcon from "../../assets/icon-square-small-slack.png";
+import { contributorsNotFound } from "./404.js";
-Contributors.propTypes = {
- contributors: PropTypes.array.isRequired,
-};
-
-Contributor.propTypes = {
- contributor: PropTypes.string.isRequired,
- inView: PropTypes.bool.isRequired,
-};
function Contributor({ contributor, inView }) {
return (
@@ -29,6 +21,11 @@ function Contributor({ contributor, inView }) {
);
}
+Contributor.propTypes = {
+ contributor: PropTypes.string.isRequired,
+ inView: PropTypes.bool.isRequired,
+};
+
export default function Contributors({ contributors }) {
const [inView, setInView] = useState(false);
const handleInView = (inView) => {
@@ -51,7 +48,10 @@ export default function Contributors({ contributors }) {
{contributors
- .filter((c) => contributorsNotFound.includes(c) === false)
+ .filter(
+ (contributor) =>
+ contributorsNotFound.includes(contributor) === false,
+ )
.map((contributor) => (
);
}
+
+Contributors.propTypes = {
+ contributors: PropTypes.array.isRequired,
+};
diff --git a/src/components/Cube/Cube.jsx b/src/components/Cube/Cube.jsx
index 0450528c2f0..ba59ec6741f 100644
--- a/src/components/Cube/Cube.jsx
+++ b/src/components/Cube/Cube.jsx
@@ -1,9 +1,9 @@
// Import External Dependencies
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import { Component } from "react";
// Load Styling
-import './Cube.scss';
+import "./Cube.scss";
export default class Cube extends Component {
static propTypes = {
@@ -17,7 +17,7 @@ export default class Cube extends Component {
static defaultProps = {
hover: false,
- theme: 'dark',
+ theme: "dark",
depth: 30,
repeatDelay: 1000,
};
@@ -30,8 +30,8 @@ export default class Cube extends Component {
};
render() {
- let { x, y, z } = this.state;
- let { theme, depth, className = '' } = this.props;
+ const { x, y, z } = this.state;
+ const { theme, depth, className = "" } = this.props;
return (
{/* sub navigation */}
{links
- .filter((link) => {
- // only those with children are displayed
- return link.children;
- })
+ .filter(
+ (link) =>
+ // only those with children are displayed
+ link.children,
+ )
.map((link) => {
- if (link.isactive) {
- // hide the children if the link is not active
- if (!link.isactive({}, location)) {
- return null;
- }
+ if (
+ link.isActive && // hide the children if the link is not active
+ !link.isActive({}, location)
+ ) {
+ return null;
}
return (
- {this._getFaces('outer')}
+ {this._getFaces("outer")}
- {this._getFaces('inner')}
+ {this._getFaces("inner")}
@@ -84,26 +84,27 @@ export default class Cube extends Component {
}
componentDidMount() {
- let { hover, continuous, repeatDelay } = this.props;
+ const { hover, continuous, repeatDelay } = this.props;
if (hover) {
- this.container.addEventListener('mouseenter', this._spin);
- this.container.addEventListener('mouseleave', this._reset);
+ this.container.addEventListener("mouseenter", this._spin);
+ this.container.addEventListener("mouseleave", this._reset);
} else if (continuous) {
let degrees = 0;
- let axis = 'y';
+ const axis = "y";
- let animation = () => {
- let obj = {};
+ const animation = () => {
+ const obj = {};
obj[axis] = degrees += 90;
this.setState({
...obj,
iteration: (this.state.iteration + 1) % 4,
});
+ // eslint-disable-next-line no-use-before-define
tick();
};
- let tick = () =>
+ const tick = () =>
setTimeout(() => requestAnimationFrame(animation), repeatDelay);
this._timeout = tick();
@@ -111,11 +112,11 @@ export default class Cube extends Component {
}
componentWillUnmount() {
- let { hover, continuous } = this.props;
+ const { hover, continuous } = this.props;
if (hover) {
- this.container.removeEventListener('mouseenter', this._spin);
- this.container.removeEventListener('mouseleave', this._reset);
+ this.container.removeEventListener("mouseenter", this._spin);
+ this.container.removeEventListener("mouseleave", this._reset);
} else if (continuous) {
clearTimeout(this._timeout);
}
@@ -128,7 +129,7 @@ export default class Cube extends Component {
* @return {array} - An array of nodes
*/
_getFaces(type) {
- let { iteration } = this.state;
+ const { iteration } = this.state;
// Keep the thicker border on
// the outside on each iteration
@@ -172,15 +173,15 @@ export default class Cube extends Component {
};
return [
- 'rotateX(0deg)',
- 'rotateX(-90deg)',
- 'rotateX(90deg)',
- 'rotateY(-90deg)',
- 'rotateY(90deg)',
- 'rotateY(180deg)',
+ "rotateX(0deg)",
+ "rotateX(-90deg)",
+ "rotateX(90deg)",
+ "rotateY(-90deg)",
+ "rotateY(90deg)",
+ "rotateY(180deg)",
].map((rotation, i) => {
const borderStyles =
- type === 'outer'
+ type === "outer"
? {
borderTopWidth: borderWidthMap[i].top[iteration],
borderRightWidth: borderWidthMap[i].right[iteration],
@@ -208,7 +209,7 @@ export default class Cube extends Component {
* @return {string} - A random axis (i.e. x, y, or z)
*/
_getRandomAxis() {
- let axes = Object.keys(this.state);
+ const axes = Object.keys(this.state);
return axes[Math.floor(Math.random() * axes.length)];
}
@@ -219,9 +220,9 @@ export default class Cube extends Component {
* @param {object} e - Native event
*/
_spin = () => {
- let obj = {};
- let axis = this._getRandomAxis();
- let sign = Math.random() < 0.5 ? -1 : 1;
+ const obj = {};
+ const axis = this._getRandomAxis();
+ const sign = Math.random() < 0.5 ? -1 : 1;
obj[axis] = sign * 90;
diff --git a/src/components/Cube/Cube.scss b/src/components/Cube/Cube.scss
index a07a1574c23..543b2246f8d 100644
--- a/src/components/Cube/Cube.scss
+++ b/src/components/Cube/Cube.scss
@@ -1,4 +1,4 @@
-@import 'functions';
+@import "functions";
.cube {
position: relative;
diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index 41946b94d30..d3ff254674d 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -1,51 +1,53 @@
-import { Component } from 'react';
-import './Dropdown.scss';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import { Component } from "react";
+
+import "./Dropdown.scss";
export default class Dropdown extends Component {
static propTypes = {
className: PropTypes.string,
items: PropTypes.array,
};
+
state = {
active: false,
};
componentDidMount() {
document.addEventListener(
- 'keyup',
+ "keyup",
this._closeDropdownOnEsc.bind(this),
- true
+ true,
);
document.addEventListener(
- 'focus',
+ "focus",
this._closeDropdownIfFocusLost.bind(this),
- true
+ true,
);
document.addEventListener(
- 'click',
+ "click",
this._closeDropdownIfFocusLost.bind(this),
- true
+ true,
);
}
- _closeDropdownOnEsc(e) {
- if (e.key === 'Escape' && this.state.active) {
+ _closeDropdownOnEsc(event) {
+ if (event.key === "Escape" && this.state.active) {
this.setState({ active: false }, () => {
this.dropdownButton.focus();
});
}
}
- _closeDropdownIfFocusLost(e) {
- if (this.state.active && !this.dropdown.contains(e.target)) {
+ _closeDropdownIfFocusLost(event) {
+ if (this.state.active && !this.dropdown.contains(event.target)) {
this.setState({ active: false });
}
}
render() {
- let { className = '', items = [] } = this.props;
- let activeMod = this.state.active ? 'dropdown__list--active' : '';
+ const { className = "", items = [] } = this.props;
+ const activeMod = this.state.active ? "dropdown__list--active" : "";
return (
);
}
- _handleArrowKeys(currentIndex, lastIndex, e) {
- if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
- e.preventDefault();
+ _handleArrowKeys(currentIndex, lastIndex, event) {
+ if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+ event.preventDefault();
}
let newIndex = currentIndex;
- if (e.key === 'ArrowDown') {
+ if (event.key === "ArrowDown") {
newIndex++;
if (newIndex > lastIndex) {
newIndex = 0;
}
}
- if (e.key === 'ArrowUp') {
+ if (event.key === "ArrowUp") {
newIndex--;
if (newIndex < 0) {
newIndex = lastIndex;
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index 72c90df5035..1d63d89e012 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -1,4 +1,4 @@
-@import 'functions';
+@import "functions";
.dropdown {
position: relative;
@@ -22,7 +22,7 @@
.dropdown__arrow {
&:before {
- content: '\25be';
+ content: "\25be";
}
}
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 317fdfec5c0..e0c9b474fa8 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -1,12 +1,51 @@
-import Link from '../Link/Link';
-import Container from '../Container/Container';
-import Icon from '../../assets/icon-square-small.svg';
-import CC from '../../assets/cc.svg';
-import BY from '../../assets/by.svg';
-import './Footer.scss';
+import BY from "../../assets/by.svg";
+import CC from "../../assets/cc.svg";
+import Icon from "../../assets/icon-square-small.svg";
+import OpenJSLogo from "../../assets/openjs-logo.png";
+import Container from "../Container/Container.jsx";
+import Link from "../Link/Link.jsx";
+import "./Footer.scss";
const Footer = () => (
{link.children.map((child) => {
const classNames =
- 'text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white';
+ "text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white";
const isActive = location.pathname.startsWith(child.url);
return (
- {child.content === 'api'
+ {child.content === "api"
? child.content.toUpperCase()
: child.content}
@@ -260,4 +266,11 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
);
}
+Navigation.propTypes = {
+ pathname: PropTypes.string,
+ hash: PropTypes.string,
+ links: PropTypes.array,
+ toggleSidebar: PropTypes.func,
+};
+
export default Navigation;
diff --git a/src/components/NotificationBar/MessageBar.jsx b/src/components/NotificationBar/MessageBar.jsx
index ea5e009d7a7..b3035d12e52 100644
--- a/src/components/NotificationBar/MessageBar.jsx
+++ b/src/components/NotificationBar/MessageBar.jsx
@@ -1,26 +1,24 @@
-import CloseIcon from '../../styles/icons/cross.svg';
-import PropTypes from 'prop-types';
-import Content from './Notification.mdx';
-import { version, localStorageIsEnabled } from './NotificationBar';
-import { useTransition, animated, config } from '@react-spring/web';
-import { useEffect, useState } from 'react';
+import { animated, config, useTransition } from "@react-spring/web";
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import CloseIcon from "../../styles/icons/cross.svg";
+import Content from "./Notification.mdx";
+import { localStorageIsEnabled, version } from "./NotificationBar.jsx";
-MessageBar.propTypes = {
- onClose: PropTypes.func,
-};
export default function MessageBar(props) {
const [list, setList] = useState([]);
const listTransitions = useTransition(list, {
config: config.gentle,
- from: { opacity: 0, transform: 'translate3d(-50%, 0px, 0px)' },
- enter: { opacity: 1, transform: 'translate3d(0px, 0px, 0px)' },
+ from: { opacity: 0, transform: "translate3d(-50%, 0px, 0px)" },
+ enter: { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
keys: list.map((item, index) => index),
});
useEffect(() => {
- setList(['']);
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setList([""]);
}, []);
const close = () => {
- localStorage.setItem('notification-dismissed', version);
+ localStorage.setItem("notification-dismissed", version);
props.onClose();
};
return (
@@ -32,9 +30,10 @@ export default function MessageBar(props) {
>
);
}
+
+AdjacentPages.propTypes = {
+ previous: PropTypes.shape({
+ url: PropTypes.string,
+ title: PropTypes.string,
+ }),
+ next: PropTypes.shape({
+ url: PropTypes.string,
+ title: PropTypes.string,
+ }),
+};
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index 49a683de69d..271a77ca8ce 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -1,19 +1,20 @@
// Import External Dependencies
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useLocation } from 'react-router-dom';
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
// Import Components
-import PageLinks from '../PageLinks/PageLinks';
-import Markdown from '../Markdown/Markdown';
-import Contributors from '../Contributors/Contributors';
-import Translators from '../Translators/Translators';
-import { PlaceholderString } from '../Placeholder/Placeholder';
-import AdjacentPages from './AdjacentPages';
+import Contributors from "../Contributors/Contributors.jsx";
+import Link from "../Link/Link.jsx";
+import Markdown from "../Markdown/Markdown.jsx";
+import PageLinks from "../PageLinks/PageLinks.jsx";
+import { placeholderString } from "../Placeholder/Placeholder.jsx";
+import Translators from "../Translators/Translators.jsx";
+import AdjacentPages from "./AdjacentPages.jsx";
// Load Styling
-import './Page.scss';
-import Link from '../Link/Link';
+import "./Page.scss";
+
export default function Page(props) {
const {
title,
@@ -28,12 +29,10 @@ export default function Page(props) {
const isDynamicContent = props.content instanceof Promise;
const [content, setContent] = useState(
isDynamicContent
- ? PlaceholderString()
- : () => props.content.default || props.content
- );
- const [contentLoaded, setContentLoaded] = useState(
- isDynamicContent ? false : true
+ ? placeholderString()
+ : () => props.content.default || props.content,
);
+ const [contentLoaded, setContentLoaded] = useState(!isDynamicContent);
useEffect(() => {
if (props.content instanceof Promise) {
@@ -42,7 +41,7 @@ export default function Page(props) {
setContent(() => mod.default || mod);
setContentLoaded(true);
})
- .catch(() => setContent('Error loading content.'));
+ .catch(() => setContent("Error loading content."));
}
}, [props.content]);
@@ -52,16 +51,18 @@ export default function Page(props) {
let observer;
if (contentLoaded) {
if (hash) {
- const target = document.querySelector('#md-content');
+ const target = document.querySelector("#md-content");
// two cases here
// 1. server side rendered page, so hash target is already there
- if (document.querySelector(hash)) {
- document.querySelector(hash).scrollIntoView();
+ // Note: Why this change because we use getElementById instead of querySelector(hash) here because
+ // CSS selectors cannot start with a digit (e.g. #11-in-scope is invalid)
+ if (document.getElementById(hash.slice(1))) {
+ document.getElementById(hash.slice(1)).scrollIntoView();
} else {
// 2. dynamic loaded content
// we need to observe the dom change to tell if hash exists
observer = new MutationObserver(() => {
- const element = document.querySelector(hash);
+ const element = document.getElementById(hash.slice(1));
if (element) {
element.scrollIntoView();
}
@@ -92,7 +93,7 @@ export default function Page(props) {
let contentRender;
- if (typeof content === 'function') {
+ if (typeof content === "function") {
contentRender = content({}).props.children;
} else {
contentRender = (
@@ -104,7 +105,7 @@ export default function Page(props) {
);
}
return (
-
+
+ );
+}
diff --git a/src/components/OfflineBanner/OfflineBanner.scss b/src/components/OfflineBanner/OfflineBanner.scss
new file mode 100644
index 00000000000..3d08734b08b
--- /dev/null
+++ b/src/components/OfflineBanner/OfflineBanner.scss
@@ -0,0 +1,29 @@
+.offline-banner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 20px;
+ background-color: #2b3a42;
+ color: #fff;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ border-bottom: 1px solid #465e69;
+
+ &__content {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ &__icon {
+ flex-shrink: 0;
+ width: 16px;
+ height: 16px;
+ fill: #8dd6f9;
+ }
+
+ &__text {
+ letter-spacing: 0.01em;
+ }
+}
diff --git a/src/components/OfflineBanner/OfflineBanner.test.jsx b/src/components/OfflineBanner/OfflineBanner.test.jsx
new file mode 100644
index 00000000000..a7ca5a3435b
--- /dev/null
+++ b/src/components/OfflineBanner/OfflineBanner.test.jsx
@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { afterEach, beforeEach, describe, expect, it } from "@jest/globals";
+import renderer from "react-test-renderer";
+import OfflineBanner from "./OfflineBanner.jsx";
+
+/**
+ * Helper to mock navigator.onLine
+ */
+function setNavigatorOnLine(value) {
+ Object.defineProperty(window.navigator, "onLine", {
+ configurable: true,
+ get: () => value,
+ });
+}
+
+describe("OfflineBanner", () => {
+ let originalOnLine;
+
+ beforeEach(() => {
+ // Save original descriptor
+ originalOnLine = Object.getOwnPropertyDescriptor(
+ window.navigator,
+ "onLine",
+ );
+ });
+
+ afterEach(() => {
+ // Restore original descriptor
+ if (originalOnLine) {
+ Object.defineProperty(window.navigator, "onLine", originalOnLine);
+ } else {
+ delete window.navigator.onLine;
+ }
+ });
+
+ it("renders nothing when online", () => {
+ setNavigatorOnLine(true);
+ const tree = renderer.create(
+
+
+ You are currently offline. Some features may be unavailable.
+
+
+
+
+`;
+
+exports[`OfflineBanner shows banner when window goes offline 1`] = `
+
+
+
+ You are currently offline. Some features may be unavailable.
+
+
+
+
+`;
diff --git a/src/components/Page/AdjacentPages.jsx b/src/components/Page/AdjacentPages.jsx
index a99d9883da4..17521292a7a 100644
--- a/src/components/Page/AdjacentPages.jsx
+++ b/src/components/Page/AdjacentPages.jsx
@@ -1,16 +1,6 @@
-import Link from '../Link/Link';
-import './AdjacentPages.scss';
-import PropTypes from 'prop-types';
-AdjacentPages.propTypes = {
- previous: PropTypes.shape({
- url: PropTypes.string,
- title: PropTypes.string,
- }),
- next: PropTypes.shape({
- url: PropTypes.string,
- title: PropTypes.string,
- }),
-};
+import PropTypes from "prop-types";
+import Link from "../Link/Link.jsx";
+import "./AdjacentPages.scss";
export default function AdjacentPages({ previous, next }) {
if (!previous && !next) return null;
@@ -35,3 +25,14 @@ export default function AdjacentPages({ previous, next }) {
+
+
+ You are currently offline. Some features may be unavailable.
+
+
+
+
+ Page Not Found | webpack
+
+
+
+
+ ,
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap b/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap
new file mode 100644
index 00000000000..df6bbb63675
--- /dev/null
+++ b/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`PageNotFound renders correctly 1`] = `
+
Page Not Found
Oops! The page you are looking for has been removed or relocated.
diff --git a/src/components/PageNotFound/PageNotFound.test.jsx b/src/components/PageNotFound/PageNotFound.test.jsx new file mode 100644 index 00000000000..9a9f5f17c38 --- /dev/null +++ b/src/components/PageNotFound/PageNotFound.test.jsx @@ -0,0 +1,21 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { describe, expect, it } from "@jest/globals"; +import { HelmetProvider } from "react-helmet-async"; +import { MemoryRouter } from "react-router-dom"; +import renderer from "react-test-renderer"; +import PageNotFound from "./PageNotFound.jsx"; + +describe("PageNotFound", () => { + it("renders correctly", () => { + const tree = renderer + .create( +
+
+`;
diff --git a/src/components/Placeholder/Placeholder.js b/src/components/Placeholder/Placeholder.jsx
similarity index 88%
rename from src/components/Placeholder/Placeholder.js
rename to src/components/Placeholder/Placeholder.jsx
index d2fc646fe2e..61503b53adf 100644
--- a/src/components/Placeholder/Placeholder.js
+++ b/src/components/Placeholder/Placeholder.jsx
@@ -1,7 +1,7 @@
-import './Placeholder.scss';
+import "./Placeholder.scss";
// Placeholder string
-const PlaceholderString = () => `
+const placeholderString = () => `
+ Page Not Found +
++ Oops! The page you are looking for has been removed or relocated. +
+ + Go to Homepage + +
@@ -31,4 +31,4 @@ function PlaceholderComponent() { ); } -export { PlaceholderString, PlaceholderComponent }; +export { PlaceholderComponent, placeholderString }; diff --git a/src/components/Placeholder/Placeholder.scss b/src/components/Placeholder/Placeholder.scss index 50ac2e52776..0e9a5e2b2ad 100644 --- a/src/components/Placeholder/Placeholder.scss +++ b/src/components/Placeholder/Placeholder.scss @@ -1,4 +1,4 @@ -@import 'functions'; +@import "functions"; .placeholder { h2, @@ -17,7 +17,7 @@ #fcfcfc, getColor(concrete) ); - content: ''; + content: ""; left: 0; height: 100%; position: absolute; diff --git a/src/components/Placeholder/Placeholder.test.jsx b/src/components/Placeholder/Placeholder.test.jsx new file mode 100644 index 00000000000..fd215b1a468 --- /dev/null +++ b/src/components/Placeholder/Placeholder.test.jsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { describe, expect, it } from "@jest/globals"; +import renderer from "react-test-renderer"; +import { PlaceholderComponent } from "./Placeholder.jsx"; + +describe("PlaceholderComponent", () => { + it("renders correctly", () => { + const tree = renderer.create(
+
+`;
diff --git a/src/components/Print/Print.js b/src/components/Print/Print.jsx
similarity index 70%
rename from src/components/Print/Print.js
rename to src/components/Print/Print.jsx
index f278c17eec5..e3fcb808743 100644
--- a/src/components/Print/Print.js
+++ b/src/components/Print/Print.jsx
@@ -1,21 +1,27 @@
-import './Print.scss';
-import icon from '../../assets/icon-print.svg';
-import BarIcon from '../../styles/icons/vertical-bar.svg';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import "./Print.scss";
+import icon from "../../assets/icon-print.svg";
+import BarIcon from "../../styles/icons/vertical-bar.svg";
const PRINTABLE_SECTIONS = [
- 'api',
- 'concepts',
- 'configuration',
- 'contribute',
- 'guides',
- 'loaders',
- 'migrate',
- 'plugins',
+ "api",
+ "concepts",
+ "configuration",
+ "contribute",
+ "guides",
+ "loaders",
+ "migrate",
+ "plugins",
];
-Print.propTypes = {
- url: PropTypes.string,
-};
+
+function _printPageUrlFromUrl(urlRaw) {
+ const urlSplit = urlRaw.split("/");
+
+ return PRINTABLE_SECTIONS.includes(urlSplit[1])
+ ? `/${urlSplit[1]}/printable/`
+ : false;
+}
+
export default function Print(props) {
const { url } = props;
const printUrl = _printPageUrlFromUrl(url);
@@ -26,7 +32,7 @@ export default function Print(props) {
}
return (
- + +
++ +
++ +
+
+
;
}
diff --git a/src/components/Shield/Shield.jsx b/src/components/Shield/Shield.jsx
index 5f1e80afdf8..d7cbdfe68ea 100644
--- a/src/components/Shield/Shield.jsx
+++ b/src/components/Shield/Shield.jsx
@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+
const Shield = (props) => (
![webpack shield]()
{
+ it("renders correctly with content and label props", () => {
+ const tree = renderer
+ .create(
+`;
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 5c01991eaf0..64e2ee3ba70 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -1,30 +1,24 @@
// Import External Dependencies
-import SidebarItem from '../SidebarItem/SidebarItem';
-import Print from '../Print/Print';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import DownIcon from "../../styles/icons/chevron-down.svg";
+import LoadingIcon from "../../styles/icons/loading.svg";
+import Print from "../Print/Print.jsx";
+import SidebarItem from "../SidebarItem/SidebarItem.jsx";
// Load Styling
-import './Sidebar.scss';
-import { useEffect, useState } from 'react';
-
-import DownIcon from '../../styles/icons/chevron-down.svg';
-import LoadingIcon from '../../styles/icons/loading.svg';
+import "./Sidebar.scss";
const versions = [5, 4];
const currentDocsVersion = 5;
-Sidebar.propTypes = {
- className: PropTypes.string,
- pages: PropTypes.array,
- currentPage: PropTypes.string,
-};
// Create and export the component
-export default function Sidebar({ className = '', pages, currentPage }) {
+export default function Sidebar({ className = "", pages, currentPage }) {
const [version, setVersion] = useState(currentDocsVersion);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (version === currentDocsVersion) return;
- const href = window.location.href;
+ const { href } = window.location;
const url = new URL(href);
url.hostname = `v${version}.webpack.js.org`;
@@ -37,12 +31,16 @@ export default function Sidebar({ className = '', pages, currentPage }) {
+`;
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 5c01991eaf0..64e2ee3ba70 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -1,30 +1,24 @@
// Import External Dependencies
-import SidebarItem from '../SidebarItem/SidebarItem';
-import Print from '../Print/Print';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import DownIcon from "../../styles/icons/chevron-down.svg";
+import LoadingIcon from "../../styles/icons/loading.svg";
+import Print from "../Print/Print.jsx";
+import SidebarItem from "../SidebarItem/SidebarItem.jsx";
// Load Styling
-import './Sidebar.scss';
-import { useEffect, useState } from 'react';
-
-import DownIcon from '../../styles/icons/chevron-down.svg';
-import LoadingIcon from '../../styles/icons/loading.svg';
+import "./Sidebar.scss";
const versions = [5, 4];
const currentDocsVersion = 5;
-Sidebar.propTypes = {
- className: PropTypes.string,
- pages: PropTypes.array,
- currentPage: PropTypes.string,
-};
// Create and export the component
-export default function Sidebar({ className = '', pages, currentPage }) {
+export default function Sidebar({ className = "", pages, currentPage }) {
const [version, setVersion] = useState(currentDocsVersion);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (version === currentDocsVersion) return;
- const href = window.location.href;
+ const { href } = window.location;
const url = new URL(href);
url.hostname = `v${version}.webpack.js.org`;
@@ -37,12 +31,16 @@ export default function Sidebar({ className = '', pages, currentPage }) {