@salesforcedevs/docs-components 0.0.1

package/src/modules/doc/content/content.css

@@ -0,0 +1,399 @@
+/* stylelint-disable selector-class-pattern */
+
+/* This css file contains rules for the content html and it's specific selectors,
+ * pattern validation cannot be applied
+ */
+
+@import "dxHelpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/card";
+@import "dxHelpers/table";
+
+.doc-content {
+    width: 100%;
+}
+
+.container {
+    font-family: var(--dx-g-font-sans);
+}
+
+.doc-content-callout {
+    padding-top: var(--dx-g-spacing-sm);
+}
+
+.sectiontitle {
+    margin-top: 36px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.codeSection {
+    margin-top: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.helpHead2 {
+    margin-top: 36px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.relinfo {
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+.pagination {
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+img.content-image {
+    height: auto;
+    display: unset;
+}
+
+.image-block .content-image {
+    margin-top: var(--dx-g-spacing-lg);
+    margin-bottom: var(--dx-g-spacing-sm);
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+td > img.content-image:first-child:last-child[alt="Yes"],
+td > img.content-image:first-child:last-child[alt="No"] {
+    width: var(--dx-g-spacing-md);
+}
+
+h1 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-4xl);
+
+    /* not registered */
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: -0.4px;
+    line-height: 56px;
+}
+
+h2 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-3xl);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: -0.1px;
+    line-height: var(--dx-g-spacing-3xl);
+}
+
+h3 {
+    font-family: var(--dx-g-font-display);
+    font-size: 32px;
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: -0.1px;
+    line-height: var(--dx-g-spacing-2xl);
+}
+
+h4 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-xl);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-xl);
+}
+
+h5 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: 28px;
+}
+
+h6 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-mlg);
+}
+
+.dx-text-heading-alt-1 {
+    color: var(--dx-g-gray-30);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--slds-text-lg);
+    line-height: 25px;
+}
+
+p,
+.p {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-gray-10);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-lg);
+    margin-top: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dd > p,
+dd > .p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.li {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-gray-10);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-lg);
+}
+
+.dx-text-body-3 {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-gray-10);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-mlg);
+}
+
+a,
+.link a {
+    font-family: var(--dx-g-font-sans);
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e2e8f0;
+    font-size: var(--dx-g-text-md);
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.helpHead1 {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.shortdesc {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-gray-10);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-lg);
+    margin-bottom: var(--dx-g-spacing-md);
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.ullinks {
+    list-style-type: disc;
+}
+
+.related-links .ullinks {
+    margin-left: var(--dx-g-spacing-lg);
+    margin-right: var(--dx-g-spacing-lg);
+}
+
+.olchildlinks {
+    list-style-type: disc;
+}
+
+.related-links .olchildlinks {
+    margin-left: var(--dx-g-spacing-lg);
+    margin-right: var(--dx-g-spacing-lg);
+}
+
+.codeph,
+.filepath {
+    font-family: var(--dx-g-font-mono);
+    font-size: var(--dx-g-text-sm);
+    line-height: var(--dx-g-text-lg);
+    letter-spacing: 0;
+    color: #181818;
+    background-color: var(--dx-g-gray-95);
+    border-radius: 4px;
+    padding: var(--dx-g-spacing-2xs);
+}
+
+a .codeph {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.ulchildlink {
+    font-family: var(--dx-g-font-sans);
+}
+
+.olchildlink {
+    font-family: var(--dx-g-font-sans);
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+.editionTable {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-gray-10);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-lg);
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+.editionTable a {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e2e8f0;
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.detaillist {
+    font-family: var(--dx-g-font-sans);
+}
+
+dt {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-mlg);
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+dd {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-gray-10);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-lg);
+    margin-left: var(--dx-g-spacing-smd);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+li {
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-lg);
+}
+
+li > li {
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+.pagination > li {
+    display: inline-block;
+}
+
+a:hover,
+.link a:hover {
+    text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+    /* Mobile */
+    img.content-image {
+        max-width: 95vw;
+    }
+}
+
+@media (min-width: 641px) {
+    /* Tablet (medium) */
+    img.content-image {
+        max-width: 80vw;
+    }
+}
+
+@media (min-width: 769px) {
+    /* Desktop */
+    img.content-image {
+        max-width: min(60vw, 650px);
+    }
+}
+
+ul,
+ol {
+    margin-left: var(--dx-g-spacing-lg);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+ul {
+    list-style-type: disc;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+doc-content-callout ul,
+doc-content-callout ol {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+ol ol {
+    list-style-type: lower-alpha;
+}
+
+ol ol,
+ol ul,
+ul ol {
+    margin-bottom: 0;
+    margin-left: var(--dx-g-spacing-md);
+}
+
+ol ol ol {
+    list-style-type: lower-roman;
+}
+
+ol ol ol ol {
+    list-style-type: decimal;
+}
+
+ol ol ol ol ol {
+    list-style-type: lower-alpha;
+}
+
+ol ol ol ol ol ol {
+    list-style-type: lower-roman;
+}
+
+ul ul {
+    list-style-type: circle;
+    margin-bottom: 0;
+    margin-left: var(--dx-g-spacing-md);
+}
+
+ul ul ul {
+    list-style-type: square;
+}
+
+ul ul ul ul {
+    list-style-type: disc;
+}
+
+ul ul ul ul ul {
+    list-style-type: circle;
+}
+
+ul ul ul ul ul ul {
+    list-style-type: square;
+}
+
+.box {
+    margin: var(--dx-g-spacing-lg) 0;
+}
+
+figure {
+    margin: var(--dx-g-spacing-lg) 0;
+}
+
+figcaption {
+    font-size: var(--dx-g-text-xs);
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+code,
+kbd,
+pre,
+samp,
+.parmname {
+    font-family: Menlo, monospace;
+    font-size: 1em;
+}
+
+mark {
+    background-color: var(--dx-g-yellow-vibrant-90);
+}

package/src/modules/doc/content/content.html

@@ -0,0 +1,6 @@
+<template>
+    <template if:true={docsData}>
+        <div class="container" data-name="content" lwc:dom="manual"></div>
+    </template>
+    <template if:false={docsData}>No content provided</template>
+</template>