gatsby-theme-carbon 4.3.66 → 4.4.0

package/gatsby-config.mjs

@@ -51,6 +51,7 @@ export default (themeOptions) => {
     gatsbyPluginSharpOptions = {},
     isServiceWorkerEnabled = false,
     isSwitcherEnabled = true,
+    isCodeWrapEnabled = false,
   } = themeOptions;
 
   const theme = { ...defaultTheme, ...themeOption };
@@ -101,6 +102,7 @@ export default (themeOptions) => {
       interiorTheme: theme.interior,
       isServiceWorkerEnabled,
       isSwitcherEnabled,
+      isCodeWrapEnabled,
       title: 'Gatsby Theme Carbon',
       description:
         'Add a description by supplying it to siteMetadata in your gatsby-config.js file.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.3.66",
+  "version": "4.4.0",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/src/components/AnchorLinks/AnchorLinks.module.scss

@@ -32,6 +32,17 @@
     color: currentColor;
     cursor: pointer;
   }
+
+  &:focus-visible {
+    outline: 2px solid $focus;
+    outline-offset: 2px;
+  }
+}
+
+// Keep each link (and its focus ring) inside a single CSS column fragment
+.multiple-columns li,
+.multiple-columns .link {
+  break-inside: avoid;
 }
 
 .list--small .link {

package/src/components/ArticleCard/ArticleCard.js

@@ -155,7 +155,7 @@ ArticleCard.propTypes = {
   readTime: PropTypes.string,
 
   /**
-   * Action icon, default is blank, options are Launch, ArrowRight, Download
+   * Action icon, default is blank, options are launch, arrowRight, download, disabled, email
    */
   actionIcon: PropTypes.string,
 

package/src/components/Code/Code.js

@@ -14,10 +14,60 @@ import Sidebar from './Sidebar';
 
 import useMetadata from '../../util/hooks/useMetadata';
 
+export const parseCodeMetaData = (metaData) => {
+  // metaData string is of format: path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com showAll wrap
+  const result = { path: '', src: '', showAll: false, wrap: null };
+  if (!metaData) {
+    return result;
+  }
+  const metaDataObject = metaData.split(' ').reduce((obj, item) => {
+    if (!item) {
+      return obj;
+    }
+    const [key, value] = item.split('=');
+
+    // Checking for boolean values coming as string or not coming like in showAll prop
+    if (value === 'true' || !value) {
+      obj[key] = true;
+    } else if (value === 'false') {
+      obj[key] = false;
+    } else {
+      // else setting what is passed after =
+      obj[key] = value;
+    }
+    return obj;
+  }, {});
+
+  if (metaDataObject.path) {
+    result.path = metaDataObject.path;
+  }
+
+  if (metaDataObject.src) {
+    result.src = metaDataObject.src;
+  }
+
+  if (metaDataObject.showAll) {
+    result.showAll = true;
+  }
+
+  if (metaDataObject.wrap === true || metaDataObject.wrap === 'true') {
+    result.wrap = true;
+  } else if (metaDataObject.wrap === false || metaDataObject.wrap === 'false') {
+    result.wrap = false;
+  }
+
+  return result;
+};
+
 const Code = ({ children, className: classNameProp = '', metaData }) => {
-  const [path, setPath] = useState('');
-  const [src, setSrc] = useState('');
-  const [showAll, setShowAll] = useState(false);
+  // Initialize from metaData so SSR/first paint already reflects
+  // path/src/showAll/wrap (useEffect below keeps them in sync on change).
+  const [path, setPath] = useState(() => parseCodeMetaData(metaData).path);
+  const [src, setSrc] = useState(() => parseCodeMetaData(metaData).src);
+  const [showAll, setShowAll] = useState(
+    () => parseCodeMetaData(metaData).showAll
+  );
+  const [wrap, setWrap] = useState(() => parseCodeMetaData(metaData).wrap);
   const [hasMoreThanNineLines, setHasMoreThanNineLines] = useState(false);
   const [shouldShowMore, setShouldShowMore] = useState(false);
   const [isInlineCode, setIsInlineCode] = useState(false);
@@ -29,38 +79,15 @@ const Code = ({ children, className: classNameProp = '', metaData }) => {
   }, [classNameProp]);
 
   useEffect(() => {
-    // metaData string is of format: path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com
-    if (metaData) {
-      const metaDataObject = metaData.split(' ').reduce((obj, item) => {
-        const [key, value] = item.split('=');
-
-        // Checking for boolean values coming as string or not coming like in showAll prop
-        if (value === 'true' || !value) {
-          obj[key] = true;
-        } else if (value === 'false') {
-          obj[key] = false;
-        } else {
-          // else setting what is passed after =
-          obj[key] = value;
-        }
-        return obj;
-      }, {});
-
-      if (metaDataObject.path) {
-        setPath(metaDataObject.path);
-      }
-
-      if (metaDataObject.src) {
-        setSrc(metaDataObject.src);
-      }
-
-      if (metaDataObject.showAll) {
-        setShowAll(true);
-      }
-    }
+    const parsed = parseCodeMetaData(metaData);
+    setPath(parsed.path);
+    setSrc(parsed.src);
+    setShowAll(parsed.showAll);
+    setWrap(parsed.wrap);
   }, [metaData]);
 
-  const { interiorTheme } = useMetadata();
+  const { interiorTheme, isCodeWrapEnabled } = useMetadata();
+  const shouldWrap = wrap !== null ? wrap : Boolean(isCodeWrapEnabled);
   const language = classNameProp.replace(/language-/, '').replace('mdx', 'jsx');
 
   const removeTrailingEmptyLine = (lines) => {
@@ -90,6 +117,7 @@ const Code = ({ children, className: classNameProp = '', metaData }) => {
   if (isInlineCode) {
     return <code>{children}</code>;
   }
+  const showToggleButton = hasMoreThanNineLines && !showAll;
   return (
     <Row className={cx(styles.row)}>
       <PathRow src={src} path={path}>
@@ -100,20 +128,33 @@ const Code = ({ children, className: classNameProp = '', metaData }) => {
         language={language}
         theme={getTheme(interiorTheme)}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <div className={styles.container}>
+          <div
+            className={cx(styles.container, {
+              [styles.hasButton]: showToggleButton,
+              [styles.wrapContainer]: shouldWrap,
+            })}>
             <pre
               className={cx(styles.highlight, {
                 [styles.sideBarMinHeight]: !path && src,
+                [styles.wrap]: shouldWrap,
                 [className]: className,
               })}
               style={style}>
-              {getLines(tokens).map((line, i) => (
-                <div {...getLineProps({ line, key: i })} key={i}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} key={key} />
-                  ))}
-                </div>
-              ))}
+              {getLines(tokens).map((line, i) => {
+                const lineProps = getLineProps({ line, key: i });
+                return (
+                  <div
+                    {...lineProps}
+                    key={i}
+                    className={cx(lineProps.className, {
+                      [styles.wrappedLine]: shouldWrap,
+                    })}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} key={key} />
+                    ))}
+                  </div>
+                );
+              })}
             </pre>
             <Sidebar path={path} src={src}>
               {children}
