chore(deps-dev): bump prettier, prettier-plugin-svelte

docs/src/components/Portfolio.svelte

@@ -33,7 +33,6 @@
 </Carbon.Row>
 
 <div class="component-grid">
-
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Accordion">

package.json

@@ -30,8 +30,8 @@
     "@tsconfig/svelte": "^1.0.8",
     "babel-loader": "^8.0.6",
     "comment-parser": "^0.7.5",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
-    "prettier-plugin-svelte": "^1.1.0",
+    "prettier-plugin-svelte": "^1.2.1",
     "rollup": "^2.22.1",
     "rollup-plugin-svelte": "^5.2.3",
     "rollup-plugin-terser": "^6.1.0",

src/Accordion/Accordion.Story.svelte

@@ -41,9 +41,7 @@
     </AccordionItem>
     <AccordionItem>
       <div slot="title">
-        Section 4 title (
+        Section 4 title ( <em>the title can be a node</em> )
-        <em>the title can be a node</em>
-        )
       </div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/Accordion/Accordion.svelte

@@ -25,8 +25,7 @@
   <ul
     class:bx--accordion={true}
     {...$$restProps}
-    class="bx--accordion--{align}
+    class="bx--accordion--{align} {$$restProps.class}"
-    {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter

src/CodeSnippet/CodeSnippet.Skeleton.svelte

@@ -19,10 +19,6 @@
   <div class:bx--snippet-container={true}>
     {#if type === 'single'}
       <span />
-    {:else if type === 'multi'}
+    {:else if type === 'multi'}<span /> <span /> <span />{/if}
-      <span />
-      <span />
-      <span />
-    {/if}
   </div>
 </div>

src/CodeSnippet/CodeSnippet.svelte

@@ -117,10 +117,10 @@
     {#if hideCopyButton}
       <span
         class="bx--snippet {type && `bx--snippet--${type}`}
-        {type === 'inline' && 'bx--btn--copy'}
+          {type === 'inline' && 'bx--btn--copy'}
-        {expanded && 'bx--snippet--expand'}
+          {expanded && 'bx--snippet--expand'}
-        {light && 'bx--snippet--light'}
+          {light && 'bx--snippet--light'}
-        {hideCopyButton && 'bx--snippet--no-copy'}"
+          {hideCopyButton && 'bx--snippet--no-copy'}"
         {...$$restProps}>
         <code {id}>
           <slot>{code}</slot>
@@ -133,10 +133,10 @@
         {feedback}
         {feedbackTimeout}
         class="bx--snippet {type && `bx--snippet--${type}`}
-        {type === 'inline' && 'bx--btn--copy'}
+          {type === 'inline' && 'bx--btn--copy'}
-        {expanded && 'bx--snippet--expand'}
+          {expanded && 'bx--snippet--expand'}
-        {light && 'bx--snippet--light'}
+          {light && 'bx--snippet--light'}
-        {hideCopyButton && 'bx--snippet--no-copy'}"
+          {hideCopyButton && 'bx--snippet--no-copy'}"
         {...$$restProps}
         on:click
         on:mouseover
@@ -155,8 +155,7 @@
       class:bx--snippet--light={light}
       class:bx--snippet--no-copy={hideCopyButton}
       {...$$restProps}
-      class="{type && `bx--snippet--${type}`}
+      class="{type && `bx--snippet--${type}`} {$$restProps.class}"
-      {$$restProps.class}"
       on:mouseover
       on:mouseenter
       on:mouseleave>

src/ComboBox/ComboBox.Story.svelte

@@ -31,10 +31,10 @@
 </script>
 
 <p>
-  <code>items</code>
+  <code>items</code> must be an array of objects; mandatory fields are `id` and `text`.
-  must be an array of objects; mandatory fields are `id` and `text`.
 </p>
-<pre style="margin-top: 1rem;">
+<pre
+  style="margin-top: 1rem;">
   <code>{'items = Array<{ id: string; text: string; }>'}</code>
 </pre>
 <div style="margin-top: 2rem;">

src/ComposedModal/ComposedModal.svelte

@@ -120,8 +120,7 @@
   <div
     bind:this={innerModal}
     class:bx--modal-container={true}
-    class="{size && `bx--modal-container--${size}`}
+    class="{size && `bx--modal-container--${size}`} {containerClass}"
-    {containerClass}"
     on:click={() => {
       didClickInnerModal = true;
     }}>

src/ContentSwitcher/Switch.svelte

@@ -76,7 +76,6 @@
       ctx.change(-1);
     }
   }}>
-
   <span class:bx--content-switcher__label={true}>
     <slot>{text}</slot>
   </span>

src/Copy/Copy.svelte

@@ -37,8 +37,7 @@
   class:bx--copy-btn--animating={animation}
   aria-label={animation ? feedback : undefined}
   {...$$restProps}
