@readme/markdown 7.4.2 → 7.4.3

package/components/Accordion/index.tsx

@@ -3,9 +3,12 @@ import React, { useState } from 'react';
 import './style.scss';
 
 const Accordion = ({ children, icon, iconColor, title }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <details className="Accordion">
+    <details className="Accordion" onToggle={() => setIsOpen(!isOpen)}>
       <summary className="Accordion-title">
+       <i className={`Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right`}></i>
        {icon && <i className={`Accordion-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
        {title}
       </summary>

package/components/Accordion/style.scss

@@ -26,11 +26,31 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    &::marker {
+      content: "";
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    } 
+  }
+
+  &-toggleIcon,
+  &-toggleIcon_opened {
+    color: var(--color-text-default, #384248);
+    font-size: 14px;
+    margin-left: 5px;
+    margin-right: 10px;
+    transition: transform 0.1s;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &-icon {
     color: var(--project-color-primary, inherit);
-    margin-left: 10px;
     margin-right: 10px;
   }
 

package/components/Tabs/index.tsx

@@ -19,6 +19,7 @@ const Tabs = ({ children }) => {
         <nav className="TabGroup-nav">
           {children?.map((tab, index: number) => 
             <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
+              {tab.props.icon && <i className={`TabGroup-icon fa ${tab.props.icon}`} style={{ color: `${tab.props.iconColor}` }}></i>}
               {tab.props.title}
             </button>
           )}

package/components/Tabs/style.scss

@@ -33,6 +33,11 @@
     }
   }
 
+  &-icon {
+    color: var(--project-color-primary, inherit);
+    margin-right: 10px;
+  }
+
   .TabContent {
     color: var(--color-text-muted, #4f5a66);
   }

package/dist/main.css

@@ -1,6 +1,6 @@
-.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-icon{color:var(--project-color-primary, inherit);margin-left:10px;margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}
+.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-default, #384248);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}
 .CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:15px;padding-bottom:0;backdrop-filter:blur(20px);background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}.CardsGrid .Card-top{display:inline-flex;flex-direction:row}.CardsGrid .Card-icon{color:var(--project-color-primary, inherit);font-size:20px}.CardsGrid .Card-title{color:var(--color-text-default, #384248);font-weight:600;margin-top:10px}.CardsGrid .Card-title:first-child{margin-top:0}.CardsGrid .Card-content{color:var(--color-text-muted, #4f5a66)}.CardsGrid a.Card:not([href=""]){text-decoration:none;color:inherit}.CardsGrid a.Card:not([href=""]):hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}
-.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--project-color-primary, var(--color-text-default, #384248));color:var(--project-color-primary, var(--color-text-default, #384248));font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
+.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--project-color-primary, var(--color-text-default, #384248));color:var(--project-color-primary, var(--color-text-default, #384248));font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13307,8 +13307,10 @@ var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_defau
 
 
 const Accordion = ({ children, icon, iconColor, title }) => {
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+    const [isOpen, setIsOpen] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right` }),
             icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-icon fa ${icon}`, style: { color: `${iconColor}` } }),
             title),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion-content" }, children)));
@@ -13795,7 +13797,9 @@ const Tabs = ({ children }) => {
     const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) },
+                tab.props.icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `TabGroup-icon fa ${tab.props.icon}`, style: { color: `${tab.props.iconColor}` } }),
+                tab.props.title)))),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
@@ -47926,7 +47930,12 @@ const getHPropKeys = (node) => {
  */
 const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
     if ('name' in attr) {
-        memo[attr.name] = typeof attr.value !== 'string' ? JSON.parse(attr.value.value) : attr.value;
+        if (typeof attr.value === 'string') {
+            memo[attr.name] = attr.value;
+        }
+        else if (attr.value.value !== 'undefined') {
+            memo[attr.name] = JSON.parse(attr.value.value);
+        }
     }
     return memo;
 }, {});
@@ -48004,6 +48013,9 @@ const toAttributes = (object, keys = []) => {
         if (typeof v === 'string') {
             value = v;
         }
+        else if (typeof v === 'undefined') {
+            return;
+        }
         else {
             /* values can be null, undefined, string, or a expression, eg:
              *

package/dist/main.node.js

@@ -7854,8 +7854,10 @@ var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_defau
 
 
 const Accordion = ({ children, icon, iconColor, title }) => {
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+    const [isOpen, setIsOpen] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right` }),
             icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-icon fa ${icon}`, style: { color: `${iconColor}` } }),
             title),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion-content" }, children)));
@@ -13219,7 +13221,9 @@ const Tabs = ({ children }) => {
     const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) },
+                tab.props.icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `TabGroup-icon fa ${tab.props.icon}`, style: { color: `${tab.props.iconColor}` } }),
+                tab.props.title)))),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
@@ -48913,7 +48917,12 @@ const getHPropKeys = (node) => {
  */
 const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
     if ('name' in attr) {
-        memo[attr.name] = typeof attr.value !== 'string' ? JSON.parse(attr.value.value) : attr.value;
+        if (typeof attr.value === 'string') {
+            memo[attr.name] = attr.value;
+        }
+        else if (attr.value.value !== 'undefined') {
+            memo[attr.name] = JSON.parse(attr.value.value);
+        }
     }
     return memo;
 }, {});
@@ -48991,6 +49000,9 @@ const toAttributes = (object, keys = []) => {
         if (typeof v === 'string') {
             value = v;
         }
+        else if (typeof v === 'undefined') {
+            return;
+        }
         else {
             /* values can be null, undefined, string, or a expression, eg:
              *

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "7.4.2",
+  "version": "7.4.3",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",