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>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.js"></script>
</body>
</html>

5
docs/src/index.js
View file

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

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

@ -1,7 +1,3 @@
<script context="module">
const fetched = new Set();
</script>
<script>
import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
import {
@ -162,17 +158,6 @@
}
</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 />
<Theme persist>

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

@ -22,6 +22,19 @@ items={[
{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
<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>
### 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
<div>

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

@ -5,12 +5,25 @@
### 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..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{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
<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 />
### Hidden page size
<Pagination totalItems={102} pageSizeInputDisabled />
### Skeleton
<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 fs = require("fs");
const Prism = require("prismjs");
const { replace, postcss } = require("svelte-preprocess");
require("prism-svelte");
function createImports(source) {
@ -57,6 +56,7 @@ function createImports(source) {
function plugin() {
function visitor(node) {
if (
node.lang !== "svelte" &&
!node.value.startsWith("<FileSource") &&
!node.value.startsWith("<script>") &&
!node.value.match(/svx-ignore/g)
@ -125,19 +125,19 @@ const NODE_ENV = process.env.NODE_ENV || "production";
module.exports = {
extensions: [".svelte", ".svx"],
hydratable: NODE_ENV === "production",
preprocess: [
require("svelte-preprocess")(),
replace([
["process.env.VERSION", JSON.stringify(pkg.version)],
["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
]),
postcss({
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 1 version", "ie >= 11"],
}),
require("svelte-preprocess")({
replace: [
["process.env.VERSION", JSON.stringify(pkg.version)],
["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
],
postcss: {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 1 version", "ie >= 11"],
}),
],
},
}),
mdsvex({
remarkPlugins: [plugin, slug, carbonify],

1
docs/vite.config.js
View file

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

2
src/DatePicker/createCalendar.js
View file

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

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
* @type {null | HTMLDivElement} [ref=null]
*/
export let ref = null;
export let ref = null;
</script>
<div
bind:this={ref}
bind:this="{ref}"
role="listbox"
id="menu-{id}"
class:bx--list-box__menu="{true}"

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

@ -20,7 +20,10 @@ export const Default = () => ({
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(
"The description for the backward icon (backwardText)",
"Previous page"
@ -50,7 +53,10 @@ export const Multiple = () => ({
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(
"The description for the backward icon (backwardText)",
"Previous page"

38
src/Pagination/Pagination.svelte
View file

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

4
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

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

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

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

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

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