diplodoc-platform / diplodoc-platform/components

Add Storybook Implementation Controls Component

Open
#347 0 comments 0 reactions 0 assignees View on GitHub
tests
Dominant language
TypeScript
Stars
14
Forks
35
Avg merge
10h 6m
Merged PRs (30d)
17

Description

We need to add a Storybook entry for the Controls component.
https://github.com/diplodoc-platform/components/tree/master/src/components/Controls

This will facilitate easier testing, visualization, and documentation of the component for developers and designers.

Tasks:
- Create a new story file for the ToC component in the stories directory.
https://github.com/diplodoc-platform/components/tree/master/demo/src/Components
- Ensure the Storybook entry demonstrates the component’s basic functionality and key features.
- Implement story controls to allow interactive manipulation of component properties (e.g., different heading levels, styling options).
- Provide clear documentation within Storybook explaining how the component works, including examples of different use cases.

Acceptance Criteria:
- The ToC component appears in Storybook with a variety of examples and variations.
- Interactive controls are available and work as expected.
- Documentation within the Storybook is clear and helpful to users.

Contributor guide

Open the contributing guide

Research direction

Start by comparing the Controls component in src/components/Controls with the existing stories under demo/src/Components, noting that the issue alternates between Controls and ToC. Add a Storybook story covering the component's examples, interactive properties, and explanatory documentation; done means it appears with working controls and clear variations.

Written by the indexing model from the issue text.

Assessment

Tech stack
storybook, typescript
Domain
documentation, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.