@stellar-expert/ui-framework 1.9.5 → 1.9.6

package/interaction/accordion.js

@@ -3,27 +3,34 @@ import cn from 'classnames'
 import './accordion.scss'
 
 /**
- * @param {{title, content}[]} options
+ * Group of collapsible panels
+ * @param {{key: String, title: String|JSX.Element, content:*}[]} options - Accordion options
+ * @param {String} [collapsedSymbol] - Prefix to show for collapsed panels
+ * @param {String} [expandedSymbol] - Prefix to show for expanded panel
  */
-export function Accordion({options}) {
+export function Accordion({options, collapsedSymbol = '+', expandedSymbol = '-', ...otherProps}) {
     const [selectedOption, setSelectedOption] = useState()
     useEffect(() => {
-        setSelectedOption(options[0].title)
+        const firstOption = options[0]
+        setSelectedOption(firstOption.key || firstOption.title)
     }, [options])
-    const changeSelected = useCallback(e => {
-        const {title} = e.currentTarget.dataset
-        setSelectedOption(title)
-    }, [options])
-    return <div className="accordion">
-        {options.map(({title, content}) => <div key={title} className={cn('option', {open: selectedOption === title})}>
-            <div className="accordion-header" data-title={title} onClick={changeSelected}>
-                {title}
-            </div>
-            <div className="accordion-collapse">
-                <div className="accordion-body">
-                    {content}
+    const changeSelected = useCallback(e => setSelectedOption(e.currentTarget.dataset.key), [options])
+    return <div className="accordion" {...otherProps}>
+        {options.map(({key, title, content}) => {
+            const expanded = key ?
+                selectedOption === key :
+                selectedOption === title
+            return <div key={key || title} className={cn('option', {expanded})}>
+                <div className="accordion-header" data-collapsed={collapsedSymbol} data-expanded={expandedSymbol} data-key={key || title}
+                     onClick={changeSelected}>
+                    {title || key}
+                </div>
+                <div className="accordion-collapse">
+                    <div className="accordion-body">
+                        {content}
+                    </div>
                 </div>
             </div>
-        </div>)}
+        })}
     </div>
 }

package/interaction/accordion.scss

@@ -5,7 +5,7 @@
     user-select: none;
 
     &:before {
-      content: '+';
+      content: attr(data-collapsed);
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -19,9 +19,9 @@
   }
 
   .option {
-    &.open {
+    &.expanded {
       .accordion-header:before {
-        content: '-';
+        content: attr(data-expanded);
       }
 
       .accordion-collapse {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",