@mdn/fred 0.0.1

package/components/breadcrumbs/server.js

@@ -0,0 +1,79 @@
+import { html, nothing } from "lit";
+
+import { ServerComponent } from "../server/index.js";
+
+// Some type wrangling to cover parents = context.doc.parents | no parents at all | doc.parents
+
+/**
+ * @typedef {import("@rari").Parent} Parent
+ */
+
+/**
+ * @typedef {object} DocParentsContext
+ * @property {string} renderer The renderer to use
+ * @property {{parents: Parent[]}} doc The document to render
+ */
+
+/**
+ * @typedef {object} DirectParentsContext
+ * @property {string} renderer The renderer to use
+ * @property {Parent[]} parents The parents to render
+ */
+
+/**
+ * @typedef {DocParentsContext | DirectParentsContext} BreadcrumbContext
+ */
+
+/**
+ * Type predicate to check if context has doc.parents
+ * @param {BreadcrumbContext} context
+ * @returns {context is DocParentsContext}
+ */
+function hasDocParents(context) {
+  return "doc" in context && "parents" in context.doc;
+}
+
+/**
+ * Type predicate to check if context has direct parents
+ * @param {BreadcrumbContext} context
+ * @returns {context is DirectParentsContext}
+ */
+function hasDirectParents(context) {
+  return "parents" in context;
+}
+
+export class Breadcrumbs extends ServerComponent {
+  /**
+   * @param {BreadcrumbContext} context
+   */
+  render(context) {
+    /** @type {Parent[]} */
+    let parents;
+    if (hasDocParents(context)) {
+      parents = context.doc.parents;
+    } else if (hasDirectParents(context)) {
+      parents = context.parents;
+    } else {
+      return nothing;
+    }
+
+    return html`
+      <ol
+        class="breadcrumbs"
+        vocab="https://schema.org/"
+        typeof="BreadcrumbList"
+      >
+        ${parents.map(
+          ({ uri, title }, index) => html`
+            <li property="itemListElement" typeof="ListItem">
+              <a href=${uri} property="item" typeof="WebPage"
+                ><span property="name">${title}</span></a
+              >
+              <meta property="position" content=${index + 1} />
+            </li>
+          `,
+        )}
+      </ol>
+    `;
+  }
+}

package/components/breadcrumbs-bar/server.css

@@ -0,0 +1,50 @@
+/* Breadcrumbs */
+
+:root {
+  --breadcrumbs-bar-height: 2rem;
+}
+
+.breadcrumbs-bar {
+  display: flex;
+
+  column-gap: 1rem;
+  align-items: center;
+  justify-content: end;
+
+  max-width: 100vw; /* Workaround, remove later. */
+  height: var(--breadcrumbs-bar-height);
+
+  padding-inline: var(--layout-side-padding);
+
+  text-wrap: nowrap;
+
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-border-primary);
+  border-width: 1px 0;
+
+  &[data-scheme="dark"] {
+    color: var(--color-text-primary);
+    color-scheme: dark;
+  }
+
+  mdn-toggle-sidebar {
+    display: none;
+  }
+
+  @media (--screen-layout-1-sidebar-or-less) {
+    padding-left: 0;
+
+    mdn-toggle-sidebar {
+      display: block;
+    }
+  }
+
+  @media (--screen-small-and-narrower) {
+    column-gap: 0.5rem;
+    padding-inline: 0;
+  }
+
+  @media screen and (width <= 480px) {
+    column-gap: 0.25rem;
+  }
+}

package/components/breadcrumbs-bar/server.js

