@conduction/components 2.2.17 → 2.2.19

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 (33) hide show
  1. package/README.md +6 -0
  2. package/lib/components/Pagination/Pagination.module.css +1 -1
  3. package/lib/components/card/richContentCard/RichContentCard.js +7 -7
  4. package/lib/components/card/richContentCard/RichContentCard.module.css +93 -103
  5. package/lib/components/formFields/select/select.js +28 -64
  6. package/lib/components/formFields/select/select.module.css +5 -0
  7. package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.d.ts +10 -0
  8. package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.js +36 -0
  9. package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css +41 -0
  10. package/lib/components/tabs/Tabs.js +8 -2
  11. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +9 -7
  12. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +12 -23
  13. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +10 -5
  14. package/lib/index.d.ts +2 -2
  15. package/lib/index.js +2 -2
  16. package/package.json +1 -1
  17. package/src/components/Pagination/Pagination.module.css +1 -1
  18. package/src/components/formFields/select/select.module.css +5 -0
  19. package/src/components/formFields/select/select.tsx +28 -64
  20. package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css +41 -0
  21. package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx +80 -0
  22. package/src/components/tabs/Tabs.tsx +10 -2
  23. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +10 -5
  24. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +29 -45
  25. package/src/index.ts +2 -2
  26. package/tsconfig.json +5 -16
  27. package/lib/components/tableWrapper/TableWrapper.d.ts +0 -4
  28. package/lib/components/tableWrapper/TableWrapper.js +0 -30
  29. package/lib/components/tableWrapper/TableWrapper.module.css +0 -67
  30. package/lib/components/temp/Temp.d.ts +0 -5
  31. package/lib/components/temp/Temp.js +0 -14
  32. package/src/components/tableWrapper/TableWrapper.module.css +0 -67
  33. package/src/components/tableWrapper/TableWrapper.tsx +0 -56
package/src/components/tableWrapper/TableWrapper.module.css DELETED
@@ -1,67 +0,0 @@
1
- :root {
2
- --conduction-table-wrapper-scroll-button-background-color: #ffffff;
3
- --conduction-table-wrapper-scroll-button-color: #000000;
4
- --conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
5
- --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
6
- /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
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; */
11
-
12
- --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
13
- --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
14
- }
15
- .container {
16
- position: relative;
17
- }
18
-
19
- .wrapper,
20
- .wrapperTouchscreen {
21
- overflow-x: scroll;
22
- }
23
-
24
- .scrollRightButton,
25
- .scrollLeftButton {
26
- top: 0%;
27
- position: absolute;
28
- display: flex;
29
- height: 100%;
30
- background-color: var(--conduction-table-wrapper-scroll-button-background-color);
31
- color: var(--conduction-table-wrapper-scroll-button-color);
32
- padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
33
- padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
34
- padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
35
- padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
36
- border-width: var(--conduction-table-wrapper-scroll-button-border-width);
37
- border-style: var(--conduction-table-wrapper-scroll-button-border-style);
38
- border-color: var(--conduction-table-wrapper-scroll-button-border-color);
39
- }
40
-
41
- .scrollLeftButton:hover,
42
- .scrollRightButton:hover {
43
- background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
44
- color: var(--conduction-table-wrapper-scroll-button-hover-color);
45
- cursor: pointer;
46
- }
47
-
48
- .scrollRightButton {
49
- right: 0;
50
- }
51
-
52
- .scrollLeftButton {
53
- left: 0;
54
- }
55
-
56
- .scrollButton {
57
- align-self: center;
58
- }
59
-
60
- /* Hide scrollbar */
61
- .wrapper::-webkit-scrollbar {
62
- display: none;
63
- }
64
- .wrapper {
65
- -ms-overflow-style: none;
66
- scrollbar-width: none;
67
- }
package/src/components/tableWrapper/TableWrapper.tsx DELETED
@@ -1,56 +0,0 @@
1
- import React, { useState, useEffect } from "react";
2
- import * as styles from "./TableWrapper.module.css";
3
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4
- import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
5
-
6
- export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
7
- const [canScrollRight, setCanScrollRight] = useState(false);
8
- const [canScrollLeft, setCanScrollLeft] = useState(false);
9
-
10
- const wrapperRef = React.useRef<HTMLDivElement | null>(null);
11
-
12
- const handleScroll = () => {
13
- if (wrapperRef.current) {
14
- setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
15
- setCanScrollRight(
16
- wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth,
17
- );
18
- }
19
- };
20
-
21
- const handleScrollRight = () => {
22
- if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
23
- };
24
-
25
- const handleScrollLeft = () => {
26
- if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
27
- };
28
-
29
- useEffect(() => {
30
- if (wrapperRef.current) {
31
- setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
32
- }
33
- }, []);
34
-
35
- return (
36
- <div className={styles.container}>
37
- <div onScroll={handleScroll} ref={wrapperRef} className={styles.wrapper}>
38
- {canScrollLeft && (
39
- <div onClick={handleScrollLeft} className={styles.scrollLeftButton}>
40
- <div className={styles.scrollButton}>
41
- <FontAwesomeIcon icon={faChevronLeft} />
42
- </div>
43
- </div>
44
- )}
45
- {children}
46
- {canScrollRight && (
47
- <div onClick={handleScrollRight} className={styles.scrollRightButton}>
48
- <div className={styles.scrollButton}>
49
- <FontAwesomeIcon icon={faChevronRight} />
50
- </div>
51
- </div>
52
- )}
53
- </div>
54
- </div>
55
- );
56
- };