feat(Section): add dropShadow support

packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.tsx

@@ -43,6 +43,11 @@ export const ResponsiveAppearance = () => (
         medium: 'pistachio',
         large: 'pistachio',
       }}
+      dropShadow={{
+        small: false,
+        medium: true,
+        large: true,
+      }}
       innerSpace
     >
       <P space={0}>Responsive properties</P>

packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx

@@ -26,7 +26,7 @@ Where `innerSpace` do respond on different screen sizes.
 
 ### Responsive appearance
 
-Where `breakout`, `outline`, `roundedCorner` and `backgroundColor` do respond on different screen sizes.
+Where `breakout`, `outline`, `roundedCorner`, `backgroundColor` and `dropShadow` do respond on different screen sizes.
 
 <Examples.ResponsiveAppearance />
 

packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx

@@ -12,6 +12,7 @@ showTabs: true
 | `outline`                               | _(optional)_ define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia [color](/uilib/usage/customisation/colors/). Supports also media query breakpoints like `{ small: 'black-8' }` |
 | `roundedCorner`                         | _(optional)_ use `true` to enable rounded corners (border-radius). Supports also media query breakpoints like `{ small: boolean }`. Defaults to `false`.                                                             |
 | `backgroundColor`                       | _(optional)_ define a custom background color, instead of a variant. Use a Eufemia [color](/uilib/usage/customisation/colors/). Supports also media query breakpoints like `{ small: 'white' }`.                     |
+| `dropShadow`                            | _(optional)_ use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.                                                                                        |
 | `textColor`                             | _(optional)_ define a custom text color to compliment the backgroundColor. Use a Eufemia [color](/uilib/usage/customisation/colors/). Supports also media query breakpoints like `{ small: 'black-80' }`.            |
 | `innerSpace`                            | _(optional)_ will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.                                                                                         |
 | `innerRef`                              | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.                                                       |

packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -594,6 +594,12 @@ button.dnb-button::-moz-focus-inner {
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: var(--drop-shadow, none);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -618,6 +624,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -630,6 +637,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -642,6 +650,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)

packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap

@@ -594,6 +594,12 @@ button.dnb-button::-moz-focus-inner {
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: var(--drop-shadow, none);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -618,6 +624,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -630,6 +637,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -642,6 +650,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)

packages/dnb-eufemia/src/components/section/Section.tsx

@@ -57,6 +57,7 @@ export type SectionSpacing =
 export type TextColor = string
 export type OutlineColor = string | boolean
 export type BackgroundColor = string
+export type DropShadow = boolean
 
 export type SectionProps = {
   /**
@@ -89,6 +90,11 @@ export type SectionProps = {
    */
   backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>
 
+  /**
+   * Define a custom drop-shadow.
+   */
+  dropShadow?: DropShadow | ResponsiveProp<DropShadow>
+
   /**
    * Define what HTML element should be used. Defaults to `<section>`.
    */
@@ -137,6 +143,7 @@ export default function Section(localProps: SectionAllProps) {
     roundedCorner,
     textColor,
     backgroundColor,
+    dropShadow,
     outline,
     innerRef,
 
@@ -180,6 +187,11 @@ export default function Section(localProps: SectionAllProps) {
     ...computeStyle(backgroundColor, 'background-color', (value) =>
       getColor(value)
     ),
+    ...computeStyle(
+      dropShadow,
+      'drop-shadow',
+      (value) => value && 'var(--shadow-default)'
+    ),
     ...computeStyle(outline, 'outline-color', (value) =>
       String(value) === 'true'
         ? 'var(--outline-color--value)'

packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap

@@ -33,6 +33,12 @@ exports[`Section scss has to match style dependencies css 1`] = `
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: var(--drop-shadow, none);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -57,6 +63,7 @@ exports[`Section scss has to match style dependencies css 1`] = `
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -69,6 +76,7 @@ exports[`Section scss has to match style dependencies css 1`] = `
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -81,6 +89,7 @@ exports[`Section scss has to match style dependencies css 1`] = `
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)

packages/dnb-eufemia/src/components/section/style/dnb-section.scss

@@ -29,6 +29,13 @@
     background-color: var(--background-color, white);
   }
 
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-shadow: var(--drop-shadow, none);
+  }
+
   &::after {
     content: '';
     visibility: var(--breakout, hidden);
@@ -58,6 +65,7 @@
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -68,6 +76,7 @@
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -78,6 +87,7 @@
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)

packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap

@@ -594,6 +594,12 @@ button.dnb-button::-moz-focus-inner {
 .dnb-section[style*="--background-color"] {
   background-color: var(--background-color, white);
 }
+.dnb-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: var(--drop-shadow, none);
+}
 .dnb-section::after {
   content: "";
   visibility: var(--breakout, hidden);
@@ -618,6 +624,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
     --rounded-corner: var(
       --rounded-corner--small,
       var(--rounded-corner--fallback)
@@ -630,6 +637,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
     --rounded-corner: var(
       --rounded-corner--medium,
       var(--rounded-corner--fallback)
@@ -642,6 +650,7 @@ button.dnb-button::-moz-focus-inner {
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
     --rounded-corner: var(
       --rounded-corner--large,
       var(--rounded-corner--fallback)