diff --git a/components/Accordion.jsx b/components/Accordion.jsx new file mode 100644 index 0000000..b8a8916 --- /dev/null +++ b/components/Accordion.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +const Accordion = ({ children, title = "More" }) => ( +
+ {title} + {children} +
+); + +export default Accordion; diff --git a/components/Admonition.jsx b/components/Admonition.jsx new file mode 100644 index 0000000..83bf86d --- /dev/null +++ b/components/Admonition.jsx @@ -0,0 +1,126 @@ +import React, { Component } from "react"; + +export default class Admonition extends Component { + render() { + const { type, iconType, title, children, addIfmClass } = this.props; + + let wrapperClasses = ["admonition", `admonition-${type}`]; + if (addIfmClass) { + wrapperClasses.push("alert") + wrapperClasses.push(`alert--${ifmClassMap[type]}`) + } + + return ( +
+
+
+
{returnIcon(type, iconType)}
+   + {title || type} +
+
+
{children}
+
+ ); + } +} + +Admonition.defaultProps = { + addIfmClass: true, +}; + +const ifmClassMap = { + warning: "danger", + important: "info", + caution: "warning", + tip: "success", + note: "secondary", +}; + +var emojisMap = { + warning: "⚠️", + important: "❗️", + caution: "🔥", + tip: "💡", + note: "ℹ️" +}; + +/** + * Octicons Icons by GitHub released under MIT License + * https://github.com/primer/octicons/ + */ + +const svgMap = { + warning: ( + + + + ), + important: ( + + + + ), + caution: ( + + + + ), + tip: ( + + + + ), + note: ( + + + + ), +}; + +function returnIcon(admonition, iconType) { + if (iconType === "emoji") { + return emojisMap[admonition]; + } + return svgMap[admonition]; +}