@readme/markdown 6.75.0-beta.77 → 6.75.0-beta.79

package/components/Accordion/index.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+import './style.scss';
+
+const Accordion = ({ children, title }) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleToggle = () => {
+    setIsActive(!isActive);
+  }
+  
+  return (
+    <div className="Accordion">
+      <button className="title" onClick={handleToggle}>
+        {title}
+        <i className={`icon${isActive ? '_active' : ''} fa fa-chevron-right`}></i>
+      </button>
+      <div className={`content content${isActive ? '_active' : ''}`}>{children}</div>
+    </div>
+  );
+};
+
+export default Accordion;

package/components/Accordion/style.scss

@@ -0,0 +1,43 @@
+.Accordion {
+  background: rgba(var(--color-bg-page-rgb, white), 1);
+  border: 1px solid var(--color-border-default, rgba(black, 0.1));
+  border-radius: 5px;
+
+  .title {
+    align-items: center;
+    background: white;
+    border: 0;
+    border-radius: 5px;
+    color: var(--color-text-default, #384248);
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    justify-content: space-between;
+    padding: 10px;
+    position: relative;
+    text-align: left;
+    width: 100%;
+  }
+
+  .icon {
+    color: var(--color-text-default, #384248);
+    font-size: 12px;
+    transition: transform 0.3s;
+
+    &_active {
+      font-size: 12px;
+      transform: rotate(90deg);
+      transition: transform 0.3s;
+    }
+  }
+
+  .content {
+    color: var(--color-text-default, #384248);
+    display: none;
+    padding: 10px;
+
+    &_active {
+      display: block;
+    }
+  }
+}

package/components/Callout/index.tsx

@@ -29,10 +29,10 @@ const Callout = (props: Props) => {
   return (
     // @ts-ignore
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h3 className={`callout-heading${empty ? ' empty' : ''}`}>
+      <h2 className={`callout-heading${empty ? ' empty' : ''}`}>
         <span className="callout-icon">{icon}</span>
         {empty || React.Children.toArray(children)[0]}
-      </h3>
+      </h2>
       {React.Children.toArray(children).slice(1)}
     </blockquote>
   );

package/components/CardsGrid/style.scss

@@ -5,8 +5,10 @@
   .Card {
     padding: 10px;
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(black, 0.1);
+    background: rgba(var(--color-bg-page-rgb, white), 1);
+    border: 1px solid var(--color-border-default, rgba(black, 0.1));
     border-radius: 5px;
     box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
+    color: var(--color-text-default, #384248);
   }
 }

package/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from './Accordion';
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
 export { default as Cards } from './CardsGrid';

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './style.scss';
+declare const Accordion: ({ children, title }: {
+    children: any;
+    title: any;
+}) => React.JSX.Element;
+export default Accordion;

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from './Accordion';
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
 export { default as Cards } from './CardsGrid';

package/dist/example/RenderError.d.ts

@@ -18,6 +18,6 @@ declare class RenderError extends React.Component<PropsWithChildren<Props>, Stat
     componentDidCatch(error: any, info: {
         componentStack: any;
     }): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
 }
 export default RenderError;

package/dist/main.css

@@ -1,4 +1,5 @@
-.CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:10px;backdrop-filter:blur(20px);border:1px solid rgba(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)}
+.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:#fff;border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:10px;position:relative;text-align:left;width:100%}.Accordion .icon{color:var(--color-text-default, #384248);font-size:12px;transition:transform .3s}.Accordion .icon_active{font-size:12px;transform:rotate(90deg);transition:transform .3s}.Accordion .content{color:var(--color-text-default, #384248);display:none;padding:10px}.Accordion .content_active{display:block}
+.CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:10px;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);color:var(--color-text-default, #384248)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13253,6 +13253,7 @@ __webpack_require__.d(__webpack_exports__, {
 var components_namespaceObject = {};
 __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
+  Accordion: () => (components_Accordion),
   Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
   Cards: () => (components_CardsGrid),
@@ -13295,6 +13296,25 @@ __webpack_require__.d(util_types_namespaceObject, {
   spaceSeparated: () => (spaceSeparated)
 });
 
+// EXTERNAL MODULE: external {"amd":"react","commonjs":"react","commonjs2":"react","root":"React","umd":"react"}
+var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_ = __webpack_require__(1307);
+var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_);
+;// CONCATENATED MODULE: ./components/Accordion/index.tsx
+
+
+const Accordion = ({ children, title }) => {
+    const [isActive, setIsActive] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    const handleToggle = () => {
+        setIsActive(!isActive);
+    };
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: "title", onClick: handleToggle },
+            title,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `icon${isActive ? '_active' : ''} fa fa-chevron-right` })),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: `content content${isActive ? '_active' : ''}` }, children)));
+};
+/* harmony default export */ const components_Accordion = (Accordion);
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.js
 var es_symbol = __webpack_require__(3534);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.description.js
