agroptima-design-system 1.2.25 → 1.2.26-beta.1

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Collapsible/Collapsible.scss +10 -7
  3. package/src/atoms/Collapsible/Collapsible.tsx +18 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "1.2.25",
3
+ "version": "1.2.26-beta.1",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Collapsible/Collapsible.scss CHANGED
@@ -43,12 +43,9 @@ details summary::-webkit-details-marker {
43
43
 
44
44
  &.primary,
45
45
  &.secondary {
46
- &[open] {
47
- .collapsible-header {
48
- background: transparent;
49
- border-bottom: 3px solid var(--primary-color-600);
50
- }
51
- }
46
+
47
+
48
+
52
49
 
53
50
  &.disabled {
54
51
  .collapsible-header {
@@ -69,6 +66,12 @@ details summary::-webkit-details-marker {
69
66
  background: var(--primary-color-50);
70
67
  }
71
68
  }
69
+ &.open {
70
+ .collapsible-header {
71
+ background: transparent;
72
+ border-bottom: 3px solid var(--primary-color-600);
73
+ }
74
+ }
72
75
  }
73
76
 
74
77
  &.secondary .collapsible-content {
@@ -80,7 +83,7 @@ details summary::-webkit-details-marker {
80
83
  }
81
84
  }
82
85
 
83
- .collapsible[open] {
86
+ .collapsible.open {
84
87
  .collapsible-arrow {
85
88
  transform: rotate(90deg);
86
89
  }
package/src/atoms/Collapsible/Collapsible.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import './Collapsible.scss'
2
2
  import type { ComponentPropsWithoutRef } from 'react'
3
+ import { useState } from 'react'
3
4
  import { classNames } from '../../utils/classNames'
4
5
  import { Icon } from '../Icon'
5
6
 
@@ -12,6 +13,7 @@ export interface CollapsibleProps extends ComponentPropsWithoutRef<'details'> {
12
13
  disabled?: boolean
13
14
  form?: boolean
14
15
  noHorizontalPadding?: boolean
16
+ open?: boolean
15
17
  }
16
18
 
17
19
  export function Collapsible({
@@ -23,10 +25,14 @@ export function Collapsible({
23
25
  name,
24
26
  form = false,
25
27
  noHorizontalPadding = false,
28
+ open = false,
29
+ onToggle,
26
30
  ...props
27
31
  }: CollapsibleProps) {
32
+ const [isOpen, setIsOpen] = useState(open)
33
+
28
34
  const cssClasses = classNames('collapsible', variant, className, {
29
- open: props.open,
35
+ open: isOpen,
30
36
  disabled: disabled,
31
37
  })
32
38
  const contentCssClasses = classNames('collapsible-content', {
@@ -35,7 +41,17 @@ export function Collapsible({
35
41
  })
36
42
 
37
43
  return (
38
- <details name={name} className={cssClasses} aria-label={title} {...props}>
44
+ <details
45
+ name={name}
46
+ className={cssClasses}
47
+ aria-label={title}
48
+ open={isOpen}
49
+ onToggle={(e) => {
50
+ setIsOpen(e.currentTarget.open)
51
+ onToggle?.(e)
52
+ }}
53
+ {...props}
54
+ >
39
55
  <summary className="collapsible-header">
40
56
  <Icon className="collapsible-arrow" name="AngleRight" size="4" />
41
57
  <span className="collapsible-title">{title}</span>