Merge d3f3c46 into 760df26

SAP · Aug 10, 2022 · 6c907a7 · 6c907a7
2 parents 760df26 + d3f3c46
commit 6c907a7
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 11 deletions.
diff --git a/.storybook/components/TableOfContent.tsx b/.storybook/components/TableOfContent.tsx
@@ -93,7 +93,7 @@ export const TableOfContent = ({ headingSelector = 'h2.sbdocs-h2, h3.sbdocs-h3,
     <>
       <h3 className={classes.header}>Contents</h3>
       <div className={classes.fixedContainer}>
-        <div className={`js-toc ${classes.toc}`} />
+        <div className={`js-toc ${classes.toc}`} id="toc-container" />
       </div>
     </>
   );

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -65,21 +65,29 @@
   }
 
   .infoTable {
-      margin: 1rem 0;
-      border-spacing: 0;
-      width: unset;
+    margin: 1rem 0;
+    border-spacing: 0;
+    width: unset;
   }
 
   .infoTable th,
   .infoTable td {
-      margin-top: 0;
-      margin-bottom: 0.75rem;
-      text-align: start;
-      height: 1.5rem
+    margin-top: 0;
+    margin-bottom: 0.75rem;
+    text-align: start;
+    height: 1.5rem;
   }
 
   .infoTable th {
-      padding-inline-end: 1.25rem;
+    padding-inline-end: 1.25rem;
+  }
+
+  /* todo remove when anchors are working again */
+  .md-anchor {
+    float: left;
+    padding-right: 4px;
+    margin-left: -20px;
+    color: inherit;
   }
 </style>
 <script data-ui5-config type="application/json">

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -7,7 +7,7 @@ import { makeDecorator } from '@storybook/addons';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
 import { ContentDensity, ThemeProvider, Themes } from '@ui5/webcomponents-react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 const argTypesCategoryCommonProps = {
   table: { category: 'Common props' }
@@ -45,6 +45,51 @@ const ThemeProviderDecorator = makeDecorator({
   parameterName: 'ThemeProvider',
   wrapper: (Story, context) => {
     const { theme, contentDensity, direction } = context.globals;
+    const svgRef = useRef();
+
+    // todo remove this once mdx anchors are working again (https://github.com/storybookjs/storybook/issues/18395)
+    useEffect(() => {
+      const onAnchorClick = (e) => {
+        const { hash } = e.currentTarget;
+        const { origin, search } = window.parent.location;
+        window.parent.location.replace(`${origin}/${search}${hash}`);
+      };
+      const toKebabCase = (str) =>
+        str &&
+        str
+          .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+          .map((x) => x.toLowerCase())
+          .join('-');
+
+      const toc = document.getElementById('toc-container');
+
+      if (toc?.querySelector('ul')?.children.length) {
+        Array.from(toc?.querySelector('ul').querySelectorAll('a')).forEach((item) => {
+          item.setAttribute('href', `#${toKebabCase(item.textContent)}`);
+        });
+      }
+
+      const headings = [
+        ...Array.from(document.querySelectorAll('h2:not([id])')),
+        ...Array.from(document.querySelectorAll('h3:not([id])')),
+        ...Array.from(document.querySelectorAll('h4:not([id])'))
+      ];
+
+      headings.forEach((item) => {
+        const ae = document.createElement('a');
+        ae.setAttribute('target', '_self');
+        ae.setAttribute('aria-hidden', 'true');
+        ae.setAttribute('class', 'md-anchor');
+        ae.setAttribute('tab-index', '-1');
+        ae.setAttribute('href', `#${toKebabCase(item.textContent)}`);
+        ae.addEventListener('click', onAnchorClick);
+        const clonedSvg = svgRef.current.cloneNode(true);
+        clonedSvg.removeAttribute('style');
+        ae.append(clonedSvg);
+        item.setAttribute('id', toKebabCase(item.textContent));
+        item.appendChild(ae);
+      });
+    }, []);
 
     useEffect(() => {
       if (contentDensity === ContentDensity.Compact) {
@@ -65,6 +110,22 @@ const ThemeProviderDecorator = makeDecorator({
 
     return (
       <ThemeProvider>
+        <svg
+          ref={svgRef}
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          height="16"
+          aria-hidden="true"
+          fill="currentColor"
+          style={{ display: 'none' }}
+          id="temporary-svg"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+          />
+        </svg>
         <Story />
       </ThemeProvider>
     );

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "private": true,
   "license": "Apache-2.0",
   "scripts": {
-    "start": "lerna run build:i18n && start-storybook -p 6006",
+    "start": "lerna run build:i18n && start-storybook --no-manager-cache -p 6006",
     "build": "node scripts/build.js",
     "build:storybook": "lerna run build:i18n && build-storybook -o .out",
     "postinstall": "rimraf node_modules/@types/mocha",