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": { "devDependencies": {
"autoprefixer": "^9.8.5", "autoprefixer": "^9.8.5",
"carbon-components": "^10.16.0", "carbon-components": "^10.17.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"cypress": "^4.10.0", "cypress": "^4.10.0",

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

@ -1,35 +1,13 @@
<script> <script>
import * as Carbon from "carbon-components-svelte"; import * as Carbon from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add16 from "carbon-icons-svelte/lib/Add16";
import TileCard from "./TileCard.svelte";
let skeleton = false; let skeleton = false;
let accordionItemOpen = false; let accordionItemOpen = false;
</script> </script>
<style> <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) { :global(.component-grid) {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -58,171 +36,174 @@
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Accordion">
<div class="title">Accordion</div> <Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
<div class="tile-card__preview"> <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
<Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}> Content 1
<Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}> </Carbon.AccordionItem>
Content 1 <Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
</Carbon.AccordionItem> <Carbon.AccordionItem title="Title 3">Content 3</Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 2"> </Carbon.Accordion>
Content 2 </TileCard>
</Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 3">
Content 3
</Carbon.AccordionItem>
</Carbon.Accordion>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Breadcrumb">
<div class="title">Breadcrumb</div> <Carbon.Breadcrumb {skeleton}>
<div class="tile-card__preview"> <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
<Carbon.Breadcrumb {skeleton}> <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem> <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem> </Carbon.Breadcrumb>
<Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem> </TileCard>
</Carbon.Breadcrumb>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
</Carbon.Row> </Carbon.Row>
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Primary button">
<div class="title">Primary button</div> <Carbon.Button {skeleton}>Primary</Carbon.Button>
<div class="tile-card__preview"> </TileCard>
<Carbon.Button {skeleton}>Primary</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Secondary button">
<div class="title">Secondary button</div> <Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
<div class="tile-card__preview"> </TileCard>
<Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Tertiary button">
<div class="title">Tertiary button</div> <Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
<div class="tile-card__preview"> </TileCard>
<Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Ghost button">
<div class="title">Ghost button</div> <Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
<div class="tile-card__preview"> </TileCard>
<Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Danger button">
<div class="title">Danger button</div> <Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
<div class="tile-card__preview"> </TileCard>
<Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
</Carbon.Row> </Carbon.Row>
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Primary button with icon">
<div class="title">Primary button with icon</div> <Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
<div class="tile-card__preview"> </TileCard>
<Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Icon-only buttons">
<div class="title">Icon-only buttons</div> <Carbon.Button
<div class="tile-card__preview"> icon={Add16}
<Carbon.Button hasIconOnly
icon={Add16} iconDescription="Primary"
hasIconOnly tooltipPosition="bottom"
iconDescription="Primary" tooltipAlignment="center"
tooltipPosition="bottom" {skeleton} />
tooltipAlignment="center" <Carbon.Button
{skeleton} /> icon={Add16}
<Carbon.Button hasIconOnly
icon={Add16} kind="secondary"
hasIconOnly iconDescription="Secondary"
kind="secondary" tooltipPosition="bottom"
iconDescription="Secondary" tooltipAlignment="center"
tooltipPosition="bottom" {skeleton} />
tooltipAlignment="center" <Carbon.Button
{skeleton} /> icon={Add16}
<Carbon.Button hasIconOnly
icon={Add16} kind="tertiary"
hasIconOnly iconDescription="Tertiary"
kind="tertiary" tooltipPosition="bottom"
iconDescription="Tertiary" tooltipAlignment="center"
tooltipPosition="bottom" {skeleton} />
tooltipAlignment="center" <Carbon.Button
{skeleton} /> icon={Add16}
<Carbon.Button hasIconOnly
icon={Add16} kind="ghost"
hasIconOnly iconDescription="Ghost"
kind="ghost" tooltipPosition="bottom"
iconDescription="Ghost" tooltipAlignment="center"
tooltipPosition="bottom" {skeleton} />
tooltipAlignment="center" <Carbon.Button
{skeleton} /> icon={Add16}
<Carbon.Button hasIconOnly
icon={Add16} kind="danger"
hasIconOnly iconDescription="Danger"
kind="danger" tooltipPosition="bottom"
iconDescription="Danger" tooltipAlignment="center"
tooltipPosition="bottom" {skeleton} />
tooltipAlignment="center" </TileCard>
{skeleton} />
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
</Carbon.Row> </Carbon.Row>
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Checkbox">
<div class="title">Checkbox</div> <fieldset class="bx--fieldset">
<div class="tile-card__preview"> <legend class="bx--label">Checkbox heading</legend>
<fieldset class="bx--fieldset"> <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
<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" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" /> </fieldset>
<Carbon.Checkbox {skeleton} labelText="Checkbox label" /> </TileCard>
</fieldset>
</div>
<div class="tile-card__actions">Actions</div>
</Carbon.Tile>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<Carbon.Tile class="tile-card"> <TileCard title="Indeterminate Checkboox">
<div class="title">Code Snippet</div> <fieldset class="bx--fieldset">
<div class="tile-card__preview"> <legend class="bx--label">Checkbox heading</legend>
<Carbon.CodeSnippet type="single" light {skeleton}> <Carbon.Checkbox
{`body { margin: 0; padding: 0; }`} indeterminate
</Carbon.CodeSnippet> {skeleton}
</div> labelText="Checkbox label" />
<div class="tile-card__actions">Actions</div> <Carbon.Checkbox
</Carbon.Tile> 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.Column>
</Carbon.Row> </Carbon.Row>
</div> </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'} {#if segment !== 'examples'}
<GlobalHeader {segment} /> <GlobalHeader {segment} />
<SideNav isOpen={true}> <SideNav isOpen>
<SideNavItems> <SideNavItems>
<SideNavLink <SideNavLink
text="Getting Started" text="Getting Started"

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

@ -16,7 +16,7 @@
<Row> <Row>
<Column> <Column>
<h1>Getting Started</h1> <h1>Getting Started</h1>
<p> <p style="position: relative; z-index: 1;">
<CopyableCodeSnippet type="inline" code="carbon-components-svelte" /> <CopyableCodeSnippet type="inline" code="carbon-components-svelte" />
can be installed as a development dependency. can be installed as a development dependency.
</p> </p>
@ -37,17 +37,3 @@
</p> </p>
</Column> </Column>
</Row> </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== integrity sha512-JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg==
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.9.0" version "0.9.3"
dependencies: dependencies:
carbon-icons-svelte "^10.14.0" carbon-icons-svelte "^10.14.0"
flatpickr "4.6.3" flatpickr "4.6.3"
carbon-components@^10.16.0: carbon-components@^10.17.0:
version "10.16.0" version "10.17.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.16.0.tgz#1f631788ea16485041729c5a6b65d1d79063eb86" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.17.0.tgz#e1f5e219443b9317147013280224cdb89dbc0bf8"
integrity sha512-7MltjxNKEjjJ+TOJv3qexE2wBiXQ5qNtMb+in2OJqAWEfixeDHLB+ZtkShAQmKzNw5jIX7w8jfsp2JC4CkApiw== integrity sha512-kTSWkgtTaW9FGBTHOCj0/Ir86RCNRBti0Ckf7yVC1LaQJ0VWy2/BLrwhfNWaWGCGUnx4A+qt8MwEuG1Yz07JhA==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"