-  class="{$$restProps.class}
+  class="{$$restProps.class} {animation && `bx--copy-btn--${animation}`}"
-  {animation && `bx--copy-btn--${animation}`}"
   on:click
   on:click={() => {
     if (animation === 'fade-in') return;

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -56,9 +56,7 @@
   <tbody>
     <tr>
       {#each cols as col, i (col)}
-        <td>
+        <td><span /></td>
-          <span />
-        </td>
       {/each}
     </tr>
     {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}

src/DatePicker/DatePicker.svelte

@@ -199,7 +199,7 @@
     class:bx--date-picker--short={short}
     class:bx--date-picker--light={light}
     class="{datePickerType && `bx--date-picker--${datePickerType}`}
-    {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
+      {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
     <slot />
   </div>
 </div>

src/Dropdown/Dropdown.Story.svelte

@@ -22,10 +22,11 @@
   </div>
 {:else}
   <p>
-    <code>items</code>
+    <code>items</code> must be an array of objects; mandatory fields are `id` and
-    must be an array of objects; mandatory fields are `id` and `text`.
+    `text`.
   </p>
-  <pre style="margin-top: 1rem;">
+  <pre
+    style="margin-top: 1rem;">
     <code>{'items = Array<{ id: string; text: string; }>'}</code>
   </pre>
   <div style="margin-top: 2rem; margin-bottom: 2rem;">

src/Dropdown/Dropdown.svelte

@@ -177,10 +177,10 @@
     {name}
     aria-label={$$props['aria-label']}
     class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
-    {open && 'bx--dropdown--open'}
+      {open && 'bx--dropdown--open'}
-    {inline && 'bx--dropdown--inline'}
+      {inline && 'bx--dropdown--inline'}
-    {disabled && 'bx--dropdown--disabled'}
+      {disabled && 'bx--dropdown--disabled'}
-    {light && 'bx--dropdown--light'}"
+      {light && 'bx--dropdown--light'}"
     on:click={({ target }) => {
       open = ref.contains(target) ? !open : false;
     }}

src/ListBox/ListBox.svelte

@@ -52,8 +52,7 @@
   class:bx--list-box--expanded={open}
   class:bx--list-box--light={light}
   {...$$restProps}
-  class="{size && `bx--list-box--${size}`}
+  class="{size && `bx--list-box--${size}`} {$$restProps.class}"
-  {$$restProps.class}"
   on:keydown
   on:keydown={(e) => {
     if (e.key === 'Escape') {

src/MultiSelect/MultiSelect.svelte

@@ -282,10 +282,10 @@
     {light}
     {size}
     class="bx--multi-select {filterable && 'bx--combo-box'}
-    {filterable && 'bx--multi-select--filterable'}
+      {filterable && 'bx--multi-select--filterable'}
-    {invalid && 'bx--multi-select--invalid'}
+      {invalid && 'bx--multi-select--invalid'}
-    {inline && 'bx--multi-select--inline'}
+      {inline && 'bx--multi-select--inline'}
-    {checked.length > 0 && 'bx--multi-select--selected'}">
+      {checked.length > 0 && 'bx--multi-select--selected'}">
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}

src/Notification/InlineNotification.svelte

@@ -65,7 +65,7 @@
 
   function close() {
     open = false;
-    dispatch('close');
+    dispatch("close");
   }
 
   onMount(() => {

src/Notification/NotificationButton.svelte

@@ -41,5 +41,5 @@
     this={renderIcon}
     {title}
     class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
-    {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
+      {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
 </button>

src/Notification/ToastNotification.svelte

@@ -71,7 +71,7 @@
 
   function close() {
     open = false;
-    dispatch('close');
+    dispatch("close");
   }
 
   onMount(() => {

src/NumberInput/NumberInput.Skeleton.svelte

@@ -13,8 +13,6 @@
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}
+  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-    <span class:bx--label={true} class:bx--skeleton={true} />
-  {/if}
   <div class:bx--number={true} class:bx--skeleton={true} />
 </div>

src/Search/Search.svelte

@@ -96,8 +96,7 @@
     class:bx--search={true}
     class:bx--search--light={light}
     {...$$restProps}
-    class="bx--search--{size}
+    class="bx--search--{size} {$$restProps.class}">
-    {$$restProps.class}">
     <Search16 class="bx--search-magnifier" />
     <label for={id} class:bx--label={true}>{labelText}</label>
     <!-- svelte-ignore a11y-autofocus -->

src/Select/Select.Skeleton.svelte

@@ -13,9 +13,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}
+  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-    <span class:bx--label={true} class:bx--skeleton={true} />
-  {/if}
   <div class:bx--select={true} class:bx--skeleton={true}>
     <div class:bx--select-input={true} />
   </div>

src/Slider/Slider.Skeleton.svelte

@@ -13,9 +13,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}
+  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-    <span class:bx--label={true} class:bx--skeleton={true} />
-  {/if}
   <div class:bx--slider-container={true} class:bx--skeleton={true}>
     <span class:bx--slider__range-label={true} />
     <div class:bx--slider={true}>

src/StructuredList/StructuredList.Skeleton.svelte

@@ -25,15 +25,9 @@
     <div
       class:bx--structured-list-row={true}
       class:bx--structured-list-row--header-row={true}>
-      <div class:bx--structured-list-th={true}>
+      <div class:bx--structured-list-th={true}><span /></div>
-        <span />
+      <div class:bx--structured-list-th={true}><span /></div>
-      </div>
+      <div class:bx--structured-list-th={true}><span /></div>
-      <div class:bx--structured-list-th={true}>
-        <span />
-      </div>
-      <div class:bx--structured-list-th={true}>
-        <span />
-      </div>
     </div>
   </div>
   <div class:bx--structured-list-tbody={true}>

src/Tag/Tag.svelte

@@ -55,8 +55,7 @@
       class:bx--tag--disabled={disabled}
       class:bx--tag--filter={filter}
       {...$$restProps}
-      class="{type && `bx--tag--${type}`}
+      class="{type && `bx--tag--${type}`} {$$restProps.class}">
-      {$$restProps.class}">
       <slot props={{ class: 'bx--tag__label' }}>
         <span class:bx--tag__label={true}>{type}</span>
       </slot>
@@ -77,8 +76,7 @@
       class:bx--tag={true}
       class:bx--tag--disabled={disabled}
       {...$$restProps}
-      class="{type && `bx--tag--${type}`}
+      class="{type && `bx--tag--${type}`} {$$restProps.class}"
-      {$$restProps.class}"
       on:click
       on:mouseover
       on:mouseenter

src/TextArea/TextArea.Skeleton.svelte

@@ -13,8 +13,6 @@
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}
+  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-    <span class:bx--label={true} class:bx--skeleton={true} />
-  {/if}
   <div class:bx--skeleton={true} class:bx--text-area={true} />
 </div>

src/TextInput/PasswordInput.svelte

@@ -176,7 +176,7 @@
       class:bx--tooltip__trigger={true}
       class:bx--tooltip--a11y={true}
       class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
-      {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
+        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
       on:click={() => {
         type = type === 'password' ? 'text' : 'password';
       }}>

src/TextInput/TextInput.Skeleton.svelte

@@ -13,8 +13,6 @@
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}
+  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-    <span class:bx--label={true} class:bx--skeleton={true} />
-  {/if}
   <div class:bx--skeleton={true} class:bx--text-area={true} />
 </div>

src/TextInput/TextInput.svelte

@@ -87,7 +87,7 @@
    * Set to `true` to mark the field as required
    * @type {boolean} [required=false]
    */
-   export let required = false;
+  export let required = false;
 
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
 

src/TooltipDefinition/TooltipDefinition.svelte

@@ -60,7 +60,7 @@
     class:bx--tooltip--hidden={hidden}
     class:bx--tooltip--visible={visible}
     class="{direction && `bx--tooltip--${direction}`}
-    {align && `bx--tooltip--align-${align}`}"
+      {align && `bx--tooltip--align-${align}`}"
     on:click
     on:mouseover
     on:mouseenter

src/TooltipIcon/TooltipIcon.svelte

@@ -47,8 +47,8 @@
   class:bx--tooltip--hidden={hidden}
   {...$$restProps}
   class="{direction && `bx--tooltip--${direction}`}
-  {align && `bx--tooltip--align-${align}`}
+    {align && `bx--tooltip--align-${align}`}
-  {$$restProps.class}"
+    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -72,9 +72,7 @@
     }}>
     <Icon {...icon} />
     <slot name="text">
-      {#if text}
+      {#if text}<span>{text}</span>{/if}
-        <span>{text}</span>
-      {/if}
     </slot>
   </button>
   {#if isOpen}

src/UIShell/UIShell.Story.svelte

@@ -133,8 +133,7 @@
       <SkipToContent />
     </div>
     <span slot="platform" class="platform-name">
-      Platform Name
+      Platform Name <small>1.12.2</small>
-      <small>1.12.2</small>
     </span>
   </Header>
 {:else if story === 'sidenav'}

yarn.lock

@@ -8039,20 +8039,20 @@ prepend-http@^2.0.0:
   resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier-plugin-svelte@^1.1.0:
+prettier-plugin-svelte@^1.2.1:
-  version "1.1.0"
+  version "1.2.1"
-  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.1.0.tgz#e6ec282d8457598b0c02164083b11ad8cb8ab304"
+  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.2.1.tgz#2af472cb7ebf7f8254a132e44cce18ed3bf2ef6f"
-  integrity sha512-wmIggG/ryV0wcmE9D5p+k5TwKDpS2SGKJpF6IV1aYHK7dkBJD+di1w47Ci00DRsI4RrXZRC2Ef37DSyrTb6Zqg==
+  integrity sha512-oULQ6cmqAVA3PmtgagM3139UXJHbLOLQjzGOKkH/pRQbT9vXcWQtbWXEO1fAePWQis5TiDgm2p/PIKh5w1fd/A==
 
 prettier@^1.16.4:
   version "1.19.1"
   resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-prettier@^2.0.5:
+prettier@^2.1.1:
-  version "2.0.5"
+  version "2.1.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz#d9485dd5e499daa6cb547023b87a6cf51bee37d6"
-  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+  integrity sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==
 
 pretty-error@^2.1.1:
   version "2.1.1"