feat: extend headings and paragraphs to have styles, if they don't ha…

…ve a defined css class

packages/dnb-design-system-portal/src/pages/uilib/typography.md

@@ -5,6 +5,8 @@ draft: false
 order: 4
 ---
 
+import CodeBlock from 'Tags/CodeBlock'
+
 # Typography
 
 ## Font Face
@@ -28,26 +30,25 @@ Read more about [best practices for typography](/uilib/usage/best-practices/for-
 
 #### Heading examples
 
-<div class="example-box">
-  <h1>H1</h1>
-  <h2>H2</h2>
-  <h3>H3</h3>
-  <h4>H4</h4>
-  <h5>H5</h5>
-  <h6>H6</h6>
-</div>
+<CodeBlock reactLive hideCode>
+{`
+<h1 className="dnb-h1">H1</h1>
+<h2 className="dnb-h2">H2</h2>
+<h3 className="dnb-h3">H3</h3>
+<h4 className="dnb-h4">H4</h4>
+<h5 className="dnb-h5">H5</h5>
+<h6 className="dnb-h6">H6</h6>
+`}
+</CodeBlock>
 
 ### Paragraph
 
-<div class="example-box">
-  <p>
-    Here is a paragraph with some nonsense
-    <a href="/">Lorem Ipsum</a>
-    comes from <b>sections</b> 1.10.32 and 1.10.33 of "de
-    <i>Finibus Bonorum</i> et <u>Malorum</u>" (
-    <strong>The Extremes</strong> of Good and Evil) by Cicero,
-    written in 45 BC.
-  </p>
-</div>
-
-Or read more [about fonts in the Designer Guides](/quickguide-designer/fonts/).
+<CodeBlock reactLive hideCode>
+{`
+<p>
+  Here is a paragraph with some nonsense <a href="/" className="dnb-anchor">Lorem Ipsum</a> comes from <b>sections</b> 1.10.32 and 1.10.33 of "de <i>Finibus Bonorum</i> et <u>Malorum</u>" (<strong>The Extremes</strong> of Good and Evil) by Cicero, written in 45 BC.
+</p>
+`}
+</CodeBlock>
+
+Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).

packages/dnb-ui-lib/src/style/elements/typography.scss

@@ -3,7 +3,7 @@
  *
  */
 
-@mixin typographyStyles() {
+@mixin headingsStyle() {
   margin: 0;
   padding: 0;
 
@@ -75,7 +75,7 @@
   h4,
   h5,
   h6 {
-    @include typographyStyles();
+    @include headingsStyle();
   }
   h1 {
     @include h1Style();
@@ -121,8 +121,15 @@
 .dnb-lead,
 .dnb-h4,
 .dnb-h5,
-.dnb-h6 {
-  @include typographyStyles();
+.dnb-h6,
+// make exception on headings wtich has no class attribute
+h1:not([class]),
+h2:not([class]),
+h3:not([class]),
+h4:not([class]),
+h5:not([class]),
+h6:not([class]) {
+  @include headingsStyle();
 }
 
 .dnb-small {
@@ -165,7 +172,9 @@
   @include h6Style();
 }
 
-.dnb-p {
+.dnb-p,
+// make exception on the p tag by checking if there is a class attribute
+p:not([class]) {
   @include paragraphStyle();
   b,
   strong {

packages/dnb-ui-lib/src/style/themes/theme-ui/helper-classes/ui-spacing.scss

@@ -8,31 +8,30 @@
 // we also check if there is a class starting with "dnb-*"
 // this is to make sure we don't effect these styles inside of components
 .dnb-spacing {
-  // *:not([class^='dnb-']) > {
-  // }
-
-  .dnb-h1,
-  .dnb-h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  h3:not([class]),
+  h4:not([class]),
+  h5:not([class]),
+  h6:not([class]),
   .dnb-h3,
   .dnb-lead,
   .dnb-h4,
   .dnb-h5,
-  .dnb-h6,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  .dnb-h6 {
     margin: 2rem 0 1rem;
   }
 
-  .dnb-h1,
-  h1 {
+  h1,
+  h1:not([class]),
+  .dnb-h1 {
     margin: 3rem 0 2.5rem;
   }
-  .dnb-h2,
-  h2 {
+  h2,
+  h2:not([class]),
+  .dnb-h2 {
     margin: 3rem 0 1rem;
   }
 
@@ -43,6 +42,7 @@
   .dnb-blockquote,
   .dnb-pre,
   p,
+  p:not([class]),
   ul,
   ol,
   dl,
@@ -58,6 +58,7 @@
   .dnb-ol li {
     margin-top: 1rem;
     margin-bottom: 1rem;
+    /* stylelint-disable-next-line */
     & > p {
       margin-top: 1rem;
     }