@salesforcedevs/docs-components 0.0.6 → 0.0.7-edit

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

@@ -1,24 +1,34 @@
-@import "helpers/text";
-@import "helpers/reset";
-@import "helpers/section";
-@import "helpers/card";
+/* 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%;
 }
 
+.container {
+    font-family: var(--dx-g-font-sans);
+}
+
 .doc-content-callout {
     padding-top: var(--dx-g-spacing-sm);
 }
 
-.codeSection {
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--dx-g-spacing-sm);
+.sectiontitle {
+    margin-top: 36px;
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
-.helpHead2 {
-    padding-top: var(--dx-g-spacing-sm) x;
-    padding-bottom: var(--dx-g-spacing-sm);
+.codeSection {
+    margin-top: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 .relinfo {
@@ -31,63 +41,89 @@
     padding-bottom: var(--dx-g-spacing-sm);
 }
 
-h1 {
-    font-family: var(--dx-g-font-display);
-    font-size: 36px; /* not registered */
+.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);
-    letter-spacing: -0.4px;
-    line-height: 40px;
+    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-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xl);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.1px;
-    line-height: 28px;
+    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-family: var(--dx-g-font-display);
-    font-size: 18px; /* not registered */
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.1px;
-    line-height: 24px;
+    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-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: 20px;
+    letter-spacing: -0.5px;
+    line-height: var(--dx-g-spacing-lg);
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-sm) 0;
 }
 
-.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;
+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;
 }
 
-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: 24px;
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--dx-g-spacing-sm);
+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: 24px;
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--dx-g-spacing-sm);
+    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 {
@@ -95,7 +131,7 @@ p {
     font-size: var(--dx-g-text-base);
     color: var(--dx-g-gray-10);
     letter-spacing: 0;
-    line-height: 24px;
+    line-height: var(--dx-g-spacing-lg);
 }
 
 .dx-text-body-3 {
@@ -103,9 +139,10 @@ p {
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-gray-10);
     letter-spacing: 0;
-    line-height: 20px;
+    line-height: var(--dx-g-spacing-mlg);
 }
 
+a,
 .link a {
     font-family: var(--dx-g-font-sans);
     box-sizing: border-box;
@@ -116,28 +153,18 @@ p {
     color: var(--dx-g-blue-vibrant-50);
 }
 
-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 {
-    padding-bottom: var(--dx-g-spacing-sm);
-}
-
 .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: 24px;
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--dx-g-spacing-sm);
+    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 {
@@ -145,37 +172,33 @@ a {
     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 {
-    font-family: “Menlo-Regular”, Courier, monospace;
-    font-size: 14px (0.875rem);
-    line-height: 20px (1.25rem);
+.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);
 }
 
-.bulletList {
-    list-style-type: disc;
-    margin-left: var(--dx-g-spacing-lg);
-    margin-right: var(--dx-g-spacing-lg);
-}
-
-.ullinks {
-    list-style-type: disc;
+a .codeph {
+    color: var(--dx-g-blue-vibrant-50);
 }
 
 .ulchildlink {
     font-family: var(--dx-g-font-sans);
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--dx-g-spacing-sm);
-}
-
-.olchildlinks {
-    list-style-type: disc;
 }
 
 .olchildlink {
@@ -189,7 +212,7 @@ a {
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-gray-10);
     letter-spacing: 0;
-    line-height: 24px;
+    line-height: var(--dx-g-spacing-lg);
     padding-top: var(--dx-g-spacing-sm);
     padding-bottom: var(--dx-g-spacing-sm);
 }
@@ -211,7 +234,7 @@ dt {
     font-size: var(--dx-g-text-base);
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: 0;
-    line-height: 20px;
+    line-height: var(--dx-g-spacing-mlg);
     padding-top: var(--dx-g-spacing-sm);
     padding-bottom: var(--dx-g-spacing-sm);
 }
@@ -221,11 +244,150 @@ dd {
     font-size: var(--dx-g-text-base);
     color: var(--dx-g-gray-10);
     letter-spacing: 0;
-    line-height: 24px;
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--dx-g-spacing-md);
+    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>