@npm_leadtech/legal-lib-components 5.6.0 → 5.7.0

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 (7) hide show
  1. package/dist/src/components/atoms/CardPane/CardPane.styled.js +19 -1
  2. package/dist/src/components/atoms/CardPane/CardPane.styled.ts +19 -1
  3. package/dist/src/components/atoms/CardPane/CardPaneInfo.js +5 -4
  4. package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx +14 -3
  5. package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts +1 -0
  6. package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts +1 -0
  7. package/package.json +1 -1
package/dist/src/components/atoms/CardPane/CardPane.styled.js CHANGED
@@ -32,15 +32,28 @@ export const CardPaneStyled = styled.div `
32
32
  }
33
33
  &:nth-child(2) {
34
34
  text-align: right;
35
+ padding-right: 0;
35
36
  @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
36
37
  text-align: left;
37
38
  }
38
39
  }
39
40
  &:nth-child(3) {
40
41
  margin-top: 30px;
42
+ padding-right: 0;
41
43
  }
42
- &:last-child {
44
+
45
+ &:nth-child(4) {
46
+ margin-top: 45px;
47
+ text-align: right;
43
48
  padding-right: 0;
49
+ @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
50
+ text-align: left;
51
+ margin-top: 16px;
52
+ }
53
+ .pane--title {
54
+ font-size: 0.75rem;
55
+ padding: 0;
56
+ }
44
57
  }
45
58
  span {
46
59
  display: block;
@@ -51,6 +64,8 @@ export const CardPaneStyled = styled.div `
51
64
  }
52
65
  }
53
66
  &--title {
67
+ border: none;
68
+ background: none;
54
69
  color: var(--neutral-neutral-2);
55
70
  font-size: 0.875rem;
56
71
  line-height: 1.29;
@@ -63,6 +78,9 @@ export const CardPaneStyled = styled.div `
63
78
  @media ${device.laptop} {
64
79
  font-size: 0.875rem;
65
80
  }
81
+ &.pane--title--button {
82
+ cursor: pointer;
83
+ }
66
84
  }
67
85
  &--description {
68
86
  color: var(--neutral-main);
package/dist/src/components/atoms/CardPane/CardPane.styled.ts CHANGED
@@ -33,15 +33,28 @@ export const CardPaneStyled = styled.div`
33
33
  }
34
34
  &:nth-child(2) {
35
35
  text-align: right;
36
+ padding-right: 0;
36
37
  @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
37
38
  text-align: left;
38
39
  }
39
40
  }
40
41
  &:nth-child(3) {
41
42
  margin-top: 30px;
43
+ padding-right: 0;
42
44
  }
43
- &:last-child {
45
+
46
+ &:nth-child(4) {
47
+ margin-top: 45px;
48
+ text-align: right;
44
49
  padding-right: 0;
50
+ @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
51
+ text-align: left;
52
+ margin-top: 16px;
53
+ }
54
+ .pane--title {
55
+ font-size: 0.75rem;
56
+ padding: 0;
57
+ }
45
58
  }
46
59
  span {
47
60
  display: block;
@@ -52,6 +65,8 @@ export const CardPaneStyled = styled.div`
52
65
  }
53
66
  }
54
67
  &--title {
68
+ border: none;
69
+ background: none;
55
70
  color: var(--neutral-neutral-2);
56
71
  font-size: 0.875rem;
57
72
  line-height: 1.29;
@@ -64,6 +79,9 @@ export const CardPaneStyled = styled.div`
64
79
  @media ${device.laptop} {
65
80
  font-size: 0.875rem;
66
81
  }
82
+ &.pane--title--button {
83
+ cursor: pointer;
84
+ }
67
85
  }
68
86
  &--description {
69
87
  color: var(--neutral-main);
package/dist/src/components/atoms/CardPane/CardPaneInfo.js CHANGED
@@ -1,5 +1,6 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- const CardPaneInfo = ({ description, subdescription, id, title }) => {
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
3
+ 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 })) }));
3
4
  if (description === 'Active' || description === 'Inactive') {
4
5
  let descriptionClass;
5
6
  if (description === 'Active') {
@@ -8,8 +9,8 @@ const CardPaneInfo = ({ description, subdescription, id, title }) => {
8
9
  else if (description === 'Inactive') {
9
10
  descriptionClass = 'pane--description--inactive';
10
11
  }
11
- 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));
12
+ 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));
12
13
  }
13
- 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));
14
+ 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));
14
15
  };
15
16
  export default CardPaneInfo;
package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx CHANGED
@@ -4,7 +4,18 @@ import React, { type FC } from 'react'
4
4
 
5
5
  import { type CardPaneInfoProps } from './CardPaneProps.types'
6
6
 
7
- const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
7
+ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
8
+ const paneTitle = (
9
+ <>
10
+ {handleClick ? (
11
+ <button onClick={handleClick} className='pane--title pane--title--button'>
12
+ {title}
13
+ </button>
14
+ ) : (
15
+ <div className='pane--title'>{title}</div>
16
+ )}
17
+ </>
18
+ )
8
19
  if (description === 'Active' || description === 'Inactive') {
9
20
  let descriptionClass
10
21
  if (description === 'Active') {
@@ -14,7 +25,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
14
25
  }
15
26
  return (
16
27
  <div key={id} className='pane-wrapper'>
17
- <div className='pane--title'>{title}</div>
28
+ {paneTitle}
18
29
  <div data-testid='description-div' className={descriptionClass}>
19
30
  <li className='position'>
20
31
  <div className='marker'>{description}</div>
@@ -26,7 +37,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
26
37
 
27
38
  return (
28
39
  <div key={id} className='pane-wrapper'>
29
- <div className='pane--title'>{title}</div>
40
+ {paneTitle}
30
41
  <div className='pane--description'>
31
42
  {description}
32
43
  {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}
package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts CHANGED
@@ -6,4 +6,5 @@ export interface CardPaneInfoProps {
6
6
  id: string;
7
7
  title: string;
8
8
  subdescription?: string;
9
+ handleClick?: () => void;
9
10
  }
package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts CHANGED
@@ -7,4 +7,5 @@ export interface CardPaneInfoProps {
7
7
  id: string
8
8
  title: string
9
9
  subdescription?: string
10
+ handleClick?: () => void
10
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "5.6.0",
3
+ "version": "5.7.0",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",