@conduction/components 2.2.49 → 2.2.50

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 (13) hide show
  1. package/README.md +5 -0
  2. package/lib/components/card/cardHeader/CardHeader.module.css +3 -1
  3. package/lib/components/card/cardWrapper/CardWrapper.module.css +10 -2
  4. package/lib/components/tabs/Tabs.js +2 -2
  5. package/lib/components/tabs/Tabs.module.css +1 -0
  6. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +7 -0
  7. package/package.json +1 -1
  8. package/src/components/card/cardHeader/CardHeader.module.css +3 -1
  9. package/src/components/card/cardWrapper/CardWrapper.module.css +10 -2
  10. package/src/components/tabs/Tabs.module.css +1 -0
  11. package/src/components/tabs/Tabs.tsx +2 -2
  12. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +7 -0
  13. package/tsconfig.json +4 -1
package/README.md CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.50:
8
+ - Added transition and box-shadow to CardWrapper.
9
+ - Added font-style to CardHeader.
10
+ - Added tabindex and font-weight to Tab.
11
+ - Added border-color, border-style, border-width and transition to PrimaryTopNav.
7
12
  - 2.2.49: Removed Jumbotron component.
8
13
  - 2.2.48: Updated CardHeader and package.json.
9
14
  - 2.2.46 / 2.2.47: Fixed minor css parse error.
package/lib/components/card/cardHeader/CardHeader.module.css CHANGED
@@ -10,13 +10,14 @@
10
10
  --conduction-card-header-date-color: #000000;
11
11
  --conduction-card-header-date-font-size: 16px;
12
12
  --conduction-card-header-date-font-weight: 100;
13
+ /* --conduction-card-header-date-font-style: normal; */
13
14
  --conduction-card-header-date-margin-block-end: 8px;
14
15
  }
15
16
 
16
17
  .container {
17
18
  border-bottom-width: var(--conduction-card-header-border-bottom-width);
18
- border-bottom-style: var(--conduction-card-header-border-bottom-style);
19
19
  border-bottom-color: var(--conduction-card-header-border-bottom-color);
20
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
20
21
  }
21
22
 
22
23
  .container:hover {
@@ -37,5 +38,6 @@
37
38
  color: var(--conduction-card-header-date-color);
38
39
  font-size: var(--conduction-card-header-date-font-size);
39
40
  font-weight: var(--conduction-card-header-date-font-weight);
41
+ font-style: var(--conduction-card-header-date-font-style);
40
42
  margin-block-end: var(--conduction-card-header-date-margin-block-end);
41
43
  }
package/lib/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -3,23 +3,26 @@
3
3
  /* --conduction-card-wrapper-border-width: unset; */
4
4
  /* --conduction-card-wrapper-border-style: unset; */
5
5
  /* --conduction-card-wrapper-border-color: unset; */
6
+ --conduction-card-wrapper-border-radius: 16px;
6
7
  /* --conduction-card-wrapper-border-bottom-width: unset; */
7
8
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
9
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
10
  /* --conduction-card-wrapper-box-shadow: unset; */
11
+ /* --conduction-card-wrapper-hover-background-color: unset; */
10
12
  /* --conduction-card-wrapper-hover-border-width: unset; */
11
13
  /* --conduction-card-wrapper-hover-border-style: unset; */
12
14
  /* --conduction-card-wrapper-hover-border-color: unset; */
15
+ /* --conduction-card-wrapper-hover-border-radius: 16px; */
13
16
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
14
17
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
15
18
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
16
- --conduction-card-wrapper-border-radius: 16px;
19
+ /* --conduction-card-wrapper-hover-box-shadow: unset; */
17
20
  --conduction-card-wrapper-color: #000000;
18
- /* --conduction-card-wrapper-hover-background-color: unset; */
19
21
  --conduction-card-wrapper-padding-inline-end: 18px;
20
22
  --conduction-card-wrapper-padding-inline-start: 18px;
21
23
  --conduction-card-wrapper-padding-block-end: 18px;
22
24
  --conduction-card-wrapper-padding-block-start: 18px;
25
+ /* --conduction-card-wrapper-transition: unset; */
23
26
  }
24
27
 
