Merge pull request #977 from SwedbankPay/feature/SWED-2339-dialog_UI_…

…update SWED-2339 dialog UI update
SwedbankPay · May 14, 2024 · af3a883 · af3a883
2 parents 805715c + ac39872
commit af3a883
Show file tree

Hide file tree

Showing 66 changed files with 888 additions and 592 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -17,9 +17,24 @@
     - It is now possible to add a subtext inside the checkmark variant (use span.subtext)
 
 - Buttons
+
   - minor non-breaking UI updates (height for size large, unify hover state, modify active & focus-visible UI, and more)
   - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)
 
+- Cards
+
+  - fix style .cards-wide on mobile
+
+- Dialog
+
+  - UI update
+  - new syntax, leveraging the standard <dialog> tag
+  - silent support for the old syntax until the next major release
+  - add transitions
+
+- Buttons
+  - secondary buttons get a transparent background-color
+
 ## Technical changes
 
 - chore deps (update deps packages minor versions)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
 		"@babel/eslint-parser": "^7.24.1",
 		"@babel/preset-env": "^7.24.4",
 		"@babel/preset-react": "^7.24.1",
-		"@playwright/test": "^1.43.0",
+		"@playwright/test": "^1.44.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.2.2",
 		"@testing-library/user-event": "^14.5.2",

diff --git a/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap
@@ -1,245 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Documentation: Dialog Example renders 1`] = `
-Array [
-  <h2
-    id="overview"
-  >
-    Example
-  </h2>,
-  <div
-    className="showcase-panel"
-  >
-    <button
-      className="btn btn-primary"
-      data-dialog-open="demo-dialog"
-      type="button"
-    >
-      
-
-      Open dialog
-      
-
-    </button>
-    <div
-      aria-describedby="aria-describe-dia"
-      aria-labelledby="aria-label-dia"
-      aria-modal="true"
-      className="dialog"
-      id="demo-dialog"
-      role="dialog"
-    >
-      <section>
-        <header
-          className="dialog-header"
-          id="aria-label-dia"
-        >
-          <h4>
-            Delete
-          </h4>
-          
-
-          <button
-            aria-label="Close dialog"
-            className="dialog-close"
-            type="button"
-          />
-        </header>
-        <div
-          className="dialog-body"
-          id="aria-describe-dia"
-        >
-          <p>
-            You’re about to permanently delete 
-            <i>
-              German Swashbuckle (456)?
-            </i>
-          </p>
-        </div>
-        <footer
-          className="dialog-footer"
-        >
-          
-
-          <button
-            className="btn btn-secondary"
-            data-dialog-close={true}
-            type="button"
-          >
-            Cancel
-          </button>
-          
-
-          <button
-            className="btn btn-primary"
-            type="button"
-          >
-            Delete
-          </button>
-          
-
-        </footer>
-      </section>
-    </div>
-  </div>,
-  <figure>
-    <div
-      className="code-view"
-    >
-      <header
-        className="code-view-header"
-      >
-        HTML
-        <button
-          aria-describedby="tooltipCopy"
-          className="tooltip"
-          onClick={[Function]}
-        >
-          <i
-            aria-hidden="true"
-            className="at-clipboard small"
-          />
-          <div
-            id="tooltipCopy"
-            role="tooltip"
-          >
-            Copy to clipboard
-          </div>
-        </button>
-      </header>
-      <table
-        className="code-view-table"
-      >
-        <tbody>
-          <tr>
-            <td
-              className="code-view-numbers"
-            >
-              <pre>
-                1
-                
-
-                2
-                
-
-                3
-                
-
-                4
-                
-
-                5
-                
-
-                6
-                
-
-                7
-                
-
-                8
-                
-
-                9
-                
-
-                10
-                
-
-                11
-                
-
-                12
-                
-
-                13
-                
-
-                14
-                
-
-                15
-                
-
-                16
-                
-
-                17
-                
-
-                18
-                
-
-              </pre>
-            </td>
-            <td
-              className="code-view-code"
-            >
-              <pre>
-                &lt;button class="btn btn-primary" type="button" data-dialog-open="demo-dialog"&gt;
-                
-
-                    Open dialog
-                
-
-                &lt;/button&gt;
-                
-
-                &lt;div class="dialog" id="demo-dialog" role="dialog" aria-modal="true" aria-labelledby="aria-label-dia" aria-describedby="aria-describe-dia"&gt;
-                
-
-                    &lt;section&gt;
-                
-
-                        &lt;header class="dialog-header" id="aria-label-dia"&gt;
-                
-
-                            &lt;h4&gt;Delete&lt;/h4&gt;
-                
-
-                            &lt;button type="button" class="dialog-close" aria-label="Close dialog"&gt;&lt;/button&gt;
-                
-
-                        &lt;/header&gt;
-                
-
-                        &lt;div class="dialog-body" id="aria-describe-dia"&gt;
-                
-
-                            &lt;p&gt;You’re about to permanently delete &lt;i&gt;German Swashbuckle (456)?&lt;/i&gt;&lt;/p&gt;
-                
-
-                        &lt;/div&gt;
-                
-
-                        &lt;footer class="dialog-footer"&gt;
-                
-
-                            &lt;button class="btn btn-secondary" type="button" data-dialog-close="true"&gt;Cancel&lt;/button&gt;
-                
-
-                            &lt;button class="btn btn-primary" type="button"&gt;Delete&lt;/button&gt;
-                
-
-                        &lt;/footer&gt;
-                
-
-                    &lt;/section&gt;
-                
-
-                &lt;/div&gt;
-                
-
-              </pre>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </figure>,
-]
-`;
-
 exports[`Documentation: Dialog HowItWorks renders 1`] = `
 Array [
   <h2