@conduction/components 2.2.6 → 2.2.7

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 (8) hide show
  1. package/README.md +1 -0
  2. package/lib/components/tableWrapper/TableWrapper.module.css +6 -0
  3. package/lib/components/tabs/Tabs.js +1 -1
  4. package/lib/components/tabs/Tabs.module.css +34 -12
  5. package/package.json +1 -1
  6. package/src/components/tableWrapper/TableWrapper.module.css +6 -0
  7. package/src/components/tabs/Tabs.module.css +34 -12
  8. package/src/components/tabs/Tabs.tsx +20 -22
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.7: Updated TableWrapper component and updated Tabs component.
7
8
  - 2.2.6: Added TableWrapper component and updated Tabs component.
8
9
  - 2.2.5: Updated Tabs component.
9
10
  - 2.2.4: Refactor the Tooltip component to include react-tooltip version 5+.
package/lib/components/tableWrapper/TableWrapper.module.css CHANGED
@@ -5,6 +5,9 @@
5
5
  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
6
6
  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
7
7
  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
8
+ /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
9
+ /* --conduction-table-wrapper-scroll-button-border-color: solid; */
10
+ /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
8
11
 
9
12
  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
10
13
  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
@@ -32,6 +35,9 @@
32
35
  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
33
36
  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
34
37
  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
38
+ border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
39
+ border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
40
+ border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
35
41
  }
36
42
 
