@onsvisual/svelte-components 0.0.29 → 0.0.31

package/dist/@types/layout/Cards/Card.svelte.d.ts

@@ -10,6 +10,7 @@ export default class Card extends SvelteComponentTyped<{
     image?: any;
     imageAlt?: any;
     colspan?: number;
+    rowspan?: number;
     grow?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -31,6 +32,7 @@ declare const __propDef: {
         image?: any;
         imageAlt?: any;
         colspan?: number;
+        rowspan?: number;
         grow?: boolean;
     };
     events: {

package/dist/@types/layout/Notice/Notice.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  NoticeSlots */
 export default class Notice extends SvelteComponentTyped<{
     title?: string;
-    mode?: "info" | "success" | "pending" | "error";
+    mode?: "info" | "success" | "pending" | "error" | "warning";
     important?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -18,7 +18,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title?: string;
-        mode?: "info" | "success" | "pending" | "error";
+        mode?: "info" | "success" | "pending" | "error" | "warning";
         important?: boolean;
     };
     events: {

package/dist/layout/Cards/Card.svelte

@@ -8,8 +8,8 @@
   export let image = null;
   export let imageAlt = null;
   export let href = null;
-
   export let colspan = 1; // 1, 2 or 3
+  export let rowspan = 1;
   export let noBackground = getContext("noBackground") || false;
   export let grow = false;
 
@@ -26,6 +26,7 @@
     ? $cols
     : colspan}"
   style:grid-column-end="{grow ? $cols + 1 : null}"
+  style:grid-row="{rowspan > 1 ? `span ${rowspan}` : null}"
 >
   <div id="{id}" class="ons-card" aria-describedBy="{id}_text">
     {#if href && title}

package/dist/layout/Notice/Notice.svelte

@@ -4,16 +4,16 @@
    * @type {string}
    */
   export let title = null;
-  /**
-   * Adds an exclamation mark icon
-   * @type {boolean}
-   */
-  export let important = false;
   /**
    * Sets the mode/colour of the notice
-   * @type {"info"|"success"|"pending"|"error"}
+   * @type {"info"|"success"|"pending"|"error"|"warning"}
    */
   export let mode = "info";
+  /**
+   * Adds an exclamation mark icon
+   * @type {boolean}
+   */
+  export let important = mode !== "warning";
 
   $: style =
     mode === "success"
@@ -25,12 +25,17 @@
       : null;
 </script>
 
-<div class="ons-panel ons-panel--info ons-panel--no-title ons-u-mt-m ons-u-mb-l" style="{style}">
-  <div class="ons-u-bg--tr" class:ons-panel--warn="{important}">
+<div
+  class="ons-panel {mode === 'warning' ? 'ons-panel--warn' : 'ons-panel--info'} ons-panel--no-title"
+  style="{style}"
+>
+  <div class="ons-u-bg--tr" class:ons-panel--warn="{important && mode !== 'warning'}">
     {#if important}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
-    <span class="ons-panel__assistive-text ons-u-vh">Important information:</span>
+    <span class="ons-panel__assistive-text ons-u-vh"
+      >{mode === "warning" ? "Warning:" : "Important information:"}</span
+    >
     <div class="ons-panel__body">
-      <div class="ons-u-fs-r default-line-height">
+      <div class="default-line-height" class:ons-u-fs-r="{mode !== 'warning'}">
         {#if title}<p><strong>{title}</strong></p>{/if}
         <p class="ons-u-mb-no">
           <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -32,7 +32,7 @@
     "@babel/eslint-plugin": "^7.19.1",
     "@babel/preset-env": "^7.21.4",
     "@evilmartians/lefthook": "^1.3.10",
-    "@onsvisual/svelte-charts": "^0.2.13",
+    "@onsvisual/svelte-charts": "^0.2.17",
     "@reuters-graphics/eslint-config": "^0.0.2",
     "@storybook/addon-actions": "^7.0.20",
     "@storybook/addon-docs": "^7.0.20",