@salesforcedevs/arch-components 1.27.21 → 1.27.22

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

@@ -1,643 +0,0 @@
-@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

@@ -1,65 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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>
-`;