From 4e2959080b84cc22dbe08d2cfdd80b09253184de Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 17 Jul 2020 15:19:17 -0700 Subject: [PATCH 1/7] refactor: Tag, TagSkeleton - use $$restProps API - add button to filterable variant --- src/components/Tag/Tag.Skeleton.svelte | 15 ++---- src/components/Tag/Tag.Story.svelte | 16 +++++-- src/components/Tag/Tag.stories.js | 44 +++++++++++------ src/components/Tag/Tag.svelte | 65 +++++++++++++++++--------- src/components/Tag/constants.js | 12 ----- src/components/Tag/index.js | 6 +-- 6 files changed, 89 insertions(+), 69 deletions(-) delete mode 100644 src/components/Tag/constants.js diff --git a/src/components/Tag/Tag.Skeleton.svelte b/src/components/Tag/Tag.Skeleton.svelte index 3c1e5daa..30924cd1 100644 --- a/src/components/Tag/Tag.Skeleton.svelte +++ b/src/components/Tag/Tag.Skeleton.svelte @@ -1,15 +1,8 @@ - - + on:mouseleave /> diff --git a/src/components/Tag/Tag.Story.svelte b/src/components/Tag/Tag.Story.svelte index 596ee4ab..b6031b72 100644 --- a/src/components/Tag/Tag.Story.svelte +++ b/src/components/Tag/Tag.Story.svelte @@ -5,19 +5,25 @@ export let story = undefined; export let type = undefined; - import Layout from '../../internal/ui/Layout.svelte'; - import Tag from './Tag.svelte'; - import TagSkeleton from './Tag.Skeleton.svelte'; + import Layout from "../../internal/ui/Layout.svelte"; + import Tag from "./Tag.svelte"; + import TagSkeleton from "./Tag.Skeleton.svelte";
{#if story === 'filter'} - {slot} + { + console.log('click'); + }}> + {slot} + {:else if story === 'skeleton'} {:else} - {slot} + {slot} {/if}
diff --git a/src/components/Tag/Tag.stories.js b/src/components/Tag/Tag.stories.js index 6858b164..16cffe04 100644 --- a/src/components/Tag/Tag.stories.js +++ b/src/components/Tag/Tag.stories.js @@ -1,29 +1,45 @@ -import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; -import Component from './Tag.Story.svelte'; -import { TYPES } from './constants'; +import { withKnobs, select, boolean, text } from "@storybook/addon-knobs"; +import Component from "./Tag.Story.svelte"; -export default { title: 'Tag', decorators: [withKnobs] }; +export default { title: "Tag", decorators: [withKnobs] }; + +const TYPES = { + red: "Red", + magenta: "Magenta", + purple: "Purple", + blue: "Blue", + cyan: "Cyan", + teal: "Teal", + green: "Green", + gray: "Gray", + "cool-gray": "Cool-Gray", + "warm-gray": "Warm-Gray", + "high-contrast": "High-Contrast", +}; export const Default = () => ({ Component, props: { type: select( - 'Tag type (type)', - Object.keys(TYPES).reduce((items, item) => ({ ...items, [`${item} (${item})`]: item }), {}), - 'red' + "Tag type (type)", + Object.keys(TYPES).reduce( + (items, item) => ({ ...items, [`${item} (${item})`]: item }), + {} + ), + "red" ), - disabled: boolean('Disabled (disabled)', false), - slot: text('Content ($$slot)', 'This is not a tag') - } + disabled: boolean("Disabled (disabled)", false), + slot: text("Content ($$slot)", "This is a tag"), + }, }); export const Filter = () => ({ Component, props: { - story: 'filter', + story: "filter", filter: true, - slot: text('Content ($$slot)', 'This is not a tag') - } + slot: text("Content ($$slot)", "This is a tag"), + }, }); -export const Skeleton = () => ({ Component, props: { story: 'skeleton' } }); +export const Skeleton = () => ({ Component, props: { story: "skeleton" } }); diff --git a/src/components/Tag/Tag.svelte b/src/components/Tag/Tag.svelte index 1af43ab0..7fa869df 100644 --- a/src/components/Tag/Tag.svelte +++ b/src/components/Tag/Tag.svelte @@ -1,28 +1,47 @@ - - {TYPES[type]} - {#if filter} - - {/if} - +{#if filter} +
+ + {type} + + +
+{:else} + + + +{/if} diff --git a/src/components/Tag/constants.js b/src/components/Tag/constants.js deleted file mode 100644 index 84af65cf..00000000 --- a/src/components/Tag/constants.js +++ /dev/null @@ -1,12 +0,0 @@ -export const TYPES = { - red: 'Red', - magenta: 'Magenta', - purple: 'Purple', - blue: 'Blue', - cyan: 'Cyan', - teal: 'Teal', - green: 'Green', - gray: 'Gray', - 'cool-gray': 'Cool-Gray', - 'warm-gray': 'Warm-Gray' -}; diff --git a/src/components/Tag/index.js b/src/components/Tag/index.js index 255b5591..21b86b2c 100644 --- a/src/components/Tag/index.js +++ b/src/components/Tag/index.js @@ -1,4 +1,2 @@ -import Tag from './Tag.svelte'; - -export default Tag; -export { default as TagSkeleton } from './Tag.Skeleton.svelte'; +export { default as Tag } from "./Tag.svelte"; +export { default as TagSkeleton } from "./Tag.Skeleton.svelte"; From e886d772c731cabb5992650fca966e9786da5a03 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 18 Jul 2020 20:00:20 -0700 Subject: [PATCH 2/7] refactor: use $$restProps API - add ref prop for applicable components (#196) - add slot to Content Switcher `Switch` component (#183) - remove fillArray, css utilities --- .storybook/preview-body.html | 8 + .storybook/preview-head.html | 5 +- package.json | 2 +- .../Accordion/Accordion.Skeleton.svelte | 37 ++- .../Accordion/Accordion.Story.svelte | 95 +++---- src/components/Accordion/Accordion.stories.js | 31 ++- src/components/Accordion/Accordion.svelte | 23 +- src/components/Accordion/AccordionItem.svelte | 28 +- src/components/Accordion/index.js | 8 +- .../Breadcrumb/Breadcrumb.Skeleton.svelte | 19 +- .../Breadcrumb/Breadcrumb.Story.svelte | 63 ++--- .../Breadcrumb/Breadcrumb.stories.js | 16 +- src/components/Breadcrumb/Breadcrumb.svelte | 16 +- src/components/Breadcrumb/Breadcrumb.test.js | 40 +-- .../Breadcrumb/BreadcrumbItem.svelte | 20 +- src/components/Breadcrumb/index.js | 8 +- src/components/Button/Button.Skeleton.svelte | 23 +- src/components/Button/Button.Story.svelte | 72 +++-- src/components/Button/Button.stories.js | 72 ++--- src/components/Button/Button.svelte | 81 +++--- src/components/Button/index.js | 6 +- .../Checkbox/Checkbox.Skeleton.svelte | 18 +- src/components/Checkbox/Checkbox.Story.svelte | 70 ++--- src/components/Checkbox/Checkbox.stories.js | 30 +- src/components/Checkbox/Checkbox.svelte | 55 ++-- src/components/Checkbox/index.js | 6 +- .../CodeSnippet/CodeSnippet.Skeleton.svelte | 18 +- .../CodeSnippet/CodeSnippet.Story.svelte | 52 ++-- .../CodeSnippet/CodeSnippet.stories.js | 53 ++-- src/components/CodeSnippet/CodeSnippet.svelte | 102 ++++--- src/components/CodeSnippet/index.js | 6 +- src/components/ComboBox/ComboBox.Story.svelte | 82 +++--- src/components/ComboBox/ComboBox.stories.js | 34 +-- src/components/ComboBox/ComboBox.svelte | 66 +++-- src/components/ComboBox/index.js | 4 +- .../ComposedModal/ComposedModal.Story.svelte | 128 +++++---- .../ComposedModal/ComposedModal.stories.js | 176 +++++++----- .../ComposedModal/ComposedModal.svelte | 65 +++-- src/components/ComposedModal/ModalBody.svelte | 12 +- .../ComposedModal/ModalFooter.svelte | 18 +- .../ComposedModal/ModalHeader.svelte | 45 +-- src/components/ComposedModal/index.js | 10 +- .../ContentSwitcher.Story.svelte | 24 +- .../ContentSwitcher.stories.js | 16 +- .../ContentSwitcher/ContentSwitcher.svelte | 46 ++-- src/components/ContentSwitcher/Switch.svelte | 48 ++-- src/components/ContentSwitcher/index.js | 6 +- src/components/Copy/Copy.svelte | 53 ++-- src/components/Copy/index.js | 4 +- .../CopyButton/CopyButton.Story.svelte | 13 +- .../CopyButton/CopyButton.stories.js | 20 +- src/components/CopyButton/CopyButton.svelte | 54 +--- src/components/CopyButton/index.js | 4 +- .../DataTable/DataTable.Story.svelte | 112 ++++---- src/components/DataTable/DataTable.stories.js | 36 +-- src/components/DataTable/DataTable.svelte | 67 ++--- src/components/DataTable/Table.svelte | 31 ++- src/components/DataTable/TableBody.svelte | 8 +- src/components/DataTable/TableCell.svelte | 8 +- .../DataTable/TableContainer.svelte | 20 +- src/components/DataTable/TableHead.svelte | 8 +- src/components/DataTable/TableHeader.svelte | 48 ++-- src/components/DataTable/TableRow.svelte | 11 +- src/components/DataTable/index.js | 18 +- .../DataTableSkeleton/DataTable.stories.js | 18 +- .../DataTableSkeleton.Story.svelte | 4 +- .../DataTableSkeleton.svelte | 25 +- src/components/DataTableSkeleton/index.js | 4 +- .../DatePicker/DatePicker.Skeleton.svelte | 29 +- .../DatePicker/DatePicker.Story.svelte | 12 +- .../DatePicker/DatePicker.stories.js | 161 +++++++---- src/components/DatePicker/DatePicker.svelte | 69 +++-- .../DatePicker/DatePickerInput.svelte | 50 ++-- src/components/DatePicker/createCalendar.js | 66 +++-- src/components/DatePicker/index.js | 6 +- .../Dropdown/Dropdown.Skeleton.svelte | 19 +- src/components/Dropdown/Dropdown.Story.svelte | 21 +- src/components/Dropdown/Dropdown.stories.js | 50 ++-- src/components/Dropdown/Dropdown.svelte | 87 +++--- src/components/Dropdown/index.js | 6 +- .../FileUploader/FileUploader.Skeleton.svelte | 19 +- .../FileUploader/FileUploader.Story.svelte | 22 +- .../FileUploader/FileUploader.stories.js | 136 +++++---- .../FileUploader/FileUploader.svelte | 71 +++-- .../FileUploader/FileUploaderButton.svelte | 51 ++-- .../FileUploaderDropContainer.svelte | 56 ++-- .../FileUploader/FileUploaderItem.svelte | 37 ++- src/components/FileUploader/Filename.svelte | 37 ++- src/components/FileUploader/index.js | 12 +- src/components/Form/Form.Story.svelte | 82 ++++-- src/components/Form/Form.stories.js | 16 +- src/components/Form/Form.svelte | 14 +- src/components/Form/index.js | 4 +- src/components/FormGroup/FormGroup.svelte | 19 +- src/components/FormGroup/index.js | 4 +- src/components/FormItem/FormItem.Story.svelte | 6 +- src/components/FormItem/FormItem.stories.js | 6 +- src/components/FormItem/FormItem.svelte | 16 +- src/components/FormItem/index.js | 4 +- .../FormLabel/FormLabel.Story.svelte | 6 +- src/components/FormLabel/FormLabel.stories.js | 8 +- src/components/FormLabel/FormLabel.svelte | 15 +- src/components/FormLabel/index.js | 4 +- src/components/Icon/Icon.Skeleton.svelte | 12 +- src/components/Icon/Icon.Story.svelte | 12 +- src/components/Icon/Icon.stories.js | 24 +- src/components/Icon/Icon.svelte | 27 +- src/components/Icon/index.js | 6 +- .../InlineLoading/InlineLoading.Story.svelte | 18 +- .../InlineLoading/InlineLoading.stories.js | 30 +- .../InlineLoading/InlineLoading.svelte | 35 +-- .../InlineLoading/InlineLoading.test.js | 28 +- src/components/InlineLoading/index.js | 4 +- src/components/Link/Link.Story.svelte | 9 +- src/components/Link/Link.stories.js | 14 +- src/components/Link/Link.svelte | 31 +-- src/components/Link/Link.test.js | 20 +- src/components/Link/index.js | 4 +- src/components/ListBox/ListBox.svelte | 33 +-- src/components/ListBox/ListBoxField.svelte | 37 ++- src/components/ListBox/ListBoxMenu.svelte | 13 +- src/components/ListBox/ListBoxMenuIcon.svelte | 21 +- src/components/ListBox/ListBoxMenuItem.svelte | 13 +- .../ListBox/ListBoxSelection.svelte | 50 ++-- src/components/ListBox/index.js | 14 +- src/components/ListItem/ListItem.svelte | 16 +- src/components/ListItem/index.js | 4 +- src/components/Loading/Loading.Story.svelte | 4 +- src/components/Loading/Loading.stories.js | 16 +- src/components/Loading/Loading.svelte | 65 +++-- src/components/Loading/Loading.test.js | 24 +- src/components/Loading/index.js | 4 +- src/components/Modal/Modal.Story.svelte | 60 ++-- src/components/Modal/Modal.stories.js | 63 +++-- src/components/Modal/Modal.svelte | 99 +++---- src/components/Modal/index.js | 4 +- .../MultiSelect/MultiSelect.Story.svelte | 27 +- .../MultiSelect/MultiSelect.stories.js | 53 ++-- src/components/MultiSelect/MultiSelect.svelte | 128 +++++---- src/components/MultiSelect/index.js | 4 +- .../Notification/InlineNotification.svelte | 48 ++-- .../Notification/Notification.Story.svelte | 21 +- .../Notification/Notification.stories.js | 62 +++-- .../NotificationActionButton.svelte | 13 +- .../Notification/NotificationButton.svelte | 30 +- .../Notification/NotificationIcon.svelte | 25 +- .../NotificationTextDetails.svelte | 24 +- .../Notification/ToastNotification.svelte | 53 ++-- src/components/Notification/index.js | 12 +- .../NumberInput/NumberInput.Skeleton.svelte | 17 +- .../NumberInput/NumberInput.Story.svelte | 8 +- .../NumberInput/NumberInput.stories.js | 46 ++-- src/components/NumberInput/NumberInput.svelte | 115 +++++--- src/components/NumberInput/index.js | 6 +- .../OrderedList/OrderedList.Story.svelte | 6 +- .../OrderedList/OrderedList.stories.js | 8 +- src/components/OrderedList/OrderedList.svelte | 12 +- src/components/OrderedList/index.js | 4 +- .../OverflowMenu/OverflowMenu.Story.svelte | 38 ++- .../OverflowMenu/OverflowMenu.stories.js | 77 +++--- .../OverflowMenu/OverflowMenu.svelte | 94 ++++--- .../OverflowMenu/OverflowMenuItem.svelte | 38 ++- src/components/OverflowMenu/formatStyle.js | 8 +- src/components/OverflowMenu/index.js | 6 +- .../Pagination/Pagination.Skeleton.svelte | 18 +- .../Pagination/Pagination.Story.svelte | 6 +- .../Pagination/Pagination.stories.js | 84 ++++-- src/components/Pagination/Pagination.svelte | 77 +++--- src/components/Pagination/index.js | 6 +- .../ProgressIndicator.Skeleton.svelte | 25 +- .../ProgressIndicator.Story.svelte | 14 +- .../ProgressIndicator.stories.js | 26 +- .../ProgressIndicator.svelte | 26 +- .../ProgressIndicator/ProgressStep.svelte | 49 ++-- src/components/ProgressIndicator/index.js | 8 +- .../RadioButton/RadioButton.Skeleton.svelte | 18 +- .../RadioButton/RadioButton.Story.svelte | 10 +- .../RadioButton/RadioButton.stories.js | 28 +- src/components/RadioButton/RadioButton.svelte | 50 ++-- src/components/RadioButton/index.js | 6 +- .../RadioButtonGroup.Story.svelte | 10 +- .../RadioButtonGroup.stories.js | 56 ++-- .../RadioButtonGroup/RadioButtonGroup.svelte | 33 +-- src/components/RadioButtonGroup/index.js | 4 +- src/components/Search/Search.Skeleton.svelte | 17 +- src/components/Search/Search.Story.svelte | 12 +- src/components/Search/Search.stories.js | 30 +- src/components/Search/Search.svelte | 77 +++--- src/components/Search/index.js | 6 +- src/components/Select/Select.Skeleton.svelte | 19 +- src/components/Select/Select.Story.svelte | 26 +- src/components/Select/Select.stories.js | 44 +-- src/components/Select/Select.svelte | 106 +++---- src/components/Select/SelectItem.svelte | 29 +- src/components/Select/SelectItemGroup.svelte | 9 +- src/components/Select/index.js | 10 +- .../SkeletonPlaceholder.Story.svelte | 4 +- .../SkeletonPlaceholder.stories.js | 16 +- .../SkeletonPlaceholder.svelte | 14 +- src/components/SkeletonPlaceholder/index.js | 4 +- .../SkeletonText/SkeletonText.Story.svelte | 4 +- .../SkeletonText/SkeletonText.stories.js | 22 +- .../SkeletonText/SkeletonText.svelte | 36 ++- src/components/SkeletonText/index.js | 4 +- src/components/Slider/Slider.Skeleton.svelte | 29 +- src/components/Slider/Slider.Story.svelte | 8 +- src/components/Slider/Slider.stories.js | 49 ++-- src/components/Slider/Slider.svelte | 76 ++--- src/components/Slider/index.js | 6 +- .../StructuredList.Skeleton.svelte | 37 ++- .../StructuredList.Story.svelte | 54 ++-- .../StructuredList/StructuredList.stories.js | 10 +- .../StructuredList/StructuredList.svelte | 27 +- .../StructuredList/StructuredListBody.svelte | 14 +- .../StructuredList/StructuredListCell.svelte | 13 +- .../StructuredList/StructuredListHead.svelte | 14 +- .../StructuredList/StructuredListInput.svelte | 30 +- .../StructuredList/StructuredListRow.svelte | 24 +- src/components/StructuredList/index.js | 17 +- src/components/Tabs/Tab.svelte | 41 ++- src/components/Tabs/TabContent.svelte | 18 +- src/components/Tabs/Tabs.Story.svelte | 12 +- src/components/Tabs/Tabs.stories.js | 55 ++-- src/components/Tabs/Tabs.svelte | 41 +-- src/components/Tabs/TabsSkeleton.svelte | 25 +- src/components/Tabs/index.js | 10 +- src/components/Tag/Tag.svelte | 6 +- .../TextArea/TextArea.Skeleton.svelte | 17 +- src/components/TextArea/TextArea.Story.svelte | 13 +- src/components/TextArea/TextArea.stories.js | 36 +-- src/components/TextArea/TextArea.svelte | 70 +++-- src/components/TextArea/index.js | 6 +- src/components/TextInput/PasswordInput.svelte | 96 ++++--- .../TextInput/TextInput.Skeleton.svelte | 17 +- .../TextInput/TextInput.Story.svelte | 21 +- src/components/TextInput/TextInput.stories.js | 120 ++++---- src/components/TextInput/TextInput.svelte | 71 ++--- src/components/TextInput/index.js | 8 +- src/components/Tile/ClickableTile.svelte | 19 +- src/components/Tile/ExpandableTile.svelte | 68 ++--- src/components/Tile/RadioTile.svelte | 53 ++-- src/components/Tile/SelectableTile.svelte | 49 ++-- src/components/Tile/Tile.Story.svelte | 45 +-- src/components/Tile/Tile.stories.js | 54 ++-- src/components/Tile/Tile.svelte | 12 +- src/components/Tile/TileGroup.svelte | 23 +- src/components/Tile/index.js | 14 +- .../TimePicker/TimePicker.Story.svelte | 29 +- .../TimePicker/TimePicker.stories.js | 64 +++-- src/components/TimePicker/TimePicker.svelte | 53 ++-- .../TimePicker/TimePickerSelect.svelte | 44 +-- src/components/TimePicker/index.js | 6 +- src/components/Toggle/Toggle.Skeleton.svelte | 36 ++- src/components/Toggle/Toggle.Story.svelte | 13 +- src/components/Toggle/Toggle.stories.js | 44 +-- src/components/Toggle/Toggle.svelte | 48 ++-- src/components/Toggle/index.js | 6 +- .../ToggleSmall/ToggleSmall.Skeleton.svelte | 40 ++- .../ToggleSmall/ToggleSmall.Story.svelte | 19 +- .../ToggleSmall/ToggleSmall.stories.js | 44 +-- src/components/ToggleSmall/ToggleSmall.svelte | 61 ++-- src/components/ToggleSmall/index.js | 6 +- src/components/Tooltip/Tooltip.Story.svelte | 33 ++- src/components/Tooltip/Tooltip.stories.js | 58 ++-- src/components/Tooltip/Tooltip.svelte | 104 ++++--- src/components/Tooltip/index.js | 4 +- .../TooltipDefinition.Story.svelte | 6 +- .../TooltipDefinition.stories.js | 34 +-- .../TooltipDefinition.svelte | 51 +++- src/components/TooltipDefinition/index.js | 4 +- .../TooltipIcon/TooltipIcon.Story.svelte | 6 +- .../TooltipIcon/TooltipIcon.stories.js | 28 +- src/components/TooltipIcon/TooltipIcon.svelte | 41 ++- src/components/TooltipIcon/index.js | 4 +- src/components/UIShell/FormTest.svelte | 21 +- src/components/UIShell/SkipToContent.svelte | 2 +- .../UnorderedList/UnorderedList.Story.svelte | 6 +- .../UnorderedList/UnorderedList.stories.js | 8 +- .../UnorderedList/UnorderedList.svelte | 12 +- src/components/UnorderedList/index.js | 4 +- src/index.js | 260 +++++------------- src/internal/ui/Layout.svelte | 13 +- src/lib/__tests__/css.spec.js | 9 - src/lib/__tests__/fill-array.spec.js | 7 - src/lib/css.js | 16 -- src/lib/fill-array.js | 5 - src/lib/index.js | 4 +- yarn.lock | 8 +- 288 files changed, 4681 insertions(+), 4498 deletions(-) create mode 100644 .storybook/preview-body.html delete mode 100644 src/lib/__tests__/css.spec.js delete mode 100644 src/lib/__tests__/fill-array.spec.js delete mode 100644 src/lib/css.js delete mode 100644 src/lib/fill-array.js diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 00000000..15966e2e --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,8 @@ + diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 74f76ab2..a5204e1e 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1 +1,4 @@ - \ No newline at end of file + diff --git a/package.json b/package.json index 2c6fadd2..6793ca6e 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "sideEffects": false, "dependencies": { - "carbon-icons-svelte": "10.9.3", + "carbon-icons-svelte": "^10.13.0", "flatpickr": "4.6.3" }, "devDependencies": { diff --git a/src/components/Accordion/Accordion.Skeleton.svelte b/src/components/Accordion/Accordion.Skeleton.svelte index 73b2def3..436d57ea 100644 --- a/src/components/Accordion/Accordion.Skeleton.svelte +++ b/src/components/Accordion/Accordion.Skeleton.svelte @@ -1,40 +1,39 @@
    + on:mouseleave> {#if open} -
  • - - - +
  • + + + -
    +
  • {/if} - {#each fillArray(open ? count - 1 : count) as item, i (item)} -
  • - - - + {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)} +
  • + + +
  • {/each} diff --git a/src/components/Accordion/Accordion.Story.svelte b/src/components/Accordion/Accordion.Story.svelte index b4288c6b..291db477 100644 --- a/src/components/Accordion/Accordion.Story.svelte +++ b/src/components/Accordion/Accordion.Story.svelte @@ -4,52 +4,53 @@ export let open = undefined; export let count = undefined; - import Layout from '../../internal/ui/Layout.svelte'; - import Accordion from './Accordion.svelte'; - import AccordionItem from './AccordionItem.svelte'; - import AccordionSkeleton from './Accordion.Skeleton.svelte'; + import Accordion from "./Accordion.svelte"; + import AccordionItem from "./AccordionItem.svelte"; + import AccordionSkeleton from "./Accordion.Skeleton.svelte"; - - {#if story === 'skeleton'} -
    - -
    - {:else} - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. -

    -
    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. -

    -
    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. -

    -
    - -
    - Section 4 title ( - the title can be a node - ) -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. -

    -
    -
    - {/if} -
    +{#if story === 'skeleton'} +
    + +
    +{:else} + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    + +
    + Section 4 title ( + the title can be a node + ) +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    +{/if} diff --git a/src/components/Accordion/Accordion.stories.js b/src/components/Accordion/Accordion.stories.js index e8ac18a9..4dd33cce 100644 --- a/src/components/Accordion/Accordion.stories.js +++ b/src/components/Accordion/Accordion.stories.js @@ -1,21 +1,32 @@ -import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'; -import Component from './Accordion.Story.svelte'; +import { + withKnobs, + text, + boolean, + number, + select, +} from "@storybook/addon-knobs"; +import Component from "./Accordion.Story.svelte"; -export default { title: 'Accordion', decorators: [withKnobs] }; +export default { title: "Accordion", decorators: [withKnobs] }; export const Default = () => ({ Component, props: { - title: text('The title (title)', 'Section 1 title'), - open: boolean('Open the section (open)', false) - } + align: select( + "Accordion heading alignment (align)", + ["start", "end"], + "end" + ), + title: text("The title (title)", "Section 1 title"), + open: boolean("Open the section (open)", false), + }, }); export const Skeleton = () => ({ Component, props: { - story: 'skeleton', - open: boolean('Show first item opened (open)', true), - count: number('Set number of items (count)', 4) - } + story: "skeleton", + open: boolean("Show first item opened (open)", true), + count: number("Set number of items (count)", 4), + }, }); diff --git a/src/components/Accordion/Accordion.svelte b/src/components/Accordion/Accordion.svelte index 8b191c09..d08817c4 100644 --- a/src/components/Accordion/Accordion.svelte +++ b/src/components/Accordion/Accordion.svelte @@ -1,28 +1,21 @@ {#if skeleton} - -{/if} - -{#if !skeleton} + +{:else}
      + on:mouseleave>
    {/if} diff --git a/src/components/Accordion/AccordionItem.svelte b/src/components/Accordion/AccordionItem.svelte index 20d18636..3d34937b 100644 --- a/src/components/Accordion/AccordionItem.svelte +++ b/src/components/Accordion/AccordionItem.svelte @@ -1,27 +1,25 @@
  • { animation = undefined; - }} - {style}> + }}> -
    +
  • diff --git a/src/components/Accordion/index.js b/src/components/Accordion/index.js index 9b84d090..4c62b070 100644 --- a/src/components/Accordion/index.js +++ b/src/components/Accordion/index.js @@ -1,5 +1,3 @@ -import Accordion from './Accordion.svelte'; - -export default Accordion; -export { default as AccordionItem } from './AccordionItem.svelte'; -export { default as AccordionSkeleton } from './Accordion.Skeleton.svelte'; +export { default as Accordion } from "./Accordion.svelte"; +export { default as AccordionItem } from "./AccordionItem.svelte"; +export { default as AccordionSkeleton } from "./Accordion.Skeleton.svelte"; diff --git a/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte b/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte index 1c79f8a9..c40197b1 100644 --- a/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte +++ b/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte @@ -1,21 +1,14 @@ - -
    + on:mouseleave> {#each [0, 1, 2] as item, i (item)} -
    -   +
    +  
    {/each}
    diff --git a/src/components/Breadcrumb/Breadcrumb.Story.svelte b/src/components/Breadcrumb/Breadcrumb.Story.svelte index 6e7c0df9..c42ecf85 100644 --- a/src/components/Breadcrumb/Breadcrumb.Story.svelte +++ b/src/components/Breadcrumb/Breadcrumb.Story.svelte @@ -2,38 +2,35 @@ export let story = undefined; export let noTrailingSlash = undefined; - import Layout from '../../internal/ui/Layout.svelte'; - import Breadcrumb from './Breadcrumb.svelte'; - import BreadcrumbItem from './BreadcrumbItem.svelte'; - import BreadcrumbSkeleton from './Breadcrumb.Skeleton.svelte'; + import Breadcrumb from "./Breadcrumb.svelte"; + import BreadcrumbItem from "./BreadcrumbItem.svelte"; + import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte"; - - {#if story === 'current page'} - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - - {:else if story === 'current page with aria-current'} - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - - {:else if story === 'skeleton'} - - {:else} - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - - {/if} - +{#if story === 'current page'} + + + Breadcrumb 1 + + Breadcrumb 2 + Breadcrumb 3 + +{:else if story === 'current page with aria-current'} + + + Breadcrumb 1 + + Breadcrumb 2 + Breadcrumb 3 + +{:else if story === 'skeleton'} + +{:else} + + + Breadcrumb 1 + + Breadcrumb 2 + Breadcrumb 3 + +{/if} diff --git a/src/components/Breadcrumb/Breadcrumb.stories.js b/src/components/Breadcrumb/Breadcrumb.stories.js index 63ddbe7e..44e80de0 100644 --- a/src/components/Breadcrumb/Breadcrumb.stories.js +++ b/src/components/Breadcrumb/Breadcrumb.stories.js @@ -1,24 +1,26 @@ -import { withKnobs, boolean } from '@storybook/addon-knobs'; -import Component from './Breadcrumb.Story.svelte'; +import { withKnobs, boolean } from "@storybook/addon-knobs"; +import Component from "./Breadcrumb.Story.svelte"; -export default { title: 'Breadcrumb', decorators: [withKnobs] }; +export default { title: "Breadcrumb", decorators: [withKnobs] }; export const Default = () => ({ Component, - props: { noTrailingSlash: boolean('No Trailing Slash (noTrailingSlash)', false) } + props: { + noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false), + }, }); export const Skeleton = () => ({ Component, - props: { story: 'skeleton' } + props: { story: "skeleton" }, }); export const CurrentPage = () => ({ Component, - props: { story: 'current page' } + props: { story: "current page" }, }); export const CurrentPageWithAriaCurrent = () => ({ Component, - props: { story: 'current page with aria-current' } + props: { story: "current page with aria-current" }, }); diff --git a/src/components/Breadcrumb/Breadcrumb.svelte b/src/components/Breadcrumb/Breadcrumb.svelte index ee0b1f5a..df66126d 100644 --- a/src/components/Breadcrumb/Breadcrumb.svelte +++ b/src/components/Breadcrumb/Breadcrumb.svelte @@ -1,21 +1,17 @@ diff --git a/src/components/Breadcrumb/Breadcrumb.test.js b/src/components/Breadcrumb/Breadcrumb.test.js index 292cc147..4e8071ba 100644 --- a/src/components/Breadcrumb/Breadcrumb.test.js +++ b/src/components/Breadcrumb/Breadcrumb.test.js @@ -1,18 +1,20 @@ -import { render } from '@testing-library/svelte'; -import Component from './Breadcrumb.Story.svelte'; +import { render } from "@testing-library/svelte"; +import Component from "./Breadcrumb.Story.svelte"; -describe('Breadcrumb', () => { +describe("Breadcrumb", () => { function getLastBreadcrumbItem(container) { - const breadcrumbItems = container.querySelectorAll('.bx--breadcrumb-item'); + const breadcrumbItems = container.querySelectorAll(".bx--breadcrumb-item"); return breadcrumbItems[breadcrumbItems.length - 1]; } - test('default', () => { - const { getByText, container, rerender } = render(Component, { noTrailingSlash: false }); - const selector = '.bx--breadcrumb--no-trailing-slash'; - expect(getByText('Breadcrumb 1')).toBeInTheDocument(); - expect(getByText('Breadcrumb 2')).toBeInTheDocument(); - expect(getByText('Breadcrumb 3')).toBeInTheDocument(); + test("default", () => { + const { getByText, container, rerender } = render(Component, { + noTrailingSlash: false, + }); + const selector = ".bx--breadcrumb--no-trailing-slash"; + expect(getByText("Breadcrumb 1")).toBeInTheDocument(); + expect(getByText("Breadcrumb 2")).toBeInTheDocument(); + expect(getByText("Breadcrumb 3")).toBeInTheDocument(); expect(container.querySelector(selector)).not.toBeInTheDocument(); expect(container.innerHTML).toMatchSnapshot(); @@ -21,19 +23,23 @@ describe('Breadcrumb', () => { expect(container.innerHTML).toMatchSnapshot(); }); - test('skeleton', () => { - const { container } = render(Component, { story: 'skeleton' }); + test("skeleton", () => { + const { container } = render(Component, { story: "skeleton" }); expect(container.innerHTML).toMatchSnapshot(); }); - test('current page', () => { - const { container } = render(Component, { story: 'current page' }); + test("current page", () => { + const { container } = render(Component, { story: "current page" }); const lastItem = getLastBreadcrumbItem(container); - expect(lastItem.classList.contains('bx--breadcrumb-item--current')).toEqual(true); + expect(lastItem.classList.contains("bx--breadcrumb-item--current")).toEqual( + true + ); }); - test('current page with aria-current', () => { - const { container } = render(Component, { story: 'current page with aria-current' }); + test("current page with aria-current", () => { + const { container } = render(Component, { + story: "current page with aria-current", + }); const lastItem = getLastBreadcrumbItem(container); expect(lastItem.querySelector('[aria-current="page"]')).toBeTruthy(); }); diff --git a/src/components/Breadcrumb/BreadcrumbItem.svelte b/src/components/Breadcrumb/BreadcrumbItem.svelte index 7718f20d..80dbb9e6 100644 --- a/src/components/Breadcrumb/BreadcrumbItem.svelte +++ b/src/components/Breadcrumb/BreadcrumbItem.svelte @@ -1,28 +1,24 @@
  • + on:mouseleave> {#if href} - + {:else} - + {/if}
  • diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js index d14c306a..cdda91e0 100644 --- a/src/components/Breadcrumb/index.js +++ b/src/components/Breadcrumb/index.js @@ -1,5 +1,3 @@ -import Breadcrumb from './Breadcrumb.svelte'; - -export default Breadcrumb; -export { default as BreadcrumbItem } from './BreadcrumbItem.svelte'; -export { default as BreadcrumbSkeleton } from './Breadcrumb.Skeleton.svelte'; +export { default as Breadcrumb } from "./Breadcrumb.svelte"; +export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte"; +export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte"; diff --git a/src/components/Button/Button.Skeleton.svelte b/src/components/Button/Button.Skeleton.svelte index 80cdff13..5ad89eb3 100644 --- a/src/components/Button/Button.Skeleton.svelte +++ b/src/components/Button/Button.Skeleton.svelte @@ -1,31 +1,30 @@ {#if href} + on:mouseleave> {''} {:else}
    + on:mouseleave /> {/if} diff --git a/src/components/Button/Button.Story.svelte b/src/components/Button/Button.Story.svelte index a746bc81..3786864b 100644 --- a/src/components/Button/Button.Story.svelte +++ b/src/components/Button/Button.Story.svelte @@ -1,11 +1,9 @@ - -
    - {#if story === 'skeleton'} - -   - -   - - {:else if story === 'inline'} - - -
    - {:else} - -   - -   - -   - - {/if} -
    - +
    + {#if story === 'skeleton'} + +   + +   + + {:else if story === 'inline'} + + +
    + {:else} + +   + +   + +   + + {/if} +
    diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js index 11274f5b..e5527bdf 100644 --- a/src/components/Button/Button.stories.js +++ b/src/components/Button/Button.stories.js @@ -1,62 +1,62 @@ -import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; -import Component from './Button.Story.svelte'; +import { withKnobs, select, boolean, text } from "@storybook/addon-knobs"; +import Component from "./Button.Story.svelte"; -export default { title: 'Button', decorators: [withKnobs] }; +export default { title: "Button", decorators: [withKnobs] }; const kinds = { - 'Primary button (primary)': 'primary', - 'Secondary button (secondary)': 'secondary', - 'Danger button (danger)': 'danger', - 'Ghost button (ghost)': 'ghost' + "Primary button (primary)": "primary", + "Secondary button (secondary)": "secondary", + "Danger button (danger)": "danger", + "Ghost button (ghost)": "ghost", }; const sizes = { - Default: 'default', - Field: 'field', - Small: 'small' + Default: "default", + Field: "field", + Small: "small", }; export const Default = () => ({ Component, props: { - kind: select('Button kind (kind)', kinds, 'primary'), - disabled: boolean('Disabled (disabled)', false), - size: select('Button size (size)', sizes, 'default'), - iconDescription: text('Icon description (iconDescription)', 'Button icon'), - small: boolean('Small (small) - Deprecated in favor of `size`', false) - } + kind: select("Button kind (kind)", kinds, "primary"), + disabled: boolean("Disabled (disabled)", false), + size: select("Button size (size)", sizes, "default"), + iconDescription: text("Icon description (iconDescription)", "Button icon"), + small: boolean("Small (small) - Deprecated in favor of `size`", false), + }, }); export const IconOnlyButtons = () => ({ Component, props: { - story: 'icon-only buttons', - kind: select('Button kind (kind)', kinds, 'primary'), - disabled: boolean('Disabled (disabled)', false), - size: select('Button size (size)', sizes, 'default'), - iconDescription: text('Icon description (iconDescription)', 'Button icon'), + story: "icon-only buttons", + kind: select("Button kind (kind)", kinds, "primary"), + disabled: boolean("Disabled (disabled)", false), + size: select("Button size (size)", sizes, "default"), + iconDescription: text("Icon description (iconDescription)", "Button icon"), tooltipPosition: select( - 'Tooltip position (tooltipPosition)', - ['top', 'right', 'bottom', 'left'], - 'bottom' + "Tooltip position (tooltipPosition)", + ["top", "right", "bottom", "left"], + "bottom" ), tooltipAlignment: select( - 'Tooltip alignment (tooltipAlignment)', - ['start', 'center', 'end'], - 'center' - ) - } + "Tooltip alignment (tooltipAlignment)", + ["start", "center", "end"], + "center" + ), + }, }); export const SetOfButtons = () => ({ Component, props: { - story: 'set of buttons', - disabled: boolean('Disabled (disabled)', false), - small: boolean('Small (small)', false), - size: select('Button size (size)', sizes, 'default'), - iconDescription: text('Icon description (iconDescription)', 'Button icon') - } + story: "set of buttons", + disabled: boolean("Disabled (disabled)", false), + small: boolean("Small (small)", false), + size: select("Button size (size)", sizes, "default"), + iconDescription: text("Icon description (iconDescription)", "Button icon"), + }, }); -export const Skeleton = () => ({ Component, props: { story: 'skeleton' } }); +export const Skeleton = () => ({ Component, props: { story: "skeleton" } }); diff --git a/src/components/Button/Button.svelte b/src/components/Button/Button.svelte index 9f8b5edc..c2db61e5 100644 --- a/src/components/Button/Button.svelte +++ b/src/components/Button/Button.svelte @@ -1,50 +1,49 @@ @@ -52,30 +51,42 @@ {:else if href && !disabled} - + {#if hasIconOnly} - {iconDescription} + {iconDescription} {/if} {#if icon} {:else} - diff --git a/src/components/Button/index.js b/src/components/Button/index.js index a77dcd92..f87e835f 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -1,4 +1,2 @@ -import Button from './Button.svelte'; - -export default Button; -export { default as ButtonSkeleton } from './Button.Skeleton.svelte'; +export { default as Button } from "./Button.svelte"; +export { default as ButtonSkeleton } from "./Button.Skeleton.svelte"; diff --git a/src/components/Checkbox/Checkbox.Skeleton.svelte b/src/components/Checkbox/Checkbox.Skeleton.svelte index 282d4b7e..02e85439 100644 --- a/src/components/Checkbox/Checkbox.Skeleton.svelte +++ b/src/components/Checkbox/Checkbox.Skeleton.svelte @@ -1,17 +1,11 @@ - -
    - + on:mouseleave> +
    diff --git a/src/components/Checkbox/Checkbox.Story.svelte b/src/components/Checkbox/Checkbox.Story.svelte index 3da0da39..6c795847 100644 --- a/src/components/Checkbox/Checkbox.Story.svelte +++ b/src/components/Checkbox/Checkbox.Story.svelte @@ -1,39 +1,47 @@ - - {#if story === 'skeleton'} -
    - -
    - {:else if story === 'unchecked'} -
    - Checkbox heading - - -
    - {:else} -
    - Checkbox heading - { - console.log('on:check', detail); - }} /> - -
    - {/if} -
    +{#if story === 'skeleton'} +
    + +
    +{:else if story === 'unchecked'} +
    + Checkbox heading + + +
    +{:else} +
    + Checkbox heading + { + console.log('on:check', detail); + }} /> + +
    +{/if} diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js index 48726260..850f4ad6 100644 --- a/src/components/Checkbox/Checkbox.stories.js +++ b/src/components/Checkbox/Checkbox.stories.js @@ -1,27 +1,27 @@ -import { withKnobs, boolean, text } from '@storybook/addon-knobs'; -import Component from './Checkbox.Story.svelte'; +import { withKnobs, boolean, text } from "@storybook/addon-knobs"; +import Component from "./Checkbox.Story.svelte"; -export default { title: 'Checkbox', decorators: [withKnobs] }; +export default { title: "Checkbox", decorators: [withKnobs] }; export const Checked = () => ({ Component, props: { - labelText: text('Label text (labelText)', 'Checkbox label'), - indeterminate: boolean('Intermediate (indeterminate)', false), - disabled: boolean('Disabled (disabled)', false), - hideLabel: boolean('Hide label (hideLabel)', false) - } + labelText: text("Label text (labelText)", "Checkbox label"), + indeterminate: boolean("Intermediate (indeterminate)", false), + disabled: boolean("Disabled (disabled)", false), + hideLabel: boolean("Hide label (hideLabel)", false), + }, }); export const Unchecked = () => ({ Component, props: { - story: 'unchecked', - labelText: text('Label text (labelText)', 'Checkbox label'), - indeterminate: boolean('Intermediate (indeterminate)', false), - disabled: boolean('Disabled (disabled)', false), - hideLabel: boolean('Hide label (hideLabel)', false) - } + story: "unchecked", + labelText: text("Label text (labelText)", "Checkbox label"), + indeterminate: boolean("Intermediate (indeterminate)", false), + disabled: boolean("Disabled (disabled)", false), + hideLabel: boolean("Hide label (hideLabel)", false), + }, }); -export const Skeleton = () => ({ Component, props: { story: 'skeleton' } }); +export const Skeleton = () => ({ Component, props: { story: "skeleton" } }); diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte index e682f07c..a2d34c57 100644 --- a/src/components/Checkbox/Checkbox.svelte +++ b/src/components/Checkbox/Checkbox.svelte @@ -1,48 +1,49 @@
    + on:mouseleave> { checked = !checked; - }} - {indeterminate} - {disabled} - {checked} - {name} - {id} - {readonly} /> -
    diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index ab919dce..fd615337 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -1,4 +1,2 @@ -import Checkbox from './Checkbox.svelte'; - -export default Checkbox; -export { default as CheckboxSkeleton } from './Checkbox.Skeleton.svelte'; +export { default as Checkbox } from "./Checkbox.svelte"; +export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte"; diff --git a/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte b/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte index cd988e15..994614ff 100644 --- a/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte +++ b/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte @@ -1,20 +1,18 @@
    -
    + on:mouseleave> +
    {#if type === 'single'} {:else if type === 'multi'} diff --git a/src/components/CodeSnippet/CodeSnippet.Story.svelte b/src/components/CodeSnippet/CodeSnippet.Story.svelte index 229f6225..ffdeb131 100644 --- a/src/components/CodeSnippet/CodeSnippet.Story.svelte +++ b/src/components/CodeSnippet/CodeSnippet.Story.svelte @@ -1,32 +1,25 @@ - -
    - {#if story === 'skeleton'} -
    - - -
    - {:else if story === 'inline'} - {'node -v'} - {:else if story === 'single line'} - - {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'} - - {:else if story === 'multi line'} - - {`@mixin grid-container { +
    + {#if story === 'skeleton'} +
    + + +
    + {:else if story === 'inline'} + {'node -v'} + {:else if story === 'single line'} + + {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'} + + {:else if story === 'multi line'} + + {`@mixin grid-container { width: 100%; padding-right: padding(mobile); padding-left: padding(mobile); @@ -43,11 +36,10 @@ $z-indexes: ( dropdown : 7000, header : 6000, footer : 5000, - hidden : - 1, - overflowHidden: - 1, + hidden : -1, + overflowHidden: -1, floating: 10000 );`} - - {/if} -
    - +
    + {/if} +
    diff --git a/src/components/CodeSnippet/CodeSnippet.stories.js b/src/components/CodeSnippet/CodeSnippet.stories.js index 5db61d0f..b53aab78 100644 --- a/src/components/CodeSnippet/CodeSnippet.stories.js +++ b/src/components/CodeSnippet/CodeSnippet.stories.js @@ -1,39 +1,52 @@ -import { withKnobs, boolean, text } from '@storybook/addon-knobs'; -import Component from './CodeSnippet.Story.svelte'; +import { withKnobs, boolean, text } from "@storybook/addon-knobs"; +import Component from "./CodeSnippet.Story.svelte"; -export default { title: 'CodeSnippet', decorators: [withKnobs] }; +export default { title: "CodeSnippet", decorators: [withKnobs] }; export const Inline = () => ({ Component, props: { - story: 'inline', - light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'), - copyLabel: text('ARIA label for the snippet/copy button (copyLabel)', 'copyable code snippet') - } + story: "inline", + light: boolean("Light variant (light)", false), + feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"), + copyLabel: text( + "ARIA label for the snippet/copy button (copyLabel)", + "copyable code snippet" + ), + }, }); export const SingleLine = () => ({ Component, props: { - story: 'single line', - feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'), + story: "single line", + light: boolean("Light variant (light)", false), + feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"), copyButtonDescription: text( - 'Copy icon description (copyButtonDescription)', - 'copyable code snippet' + "Copy icon description (copyButtonDescription)", + "copyable code snippet" ), - 'aria-label': text('ARIA label of the container (ariaLabel)', 'Container label') - } + "aria-label": text( + "ARIA label of the container (ariaLabel)", + "Container label" + ), + }, }); export const MultiLine = () => ({ Component, props: { - story: 'multi line', - feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'), - showMoreText: text('Text for "show more" button (showMoreText)', 'Show more'), - showLessText: text('Text for "show less" button (showLessText)', 'Show less') - } + story: "multi line", + feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"), + showMoreText: text( + 'Text for "show more" button (showMoreText)', + "Show more" + ), + showLessText: text( + 'Text for "show less" button (showLessText)', + "Show less" + ), + }, }); -export const Skeleton = () => ({ Component, props: { story: 'skeleton' } }); +export const Skeleton = () => ({ Component, props: { story: "skeleton" } }); diff --git a/src/components/CodeSnippet/CodeSnippet.svelte b/src/components/CodeSnippet/CodeSnippet.svelte index 0cc3abb3..c0887296 100644 --- a/src/components/CodeSnippet/CodeSnippet.svelte +++ b/src/components/CodeSnippet/CodeSnippet.svelte @@ -1,97 +1,95 @@ {#if skeleton} - -{/if} - -{#if !skeleton} + +{:else} {#if type === 'inline'} + on:mouseleave> {code} {:else}
    + on:mouseleave>
    + role={type === 'single' ? 'textbox' : undefined} + tabindex={type === 'single' ? '0' : undefined} + class:bx--snippet-container={true} + aria-label={$$restProps['aria-label'] || copyLabel || 'code-snippet'}> -
    +          
                 {code}
               
    + {feedbackTimeout} + iconDescription={copyButtonDescription} + on:click + on:animationend /> {#if showMoreLess} {/if}
    diff --git a/src/components/CodeSnippet/index.js b/src/components/CodeSnippet/index.js index 1c83bd55..4775c90e 100644 --- a/src/components/CodeSnippet/index.js +++ b/src/components/CodeSnippet/index.js @@ -1,4 +1,2 @@ -import CodeSnippet from './CodeSnippet.svelte'; - -export default CodeSnippet; -export { default as CodeSnippetSkeleton } from './CodeSnippet.Skeleton.svelte'; +export { default as CodeSnippet } from "./CodeSnippet.svelte"; +export { default as CodeSnippetSkeleton } from "./CodeSnippet.Skeleton.svelte"; diff --git a/src/components/ComboBox/ComboBox.Story.svelte b/src/components/ComboBox/ComboBox.Story.svelte index 652f51ec..a54292b9 100644 --- a/src/components/ComboBox/ComboBox.Story.svelte +++ b/src/components/ComboBox/ComboBox.Story.svelte @@ -1,23 +1,25 @@ - -

    Currently, this component does not support items as slots.

    -

    - items - must be an array of objects; mandatory fields are `id` and `text`. -

    -
    -    {'items = Array<{ id: string; text: string; }>'}
    -  
    -
    - - -
    -
    - -
    -
    +

    Currently, this component does not support items as slots.

    +

    + items + must be an array of objects; mandatory fields are `id` and `text`. +

    +
    +  {'items = Array<{ id: string; text: string; }>'}
    +
    +
    + + +
    +
    + +
    diff --git a/src/components/ComboBox/ComboBox.stories.js b/src/components/ComboBox/ComboBox.stories.js index 4e6973f4..f16ef26b 100644 --- a/src/components/ComboBox/ComboBox.stories.js +++ b/src/components/ComboBox/ComboBox.stories.js @@ -1,25 +1,27 @@ -import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; -import Component from './ComboBox.Story.svelte'; +import { withKnobs, select, boolean, text } from "@storybook/addon-knobs"; +import Component from "./ComboBox.Story.svelte"; -export default { title: 'ComboBox', decorators: [withKnobs] }; +export default { title: "ComboBox", decorators: [withKnobs] }; const sizes = { - 'Extra large size (xl)': 'xl', - 'Regular size (lg)': '', - 'Small size (sm)': 'sm' + "Extra large size (xl)": "xl", + "Regular size (lg)": "", + "Small size (sm)": "sm", }; export const Default = () => ({ Component, props: { - size: select('Field size (size)', sizes, ''), - placeholder: text('Placeholder text (placeholder)', 'Filter...'), - titleText: text('Title (titleText)', 'Combobox title'), - helperText: text('Helper text (helperText)', 'Optional helper text here'), - light: boolean('Light (light)', false), - disabled: boolean('Disabled (disabled)', false), - invalid: boolean('Invalid (invalid)', false), - invalidText: text('Invalid text (invalidText)', 'A valid value is required'), - name: 'combo-box-name' - } + size: select("Field size (size)", sizes, ""), + placeholder: text("Placeholder text (placeholder)", "Filter..."), + titleText: text("Title (titleText)", "Combobox title"), + light: boolean("Light (light)", false), + disabled: boolean("Disabled (disabled)", false), + invalid: boolean("Invalid (invalid)", false), + invalidText: text( + "Invalid text (invalidText)", + "A valid value is required" + ), + name: "combo-box-name", + }, }); diff --git a/src/components/ComboBox/ComboBox.svelte b/src/components/ComboBox/ComboBox.svelte index 964c4f76..c7ddd0c0 100644 --- a/src/components/ComboBox/ComboBox.svelte +++ b/src/components/ComboBox/ComboBox.svelte @@ -1,39 +1,36 @@ @@ -19,13 +19,17 @@ -

    Please see ModalWrapper for more examples and demo of the functionality.

    +

    + Please see ModalWrapper for more examples and demo of the + functionality. +

    {#if modalBody.hasScrollingContent}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    {/if}
    @@ -41,28 +45,39 @@ -

    Please see ModalWrapper for more examples and demo of the functionality.

    +

    + Please see ModalWrapper for more examples and demo of the + functionality. +

    {#if modalBody.hasScrollingContent}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    {/if}
    - + {/if} {#if story === 'title'} - {}} on:submit={() => {}}> + {}} + on:submit={() => {}}> + title="Passive modal title as the message. Should be direct and 3 lines + or less." /> @@ -77,55 +92,68 @@ Launch composed modal
    - (open = false)}> + (open = false)}> -

    Please see ModalWrapper for more examples and demo of the functionality.

    +

    + Please see ModalWrapper for more examples and demo of the + functionality. +

    {#if modalBody.hasScrollingContent}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    Lorem ipsum

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. - Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, - consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '} + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, + ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie + tellus. Quisque consectetur non risus eu rutrum.{' '}

    {/if}
    diff --git a/src/components/ComposedModal/ComposedModal.stories.js b/src/components/ComposedModal/ComposedModal.stories.js index a1281a05..afbdf4eb 100644 --- a/src/components/ComposedModal/ComposedModal.stories.js +++ b/src/components/ComposedModal/ComposedModal.stories.js @@ -1,135 +1,177 @@ -import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; -import Component from './ComposedModal.Story.svelte'; +import { withKnobs, select, boolean, text } from "@storybook/addon-knobs"; +import Component from "./ComposedModal.Story.svelte"; -export default { title: 'ComposedModal', decorators: [withKnobs] }; +export default { title: "ComposedModal", decorators: [withKnobs] }; const sizes = { - Default: '', - 'Extra small (xs)': 'xs', - 'Small (sm)': 'sm', - 'Large (lg)': 'lg' + Default: "", + "Extra small (xs)": "xs", + "Small (sm)": "sm", + "Large (lg)": "lg", }; export const Default = () => ({ Component, props: { composedModal: { - open: boolean('Open (open in )', true), - danger: boolean('Danger mode (danger)', false), + open: boolean("Open (open in )", true), + danger: boolean("Danger mode (danger)", false), selectorPrimaryFocus: text( - 'Primary focus element selector (selectorPrimaryFocus)', - '[data-modal-primary-focus]' + "Primary focus element selector (selectorPrimaryFocus)", + "[data-modal-primary-focus]" ), - size: select('Size (size)', sizes, 'sm') + size: select("Size (size)", sizes, "sm"), }, modalHeader: { - label: text('Optional Label (label in )', 'Optional Label'), - title: text('Optional title (title in )', 'Example'), - iconDescription: text('Close icon description (iconDescription in )', 'Close') + label: text("Optional Label (label in )", "Optional Label"), + title: text("Optional title (title in )", "Example"), + iconDescription: text( + "Close icon description (iconDescription in )", + "Close" + ), }, modalBody: { - hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true), - 'aria-label': text('ARIA label for content', 'Example modal content') + hasScrollingContent: boolean( + "Modal contains scrollable content (hasScrollingContent)", + true + ), + "aria-label": text("ARIA label for content", "Example modal content"), }, modalFooter: { - primaryButtonText: text('Primary button text (primaryButtonText in )', 'Save'), + primaryButtonText: text( + "Primary button text (primaryButtonText in )", + "Save" + ), primaryButtonDisabled: boolean( - 'Primary button disabled (primaryButtonDisabled in )', + "Primary button disabled (primaryButtonDisabled in )", false ), - secondaryButtonText: text('Secondary button text (secondaryButtonText in )', '') - } - } + secondaryButtonText: text( + "Secondary button text (secondaryButtonText in )", + "" + ), + }, + }, }); export const ChildNodes = () => ({ Component, props: { - story: 'child nodes', + story: "child nodes", composedModal: { - open: boolean('Open (open in )', true), - danger: boolean('Danger mode (danger)', false), + open: boolean("Open (open in )", true), + danger: boolean("Danger mode (danger)", false), selectorPrimaryFocus: text( - 'Primary focus element selector (selectorPrimaryFocus)', - '[data-modal-primary-focus]' + "Primary focus element selector (selectorPrimaryFocus)", + "[data-modal-primary-focus]" ), - size: select('Size (size)', sizes, 'sm') + size: select("Size (size)", sizes, "sm"), }, modalHeader: { - label: text('Optional Label (label in )', 'Optional Label'), - title: text('Optional title (title in )', 'Example'), - iconDescription: text('Close icon description (iconDescription in )', 'Close') + label: text("Optional Label (label in )", "Optional Label"), + title: text("Optional title (title in )", "Example"), + iconDescription: text( + "Close icon description (iconDescription in )", + "Close" + ), }, modalBody: { - hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true), - 'aria-label': text('ARIA label for content', 'Example modal content') + hasScrollingContent: boolean( + "Modal contains scrollable content (hasScrollingContent)", + true + ), + "aria-label": text("ARIA label for content", "Example modal content"), }, - modalFooter: {} - } + modalFooter: {}, + }, }); export const TitleOnly = () => ({ Component, props: { - story: 'title', + story: "title", composedModal: { - open: boolean('Open (open in )', true), - danger: boolean('Danger mode (danger)', false), + open: boolean("Open (open in )", true), + danger: boolean("Danger mode (danger)", false), selectorPrimaryFocus: text( - 'Primary focus element selector (selectorPrimaryFocus)', - '[data-modal-primary-focus]' + "Primary focus element selector (selectorPrimaryFocus)", + "[data-modal-primary-focus]" ), - size: select('Size (size)', sizes, 'sm') + size: select("Size (size)", sizes, "sm"), }, modalHeader: { - label: text('Optional Label (label in )', 'Optional Label'), - title: text('Optional title (title in )', 'Example'), - iconDescription: text('Close icon description (iconDescription in )', 'Close') + label: text("Optional Label (label in )", "Optional Label"), + title: text("Optional title (title in )", "Example"), + iconDescription: text( + "Close icon description (iconDescription in )", + "Close" + ), }, modalBody: { - hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true), - 'aria-label': text('ARIA label for content', 'Example modal content') + hasScrollingContent: boolean( + "Modal contains scrollable content (hasScrollingContent)", + true + ), + "aria-label": text("ARIA label for content", "Example modal content"), }, modalFooter: { - primaryButtonText: text('Primary button text (primaryButtonText in )', 'Save'), + primaryButtonText: text( + "Primary button text (primaryButtonText in )", + "Save" + ), primaryButtonDisabled: boolean( - 'Primary button disabled (primaryButtonDisabled in )', + "Primary button disabled (primaryButtonDisabled in )", false ), - secondaryButtonText: text('Secondary button text (secondaryButtonText in )', '') - } - } + secondaryButtonText: text( + "Secondary button text (secondaryButtonText in )", + "" + ), + }, + }, }); export const Trigger = () => ({ Component, props: { - story: 'trigger', + story: "trigger", composedModal: { - open: boolean('Open (open in )', true), - danger: boolean('Danger mode (danger)', false), + open: boolean("Open (open in )", true), + danger: boolean("Danger mode (danger)", false), selectorPrimaryFocus: text( - 'Primary focus element selector (selectorPrimaryFocus)', - '[data-modal-primary-focus]' + "Primary focus element selector (selectorPrimaryFocus)", + "[data-modal-primary-focus]" ), - size: select('Size (size)', sizes, 'sm') + size: select("Size (size)", sizes, "sm"), }, modalHeader: { - label: text('Optional Label (label in )', 'Optional Label'), - title: text('Optional title (title in )', 'Example'), - iconDescription: text('Close icon description (iconDescription in )', 'Close') + label: text("Optional Label (label in )", "Optional Label"), + title: text("Optional title (title in )", "Example"), + iconDescription: text( + "Close icon description (iconDescription in )", + "Close" + ), }, modalBody: { - hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true), - 'aria-label': text('ARIA label for content', 'Example modal content') + hasScrollingContent: boolean( + "Modal contains scrollable content (hasScrollingContent)", + true + ), + "aria-label": text("ARIA label for content", "Example modal content"), }, modalFooter: { - primaryButtonText: text('Primary button text (primaryButtonText in )', 'Save'), + primaryButtonText: text( + "Primary button text (primaryButtonText in )", + "Save" + ), primaryButtonDisabled: boolean( - 'Primary button disabled (primaryButtonDisabled in )', + "Primary button disabled (primaryButtonDisabled in )", false ), - secondaryButtonText: text('Secondary button text (secondaryButtonText in )', '') - } - } + secondaryButtonText: text( + "Secondary button text (secondaryButtonText in )", + "" + ), + }, + }, }); diff --git a/src/components/ComposedModal/ComposedModal.svelte b/src/components/ComposedModal/ComposedModal.svelte index 2282d40e..7842851a 100644 --- a/src/components/ComposedModal/ComposedModal.svelte +++ b/src/components/ComposedModal/ComposedModal.svelte @@ -1,48 +1,51 @@ diff --git a/src/components/ComposedModal/ModalBody.svelte b/src/components/ComposedModal/ModalBody.svelte index 700ea7b8..d47c3eb9 100644 --- a/src/components/ComposedModal/ModalBody.svelte +++ b/src/components/ComposedModal/ModalBody.svelte @@ -1,20 +1,16 @@
    + class:bx--modal-content={true} + class:bx--modal-content--with-form={hasForm} + {...$$restProps}>
    {#if hasScrollingContent} -
    +
    {/if} diff --git a/src/components/ComposedModal/ModalFooter.svelte b/src/components/ComposedModal/ModalFooter.svelte index adfdde7c..f4a4ea95 100644 --- a/src/components/ComposedModal/ModalFooter.svelte +++ b/src/components/ComposedModal/ModalFooter.svelte @@ -1,22 +1,18 @@ -
    +
    {#if secondaryButtonText} diff --git a/src/components/ComposedModal/ModalHeader.svelte b/src/components/ComposedModal/ModalHeader.svelte index 340d021c..ef4fed22 100644 --- a/src/components/ComposedModal/ModalHeader.svelte +++ b/src/components/ComposedModal/ModalHeader.svelte @@ -1,37 +1,44 @@ -
    +
    {#if label} -

    {label}

    +

    + {label} +

    {/if} {#if title} -

    {title}

    +

    + {title} +

    {/if}
    diff --git a/src/components/ComposedModal/index.js b/src/components/ComposedModal/index.js index e1ff8ac0..7274a1af 100644 --- a/src/components/ComposedModal/index.js +++ b/src/components/ComposedModal/index.js @@ -1,6 +1,4 @@ -import ComposedModal from './ComposedModal.svelte'; - -export default ComposedModal; -export { default as ModalHeader } from './ModalHeader.svelte'; -export { default as ModalBody } from './ModalBody.svelte'; -export { default as ModalFooter } from './ModalFooter.svelte'; +export { default as ComposedModal } from "./ComposedModal.svelte"; +export { default as ModalHeader } from "./ModalHeader.svelte"; +export { default as ModalBody } from "./ModalBody.svelte"; +export { default as ModalFooter } from "./ModalFooter.svelte"; diff --git a/src/components/ContentSwitcher/ContentSwitcher.Story.svelte b/src/components/ContentSwitcher/ContentSwitcher.Story.svelte index 39037db7..4777b628 100644 --- a/src/components/ContentSwitcher/ContentSwitcher.Story.svelte +++ b/src/components/ContentSwitcher/ContentSwitcher.Story.svelte @@ -1,11 +1,13 @@ @@ -26,7 +28,19 @@ }}> - + +
    + + Third section +
    +
    +
    { + selectedIndex = 1; + }}> + Programmatically set to second index +
    {/if}
    diff --git a/src/components/ContentSwitcher/ContentSwitcher.stories.js b/src/components/ContentSwitcher/ContentSwitcher.stories.js index b25659a3..43de4986 100644 --- a/src/components/ContentSwitcher/ContentSwitcher.stories.js +++ b/src/components/ContentSwitcher/ContentSwitcher.stories.js @@ -1,19 +1,17 @@ -import { withKnobs, boolean } from '@storybook/addon-knobs'; -import Component from './ContentSwitcher.Story.svelte'; +import { withKnobs, boolean } from "@storybook/addon-knobs"; +import Component from "./ContentSwitcher.Story.svelte"; -export default { title: 'ContentSwitcher', decorators: [withKnobs] }; +export default { title: "ContentSwitcher", decorators: [withKnobs] }; export const Default = () => ({ Component, - props: { - disabled: boolean('Disabled (disabled)', false) - } + props: { disabled: boolean("Disabled (disabled)", false) }, }); export const Selected = () => ({ Component, props: { - story: 'selected', - disabled: boolean('Disabled (disabled)', false) - } + story: "selected", + disabled: boolean("Disabled (disabled)", false), + }, }); diff --git a/src/components/ContentSwitcher/ContentSwitcher.svelte b/src/components/ContentSwitcher/ContentSwitcher.svelte index c2eae36f..80a6e302 100644 --- a/src/components/ContentSwitcher/ContentSwitcher.svelte +++ b/src/components/ContentSwitcher/ContentSwitcher.svelte @@ -1,30 +1,30 @@
    + on:mouseleave>
    diff --git a/src/components/ContentSwitcher/Switch.svelte b/src/components/ContentSwitcher/Switch.svelte index f88314b3..32b894dd 100644 --- a/src/components/ContentSwitcher/Switch.svelte +++ b/src/components/ContentSwitcher/Switch.svelte @@ -1,39 +1,44 @@ diff --git a/src/components/ContentSwitcher/index.js b/src/components/ContentSwitcher/index.js index 273931c9..297c5156 100644 --- a/src/components/ContentSwitcher/index.js +++ b/src/components/ContentSwitcher/index.js @@ -1,4 +1,2 @@ -import ContentSwitcher from './ContentSwitcher.svelte'; - -export default ContentSwitcher; -export { default as Switch } from './Switch.svelte'; +export { default as ContentSwitcher } from "./ContentSwitcher.svelte"; +export { default as Switch } from "./Switch.svelte"; diff --git a/src/components/Copy/Copy.svelte b/src/components/Copy/Copy.svelte index f7fbf910..8c2448a4 100644 --- a/src/components/Copy/Copy.svelte +++ b/src/components/Copy/Copy.svelte @@ -1,38 +1,51 @@ diff --git a/src/components/Copy/index.js b/src/components/Copy/index.js index 051c7a98..4caff0e6 100644 --- a/src/components/Copy/index.js +++ b/src/components/Copy/index.js @@ -1,3 +1 @@ -import Copy from './Copy.svelte'; - -export default Copy; +export { default as Copy } from "./Copy.svelte"; diff --git a/src/components/CopyButton/CopyButton.Story.svelte b/src/components/CopyButton/CopyButton.Story.svelte index 7608224a..884d51c4 100644 --- a/src/components/CopyButton/CopyButton.Story.svelte +++ b/src/components/CopyButton/CopyButton.Story.svelte @@ -1,8 +1,15 @@ - + { + console.log('click'); + }} + on:animationend={e => { + console.log('animation end', e.animationName); + }} /> diff --git a/src/components/CopyButton/CopyButton.stories.js b/src/components/CopyButton/CopyButton.stories.js index 71b9ce6a..61dee57e 100644 --- a/src/components/CopyButton/CopyButton.stories.js +++ b/src/components/CopyButton/CopyButton.stories.js @@ -1,13 +1,19 @@ -import { withKnobs, text, number } from '@storybook/addon-knobs'; -import Component from './CopyButton.Story.svelte'; +import { withKnobs, text, number } from "@storybook/addon-knobs"; +import Component from "./CopyButton.Story.svelte"; -export default { title: 'CopyButton', decorators: [withKnobs] }; +export default { title: "CopyButton", decorators: [withKnobs] }; export const Default = () => ({ Component, props: { - feedback: text('The text shown upon clicking (feedback)', 'Copied!'), - feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 2000), - iconDescription: text('Feedback icon description (iconDescription)', 'Copy to clipboard') - } + feedback: text("The text shown upon clicking (feedback)", "Copied!"), + feedbackTimeout: number( + "How long the text is shown upon clicking (feedbackTimeout)", + 2000 + ), + iconDescription: text( + "Feedback icon description (iconDescription)", + "Copy to clipboard" + ), + }, }); diff --git a/src/components/CopyButton/CopyButton.svelte b/src/components/CopyButton/CopyButton.svelte index 1fd5386a..c9953e1c 100644 --- a/src/components/CopyButton/CopyButton.svelte +++ b/src/components/CopyButton/CopyButton.svelte @@ -1,52 +1,16 @@ - + on:animationend> + + diff --git a/src/components/CopyButton/index.js b/src/components/CopyButton/index.js index d699ce72..3ae3caf6 100644 --- a/src/components/CopyButton/index.js +++ b/src/components/CopyButton/index.js @@ -1,3 +1 @@ -import CopyButton from './CopyButton.svelte'; - -export default CopyButton; +export { default as CopyButton } from "./CopyButton.svelte"; diff --git a/src/components/DataTable/DataTable.Story.svelte b/src/components/DataTable/DataTable.Story.svelte index e1640bdc..c494c901 100644 --- a/src/components/DataTable/DataTable.Story.svelte +++ b/src/components/DataTable/DataTable.Story.svelte @@ -1,81 +1,81 @@ @@ -89,7 +89,9 @@ {#each props.headers as header, i (header.key)} - {header.header} + + {header.header} + {/each} diff --git a/src/components/DataTable/DataTable.stories.js b/src/components/DataTable/DataTable.stories.js index dbf2de70..0e23445d 100644 --- a/src/components/DataTable/DataTable.stories.js +++ b/src/components/DataTable/DataTable.stories.js @@ -1,35 +1,35 @@ -import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; -import Component from './DataTable.Story.svelte'; +import { withKnobs, boolean, select, text } from "@storybook/addon-knobs"; +import Component from "./DataTable.Story.svelte"; -export default { title: 'DataTable', decorators: [withKnobs] }; +export default { title: "DataTable", decorators: [withKnobs] }; export const Default = () => ({ Component, props: { - title: text('Optional DataTable title (title)', ''), - description: text('Optional DataTable description (description)', ''), - zebra: boolean('Zebra row styles (zebra)', false), + title: text("Optional DataTable title (title)", ""), + description: text("Optional DataTable description (description)", ""), + zebra: boolean("Zebra row styles (zebra)", false), size: select( - 'Row height (size)', - { compact: 'compact', short: 'short', tall: 'tall', none: null }, + "Row height (size)", + { compact: "compact", short: "short", tall: "tall", none: null }, null ), - stickyHeader: boolean('Sticky header (experimental)', false) - } + stickyHeader: boolean("Sticky header (experimental)", false), + }, }); export const Sortable = () => ({ Component, props: { - story: 'sortable', - title: text('Optional DataTable title (title)', ''), - description: text('Optional DataTable description (description)', ''), - zebra: boolean('Zebra row styles (zebra)', false), + story: "sortable", + title: text("Optional DataTable title (title)", ""), + description: text("Optional DataTable description (description)", ""), + zebra: boolean("Zebra row styles (zebra)", false), size: select( - 'Row height (size)', - { compact: 'compact', short: 'short', tall: 'tall', none: null }, + "Row height (size)", + { compact: "compact", short: "short", tall: "tall", none: null }, null ), - stickyHeader: boolean('Sticky header (experimental)', false) - } + stickyHeader: boolean("Sticky header (experimental)", false), + }, }); diff --git a/src/components/DataTable/DataTable.svelte b/src/components/DataTable/DataTable.svelte index 857e6044..fe783cd8 100644 --- a/src/components/DataTable/DataTable.svelte +++ b/src/components/DataTable/DataTable.svelte @@ -1,39 +1,39 @@ - + @@ -82,7 +87,7 @@ let active = header.key === $sortHeader.key; let currentSortDirection = active ? $sortHeader.sortDirection : 'none'; let sortDirection = sortDirectionMap[currentSortDirection]; - dispatch('click:header', {header, sortDirection}); + dispatch('click:header', { header, sortDirection }); sortHeader.set({ id: sortDirection === 'none' ? null : $thKeys[header.key], key: header.key, diff --git a/src/components/DataTable/Table.svelte b/src/components/DataTable/Table.svelte index 910aaa86..b57aa169 100644 --- a/src/components/DataTable/Table.svelte +++ b/src/components/DataTable/Table.svelte @@ -1,28 +1,39 @@ {#if stickyHeader} -
    +
    + class:bx--data-table={true} + class:bx--data-table--compact={size === 'compact'} + class:bx--data-table--short={size === 'short'} + class:bx--data-table--tall={size === 'tall'} + class:bx--data-table--sort={sortable} + class:bx--data-table--zebra={zebra} + class:bx--data-table--static={useStaticWidth} + class:bx--data-table--no-border={!shouldShowBorder} + class:bx--data-table--sticky-header={stickyHeader}>
    {:else} + class:bx--data-table={true} + class:bx--data-table--compact={size === 'compact'} + class:bx--data-table--short={size === 'short'} + class:bx--data-table--tall={size === 'tall'} + class:bx--data-table--sort={sortable} + class:bx--data-table--zebra={zebra} + class:bx--data-table--static={useStaticWidth} + class:bx--data-table--no-border={!shouldShowBorder} + class:bx--data-table--sticky-header={stickyHeader} + {...$$restProps}>
    {/if} diff --git a/src/components/DataTable/TableBody.svelte b/src/components/DataTable/TableBody.svelte index fcb38748..83b4984f 100644 --- a/src/components/DataTable/TableBody.svelte +++ b/src/components/DataTable/TableBody.svelte @@ -1,9 +1,3 @@ - - - + diff --git a/src/components/DataTable/TableCell.svelte b/src/components/DataTable/TableCell.svelte index 1d3e93cd..d43f6f28 100644 --- a/src/components/DataTable/TableCell.svelte +++ b/src/components/DataTable/TableCell.svelte @@ -1,9 +1,3 @@ - - - + diff --git a/src/components/DataTable/TableContainer.svelte b/src/components/DataTable/TableContainer.svelte index 5d5adc3d..60b6d6af 100644 --- a/src/components/DataTable/TableContainer.svelte +++ b/src/components/DataTable/TableContainer.svelte @@ -1,21 +1,17 @@
    + class:bx--data-table-container={true} + class:bx--data-table--max-width={stickyHeader} + {...$$restProps}> {#if title} -
    -

    {title}

    -

    {description}

    +
    +

    {title}

    +

    {description}

    {/if} diff --git a/src/components/DataTable/TableHead.svelte b/src/components/DataTable/TableHead.svelte index 522cd18b..ac356ae0 100644 --- a/src/components/DataTable/TableHead.svelte +++ b/src/components/DataTable/TableHead.svelte @@ -1,9 +1,3 @@ - - - + diff --git a/src/components/DataTable/TableHeader.svelte b/src/components/DataTable/TableHeader.svelte index b73fd21f..aa829319 100644 --- a/src/components/DataTable/TableHeader.svelte +++ b/src/components/DataTable/TableHeader.svelte @@ -1,17 +1,13 @@ + on:mouseleave> diff --git a/src/components/DataTable/index.js b/src/components/DataTable/index.js index ef3fcd76..30ac61d7 100644 --- a/src/components/DataTable/index.js +++ b/src/components/DataTable/index.js @@ -1,10 +1,8 @@ -import DataTable from './DataTable.svelte'; - -export default DataTable; -export { default as Table } from './Table.svelte'; -export { default as TableBody } from './TableBody.svelte'; -export { default as TableCell } from './TableCell.svelte'; -export { default as TableContainer } from './TableContainer.svelte'; -export { default as TableHead } from './TableHead.svelte'; -export { default as TableHeader } from './TableHeader.svelte'; -export { default as TableRow } from './TableRow.svelte'; +export { default as DataTable } from "./DataTable.svelte"; +export { default as Table } from "./Table.svelte"; +export { default as TableBody } from "./TableBody.svelte"; +export { default as TableCell } from "./TableCell.svelte"; +export { default as TableContainer } from "./TableContainer.svelte"; +export { default as TableHead } from "./TableHead.svelte"; +export { default as TableHeader } from "./TableHeader.svelte"; +export { default as TableRow } from "./TableRow.svelte"; diff --git a/src/components/DataTableSkeleton/DataTable.stories.js b/src/components/DataTableSkeleton/DataTable.stories.js index 42793577..b748424f 100644 --- a/src/components/DataTableSkeleton/DataTable.stories.js +++ b/src/components/DataTableSkeleton/DataTable.stories.js @@ -1,17 +1,17 @@ -import { withKnobs, array, boolean } from '@storybook/addon-knobs'; -import Component from './DataTableSkeleton.Story.svelte'; +import { withKnobs, array, boolean } from "@storybook/addon-knobs"; +import Component from "./DataTableSkeleton.Story.svelte"; -export default { title: 'DataTableSkeleton', decorators: [withKnobs] }; +export default { title: "DataTableSkeleton", decorators: [withKnobs] }; export const Default = () => ({ Component, props: { headers: array( - 'Optional table headers (headers)', - ['Name', 'Protocol', 'Port', 'Rule', 'Attached Groups'], - ',' + "Optional table headers (headers)", + ["Name", "Protocol", "Port", "Rule", "Attached Groups"], + "," ), - zebra: boolean('Use zebra stripe (zebra)', false), - compact: boolean('Compact variant (compact)', false) - } + zebra: boolean("Use zebra stripe (zebra)", false), + compact: boolean("Compact variant (compact)", false), + }, }); diff --git a/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte b/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte index 56778837..c09df2d5 100644 --- a/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte +++ b/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte @@ -1,6 +1,6 @@ diff --git a/src/components/DataTableSkeleton/DataTableSkeleton.svelte b/src/components/DataTableSkeleton/DataTableSkeleton.svelte index c73faa85..3ffe2cec 100644 --- a/src/components/DataTableSkeleton/DataTableSkeleton.svelte +++ b/src/components/DataTableSkeleton/DataTableSkeleton.svelte @@ -1,25 +1,26 @@ + on:mouseleave> {#each cols as col, i (col)} @@ -35,7 +36,7 @@ {/each} - {#each fillArray(rows - 1) as row, i (row)} + {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)} {#each cols as col, j (col)}
    diff --git a/src/components/DataTableSkeleton/index.js b/src/components/DataTableSkeleton/index.js index 67f5dcff..a88ac913 100644 --- a/src/components/DataTableSkeleton/index.js +++ b/src/components/DataTableSkeleton/index.js @@ -1,3 +1 @@ -import DataTableSkeleton from './DataTableSkeleton.svelte'; - -export default DataTableSkeleton; +export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte"; diff --git a/src/components/DatePicker/DatePicker.Skeleton.svelte b/src/components/DatePicker/DatePicker.Skeleton.svelte index 87a6ad8c..6d4d2613 100644 --- a/src/components/DatePicker/DatePicker.Skeleton.svelte +++ b/src/components/DatePicker/DatePicker.Skeleton.svelte @@ -1,20 +1,25 @@ -
    +
    - {#each fillArray(range ? 2 : 1) as input, i (input)} -
    -