mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
docs: flatten side nav hierarchy, remove recipes (#1430)
* style(docs): remove bottom margin in index route * docs: flatten side nav hierarchy * docs(accordion): move expandable accordion recipe * docs(breadcrumb): move breadcrumb trail recipe * docs: remove recipes
This commit is contained in:
metonym
GitHub
parent
98974fba7e
commit
e3978e883b
11 changed files with 54 additions and 218 deletions
|
|
@ -1,88 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
Content,
|
||||
Select,
|
||||
SelectItem,
|
||||
} from "carbon-components-svelte";
|
||||
import { page, metatags } from "@sveltech/routify";
|
||||
import { onMount } from "svelte";
|
||||
import { theme } from "../store";
|
||||
|
||||
export let component = $page.title;
|
||||
|
||||
metatags.title = $page.title;
|
||||
|
||||
onMount(() => {
|
||||
const currentTheme = window.location.search.split("?theme=")[1];
|
||||
|
||||
if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
|
||||
theme.set(currentTheme);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Content data-components>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>{component}</h1>
|
||||
<div class="bar">
|
||||
<Select
|
||||
id="select-theme"
|
||||
inline
|
||||
labelText="Theme"
|
||||
bind:selected="{$theme}"
|
||||
>
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column class="prose">
|
||||
<div class="toc mobile">
|
||||
<h5>Table of Contents</h5>
|
||||
<slot name="aside" />
|
||||
</div>
|
||||
<slot />
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
<Column class="table" xlg="{4}" lg="{5}">
|
||||
<div class="toc">
|
||||
<h5>Table of Contents</h5>
|
||||
<slot name="aside" />
|
||||
</div>
|
||||
</Column>
|
||||
</Content>
|
||||
|
||||
<style>
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.toc h5 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
SkipToContent,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
Tag,
|
||||
} from "carbon-components-svelte";
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
$: components = $layout.children.filter(
|
||||
(child) => child.title === "components"
|
||||
)[0];
|
||||
$: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
|
||||
|
||||
$beforeUrlChange(() => {
|
||||
if (isMobile) isSideNavOpen = false;
|
||||
|
|
@ -99,48 +97,33 @@
|
|||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNavItems>
|
||||
<SideNavMenu
|
||||
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
|
||||
text="Components"
|
||||
>
|
||||
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="red"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
Deprecated
|
||||
</Tag>
|
||||
{/if}
|
||||
{#if new_components.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="green"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
New
|
||||
</Tag>
|
||||
{/if}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
|
||||
{#each recipes.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
>
|
||||
{child.title}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="red"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
Deprecated
|
||||
</Tag>
|
||||
{/if}
|
||||
{#if new_components.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="green"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
New
|
||||
</Tag>
|
||||
{/if}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
|
||||
|
||||
### Default
|
||||
|
||||
<Accordion>
|
||||
|
|
@ -84,6 +82,12 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
|
|||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### Programmatic example
|
||||
|
||||
This example demonstrates how a list of items can be programmatically expanded and collapsed.
|
||||
|
||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<Accordion size="xl">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ components: ["Breadcrumb", "BreadcrumbItem"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
|
||||
|
||||
### Default
|
||||
|
||||
<Breadcrumb>
|
||||
|
|
@ -43,6 +41,10 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
|
|||
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
### Breadcrumb trail
|
||||
|
||||
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Breadcrumb noTrailingSlash skeleton count={3} />
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
export let items = [
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Natural Language Classifier",
|
||||
description:
|
||||
|
|
@ -17,26 +19,17 @@
|
|||
},
|
||||
];
|
||||
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="field"
|
||||
on:click="{() => {
|
||||
open = !open;
|
||||
}}"
|
||||
>
|
||||
<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
|
||||
{open ? "Collapse" : "Expand"}
|
||||
all
|
||||
</Button>
|
||||
|
||||
<Accordion>
|
||||
{#each items as item}
|
||||
<AccordionItem open="{open}">
|
||||
<h5 slot="title">{item.title}</h5>
|
||||
<AccordionItem title="{item.title}" open="{open}">
|
||||
<p>{item.description}</p>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,17 @@
|
|||
<script>
|
||||
/**
|
||||
* @type {{ href?: string; text: string; }[]} [items=[]]
|
||||
*/
|
||||
export let items = [
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
|
||||
const items = [
|
||||
{ href: "/", text: "Dashboard" },
|
||||
{ href: "/reports", text: "Annual reports" },
|
||||
{ href: "/reports/2019", text: "2019" },
|
||||
];
|
||||
|
||||
import {
|
||||
Row,
|
||||
Column,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
} from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
<Column>
|
||||
<Breadcrumb>
|
||||
{#each items as item, i}
|
||||
<BreadcrumbItem
|
||||
href="{item.href}"
|
||||
isCurrentPage="{i === items.length - 1}"
|
||||
>
|
||||
{item.text}
|
||||
</BreadcrumbItem>
|
||||
{/each}
|
||||
</Breadcrumb>
|
||||
</Column>
|
||||
</Row>
|
||||
<Breadcrumb>
|
||||
{#each items as item, i}
|
||||
<BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
|
||||
{item.text}
|
||||
</BreadcrumbItem>
|
||||
{/each}
|
||||
</Breadcrumb>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</script>
|
||||
|
||||
<Content>
|
||||
<Grid style="margin-bottom: var(--cds-layout-06);">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>Carbon Components Svelte</h1>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Breadcrumb trail
|
||||
|
||||
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Expandable accordion
|
||||
|
||||
This example expands and collapses all accordion items.
|
||||
|
||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import { AspectRatio, Tile, Column } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Tile (16x9 ratio)
|
||||
|
||||
<Column lg={8}>
|
||||
<AspectRatio ratio="16x9">
|
||||
<Tile style="height: 100%">Content</Tile>
|
||||
</AspectRatio>
|
||||
</Column>
|
||||
|
|
@ -139,8 +139,6 @@ function carbonify() {
|
|||
};
|
||||
}
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || "production";
|
||||
|
||||
module.exports = {
|
||||
extensions: [".svelte", ".svx"],
|
||||
preprocess: [
|
||||
|
|
@ -159,14 +157,13 @@ module.exports = {
|
|||
mdsvex({
|
||||
remarkPlugins: [plugin, slug, carbonify],
|
||||
layout: {
|
||||
recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
|
||||
_: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
|
||||
},
|
||||
}),
|
||||
{
|
||||
markup({ content, filename }) {
|
||||
if (/node_modules/.test(filename)) return null;
|
||||
if (filename.endsWith(".svx") && filename.match(/pages\/(recipes)/)) {
|
||||
if (filename.endsWith(".svx")) {
|
||||
const toc = [];
|
||||
|
||||
walk(parse(content), {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue