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

Merge pull request #328 from IBM/improve-docs

Browse source 
Improve docs
This commit is contained in:
Eric Liu 2020-10-14 15:47:00 -07:00 • committed by GitHub
commit 718a7fcabd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 105 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/index.html
View file

@ -7,7 +7,6 @@
<title>Carbon Components Svelte</title> <title>Carbon Components Svelte</title>
</head> </head>
<body> <body>
<div id="app"></div>
<script type="module" src="/src/index.js"></script> <script type="module" src="/src/index.js"></script>
</body> </body>
</html> </html>

5
docs/src/index.js
View file

@ -1,8 +1,5 @@
import App from "./App.svelte"; import App from "./App.svelte";
const app = new App({ const app = new App({ target: document.body });
target: document.getElementById("app"),
hydrate: process.env.NODE_ENV === "production",
});
export default app; export default app;

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

@ -1,7 +1,3 @@
<script context="module">
const fetched = new Set();
</script>
<script> <script>
import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify"; import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
import { import {
@ -162,17 +158,6 @@
} }
</style> </style>
<svelte:body
on:mouseover="{async (e) => {
if (process.env.NODE_ENV === 'development') return;
if (!e.target.href || !e.target
.getAttribute('class')
.includes('bx--side-nav__link')) return;
if (fetched.has(e.target.href)) return;
fetched.add(e.target.href);
await fetch(e.target.href);
}}" />
<svelte:window bind:innerWidth /> <svelte:window bind:innerWidth />
<Theme persist> <Theme persist>

13
docs/src/pages/components/ComboBox.svx
View file

@ -22,6 +22,19 @@ items={[
{id: "2", text: "Fax"} {id: "2", text: "Fax"}
]} /> ]} />
### Filterable
<FileSource src="/framed/ComboBox/FilterableComboBox" />
### Light variant
<ComboBox light titleText="Contact" placeholder="Select contact method"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
### Extra-large size ### Extra-large size
<ComboBox titleText="Contact" placeholder="Select contact method" <ComboBox titleText="Contact" placeholder="Select contact method"

10
docs/src/pages/components/Link.svx
View file

