@conduction/components 2.2.8 → 2.2.10

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.10: Added z-index to tooltip.
+  - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.
   - 2.2.8:
     - Updated Pagination to show current page.
     - Updated Tabs component to have correct border-bottom length.

package/lib/components/tableWrapper/TableWrapper.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-interface TableWrapperProps {
-    touchScreen?: boolean;
-}
 export declare const TableWrapper: React.FC<{
     children: React.ReactNode;
-} & TableWrapperProps>;
-export {};
+}>;

package/lib/components/tableWrapper/TableWrapper.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
 import * as styles from "./TableWrapper.module.css";
-import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-export const TableWrapper = ({ children, touchScreen, }) => {
+export const TableWrapper = ({ children }) => {
     const [canScrollRight, setCanScrollRight] = useState(false);
     const [canScrollLeft, setCanScrollLeft] = useState(false);
     const wrapperRef = React.useRef(null);
@@ -27,5 +26,5 @@ export const TableWrapper = ({ children, touchScreen, }) => {
             setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
         }
     }, []);
-    return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(touchScreen ? styles.wrapperTouchscreen : styles.wrapper), children: [canScrollLeft && !touchScreen && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && !touchScreen && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
+    return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: styles.wrapper, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
 };

package/lib/components/toolTip/ToolTip.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 interface ToolTipProps {
     id: string;
+    layoutClassName?: string;
 }
 /**
  * Implement this ToolTip only once, in a high-level wrapper.

package/lib/components/toolTip/ToolTip.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./ToolTip.module.css";
 import { Tooltip } from "react-tooltip";
+import clsx from "clsx";
 /**
  * Implement this ToolTip only once, in a high-level wrapper.
  * Use the ToolTip anywhere, in any element, by setting the following data props:
@@ -8,6 +9,6 @@ import { Tooltip } from "react-tooltip";
  * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
  * data-tooltip-content="Hello world!"
  */
-export const ToolTip = ({ id }) => {
-    return _jsx(Tooltip, { className: styles.tooltip, ...{ id } });
+export const ToolTip = ({ id, layoutClassName }) => {
+    return _jsx(Tooltip, { className: clsx(styles.tooltip, layoutClassName, layoutClassName), ...{ id } });
 };

package/lib/components/toolTip/ToolTip.module.css

@@ -13,6 +13,7 @@
   --conduction-tooltip-border-radius: 0px;
 
   --conduction-tooltip-opacity: 1;
+  --conduction-tooltip-z-index: 9999;
 }
 
 .tooltip {
@@ -30,4 +31,5 @@
   border-radius: var(--conduction-tooltip-border-radius) !important;
 
   opacity: var(--conduction-tooltip-opacity);
+  z-index: var(--conduction-tooltip-z-index);
 }

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard } from "./components/card";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate } from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
@@ -24,4 +24,4 @@ import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
 import { TableWrapper } from "./components/tableWrapper/TableWrapper";
-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 };
+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

@@ -1,4 +1,4 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard } from "./components/card";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, } from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
@@ -17,4 +17,4 @@ import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
 import { TableWrapper } from "./components/tableWrapper/TableWrapper";
-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 };
+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

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/tableWrapper/TableWrapper.tsx

@@ -1,17 +1,9 @@
 import React, { useState, useEffect } from "react";
 import * as styles from "./TableWrapper.module.css";
-import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
-interface TableWrapperProps {
-  touchScreen?: boolean;
-}
-
-export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapperProps> = ({
-  children,
-  touchScreen,
-}) => {
+export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [canScrollRight, setCanScrollRight] = useState(false);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
 
@@ -42,12 +34,8 @@ export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapper
 
   return (
     <div className={styles.container}>
-      <div
-        onScroll={handleScroll}
-        ref={wrapperRef}
-        className={clsx(touchScreen ? styles.wrapperTouchscreen : styles.wrapper)}
-      >
-        {canScrollLeft && !touchScreen && (
+      <div onScroll={handleScroll} ref={wrapperRef} className={styles.wrapper}>
+        {canScrollLeft && (
           <div onClick={handleScrollLeft} className={styles.scrollLeftButton}>
             <div className={styles.scrollButton}>
               <FontAwesomeIcon icon={faChevronLeft} />
@@ -55,7 +43,7 @@ export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapper
           </div>
         )}
         {children}
-        {canScrollRight && !touchScreen && (
+        {canScrollRight && (
           <div onClick={handleScrollRight} className={styles.scrollRightButton}>
             <div className={styles.scrollButton}>
               <FontAwesomeIcon icon={faChevronRight} />

package/src/components/toolTip/ToolTip.module.css

@@ -13,6 +13,7 @@
   --conduction-tooltip-border-radius: 0px;
 
   --conduction-tooltip-opacity: 1;
+  --conduction-tooltip-z-index: 9999;
 }
 
 .tooltip {
@@ -30,4 +31,5 @@
   border-radius: var(--conduction-tooltip-border-radius) !important;
 
   opacity: var(--conduction-tooltip-opacity);
+  z-index: var(--conduction-tooltip-z-index);
 }

package/src/components/toolTip/ToolTip.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as styles from "./ToolTip.module.css";
 import { Tooltip } from "react-tooltip";
+import clsx from "clsx";
 
 interface ToolTipProps {
   id: string;
+  layoutClassName?: string;
 }
 
 /**
@@ -14,6 +16,6 @@ interface ToolTipProps {
  * data-tooltip-content="Hello world!"
  */
 
-export const ToolTip: React.FC<ToolTipProps> = ({ id }) => {
-  return <Tooltip className={styles.tooltip} {...{ id }} />;
+export const ToolTip: React.FC<ToolTipProps> = ({ id, layoutClassName }) => {
+  return <Tooltip className={clsx(styles.tooltip, layoutClassName, layoutClassName)} {...{ id }} />;
 };

package/src/index.ts

@@ -1,4 +1,14 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard } from "./components/card";
+import {
+  DownloadCard,
+  HorizontalImageCard,
+  ImageAndDetailsCard,
+  DetailsCard,
+  InfoCard,
+  CardWrapper,
+  CardHeader,
+  CardHeaderTitle,
+  CardHeaderDate,
+} from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import {
@@ -64,9 +74,13 @@ export {
   BadgeCounter,
   CodeBlock,
   ToolTip,
+  CardWrapper,
+  CardHeader,
+  CardHeaderTitle,
+  CardHeaderDate,
   Tabs,
   TabList,
   Tab,
   TabPanel,
-  TableWrapper
+  TableWrapper,
 };