Merge branch 'dev' of https://github.com/uzh-bf/design-system into We…

…bComponents # Conflicts: # package-lock.json # package.json
uzh-bf · Jan 21, 2024 · 6ed51f6 · 6ed51f6
2 parents c3bb2e5 + b210f64
commit 6ed51f6
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 8 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,18 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        with:
+          release-type: node
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.4.7](https://github.com/uzh-bf/design-system/compare/v2.4.6...v2.4.7) (2023-12-21)
+
+
+### Bug Fixes
+
+* **Select:** ensure that options receive correct data testing attributes ([ce8401c](https://github.com/uzh-bf/design-system/commit/ce8401c1de42c730a5d77ab493bb6be55b15a49b))
+
+### [2.4.6](https://github.com/uzh-bf/design-system/compare/v2.4.5...v2.4.6) (2023-12-01)
+
+
+### Other
+
+* **Modal:** add close, next and previous data attributes ([6d28ae1](https://github.com/uzh-bf/design-system/commit/6d28ae16c7e04947cc2327a69998f43333929c7f))
+
+### [2.4.5](https://github.com/uzh-bf/design-system/compare/v2.4.4...v2.4.5) (2023-12-01)
+
+
+### Other
+
+* **Modal:** add more testing data attributes ([e5870d4](https://github.com/uzh-bf/design-system/commit/e5870d430c3dc44457438929838cb7e83d384b65))
+
+### [2.4.4](https://github.com/uzh-bf/design-system/compare/v2.4.3...v2.4.4) (2023-12-01)
+
+
+### Bug Fixes
+
+* **ColorPicker:** prevent submit propagation of color picker change form ([c400a59](https://github.com/uzh-bf/design-system/commit/c400a59c89e9022fc0d2e4940b6b9b3df90f39c2))
+
 ### [2.4.3](https://github.com/uzh-bf/design-system/compare/v2.4.2...v2.4.3) (2023-11-06)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@uzh-bf/design-system-monorepo",
-  "version": "2.4.3",
+  "version": "2.4.7",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/uzh-bf/design-system.git"

diff --git a/packages/design-system/src/ColorPicker.tsx b/packages/design-system/src/ColorPicker.tsx
@@ -151,7 +151,9 @@ export function ColorPicker({
                 ),
               }}
               type="submit"
-              onClick={() => {
+              onClick={(e) => {
+                e?.preventDefault()
+                e?.stopPropagation()
                 onSubmit(newColor)
                 setColorPickerOpen(false)
               }}

diff --git a/packages/design-system/src/Modal.tsx b/packages/design-system/src/Modal.tsx
@@ -15,6 +15,26 @@ export interface ModalProps {
     cy?: string
     test?: string
   }
+  dataOverlay?: {
+    cy?: string
+    test?: string
+  }
+  dataContent?: {
+    cy?: string
+    test?: string
+  }
+  dataCloseButton?: {
+    cy?: string
+    test?: string
+  }
+  dataNextButton?: {
+    cy?: string
+    test?: string
+  }
+  dataPrevButton?: {
+    cy?: string
+    test?: string
+  }
   className?: {
     overlayOverride?: string
     contentOverride?: string
@@ -47,6 +67,11 @@ export interface ModalProps {
  *
  * @param id - The id of the modal.
  * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
+ * @param dataOverlay - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the overlay
+ * @param dataContent - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the content
+ * @param dataCloseButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the close button
+ * @param dataNextButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the next button
+ * @param dataPrevButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the previous button
  * @param trigger - The optional trigger that opens the modal, if the state is not managed by some parent component already.
  * @param title - The optional title of the modal.
  * @param children - The content of the modal.
@@ -67,6 +92,11 @@ export interface ModalProps {
 export function Modal({
   id,
   data,
+  dataOverlay,
+  dataContent,
+  dataCloseButton,
+  dataNextButton,
+  dataPrevButton,
   trigger,
   title = '',
   children,
@@ -105,12 +135,15 @@ export function Modal({
         'fixed bottom-0 left-0 right-0 top-0 z-20 flex justify-center gap-4 bg-uzh-grey-100 bg-opacity-50 p-4 md:items-center',
         className?.overlay
       )}
+      data-cy={dataOverlay?.cy}
+      data-test={dataOverlay?.test}
     >
       {(onPrev || onNext) && (
         <Button
           className={{ root: twMerge('lg:text-xl', className?.onPrev) }}
           disabled={!onPrev}
           onClick={onPrev}
+          data={dataPrevButton}
         >
           <FontAwesomeIcon icon={faChevronLeft} />
         </Button>
@@ -129,6 +162,8 @@ export function Modal({
         onPointerDownOutside={
           onPrev || onNext || escapeDisabled ? undefined : onClose
         }
+        data-cy={dataContent?.cy}
+        data-test={dataContent?.test}
       >
         <div className="flex flex-initial flex-row items-end justify-between">
           <div>
@@ -146,7 +181,11 @@ export function Modal({
 
           {!hideCloseButton && (
             <RadixDialog.Close asChild>
-              <Button onClick={onClose} className={{ root: 'self-start' }}>
+              <Button
+                onClick={onClose}
+                className={{ root: 'self-start' }}
+                data={dataCloseButton}
+              >
                 <FontAwesomeIcon icon={faXmark} className="lg:text-xl" />
               </Button>
             </RadixDialog.Close>
@@ -166,6 +205,7 @@ export function Modal({
           className={{ root: twMerge('lg:text-xl', className?.onNext) }}
           disabled={!onNext}
           onClick={onNext}
+          data={dataNextButton}
         >
           <FontAwesomeIcon icon={faChevronRight} />
         </Button>

diff --git a/packages/design-system/src/Select.tsx b/packages/design-system/src/Select.tsx
@@ -136,8 +136,7 @@ export function Select({
           ? items.map((item, ix) => (
               <SelectItem
                 id={id}
-                data-cy={data?.cy}
-                data-test={data?.test}
+                data={item.data}
                 key={ix}
                 size={size}
                 {...item}
@@ -317,7 +316,13 @@ const SelectGroup = ({
           {label}
         </RadixSelect.Label>
         {items.map((item, ix) => (
-          <SelectItem key={ix} size={size} {...item} className={className} />
+          <SelectItem
+            key={ix}
+            size={size}
+            data={item.data}
+            {...item}
+            className={className}
+          />
         ))}
       </RadixSelect.Group>
     </>