@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

package/src/modules/arch/content/content.css

@@ -0,0 +1,643 @@
+@import "arch/reset";
+
+* {
+    border: 0;
+    vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+    content: none;
+}
+
+main table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: block;
+}
+
+main tbody {
+    overflow-y: auto;
+}
+
+.root {
+    display: grid;
+    padding-left: 1rem;
+}
+
+@media screen and (min-width: 800px) {
+    .root {
+        grid-template-columns: 1fr minmax(300px, 0.25fr);
+        grid-gap: calc(var(--arch-spacing-32) + var(--arch-spacing-6));
+        justify-content: space-between;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    aside {
+        display: none;
+    }
+
+    .root {
+        padding-right: 0.5rem;
+    }
+}
+
+main {
+    max-width: 800px;
+    overflow: hidden;
+}
+
+aside {
+    font-size: var(--arch-font-size-sm);
+    align-self: flex-start;
+    background-color: var(--arch-color-white);
+    border-radius: var(--arch-radius-lg);
+    box-shadow: var(--arch-shadow-sm);
+    position: sticky;
+    padding: var(--arch-spacing-5);
+    top: calc(
+        var(--dx-g-global-header-height) + 3px
+    ); /* The 3px is to account for the shadow */
+
+    line-height: var(--arch-line-height-normal);
+    max-height: calc(94vh - var(--dx-g-global-header-height) - 3px);
+    overflow: auto;
+}
+
+aside a {
+    display: block;
+    text-decoration: none;
+    color: var(--arch-color-meteorite);
+}
+
+aside a:hover {
+    display: block;
+    color: var(--arch-color-brand);
+}
+
+main h2 {
+    font-size: var(--arch-font-size-2xl);
+    margin-bottom: var(--arch-spacing-4);
+    margin-top: var(--arch-spacing-12);
+    font-weight: bold;
+    text-transform: capitalize;
+}
+
+main h2:first-child {
+    margin-top: 0;
+}
+
+main h2 .default-text-transform {
+    text-transform: initial;
+}
+
+main h3,
+main h4,
+main h5,
+main h6 {
+    font-size: var(--arch-font-size-xl);
+    font-weight: bold;
+    margin-bottom: var(--arch-spacing-4);
+    margin-top: var(--arch-spacing-10);
+}
+
+main p {
+    color: var(--arch-color-black);
+    margin-top: 0;
+    margin-bottom: var(--arch-spacing-4);
+    line-height: var(--arch-line-height-normal);
+}
+
+main p,
+main li,
+main dl {
+    font-size: 1.0625rem; /* 17px Special */
+}
+
+main i {
+    margin-right: var(--arch-spacing-2);
+}
+
+main a,
+main a:visited {
+    color: var(--arch-color-brand);
+    text-decoration: none;
+}
+
+main a:hover {
+    text-decoration: underline;
+}
+
+main strong,
+b {
+    font-weight: bold;
+}
+
+main em,
+i {
+    font-style: italic;
+}
+
+dfn {
+    font-weight: bold;
+    font-style: italic;
+}
+
+main pre {
+    background-color: var(--arch-color-sand);
+    border-radius: var(--arch-radius-lg);
+    margin-bottom: var(--arch-spacing-4);
+    overflow-x: auto;
+    padding: var(--arch-spacing-4);
+}
+
+main pre code,
+main pre samp,
+main pre kbd,
+main pre var {
+    font-size: var(--arch-font-size-md);
+    color: var(--arch-color-meteorite);
+    background-color: transparent;
+    box-shadow: none;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+
+main code {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-1);
+    color: #0061b6;
+    background-color: #d9ecfe;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    border-radius: var(--arch-radius-md);
+}
+
+main samp {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-1);
+    background-color: #fff;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    border-radius: var(--arch-radius-md);
+    box-shadow: var(--arch-shadow-sm);
+}
+
+main var {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-1);
+    color: #5a0675;
+    background-color: #ebe9f9;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    border-radius: var(--arch-radius-md);
+}
+
+main kbd {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-1);
+    color: var(--arch-color-black);
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    border-radius: var(--arch-radius-md);
+    background-color: var(--arch-color-sand);
+    border: 1px solid var(--arch-color-fog);
+}
+
+main mark {
+    background-color: #ff0;
+    font-weight: bold;
+    padding: var(--arch-spacing-1);
+    border-radius: var(--arch-radius-md);
+}
+
+main ins {
+    font-weight: bold;
+    padding: var(--arch-spacing-1);
+    color: #067568;
+    background-color: #e9f9f3;
+    border-radius: var(--arch-radius-md);
+    text-decoration: none;
+}
+
+main abbr,
+main acronym {
+    text-decoration: none;
+    font-variant: none;
+    border-bottom: dotted 2px var(--arch-color-ocean);
+}
+
+main abbr:hover,
+main acronym:hover {
+    border-bottom: solid 2px var(--arch-color-ocean);
+}
+
+main u {
+    text-decoration: var(--arch-color-brand) wavy underline;
+}
+
+main tt {
+    background: linear-gradient(
+        90deg,
+        rgb(255 71 52) 0%,
+        rgb(182 53 255) 25%,
+        rgb(37 154 255) 50%,
+        rgb(0 216 216) 75%,
+        rgb(28 249 45) 100%
+    );
+    font-weight: bold;
+    border-radius: var(--arch-radius-md);
+    padding: var(--arch-spacing-1);
+    color: var(--arch-color-white);
+}
+
+sup {
+    vertical-align: super;
+    line-height: var(--arch-line-height-none);
+    font-size: var(--arch-font-size-xs);
+}
+
+sub {
+    vertical-align: sub;
+    line-height: var(--arch-line-height-none);
+    font-size: var(--arch-font-size-xs);
+}
+
+main small {
+    font-size: var(--arch-font-size-xs);
+    font-style: italic;
+    color: var(--arch-color-meteorite);
+}
+
+main blockquote,
+main q {
+    font-style: italic;
+    font-size: var(--arch-font-size-xl);
+    margin-top: var(--arch-spacing-6);
+    line-height: var(--arch-line-height-normal);
+    margin-bottom: var(--arch-spacing-6);
+}
+
+main blockquote {
+    border-left: 4px solid var(--arch-color-architect-light);
+    padding-left: var(--arch-spacing-8);
+}
+
+main q {
+    position: relative;
+    display: block;
+    padding-left: var(--arch-spacing-10);
+}
+
+main q::before {
+    content: "“";
+    color: var(--arch-color-architect-light);
+    font-size: 5rem;
+    display: block;
+    position: absolute;
+    left: -8px;
+    line-height: var(--arch-line-height-none);
+    top: 30px;
+}
+
+cite {
+    display: block;
+    font-size: var(--arch-font-size-md);
+    margin-top: var(--arch-spacing-2);
+    color: var(--arch-color-meteorite);
+}
+
+main ul,
+main ol,
+main dl {
+    line-height: var(--arch-line-height-normal);
+    margin-top: var(--arch-spacing-0);
+    margin-bottom: var(--arch-spacing-4);
+    margin-left: var(--arch-spacing-10);
+}
+
+main ul li {
+    list-style-type: disc;
+    margin-top: var(--arch-spacing-0);
+}
+
+main ul ul li {
+    list-style-type: circle;
+}
+
+main ul ul ul li {
+    list-style-type: square;
+}
+
+main ol li {
+    list-style-type: decimal;
+    margin-top: var(--arch-spacing-1);
+}
+
+main ol ol li {
+    list-style-type: lower-latin;
+}
+
+main ol ol ol li {
+    list-style-type: lower-roman;
+}
+
+main ol ol ol ol li {
+    list-style-type: decimal;
+}
+
+main ol ol ol ol ol li {
+    list-style-type: lower-latin;
+}
+
+main ol ul li {
+    list-style-type: disc;
+}
+
+main ol ul ol li {
+    list-style-type: lower-latin;
+}
+
+main ol ul ol ul li {
+    list-style-type: square;
+}
+
+main ul ul ul ul li {
+    list-style-type: none;
+    margin-left: -1rem;
+}
+
+main ul ul ul ul li::before {
+    content: "▫";
+    padding-right: var(--arch-spacing-2);
+}
+
+main ul ul ul ul ul li {
+    list-style-type: none;
+    margin-left: -1rem;
+}
+
+main ul ul ul ul ul li::before {
+    content: "▶";
+    padding-right: var(--arch-spacing-2);
+    font-size: 0.5rem;
+}
+
+main ol ul ol ul ol li {
+    list-style-type: none;
+    margin-left: -1rem;
+}
+
+main ol ul ol ul ol li::before {
+    content: "▶";
+    padding-right: var(--arch-spacing-2);
+    font-size: 0.5rem;
+}
+
+main dl {
+    border-left: 4px solid var(--arch-color-sand);
+    margin-left: 0;
+    padding-left: var(--arch-spacing-8);
+}
+
+main dt {
+    font-weight: bold;
+    margin-top: var(--arch-spacing-4);
+    font-style: italic;
+}
+
+main .table {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+main table:not(:first-of-type) {
+    background-color: var(--arch-color-white);
+    border: 1px solid var(--arch-color-fog);
+    margin-top: var(--arch-spacing-4);
+    margin-bottom: var(--arch-spacing-4);
+    max-width: 100%;
+}
+
+main th {
+    border: 1px solid var(--arch-color-fog);
+    font-weight: bold;
+    padding: var(--arch-spacing-3) var(--arch-spacing-4);
+    background-color: var(--arch-color-sand);
+}
+
+main td {
+    border: 1px solid var(--arch-color-fog);
+    padding: var(--arch-spacing-3) var(--arch-spacing-4);
+}
+
+main caption {
+    font-size: var(--arch-font-size-xs);
+    font-style: italic;
+    color: var(--arch-color-meteorite);
+    margin-bottom: var(--arch-spacing-4);
+    text-align: left;
+}
+
+main img {
+    max-width: 100%;
+    height: auto;
+    margin-top: var(--arch-spacing-4);
+    margin-bottom: var(--arch-spacing-4);
+    display: block;
+}
+
+main figure img {
+    margin-bottom: var(--arch-spacing-4);
+}
+
+main figcaption {
+    font-size: var(--arch-font-size-xs);
+    font-style: italic;
+    color: var(--arch-color-meteorite);
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.guide-table-ok {
+    background-color: #45c65a;
+}
+
+.guide-table-roadmap {
+    background-color: #eef4ff;
+}
+
+.guide-table-no {
+    background-color: #fcc003;
+}
+
+.guide-table-delivered {
+    background-color: #1b96ff;
+}
+
+.guide-table-red {
+    background-color: #ff9b99;
+}
+
+.guide-table a {
+    color: #000;
+}
+
+.read {
+    font-size: var(--arch-font-size-sm);
+    padding-left: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    color: #3e3e3c;
+}
+
+.read > svg {
+    margin-right: 4px;
+}
+
+.scroll {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    bottom: 20px;
+    right: 20px;
+    opacity: 0.8;
+    background-color: var(--arch-color-architect-light);
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    box-shadow: var(--arch-color-brand);
+    z-index: 9;
+}
+
+@media screen and (min-width: 800px) {
+    .scroll {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .scroll {
+        display: flex;
+    }
+}
+
+.scroll svg {
+    height: 2rem;
+    stroke: var(--arch-color-brand);
+    fill: var(--arch-color-brand);
+}
+
+.assessment-input {
+    margin: 10px 10px 20px;
+}
+
+.check-col {
+    text-align: center;
+    vertical-align: middle;
+}
+
+.template-boxes {
+    display: flex;
+    flex-flow: row wrap; /* Allow buttons to wrap if there isn't enough space */
+    justify-content: space-between; /* Ensure even spacing between buttons */
+    align-items: center;
+}
+
+/* Responsive layout - makes a one-column layout instead of a row layout */
+@media (max-width: 800px) {
+    .template-boxes {
+        flex-direction: column;
+        gap: 15px; /* Adds more space between items in a column layout */
+    }
+}
+
+.template-button {
+    appearance: button;
+    backface-visibility: hidden;
+    background-color: #fff;
+    border-radius: 6px;
+    border-width: 0;
+    box-shadow: rgb(50 50 93 / 10%) 0 0 0 1px inset,
+        rgb(50 50 93 / 10%) 0 2px 5px 0, rgb(0 0 0 / 7%) 0 1px 1px 0;
+    box-sizing: border-box;
+    color: #024d4c;
+    outline: none;
+    padding: 0.5em 1em; /* Adjusted padding for consistency */
+    position: relative;
+    text-align: center;
+    text-transform: none;
+    transition: all 0.2s, box-shadow 0.08s ease-in;
+    user-select: none;
+    touch-action: manipulation;
+    vertical-align: middle;
+    margin: 5px; /* Adds consistent margin around each button */
+    display: inline-flex; /* Flexbox layout for consistent alignment */
+    align-items: center; /* Aligns image and text vertically */
+    justify-content: center; /* Ensures the content is centered */
+}
+
+.template-button:disabled {
+    cursor: default;
+    opacity: 0.6; /* Give disabled buttons a visual cue */
+}
+
+.template-button:focus {
+    box-shadow: rgb(50 50 93 / 10%) 0 0 0 1px inset,
+        rgb(50 50 93 / 20%) 0 6px 15px 0, rgb(0 0 0 / 10%) 0 2px 2px 0,
+        rgb(50 151 211 / 30%) 0 0 0 4px;
+}
+
+.template-button img {
+    width: 20px; /* Fixed width for the image */
+    height: 20px; /* Fixed height for the image */
+    display: inline-block; /* Ensures the image stays inline with text */
+    margin-right: 5px; /* Space between image and text */
+    vertical-align: middle; /* Align image vertically with text */
+}
+
+.template-button svg {
+    width: 20px; /* Fixed width for SVG */
+    height: 20px; /* Fixed height for SVG */
+    display: inline-block; /* Keeps the SVG inline with text */
+    margin-right: 5px; /* Space between SVG and text */
+    vertical-align: middle; /* Align SVG vertically with text */
+}
+
+.center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+main inlinecode {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-1);
+    background-color: rgb(243 243 243);
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    border-radius: var(--arch-radius-xs);
+}

package/src/modules/arch/content/content.html

@@ -0,0 +1,65 @@
+<template>
+    <div class="read">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 52 52"
+        >
+            <g fill="#3e3e3c">
+                <path
+                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                ></path>
+            </g>
+        </svg>
+        {readingTime} minute read
+    </div>
+    <div class="read">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-calendar3"
+            viewBox="0 0 16 16"
+        >
+            <path
+                d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"
+            ></path>
+            <path
+                d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
+            ></path>
+        </svg>
+        Last updated {lastUpdated}
+    </div>
+    <div class={rootClassName}>
+        <main lwc:dom="manual" onclick={onContentClick}></main>
+        <aside if:true={showHeadingsNav}>
+            <template iterator:heading={headings}>
+                <a
+                    href={heading.value.href}
+                    key={heading.value.id}
+                    onclick={onHeadingClick}
+                    style={heading.value.style}
+                >
+                    {heading.value.label}
+                </a>
+            </template>
+        </aside>
+        <div class="scroll" if:true={showScroll} onclick={onScrollClick}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                x="0px"
+                y="0px"
+                viewBox="0 0 1000 1000"
+                enable-background="new 0 0 1000 1000"
+            >
+                <g>
+                    <path
+                        d="M990,699.9c0,8.1,0,16.3-8.1,24.4c-16.3,16.3-40.7,16.3-56.9,0L502,350.2L79.1,732.4c-16.3,16.3-40.7,16.3-56.9,0c-16.3-16.3-16.3-40.7,0-56.9l447.3-406.6c24.4-16.3,40.7-16.3,56.9-8.1l447.3,406.6C981.9,675.5,990,691.8,990,699.9z"
+                    ></path>
+                </g>
+            </svg>
+        </div>
+    </div>
+</template>

package/src/modules/arch/content/content.stories.js

@@ -0,0 +1,21 @@
+import { html } from "lit-html";
+
+import { ContentExamples } from "./__fixtures__";
+
+export default {
+    title: "arch/arch-content",
+    component: "sb-arch-content"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-content {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-content> ${ContentExamples()} </sb-arch-content>
+`;