feat(styles): introduce BTP Side Panel

package.json

@@ -170,4 +170,4 @@
     "fast-deep-equal": "^3.1.3",
     "jsdom": "^20.0.1"
   }
-}
+}

packages/styles/src/fundamental-styles.scss

@@ -111,6 +111,7 @@
 @import "navigation-menu";
 @import "tool-layout";
 @import "title-bar";
+@import "side-panel";
 
 // BTP Specific components/overwrites
 @import "./btp/avatar.scss";

packages/styles/src/side-panel.scss

@@ -0,0 +1,58 @@
+@import './new-settings';
+@import "mixins/mixins";
+
+$block: #{$fd-namespace}-side-panel;
+
+.#{$block} {
+  --fdSide_Panel_Background: var(--sapTile_Background);
+  --fdSide_Panel_BoxShadow: var(--sapNotifications_Shadow2);
+
+  @include fd-reset();
+
+  width: 100%;
+  height: 100%;
+  background: var(--fdSide_Panel_Background);
+  border-radius: var(--sapElement_BorderCornerRadius);
+  border: 0.0625rem solid var(--fdSidePanel_Border_Color);
+  box-shadow: var(--fdSide_Panel_BoxShadow);
+
+  @include fd-hover() {
+    --fdSide_Panel_Background: var(--sapTile_Hover_Background);
+  }
+
+  @include fd-focus() {
+    --fdSide_Panel_BoxShadow: none;
+    --fdSide_Panel_Background: var(--sapTile_Background);
+
+    outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+  }
+
+  &__header {
+    @include fd-reset();
+
+    @include fd-flex-vertical-center() {
+      gap: 0.75rem;
+      justify-content: space-between;
+    }
+
+    padding: 0.5rem;
+  }
+
+  &__actions {
+    @include fd-reset();
+
+    @include fd-flex-vertical-center() {
+      gap: 0.5rem;
+    }
+  }
+
+  &__content {
+    @include fd-reset();
+
+    padding: 0;
+  }
+
+  &__footer {
+    @include fd-reset();
+  }
+}

packages/styles/src/theming/common/side-panel/_sap_fiori.scss

@@ -0,0 +1,3 @@
+:root {
+  --fdSidePanel_Border_Color: transparent;
+}

packages/styles/src/theming/common/side-panel/_sap_fiori_hc.scss

@@ -0,0 +1,5 @@
+@import "./sap_fiori";
+
+:root {
+  --fdSidePanel_Border_Color: var(--sapGroup_ContentBorderColor);
+}

packages/styles/src/theming/common/side-panel/_sap_horizon.scss

@@ -0,0 +1,3 @@
+:root {
+  --fdSidePanel_Border_Color: transparent;
+}

packages/styles/src/theming/common/side-panel/_sap_horizon_hc.scss

@@ -0,0 +1,5 @@
+@import "./sap_horizon";
+
+:root {
+  --fdSidePanel_Border_Color: var(--sapGroup_ContentBorderColor);
+}

packages/styles/src/theming/sap_fiori_3.scss

@@ -46,6 +46,7 @@
 @import "./common/navigation/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
 @import "./common/tool-header/sap_fiori";
+@import "./common/side-panel/sap_fiori";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_fiori_3_dark.scss

@@ -46,6 +46,7 @@
 @import "./common/navigation/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
 @import "./common/tool-header/sap_fiori";
+@import "./common/side-panel/sap_fiori";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_fiori_3_hcb.scss

@@ -53,6 +53,7 @@
 @import "./common/navigation/sap_fiori_hc";
 @import "./common/navigation-menu/sap_fiori_hc";
 @import "./common/tool-header/sap_fiori_hc";
+@import "./common/side-panel/sap_fiori_hc";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_fiori_3_hcw.scss

@@ -47,6 +47,7 @@
 @import "./common/navigation-menu/sap_fiori_hc";
 @import "./common/tool-header/sap_fiori_hc";
 @import "./common/step-input/sap_fiori";
+@import "./common/side-panel/sap_fiori_hc";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_fiori_3_light_dark.scss

@@ -45,6 +45,7 @@
 @import "./common/navigation/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
 @import "./common/tool-header/sap_fiori";
+@import "./common/side-panel/sap_fiori";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_horizon.scss

