Fold Out: fix host position (#1960)

* fix: added visual feedback on fold-out stories * fix: counteract position absolute styling * Create lucky-jars-eat.md * fix: lint-error in story --------- Co-authored-by: Martina Öqvist <[email protected]> Co-authored-by: Vilhelm Sjölander <[email protected]>
seb-oss · Feb 5, 2025 · d3870c2 · d3870c2
1 parent da1b484
commit d3870c2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 34 deletions.
diff --git a/.changeset/lucky-jars-eat.md b/.changeset/lucky-jars-eat.md
@@ -0,0 +1,5 @@
+---
+'@sebgroup/green-angular': patch
+---
+
+Added position: relative to host: element to counteract the position: absolute for the fold-out options.
diff --git a/libs/angular/src/v-angular/modal/fold-out/fold-out.component.scss b/libs/angular/src/v-angular/modal/fold-out/fold-out.component.scss
@@ -17,6 +17,9 @@
   --sg-card-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1019607843);
   --gds-ref-pallet-base800: #333;
 
+  // needed to counteract position: absolute further down
+  position: relative;
+
   .flex-right {
     right: 0;
   }

diff --git a/libs/angular/src/v-angular/modal/fold-out/fold-out.stories.ts b/libs/angular/src/v-angular/modal/fold-out/fold-out.stories.ts
@@ -28,44 +28,56 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn<NggvFoldOutComponent> = (args: any) => ({
-  template: /* html */ `
-  <div class="story-wrapper">
-    <nggv-fold-out [alignOptions]="alignOptions">
-      <div nggvOption>View details</div>
-      <div nggvOption>Sign payment</div>
-      <div nggvOption class="delete-option">Delete</div>
-    </nggv-fold-out>
-  </div>`,
-  styleUrls: ['./fold-out.stories.scss'],
-  props: args,
-})
-
-const TemplateAlt: StoryFn<NggvFoldOutComponent> = (args: any) => ({
-  template: /* html */ `
-    <div class="story-wrapper--right-align">
+const Template: StoryFn<NggvFoldOutComponent> = (args: any) => {
+  const lastClicked = ''
+  return {
+    template: /* html */ `
+    <div class="story-wrapper">
       <nggv-fold-out [alignOptions]="alignOptions">
-        <div nggvOption>View details</div>
-        <div nggvOption>Sign payment</div>
-        <div nggvOption class="delete-option">Delete</div>
+        <div nggvOption (click)="lastClicked = 'View details'">View details</div>
+        <div nggvOption (click)="lastClicked = 'Sign payment'">Sign payment</div>
+        <div nggvOption class="delete-option" (click)="lastClicked = 'Delete'">Delete</div>
       </nggv-fold-out>
+      <div>Clicked: <span [innerHTML]="lastClicked"></span></div>
     </div>`,
-  styleUrls: ['./fold-out.stories.scss'],
-  props: args,
-})
+    styleUrls: ['./fold-out.stories.scss'],
+    props: { ...args, lastClicked },
+  }
+}
 
-const TemplateWithText: StoryFn<NggvFoldOutComponent> = (args: any) => ({
-  template: /* html */ `
-  <div class="story-wrapper">
-      <nggv-fold-out [text]="text">
-        <div nggvOption>View details</div>
-        <div nggvOption>Sign payment</div>
-        <div nggvOption class="delete-option">Delete</div>
-      </nggv-fold-out>
-    </div>`,
-  styleUrls: ['./fold-out.stories.scss'],
-  props: args,
-})
+const TemplateAlt: StoryFn<NggvFoldOutComponent> = (args: any) => {
+  const lastClicked = ''
+  return {
+    template: /* html */ `
+      <div class="story-wrapper--right-align">
+        <nggv-fold-out [alignOptions]="alignOptions">
+          <div nggvOption (click)="lastClicked = 'View details'">View details</div>
+          <div nggvOption (click)="lastClicked = 'Sign payment'">Sign payment</div>
+          <div nggvOption class="delete-option" (click)="lastClicked = 'Delete'">Delete</div>
+        </nggv-fold-out>
+        <div>Clicked: <span [innerHTML]="lastClicked"></span></div>
+      </div>`,
+    styleUrls: ['./fold-out.stories.scss'],
+    props: { ...args, lastClicked },
+  }
+}
+
+const TemplateWithText: StoryFn<NggvFoldOutComponent> = (args: any) => {
+  const lastClicked = ''
+  return {
+    template: /* html */ `
+      <div class="story-wrapper">
+        <nggv-fold-out [text]="text">
+          <div nggvOption (click)="lastClicked = 'View details'">View details</div>
+          <div nggvOption (click)="lastClicked = 'Sign payment'">Sign payment</div>
+          <div nggvOption class="delete-option" (click)="lastClicked = 'Delete'">Delete</div>
+        </nggv-fold-out>
+        <div>Clicked: <span [innerHTML]="lastClicked"></span></div>
+      </div>`,
+    styleUrls: ['./fold-out.stories.scss'],
+    props: { ...args, lastClicked },
+  }
+}
 
 export const Primary = Template.bind({})
 Primary.args = {