@readme/markdown 7.1.0 → 7.2.0

package/components/Accordion/index.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+import './style.scss';
+
+const Accordion = ({ children, icon, iconColor, title }) => {
+  return (
+    <details className="Accordion">
+      <summary className="Accordion-title">
+       {icon && <i className={`Accordion-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
+       {title}
+      </summary>
+      <div className="Accordion-content">{children}</div>
+    </details>
+  );
+};
+
+export default Accordion;

package/components/Accordion/style.scss

@@ -0,0 +1,40 @@
+.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: 16px;
+    padding: 15px;
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      background: var(--color-bg-hover, #{rgba(black, 0.05)});
+    }
+
+    .Accordion[open] & {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &-icon {
+    color: var(--project-color-primary, inherit);
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+
+  &-content {
+    color: var(--color-text-muted, #4f5a66);
+    padding: 10px 15px 0 15px;
+  }
+}

package/components/Cards/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import './style.scss';
+
+export const Card = ({ children, href, icon, iconColor, target, title }) => {
+  const Tag = href ? 'a' : 'div';
+  return (
+    <Tag className="Card" href={href} target={target}>
+      {icon && <i className={`Card-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
+      {title && <h3 className='Card-title'>{title}</h3>}
+      <div className="Card-content">{children}</div>
+    </Tag>
+  )
+}
+
+const CardsGrid = ({ columns = 2, children }) => {
+  columns = columns >= 2 ? columns : 2;
+  return (
+    <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+      {children}
+    </div>
+  );
+};
+
+export default CardsGrid;

package/components/Cards/style.scss

@@ -0,0 +1,47 @@
+.CardsGrid {
+  display: grid;
+  gap: 20px;
+
+  .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(black, 0.1));
+    border-radius: 5px;
+    box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
+
+    &-top {
+      display: inline-flex;
+      flex-direction: row;
+    }
+
+    &-icon {
+      color: var(--project-color-primary, inherit);
+      font-size: 20px;
+    }
+
+    &-title {
+      color: var(--color-text-default, #384248);
+      
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    &-content {
+      color: var(--color-text-muted, #4f5a66);
+    }
+  }
+
+  a.Card:not([href=""]) {
+    text-decoration: none;
+    color: inherit;
+
+    &:hover {
+      background: var(--color-bg-hover, #{rgba(black, 0.05)});
+    }
+  }
+
+
+}

package/components/Tabs/style.scss

@@ -19,6 +19,7 @@
       color: var(--blue, #118cfd);
       font-weight: 600;
       padding: 10px;
+      margin-bottom: -2px;
     }
 
     &:hover {

package/components/index.ts

@@ -1,6 +1,7 @@
+export { default as Accordion } from './Accordion';
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
-export { default as Cards } from './CardsGrid';
+export { default as Cards, Card } from './Cards';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './style.scss';
+export declare const Card: ({ children, href, icon, iconColor, target, title }: {
+    children: any;
+    href: any;
+    icon: any;
+    iconColor: any;
+    target: any;
+    title: any;
+}) => React.JSX.Element;
+declare const CardsGrid: ({ columns, children }: {
+    columns?: number;
+    children: any;
+}) => React.JSX.Element;
+export default CardsGrid;

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
+export { default as Accordion } from './Accordion';
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
-export { default as Cards } from './CardsGrid';
+export { default as Cards, Card } from './Cards';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';

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,5 +1,6 @@
-.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)}
-.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-weight:600;padding:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--blue, #118cfd);color:var(--blue, #118cfd);font-weight:600;padding:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}
+.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:16px;padding:15px;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:5px;margin-right:5px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:10px 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)}.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-weight:600;padding:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--blue, #118cfd);color:var(--blue, #118cfd);font-weight:600;padding:10px;margin-bottom:-2px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13254,9 +13254,11 @@ __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),
+  Card: () => (Card),
+  Cards: () => (Cards),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
@@ -13298,6 +13300,21 @@ __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, icon, iconColor, title }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            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)));
+};
+/* 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
@@ -13340,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('/');
@@ -13483,15 +13497,21 @@ const Callout = (props) => {
 };
 /* harmony default export */ const components_Callout = (Callout);
 
-;// CONCATENATED MODULE: ./components/CardsGrid/index.tsx
+;// CONCATENATED MODULE: ./components/Cards/index.tsx
 
 
-const Card = ({ children }) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card" }, children);
+const Card = ({ children, href, icon, iconColor, target, title }) => {
+    const Tag = href ? 'a' : 'div';
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tag, { className: "Card", href: href, target: target },
+        icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Card-icon fa ${icon}`, style: { color: `${iconColor}` } }),
+        title && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("h3", { className: 'Card-title' }, title),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card-content" }, children)));
+};
 const CardsGrid = ({ columns = 2, children }) => {
     columns = columns >= 2 ? columns : 2;
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, e => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Card, null, e)))));
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, children));
 };
-/* harmony default export */ const components_CardsGrid = (CardsGrid);
+/* harmony default export */ const Cards = (CardsGrid);
 
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(7965);
@@ -13808,6 +13828,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

@@ -7801,9 +7801,11 @@ __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),
+  Card: () => (Card),
+  Cards: () => (Cards),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
@@ -7845,11 +7847,23 @@ __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, icon, iconColor, title }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            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)));
+};
+/* 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('/');
@@ -7963,15 +7977,21 @@ const Callout = (props) => {
 };
 /* harmony default export */ const components_Callout = (Callout);
 
-;// CONCATENATED MODULE: ./components/CardsGrid/index.tsx
+;// CONCATENATED MODULE: ./components/Cards/index.tsx
 
 
-const Card = ({ children }) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card" }, children);
+const Card = ({ children, href, icon, iconColor, target, title }) => {
+    const Tag = href ? 'a' : 'div';
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tag, { className: "Card", href: href, target: target },
+        icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Card-icon fa ${icon}`, style: { color: `${iconColor}` } }),
+        title && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("h3", { className: 'Card-title' }, title),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card-content" }, children)));
+};
 const CardsGrid = ({ columns = 2, children }) => {
     columns = columns >= 2 ? columns : 2;
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, e => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Card, null, e)))));
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, children));
 };
-/* harmony default export */ const components_CardsGrid = (CardsGrid);
+/* harmony default export */ const Cards = (CardsGrid);
 
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(965);
@@ -13232,6 +13252,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": "7.1.0",
+  "version": "7.2.0",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",

package/components/CardsGrid/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import './style.scss';
-
-const Card = ({ children }) => <div className="Card">{children}</div>;
-
-const CardsGrid = ({ columns = 2, children }) => {
-  columns = columns >= 2 ? columns : 2;
-  return (
-    <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
-      {React.Children.map(children, e => (
-        <Card>{e}</Card>
-      ))}
-    </div>
-  );
-};
-
-export default CardsGrid;

package/components/CardsGrid/style.scss

@@ -1,12 +0,0 @@
-.CardsGrid {
-  display: grid;
-  gap: 20px;
-
-  .Card {
-    padding: 10px;
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(black, 0.1);
-    border-radius: 5px;
-    box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
-  }
-}

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

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