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: render component API typedefs (#721)

Browse source 
* style(component-api): use flush, condensed structured list for prop table

* style(component-api): use small tag variant for reactive props

* docs(component-api): render component typedefs
This commit is contained in:
Eric Liu 2021-07-03 15:29:26 -07:00 • committed by GitHub
commit 870c2c2ae8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

28
docs/src/components/ComponentApi.svelte
View file

@ -4,6 +4,7 @@
slots: [], slots: [],
events: [], events: [],
rest_props: undefined, rest_props: undefined,
typedefs: [],
}; };
import { import {
@ -17,6 +18,7 @@
UnorderedList, UnorderedList,
ListItem, ListItem,
Tag, Tag,
CodeSnippet,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import InlineSnippet from "./InlineSnippet.svelte"; import InlineSnippet from "./InlineSnippet.svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16"; import Launch16 from "carbon-icons-svelte/lib/Launch16";
@ -40,7 +42,7 @@
</script> </script>
<p style="margin-bottom: var(--cds-layout-02)"> <p style="margin-bottom: var(--cds-layout-02)">
Component source code: Source code:
<Link inline size="lg" href="{source}" target="_blank"> <Link inline size="lg" href="{source}" target="_blank">
{component.filePath} {component.filePath}
<Launch16 /> <Launch16 />
@ -51,9 +53,7 @@
{#if component.props.length > 0} {#if component.props.length > 0}
<div class="overflow"> <div class="overflow">
<StructuredList <StructuredList flush condensed>
style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
>
<StructuredListHead> <StructuredListHead>
<StructuredListRow head> <StructuredListRow head>
<StructuredListCell head>Prop name</StructuredListCell> <StructuredListCell head>Prop name</StructuredListCell>
@ -71,9 +71,11 @@
<InlineSnippet code="{prop.name}" /> <InlineSnippet code="{prop.name}" />
{#if prop.reactive} {#if prop.reactive}
<div <div
style="white-space: nowrap; margin-top: var(--cds-spacing-03)" style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
> >
<Tag type="cyan">Reactive</Tag> <Tag style="margin-left: 0" size="sm" type="cyan">
Reactive
</Tag>
</div> </div>
{/if} {/if}
</StructuredListCell> </StructuredListCell>
@ -133,6 +135,20 @@
{:else} {:else}
<p class="my-layout-01-03">No props.</p> <p class="my-layout-01-03">No props.</p>
{/if} {/if}
<h3 id="typedefs">Typedefs</h3>
{#if component.typedefs.length > 0}
<CodeSnippet
style="margin-top: var(--cds-spacing-08)"
class="my-layout-01-03"
type="multi"
code="{component.typedefs.map((t) => t.ts).join(';\n\n')}"
/>
{:else}
<p class="my-layout-01-03">No typedefs.</p>
{/if}
<h3 id="slots">Slots</h3> <h3 id="slots">Slots</h3>
{#if component.slots.length > 0} {#if component.slots.length > 0}
<UnorderedList class="my-layout-01-03"> <UnorderedList class="my-layout-01-03">

3
docs/svelte.config.js
View file

@ -238,6 +238,9 @@ module.exports = {
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#props">Props</a> <a class="bx--link" href="#props">Props</a>
</li> </li>
<li class="bx--list__item">
<a class="bx--link" href="#typedefs">Typedefs</a>
</li>
<li class="bx--list__item"> <li class="bx--list__item">
<a class="bx--link" href="#slots">Slots</a> <a class="bx--link" href="#slots">Slots</a>
</li> </li>