@npm_leadtech/legal-lib-components 5.2.10 → 5.2.11

package/dist/css/styles.css

@@ -1314,6 +1314,8 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   text-indent: -0.625rem;
 }
 .pane--title {
+  border: none;
+  background: none;
   color: var(--neutral-neutral-2);
   font-size: 0.875rem;
   line-height: 1.29;
@@ -1333,6 +1335,9 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
     font-size: 0.875rem;
   }
 }
+.pane--title.pane--title--button {
+  cursor: pointer;
+}
 .pane--description {
   color: var(--neutral-main);
   font-size: 1rem;

package/dist/src/components/atoms/CardPane/CardPane.scss

@@ -80,6 +80,8 @@
     }
   }
   &--title {
+    border: none;
+    background: none;
     color: get-color(neutral, neutral-2);
     font-size: 0.875rem;
     line-height: 1.29;
@@ -92,6 +94,10 @@
     @include laptop {
       font-size: 0.875rem;
     }
+
+    &.pane--title--button {
+      cursor: pointer;
+    }
   }
   &--description {
     color: get-color(neutral);

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ description, subdescription, id, title }) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -8,8 +9,8 @@ const CardPaneInfo = ({ description, subdescription, id, title }) => {
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
     }
-    return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
+    return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
 };
 export default CardPaneInfo;

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -4,7 +4,18 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
+  const paneTitle = (
+    <>
+      {handleClick ? (
+        <button onClick={handleClick} className='pane--title pane--title--button'>
+          {title}
+        </button>
+      ) : (
+        <div className='pane--title'>{title}</div>
+      )}
+    </>
+  )
   if (description === 'Active' || description === 'Inactive') {
     let descriptionClass
     if (description === 'Active') {
@@ -14,7 +25,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
     }
     return (
       <div key={id} className='pane-wrapper'>
-        <div className='pane--title'>{title}</div>
+        {paneTitle}
         <div data-testid='description-div' className={descriptionClass}>
           <li className='position'>
             <div className='marker'>{description}</div>
@@ -26,7 +37,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
 
   return (
     <div key={id} className='pane-wrapper'>
-      <div className='pane--title'>{title}</div>
+      {paneTitle}
       <div className='pane--description'>
         {description}
         {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,4 +6,5 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
+    handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,4 +7,5 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
+  handleClick?: () => void
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.2.10",
+  "version": "5.2.11",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",