feat: set content elements margin to 0 and add a content class for fo…

…rmating content nicely

packages/ui/fixtures/classContent.fixture.tsx

@@ -0,0 +1,38 @@
+import { concatClassNames } from "@sys42/utils";
+import { useValue } from "react-cosmos/client";
+
+import { classContent } from "../lib/main";
+
+export default function Fixture() {
+  const [isEnabled] = useValue("isEnabled", { defaultValue: true });
+  return (
+    <div style={{ padding: "2rem" }}>
+      <div>I am before</div>
+      <div className={concatClassNames(isEnabled && classContent)}>
+        <h2>I am a heading2</h2>
+        <p>
+          And this is a little paragraph that contains text. Nothing special
+          here just a few words to fill this paragraph. Yeah, really, no
+          valueable information here, stop wasting you time.
+        </p>
+        <h3>I am a heading3 with a paragraph and a list below</h3>
+        <p>
+          This is another paragraph with some text. Nothing extraordinary here,
+          just a few words to fill this space. Seriously, no valuable
+          information here, stop wasting your time.
+        </p>
+        <ul>
+          <li>First item</li>
+          <li>Second item</li>
+          <li>Third item</li>
+        </ul>
+        <p>
+          This is a different paragraph with some other text. Still, nothing
+          special here, just a few words to fill this paragraph. Really, no
+          valuable information here, you might want to move on.
+        </p>
+      </div>
+      <div>I am after</div>
+    </div>
+  );
+}

packages/ui/lib/base.css

@@ -17,8 +17,16 @@ h3,
 h4,
 h5,
 h6,
-p {
-  margin-bottom: 0;
+p,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+table,
+figure,
+hr {
+  margin: 0;
 }
 
 a {

packages/ui/lib/helperClasses/content/index.ts

@@ -0,0 +1,3 @@
+import styles from "./styles.module.css";
+const classContent = styles.classContent;
+export { classContent };

packages/ui/lib/helperClasses/content/styles.module.css

@@ -0,0 +1,25 @@
+.classContent h1,
+.classContent h2,
+.classContent h3,
+.classContent h4,
+.classContent h5,
+.classContent h6,
+.classContent p,
+.classContent ul,
+.classContent ol,
+.classContent dl,
+.classContent blockquote,
+.classContent pre,
+.classContent table,
+.classContent figure,
+.classContent hr {
+  margin: revert;
+}
+
+.classContent > *:last-child {
+  margin-bottom: 0;
+}
+
+.classContent > *:first-child {
+  margin-top: 0;
+}

packages/ui/lib/main.ts

@@ -27,5 +27,6 @@ export {
   classButtonGroupReverse,
 } from "./helperClasses/buttonGroup";
 export { classCard } from "./helperClasses/card";
+export { classContent } from "./helperClasses/content";
 export { classInlineIcon } from "./helperClasses/inlineIcon";
 export { classTest } from "./helperClasses/test";