@@ -13337,9 +13357,6 @@ var es_regexp_exec = __webpack_require__(7136);
 var es_string_match = __webpack_require__(8636);
 // EXTERNAL MODULE: ./node_modules/prop-types/index.js
 var prop_types = __webpack_require__(5556);
-// EXTERNAL MODULE: external {"amd":"react","commonjs":"react","commonjs2":"react","root":"React","umd":"react"}
-var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_ = __webpack_require__(1307);
-var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_);
 ;// CONCATENATED MODULE: ./contexts/BaseUrl.js
 
 var BaseUrlContext = /*#__PURE__*/external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createContext('/');
@@ -13473,7 +13490,7 @@ const Callout = (props) => {
     return (
     // @ts-ignore
     external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("blockquote", Object.assign({}, attributes, { className: `callout callout_${theme}`, theme: icon }),
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("h3", { className: `callout-heading${empty ? ' empty' : ''}` },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("h2", { className: `callout-heading${empty ? ' empty' : ''}` },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "callout-icon" }, icon),
             empty || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.Children.toArray(children)[0]),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.Children.toArray(children).slice(1)));
@@ -13789,6 +13806,7 @@ function TableOfContents({ children }) {
 
 
 
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.to-primitive.js
 var es_symbol_to_primitive = __webpack_require__(6611);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js

package/dist/main.node.js

@@ -7800,6 +7800,7 @@ __webpack_require__.d(__webpack_exports__, {
 var components_namespaceObject = {};
 __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
+  Accordion: () => (components_Accordion),
   Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
   Cards: () => (components_CardsGrid),
@@ -7842,11 +7843,27 @@ __webpack_require__.d(util_types_namespaceObject, {
   spaceSeparated: () => (spaceSeparated)
 });
 
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(556);
 // EXTERNAL MODULE: external {"amd":"react","commonjs":"react","commonjs2":"react","root":"React","umd":"react"}
 var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_ = __webpack_require__(137);
 var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_);
+;// CONCATENATED MODULE: ./components/Accordion/index.tsx
+
+
+const Accordion = ({ children, title }) => {
+    const [isActive, setIsActive] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(false);
+    const handleToggle = () => {
+        setIsActive(!isActive);
+    };
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: "title", onClick: handleToggle },
+            title,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `icon${isActive ? '_active' : ''} fa fa-chevron-right` })),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: `content content${isActive ? '_active' : ''}` }, children)));
+};
+/* harmony default export */ const components_Accordion = (Accordion);
+
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(556);
 ;// CONCATENATED MODULE: ./contexts/BaseUrl.js
 
 const BaseUrlContext = /*#__PURE__*/external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createContext('/');
@@ -7953,7 +7970,7 @@ const Callout = (props) => {
     return (
     // @ts-ignore
     external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("blockquote", Object.assign({}, attributes, { className: `callout callout_${theme}`, theme: icon }),
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("h3", { className: `callout-heading${empty ? ' empty' : ''}` },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("h2", { className: `callout-heading${empty ? ' empty' : ''}` },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "callout-icon" }, icon),
             empty || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.Children.toArray(children)[0]),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.Children.toArray(children).slice(1)));
@@ -13213,6 +13230,7 @@ function TableOfContents({ children }) {
 
 
 
+
 ;// CONCATENATED MODULE: ./options.js
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

package/package.json

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