@@ -121,12 +162,14 @@ const Code = ({ children, className: classNameProp = '', metaData }) => {
           </div>
         )}
       </Highlight>
-      {hasMoreThanNineLines && !showAll && (
+      {showToggleButton && (
         <button
           className={cx(styles.showMoreButton, {
             [styles.dark]: interiorTheme === 'dark',
           })}
           onClick={() => setShouldShowMore(!shouldShowMore)}
+          aria-expanded={shouldShowMore}
+          aria-label={shouldShowMore ? 'Show less code' : 'Show more code'}
           type="button">
           {shouldShowMore ? (
             <>

package/src/components/Code/Code.module.scss

@@ -67,6 +67,44 @@ li .row {
   text-wrap: wrap;
 }
 
+// Reserve room for the absolutely positioned Show more/less button so it
+// doesn't cover code in default and nested-list contexts (see #868).
+.has-button .highlight {
+  padding-bottom: $spacing-10;
+}
+
+// Opt-in soft wrap via ```lang wrap. Breaks long log lines/URLs instead of
+// forcing horizontal scroll, while keeping copy content unchanged.
+.highlight.wrap {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  overflow-x: hidden;
+  // Reserve room for the copy/src buttons so wrapped line endings never
+  // render underneath the sidebar (see #868).
+  padding-right: 3rem;
+}
+
+.wrapped-line {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+// In wrap mode nothing scrolls under the sidebar, so drop the fade gradient
+// (it would obscure wrapped line endings) and shrink to the button column.
+.wrap-container .sidebar {
+  background: transparent;
+  padding-left: 8px;
+}
+
+.wrap-container .sidebar.dark {
+  background: transparent;
+}
+
+// Don't force extra scroll width when wrapping; keep it for scroll mode only.
+.highlight.wrap :global(.token:last-of-type) {
+  margin-right: 0;
+}
+
 .sideBarMinHeight {
   min-height: 96px;
 }

package/src/components/GlobalSearch/GlobalSearch.module.scss

@@ -64,7 +64,7 @@
   padding: 0;
   border: 0;
   margin: -1px;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   visibility: inherit;
   white-space: nowrap;
 }

package/src/components/Tabs/Tabs.js

@@ -141,21 +141,23 @@ export const Tabs = (props) => {
     [setActiveTab, activeTab, tabList.current]
   );
   return (
-    <TabContext.Provider value={value}>
-      {isMobile ? (
-        <Select _id={id}>{props.children}</Select>
-      ) : (
-        <TabList _id={id}>{props.children}</TabList>
-      )}
-      {React.Children.map(props.children, (child, index) => {
-        if (elementIsNullOrString(child)) return child;
-        return React.cloneElement(child, {
-          _id: `${id}__${index}`,
-          active: activeTab === index,
-          index,
-        });
-      })}
-    </TabContext.Provider>
+    <div className={cx(styles.tabs, props.className)}>
+      <TabContext.Provider value={value}>
+        {isMobile ? (
+          <Select _id={id}>{props.children}</Select>
+        ) : (
+          <TabList _id={id}>{props.children}</TabList>
+        )}
+        {React.Children.map(props.children, (child, index) => {
+          if (elementIsNullOrString(child)) return child;
+          return React.cloneElement(child, {
+            _id: `${id}__${index}`,
+            active: activeTab === index,
+            index,
+          });
+        })}
+      </TabContext.Provider>
+    </div>
   );
 };
 

package/src/components/Tabs/Tabs.module.scss

@@ -1,3 +1,7 @@
+.tabs + * {
+  --space: #{$spacing-05};
+}
+
 .tab-list {
   display: flex;
   max-width: min-content;

package/src/components/markdown/Markdown.module.scss

@@ -193,3 +193,11 @@ img {
 span:has(:global(.gatsby-resp-image-wrapper)) {
   display: block;
 }
+
+// Linked images ([![alt](src)](href)) inherit paragraph text padding.
+// Reset it so the image aligns flush like a standalone image.
+.paragraph > a:global(.gatsby-resp-image-link) {
+  display: block;
+  margin: 0;
+  padding: 0;
+}

package/src/util/hooks/useMetadata.js

@@ -12,6 +12,7 @@ const useMetadata = () => {
           isSwitcherEnabled
           homepageTheme
           interiorTheme
+          isCodeWrapEnabled
           navigationStyle
           lang
         }