@@ -48,6 +48,7 @@
 @import "./common/navigation/sap_horizon";
 @import "./common/navigation-menu/sap_horizon";
 @import "./common/tool-header/sap_horizon";
+@import "./common/side-panel/sap_horizon";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_horizon_dark.scss

@@ -48,6 +48,7 @@
 @import "./common/navigation/sap_horizon";
 @import "./common/navigation-menu/sap_horizon";
 @import "./common/tool-header/sap_horizon";
+@import "./common/side-panel/sap_horizon";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_horizon_hcb.scss

@@ -48,6 +48,7 @@
 @import "./common/navigation/sap_horizon_hc";
 @import "./common/navigation-menu/sap_horizon_hc";
 @import "./common/tool-header/sap_horizon_hc";
+@import "./common/side-panel/sap_horizon_hc";
 
 :root {
   /* BTP */

packages/styles/src/theming/sap_horizon_hcw.scss

@@ -49,6 +49,7 @@
 @import "./common/navigation/sap_horizon_hc";
 @import "./common/navigation-menu/sap_horizon_hc";
 @import "./common/tool-header/sap_horizon_hc";
+@import "./common/side-panel/sap_horizon_hc";
 
 :root {
   /* BTP */

packages/styles/stories/BTP/side-panel/anatomy.example.html

@@ -0,0 +1,25 @@
+<aside role="region" aria-label="Side Panel" class="fd-side-panel" tabindex="0" style="width: 400px;">
+    <div class="fd-side-panel__header">
+        <div class="fd-title-bar">
+            <div class="fd-title-bar__container">
+                <div class="fd-title-bar__title-container">
+                    <h4 class="fd-title-bar__title">Title</h4>
+                </div>
+                <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
+            </div>
+        </div>
+        <div class="fd-side-panel__actions">
+            <button class="fd-button fd-button--nested-square" aria-label="Expand Panel">
+                <i class="sap-icon--decline" role="presentation"></i>
+            </button>
+            <button class="fd-button fd-button--nested-square" aria-label="Open Sub Panel">
+                <i class="sap-icon--slim-arrow-up" role="presentation"></i>
+            </button>
+            <button class="fd-button fd-button--nested-square" aria-label="Close Panel">
+                <i class="sap-icon--decline" role="presentation"></i>
+            </button>
+        </div>
+    </div>
+    <div class="fd-side-panel__content"></div>
+    <div class="fd-side-panel__footer"></div>
+</aside>

packages/styles/stories/BTP/side-panel/side-panel.stories.js

@@ -0,0 +1,37 @@
+import anatomyExampleHtml from "./anatomy.example.html?raw";
+
+import '../../../src/side-panel.scss';
+import '../../../src/title-bar.scss';
+import '../../../src/icon.scss';
+import '../../../src/button.scss';
+
+export default {
+  title: 'BTP/Side Panel',
+  parameters: {
+    description: `<br><br>### Elements
+- Title Bar / Header (mandatory): the Title Bar for the Side Panel.
+- Open Sub Panel (optional):	opens the Sub Panel to show additional content.
+- Expand / Collapse Side Panel (mandatory): expands or Collapses the Side Panel.
+- Close Panel (mandatory):	closes the Side Panel completely.
+- Content Area (mandatory):	main panel content is displayed here. Level 1: content area can be split by a Responsive Splitter (horizontal) content from either area can be dragged and dropped into either content area.
+- Responsive Splitter (optional): 	a responsive splitter can be used to split content in the content area and can be moved up or down to show or hide content allowing users to view more or less content. Content can be dragged and dropped from content areas to perform actions.
+- Pagination Bar (optional)
+- Footer (optional): optional actions for the Side Panel can be placed in the footer. Footers are optional and not required.
+- Close Sub Panel (optional): closes the Sub Panel
+- Sub Panel (optional):	sub panel content is displayed here. Level 2: content area can be split by a Responsive Splitter (Horizontal) content from either area can be dragged and dropped into either content area.
+
+`,
+    tags: ['btp','horizon-only']
+  }
+};
+
+export const Anatomy = () => anatomyExampleHtml;
+Anatomy.parameters = {
+  docs: {
+    story: {
+    },
+    description: {
+      story: ``
+    }
+  }
+};