Skip to content

Commit

Permalink
docs: Vibe3 sidebar (#2595)
Browse files Browse the repository at this point in the history
  • Loading branch information
@talkor
talkor authored Nov 19, 2024
1 parent 6ce9b32 commit 5a91e9f
Show file tree
Hide file tree
Showing 122 changed files with 278 additions and 187 deletions.
12 changes: 5 additions & 7 deletions packages/core/.storybook/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 111 additions & 17 deletions packages/core/.storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,37 +7,131 @@
<script src="https://use.fontawesome.com/660238b999.js"></script>
<style>
body {
font-family: "Roboto", sans-serif;
background: #f0f3ff !important;
font-family: "Figtree", sans-serif;
background: #f9f9f9 !important;
font-size: 14px;
}

/* Sections style */
#storybook-explorer-menu .sidebar-item:not([data-parent-id]),
#storybook-explorer-menu .sidebar-item:not([data-parent-id]) a,
#storybook-explorer-menu .sidebar-item:not([data-parent-id]) button {
font-family: "Figtree", sans-serif;
font-size: 16px;
line-height: 16px;
font-weight: 500;
}

/* Sidebar spacings */
#storybook-explorer-menu #foundations {
margin-top: 24px;
}

/* Items style */
#storybook-explorer-menu a,
#storybook-explorer-menu button {
font-family: "Figtree", sans-serif;
font-size: 14px;
line-height: 16px;
font-weight: 500;
color: var(--sb-secondary-text-color);
margin-left: 5px;
}
#storybook-explorer-menu [data-item-id]:focus {
background: none;
}
#storybook-explorer-menu [data-item-id]:hover {
background-color: var(--sb-primary-background-hover-color);
}

/* Items spacings */
#storybook-explorer-menu a,
#storybook-explorer-menu button {
padding-top: 6px;
padding-bottom: 6px;
}

/* Icons color */
#storybook-explorer-menu svg {
color: var(--sb-secondary-text-color);
}

/* Items hover style */
#storybook-explorer-menu [data-item-id] {
margin: 0 8px;
border-radius: 8px;
}

/* Selected items style */
#storybook-explorer-menu [data-selected="true"],
#storybook-explorer-menu [data-selected="true"]:hover {
background: none;
}
#storybook-explorer-menu [data-selected="true"] a,
#storybook-explorer-menu [data-selected="true"] a svg {
color: #5034ff;
}
#storybook-explorer-menu button[aria-expanded="true"],
#storybook-explorer-menu button:focus,
#storybook-explorer-menu a[data-selected]:hover {
background-color: rgba(80, 52, 255, 0.1);

/* Removes node-type icons */
#storybook-explorer-menu .sidebar-item:not([data-parent-id]) > a > div > svg,
#storybook-explorer-menu .sidebar-item[data-parent-id="foundations"] > a > div > svg,
#storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > a > div > svg,
#storybook-explorer-menu .sidebar-item:not([data-parent-id]) > div > svg,
#storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > div > svg {
display: none;
}

#storybook-explorer-menu a[data-selected="true"],
#storybook-explorer-menu a[data-selected="true"]:hover {
background-color: #5034ff;
color: #f0f3ff;
/* Removed items arrow icon */
#storybook-explorer-menu .sidebar-item:not([data-parent-id]) > a > div > span,
#storybook-explorer-menu .sidebar-item[data-parent-id="foundations"] > a > div > span,
#storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > a > div > span,
#storybook-explorer-menu .sidebar-item:not([data-parent-id]) > div > span,
#storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > div > span:empty {
visibility: hidden;
margin-left: 9px;
margin-right: 9px;
}

#storybook-explorer-menu a[data-selected="true"] svg {
color: #f0f3ff;
#storybook-explorer-menu .sidebar-item:not([data-parent-id]):hover > a > div > span,
#storybook-explorer-menu .sidebar-item[data-parent-id="foundations"]:hover > a > div > span,
#storybook-explorer-menu
.sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]):hover
> a
> div
> span,
#storybook-explorer-menu .sidebar-item:not([data-parent-id]):hover > div > span,
#storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]):hover > div > span {
visibility: visible;
}