25
28
  .container {
@@ -28,6 +31,8 @@
28
31
  position: relative;
29
32
  box-shadow: var(--conduction-card-wrapper-box-shadow);
30
33
 
34
+ transition: var(--conduction-card-wrapper-transition);
35
+
31
36
  border-radius: var(--conduction-card-wrapper-border-radius);
32
37
  border-width: var(--conduction-card-wrapper-border-width);
33
38
  border-style: var(--conduction-card-wrapper-border-style);
@@ -47,6 +52,9 @@
47
52
  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
48
53
  cursor: pointer;
49
54
 
55
+ box-shadow: var(--conduction-card-wrapper-hover-box-shadow, var(--conduction-card-wrapper-box-shadow));
56
+
57
+ border-radius: var(--conduction-card-wrapper-hover-border-radius, var(--conduction-card-wrapper-border-radius));
50
58
  border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
51
59
  border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
52
60
  border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
package/lib/components/tabs/Tabs.js CHANGED
@@ -6,7 +6,7 @@ import clsx from "clsx";
6
6
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
7
  import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
8
8
  // Tabs
9
- export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { className: styles.tabs, ...otherProps, children: children }));
9
+ export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { selectedIndex: 0, className: styles.tabs, ...otherProps, children: children }));
10
10
  Tabs.tabsRole = "Tabs";
11
11
  // TabList
12
12
  export const TabList = ({ children, ...otherProps }) => {
@@ -42,7 +42,7 @@ export const TabList = ({ children, ...otherProps }) => {
42
42
  };
43
43
  TabList.tabsRole = "TabList";
44
44
  // Tab
45
- export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { className: styles.tab, ...otherProps, children: children }));
45
+ export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { tabIndex: "0", className: styles.tab, ...otherProps, children: children }));
46
46
  Tab.tabsRole = "Tab";
47
47
  // TabPanel
48
48
  export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
package/lib/components/tabs/Tabs.module.css CHANGED
@@ -167,6 +167,7 @@
167
167
  background-color: var(--conduction-tabs-tab-hover-background-color);
168
168
  color: var(--conduction-tabs-tab-hover-color);
169
169
  text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
170
+ font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
170
171
  }
171
172
 
172
173
  .tabList {
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -77,17 +77,24 @@
77
77
  align-items: center;
78
78
  max-height: 80vh;
79
79
  overflow-y: scroll;
80
+ border-color: var(--conduction-primary-top-nav-list-border-color);
81
+ border-style: var(--conduction-primary-top-nav-list-border-style);
82
+ border-width: var(--conduction-primary-top-nav-list-border-width);
80
83
  }
81
84
 
82
85
  .li {
83
86
  list-style-type: none;
84
87
  display: block;
85
88
  position: relative;
89
+ transition: var(--conduction-primary-top-nav-item-transition);
86
90
  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
87
91
  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
88
92
  padding-block-start: var(--conduction-primary-top-nav-item-padding);
89
93
  padding-block-end: var(--conduction-primary-top-nav-item-padding);
90
94
  border-radius: var(--conduction-primary-top-nav-item-border-radius);
95
+ border-color: var(--conduction-primary-top-nav-item-border-color);
96
+ border-style: var(--conduction-primary-top-nav-item-border-style);
97
+ border-width: var(--conduction-primary-top-nav-item-border-width);
91
98
  }
92
99
 
93
100
  .li:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.49",
3
+ "version": "2.2.50",
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/card/cardHeader/CardHeader.module.css CHANGED
@@ -10,13 +10,14 @@
10
10
  --conduction-card-header-date-color: #000000;
11
11
  --conduction-card-header-date-font-size: 16px;
12
12
  --conduction-card-header-date-font-weight: 100;
13
+ /* --conduction-card-header-date-font-style: normal; */
13
14
  --conduction-card-header-date-margin-block-end: 8px;
14
15
  }
15
16
 
16
17
  .container {
17
18
  border-bottom-width: var(--conduction-card-header-border-bottom-width);
18
- border-bottom-style: var(--conduction-card-header-border-bottom-style);
19
19
  border-bottom-color: var(--conduction-card-header-border-bottom-color);
20
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
20
21
  }
21
22
 
22
23
  .container:hover {
@@ -37,5 +38,6 @@
37
38
  color: var(--conduction-card-header-date-color);
38
39
  font-size: var(--conduction-card-header-date-font-size);
39
40
  font-weight: var(--conduction-card-header-date-font-weight);
41
+ font-style: var(--conduction-card-header-date-font-style);
40
42
  margin-block-end: var(--conduction-card-header-date-margin-block-end);
41
43
  }
package/src/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -3,23 +3,26 @@
3
3
  /* --conduction-card-wrapper-border-width: unset; */
4
4
  /* --conduction-card-wrapper-border-style: unset; */
5
5
  /* --conduction-card-wrapper-border-color: unset; */
6
+ --conduction-card-wrapper-border-radius: 16px;
6
7
  /* --conduction-card-wrapper-border-bottom-width: unset; */
7
8
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
9
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
10
  /* --conduction-card-wrapper-box-shadow: unset; */
11
+ /* --conduction-card-wrapper-hover-background-color: unset; */
10
12
  /* --conduction-card-wrapper-hover-border-width: unset; */
11
13
  /* --conduction-card-wrapper-hover-border-style: unset; */
12
14
  /* --conduction-card-wrapper-hover-border-color: unset; */
15
+ /* --conduction-card-wrapper-hover-border-radius: 16px; */
13
16
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
14
17
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
15
18
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
16
- --conduction-card-wrapper-border-radius: 16px;
19
+ /* --conduction-card-wrapper-hover-box-shadow: unset; */
17
20
  --conduction-card-wrapper-color: #000000;
18
- /* --conduction-card-wrapper-hover-background-color: unset; */
19
21
  --conduction-card-wrapper-padding-inline-end: 18px;
20
22
  --conduction-card-wrapper-padding-inline-start: 18px;
21
23
  --conduction-card-wrapper-padding-block-end: 18px;
22
24
  --conduction-card-wrapper-padding-block-start: 18px;
25
+ /* --conduction-card-wrapper-transition: unset; */
23
26
  }
24
27
 
25
28
  .container {
@@ -28,6 +31,8 @@
28
31
  position: relative;
29
32
  box-shadow: var(--conduction-card-wrapper-box-shadow);
30
33
 
34
+ transition: var(--conduction-card-wrapper-transition);
35
+
31
36
  border-radius: var(--conduction-card-wrapper-border-radius);
32
37
  border-width: var(--conduction-card-wrapper-border-width);
33
38
  border-style: var(--conduction-card-wrapper-border-style);
@@ -47,6 +52,9 @@
47
52
  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
48
53
  cursor: pointer;
49
54
 
55
+ box-shadow: var(--conduction-card-wrapper-hover-box-shadow, var(--conduction-card-wrapper-box-shadow));
56
+
57
+ border-radius: var(--conduction-card-wrapper-hover-border-radius, var(--conduction-card-wrapper-border-radius));
50
58
  border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
51
59
  border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
52
60
  border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
package/src/components/tabs/Tabs.module.css CHANGED
@@ -167,6 +167,7 @@
167
167
  background-color: var(--conduction-tabs-tab-hover-background-color);
168
168
  color: var(--conduction-tabs-tab-hover-color);
169
169
  text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
170
+ font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
170
171
  }
171
172
 
172
173
  .tabList {
package/src/components/tabs/Tabs.tsx CHANGED
@@ -17,7 +17,7 @@ import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons
17
17
 
18
18
  // Tabs
19
19
  export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...otherProps }) => (
20
- <RTabs className={styles.tabs} {...otherProps}>
20
+ <RTabs selectedIndex={0} className={styles.tabs} {...otherProps}>
21
21
  {children}
22
22
  </RTabs>
23
23
  );
@@ -102,7 +102,7 @@ TabList.tabsRole = "TabList";
102
102
 
103
103
  // Tab
104
104
  export const Tab: ReactTabsFunctionComponent<TabProps> = ({ children, ...otherProps }) => (
105
- <RTab className={styles.tab} {...otherProps}>
105
+ <RTab tabIndex="0" className={styles.tab} {...otherProps}>
106
106
  {children}
107
107
  </RTab>
108
108
  );
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -77,17 +77,24 @@
77
77
  align-items: center;
78
78
  max-height: 80vh;
79
79
  overflow-y: scroll;
80
+ border-color: var(--conduction-primary-top-nav-list-border-color);
81
+ border-style: var(--conduction-primary-top-nav-list-border-style);
82
+ border-width: var(--conduction-primary-top-nav-list-border-width);
80
83
  }
81
84
 
82
85
  .li {
83
86
  list-style-type: none;
84
87
  display: block;
85
88
  position: relative;
89
+ transition: var(--conduction-primary-top-nav-item-transition);
86
90
  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
87
91
  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
88
92
  padding-block-start: var(--conduction-primary-top-nav-item-padding);
89
93
  padding-block-end: var(--conduction-primary-top-nav-item-padding);
90
94
  border-radius: var(--conduction-primary-top-nav-item-border-radius);
95
+ border-color: var(--conduction-primary-top-nav-item-border-color);
96
+ border-style: var(--conduction-primary-top-nav-item-border-style);
97
+ border-width: var(--conduction-primary-top-nav-item-border-width);
91
98
  }
92
99
 
93
100
  .li:hover {
package/tsconfig.json CHANGED
@@ -14,5 +14,8 @@
14
14
  },
15
15
  "hooks": ["copy-files"],
16
16
  "include": ["src", "src/**/*.css"],
17
- "exclude": ["**/__tests__/*"]
17
+ "exclude": [
18
+ "**/__tests__/*",
19
+ "./lib/**/*"
20
+ ]
18
21
  }