[#43842] added action bar example in modal

frontend/src/stories/ActionBar.example.html

@@ -4,16 +4,14 @@
       class="spot-action-bar--action"
       [label]="'Remember this choice'"
     >
-      <spot-checkbox
-        slot="input"
-        class="spot-checkbox"
-      ></spot-checkbox>
+      <spot-checkbox slot="input"></spot-checkbox>
     </spot-selector-field>
   </div>
   <div class="spot-action-bar--right">
     <button
       type="button"
       class="spot-action-bar--action button -highlight"
-    >Okay</button>
+    >Okay
+    </button>
   </div>
 </div>

frontend/src/stories/ActionBar.stories.mdx

@@ -3,6 +3,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { OpSpotModule } from '../app/spot/spot.module';
 import { SbActionBarExample } from './ActionBar.example';
+import { SbActionBarInModalExample } from './ActionBarInModal.example';
 import { SbActionBarLeftButtonsExample } from './ActionBarLeftButtons.example';
 import { SbActionBarTransparentExample } from './ActionBarTransparent.example';
 import { SbActionBarNoSideOptionExample } from './ActionBarNoSideOption.example';
@@ -27,7 +28,11 @@ import { SbActionBarMoreButtonsExample } from './ActionBarMoreButtons.example';
 
 # Action Bar
 
-> Example of action bar in a modal
+<Canvas>
+  <Story name="Example in Modal">
+    {{ component: SbActionBarInModalExample }}
+  </Story>
+</Canvas>
 
 The action bar is generally used at the bottom of modals to present the user with a set of actions. These actions are often relative to choices or selections made in the containing modal.
 

frontend/src/stories/ActionBarInModal.example.html

@@ -0,0 +1,21 @@
+<div class="spot-modal" style="border: rgb(224, 224, 224) 1px solid">
+  <div class="spot-modal--header">Delete attachment</div>
+  <div class="spot-modal--body spot-container">
+    <span class="spot-body-small">Are you sure you want to delete this file? This action is not reversible.</span>
+  </div>
+  <div class="spot-action-bar">
+    <div class="spot-action-bar--right">
+      <button
+        type="button"
+        class="spot-action-bar--action button"
+      >Cancel</button>
+      <button
+        type="button"
+        class="spot-action-bar--action button -danger"
+      >
+        <span class="spot-icon spot-icon_delete"></span>
+        <span [textContent]="'Delete attachment'"></span>
+      </button>
+    </div>
+  </div>
+</div>

frontend/src/stories/ActionBarInModal.example.ts

@@ -0,0 +1,7 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  templateUrl: './ActionBarInModal.example.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SbActionBarInModalExample {}

frontend/src/stories/ActionBarLeftButtons.example.html

@@ -14,10 +14,7 @@
       class="spot-action-bar--action"
       [label]="'Remember this choice'"
     >
-      <spot-checkbox
-        slot="input"
-        class="spot-checkbox"
-      ></spot-checkbox>
+      <spot-checkbox slot="input"></spot-checkbox>
     </spot-selector-field>
   </div>
 </div>

frontend/src/stories/ActionBarTransparent.example.html

@@ -4,10 +4,7 @@
       class="spot-action-bar--action"
       [label]="'Remember this choice'"
     >
-      <spot-checkbox
-        slot="input"
-        class="spot-checkbox"
-      ></spot-checkbox>
+      <spot-checkbox slot="input"></spot-checkbox>
     </spot-selector-field>
   </div>
   <div class="spot-action-bar--right">