feat: add anchors to SectionName and Title

packages/storybook-blocks/src/components/anchor/anchor-icon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function AnchorIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.8501 4.59961C6.26431 4.59961 6.6001 4.9354 6.6001 5.34961C6.6001 5.76382 6.26431 6.09961 5.8501 6.09961H5.4501C4.08319 6.09961 2.9751 7.20771 2.9751 8.57461C2.9751 9.94151 4.08319 11.0496 5.4501 11.0496H5.8501C6.26431 11.0496 6.6001 11.3854 6.6001 11.7996C6.6001 12.2138 6.26431 12.5496 5.8501 12.5496H5.4501C3.25477 12.5496 1.4751 10.7699 1.4751 8.57461C1.4751 6.37928 3.25477 4.59961 5.4501 4.59961H5.8501ZM9.4251 5.34961C9.4251 4.9354 9.76088 4.59961 10.1751 4.59961H10.5501C12.7454 4.59961 14.5251 6.37928 14.5251 8.57461C14.5251 10.7699 12.7454 12.5496 10.5501 12.5496H10.1751C9.76088 12.5496 9.4251 12.2138 9.4251 11.7996C9.4251 11.3854 9.76088 11.0496 10.1751 11.0496H10.5501C11.917 11.0496 13.0251 9.94151 13.0251 8.57461C13.0251 7.20771 11.917 6.09961 10.5501 6.09961H10.1751C9.76088 6.09961 9.4251 5.76382 9.4251 5.34961ZM4.5376 8.56289C4.5376 8.14868 4.87338 7.81289 5.2876 7.81289H10.6893C11.1035 7.81289 11.4393 8.14868 11.4393 8.56289C11.4393 8.9771 11.1035 9.31289 10.6893 9.31289H5.2876C4.87338 9.31289 4.5376 8.9771 4.5376 8.56289Z"
+        fill="#BFBFBF"
+      />
+    </svg>
+  );
+}

packages/storybook-blocks/src/components/anchor/anchor.module.scss

@@ -0,0 +1,3 @@
+.anchor {
+  transition: opacity 0.1s ease-in-out;
+}

packages/storybook-blocks/src/components/anchor/anchor.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './anchor.module.scss';
+import AnchorIcon from './anchor-icon';
+import cx from 'classnames';
+
+interface AnchorProps {
+  id: string;
+  className?: string;
+}
+
+export default function Anchor({ id, className }: AnchorProps) {
+  const handleClick = () => {
+    if (window.parent) {
+      // Update the parent window hash to match the clicked anchor
+      window.parent.location.hash = `#${id}`;
+    }
+  };
+
+  return (
+    <a onClick={handleClick} href={`#${id}`} className={cx(styles.anchor, className)} target="_self">
+      <AnchorIcon />
+    </a>
+  );
+}

packages/storybook-blocks/src/components/section-name/section-name.module.scss

@@ -1,4 +1,4 @@
-@import "../../styles/mixins/typography";
+@import '../../styles/mixins/typography';
 
 .sectionName {
   margin-top: var(--sb-spacing-between-sections);
@@ -10,10 +10,19 @@
   line-height: 33px;
   letter-spacing: -1px;
   text-align: left;
-  display: grid;
+
+  .anchor {
+    margin-left: var(--sb-spacing-small);
+    opacity: 0;
+  }
+
+  &:hover .anchor {
+    opacity: 1;
+  }
 
   &:after {
-    content: "";
+    content: '';
+    display: block;
     margin-top: var(--sb-spacing-small);
     background: var(--sb-primary-text-color);
     height: 2px;

packages/storybook-blocks/src/components/section-name/section-name.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import styles from './section-name.module.scss';
+import Anchor from '../anchor/anchor';
 
 interface SectionNameProps extends React.HTMLAttributes<HTMLHeadingElement> {
   className?: string;
@@ -16,6 +17,7 @@ const SectionName: React.FC<SectionNameProps> = ({ className, children, ...props
   return (
     <h2 id={id} className={cx(styles.sectionName, className)} {...props}>
       {children}
+      <Anchor id={id} className={styles.anchor} />
     </h2>
   );
 };

packages/storybook-blocks/src/components/title/title.module.scss

@@ -1,5 +1,14 @@
-@import "../../styles/mixins/typography";
+@import '../../styles/mixins/typography';
 
 .title {
   @include sb-title-appearance;
+
+  .anchor {
+    margin-left: var(--sb-spacing-small);
+    opacity: 0;
+  }
+
+  &:hover .anchor {
+    opacity: 1;
+  }
 }

packages/storybook-blocks/src/components/title/title.tsx

@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import styles from './title.module.scss';
+import Anchor from '../anchor/anchor';
 
 interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
+  children: string;
   className?: string;
 }
 
-const Title: React.FC<TitleProps> = ({ className, ...props }) => {
-  return <h3 className={cx(styles.title, className)} {...props} />;
+const Title: React.FC<TitleProps> = ({ className, children, ...props }) => {
+  const id = useMemo(
+    () => children.toLowerCase().replaceAll('’', '').replaceAll("'", '').split(' ').join('-'),
+    [children],
+  );
+
+  return (
+    <h3 className={cx(styles.title, className)} {...props}>
+      {children}
+      <Anchor id={id} className={styles.anchor} />
+    </h3>
+  );
 };
 
 export default Title;