Added a story for LeftNavBar component

[alexandriaroberts]

Created story tests for the LeftNavBar component

Description

• Create story file /src/components/LeftNavBar/LeftNavBar.stories.tsx

• Writes story testing render of LeftNavBar component in context of use

Related Issue

closes #14966

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	2f2c333
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/67e3aac771947d0008ab18db
😎 Deploy Preview	https://deploy-preview-14970--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 53 (🔴 down 7 from production) Accessibility: 95 (🟢 up 1 from production) Best Practices: 89 (🔴 down 8 from production) SEO: 98 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[TylerAPfledderer]

Hey @alexandriaroberts!

Thank you for your contributions to the Ethereum website! 😄 I know this PR has been sitting for a while. The core team has many projects of focus and will reach this as soon as possible for a final review.

I took a look and offer suggested changes to ensure this new store file is consistent with the others in the project, as well as being practical in how it appropriately "re-enacts" this components current rendering in the project.

In addition to changes I provide within the meta object, I also think there should be only one story. The dropdown button is used more often than not right now, and increasing the max depth does not provide a major design change.

So in only having one story, we change the import alias from LeftNavbar to LeftNavBarComponent, so that the name of the single story is called LeftNavBar.

export const LeftNavBar: Story = {
  args: {
    tocItems: mockTocItems,
    dropdownLinks: mockDropdownLinks,
    maxDepth: 2,
  },
}

Also, condensing to a single story here minimizes the number of files to rebuild when needed in Chromatic for billing purposes.

[TylerAPfledderer]

For consistency, we use the satisfies keyword as the most up-to-date approach in typing the meta object to ensure that required args aren't missing (not just invalid).

We also should better emulated how we expect this component to be rendered in context. We should allow the story layout to be fullscreen, and create a decorator around the rendering with a max width that matches the max width LeftNavBar is given on a page. Here, that max width is 400px. (See Roadmap page for example)

Suggested change

	const meta: Meta<typeof LeftNavBar> = {
	title: "Molecules / Navigation / LeftNavBar",
	component: LeftNavBar,
	parameters: {
	layout: "centered",
	},
	}
	const meta = {
	title: "Molecules / Navigation / LeftNavBar",
	component: LeftNavBar,
	parameters: {
	layout: "fullscreen",
	},
	decorators: [
	(Story) => (
	<div className="max-w-[496px]">
	<Story />
	</div>
	),
	],
	} satisfies Meta<typeof LeftNavBar>

[alexandriaroberts]

Hi @TylerAPfledderer no worries really. I know they been busy, and thank you for reviewing it. It makes sense what you say so I will update that. :)

[TylerAPfledderer]

@pettinarip this is exposing an oddity with the maxDepth prop. It appears that the change in the depth number does not actually render the sub-links... after if this prop is being ignored.

And pushing any change here or updating this branch with dev should rerun the UI Test check, because the billing has been updated.

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[wackerow]

Hey @alexandriaroberts, appreciate the work here though this component has recently been deprecated in favor of a general purpose TableOfContents component in #11650... closing this one out