Merge pull request #18 from idesigncode/components

Improved styling

src/PropsTable.scss

@@ -9,7 +9,11 @@
   box-shadow: rgb(0 0 0 / 10%) 0 0.1rem 0.3rem 0.1rem,
     rgb(0 0 0 / 7%) 0 0 0 0.1rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   table {
     width: 100%;

src/Source.scss

@@ -17,7 +17,7 @@
   display: block;
   position: relative;
   margin-top: 1rem;
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
   vertical-align: text-bottom;
   background-color: var(--source_background-color);
@@ -27,6 +27,10 @@
   box-shadow: rgb(0 0 0 / 10%) 0 0.1rem 0.3rem 0.1rem,
     rgb(0 0 0 / 7%) 0 0 0 0.1rem;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   pre {
     margin: 0;
     padding: 2rem 2rem 2.5rem 2rem;

src/storybook.scss

@@ -31,10 +31,22 @@ body,
 /* General */
 #storybook-root,
 #storybook-docs {
+  text-underline-offset: 0.4em;
+
+  /* Storybook elements */
   .sbdocs-wrapper {
     padding: 4rem 3rem;
   }
 
+  .sb-story {
+    margin-bottom: 2rem;
+
+    &:last-child,
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+
   /* Headings */
   h1,
   h2,
@@ -46,6 +58,11 @@ body,
       'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
       Helvetica, Arial, sans-serif;
     margin-bottom: 0.5em;
+    margin-top: 3rem;
+
+    &:first-child {
+      margin-top: 0;
+    }
 
     > a {
       display: none;
@@ -54,6 +71,7 @@ body,
 
   h1 {
     font-size: 3rem;
+    margin-top: 0;
   }
   h2 {
     font-size: 2.6rem;
@@ -76,16 +94,34 @@ body,
     background-color: var(--blockquote_background-color);
     border-left-color: var(--blockquote_border-left-color);
     padding: 1.5rem;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
   }
 
   /* Expandable section */
   details {
+    &[open] {
+      margin-bottom: 3em;
+
+      summary {
+        margin-bottom: 1em;
+      }
+    }
+
     summary {
-      margin-bottom: 1em;
+      cursor: pointer;
+
+      &::marker {
+        font-size: 1.5em;
+      }
 
       p {
         display: inline;
+        font-weight: bold;
+        text-decoration: underline;
       }
     }
   }

stories/PropsTable.mdx

@@ -50,9 +50,7 @@ For further control, you can also use `props` to override each `required`, `type
 
 <details>
   <summary>
-    <p>
-      <strong>Examples of all prop types</strong>
-    </p>
+    <p>Examples of all prop types</p>
   </summary>
 
 Below is a complete list of example props showing how the `PropsTable` will display them:

stories/Source.mdx

@@ -28,8 +28,6 @@ The default theme is set with the `useDarkMode` hook from [storybook-dark-mode](
 > - As `Source` is designed to show production-ready source code, it will automatically remove any use of [PropsTable](/docs/components-propstable--docs).
 > - This can be disabled by setting `removePropsTable` to `false`.
 
-<br />
-
 ### Import Path Replacements (optional):
 
 The `Source` component can automatically display all [file import paths](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) as they would be used by a consumer of your code.

stories/Webpack.mdx

@@ -13,9 +13,7 @@ These can be easily added to `.storybook/main.mjs` with the named export `webpac
 
   <details>
     <summary>
-      <p>
-        <strong>Using `webpackFinal` with custom configuration settings</strong>
-      </p>
+      <p>Using `webpackFinal` with custom configuration settings</p>
     </summary>
 
 You can alternatively use the imported `webpackFinal` async function with your own custom configuration settings:
@@ -28,8 +26,6 @@ The imported `webpackFinal` async function will set the following configurations
 
 <Story of={WebpackStories.WebpackFinalConfig} />
 
-<br />
-
 ### Raw Imports
 
 Once Webpack is configured, you can import the raw source code of any file with the `?raw` import suffix (a.k.a. "Webpack resource query"):