37
43
  .scrollLeftButton:hover,
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: _jsx("div", { className: styles.tabListContainer, children: _jsxs(RTabList, { className: styles.tabList, ...otherProps, children: [canScrollLeft && (_jsx(RTab, { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx(RTab, { 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: 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
@@ -21,10 +21,13 @@
21
21
  /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
22
22
  /* --conduction-tabs-tab-text-transform: uppercase; */
23
23
 
24
- --conduction-tabs-scrollButton-background-color: #ffffff;
25
- --conduction-tabs-scrollButton-color: #4a4a4a;
26
- --conduction-tabs-scrollButton-hover-background-color: #ffffff;
27
- --conduction-tabs-scrollButton-hover-color: #4376fc;
24
+ --conduction-tabs-scroll-button-background-color: #ffffff;
25
+ --conduction-tabs-scroll-button-color: #4a4a4a;
26
+ --conduction-tabs-scroll-button-hover-background-color: #ffffff;
27
+ --conduction-tabs-scroll-button-hover-color: #4376fc;
28
+ /* --conduction-tabs-scroll-button-border-width: 1px; */
29
+ /* --conduction-tabs-scroll-button-border-style: solid; */
30
+ /* --conduction-tabs-scroll-button-border-color: #4376fc; */
28
31
 
29
32
  --conduction-tabs-tab-selected-background-color: #ffffff;
30
33
  --conduction-tabs-tab-selected-color: #4a4a4a;
@@ -88,13 +91,13 @@
88
91
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
89
92
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
90
93
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
91
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
92
94
  font-size: var(--conduction-tabs-tab-font-size);
93
95
  font-weight: var(--conduction-tabs-tab-font-weight);
94
96
  font-family: var(--conduction-tabs-tab-font-family);
95
97
  min-height: var(--conduction-tabs-tab-min-height);
96
98
  letter-spacing: var(--conduction-tabs-tab-letter-spacing);
97
99
  text-transform: var(--conduction-tabs-tab-text-transform);
100
+ flex-shrink: 0;
98
101
  }
99
102
 
100
103
  .tabButton {
@@ -108,14 +111,25 @@
108
111
  text-align: center;
109
112
  white-space: normal;
110
113
 
111
- background-color: var(--conduction-tabs-scrollButton-background-color);
112
- color: var(--conduction-tabs-tabButton-color);
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
+ );
126
+ background-color: var(--conduction-tabs-scroll-button-background-color);
127
+ color: var(--conduction-tabs-tab-button-color);
113
128
  bottom: var(--conduction-tabs-tab-bottom);
114
129
  padding-block-start: var(--conduction-tabs-tab-padding-block-start);
115
130
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
116
131
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
117
132
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
118
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
119
133
  font-size: var(--conduction-tabs-tab-font-size);
120
134
  font-weight: var(--conduction-tabs-tab-font-weight);
121
135
  font-family: var(--conduction-tabs-tab-font-family);
@@ -124,9 +138,13 @@
124
138
  text-transform: var(--conduction-tabs-tab-text-transform);
125
139
  }
126
140
 
141
+ .tabButton:hover {
142
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
143
+ color: var(--conduction-tabs-scroll-button-hover-color);
144
+ }
127
145
  .tabButton:hover > * {
128
- background-color: var(--conduction-tabs-scrollButton-hover-background-color);
129
- color: var(--conduction-tabs-scrollButton-hover-color);
146
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
147
+ color: var(--conduction-tabs-scroll-button-hover-color);
130
148
  }
131
149
 
132
150
  .tabListContainer {
@@ -167,6 +185,10 @@
167
185
  border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
168
186
  border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
169
187
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
188
+ width: max-content;
189
+ }
190
+ .tabList :not(:last-child) {
191
+ margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
170
192
  }
171
193
 
172
194
  /* TabPanel */
@@ -183,8 +205,8 @@
183
205
  }
184
206
 
185
207
  .scrollButton {
186
- background-color: var(--conduction-tabs-scrollButton-background-color);
187
- color: var(--conduction-tabs-scrollButton-color);
208
+ background-color: var(--conduction-tabs-scroll-button-background-color);
209
+ color: var(--conduction-tabs-scroll-button-color);
188
210
  }
189
211
 
190
212
  .container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.6",
3
+ "version": "2.2.7",
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/tableWrapper/TableWrapper.module.css CHANGED
@@ -5,6 +5,9 @@
5
5
  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
6
6
  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
7
7
  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
8
+ /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
9
+ /* --conduction-table-wrapper-scroll-button-border-color: solid; */
10
+ /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
8
11
 
9
12
  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
10
13
  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
@@ -32,6 +35,9 @@
32
35
  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
33
36
  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
34
37
  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
38
+ border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
39
+ border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
40
+ border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
35
41
  }
36
42
 
37
43
  .scrollLeftButton:hover,
package/src/components/tabs/Tabs.module.css CHANGED
@@ -21,10 +21,13 @@
21
21
  /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
22
22
  /* --conduction-tabs-tab-text-transform: uppercase; */
23
23
 
24
- --conduction-tabs-scrollButton-background-color: #ffffff;
25
- --conduction-tabs-scrollButton-color: #4a4a4a;
26
- --conduction-tabs-scrollButton-hover-background-color: #ffffff;
27
- --conduction-tabs-scrollButton-hover-color: #4376fc;
24
+ --conduction-tabs-scroll-button-background-color: #ffffff;
25
+ --conduction-tabs-scroll-button-color: #4a4a4a;
26
+ --conduction-tabs-scroll-button-hover-background-color: #ffffff;
27
+ --conduction-tabs-scroll-button-hover-color: #4376fc;
28
+ /* --conduction-tabs-scroll-button-border-width: 1px; */
29
+ /* --conduction-tabs-scroll-button-border-style: solid; */
30
+ /* --conduction-tabs-scroll-button-border-color: #4376fc; */
28
31
 
29
32
  --conduction-tabs-tab-selected-background-color: #ffffff;
30
33
  --conduction-tabs-tab-selected-color: #4a4a4a;
@@ -88,13 +91,13 @@
88
91
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
89
92
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
90
93
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
91
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
92
94
  font-size: var(--conduction-tabs-tab-font-size);
93
95
  font-weight: var(--conduction-tabs-tab-font-weight);
94
96
  font-family: var(--conduction-tabs-tab-font-family);
95
97
  min-height: var(--conduction-tabs-tab-min-height);
96
98
  letter-spacing: var(--conduction-tabs-tab-letter-spacing);
97
99
  text-transform: var(--conduction-tabs-tab-text-transform);
100
+ flex-shrink: 0;
98
101
  }
99
102
 
100
103
  .tabButton {
@@ -108,14 +111,25 @@
108
111
  text-align: center;
109
112
  white-space: normal;
110
113
 
111
- background-color: var(--conduction-tabs-scrollButton-background-color);
112
- color: var(--conduction-tabs-tabButton-color);
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
+ );
126
+ background-color: var(--conduction-tabs-scroll-button-background-color);
127
+ color: var(--conduction-tabs-tab-button-color);
113
128
  bottom: var(--conduction-tabs-tab-bottom);
114
129
  padding-block-start: var(--conduction-tabs-tab-padding-block-start);
115
130
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
116
131
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
117
132
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
118
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
119
133
  font-size: var(--conduction-tabs-tab-font-size);
120
134
  font-weight: var(--conduction-tabs-tab-font-weight);
121
135
  font-family: var(--conduction-tabs-tab-font-family);
@@ -124,9 +138,13 @@
124
138
  text-transform: var(--conduction-tabs-tab-text-transform);
125
139
  }
126
140
 
141
+ .tabButton:hover {
142
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
143
+ color: var(--conduction-tabs-scroll-button-hover-color);
144
+ }
127
145
  .tabButton:hover > * {
128
- background-color: var(--conduction-tabs-scrollButton-hover-background-color);
129
- color: var(--conduction-tabs-scrollButton-hover-color);
146
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
147
+ color: var(--conduction-tabs-scroll-button-hover-color);
130
148
  }
131
149
 
132
150
  .tabListContainer {
@@ -167,6 +185,10 @@
167
185
  border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
168
186
  border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
169
187
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
188
+ width: max-content;
189
+ }
190
+ .tabList :not(:last-child) {
191
+ margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
170
192
  }
171
193
 
172
194
  /* TabPanel */
@@ -183,8 +205,8 @@
183
205
  }
184
206
 
185
207
  .scrollButton {
186
- background-color: var(--conduction-tabs-scrollButton-background-color);
187
- color: var(--conduction-tabs-scrollButton-color);
208
+ background-color: var(--conduction-tabs-scroll-button-background-color);
209
+ color: var(--conduction-tabs-scroll-button-color);
188
210
  }
189
211
 
190
212
  .container {
package/src/components/tabs/Tabs.tsx CHANGED
@@ -58,31 +58,29 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
58
58
  <div className={styles.container}>
59
59
  <div onScroll={handleScroll} ref={wrapperRef} className={clsx(styles.wrapper)}>
60
60
  <div className={styles.tabListContainer}>
61
+ {canScrollLeft && (
62
+ <div
63
+ onClick={handleScrollLeft}
64
+ className={clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton)}
65
+ >
66
+ <span className={styles.scrollButton}>
67
+ <FontAwesomeIcon icon={faChevronLeft} />
68
+ </span>
69
+ </div>
70
+ )}
61
71
  <RTabList className={styles.tabList} {...otherProps}>
62
- {canScrollLeft && (
63
- <RTab
64
- onClick={handleScrollLeft}
65
- className={clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton)}
66
- >
67
- <span className={styles.scrollButton}>
68
- <FontAwesomeIcon icon={faChevronLeft} />
69
- </span>
70
- </RTab>
71
- )}
72
-
73
72
  {children}
74
-
75
- {canScrollRight && (
76
- <RTab
77
- onClick={handleScrollRight}
78
- className={clsx(canScrollRight && styles.scrollRightButton, styles.tabButton)}
79
- >
80
- <span className={styles.scrollButton}>
81
- <FontAwesomeIcon icon={faChevronRight} />
82
- </span>
83
- </RTab>
84
- )}
85
73
  </RTabList>
74
+ {canScrollRight && (
75
+ <div
76
+ onClick={handleScrollRight}
77
+ className={clsx(canScrollRight && styles.scrollRightButton, styles.tabButton)}
78
+ >
79
+ <span className={styles.scrollButton}>
80
+ <FontAwesomeIcon icon={faChevronRight} />
81
+ </span>
82
+ </div>
83
+ )}
86
84
  </div>
87
85
  </div>
88
86
  </div>