@@ -0,0 +1,48 @@
+import { html, nothing } from "lit";
+
+import { Breadcrumbs } from "../breadcrumbs/server.js";
+
+import { ServerComponent } from "../server/index.js";
+
+export class BreadcrumbsBar extends ServerComponent {
+  /**
+   * @param {import("@fred").Context} context
+   */
+  render(context) {
+    const colorScheme = ["Homepage", "SpaPlusLanding"].includes(
+      context.renderer,
+    )
+      ? "dark"
+      : "";
+    const toggleSidebar = ["Doc", "CurriculumModule", "GenericDoc"].includes(
+      context.renderer,
+    )
+      ? html`<mdn-toggle-sidebar></mdn-toggle-sidebar>`
+      : nothing;
+
+    return html`
+      <div class="breadcrumbs-bar" data-scheme=${colorScheme}>
+        ${toggleSidebar} ${Breadcrumbs.render(context)}
+        ${context.renderer === "Doc"
+          ? html`<mdn-collection-save-button
+              doc-url=${context.doc.mdn_url}
+              doc-title=${context.doc.title}
+            ></mdn-collection-save-button>`
+          : nothing}
+        <mdn-color-theme></mdn-color-theme>
+        ${"doc" in context
+          ? html`<mdn-language-switcher
+              locale=${context.locale}
+              native=${context.doc.native}
+              translations=${JSON.stringify(
+                "other_translations" in context.doc
+                  ? context.doc.other_translations
+                  : [],
+              )}
+              url=${context.url}
+            ></mdn-language-switcher>`
+          : nothing}
+      </div>
+    `;
+  }
+}

package/components/button/element.css

@@ -0,0 +1,12 @@
+@import url("./server.css");
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.button {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}

package/components/button/element.js

@@ -0,0 +1,49 @@
+import { LitElement, html } from "lit";
+
+import styles from "./element.css?lit";
+import Button from "./pure.js";
+
+export class MDNButton extends LitElement {
+  static styles = styles;
+
+  static properties = {
+    disabled: { type: Boolean },
+    variant: { type: String },
+    action: { type: String },
+    icon: { state: true },
+    iconOnly: { type: Boolean, attribute: "icon-only" },
+    href: { type: String },
+    target: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.disabled = false;
+    /** @type {import("@lit").TemplateResult | undefined} */
+    this.icon = undefined;
+    this.iconOnly = false;
+    /** @type {import("./types.js").ButtonVariants} */
+    this.variant = "primary";
+    /** @type {import("./types.js").ButtonActions} */
+    this.action = undefined;
+    /** @type {string | undefined} */
+    this.href = undefined;
+    /** @type {string | undefined} */
+    this.target = undefined;
+  }
+
+  render() {
+    return Button({
+      label: html`<slot></slot>`,
+      disabled: this.disabled,
+      icon: this.icon,
+      iconOnly: this.iconOnly,
+      variant: this.variant,
+      action: this.action,
+      href: this.href,
+      target: this.target,
+    });
+  }
+}
+
+customElements.define("mdn-button", MDNButton);

package/components/button/global.css

@@ -0,0 +1,4 @@
+mdn-button {
+  display: inline-flex;
+  vertical-align: middle;
+}

package/components/button/pure.js

