Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Groove Storybook Design System (SDS) is a reusable component library that helps developers build Groove branded, consistent UIs faster. It's an SSOT (single source of truth) for all UI components used across various Groove applications.
To use SDS in your project, first install the package:
To see available components, navigate through the sidebar on the left and copy the source code. For instance, to use the Heading
component:
Import it into your UI:
and use it like so:
Components within the design system assume that a set of global variables and styles have been configured. Here is how you can use Emotion Globals to inject our global variables and styles into your app:
Rather than @import
fonts in the GlobalStyle
component, the design system's font URL is exported with the intention of using it in a <link>
tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.