Horizontal table of contents implementation

[KashishMistry]

Related Item(s)

#402

Changes

• Added horizontal table of contents component
• Implementation is such that the config of the project metadata will determine if the table of contents will be horizontal or vertical
• Updated version to 3.1.2 in package.json

Notes

Testing

With this PR, the horizontal table of contents will be shown in the demo (the vertical table of contents has been commented out along with some styles, will be removed before merging) to test the component.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/horizontal_tabs/#/en/00000000-0000-0000-0000-000000000000

[yileifeng]

Looks good, just a question but do we want to have the horizontal ToC collapsible?

Just as a reminder will also need to update the package.json version and publish to NPM once everything is tested and working for the editor preview.

Reviewable status: 0 of 4 files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

---

src/components/story/story-content.vue line 4 at r1 (raw file):

    <div class="items-stretch">
        <!-- :class="{ flex: !$props.config?.tocOrientation || $props.config?.tocOrientation === 'vertical' }" -->
        <!-- v-if="$props.config?.tocOrientation === 'horizontal'" -->

Blocking until ready to merge

[RyanCoulsonCA]

Awesome work, looks great! I noticed that when you click on one of the chapters, part of the content is blocked by the ToC. We may need to tweak the scrollToChapter function to account for the height of the ToC element to get around this.

Reviewed 4 of 4 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

[KashishMistry]

Donethanks (for the scrolling issue).

Reviewable status: 3 of 4 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

[RyanCoulsonCA]

Reviewed 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

[KashishMistry]

Some formatting changes made to align table of contents and set css properties dynamically

[yileifeng]

Reviewed 1 of 4 files at r1, 3 of 4 files at r4, 1 of 1 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[yileifeng]

Reviewed 1 of 1 files at r6, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[dnlnashed]

Reviewed 1 of 4 files at r1, 3 of 4 files at r4, 1 of 1 files at r5, 1 of 1 files at r6, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[yileifeng]

Reviewed 2 of 2 files at r7, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[yileifeng]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

---

src/components/story/story-content.vue line 3 at r7 (raw file):

<template>
    <div class="items-stretch">
        <!-- :class="{ flex: !$props.config?.tocOrientation || $props.config?.tocOrientation === 'vertical' }" -->

blocking until merge

[RyanCoulsonCA]

Reviewed 2 of 4 files at r4, 1 of 1 files at r6, 2 of 2 files at r7, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

[yileifeng]

Reviewed 3 of 3 files at r9, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)