@conduction/components 2.2.7 → 2.2.9

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 (11) hide show
  1. package/README.md +4 -0
  2. package/lib/components/Pagination/Pagination.module.css +17 -10
  3. package/lib/components/tabs/Tabs.js +1 -1
  4. package/lib/components/tabs/Tabs.module.css +14 -12
  5. package/lib/index.d.ts +2 -2
  6. package/lib/index.js +2 -2
  7. package/package.json +1 -1
  8. package/src/components/Pagination/Pagination.module.css +17 -10
  9. package/src/components/tabs/Tabs.module.css +14 -12
  10. package/src/components/tabs/Tabs.tsx +4 -1
  11. package/src/index.ts +16 -2
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.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.
8
+ - 2.2.8:
9
+ - Updated Pagination to show current page.
10
+ - Updated Tabs component to have correct border-bottom length.
7
11
  - 2.2.7: Updated TableWrapper component and updated Tabs component.
8
12
  - 2.2.6: Added TableWrapper component and updated Tabs component.
9
13
  - 2.2.5: Updated Tabs component.
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -59,9 +59,25 @@
59
59
  user-select: none;
60
60
  }
61
61
 
62
- .container > li:not(.previous):not(.next) > a {
62
+ .container > li.currentPage > a {
63
+ color: var(--conduction-pagination-current-page-color);
64
+ background-color: var(--conduction-pagination-current-page-background-color);
65
+ border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
66
+ border-radius: var(--conduction-pagination-item-border-radius);
67
+ padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
68
+ padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
69
+ padding-block-start: var(--conduction-pagination-item-padding-block-start);
70
+ padding-block-end: var(--conduction-pagination-item-padding-block-end);
71
+ font-size: var(--conduction-pagination-item-font-size);
72
+ font-weight: var(--conduction-pagination-current-page-font-weight);
73
+ font-family: var(--conduction-pagination-item-font-family);
74
+ text-decoration: var(--conduction-pagination-current-page-text-decoration);
75
+ }
76
+
77
+ .container > li:not(.previous):not(.next):not(.currentPage) > a {
63
78
  color: var(--conduction-pagination-item-color);
64
79
  background-color: var(--conduction-pagination-item-background-color);
80
+ border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
65
81
  border-radius: var(--conduction-pagination-item-border-radius);
66
82
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
67
83
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -70,21 +86,12 @@
70
86
  font-size: var(--conduction-pagination-item-font-size);
71
87
  font-weight: var(--conduction-pagination-item-font-weight);
72
88
  font-family: var(--conduction-pagination-item-font-family);
73
- border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
74
89
  }
75
90
 
76
91
  .button {
77
92
  pointer-events: none;
78
93
  }
79
94
 
80
- .container > li.currentPage > a {
81
- color: var(--conduction-pagination-current-page-color);
82
- background-color: var(--conduction-pagination-current-page-background-color);
83
- font-weight: var(--conduction-pagination-current-page-font-weight);
84
- text-decoration: var(--conduction-pagination-current-page-text-decoration);
85
- border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
86
- }
87
-
88
95
  .disabled:hover,
89
96
  .currentPage:hover {
90
97
  cursor: not-allowed;
package/lib/components/tabs/Tabs.js CHANGED
@@ -32,7 +32,7 @@ export const TabList = ({ children, ...otherProps }) => {
32
32
  setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
33
33
  }
34
34
  }, []);
35
- return (_jsx("div", { className: styles.container, children: _jsx("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(styles.wrapper), children: _jsxs("div", { className: styles.tabListContainer, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), _jsx(RTabList, { className: styles.tabList, ...otherProps, children: children }), canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: clsx(canScrollRight && styles.scrollRightButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }) }));
35
+ return (_jsx("div", { className: styles.container, children: _jsx("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(styles.wrapper), children: _jsxs("div", { className: styles.tabListContainer, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), _jsx(RTabList, { className: clsx(canScrollRight || canScrollLeft ? styles.tabListOverflow : styles.tabList), ...otherProps, children: children }), canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: clsx(canScrollRight && styles.scrollRightButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }) }));
36
36
  };
37
37
  TabList.tabsRole = "TabList";
38
38
  // Tab
package/lib/components/tabs/Tabs.module.css CHANGED
@@ -111,18 +111,9 @@
111
111
  text-align: center;
112
112
  white-space: normal;
113
113
 
114
- border-width: var(
115
- --conduction-tabs-scroll-button-border-width,
116
- var(--conduction-tabs-tab-border-width)
117
- );
118
- border-style: var(
119
- --conduction-tabs-scroll-button-border-style,
120
- var(--conduction-tabs-tab-border-style)
121
- );
122
- border-color: var(
123
- --conduction-tabs-scroll-button-border-color,
124
- var(--conduction-tabs-tab-border-color)
125
- );
114
+ border-width: var(--conduction-tabs-scroll-button-border-width, var(--conduction-tabs-tab-border-width));
115
+ border-style: var(--conduction-tabs-scroll-button-border-style, var(--conduction-tabs-tab-border-style));
116
+ border-color: var(--conduction-tabs-scroll-button-border-color, var(--conduction-tabs-tab-border-color));
126
117
  background-color: var(--conduction-tabs-scroll-button-background-color);
127
118
  color: var(--conduction-tabs-tab-button-color);
128
119
  bottom: var(--conduction-tabs-tab-bottom);
@@ -179,6 +170,16 @@
179
170
  }
180
171
 
181
172
  .tabList {
173
+ display: flex;
174
+ padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
175
+ margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
176
+ border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
177
+ border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
178
+ border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
179
+ width: auto;
180
+ }
181
+
182
+ .tabListOverflow {
182
183
  display: flex;
183
184
  padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
184
185
  margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
@@ -187,6 +188,7 @@
187
188
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
188
189
  width: max-content;
189
190
  }
191
+
190
192
  .tabList :not(:last-child) {
191
193
  margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
192
194
  }
package/lib/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard } from "./components/card";
2
+ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate } from "./components/card";
3
3
  import { Container } from "./components/container/Container";
4
4
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
5
5
  import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
@@ -24,4 +24,4 @@ import { ToolTip } from "./components/toolTip/ToolTip";
24
24
  import { Pagination } from "./components/Pagination/Pagination";
25
25
  import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
26
26
  import { TableWrapper } from "./components/tableWrapper/TableWrapper";
27
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, Tabs, TabList, Tab, TabPanel, TableWrapper };
27
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, TableWrapper, };
package/lib/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard } from "./components/card";
1
+ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, } from "./components/card";
2
2
  import { Container } from "./components/container/Container";
3
3
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
4
4
  import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
@@ -17,4 +17,4 @@ import { ToolTip } from "./components/toolTip/ToolTip";
17
17
  import { Pagination } from "./components/Pagination/Pagination";
18
18
  import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
19
19
  import { TableWrapper } from "./components/tableWrapper/TableWrapper";
20
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, Tabs, TabList, Tab, TabPanel, TableWrapper };
20
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, TableWrapper, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.7",
3
+ "version": "2.2.9",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/Pagination/Pagination.module.css CHANGED
@@ -59,9 +59,25 @@
59
59
  user-select: none;
60
60
  }
61
61
 
