@mdn/fred 0.1.0 → 0.2.0

package/components/observatory-landing/server.css

@@ -1 +1,208 @@
-@import url("../observatory/index.css");
+@import url("../observatory/colors.css");
+@import url("../observatory/common.css");
+
+/* upper part */
+.observatory-top {
+  display: grid;
+
+  grid-template-areas: "form illustration";
+  grid-template-columns: 2fr 1fr;
+
+  gap: 0 6.25rem;
+
+  padding-inline: var(--layout-side-padding);
+  margin-top: 1rem;
+
+  /* switch to top-down order */
+  @media (--screen-small-and-narrower) {
+    grid-template-areas: "form" "illustration";
+    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+
+    gap: 0;
+  }
+}
+
+.observatory-top__form {
+  display: flex;
+
+  flex-direction: column;
+
+  grid-area: form;
+
+  row-gap: 2rem;
+}
+
+.observatory-top-form__title {
+  padding: 0;
+  margin: 0;
+
+  font-size: var(--font-size-largest);
+  font-weight: var(--font-weight-bold);
+
+  line-height: var(--font-line-normal);
+
+  color: var(--observatory-accent);
+}
+
+.observatory-top-form__description {
+  margin: 0;
+}
+
+.observatory-top__illustration {
+  grid-area: illustration;
+  justify-self: end;
+
+  svg {
+    width: 100%;
+    max-width: 340px;
+    height: auto;
+  }
+
+  /* smaller size, center */
+  @media (--screen-small-and-narrower) {
+    justify-self: center;
+
+    svg {
+      width: 100%;
+      max-width: 200px;
+      height: auto;
+    }
+  }
+}
+
+.observatory-top-form__form {
+  margin-bottom: 2rem;
+}
+
+/* lower parts */
+.observatory-about-wrapper {
+  display: grid;
+
+  grid-template-columns:
+    minmax(0, 0)
+    [full-start content-start]
+    minmax(0, 71rem)
+    [content-end]
+    var(--layout-sidebar-gap)
+    [sidebar-start right-sidebar-start]
+    minmax(var(--layout-sidebar-min), 1fr)
+    [full-end sidebar-end right-sidebar-end];
+
+  padding-inline: var(--layout-side-padding);
+  padding-top: 1rem;
+
+  background-color: var(--color-background-secondary);
+
+  @media (--screen-layout-no-sidebar) {
+    display: block;
+  }
+}
+
+.observatory-about {
+  grid-area: content;
+}
+
+.observatory-sidebar {
+  grid-area: sidebar;
+  justify-content: end;
+}
+
+.observatory-about__title {
+  padding: 0;
+  margin: 0;
+
+  font-size: var(--font-size-larger);
+  font-weight: var(--font-weight-bold);
+
+  color: var(--color-text-secondary);
+}
+
+/* stairs */
+.observatory-about__content {
+  svg defs#defs3 #gradient {
+    stop#stop1 {
+      stop-color: var(--observatory-accent);
+    }
+
+    stop#stop2 {
+      stop-color: color-mix(
+        in srgb,
+        var(--observatory-accent),
+        var(--color-background-secondary)
+      );
+    }
+
+    stop#stop3 {
+      stop-color: var(--color-background-secondary);
+    }
+  }
+
+  .assessment {
+    margin-left: 0;
+  }
+
+  .scanning {
+    margin-left: 3.125rem;
+  }
+
+  .security {
+    margin-left: 6.25rem;
+  }
+
+  .mdn {
+    margin-left: 9.75rem;
+  }
+
+  figure {
+    display: grid;
+
+    grid-template-columns: 2rem 1fr;
+
+    gap: 1.5rem;
+    align-items: start;
+
+    figcaption {
+      p {
+        margin: 0;
+        color: var(--color-text-primary);
+      }
+    }
+
+    &.assessment {
+      margin-left: 0;
+    }
+
+    &.assessment,
+    &.scanning,
+    &.security,
+    &.mdn {
+      svg path {
+        fill: var(--observatory-accent);
+      }
+    }
+  }
+
+  /* switch to top-down order */
+  @media (--screen-layout-no-sidebar) {
+    .lines {
+      display: none;
+    }
+
+    figure.assessment {
+      margin: 2rem 0 0;
+    }
+
+    figure.scanning,
+    figure.security,
+    figure.mdn {
+      margin: 1.75rem 0 0;
+    }
+  }
+}
+
+.observatory-about__links {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}