@ -7,6 +7,16 @@
<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link> <Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
### Target _blank
Setting `target` to `"_blank"` opens the link in a new tab.
If `target="_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).
You can override the `rel` attribute with a custom value.
<Link href="https://www.carbondesignsystem.com/" target="_blank">Carbon Design System</Link>
### Inline variant ### Inline variant
<div> <div>

13
docs/src/pages/components/MultiSelect.svx
View file

@ -5,12 +5,25 @@
### Default ### Default
By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
<MultiSelect titleText="Contact" label="Select contact methods..." <MultiSelect titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"}, items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}" {id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
/> />
### No alphabetical ordering
To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.
<MultiSelect titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
sortItem="{() => {}}"
/>
### Light variant ### Light variant
<MultiSelect light titleText="Contact" label="Select contact methods..." <MultiSelect light titleText="Contact" label="Select contact methods..."

4
docs/src/pages/components/Pagination.svx
View file

@ -19,6 +19,10 @@
<Pagination totalItems={102} pageInputDisabled /> <Pagination totalItems={102} pageInputDisabled />
### Hidden page size
<Pagination totalItems={102} pageSizeInputDisabled />
### Skeleton ### Skeleton
<PaginationSkeleton /> <PaginationSkeleton />

15
docs/src/pages/framed/ComboBox/FilterableComboBox.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { ComboBox } from "carbon-components-svelte";
function shouldFilterItem(item, value) {
if (!value) return true;
return item.text.toLowerCase().includes(value.toLowerCase());
}
</script>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
shouldFilterItem="{shouldFilterItem}"
/>

24
docs/svelte.config.js
View file

@ -7,7 +7,6 @@ const { format } = require("prettier");
const pkg = require("../package.json"); const pkg = require("../package.json");
const fs = require("fs"); const fs = require("fs");
const Prism = require("prismjs"); const Prism = require("prismjs");
const { replace, postcss } = require("svelte-preprocess");
require("prism-svelte"); require("prism-svelte");
function createImports(source) { function createImports(source) {
@ -57,6 +56,7 @@ function createImports(source) {
function plugin() { function plugin() {
function visitor(node) { function visitor(node) {
if ( if (
node.lang !== "svelte" &&
!node.value.startsWith("<FileSource") && !node.value.startsWith("<FileSource") &&
!node.value.startsWith("<script>") && !node.value.startsWith("<script>") &&
!node.value.match(/svx-ignore/g) !node.value.match(/svx-ignore/g)
@ -125,19 +125,19 @@ const NODE_ENV = process.env.NODE_ENV || "production";
module.exports = { module.exports = {
extensions: [".svelte", ".svx"], extensions: [".svelte", ".svx"],
hydratable: NODE_ENV === "production",
preprocess: [ preprocess: [
require("svelte-preprocess")(), require("svelte-preprocess")({
replace([ replace: [
["process.env.VERSION", JSON.stringify(pkg.version)], ["process.env.VERSION", JSON.stringify(pkg.version)],
["process.env.NODE_ENV", JSON.stringify(NODE_ENV)], ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
]),
postcss({
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 1 version", "ie >= 11"],
}),
], ],
postcss: {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 1 version", "ie >= 11"],
}),
],
},
}), }),
mdsvex({ mdsvex({
remarkPlugins: [plugin, slug, carbonify], remarkPlugins: [plugin, slug, carbonify],

1
docs/vite.config.js
View file

@ -2,7 +2,6 @@ module.exports = {
optimizeDeps: { optimizeDeps: {
include: [ include: [
"flatpickr", "flatpickr",
"flatpickr/dist/l10n/index.js",
"flatpickr/dist/plugins/rangePlugin", "flatpickr/dist/plugins/rangePlugin",
"clipboard-copy", "clipboard-copy",
], ],

2
src/DatePicker/createCalendar.js
View file

@ -1,7 +1,7 @@
import flatpickr from "flatpickr"; import flatpickr from "flatpickr";
import rangePlugin from "flatpickr/dist/plugins/rangePlugin"; import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
let l10n let l10n;
function updateClasses(instance) { function updateClasses(instance) {
const { const {

2
src/FluidForm/FluidForm.stories.js
View file

@ -5,4 +5,4 @@ export default { title: "FluidForm", decorators: [withKnobs] };
export const Default = () => ({ export const Default = () => ({
Component, Component,
}); });

2
src/FluidForm/index.js
View file

@ -1 +1 @@
export { default as FluidForm } from './FluidForm.svelte' export { default as FluidForm } from "./FluidForm.svelte";

4
src/ListBox/ListBoxMenu.svelte
View file

@ -9,11 +9,11 @@
* Obtain a reference to the input HTML element * Obtain a reference to the input HTML element
* @type {null | HTMLDivElement} [ref=null] * @type {null | HTMLDivElement} [ref=null]
*/ */
export let ref = null; export let ref = null;
</script> </script>
<div <div
bind:this={ref} bind:this="{ref}"
role="listbox" role="listbox"
id="menu-{id}" id="menu-{id}"
class:bx--list-box__menu="{true}" class:bx--list-box__menu="{true}"

10
src/Pagination/Pagination.stories.js
View file

@ -20,7 +20,10 @@ export const Default = () => ({
false false
), ),
pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false), pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false),
pageSizeInputDisabled: boolean("Disable page size input (pageSizeInputDisabled)", false), pageSizeInputDisabled: boolean(
"Disable page size input (pageSizeInputDisabled)",
false
),
backwardText: text( backwardText: text(
"The description for the backward icon (backwardText)", "The description for the backward icon (backwardText)",
"Previous page" "Previous page"
@ -50,7 +53,10 @@ export const Multiple = () => ({
false false
), ),
pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false), pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false),
pageSizeInputDisabled: boolean("Disable page size input (pageSizeInputDisabled)", false), pageSizeInputDisabled: boolean(
"Disable page size input (pageSizeInputDisabled)",
false
),
backwardText: text( backwardText: text(
"The description for the backward icon (backwardText)", "The description for the backward icon (backwardText)",
"Previous page" "Previous page"

38
src/Pagination/Pagination.svelte
View file

@ -125,25 +125,25 @@
<div id="{id}" class:bx--pagination="{true}" {...$$restProps}> <div id="{id}" class:bx--pagination="{true}" {...$$restProps}>
<div class:bx--pagination__left="{true}"> <div class:bx--pagination__left="{true}">
{#if !pageSizeInputDisabled} {#if !pageSizeInputDisabled}
<label <label
id="bx--pagination-select-{id}-count-label" id="bx--pagination-select-{id}-count-label"
for="bx--pagination-select-{id}" for="bx--pagination-select-{id}"
class:bx--pagination__text="{true}" class:bx--pagination__text="{true}"
> >
{itemsPerPageText} {itemsPerPageText}
</label> </label>
<Select <Select
id="bx--pagination-select-{id}" id="bx--pagination-select-{id}"
class="bx--select__item-count" class="bx--select__item-count"
hideLabel hideLabel
noLabel noLabel
inline inline
bind:selected="{pageSize}" bind:selected="{pageSize}"
> >
{#each pageSizes as size, i (size)} {#each pageSizes as size, i (size)}
<SelectItem value="{size}" text="{size.toString()}" /> <SelectItem value="{size}" text="{size.toString()}" />
{/each} {/each}
</Select> </Select>
{/if} {/if}
<span class:bx--pagination__text="{!pageSizeInputDisabled}"> <span class:bx--pagination__text="{!pageSizeInputDisabled}">
{#if pagesUnknown} {#if pagesUnknown}

4
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -27,7 +27,7 @@
* Set an id for the container div element * Set an id for the container div element
* @type {string} [id] * @type {string} [id]
*/ */
export let id export let id;
import { createEventDispatcher, setContext } from "svelte"; import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
@ -52,7 +52,7 @@
</script> </script>
<div <div
{id} id="{id}"
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click

2
src/TextInput/TextInput.stories.js
View file

@ -38,7 +38,7 @@ export const Default = () => ({
export const Fluid = () => ({ export const Fluid = () => ({
Component, Component,
props: { props: {
story: 'fluid', story: "fluid",
size: select("Field size (size)", sizes, undefined) || undefined, size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false), disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false), light: boolean("Light variant (light)", false),

3
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -57,7 +57,8 @@
isOpen = false; isOpen = false;
dispatch('close'); dispatch('close');
} }
}}" /> }}"
/>
<div> <div>
<button <button