🚧 WIP: Start work on third-party licenses page

app/components/common/Footer/socials.tsx

@@ -4,10 +4,10 @@
 
 import { l } from "../../../l10n";
 import { getComponentConfig } from "../../../utils/data";
-import { Discord } from "../../icons/social/Discord";
-import { Mastodon } from "../../icons/social/Mastodon";
-import { Matrix } from "../../icons/social/Matrix";
-import { Twitter } from "../../icons/social/Twitter";
+import { Discord } from "../../icons/brands/Discord";
+import { Mastodon } from "../../icons/brands/Mastodon";
+import { Matrix } from "../../icons/brands/Matrix";
+import { Twitter } from "../../icons/brands/Twitter";
 import FooterSection from "./section";
 
 const socialIcons = {

app/components/icons/ChevronRight.tsx

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Icon, IconProps } from ".";
+
+export const ChevronRight = (props: IconProps) => {
+	return (
+		<Icon {...props} ariaLabel="Chevron facing right">
+			<path
+				xmlns="http://www.w3.org/2000/svg"
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M4.29289 1.29289C3.90237 1.68342 3.90237 2.31658 4.29289 2.70711L9.58579 8L4.29289 13.2929C3.90237 13.6834 3.90237 14.3166 4.29289 14.7071C4.68342 15.0976 5.31658 15.0976 5.70711 14.7071L11.7071 8.70711C12.0976 8.31658 12.0976 7.68342 11.7071 7.29289L5.70711 1.29289C5.31658 0.902369 4.68342 0.902369 4.29289 1.29289Z"
+				fill="currentColor"
+			/>
+		</Icon>
+	);
+};

app/components/icons/OpenInNew.tsx

@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Icon, IconProps } from ".";
+
+export const OpenInNew = (props: IconProps) => {
+	return (
+		<Icon {...props} ariaLabel="Open in new">
+			<g clip-path="url(#clip0_1509_9)">
+				<path
+					d="M10 1C10 0.447715 10.4477 0 11 0H14C15.1046 0 16 0.895431 16 2V5C16 5.55228 15.5523 6 15 6C14.4477 6 14 5.55228 14 5V3.41421L10.7071 6.70711C10.3166 7.09763 9.68342 7.09763 9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289L12.5858 2H11C10.4477 2 10 1.55228 10 1Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M15 10C15 9.44771 14.5523 9 14 9C13.4477 9 13 9.44771 13 10V12C13 13.1046 12.1046 14 11 14H4C2.89543 14 2 13.1046 2 12V5C2 3.89543 2.89543 3 4 3H6C6.55228 3 7 2.55228 7 2C7 1.44772 6.55228 1 6 1H4C1.79086 1 0 2.79086 0 5V12C0 14.2091 1.79086 16 4 16H11C13.2091 16 15 14.2091 15 12V10Z"
+					fill="currentColor"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_1509_9">
+					<rect
+						width="16"
+						height="16"
+						fill="white"
+						transform="matrix(-1 0 0 1 16 0)"
+					/>
+				</clipPath>
+			</defs>
+		</Icon>
+	);
+};

app/components/icons/Search.tsx

@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Icon, IconProps } from ".";
+
+export const Search = (props: IconProps) => {
+	return (
+		<Icon {...props} ariaLabel="Search">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M13 6.5C13 2.91015 10.0899 0 6.5 0C2.91015 0 0 2.91015 0 6.5C0 10.0899 2.91015 13 6.5 13C7.85725 13 9.11734 12.584 10.1597 11.8726C10.2616 11.8031 10.399 11.8132 10.4862 11.9004L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L11.9004 10.4862C11.8132 10.399 11.8031 10.2616 11.8726 10.1597C12.584 9.11734 13 7.85725 13 6.5ZM11 6.5C11 4.01472 8.98528 2 6.5 2C4.01472 2 2 4.01472 2 6.5C2 8.98528 4.01472 11 6.5 11C8.98528 11 11 8.98528 11 6.5Z"
+				fill="currentColor"
+			/>
+		</Icon>
+	);
+};

