-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #971 from equinor/chore/tutorial-guide
📝 Added documentation on how to use TutorialHighlightingProvider
- Loading branch information
Showing
8 changed files
with
108 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
|
|
||
| code { | ||
| background: #3d3d3d; | ||
| padding: 2px 4px; | ||
| color: white; | ||
| font-family: monospace; | ||
| white-space: pre-wrap; | ||
| } | ||
|
|
||
| pre:has(> code) { | ||
| background: #3d3d3d; | ||
| padding: 24px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -103,6 +103,7 @@ const meta: Meta = { | |
| )} | ||
| /> | ||
| ), | ||
| tags: ['!autodocs'], | ||
| parameters: { | ||
| layout: 'fullscreen', | ||
| design: { | ||
|
|
||
64 changes: 64 additions & 0 deletions
64
src/providers/TutorialHighlightingProvider/TutorialHighlightingProvider.docs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
|
|
||
|
|
||
| ## How to use the TutorialHighlightingProvider | ||
|
|
||
| 1. Install `@equinor/subsurface-app-management` at `2.5.2` or above | ||
|
|
||
| 2. Place the `TutorialHighlightingProvider` inside the Routes, usually this would be here: | ||
|
|
||
| <br /> | ||
|
|
||
| ```typescript dark | ||
| // src/App.tsx | ||
| ... | ||
| import { TutorialHighlightingProvider, ... } from '@equinor/amplify-component-lib'; | ||
|
|
||
| export function App() { | ||
| const { isOpen } = useSideBar(); | ||
|
|
||
| return ( | ||
| <TutorialHighlightingProvider> | ||
| <Template.GlobalStyles /> | ||
| <Template> | ||
| <ApplicationTopBar /> | ||
| <Template.Container> | ||
| <ApplicationSideBar /> | ||
| <Template.Content $open={isOpen} id="content"> | ||
| <Outlet /> | ||
| </Template.Content> | ||
| </Template.Container> | ||
| </Template> | ||
| </TutorialHighlightingProvider> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| This needs to be placed within the Routes, because it uses hooks from `react-router` to figure out what path you are on | ||
|
|
||
|
|
||
| 3. Add the `<TopBar.Tutorials>` component to the topbar to make the menu accessible to the user | ||
|
|
||
|
|
||
| 4. Create your tutorial in SAM and copy the tutorials ID to your app so you can use them to generate the correct IDs for the elements you want to highlight | ||
|
|
||
| ```tsx dark | ||
| // src/constants/tutorials.ts | ||
| const MY_TUTORIAL_ID = 'my-tutorial-id'; | ||
|
|
||
| // src/pages/SomeRandomPage.tsx | ||
| import { highlightTutorialElementID } from '@equinor/amplify-component-lib'; | ||
|
|
||
| export const SomeRandomPage = () => { | ||
|
|
||
| return ( | ||
| <div> | ||
| <h1>This is the header</h1> | ||
| <div id={highlightTutorialElementID(MY_TUTORIAL_ID, 0)}>First step in the tutorial!</div> | ||
| <section>Unrelated content</section> | ||
| <div id={highlightTutorialElementID(MY_TUTORIAL_ID, 1)}>Second step in the tutorial!</div> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| This function takes in the tutorial ID and the step index, and generates a unique ID for the element you want to highlight. This is then again used by the `TutorialHighlightingProvider` to figure out the elements position and size. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters