@salesforcedevs/docs-components 0.0.4 → 0.0.5-edit

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

@@ -1,17 +1,393 @@
-@import "doc/prismcss";
+/* 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/table";
+@import "docHelpers/imgStyle";
 
 .doc-content {
     width: 100%;
 }
 
-.helpHead1 {
-    font-size: 1.5rem;
+.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);
+}
+
+.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);
+}
+
+.image-block .content-image {
+    margin-top: var(--dx-g-spacing-lg);
+    margin-bottom: var(--dx-g-spacing-sm);
+    display: block;
+}
+
+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,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+}
+
+h1 {
+    font-size: var(--dx-g-text-3xl);
+    letter-spacing: -0.8px;
+    line-height: var(--dx-g-spacing-3xl);
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
+}
+
+h2 {
+    font-size: var(--dx-g-text-2xl);
+    letter-spacing: -0.4px;
+    line-height: var(--dx-g-spacing-2xl);
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
+}
+
+h3 {
+    font-size: var(--dx-g-text-xl);
+    letter-spacing: -0.4px;
+    line-height: var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
+}
+
+h4 {
+    font-size: var(--dx-g-text-base);
+    letter-spacing: -0.5px;
+    line-height: var(--dx-g-spacing-lg);
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-sm) 0;
+}
+
+h5 {
+    font-size: var(--dx-g-text-sm);
+    letter-spacing: -0.3px;
+    line-height: var(--dx-g-spacing-mlg);
+    margin: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm) 0;
+}
+
+h6 {
+    font-size: var(--dx-g-text-xs);
+    letter-spacing: -0.3px;
+    line-height: var(--dx-g-spacing-md);
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm) 0;
+}
+
+img {
+    image-rendering: optimize-contrast;
+}
+
+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);
 }
 
 .shortdesc {
-    font-style: italic;
+    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);
 }
 
-p {
-    font-size: 15px;
+.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 table {
+    margin-bottom: 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;
+}
+
+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,
+.fig {
+    margin: var(--dx-g-spacing-lg) 0;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: left;
+}
+
+figcaption,
+.figcap {
+    display: block;
+    font-size: var(--dx-g-text-xs);
+    margin: var(--dx-g-spacing-sm) 0;
+    order: 2;
+}
+
+.figcap .image {
+    order: 1;
+}
+
+.fig.fig-centered {
+    text-align: center;
+}
+
+code,
+kbd,
+pre,
+samp,
+.parmname {
+    font-family: Menlo, monospace;
+    font-size: 1em;
+}
+
+mark {
+    background-color: var(--dx-g-yellow-vibrant-90);
+}
+
+/* offset page jump link due to fixed header */
+[id] {
+    --dx-c-content-scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
+    );
+
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
 }

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

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