package/components/observatory-landing/server.js

@@ -1,5 +1,8 @@
 import { html, svg } from "lit";
 
+import { Button } from "../button/server.js";
+import feedbackIcon from "../icon/circle-alert.svg?lit";
+import faqIcon from "../icon/circle-help.svg?lit";
 import assessmentSvg from "../observatory/assets/assessment.svg?lit";
 import landingSvg from "../observatory/assets/landing-illustration.svg?lit";
 import mdnSvg from "../observatory/assets/mdn.svg?lit";
@@ -10,9 +13,6 @@ import { PageLayout } from "../page-layout/server.js";
 
 import { ServerComponent } from "../server/index.js";
 
-import { FAQ } from "./faq.js";
-import { Feedback } from "./feedback.js";
-
 export class ObservatoryLanding extends ServerComponent {
   /**
    * @param {import("@fred").Context<import("@rari").SPAPage>} context
@@ -22,72 +22,82 @@ export class ObservatoryLanding extends ServerComponent {
     return PageLayout.render(
       context,
       html`
-    <div class="obs-layout obs-layout--landing">
-      <div class="obs-layout__content obs-layout__content--landing">
-        <section class="obs-landing-top">
-          <section class="obs-landing-top__form">
-            <h1>
-              <span class="accent">${context.l10n("obs-title")}</span>
-            </h1>
-            <p>
-              ${context.l10n("obs-landing-intro")}
-            </p>
-            <mdn-observatory-form></mdn-observatory-form>
-          </section>
-          <section class="obs-landing-top__illustration">
-            ${landingSvg}
-          </section>
-        </section>
-        <section class="obs-landing-about">
-          <section class="obs-landing-about__content">
-            <h2>${context.l10n("obs-about-title")`About the HTTP Observatory`}</h2>
-            <div class="about-copy">
-              <figure class="assessment">
-                ${assessmentSvg}
-                <figcaption>
-                  <p>
-                    ${context.l10n("obs-assessment")}
-                  </p>
-                </figcaption>
-              </figure>
-              ${LinesSVG({ className: "lines assessment" })}
-              <figure class="scanning">
-                ${scanningSvg}
-                <figcaption>
-                  <p>
-                    ${context.l10n("obs-scanning")}
-                  </p>
-                </figcaption>
-              </figure>
-              ${LinesSVG({ className: "lines scanning" })}
-              <figure class="security">
-                ${securitySvg}
-                <figcaption>
-                  <p>
-                    ${context.l10n("obs-security")}
-                  </p>
-                </figcaption>
-              </figure>
-              ${LinesSVG({ className: "lines security" })}
-              <figure class="mdn">
-                ${mdnSvg}
-                <figcaption>
-                  <p>
-                    ${context.l10n("obs-mdn")}
-                  </p>
-                </figcaption>
-              </figure>
+        <main id="content" class="observatory">
+          <section class="observatory-top">
+            <div class="observatory-top__form">
+              <h1 class="observatory-top-form__title">
+                ${context.l10n("obs-title")}
+              </h1>
+              <p class="observatory-top-form__description">
+                ${context.l10n("obs-landing-intro")}
+              </p>
+              <mdn-observatory-form
+                class="observatory-top-form__form"
+              ></mdn-observatory-form>
             </div>
+            <section class="observatory-top__illustration">
+              ${landingSvg}
+            </section>
           </section>
-          <section class="obs-landing-about__links">
-            ${FAQ(context)}
-            ${Feedback(context)}
+          <section class="observatory-about-wrapper">
+            <div class="observatory-about">
+              <h2 class="observatory-about__title">
+                ${context.l10n("obs-about-title")`About the HTTP Observatory`}
+              </h2>
+              <div class="observatory-about__content">
+                <figure class="assessment">
+                  ${assessmentSvg}
+                  <figcaption>
+                    <p>${context.l10n("obs-assessment")}</p>
+                  </figcaption>
+                </figure>
+                ${LinesSVG({ className: "lines assessment" })}
+                <figure class="scanning">
+                  ${scanningSvg}
+                  <figcaption>
+                    <p>${context.l10n("obs-scanning")}</p>
+                  </figcaption>
+                </figure>
+                ${LinesSVG({ className: "lines scanning" })}
+                <figure class="security">
+                  ${securitySvg}
+                  <figcaption>
+                    <p>${context.l10n("obs-security")}</p>
+                  </figcaption>
+                </figure>
+                ${LinesSVG({ className: "lines security" })}
+                <figure class="mdn">
+                  ${mdnSvg}
+                  <figcaption>
+                    <p>${context.l10n("obs-mdn")}</p>
+                  </figcaption>
+                </figure>
+              </div>
+              <aside class="observatory-about__links">
+                ${Button.render(context, {
+                  label: context.l10n`Read our FAQ`,
+                  variant: "plain",
+                  icon: faqIcon,
+                  rel: "noopener",
+                  target: "_blank",
+                  href: "/en-US/observatory/docs/faq",
+                })}
+                ${Button.render(context, {
+                  label: context.l10n`Report Feedback`,
+                  variant: "plain",
+                  icon: feedbackIcon,
+                  rel: "noopener",
+                  target: "_blank",
+                  href: "https://survey.alchemer.com/s3/7897385/MDN-HTTP-Observatory",
+                })}
+              </aside>
+            </div>
+            <section class="observatory-sidebar">
+              <mdn-placement-sidebar></mdn-placement-sidebar>
+            </section>
           </section>
-        </section>
-        </section>
-      </div>
-    </div>
-  `,
+        </main>
+      `,
     );
   }
 }

package/components/observatory-rescan-button/element.css

@@ -0,0 +1 @@
+@import url("../global/global.css");

package/components/observatory-rescan-button/element.js

@@ -1,8 +1,12 @@
 import { LitElement, html } from "lit";
 
 import "../button/element.js";
+import { L10nMixin } from "../../l10n/mixin.js";
 
-export class MDNObservatoryRescanButton extends LitElement {
+import styles from "./element.css?lit";
+
+export class MDNObservatoryRescanButton extends L10nMixin(LitElement) {
+  static styles = styles;
   static properties = {
     from: { type: Object }, // Date object
     duration: { type: Number },
@@ -11,9 +15,13 @@ export class MDNObservatoryRescanButton extends LitElement {
 
   constructor() {
     super();
+    /** @type {Date} */
     this.from = new Date();
+    /** @type {number} */
     this.duration = 60;
+    /** @type {number} */
     this._remainingTime = 0;
+    /** @type {NodeJS.Timer | null} */
     this._interval = null;
   }
 
