feat(UserGuide): component update with animated arrow

livechat · Jan 20, 2025 · 5882c54 · 5882c54
2 parents 6839890 + 42e0776
commit 5882c54
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 756 deletions.
diff --git a/packages/react-components/src/components/Tooltip/Tooltip.mdx b/packages/react-components/src/components/Tooltip/Tooltip.mdx
@@ -18,7 +18,6 @@ The Tooltip component provides contextual information when users interact with e
 - [Info Tooltip](#InfoTooltip)
 - [Interactive Tooltip](#InteractiveTooltip)
 - [Reports Tooltip](#ReportsTooltip)
-- [User Guide Tooltip](#UserGuideTooltip)
 
 
 ### Default Tooltip <a id="DefaultTooltip" />
@@ -116,100 +115,6 @@ import {
 
 <Canvas of={Stories.TooltipReports} />
 
-### User Guide Tooltip <a id="UserGuideTooltip" />
-
-A simple user guide that can be used to guide users through a series of steps.
-
-```tsx
-import {
-  UserGuide,
-  Button,
-} from '@livechat/design-system-react-components';
-
-const reducer = (
-    state: { isVisible: boolean; reference: string },
-  action: { type: string }
-) => {
-  if (action.type === 'reference1') {
-    return {
-      ...state,
-      reference: 'reference1',
-    };
-  }
-  if (action.type === 'reference2') {
-    return {
-      ...state,
-      reference: 'reference2',
-    };
-  }
-  if (action.type === 'reference3') {
-    return {
-      ...state,
-      reference: 'reference3',
-    };
-  }
-  if (action.type === 'isVisible') {
-    return {
-      reference: 'reference1',
-      isVisible: !state.isVisible,
-    };
-  }
-
-  return state;
-};
-
-const [state, dispatch] = React.useReducer(reducer, {
-  reference: 'reference1',
-  isVisible: false,
-});
-
-return (
-  <div className="simple-user-guide-container">
-    <Button onClick={() => dispatch({ type: 'isVisible' })}>
-      Start guide
-    </Button>
-    <div className="guide-container">
-      <div
-        onClick={() => dispatch({ type: 'reference1' })}
-        id="reference1"
-        className="guide-reference"
-      >
-        Example reference 1
-      </div>
-      <div
-        onClick={() => dispatch({ type: 'reference2' })}
-        id="reference2"
-        className="guide-reference"
-      >
-        Example reference 2
-      </div>
-
-      <div
-        onClick={() => dispatch({ type: 'reference3' })}
-        id="reference3"
-        className="guide-reference"
-      >
-        Example reference 3
-      </div>
-
-      <UserGuide
-        isVisible={state.isVisible}
-        parentElementName={`#${state.reference}`}
-        zIndex={1000}
-        shouldSlide
-      >
-        {state.reference === 'reference1' && <Button onClick={() => dispatch({ type: 'reference2' })}>Next</Button>}
-        {state.reference === 'reference2' && <Button onClick={() => dispatch({ type: 'reference3' })}>Next</Button>}
-        {state.reference === 'reference3' && <Button onClick={() => dispatch({ type: 'isVisible' })}>Finish</Button>}
-      </UserGuide>
-    </div>
-  </div>
-);
-
-```
-
-<Canvas of={Stories.SimpleUserGuide} />
-
 ## Component API <a id="ComponentAPI" />
 
 <ArgTypes of={Stories.Default} sort="requiredFirst" />

diff --git a/packages/react-components/src/components/Tooltip/Tooltip.stories.css b/packages/react-components/src/components/Tooltip/Tooltip.stories.css
@@ -19,33 +19,6 @@
   height: 800px;
 }
 
-.simple-user-guide-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.guide-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.guide-reference {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border-default);
-  border-radius: 4px;
-  background-color: var(--surface-basic-default);
-  font-size: 18px;
-  padding: 10px;
-}
-
 .tooltip-preview-reports {
   display: flex;
   align-items: center;