@conduction/components 2.2.24 → 2.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.github/workflows/opencatalogi_workflow +21 -0
  2. package/README.md +4 -0
  3. package/lib/components/card/cardWrapper/CardWrapper.module.css +2 -0
  4. package/lib/components/notificationPopUp/NotificationPopUp.d.ts +3 -2
  5. package/lib/components/notificationPopUp/NotificationPopUp.js +3 -1
  6. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +2 -2
  7. package/package.json +2 -2
  8. package/src/components/card/cardWrapper/CardWrapper.module.css +2 -0
  9. package/src/components/notificationPopUp/NotificationPopUp.tsx +11 -4
  10. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +2 -2
package/.github/workflows/opencatalogi_workflow ADDED
@@ -0,0 +1,21 @@
1
+ name: Mijn Open Catalogi Workflow
2
+
3
+ on:
4
+ workflow_dispatch:
5
+ push:
6
+ branches:
7
+ - main
8
+
9
+ permissions:
10
+ contents: write
11
+
12
+ jobs:
13
+ build:
14
+ runs-on: ubuntu-latest
15
+ steps:
16
+ - name: Create or Update publiccode.yaml
17
+ uses: OpenCatalogi/publiccode-action@1.1.1
18
+ with:
19
+ opencatalogi: true
20
+ - name: Create een Productpagina
21
+ uses: OpenCatalogi/productpage-action@1.0.0
package/README.md CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.26: Updated NotificationPopUp secondary button to have hover and href.
8
+ - 2.2.25:
9
+ - Added box-shadow to CardWrapper.
10
+ - Added item border-radius to PrimaryTopNav.
7
11
  - 2.2.24:
8
12
  - Added DisplaySwitch component.
9
13
  - Removed align hover state on card-header.
package/lib/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -6,6 +6,7 @@
6
6
  /* --conduction-card-wrapper-border-bottom-width: unset; */
7
7
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
8
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
+ /* --conduction-card-wrapper-box-shadow: unset; */
9
10
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
10
11
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
11
12
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
@@ -34,6 +35,7 @@
34
35
  var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
35
36
  var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
36
37
  position: relative;
38
+ box-shadow: var(--conduction-card-wrapper-box-shadow);
37
39
  }
38
40
 
39
41
  .container:hover {
package/lib/components/notificationPopUp/NotificationPopUp.d.ts CHANGED
@@ -6,14 +6,15 @@ export interface NotificationPopUpProps {
6
6
  hide: () => void;
7
7
  primaryButton: {
8
8
  label: string;
9
- icon?: JSX.Element;
10
9
  handleClick: () => any;
10
+ icon?: JSX.Element;
11
11
  layoutClassName?: string;
12
12
  };
13
13
  secondaryButton?: {
14
14
  label: string;
15
- icon?: JSX.Element;
16
15
  handleClick: () => any;
16
+ href: string;
17
+ icon?: JSX.Element;
17
18
  layoutClassName?: string;
18
19
  };
19
20
  layoutClassName?: string;
package/lib/components/notificationPopUp/NotificationPopUp.js CHANGED
@@ -17,7 +17,9 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
17
17
  setAnimationVisible(true);
18
18
  }, animationDuration);
19
19
  };
20
- const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), className: secondaryButton.layoutClassName, children: _jsxs(Link, { className: styles.link, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
20
+ const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { className: secondaryButton.layoutClassName, children: _jsxs(Link, { onClick: (e) => {
21
+ e.preventDefault(), handleClick(secondaryButton.handleClick);
22
+ }, className: styles.link, href: secondaryButton.href, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
21
23
  return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
22
24
  };
23
25
  export const NotificationPopUpController = () => {
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -6,8 +6,7 @@
6
6
 
7
7
  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
8
8
  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
-
10
- /* --conduction-primary-top-nav- */
9
+ /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
11
10
 
12
11
  /* --conduction-primary-top-nav-current-background-color: #ffffff; */
13
12
  /* --conduction-primary-top-nav-current-color: #4376fc; */
@@ -88,6 +87,7 @@
88
87
  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
89
88
  padding-block-start: var(--conduction-primary-top-nav-item-padding);
90
89
  padding-block-end: var(--conduction-primary-top-nav-item-padding);
90
+ border-radius: var(--conduction-primary-top-nav-item-border-radius);
91
91
  }
92
92
 
93
93
  .li:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.24",
3
+ "version": "2.2.26",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -23,7 +23,7 @@
23
23
  "@fortawesome/fontawesome-svg-core": "^6.2.0",
24
24
  "@fortawesome/free-solid-svg-icons": "^6.2.0",
25
25
  "@fortawesome/react-fontawesome": "^0.2.0",
26
- "@utrecht/component-library-react": "^1.0.0-alpha.319",
26
+ "@utrecht/component-library-react": "1.0.0-alpha.394",
27
27
  "clsx": "^1.1.1",
28
28
  "gatsby": "^4.11.1",
29
29
  "react": "^18.2.0",
package/src/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -6,6 +6,7 @@
6
6
  /* --conduction-card-wrapper-border-bottom-width: unset; */
7
7
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
8
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
+ /* --conduction-card-wrapper-box-shadow: unset; */
9
10
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
10
11
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
11
12
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
@@ -34,6 +35,7 @@
34
35
  var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
35
36
  var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
36
37
  position: relative;
38
+ box-shadow: var(--conduction-card-wrapper-box-shadow);
37
39
  }
38
40
 
39
41
  .container:hover {
package/src/components/notificationPopUp/NotificationPopUp.tsx CHANGED
@@ -13,14 +13,15 @@ export interface NotificationPopUpProps {
13
13
  hide: () => void;
14
14
  primaryButton: {
15
15
  label: string;
16
- icon?: JSX.Element;
17
16
  handleClick: () => any;
17
+ icon?: JSX.Element;
18
18
  layoutClassName?: string;
19
19
  };
20
20
  secondaryButton?: {
21
21
  label: string;
22
- icon?: JSX.Element;
23
22
  handleClick: () => any;
23
+ href: string;
24
+ icon?: JSX.Element;
24
25
  layoutClassName?: string;
25
26
  };
26
27
  layoutClassName?: string;
@@ -59,8 +60,14 @@ export const NotificationPopUp = ({
59
60
 
60
61
  <div className={styles.buttons}>
61
62
  {secondaryButton && (
62
- <div onClick={() => handleClick(secondaryButton.handleClick)} className={secondaryButton.layoutClassName}>
63
- <Link className={styles.link}>
63
+ <div className={secondaryButton.layoutClassName}>
64
+ <Link
65
+ onClick={(e) => {
66
+ e.preventDefault(), handleClick(secondaryButton.handleClick);
67
+ }}
68
+ className={styles.link}
69
+ href={secondaryButton.href}
70
+ >
64
71
  {secondaryButton.icon ?? <FontAwesomeIcon icon={faClose} />}
65
72
  {secondaryButton.label}
66
73
  </Link>
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -6,8 +6,7 @@
6
6
 
7
7
  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
8
8
  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
-
10
- /* --conduction-primary-top-nav- */
9
+ /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
11
10
 
12
11
  /* --conduction-primary-top-nav-current-background-color: #ffffff; */
13
12
  /* --conduction-primary-top-nav-current-color: #4376fc; */
@@ -88,6 +87,7 @@
88
87
  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
89
88
  padding-block-start: var(--conduction-primary-top-nav-item-padding);
90
89
  padding-block-end: var(--conduction-primary-top-nav-item-padding);
90
+ border-radius: var(--conduction-primary-top-nav-item-border-radius);
91
91
  }
92
92
 
93
93
  .li:hover {