Dynamic page (#4)

* test: do not merge * feat(ui5-dynamic-page): poc * feat(ui5-dynamic-page): snap on scroll pin expand collapse * feat(ui5-dynamic-page): add floating footer styling and animation (SAP#7857) * feat(ui5-dynamic-page): snap on scroll pin expand collapse * feat(ui5-dynamic-page): add breadcrumbs responsiveness (SAP#7844) * feat(ui5-dynamic-page): ensure visibility of content outside overflow (SAP#7845) * feat(ui5-dynamic-page): ensure visibility of title content that never overflows * feat(ui5-dynamic-page) actions style corrected Co-authored-by: Dobrin Dimchev <[email protected]> * feat(ui5-dynamic-page): sizing of toolbar wrappers corrected * feat(ui5-dynamic-page): apply review feedback --------- Co-authored-by: Dobrin Dimchev <[email protected]> * feat(ui5-dynamic-page): footer no longer takes space when hidden (SAP#7904) * feat(ui5-dynamic-page): prevent unnecessary content overflow when footer hidden * feat(ui5-dynamic-page): move scroll listener to the new scroll container * feat(ui5-dynamic-page): add header padding (SAP#7921) * feat(ui5-dynamic-page): add responsive paddings (SAP#7923) * build: align with new build process * feat(ui5-dynamic-page): fit content that has 100% height (SAP#7928) * feat(ui5-dynamic-page): fit content that has 100% height * feat(ui5-dynamic-page): correct import * feat(ui5-dynamic-page): add tests * feat(ui5-dynamic-page): keyboard handling (SAP#7990) * feat(ui5-dynamic-page): keyboard handling * feat(ui5-dynamic-page): add focus span * fix: add expand and focus on title click --------- Co-authored-by: Dobrin Dimchev <[email protected]> * fix(ui5-dynamic-page): theme styling (SAP#7966) fix(ui5-dynamic-page): apply theme styles Co-authored-by: PetyaMarkovaBogdanova <[email protected]> * feat(ui5-dynamic-page): screen reader support (SAP#7997) * feat(ui5-dynamic-page): screen reader support * feat(ui5-dynamic-page): add tests * feat(ui5-dynamic-page): add general interaction tests (SAP#8056) * docs(ui5-dynamic-page): story and docs added (SAP#8031) fix(ui5-dynamic-page): story and docs added Co-authored-by: PetyaMarkovaBogdanova <[email protected]> * feat(ui5-dynamic-page): add general API tests (SAP#8115) * feat(ui5-dynamic-page): proper docs added (SAP#8130) Co-authored-by: PetyaMarkovaBogdanova <[email protected]> * chore: align docs to new build scripts * chore: use framework's debounce method --------- Co-authored-by: PetyaMarkovaBogdanova <[email protected]> Co-authored-by: Diana Pazheva <[email protected]> Co-authored-by: PetyaMarkovaBogdanova <[email protected]>
dobrinyonkov · Feb 5, 2024 · 6855665 · 6855665
1 parent 34db17e
commit 6855665
Show file tree

Hide file tree

Showing 58 changed files with 4,291 additions and 12 deletions.
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -44,8 +44,9 @@
     "lit-html": "^2.0.1"
   },
   "devDependencies": {
-    "@openui5/sap.ui.core": "1.120.3",
-    "@ui5/webcomponents-tools": "1.22.0",
+    "@buxlabs/amd-to-es6": "0.16.1",
+    "@openui5/sap.ui.core": "1.116.0",
+    "@ui5/webcomponents-tools": "1.22.0-rc.1",
     "chromedriver": "120.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",

diff --git a/packages/fiori/package.json b/packages/fiori/package.json
@@ -53,7 +53,7 @@
     "@zxing/library": "^0.17.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.22.0",
+    "@ui5/webcomponents-tools": "1.22.0-rc.1",
     "chromedriver": "120.0.0"
   }
 }
diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -0,0 +1,51 @@
+<div class="{{classes.root}}">
+  <div class="{{classes.scrollContainer}}"
+    @scroll="{{snapOnScroll}}">
+    <header class="{{classes.headerWrapper}}"
+      id="{{_id}}-header"
+      aria-label="{{_headerLabel}}"
+      aria-expanded="{{_headerExpanded}}"
+      role="region"
+      @ui5-_toggle-title={{onToggleTitle}}>
+      <slot name="titleArea"></slot>
+      {{#if headerInTitle}}
+        <slot name="headerArea"></slot>
+      {{/if}}
+
+      {{#if actionsInTitle}}
+        {{> header-actions}}
+      {{/if}}
+
+   </header>
+
+    {{#if headerInContent}}
+      <slot name="headerArea"></slot>
+    {{/if}}
+
+    {{#unless actionsInTitle}}
+      {{> header-actions}}
+    {{/unless}}
+
+    <div class="{{classes.content}}">
+      <div class="{{classes.fitContent}}">
+        <slot></slot>
+        {{#if showFooter}}
+          <div class="{{classes.spacer}}"></div>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+
+    <div class="{{classes.footer}}">
+      <slot name="footer"></slot>
+    </div>
+</div>
+{{#*inline "header-actions"}}
+    <ui5-dynamic-page-header-actions
+      ?snapped="{{headerSnapped}}"
+      ?pinned="{{headerPinned}}"
+      .accessibilityAttributes="{{_accAttributesForHeaderActions}}"
+      @ui5-expand-button-click={{onExpandClick}}
+      @ui5-pin-button-click={{onPinClick}}
+  ></ui5-dynamic-page-header-actions>
+  {{/inline}}