Release v11.1.0

CHANGELOG.md

@@ -1,9 +1,20 @@
 # Changelog
-
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
-## [11.0.0](https://github.com/silinternational/ui-components/compare/v10.7.0...v10.8.0) (2024-03-20)
+## [11.1.0](https://github.com/silinternational/ui-components/compare/v11.0.0...v11.1.0) (2024-03-26)
+
+
+### Added
+
+* **Tooltip:** Add Tooltip.rich ([2540751](https://github.com/silinternational/ui-components/commit/254075178e40db27fdc8864427ceeb34824b2aa2))
+
+
+### Fixed
+
+* **build:** fix npm-publish [skip release] ([1fd6d87](https://github.com/silinternational/ui-components/commit/1fd6d877d9376dd33d45b2b65a913b5d3e4827c8))
+
+## [11.0.0](https://github.com/silinternational/ui-components/compare/v10.7.0...v11.0.0) (2024-03-20)
 
 ### ⚠ BREAKING CHANGES
 

components/mdc/Tooltip/Tooltip.svelte

@@ -9,6 +9,8 @@ export let tooltipID
 export let positionX = undefined
 /** @type {string} can be one of: "above" or "below" */
 export let positionY = undefined
+/** @type {boolean} whether to show a rich tooltip */
+export let rich = false
 
 let element = {}
 let mdcToolTip = {}
@@ -35,8 +37,20 @@ onMount(() => {
 })
 </script>
 
-<div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
-  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
-    <slot />
+{#if rich}
+  <div bind:this={element} id={tooltipID} class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="tooltip">
+    <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
+      <p class="mdc-tooltip__content">
+        <slot />
+      </p>
+    </div>
   </div>
-</div>
+{:else}
+  <div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
+    <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
+      <span class="mdc-tooltip__label">
+        <slot />
+      </span>
+    </div>
+  </div>
+{/if}

components/mdc/Tooltip/Wrapper.svelte

@@ -1,8 +1,10 @@
 <script>
 /** @type {string} The id of the element that describes the tooltip. */
 export let ariaDescribedBy
+/** @type {string} If the tooltip is rich set this to rich as well */
+export let rich = false
 </script>
 
-<div class={$$props.class || ''} aria-describedby={ariaDescribedBy}>
+<div class={(rich ? 'mdc-tooltip-wrapper--rich' : '') + ($$props.class || '')} aria-describedby={ariaDescribedBy}>
   <slot />
 </div>

index.d.ts

@@ -306,13 +306,15 @@ declare module '@silintl/ui-components' {
     tooltipID?: string
     positionX?: 'start' | 'center' | 'end'
     positionY?: 'above' | 'below'
+    rich?: boolean
     class?: string
   }
   export class Tooltip extends SvelteComponentTyped<TooltipProps> {}
 
   export namespace Tooltip {
     interface TooltipWrapperProps {
       ariaDescribedBy?: string
+      rich?: boolean
       class?: string
     }
     export class Wrapper extends SvelteComponentTyped<TooltipWrapperProps> {}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.mjs",
   "module": "index.mjs",

release.config.js

@@ -17,6 +17,7 @@ const plugins = [
     {
       preset: 'conventionalcommits',
       releaseRules: [
+        { breaking: true, release: 'major' },
         {
           type: 'add',
           release: 'minor',
@@ -162,7 +163,7 @@ function getCIConfig() {
       ...plugins,
       ['@semantic-release/changelog', { changelogTitle: CHANGELOG_HEADER }],
       '@semantic-release/git',
-      ['@semantic-release/github', { draft: true }],
+      ['@semantic-release/github', { draftRelease: true }],
     ],
   }
 }

stories/Tooltip.stories.svelte

@@ -13,7 +13,7 @@ const args = {
 
 <Template let:args>
   <div class="flex justify-center my-4">
-    <Tooltip.Wrapper ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
+    <Tooltip.Wrapper rich={args.rich} ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
   </div>
 
   <Tooltip {...args}>Tooltip main slot here</Tooltip>
@@ -22,3 +22,5 @@ const args = {
 <Story name="Default" {args} />
 
 <Story name="Position" args={copyAndModifyArgs(args, { positionX: 'start', positionY: 'above' })} />
+
+<Story name="Rich" args={copyAndModifyArgs(args, { rich: true })} />