.os-content button:hover {
background-color: rgba(80, 52, 255, 0.1);
color: #5034ff;
/* Fixes items spacings */
#storybook-explorer-menu button[data-item-id] {
width: calc(100% - 16px);
}

.os-content button:hover svg {
color: #5034ff;
/* Adds a margin between the sidebar sections */
[data-parent-id]:has(+ :not([data-parent-id])) {
margin-bottom: 16px !important;
}

/* Search field */
.sidebar-container .search-field {
margin-left: 8px;
margin-right: 8px;
margin-top: 22px !important;
margin-bottom: 32px;
}
.sidebar-container .sidebar-header {
margin-top: 2px !important;
margin-left: 12px !important;
}
#storybook-explorer-searchfield::placeholder {
color: #32333861;
}

/* Removes content<->sidebar border */
div[role="main"] > div {
box-shadow: none !important;
}

/* https://github.com/storybookjs/storybook/issues/25094 */
Expand Down
3 changes: 2 additions & 1 deletion packages/core/.storybook/manager.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ addons.setConfig({
},
filters: {
patterns: filterStory
}
},
showRoots: false
}
});

Expand Down
15 changes: 6 additions & 9 deletions packages/core/.storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ const preview: Preview = {
ComponentName: ComponentNameDecorator,
h2: SectionName,
h3: Title,
li: AnchorListItem,
p: Paragraph,
AlphaWarning,
DeprecatedWarning,
Expand Down Expand Up @@ -104,15 +103,13 @@ const preview: Preview = {
"Playground",
"Changelog",
"Migration Guide",
"Internal",
"Contributing",
"Foundations",
"Buttons",
"Inputs",
"Data display",
"Media",
"Popover",
"Pickers",
"*",
"Components",
"Layout",
"Text",
"Theming",
"Technical Patterns",
"Accessibility",
"Hooks"
]
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Accordion/Accordion/__stories__/Accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const accordionTemplate = (args: AccordionProps) => {
};

export default {
title: "Data display/Accordion",
title: "Components/Accordion",
component: Accordion,

subcomponents: {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AlertBanner/__stories__/AlertBanner.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ There are five types of alert banners: primary, positive, negative, warning and
description: (
<>
Don’t use banners for notifying a user of an action they have taken. Instead, provide visual feedback with a{" "}
<StorybookLink page="Feedback/Toast">Toast.</StorybookLink>
<StorybookLink page="Components/Toast">Toast.</StorybookLink>
</>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
export const TipWhenToUse = () => (
<Tip title="When to use?">
Alert banners should be reserved only for high-signal, system-level alert messages. For in-app notifications use a{" "}
<StorybookLink page="Feedback/Toast" size={StorybookLink.sizes.SMALL}>
<StorybookLink page="Components/Toast" size={StorybookLink.sizes.SMALL}>
Toast.
</StorybookLink>
</Tip>
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const alertBannerTemplate = (args: AlertBannerProps) => {
};

export default {
title: "Feedback/AlertBanner",
title: "Components/AlertBanner",
component: AlertBanner,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ There are five types of attention boxes: Primary, success, danger, warning and d
<>
Don’t use when a message applies at a system level, does not apply to a specific piece of content, or needs
to alert all users. On those cases, use{" "}
<StorybookLink page="Feedback/AlertBanner">Alert banner.</StorybookLink>
<StorybookLink page="Components/AlertBanner">Alert banner.</StorybookLink>
</>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Tip, StorybookLink } from "vibe-storybook-components";
export const TipCheckYourself = () => (
<Tip title="Check yourself">
If the information about a component isn’t critical for the user, use a{" "}
<StorybookLink page="Popover/Tooltip" size={StorybookLink.sizes.SMALL}>
<StorybookLink page="Components/Tooltip" size={StorybookLink.sizes.SMALL}>
Tooltip
</StorybookLink>{" "}
instead.
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
const attentionBoxTemplate = createComponentTemplate(AttentionBox);

export default {
title: "Feedback/AttentionBox",
title: "Components/AttentionBox",
component: AttentionBox,
subcomponents: {
AttentionBoxLink
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Avatar/__stories__/Avatar.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ Use to fire actions on avatar click event.

### Multiple avatars

To group multiple Avatars together, use the <StorybookLink page="Media/Avatar/AvatarGroup">AvatarGroup</StorybookLink> component.
To group multiple Avatars together, use the <StorybookLink page="Components/AvatarGroup">AvatarGroup</StorybookLink> component.

<Canvas of={AvatarStories.MultipleAvatars} />

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Avatar/__stories__/Avatar.stories.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
export const TipMultipleAvatarsTogether = () => (
<Tip title="Mutiple avatars togethers?">
If you want to stack multiple avatars together, check out{" "}
<StorybookLink page="Media/Avatar/AvatarGroup" size={StorybookLink.sizes.SMALL}>
<StorybookLink page="Components/AvatarGroup" size={StorybookLink.sizes.SMALL}>
AvatarGroup
</StorybookLink>{" "}
component
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
const avatarTemplate = createComponentTemplate(Avatar);

export default {
title: "Media/Avatar/Avatar",
title: "Components/Avatar",
component: Avatar,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ import { AvatarGroup } from "@vibe/core";
<UsageGuidelines
guidelines={[
<>
Use <StorybookLink page="Popover/Tooltip">tooltip</StorybookLink> component while hovering on the counter when you
need only to display the content
Use <StorybookLink page="Components/Tooltip">tooltip</StorybookLink> component while hovering on the counter when
you need only to display the content
</>,
<>
If clickable and navigable list is required on counter, use{" "}
<StorybookLink page="Navigation/Menu/Menu">Menu</StorybookLink> component
<StorybookLink page="Components/Menu/Menu">Menu</StorybookLink> component
</>
]}
/>
Expand All @@ -61,7 +61,7 @@ You can use Light or Dark counter color to maintain visual hierarchy.

### Clickable vs. Hover

If avatars are clickable, they will be displayed via <StorybookLink page="Navigation/Menu/Menu">Menu</StorybookLink> and user will be able to navigate each additional item.
If avatars are clickable, they will be displayed via <StorybookLink page="Components/Menu/Menu">Menu</StorybookLink> and user will be able to navigate each additional item.
Otherwise, avatars will be displayed in a Tooltip with no item's navigation.

<Canvas of={AvatarGroupStories.HoverVsClickable} />
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
});

export default {
title: "Media/Avatar/AvatarGroup",
title: "Components/AvatarGroup",
component: AvatarGroup,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Badge/__stories__/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
const badgeTemplate = createComponentTemplate(Badge);

export default {
title: "Feedback/Badge",
title: "Components/Badge",
component: Badge,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators
Expand Down
2 changes: 1 addition & 1 deletion .../core/src/components/BreadcrumbsBar/BreadcrumbItem/__stories__/BreadcrumbItem.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
const breadcrumbItemTemplate = createComponentTemplate(BreadcrumbItem);

export default {
title: "Navigation/BreadcrumbsBar/BreadcrumbItem",
title: "Components/BreadcrumbsBar/BreadcrumbItem",
component: BreadcrumbItem,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
export const TipCheckYourself = () => (
<Tip title="Check yourself">
If you are taking users through a multistep process, use the{" "}
<StorybookLink page="Navigation/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
<StorybookLink page="Components/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
MultiStepIndicator
</StorybookLink>{" "}
component instead.
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const breadcrumbsBarTemplate = (args: BreadcrumbBarProps) => {
};

export default {
title: "Navigation/BreadcrumbsBar/BreadcrumbsBar",
title: "Components/BreadcrumbsBar/BreadcrumbsBar",
component: BreadcrumbsBar,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Button/__stories__/Button.stories.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
export const TipIconButton = () => (
<Tip>
If you need to use icon as button with no text, check out{" "}
<StorybookLink page="Buttons/IconButton" size={StorybookLink.sizes.SMALL}>
<StorybookLink page="Components/IconButton" size={StorybookLink.sizes.SMALL}>
IconButton
</StorybookLink>{" "}
component
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Button/__stories__/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
});

export default {
title: "Buttons/Button",
title: "Components/Button",
component: Button,
argTypes: metaSettings.argTypes,
decorators: metaSettings.decorators
Expand Down
Loading

0 comments on commit 5a91e9f

Please sign in to comment.