@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/content/__tests__/content.test.ts

@@ -0,0 +1,95 @@
+import { nextTick } from 'shared/testutils';
+
+import Content from '../content';
+
+import { track } from 'tds/instrumentation';
+
+customElements.define('tm-content', Content.CustomElementConstructor);
+
+jest.mock('tds/instrumentation', () => {
+    return {
+        track: jest.fn()
+    };
+});
+
+describe('tm-content', () => {
+    beforeEach(() => {
+        (track as jest.Mock).mockClear();
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    // Skip these tests as LWC in test mode doesn't support child nodes for light DOM components
+    // The content component copies innerHTML from light DOM children, which isn't compatible with jest-lwc
+    it.skip('copies initial and modified innerHTML', async () => {
+        document.body.innerHTML = `
+            <tm-content>
+                <h1>Hello</h1>
+            </tm-content>
+        `;
+        await nextTick();
+        const element = document.body.querySelector('tm-content')!;
+        expect(
+            element
+                .shadowRoot!.querySelector('main')!
+                .innerHTML.replace(/>[\s]+?</g, '><')
+                .trim()
+        ).toEqual('<h1>Hello</h1>');
+    });
+
+    it.skip('wraps <table> elements', async () => {
+        document.body.innerHTML = `
+            <tm-content>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td>Cell</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </tm-content>
+        `;
+        await nextTick();
+        const element = document.body.querySelector('tm-content')!;
+        expect(
+            element
+                .shadowRoot!.querySelector('main')!
+                .innerHTML.replace(/>[\s]+?</g, '><')
+                .trim()
+        ).toEqual(
+            `<div class="table"><table><tbody><tr><td>Cell</td></tr></tbody></table></div>`
+        );
+    });
+
+    it.skip('tracks download links', async () => {
+        document.body.innerHTML = `
+            <tm-content>
+                <div>
+                    <p>
+                        some other text
+                        <a href="/path/filename.pdf" download>Download</a>
+                    </p>
+                </div>
+            </tm-content>
+        `;
+        await nextTick();
+        const element = document.body.querySelector('tm-content')!;
+        const anchor = element.shadowRoot!.querySelector('a')!;
+        anchor.click();
+        expect(track).toBeCalledTimes(1);
+        expect(track).toBeCalledWith(element, 'file_download', {
+            file_name: 'filename',
+            file_extension: 'pdf'
+        });
+    });
+
+    it('renders the component', async () => {
+        document.body.innerHTML = '<tm-content></tm-content>';
+        await nextTick();
+        const element = document.body.querySelector('tm-content')!;
+        expect(element).toBeTruthy();
+        expect(element.shadowRoot).toBeTruthy();
+    });
+});

package/src/modules/tm/content/content.css

@@ -0,0 +1,641 @@
+@import 'tds/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: '';
+    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(--tds-spacing-32) + var(--tds-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(--tds-font-size-sm);
+    align-self: flex-start;
+    background-color: var(--tds-color-white);
+    border-radius: var(--tds-radius-lg);
+    box-shadow: var(--tds-shadow-sm);
+    position: sticky;
+    padding: var(--tds-spacing-5);
+    top: calc(var(--dx-g-global-header-height) + 3px); /* The 3px is to account for the shadow */
+    line-height: var(--tds-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(--tds-color-meteorite);
+}
+
+aside a:hover {
+    display: block;
+    color: var(--tds-color-brand);
+}
+
+main h2 {
+    font-size: var(--tds-font-size-2xl);
+    margin-bottom: var(--tds-spacing-4);
+    margin-top: var(--tds-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(--tds-font-size-xl);
+    font-weight: bold;
+    margin-bottom: var(--tds-spacing-4);
+    margin-top: var(--tds-spacing-10);
+}
+
+main p {
+    color: var(--tds-color-black);
+    margin-top: 0;
+    margin-bottom: var(--tds-spacing-4);
+    line-height: var(--tds-line-height-normal);
+}
+
+main p,
+main li,
+main dl {
+    font-size: 1.0625rem; /* 17px Special */
+}
+
+main i {
+    margin-right: var(--tds-spacing-2);
+}
+
+main a,
+main a:visited {
+    color: var(--tds-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(--tds-color-sand);
+    border-radius: var(--tds-radius-lg);
+    margin-bottom: var(--tds-spacing-4);
+    overflow-x: auto;
+    padding: var(--tds-spacing-4);
+}
+
+main pre code,
+main pre samp,
+main pre kbd,
+main pre var {
+    font-size: var(--tds-font-size-md);
+    color: var(--tds-color-meteorite);
+    background-color: transparent;
+    box-shadow: none;
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
+}
+
+main code {
+    font-size: var(--tds-font-size-md);
+    padding: var(--tds-spacing-1);
+    color: #0061b6;
+    background-color: #d9ecfe;
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
+    border-radius: var(--tds-radius-md);
+}
+
+main samp {
+    font-size: var(--tds-font-size-md);
+    padding: var(--tds-spacing-1);
+    background-color: #ffffff;
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
+    border-radius: var(--tds-radius-md);
+    box-shadow: var(--tds-shadow-sm);
+}
+
+main var {
+    font-size: var(--tds-font-size-md);
+    padding: var(--tds-spacing-1);
+    color: #5a0675;
+    background-color: #ebe9f9;
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
+    border-radius: var(--tds-radius-md);
+}
+
+main kbd {
+    font-size: var(--tds-font-size-md);
+    padding: var(--tds-spacing-1);
+    color: var(--tds-color-black);
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
+    border-radius: var(--tds-radius-md);
+    background-color: var(--tds-color-sand);
+    border: 1px solid var(--tds-color-fog);
+}
+
+main mark {
+    background-color: #ffff00;
+    font-weight: bold;
+    padding: var(--tds-spacing-1);
+    border-radius: var(--tds-radius-md);
+}
+
+main ins {
+    font-weight: bold;
+    padding: var(--tds-spacing-1);
+    color: #067568;
+    background-color: #e9f9f3;
+    border-radius: var(--tds-radius-md);
+    text-decoration: none;
+}
+
+main abbr,
+main acronym {
+    text-decoration: none;
+    font-variant: none;
+    border-bottom: dotted 2px var(--tds-color-ocean);
+}
+
+main abbr:hover,
+main acronym:hover {
+    border-bottom: solid 2px var(--tds-color-ocean);
+}
+
+main u {
+    text-decoration: var(--tds-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(--tds-radius-md);
+    padding: var(--tds-spacing-1);
+    color: var(--tds-color-white);
+}
+
+sup {
+    vertical-align: super;
+    line-height: var(--tds-line-height-none);
+    font-size: var(--tds-font-size-xs);
+}
+
+sub {
+    vertical-align: sub;
+    line-height: var(--tds-line-height-none);
+    font-size: var(--tds-font-size-xs);
+}
+
+main small {
+    font-size: var(--tds-font-size-xs);
+    font-style: italic;
+    color: var(--tds-color-meteorite);
+}
+
+main blockquote,
+main q {
+    font-style: italic;
+    font-size: var(--tds-font-size-xl);
+    margin-top: var(--tds-spacing-6);
+    line-height: var(--tds-line-height-normal);
+    margin-bottom: var(--tds-spacing-6);
+}
+
+main blockquote {
+    border-left: 4px solid var(--tds-color-architect-light);
+    padding-left: var(--tds-spacing-8);
+}
+
+main q {
+    position: relative;
+    display: block;
+    padding-left: var(--tds-spacing-10);
+}
+
+main q:before {
+    content: '“';
+    color: var(--tds-color-architect-light);
+    font-size: 5rem;
+    display: block;
+    position: absolute;
+    left: -8px;
+    line-height: var(--tds-line-height-none);
+    top: 30px;
+}
+
+cite {
+    display: block;
+    font-size: var(--tds-font-size-md);
+    margin-top: var(--tds-spacing-2);
+    color: var(--tds-color-meteorite);
+}
+
+main ul,
+main ol,
+main dl {
+    line-height: var(--tds-line-height-normal);
+    margin-top: var(--tds-spacing-0);
+    margin-bottom: var(--tds-spacing-4);
+    margin-left: var(--tds-spacing-10);
+}
+
+main ul li {
+    list-style-type: disc;
+    margin-top: var(--tds-spacing-6);
+    margin-top: var(--tds-spacing-0);
+}
+
+main ul ul li {
+    list-style-type: circle;
+}
+
+main ul ul ul li {
+    list-style-type: square;
+}
+
+main ul ul ul li {
+    list-style-type: square;
+}
+
+main ol li {
+    list-style-type: decimal;
+    margin-top: var(--tds-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(--tds-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(--tds-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(--tds-spacing-2);
+    font-size: 0.5rem;
+}
+
+main dl {
+    border-left: 4px solid var(--tds-color-sand);
+    margin-left: 0;
+    padding-left: var(--tds-spacing-8);
+}
+
+main dt {
+    font-weight: bold;
+    margin-top: var(--tds-spacing-4);
+    font-style: italic;
+}
+
+main .table {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+main table {
+    background-color: var(--tds-color-white);
+    border: 1px solid var(--tds-color-fog);
+    margin-top: var(--tds-spacing-4);
+    margin-bottom: var(--tds-spacing-4);
+    max-width: 100%;
+}
+
+main th {
+    border: 1px solid var(--tds-color-fog);
+    font-weight: bold;
+    padding: var(--tds-spacing-3) var(--tds-spacing-4);
+    background-color: var(--tds-color-sand);
+}
+
+main td {
+    border: 1px solid var(--tds-color-fog);
+    padding: var(--tds-spacing-3) var(--tds-spacing-4);
+}
+
+main caption {
+    font-size: var(--tds-font-size-xs);
+    font-style: italic;
+    color: var(--tds-color-meteorite);
+    margin-bottom: var(--tds-spacing-4);
+    text-align: left;
+}
+
+main img {
+    max-width: 100%;
+    height: auto;
+    margin-top: var(--tds-spacing-4);
+    margin-bottom: var(--tds-spacing-4);
+    display: block;
+}
+
+main figure img {
+    margin-bottom: var(--tds-spacing-4);
+}
+
+main figcaption {
+    font-size: var(--tds-font-size-xs);
+    font-style: italic;
+    color: var(--tds-color-meteorite);
+    margin-bottom: var(--tds-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: #000000;
+}
+
+.read {
+    font-size: var(--tds-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(--tds-color-architect-light);
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    box-shadow: var(--tds-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(--tds-color-brand);
+    fill: var(--tds-color-brand);
+}
+
+.assessment-input {
+    margin:10px 10px 20px 10px;
+}
+
+.check-col {
+    text-align: center;
+    vertical-align: middle;
+  }
+  .template-boxes {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between; /* Ensure even spacing between buttons */
+    align-items: center;
+    flex-wrap: wrap; /* Allow buttons to wrap if there isn't enough space */
+}
+
+/* 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: #ffffff;
+    border-radius: 6px;
+    border-width: 0;
+    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .1) 0 2px 5px 0, rgba(0, 0, 0, .07) 0 1px 1px 0;
+    box-sizing: border-box;
+    color: #024D4C;
+    outline: none;
+    padding: .5em 1em; /* Adjusted padding for consistency */
+    position: relative;
+    text-align: center;
+    text-transform: none;
+    transition: all .2s, box-shadow .08s ease-in;
+    user-select: none;
+    -webkit-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: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 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(--tds-font-size-md);
+    padding: var(--tds-spacing-1);
+    background-color:  rgb(243, 243, 243);
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
+    border-radius: var(--tds-radius-xs);
+}