62
- .container > li:not(.previous):not(.next) > a {
62
+ .container > li.currentPage > a {
63
+ color: var(--conduction-pagination-current-page-color);
64
+ background-color: var(--conduction-pagination-current-page-background-color);
65
+ border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
66
+ border-radius: var(--conduction-pagination-item-border-radius);
67
+ padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
68
+ padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
69
+ padding-block-start: var(--conduction-pagination-item-padding-block-start);
70
+ padding-block-end: var(--conduction-pagination-item-padding-block-end);
71
+ font-size: var(--conduction-pagination-item-font-size);
72
+ font-weight: var(--conduction-pagination-current-page-font-weight);
73
+ font-family: var(--conduction-pagination-item-font-family);
74
+ text-decoration: var(--conduction-pagination-current-page-text-decoration);
75
+ }
76
+
77
+ .container > li:not(.previous):not(.next):not(.currentPage) > a {
63
78
  color: var(--conduction-pagination-item-color);
64
79
  background-color: var(--conduction-pagination-item-background-color);
80
+ border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
65
81
  border-radius: var(--conduction-pagination-item-border-radius);
66
82
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
67
83
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -70,21 +86,12 @@
70
86
  font-size: var(--conduction-pagination-item-font-size);
71
87
  font-weight: var(--conduction-pagination-item-font-weight);
72
88
  font-family: var(--conduction-pagination-item-font-family);
73
- border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
74
89
  }
75
90
 
76
91
  .button {
77
92
  pointer-events: none;
78
93
  }
79
94
 
80
- .container > li.currentPage > a {
81
- color: var(--conduction-pagination-current-page-color);
82
- background-color: var(--conduction-pagination-current-page-background-color);
83
- font-weight: var(--conduction-pagination-current-page-font-weight);
84
- text-decoration: var(--conduction-pagination-current-page-text-decoration);
85
- border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
86
- }
87
-
88
95
  .disabled:hover,
89
96
  .currentPage:hover {
90
97
  cursor: not-allowed;
package/src/components/tabs/Tabs.module.css CHANGED
@@ -111,18 +111,9 @@
111
111
  text-align: center;
112
112
  white-space: normal;
113
113
 
114
- border-width: var(
115
- --conduction-tabs-scroll-button-border-width,
116
- var(--conduction-tabs-tab-border-width)
117
- );
118
- border-style: var(
119
- --conduction-tabs-scroll-button-border-style,
120
- var(--conduction-tabs-tab-border-style)
121
- );
122
- border-color: var(
123
- --conduction-tabs-scroll-button-border-color,
124
- var(--conduction-tabs-tab-border-color)
125
- );
114
+ border-width: var(--conduction-tabs-scroll-button-border-width, var(--conduction-tabs-tab-border-width));
115
+ border-style: var(--conduction-tabs-scroll-button-border-style, var(--conduction-tabs-tab-border-style));
116
+ border-color: var(--conduction-tabs-scroll-button-border-color, var(--conduction-tabs-tab-border-color));
126
117
  background-color: var(--conduction-tabs-scroll-button-background-color);
127
118
  color: var(--conduction-tabs-tab-button-color);
128
119
  bottom: var(--conduction-tabs-tab-bottom);
@@ -179,6 +170,16 @@
179
170
  }
180
171
 
181
172
  .tabList {
173
+ display: flex;
174
+ padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
175
+ margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
176
+ border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
177
+ border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
178
+ border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
179
+ width: auto;
180
+ }
181
+
182
+ .tabListOverflow {
182
183
  display: flex;
183
184
  padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
184
185
  margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
@@ -187,6 +188,7 @@
187
188
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
188
189
  width: max-content;
189
190
  }
191
+
190
192
  .tabList :not(:last-child) {
191
193
  margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
192
194
  }
package/src/components/tabs/Tabs.tsx CHANGED
@@ -68,7 +68,10 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
68
68
  </span>
69
69
  </div>
70
70
  )}
71
- <RTabList className={styles.tabList} {...otherProps}>
71
+ <RTabList
72
+ className={clsx(canScrollRight || canScrollLeft ? styles.tabListOverflow : styles.tabList)}
73
+ {...otherProps}
74
+ >
72
75
  {children}
73
76
  </RTabList>
74
77
  {canScrollRight && (
package/src/index.ts CHANGED
@@ -1,4 +1,14 @@
1
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard } from "./components/card";
1
+ import {
2
+ DownloadCard,
3
+ HorizontalImageCard,
4
+ ImageAndDetailsCard,
5
+ DetailsCard,
6
+ InfoCard,
7
+ CardWrapper,
8
+ CardHeader,
9
+ CardHeaderTitle,
10
+ CardHeaderDate,
11
+ } from "./components/card";
2
12
  import { Container } from "./components/container/Container";
3
13
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
4
14
  import {
@@ -64,9 +74,13 @@ export {
64
74
  BadgeCounter,
65
75
  CodeBlock,
66
76
  ToolTip,
77
+ CardWrapper,
78
+ CardHeader,
79
+ CardHeaderTitle,
80
+ CardHeaderDate,
67
81
  Tabs,
68
82
  TabList,
69
83
  Tab,
70
84
  TabPanel,
71
- TableWrapper
85
+ TableWrapper,
72
86
  };