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

Update examples, update README documentation (#772)

Browse source 
* chore(examples): update example set-ups

* chore: update readme docs
This commit is contained in:
Eric 2021-07-29 15:51:34 -07:00 • committed by GitHub
commit 0315a17d4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
97 changed files with 6778 additions and 15821 deletions
Download patch file Download diff file Expand all files Collapse all files

93
examples/rollup/src/App.svelte
View file

@ -1,93 +1,6 @@
<script>
import {
Content,
Breadcrumb,
BreadcrumbItem,
Grid,
Row,
Column,
Tabs,
TabContent,
Tab,
Select,
SelectItem,
} from "carbon-components-svelte";
import Header from "./components/Header.svelte";
import Theme from "./components/Theme.svelte";
let theme = "g10";
import "carbon-components-svelte/css/white.css";
import { Button } from "carbon-components-svelte";
</script>
<Theme persist bind:theme>
<Header />
<Content style="background: none; padding: 1rem">
<Grid>
<Row>
<Column lg="{16}">
<Breadcrumb noTrailingSlash aria-label="Page navigation">
<BreadcrumbItem href="/">Getting started</BreadcrumbItem>
</Breadcrumb>
<h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
</Column>
</Row>
<Row>
<Column noGutter>
<Tabs aria-label="Tab navigation">
<Tab label="About" />
<Tab label="Design" />
<Tab label="Develop" />
<div slot="content" class="tabbed-content">
<Grid as fullWidth let:props>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
<p>
Carbon is IBM’s open-source design system for digital
products and experiences. With the IBM Design Language
as its foundation, the system consists of working code,
design tools and resources, human interface guidelines,
and a vibrant community of contributors.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Rapidly build beautiful and accessible experiences. The
Carbon kit contains all resources you need to get
started.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Carbon provides styles and components in Vanilla, React,
Angular, Vue and Svelte for anyone building on the web.
</p>
</Column>
</Row>
</TabContent>
</Grid>
</div>
</Tabs>
</Column>
</Row>
</Grid>
</Content>
</Theme>
<Button>Primary button</Button>

35
examples/rollup/src/components/Header.svelte
View file

@ -1,35 +0,0 @@
<script>
import {
SkipToContent,
Header,
HeaderUtilities,
HeaderGlobalAction,
} from "carbon-components-svelte";
import Notification20 from "carbon-icons-svelte/lib/Notification20";
import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
import { getContext } from "svelte";
const ctx = getContext("Theme");
$: if (ctx) {
ctx.dark.subscribe((value) => {
console.log("dark mode?", value);
});
ctx.light.subscribe((value) => {
console.log("light mode?", value);
});
ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
}
</script>
<Header company="IBM" platformName="Carbon Components Svelte" href="/">
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
<HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
<HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
</HeaderUtilities>
</Header>

55
examples/rollup/src/components/Theme.svelte
View file

@ -1,55 +0,0 @@
<script>
export let persist = false;
export let persistKey = "theme";
export let theme = "white";
export const themes = ["white", "g10", "g90", "g100"];
import { onMount, afterUpdate, setContext } from "svelte";
import { writable, derived } from "svelte/store";
const isValidTheme = (value) => themes.includes(value);
const isDark = (value) =>
isValidTheme(value) && (value === "g90" || value === "g100");
const dark = writable(isDark(theme));
const light = derived(dark, (_) => !_);
setContext("Theme", {
updateVar: (name, value) => {
document.documentElement.style.setProperty(name, value);
},
dark,
light,
});
onMount(() => {
try {
const persisted_theme = localStorage.getItem(persistKey);
if (isValidTheme(persisted_theme)) {
theme = persisted_theme;
}
} catch (error) {
console.error(error);
}
});
afterUpdate(() => {
if (isValidTheme(theme)) {
document.documentElement.setAttribute("theme", theme);
if (persist) {
localStorage.setItem(persistKey, theme);
}
} else {
console.warn(
`"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
themes
)}`
);
}
});
$: dark.set(isDark(theme));
</script>
<slot />