fix(ui-kit): fix comments color when highlighted (#1857)

commercetools · Oct 19, 2023 · e8e57ed · e8e57ed
1 parent d0a948b
commit e8e57ed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/.changeset/chilly-pillows-remain.md b/.changeset/chilly-pillows-remain.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/ui-kit': patch
+---
+
+Fix color issue with comments in code examples when they are highlighted.
diff --git a/packages/ui-kit/src/components/code-block.tsx b/packages/ui-kit/src/components/code-block.tsx
@@ -5,7 +5,7 @@ import { css } from '@emotion/react';
 import Tooltip from '@commercetools-uikit/tooltip';
 import SpacingsInline from '@commercetools-uikit/spacings-inline';
 import { ClipboardIcon } from '@commercetools-uikit/icons';
-import { Highlight } from 'prism-react-renderer';
+import { Highlight, Token } from 'prism-react-renderer';
 import {
   colors,
   dimensions,
@@ -104,6 +104,19 @@ const getLineStyles = (options: {
   return [promptLineStyles, highlightLineStyles];
 };
 
+const getTokenStyles = (options: {
+  token: Token;
+  shouldHighlightLine: boolean;
+}) => {
+  if (options.token.types.includes('comment') && options.shouldHighlightLine) {
+    return {
+      color: colors.light.textInverted,
+    };
+  }
+
+  return {};
+};
+
 /**
  * This components implements most of the logic from `gatsby-remark-prismjs`.
  * https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs
@@ -285,7 +298,17 @@ const CodeBlock = (props: CodeBlockProps) => {
                       })}
                     >
                       {line.map((token, key) => (
-                        <span key={key} {...getTokenProps({ token, key })} />
+                        <span
+                          key={key}
+                          {...getTokenProps({
+                            token,
+                            key,
+                            style: getTokenStyles({
+                              token,
+                              shouldHighlightLine,
+                            }),
+                          })}
+                        />
                       ))}
                     </div>
                   );

diff --git a/websites/docs-smoke-test/src/content/views/code-blocks.mdx b/websites/docs-smoke-test/src/content/views/code-blocks.mdx
@@ -37,9 +37,9 @@ curl -sH "Authorization: Bearer ACCESS_TOKEN" https://api.sphere.io/PROJECT_KEY/
 
 # Javascript
 
-Passing the option `highlightLines="2,5-7,11..16`.
+Passing the option `highlightLines="1-2,5-7,11..16`.
 
-```javascript highlightLines="2,5-7,11..16"
+```javascript highlightLines="1-2,5-7,11..16"
 // Constructor
 var anObject = new Object();