From 7584c1dd75f284d05faf6bde385e7a81dca497fb Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Mon, 15 Aug 2022 15:16:30 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=C2=A0=F0=9F=94=A7=C2=A0Convert=20M?= =?UTF-8?q?arkdown.styles.scss=20to=20module=20(#15646)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Convert Markdown.styles.scss to module * Split scss modules for better linting --- ...kdown.styles.scss => Markdown.module.scss} | 49 +------------------ .../src/components/Markdown/Markdown.tsx | 5 +- .../Markdown/admonitions.module.scss | 48 ++++++++++++++++++ .../Markdown/remarkAdmonitionsPlugin.ts | 7 ++- 4 files changed, 57 insertions(+), 52 deletions(-) rename airbyte-webapp/src/components/Markdown/{Markdown.styles.scss => Markdown.module.scss} (56%) create mode 100644 airbyte-webapp/src/components/Markdown/admonitions.module.scss diff --git a/airbyte-webapp/src/components/Markdown/Markdown.styles.scss b/airbyte-webapp/src/components/Markdown/Markdown.module.scss similarity index 56% rename from airbyte-webapp/src/components/Markdown/Markdown.styles.scss rename to airbyte-webapp/src/components/Markdown/Markdown.module.scss index e03e86c05f6c..7690ff5b36e4 100644 --- a/airbyte-webapp/src/components/Markdown/Markdown.styles.scss +++ b/airbyte-webapp/src/components/Markdown/Markdown.module.scss @@ -1,6 +1,6 @@ @use "../../scss/colors"; -.airbyte-markdown { +.markdown { * { color: colors.$dark-blue; line-height: 24px; @@ -81,51 +81,4 @@ img { max-width: 100%; } - - .admonition { - border-radius: 8px; - border-left: 8px solid colors.$grey-300; - padding: 1px 16px 1px 48px; - margin: -1px 0 15px; - background-color: colors.$grey-50; - position: relative; - - &::before { - content: "ℹ️"; - position: absolute; - top: 16px; - left: 16px; - } - - &--caution, - &--warning { - background-color: colors.$yellow-50; - border-left-color: colors.$yellow-300; - &::before { - content: "⚠️"; - } - } - - &--danger { - background-color: colors.$red-50; - border-left-color: colors.$red-300; - &::before { - content: "⚠️"; - } - } - - &--note::before { - content: "📝"; - } - - &--tip, - &--info { - background-color: colors.$blue-50; - border-left-color: colors.$blue-300; - } - - &--tip::before { - content: "💡"; - } - } } diff --git a/airbyte-webapp/src/components/Markdown/Markdown.tsx b/airbyte-webapp/src/components/Markdown/Markdown.tsx index 24f39b29f0d2..d12233003da5 100644 --- a/airbyte-webapp/src/components/Markdown/Markdown.tsx +++ b/airbyte-webapp/src/components/Markdown/Markdown.tsx @@ -7,10 +7,9 @@ import remarkDirective from "remark-directive"; import remarkFrontmatter from "remark-frontmatter"; import remarkGfm from "remark-gfm"; +import styles from "./Markdown.module.scss"; import { remarkAdmonitionsPlugin } from "./remarkAdmonitionsPlugin"; -import "./Markdown.styles.scss"; - interface MarkdownProps { content?: string; className?: string; @@ -22,7 +21,7 @@ export const Markdown: React.VFC = ({ content, className, rehypeP (href.startsWith("#") ? undefined : "_blank")} - className={classNames("airbyte-markdown", className)} + className={classNames(styles.markdown, className)} skipHtml // @ts-expect-error remarkFrontmatter currently has type conflicts due to duplicate vfile dependencies // This is not actually causing any issues, but requires to disable TS on this for now. diff --git a/airbyte-webapp/src/components/Markdown/admonitions.module.scss b/airbyte-webapp/src/components/Markdown/admonitions.module.scss new file mode 100644 index 000000000000..79ce9842d7ae --- /dev/null +++ b/airbyte-webapp/src/components/Markdown/admonitions.module.scss @@ -0,0 +1,48 @@ +@use "../../scss/colors"; + +.admonition { + border-radius: 8px; + border-left: 8px solid colors.$grey-300; + padding: 1px 16px 1px 48px; + margin: -1px 0 15px; + background-color: colors.$grey-50; + position: relative; + + &::before { + content: "ℹ️"; + position: absolute; + top: 16px; + left: 16px; + } + + &--caution, + &--warning { + background-color: colors.$yellow-50; + border-left-color: colors.$yellow-300; + &::before { + content: "⚠️"; + } + } + + &--danger { + background-color: colors.$red-50; + border-left-color: colors.$red-300; + &::before { + content: "⚠️"; + } + } + + &--note::before { + content: "📝"; + } + + &--tip, + &--info { + background-color: colors.$blue-50; + border-left-color: colors.$blue-300; + } + + &--tip::before { + content: "💡"; + } +} diff --git a/airbyte-webapp/src/components/Markdown/remarkAdmonitionsPlugin.ts b/airbyte-webapp/src/components/Markdown/remarkAdmonitionsPlugin.ts index 44ae352cefa7..4dbde67795e5 100644 --- a/airbyte-webapp/src/components/Markdown/remarkAdmonitionsPlugin.ts +++ b/airbyte-webapp/src/components/Markdown/remarkAdmonitionsPlugin.ts @@ -3,6 +3,11 @@ import { Plugin } from "unified"; import { Node } from "unist"; import { visit } from "unist-util-visit"; +// Since we're dynamically accessing the admonition--{node.name} classes, the linter +// can't determine that those are used, thus we need to ignore unused classes here. +// eslint-disable-next-line css-modules/no-unused-class +import styles from "./admonitions.module.scss"; + const SUPPORTED_ADMONITION_NAMES: Readonly = ["note", "tip", "info", "caution", "warning", "danger"]; const SUPPORTED_NODE_TYPES: Readonly = ["textDirective", "leafDirective", "containerDirective"]; @@ -13,7 +18,7 @@ export const remarkAdmonitionsPlugin: Plugin<[], Root> = () => (tree) => { } const data = node.data ?? (node.data = {}); - const className = `admonition admonition--${node.name}`; + const className = `${styles.admonition} ${styles[`admonition--${node.name}`]}`; data.hName = "div"; data.hProperties = { class: className };