feat: use href in forward component

italia · Nov 7, 2024 · 9e20c53 · 9e20c53
1 parent 525105c
commit 9e20c53
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/Forward/Forward.tsx b/src/Forward/Forward.tsx
@@ -1,25 +1,31 @@
-import React, { FC, AnchorHTMLAttributes, MutableRefObject } from 'react';
+import React, { FC, AnchorHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 export interface ForwardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Classi aggiuntive da usare per il componente Forward */
   className?: string;
   /** Riferimento al nodo a cui scorrere quando premuto */
-  scrollToRef: MutableRefObject<Element | null>;
+  // scrollToRef: MutableRefObject<Element | null>;
   testId?: string;
 }
 
-export const Forward: FC<ForwardProps> = ({ className, scrollToRef, children, testId, ...attributes }) => {
+export const Forward: FC<ForwardProps> = ({ className, children, testId, ...attributes }) => {
   const classes = classNames(className, 'forward');
   return (
     <a
       className={classes}
-      onClick={() =>
-        scrollToRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start'
-        })
-      }
+      onClick={(e) => {
+        e.preventDefault()
+        if (attributes.href) {
+          const scrollToRef = document.querySelector(attributes.href)
+          if (scrollToRef) {
+            scrollToRef.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            })
+          }
+        }
+      }}
       data-testid={testId}
       {...attributes}
     >

diff --git a/stories/Components/Forward.stories.tsx b/stories/Components/Forward.stories.tsx
@@ -17,11 +17,11 @@ export default meta;
 type Story = StoryObj<typeof Forward>;
 
 const EsempiHooks = () => {
-  const ref = React.useRef(null);
+  // const ref = React.useRef(null);
   return (
     <div>
       <Card>
-        <Forward scrollToRef={ref}>
+        <Forward href='#hereSection' aria-label='Vai a: Sezione di esempio'>
           <Icon color='primary' icon='it-expand' />
         </Forward>
       </Card>
@@ -77,7 +77,7 @@ const EsempiHooks = () => {
           commodo ea sit eu.
         </p>
       </div>
-      <div ref={ref}>Scroll to Here</div>
+      <div id="hereSection">Scroll to Here</div>
     </div>
   )
 

diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
@@ -24552,7 +24552,9 @@ exports[`Stories Snapshots Documentazione/Menu di navigazione/Forward Esempi 1`]
         class="card"
       >
         <a
+          aria-label="Vai a: Sezione di esempio"
           class="forward"
+          href="#hereSection"
         >
           <svg
             class="icon icon-primary"
@@ -24589,7 +24591,9 @@ exports[`Stories Snapshots Documentazione/Menu di navigazione/Forward Esempi 1`]
         Nulla est ullamco ut irure incididunt nothing Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse pain fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat pain magna irure esse tempor ad mollit. Pain in pain nothing minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.
       </p>
     </div>
-    <div>
+    <div
+      id="hereSection"
+    >
       Scroll to Here
     </div>
   </div>