app/components/icons/brands/NPM.tsx

@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Icon, IconProps } from "..";
+
+export const NPM = (props: IconProps) => {
+	return (
+		<Icon {...props} viewBox="0 0 256 256" ariaLabel="NPM">
+			<g clip-path="url(#clip0_1035_1191)">
+				<path d="M0 256V0H256V256H0Z" fill="#C12127" />
+				<path
+					d="M48 48H208V208H176V80H128V208H48V48Z"
+					fill="white"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_1035_1191">
+					<rect width="256" height="256" fill="white" />
+				</clipPath>
+			</defs>
+		</Icon>
+	);
+};

app/components/icons/index.tsx

@@ -9,6 +9,7 @@ export interface IconProps {
 	size?: number;
 	colour?: FDNColour | "current-color";
 	ariaLabel?: string;
+	className?: string;
 }
 
 export const Icon = ({
@@ -35,6 +36,7 @@ export const Icon = ({
 
 	return (
 		<svg
+			{...rest}
 			width={s * 16}
 			height={s * 16}
 			viewBox={viewBox ? viewBox : `0 0 16 16`}

app/components/index.tsx

@@ -14,7 +14,14 @@ type FDNColour =
 	| "white";
 
 type FDNSize = "sm" | "md" | "lg";
-type FDNSizeExtended = FDNSize | "xl" | "xxl" | "xxxl" | "fw" | "fh";
+type FDNSizeExtended =
+	| FDNSize
+	| "xl"
+	| "xxl"
+	| "xxxl"
+	| "4xl"
+	| "fw"
+	| "fh";
 
 type FDNStateType = "info" | "warn" | "success" | "error";
 

app/components/pages/third-party-licenses/Dependency.tsx

@@ -0,0 +1,89 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { getPackageURL, getSourceIcon, sources } from ".";
+import { OpenInNew } from "../../icons/OpenInNew";
+import Button from "../../ui/Button";
+import { ItemList } from "../../ui/ItemList";
+import { Reference } from "./Reference";
+
+export interface DependencyReference {
+	owner: string;
+	repo: string;
+	path: string;
+	branch: string;
+	line?: string;
+}
+
+export const Dependency = ({
+	name,
+	source,
+	license,
+	references
+}: {
+	name: string;
+	source: string;
+	license: string;
+	references: DependencyReference[];
+}) => {
+	const SourceIcon = getSourceIcon(source);
+	const pkgURL = getPackageURL(source, name);
+
+	return (
+		<section
+			className={"fdn-stack v gap-lg tpl-dep-info"}
+			id={`${source}--${name}`}
+		>
+			<div className="fdn-stack h x-space-between">
+				<a
+					className={"fdn-no-underline"}
+					href={`#${source}--${name}`}
+				>
+					<h4 className={"tpl-dep-name"}>{name}</h4>
+				</a>
+
+				<div className="fdn-stack h y-center gap-lg">
+					{SourceIcon ? (
+						<p className={"fdn-stack h gap-md"}>
+							{SourceIcon}
+							{sources[source].title}
+						</p>
+					) : (
+						<></>
+					)}
+
+					{pkgURL && (
+						<Button
+							colour={"blue"}
+							type={"text"}
+							href={pkgURL}
+							target={"_blank"}
+						>
+							View package{" "}
+							<OpenInNew colour={"current-color"} />
+						</Button>
+					)}
+				</div>
+			</div>
+
+			<ItemList className={"tpl-dep-reference-list"}>
+				{references.map((ref) => (
+					<Reference {...ref} />
+				))}
+			</ItemList>
+
+			<ItemList>
+				<li>
+					<code className={"fdn-code"}>
+						<pre>
+							{license.split("\n").map((ln) => (
+								<span>{ln}</span>
+							))}
+						</pre>
+					</code>
+				</li>
+			</ItemList>
+		</section>
+	);
+};

app/components/pages/third-party-licenses/DependencyItem.tsx

@@ -0,0 +1,51 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import clsx from "clsx";
+import { JSXInternal } from "preact/src/jsx";
+import { getSourceIcon } from ".";
+import { ArrowRightAnimated } from "../../icons/animated/ArrowRightAnimated";
+
+export const DependencyItem = ({
+	name,
+	source,
+	license,
+	...rest
+}: {
+	name: string;
+	source: string;
+	license: string;
+} & JSXInternal.HTMLAttributes<HTMLAnchorElement>) => {
+	const className = clsx(
+		"fdn-stack h x-space-between fdn-icon-arrow-right-animated-parent",
+		rest.className || ""
+	);
+
+	return (
+		<a
+			href={`#${source}--${name}`}
+			{...rest}
+			className={className}
+		>
+			<p>{name}</p>
+
+			<div className="fdn-stack h y-center gap-md">
+				{getSourceIcon(source)}
+
+				<div className="fdn-stack h y-center gap-sm">
+					<p
+						className={"text-center"}
+						style={{
+							minWidth: "82px"
+						}}
+					>
+						{license}
+					</p>
+
+					<ArrowRightAnimated colour={"current-color"} />
+				</div>
+			</div>
+		</a>
+	);
+};

app/components/pages/third-party-licenses/Reference.tsx

@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import clsx from "clsx";
+import { JSXInternal } from "preact/src/jsx";
+import { OpenInNew } from "../../icons/OpenInNew";
+import Button from "../../ui/Button";
+
+export const Reference = ({
+	owner,
+	repo,
+	path,
+	branch,
+	line,
+	...rest
+}: {
+	owner: string;
+	repo: string;
+	path: string;
+	branch: string;
+	line?: string;
+} & JSXInternal.HTMLAttributes<HTMLLIElement>) => {
+	const className = clsx(
+		"fdn-stack h x-space-between",
+		rest.className || ""
+	);
+
+	return (
+		<li {...rest} className={className}>
+			<div className={"fdn-stack h gap-lg"}>
+				<img
+					src={`https://github.com/${owner}.png`}
+					width={48}
+					height={48}
+				/>
+
+				<div className="fdn-stack v y-center">
+					<p>
+						<strong>
+							{owner}/{repo}
+						</strong>
+					</p>
+					<span>{path}</span>
+				</div>
+			</div>
+
+			<Button
+				colour={"blue"}
+				type={"text"}
+				href={`https://github.com/${owner}/${repo}/blob/${branch}/${path}${
+					line ? `#L${line}` : ``
+				}`}
+				target={"_blank"}
+			>
+				View source <OpenInNew colour={"current-color"} />
+			</Button>
+		</li>
+	);
+};

app/components/pages/third-party-licenses/index.tsx

@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { createElement } from "preact";
+import { Cargo } from "../../icons/brands/Cargo";
+import { NPM } from "../../icons/brands/NPM";
+
+export const sources: any = {
+	NodeService: {
+		icon: NPM,
+		title: "npm",
+		packageURL: (pkg: string) =>
+			`https://npmjs.com/package/${pkg}`
+	},
+	CargoService: {
+		icon: Cargo,
+		title: "crates.io",
+		packageURL: (pkg: string) => `https://crates.io/crates/${pkg}`
+	}
+};
+
+export const getSourceIcon = (source: keyof typeof sources) => {
+	if (source in sources) {
+		return createElement(sources[source].icon, {
+			title: sources[source].title,
+			size: 1.25
+		});
+	} else {
+		return <></>;
+	}
+};
+
+export const getPackageURL = (
+	source: keyof typeof sources,
+	pkg: string
+) => {
+	if (source in sources) {
+		return sources[source].packageURL(pkg);
+	} else {
+		return null;
+	}
+};

app/components/ui/Button/index.tsx

@@ -14,7 +14,7 @@ export interface ButtonProps {
 	fullwidth?: boolean;
 	href?: any;
 	noJS?: boolean;
-	type?: "primary" | "secondary";
+	type?: "primary" | "secondary" | "text";
 	hasIcon?: boolean;
 }