@@ -0,0 +1,49 @@
+import { html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+/**
+ * @param {object} options
+ * @param {string | import("@lit").TemplateResult} options.label
+ * @param {import("@lit").TemplateResult} [options.icon]
+ * @param {boolean} [options.iconOnly]
+ * @param {boolean} [options.disabled]
+ * @param {string} [options.href]
+ * @param {string} [options.target]
+ * @param {import("./types.js").ButtonVariants} [options.variant]
+ * @param {import("./types.js").ButtonActions} [options.action]
+ */
+export default function Button({
+  label,
+  icon,
+  iconOnly,
+  disabled = false,
+  href,
+  target,
+  variant = "primary",
+  action,
+}) {
+  const inner = [
+    icon ? html`<span class="icon">${icon}</span>` : nothing,
+    html`<span id="label" class="label" ?hidden=${iconOnly}>${label}</span>`,
+  ];
+  return href
+    ? html`<a
+        href=${href}
+        target=${ifDefined(target)}
+        class="button"
+        aria-labelledby="label"
+        data-variant=${ifDefined(variant)}
+        data-action=${ifDefined(action)}
+      >
+        ${inner}
+      </a>`
+    : html`<button
+        class="button"
+        aria-labelledby="label"
+        ?disabled=${disabled}
+        data-variant=${ifDefined(variant)}
+        data-action=${ifDefined(action)}
+      >
+        ${inner}
+      </button>`;
+}

package/components/button/sandbox.js

@@ -0,0 +1,130 @@
+/* eslint-disable lit/prefer-static-styles */
+import { html } from "lit";
+
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import icon from "../icon/thumbs-up.svg?lit";
+import { SandboxComponent } from "../sandbox/class.js";
+
+import { Button } from "./server.js";
+
+export class ButtonSandbox extends SandboxComponent {
+  render() {
+    const hrefs = [undefined, "http://example.com"];
+    const variants = [undefined, "primary", "secondary", "plain"];
+    const actions = [undefined, "positive", "negative"];
+    const icons = [
+      { icon: undefined, iconOnly: undefined },
+      { icon, iconOnly: false },
+      { icon, iconOnly: true },
+    ];
+
+    return html`
+      <style>
+        #Button {
+          section {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+          }
+
+          .manual-size > * {
+            width: 300px;
+            height: 50px;
+          }
+        }
+      </style>
+      <h2>Custom element</h2>
+      <div class="manual-size">
+        <mdn-button> manually set width/height </mdn-button>
+      </div>
+      <p>Button in <mdn-button>the middle</mdn-button> of text.</p>
+      <p>
+        Button in <mdn-button .icon=${icon}>the middle</mdn-button> of text with
+        icon.
+      </p>
+      ${hrefs.map(
+        (href) => html`
+          <h3><code>${href ? "<a>" : "<button>"}</code></h3>
+          <section>
+            ${variants.map((variant) =>
+              actions.map((action) =>
+                icons.map(
+                  ({ icon, iconOnly }) => html`
+                    <mdn-button
+                      href=${ifDefined(href)}
+                      variant=${ifDefined(variant)}
+                      action=${ifDefined(action)}
+                      .icon=${icon}
+                      ?icon-only=${iconOnly}
+                    >
+                      ${variant || "no variant"} ${action} ${icon ? "icon" : ""}
+                    </mdn-button>
+                  `,
+                ),
+              ),
+            )}
+          </section>
+        `,
+      )}
+      <h2>Server component</h2>
+      <div class="manual-size">
+        ${Button.render(
+          // @ts-expect-error
+          {},
+          {
+            label: "manually set width/height",
+          },
+        )}
+      </div>
+      <p>
+        Button in
+        ${Button.render(
+          // @ts-expect-error
+          {},
+          {
+            label: "the middle",
+          },
+        )}
+        of text.
+      </p>
+      <p>
+        Button in
+        ${Button.render(
+          // @ts-expect-error
+          {},
+          {
+            label: "the middle",
+            icon,
+          },
+        )}
+        of text with icon.
+      </p>
+      ${hrefs.map(
+        (href) => html`
+          <h3><code>${href ? "<a>" : "<button>"}</code></h3>
+          <section>
+            ${variants.map((variant) =>
+              actions.map((action) =>
+                icons.map(({ icon, iconOnly }) =>
+                  Button.render(
+                    // @ts-expect-error
+                    {},
+                    {
+                      label: `${variant || "no variant"} ${action || ""} ${icon ? "icon" : ""}`,
+                      href,
+                      variant,
+                      action,
+                      icon,
+                      iconOnly,
+                    },
+                  ),
+                ),
+              ),
+            )}
+          </section>
+        `,
+      )}
+    `;
+  }
+}

package/components/button/server.css

@@ -0,0 +1,153 @@
+/* Button */
+
+.button {
+  display: inline-flex;
+
+  column-gap: 0.3125em;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0.5em;
+  margin: 0;
+
+  font-family: var(--font-family-text);
+  font-size: 0.875em;
+  font-weight: 450;
+
+  line-height: var(--font-line-ui);
+  vertical-align: middle;
+
+  color: var(--color-text-primary);
+
+  text-decoration: none;
+
+  cursor: pointer;
+
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+
+  /* Primary */
+
+  &[data-variant="primary"] {
+    color: light-dark(var(--color-white), var(--color-black));
+    background-color: light-dark(var(--color-black), var(--color-white));
+
+    &:hover {
+      background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
+    }
+
+    &[data-action="positive"] {
+      color: var(--color-white);
+      background-color: light-dark(
+        var(--color-green-50),
+        var(--color-green-20)
+      );
+
+      &:hover {
+        background-color: light-dark(
+          var(--color-green-20),
+          var(--color-green-50)
+        );
+      }
+    }
+
+    &[data-action="negative"] {
+      color: var(--color-white);
+      background-color: light-dark(var(--color-red-50), var(--color-red-20));
+
+      &:hover {
+        background-color: light-dark(var(--color-red-20), var(--color-red-50));
+      }
+    }
+  }
+
+  /* Secondary */
+
+  &[data-variant="secondary"] {
+    border-color: currentcolor;
+
+    &:hover {
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+    }
+
+    &[data-action="positive"] {
+      color: light-dark(var(--color-green-50), var(--color-green-80));
+
+      &:hover {
+        background-color: light-dark(
+          var(--color-green-90),
+          var(--color-green-10)
+        );
+      }
+    }
+
+    &[data-action="negative"] {
+      color: light-dark(var(--color-red-50), var(--color-red-80));
+
+      &:hover {
+        background-color: light-dark(var(--color-red-90), var(--color-red-10));
+      }
+    }
+  }
+
+  /* Plain */
+
+  &[data-variant="plain"] {
+    &:hover {
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+    }
+
+    &[data-action="positive"] {
+      color: light-dark(var(--color-green-50), var(--color-green-80));
+
+      &:hover {
+        background-color: light-dark(
+          var(--color-green-90),
+          var(--color-green-10)
+        );
+      }
+    }
+
+    &[data-action="negative"] {
+      color: light-dark(var(--color-red-50), var(--color-red-80));
+
+      &:hover {
+        background-color: light-dark(var(--color-red-90), var(--color-red-10));
+      }
+    }
+  }
+
+  /* Disabled */
+
+  &[disabled] {
+    color: light-dark(var(--color-gray-40), var(--color-gray-60)) !important;
+
+    cursor: default;
+
+    background-color: light-dark(
+      var(--color-gray-80),
+      var(--color-gray-20)
+    ) !important;
+    border-color: transparent;
+  }
+
+  /* Icon */
+
+  .icon {
+    /* fix whitespace messing with layout */
+    display: flex;
+  }
+
+  svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* Label */
+
+  .label {
+    padding-block: 0.125em;
+    padding-inline: 0.0625em;
+  }
+}

package/components/button/server.js

@@ -0,0 +1,13 @@
+import { ServerComponent } from "../server/index.js";
+
+import PureButton from "./pure.js";
+
+export class Button extends ServerComponent {
+  /**
+   * @param {import("@fred").Context} _context
+   * @param {Parameters<PureButton>[0]} args
+   */
+  render(_context, args) {
+    return PureButton(args);
+  }
+}

package/components/button/types.d.ts

@@ -0,0 +1,2 @@
+export type ButtonVariants = "primary" | "secondary" | "plain";
+export type ButtonActions = "positive" | "negative" | undefined;

package/components/code-example/common.css

@@ -0,0 +1,59 @@
+.code-example {
+  --border: 1px solid var(--color-border-primary);
+  overflow: hidden;
+  border: var(--border);
+  border-radius: 0.25rem;
+
+  .example-header {
+    box-sizing: border-box;
+    display: flex;
+
+    align-items: center;
+
+    min-height: 3.1rem;
+
+    padding: 0.5rem 1rem;
+
+    line-height: var(--font-line-ui);
+
+    border-bottom: var(--border);
+
+    .language-name {
+      text-transform: uppercase;
+    }
+  }
+
+  pre {
+    padding: 1rem;
+    margin: 0;
+
+    overflow: auto;
+
+    background-color: var(--color-background-secondary);
+
+    code {
+      padding: 0;
+      background-color: unset;
+    }
+
+    &.hidden,
+    &[class*="interactive-example"] {
+      display: none;
+    }
+  }
+
+  &:has(.hidden, [class*="interactive-example"]) {
+    /* TODO: we might want to fix this in rari */
+    display: none;
+  }
+
+  iframe,
+  mdn-play-runner {
+    box-sizing: content-box;
+    display: block;
+
+    padding: 1rem;
+
+    border: none;
+  }
+}

package/components/code-example/element.css

@@ -0,0 +1,13 @@
+@import url("prismjs/themes/prism.css");
+@import url("./common.css");
+
+.code-example {
+  .example-header {
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+
+    .language-name {
+      margin-right: auto;
+    }
+  }
+}