@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha10

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

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

@@ -1,641 +0,0 @@
-@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);
-}