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: extract TileCard component

Browse source
This commit is contained in:
Eric Liu 2020-08-08 15:49:16 -07:00
commit 12ff171784
6 changed files with 209 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/package.json
View file

@ -14,7 +14,7 @@
},
"devDependencies": {
"autoprefixer": "^9.8.5",
"carbon-components": "^10.16.0",
"carbon-components": "^10.17.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0",
"cypress": "^4.10.0",

299
docs/src/components/Portfolio.svelte
View file

@ -1,35 +1,13 @@
<script>
import * as Carbon from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TileCard from "./TileCard.svelte";
let skeleton = false;
let accordionItemOpen = false;
</script>
<style>
:global(.tile-card) {
display: flex;
flex-direction: column;
height: 100%;
min-height: 12rem;
}
.title {
font-size: 0.75rem;
}
.tile-card__preview {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.tile-card__actions {
display: none;
}
:global(.component-grid) {
margin-top: 1.5rem;
}
@ -58,171 +36,174 @@
<Carbon.Row class="scope">
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Accordion</div>
<div class="tile-card__preview">
<Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
<Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
Content 1
</Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 2">
Content 2
</Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 3">
Content 3
</Carbon.AccordionItem>
</Carbon.Accordion>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Accordion">
<Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
<Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
Content 1
</Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 3">Content 3</Carbon.AccordionItem>
</Carbon.Accordion>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Breadcrumb</div>
<div class="tile-card__preview">
<Carbon.Breadcrumb {skeleton}>
<Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
</Carbon.Breadcrumb>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Breadcrumb">
<Carbon.Breadcrumb {skeleton}>
<Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
</Carbon.Breadcrumb>
</TileCard>
</Carbon.Column>
</Carbon.Row>
<Carbon.Row class="scope">
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Primary button</div>
<div class="tile-card__preview">
<Carbon.Button {skeleton}>Primary</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Primary button">
<Carbon.Button {skeleton}>Primary</Carbon.Button>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Secondary button</div>
<div class="tile-card__preview">
<Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Secondary button">
<Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Tertiary button</div>
<div class="tile-card__preview">
<Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Tertiary button">
<Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Ghost button</div>
<div class="tile-card__preview">
<Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Ghost button">
<Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Danger button</div>
<div class="tile-card__preview">
<Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Danger button">
<Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
</TileCard>
</Carbon.Column>
</Carbon.Row>
<Carbon.Row class="scope">
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Primary button with icon</div>
<div class="tile-card__preview">
<Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Primary button with icon">
<Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Icon-only buttons</div>
<div class="tile-card__preview">
<Carbon.Button
icon={Add16}
hasIconOnly
iconDescription="Primary"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="secondary"
iconDescription="Secondary"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="tertiary"
iconDescription="Tertiary"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="ghost"
iconDescription="Ghost"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="danger"
iconDescription="Danger"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Icon-only buttons">
<Carbon.Button
icon={Add16}
hasIconOnly
iconDescription="Primary"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="secondary"
iconDescription="Secondary"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="tertiary"
iconDescription="Tertiary"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="ghost"
iconDescription="Ghost"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
<Carbon.Button
icon={Add16}
hasIconOnly
kind="danger"
iconDescription="Danger"
tooltipPosition="bottom"
tooltipAlignment="center"
{skeleton} />
</TileCard>
</Carbon.Column>
</Carbon.Row>
<Carbon.Row class="scope">
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Checkbox</div>
<div class="tile-card__preview">
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox heading</legend>
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
</fieldset>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Checkbox">
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox heading</legend>
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
</fieldset>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<Carbon.Tile class="tile-card">
<div class="title">Code Snippet</div>
<div class="tile-card__preview">
<Carbon.CodeSnippet type="single" light {skeleton}>
{`body { margin: 0; padding: 0; }`}
</Carbon.CodeSnippet>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
<TileCard title="Indeterminate Checkboox">
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox heading</legend>
<Carbon.Checkbox
indeterminate
{skeleton}
labelText="Checkbox label" />
<Carbon.Checkbox
indeterminate
{skeleton}
labelText="Checkbox label" />
</fieldset>
</TileCard>
</Carbon.Column>
</Carbon.Row>
<Carbon.Row class="scope">
<Carbon.Column noGutter>
<TileCard title="Inline Code Snippet">
<Carbon.CodeSnippet type="inline" light {skeleton}>
{`node -v`}
</Carbon.CodeSnippet>
</TileCard>
</Carbon.Column>
<Carbon.Column noGutter>
<TileCard title="Single-line Code Snippet">
<Carbon.CodeSnippet type="single" light {skeleton}>
{`tsc -c tsconfig.json`}
</Carbon.CodeSnippet>
</TileCard>
</Carbon.Column>
<Carbon.Column lg={8} noGutter>
<TileCard title="Multi-line Code Snippet">
<Carbon.CodeSnippet type="multi" light {skeleton}>
{`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "IBM Plex Sans";
lin-height: 1.45;
}
h1 {
font-size: 1rem;
color: #171717;
}
a {
color: currentColor;
text-decoration: underline;
}`}
</Carbon.CodeSnippet>
</TileCard>
</Carbon.Column>
</Carbon.Row>
</div>

61
docs/src/components/TileCard.svelte Normal file
View file

@ -0,0 +1,61 @@
<script>
export let title = "";
import { Tile, Button, ButtonSet } from "carbon-components-svelte";
import Code16 from "carbon-icons-svelte/lib/Code16";
</script>
<style>
:global(.tile-card) {
display: flex;
flex-direction: column;
height: 100%;
min-height: 12rem;
}
.title {
font-size: 0.75rem;
}
.tile-card__preview {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.tile-card__actions {
display: flex;
justify-content: flex-end;
margin-right: -1rem;
margin-bottom: -1rem;
}
</style>
<Tile class="tile-card">
<div class="title">{title}</div>
<div class="tile-card__preview">
<slot />
</div>
<div class="tile-card__actions">
<div>
<Button
hasIconOnly
kind="ghost"
size="small"
icon={Code16}
iconDescription="Usage"
tooltipAlignment="center"
tooltipPosition="top" />
<Button
hasIconOnly
kind="ghost"
size="small"
icon={Code16}
iconDescription="Usage"
tooltipAlignment="center"
tooltipPosition="top" />
</div>
</div>
</Tile>

2
docs/src/routes/_layout.svelte
View file

@ -59,7 +59,7 @@
{#if segment !== 'examples'}
<GlobalHeader {segment} />
<SideNav isOpen={true}>
<SideNav isOpen>
<SideNavItems>
<SideNavLink
text="Getting Started"

16
docs/src/routes/getting-started/index.svelte
View file

@ -16,7 +16,7 @@
<Row>
<Column>
<h1>Getting Started</h1>
<p>
<p style="position: relative; z-index: 1;">
<CopyableCodeSnippet type="inline" code="carbon-components-svelte" />
can be installed as a development dependency.
</p>
@ -37,17 +37,3 @@
</p>
</Column>
</Row>
<!--
<div style="margin-left: -1rem; margin-right: -1rem;">
<Tabs type="container">
<Tab label="Rapid Prototyping" />
<Tab label="Single-Page Application (SPA)" />
<Tab label="Server-side Rendered (SSR)" />
<div slot="content" class="content">
<TabContent>1</TabContent>
<TabContent>2</TabContent>
<TabContent>3</TabContent>
</div>
</Tabs>
</div>
-->

10
docs/yarn.lock
View file

@ -719,15 +719,15 @@ caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001097:
integrity sha512-JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg==
carbon-components-svelte@../:
version "0.9.0"
version "0.9.3"
dependencies:
carbon-icons-svelte "^10.14.0"
flatpickr "4.6.3"
carbon-components@^10.16.0:
version "10.16.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.16.0.tgz#1f631788ea16485041729c5a6b65d1d79063eb86"
integrity sha512-7MltjxNKEjjJ+TOJv3qexE2wBiXQ5qNtMb+in2OJqAWEfixeDHLB+ZtkShAQmKzNw5jIX7w8jfsp2JC4CkApiw==
carbon-components@^10.17.0:
version "10.17.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.17.0.tgz#e1f5e219443b9317147013280224cdb89dbc0bf8"
integrity sha512-kTSWkgtTaW9FGBTHOCj0/Ir86RCNRBti0Ckf7yVC1LaQJ0VWy2/BLrwhfNWaWGCGUnx4A+qt8MwEuG1Yz07JhA==
dependencies:
flatpickr "4.6.1"
lodash.debounce "^4.0.8"