From 07ad9d3c9b6abe6b97cce6ad6a1c519583ab6d08 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Thu, 8 Jun 2023 15:37:04 +1000
Subject: [PATCH 1/4] Indicate interactivity on hover for details > summary
---
src/storybook.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/storybook.scss b/src/storybook.scss
index 6c0b6d5..9bebfc9 100644
--- a/src/storybook.scss
+++ b/src/storybook.scss
@@ -82,6 +82,7 @@ body,
/* Expandable section */
details {
summary {
+ cursor: pointer;
margin-bottom: 1em;
p {
From 5eb143c3e76d70460415d3f64b173e3a39a48b2c Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:13:27 +1000
Subject: [PATCH 2/4] Adjusted margin-bottom
---
src/PropsTable.scss | 6 +++++-
src/Source.scss | 6 +++++-
src/storybook.scss | 29 +++++++++++++++++++++++++++--
stories/Source.mdx | 2 --
stories/Webpack.mdx | 2 --
5 files changed, 37 insertions(+), 8 deletions(-)
diff --git a/src/PropsTable.scss b/src/PropsTable.scss
index 24da806..178f7e5 100644
--- a/src/PropsTable.scss
+++ b/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%;
diff --git a/src/Source.scss b/src/Source.scss
index 855f43a..f9ef504 100644
--- a/src/Source.scss
+++ b/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;
diff --git a/src/storybook.scss b/src/storybook.scss
index 9bebfc9..fb6e8e3 100644
--- a/src/storybook.scss
+++ b/src/storybook.scss
@@ -31,10 +31,20 @@ body,
/* General */
#storybook-root,
#storybook-docs {
+ /* Storybook elements */
.sbdocs-wrapper {
padding: 4rem 3rem;
}
+ .sb-story {
+ margin-bottom: 2rem;
+
+ &:last-child,
+ :last-child {
+ margin-bottom: 0;
+ }
+ }
+
/* Headings */
h1,
h2,
@@ -46,6 +56,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 +69,7 @@ body,
h1 {
font-size: 3rem;
+ margin-top: 0;
}
h2 {
font-size: 2.6rem;
@@ -76,14 +92,23 @@ 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] {
+ summary {
+ margin-bottom: 1em;
+ }
+ }
+
summary {
cursor: pointer;
- margin-bottom: 1em;
p {
display: inline;
diff --git a/stories/Source.mdx b/stories/Source.mdx
index 278b517..445df32 100644
--- a/stories/Source.mdx
+++ b/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`.
-
-
### 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.
diff --git a/stories/Webpack.mdx b/stories/Webpack.mdx
index 46aa9c8..3cc58b7 100644
--- a/stories/Webpack.mdx
+++ b/stories/Webpack.mdx
@@ -28,8 +28,6 @@ The imported `webpackFinal` async function will set the following configurations
-
-
### 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"):
From d83d48067323dbeb6c5f0446b50b3d5b667bdb66 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:18:06 +1000
Subject: [PATCH 3/4] Improved text underline offset
---
src/storybook.scss | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/storybook.scss b/src/storybook.scss
index fb6e8e3..c5fadd4 100644
--- a/src/storybook.scss
+++ b/src/storybook.scss
@@ -31,6 +31,8 @@ body,
/* General */
#storybook-root,
#storybook-docs {
+ text-underline-offset: 0.4em;
+
/* Storybook elements */
.sbdocs-wrapper {
padding: 4rem 3rem;
From aa470b7096f84559dda652626d623fea7315c2be Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:33:05 +1000
Subject: [PATCH 4/4] Improved expandable details styling
---
src/storybook.scss | 8 ++++++++
stories/PropsTable.mdx | 4 +---
stories/Webpack.mdx | 4 +---
3 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/src/storybook.scss b/src/storybook.scss
index c5fadd4..f4edc7c 100644
--- a/src/storybook.scss
+++ b/src/storybook.scss
@@ -104,6 +104,8 @@ body,
/* Expandable section */
details {
&[open] {
+ margin-bottom: 3em;
+
summary {
margin-bottom: 1em;
}
@@ -112,8 +114,14 @@ body,
summary {
cursor: pointer;
+ &::marker {
+ font-size: 1.5em;
+ }
+
p {
display: inline;
+ font-weight: bold;
+ text-decoration: underline;
}
}
}
diff --git a/stories/PropsTable.mdx b/stories/PropsTable.mdx
index c9abaf5..6f5da2c 100644
--- a/stories/PropsTable.mdx
+++ b/stories/PropsTable.mdx
@@ -50,9 +50,7 @@ For further control, you can also use `props` to override each `required`, `type
-
- Examples of all prop types
-
+
Examples of all prop types
Below is a complete list of example props showing how the `PropsTable` will display them:
diff --git a/stories/Webpack.mdx b/stories/Webpack.mdx
index 3cc58b7..236baf5 100644
--- a/stories/Webpack.mdx
+++ b/stories/Webpack.mdx
@@ -13,9 +13,7 @@ These can be easily added to `.storybook/main.mjs` with the named export `webpac
-
- Using `webpackFinal` with custom configuration settings
-
+
Using `webpackFinal` with custom configuration settings
You can alternatively use the imported `webpackFinal` async function with your own custom configuration settings: