feat(Section): add transparent as a style type

dnbexperience · Nov 8, 2021 · ab2e6fc · ab2e6fc
1 parent e744ffb
commit ab2e6fc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md
@@ -15,16 +15,17 @@ showTabs: true
 
 You can easily [customize the color](/uilib/components/section#customize-color).
 
-| Style           | Description                                                                         |
-| --------------- | ----------------------------------------------------------------------------------- |
-| `mint-green-12` | _(default)_ uses `--color-mint-green-12`.                                           |
-| `white`         | uses `--color-white`.                                                               |
-| `mint-green`    | uses `--color-mint-green`.                                                          |
-| `lavender`      | uses `--color-lavender`.                                                            |
-| `sand-yellow`   | uses `--color-sand-yellow`.                                                         |
-| `pistachio`     | uses `--color-pistachio`.                                                           |
-| `black-3`       | uses `--color-black-3`.                                                             |
-| `emerald-green` | uses `--color-emerald-green`.                                                       |
-| `signal-orange` | uses `--color-signal-orange`.                                                       |
-| `fire-red`      | uses `--color-fire-red`. Is used by [GlobalStatus](/uilib/components/global-status) |
-| `divider`       | uses `--color-white` as background with a border-line on top and bottom.            |
+| Style           | Description                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------- |
+| `mint-green-12` | _(default)_ uses `--color-mint-green-12`.                                                           |
+| `white`         | uses `--color-white`.                                                                               |
+| `mint-green`    | uses `--color-mint-green`.                                                                          |
+| `lavender`      | uses `--color-lavender`.                                                                            |
+| `sand-yellow`   | uses `--color-sand-yellow`.                                                                         |
+| `pistachio`     | uses `--color-pistachio`.                                                                           |
+| `black-3`       | uses `--color-black-3`.                                                                             |
+| `emerald-green` | uses `--color-emerald-green`.                                                                       |
+| `signal-orange` | uses `--color-signal-orange`.                                                                       |
+| `fire-red`      | uses `--color-fire-red`. Is used by [GlobalStatus](/uilib/components/global-status)                 |
+| `divider`       | uses `--color-white` as background with a border-line on top and bottom.                            |
+| `transparent`   | CSS transparent. Used in situations where a Section is of interest, but without a color as a basis. |
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap
@@ -37,6 +37,9 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 .dnb-section--mint-green-12::after {
   color: var(--color-mint-green-12); }
 
+.dnb-section--transparent::after {
+  color: transparent; }
+
 .dnb-section--white::after {
   color: var(--color-white); }
 

diff --git a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
@@ -20,6 +20,9 @@
   &--mint-green-12::after {
     color: var(--color-mint-green-12);
   }
+  &--transparent::after {
+    color: transparent;
+  }
   &--white::after {
     color: var(--color-white);
   }