mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: flatten side nav hierarchy, remove recipes (#1430)

Browse source 
* 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 2022-08-06 13:27:02 -07:00 • committed by GitHub
commit e3978e883b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 54 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

88
docs/src/layouts/Recipe.svelte
View file

@ -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>

71
docs/src/pages/_layout.svelte
View file

@ -11,7 +11,6 @@
SkipToContent, SkipToContent,
SideNav, SideNav,
SideNavItems, SideNavItems,
SideNavMenu,
SideNavMenuItem, SideNavMenuItem,
Tag, Tag,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
@ -29,7 +28,6 @@
$: components = $layout.children.filter( $: components = $layout.children.filter(
(child) => child.title === "components" (child) => child.title === "components"
)[0]; )[0];
$: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
$beforeUrlChange(() => { $beforeUrlChange(() => {
if (isMobile) isSideNavOpen = false; if (isMobile) isSideNavOpen = false;
@ -99,48 +97,33 @@
<SideNav bind:isOpen="{isSideNavOpen}"> <SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems> <SideNavItems>
<SideNavMenu {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
expanded="{$isActive($url('')) || $isActive($url('/components'))}" <SideNavMenuItem
text="Components" text="{child.title}"
> href="{$url(child.path)}"
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)} isSelected="{$isActive($url(child.path))}"
<SideNavMenuItem >
text="{child.title}" {child.title}
href="{$url(child.path)}" {#if deprecated.includes(child.title)}
isSelected="{$isActive($url(child.path))}" <Tag
> size="sm"
{child.title} type="red"
{#if deprecated.includes(child.title)} style="margin-top: 0; margin-bottom: 0; cursor: inherit"
<Tag >
size="sm" Deprecated
type="red" </Tag>
style="margin-top: 0; margin-bottom: 0; cursor: inherit" {/if}
> {#if new_components.includes(child.title)}
Deprecated <Tag
</Tag> size="sm"
{/if} type="green"
{#if new_components.includes(child.title)} style="margin-top: 0; margin-bottom: 0; cursor: inherit"
<Tag >
size="sm" New
type="green" </Tag>
style="margin-top: 0; margin-bottom: 0; cursor: inherit" {/if}
> </SideNavMenuItem>
New {/each}
</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>
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
<slot /> <slot />

8
docs/src/pages/components/Accordion.svx
View file

@ -10,8 +10,6 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
### Default ### Default
<Accordion> <Accordion>
@ -84,6 +82,12 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
</AccordionItem> </AccordionItem>
</Accordion> </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 ### Extra-large size
<Accordion size="xl"> <Accordion size="xl">

6
docs/src/pages/components/Breadcrumb.svx
View file

@ -12,8 +12,6 @@ components: ["Breadcrumb", "BreadcrumbItem"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
### Default ### Default
<Breadcrumb> <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> <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
### Breadcrumb trail
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
### Skeleton ### Skeleton
<Breadcrumb noTrailingSlash skeleton count={3} /> <Breadcrumb noTrailingSlash skeleton count={3} />

17
docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
View file

@ -1,5 +1,7 @@
<script> <script>
export let items = [ import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
const items = [
{ {
title: "Natural Language Classifier", title: "Natural Language Classifier",
description: description:
@ -17,26 +19,17 @@
}, },
]; ];
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
let open = false; let open = false;
</script> </script>
<Button <Button kind="ghost" size="field" on:click="{() => (open = !open)}">
kind="ghost"
size="field"
on:click="{() => {
open = !open;
}}"
>
{open ? "Collapse" : "Expand"} {open ? "Collapse" : "Expand"}
all all
</Button> </Button>
<Accordion> <Accordion>
{#each items as item} {#each items as item}
<AccordionItem open="{open}"> <AccordionItem title="{item.title}" open="{open}">
<h5 slot="title">{item.title}</h5>
<p>{item.description}</p> <p>{item.description}</p>
</AccordionItem> </AccordionItem>
{/each} {/each}

35
docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
View file

@ -1,32 +1,17 @@
<script> <script>
/** import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
* @type {{ href?: string; text: string; }[]} [items=[]]
*/ const items = [
export let items = [
{ href: "/", text: "Dashboard" }, { href: "/", text: "Dashboard" },
{ href: "/reports", text: "Annual reports" }, { href: "/reports", text: "Annual reports" },
{ href: "/reports/2019", text: "2019" }, { href: "/reports/2019", text: "2019" },
]; ];
import {
Row,
Column,
Breadcrumb,
BreadcrumbItem,
} from "carbon-components-svelte";
</script> </script>
<Row> <Breadcrumb>
<Column> {#each items as item, i}
<Breadcrumb> <BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
{#each items as item, i} {item.text}
<BreadcrumbItem </BreadcrumbItem>
href="{item.href}" {/each}
isCurrentPage="{i === items.length - 1}" </Breadcrumb>
>
{item.text}
</BreadcrumbItem>
{/each}
</Breadcrumb>
</Column>
</Row>

2
docs/src/pages/index.svelte
View file

@ -61,7 +61,7 @@
</script> </script>
<Content> <Content>
<Grid style="margin-bottom: var(--cds-layout-06);"> <Grid>
<Row> <Row>
<Column> <Column>
<h1>Carbon Components Svelte</h1> <h1>Carbon Components Svelte</h1>

11
docs/src/pages/recipes/Breadcrumbs.svx
View file

@ -1,11 +0,0 @@
---
layout: recipe
---
<script>
import Preview from "../../components/Preview.svelte";
</script>
## Breadcrumb trail
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />

13
docs/src/pages/recipes/ExpandableAccordion.svx
View file

@ -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" />

16
docs/src/pages/recipes/TileAspectRatio.svx
View file

@ -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>

5
docs/svelte.config.js
View file

@ -139,8 +139,6 @@ function carbonify() {
}; };
} }
const NODE_ENV = process.env.NODE_ENV || "production";
module.exports = { module.exports = {
extensions: [".svelte", ".svx"], extensions: [".svelte", ".svx"],
preprocess: [ preprocess: [
@ -159,14 +157,13 @@ module.exports = {
mdsvex({ mdsvex({
remarkPlugins: [plugin, slug, carbonify], remarkPlugins: [plugin, slug, carbonify],
layout: { layout: {
recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
_: path.join(__dirname, "src/layouts/ComponentLayout.svelte"), _: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
}, },
}), }),
{ {
markup({ content, filename }) { markup({ content, filename }) {
if (/node_modules/.test(filename)) return null; if (/node_modules/.test(filename)) return null;
if (filename.endsWith(".svx") && filename.match(/pages\/(recipes)/)) { if (filename.endsWith(".svx")) {
const toc = []; const toc = [];
walk(parse(content), { walk(parse(content), {