@@ -55,9 +63,9 @@ export class MDNObservatoryRescanButton extends LitElement {
     const progressPercent = (remainingSecs * 100) / 60;
 
     return isExpired
-      ? html`<mdn-button>Rescan</mdn-button>`
+      ? html`<mdn-button>${this.l10n`Rescan`}</mdn-button>`
       : html` <mdn-button disabled .icon=${this._icon(progressPercent)}
-          >Please wait to rescan</mdn-button
+          >${this.l10n`Wait a minute to rescan`}</mdn-button
         >`;
   }
 }

package/components/observatory-results/element.css

@@ -1,8 +1,9 @@
-/* TODO: decide if we import visually hidden where we need it, or if it's auto imported everywhere, like a reset */
-@import url("./../../components/visually-hidden/global.css");
+@import url("../global/global.css");
+@import url("../visually-hidden/global.css");
 
-/* TODO: remove this import, buttons should use the button component directly, not its styles */
-@import url("./../../components/button/server.css");
+:host {
+  line-height: var(--font-line-content);
+}
 
 .scan-result {
   display: grid;
@@ -10,16 +11,20 @@
   grid-template-areas: "grade data actions";
   grid-template-columns: auto 3fr 1fr;
 
-  column-gap: var(--spacing);
+  column-gap: 2rem;
   justify-content: space-between;
 
   max-width: var(--max-width);
 
-  padding: var(--spacing);
+  a {
+    color: var(--color-text-primary);
+  }
+
+  padding: 2rem;
   margin-bottom: 3rem;
 
   background-color: var(--color-background-primary);
-  border-radius: var(--border-radius);
+  border-radius: 0.3rem;
 
   @media (--screen-large-and-narrower) {
     grid-template-areas: "grade data actions";
@@ -33,15 +38,11 @@
   @media (--screen-medium-and-narrower) {
     grid-template-areas:
       "grade data   "
-      ".     actions";
+      "grade actions";
     grid-template-columns: min-content 1fr;
   }
 }
 
-:host {
-  line-height: var(--font-line-content);
-}
-
 .trend {
   margin-top: 1rem;
 }
@@ -58,8 +59,8 @@ h2 {
   margin-top: 1.5rem;
   margin-bottom: 1rem;
 
-  font-size: 1.375rem;
-  font-weight: 600;
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold);
 
   &::before {
     display: inline-block;
@@ -74,24 +75,24 @@ h2 {
   }
 
   .host {
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
   }
 }
 
 h2.summary::before {
   width: 2rem;
   height: 1.4rem;
-  mask-image: var(--summary-icon);
+  mask-image: url("../observatory/assets/summary-icon.svg");
 }
 
 h2.result::before {
   width: 2rem;
   height: 1.2rem;
-  mask-image: var(--results-icon);
+  mask-image: url("../observatory/assets/results-icon.svg");
 }
 
 code {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 }
 
 .grade-trend {
@@ -105,6 +106,10 @@ code {
 
 .actions {
   grid-area: actions;
+
+  @media (--screen-medium-and-narrower) {
+    margin-top: 1rem;
+  }
 }
 
 mdn-observatory-rescan-button {
@@ -125,21 +130,11 @@ mdn-observatory-rescan-button {
 .scan-another {
   margin-top: 1.2rem;
   font-size: var(--font-size-small);
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
 }
 
 .label {
-  font-weight: 600;
-}
-
-a {
-  color: var(--color-text-primary);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-    text-decoration-color: var(--color-text-secondary);
-  }
+  font-weight: var(--font-weight-bold);
 }
 
 .grade {
@@ -148,8 +143,8 @@ a {
   width: 5rem;
   height: 5rem;
 
-  font-size: 1.7rem;
-  font-weight: 600;
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold);
 
   line-height: 5rem;
 
@@ -238,10 +233,11 @@ a {
     border: 0;
 
     tr {
-      font-size: 0.875rem;
+      font-size: var(--font-size-small);
       color: var(--color-tooltip);
 
       &.current {
+        font-weight: var(--font-weight-bold);
         color: var(--color-tooltip-highlight);
       }
     }
@@ -260,7 +256,7 @@ a {
 
     th {
       padding: 0 0 0.75rem;
-      font-size: 1rem;
+      font-size: var(--font-size-normal);
     }
 
     td {
@@ -284,7 +280,7 @@ a {
 
 .footnote {
   margin-top: 1rem;
-  font-size: var(--type-smaller-font-size);
+  font-size: var(--font-size-small);
 }
 
 .detail-header {
@@ -298,7 +294,7 @@ a {
 
   .detail-header-title {
     padding-right: 0.2rem;
-    font-weight: 600;
+    font-weight: var(--font-weight-bold);
   }
 
   p {
@@ -330,7 +326,7 @@ a {
 
 .footnote {
   margin-top: 1rem;
-  font-size: var(--type-smaller-font-size);
+  font-size: var(--font-size-small);
 }
 
 .scan-results table {
@@ -507,7 +503,7 @@ a {
 
     td::before {
       display: inline;
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
       content: attr(data-header);
     }
 
@@ -668,12 +664,12 @@ ol.tabs-list {
 
       grid-area: mod;
 
+      width: calc(100vw - 14rem - 4rem);
+
       margin: 0;
 
-      @media (--screen-medium-and-narrower) {
-        width: calc(
-          100vw - 12rem - 3rem
-        ); /* 12rem: placement width; 3rem: padding */
+      @media (--screen-xlarge-and-wider) {
+        width: 100%;
       }
 
       @media (--screen-small-and-narrower) {