@canonical/react-components 0.50.4 → 0.50.6

package/dist/components/Card/Card.d.ts

@@ -26,5 +26,10 @@ export type Props = PropsWithSpread<{
      */
     title?: ReactNode;
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
+ *
+ * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
+ */
 declare const Card: ({ children, className, highlighted, overlay, thumbnail, title, ...props }: Props) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -10,6 +10,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
+ *
+ * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
+ */
+
 const Card = _ref => {
   let {
     children,

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import Card from "./";
+declare const meta: Meta<typeof Card>;
+export default meta;
+export declare const Default: {
+    args: {
+        title: string;
+        children: string;
+    };
+};
+export declare const Header: {
+    args: {
+        title: string;
+        thumbnail: string;
+        children: string;
+    };
+};
+export declare const Highlighted: {
+    args: {
+        highlighted: boolean;
+        title: string;
+        children: string;
+    };
+};
+export declare const Overlay: {
+    render: () => React.JSX.Element;
+};

package/dist/components/Card/Card.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Overlay = exports.Highlighted = exports.Header = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("./"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _Row = _interopRequireDefault(require("../Row"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  title: "Card",
+  component: _.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    title: "We'd love to have you join us as a partner.",
+    children: "If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."
+  }
+};
+const Header = exports.Header = {
+  args: {
+    title: "Raspberry Pi2 and Pi3",
+    thumbnail: "https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png",
+    children: "For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board."
+  }
+};
+const Highlighted = exports.Highlighted = {
+  args: {
+    ...Default.args,
+    highlighted: true
+  }
+};
+const Overlay = exports.Overlay = {
+  render: () => /*#__PURE__*/_react.default.createElement("section", {
+    className: "p-strip--image is-light",
+    style: {
+      backgroundImage: "url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 6,
+    emptyLarge: 7
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    title: "Web browsing",
+    overlay: true
+  }, "Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also includes Chrome, Opera and other browsers that can be installed from the Ubuntu Software Centre."))))
+};

package/dist/components/Icon/Icon.stories.scss

@@ -1,7 +1,4 @@
-@import "~vanilla-framework/scss/settings";
-@import "~vanilla-framework/scss/base_placeholders";
-@import "~vanilla-framework/scss/base_icon-definitions";
-@import "~vanilla-framework/scss/patterns_icons";
+@import "vanilla-framework";
 
 @include vf-b-placeholders;
 @include vf-p-icons-common;

package/dist/components/MultiSelect/MultiSelect.scss

@@ -1,11 +1,15 @@
 @use "sass:map";
 @import "vanilla-framework";
-@include vf-base;
-@include vf-p-lists;
+@include vf-b-placeholders; // Vanilla base placeholders to extend from
 
 $dropdown-max-height: 20rem;
 
 .multi-select {
+  // Scope Vanilla form includes to multi select component only
+  // to avoid overriding any Vanilla base styles
+  // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030
+  @include vf-b-forms;
+
   position: relative;
 }
 
@@ -37,12 +41,12 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__dropdown {
-  @extend %vf-bg--x-light;
-  @extend %vf-has-box-shadow;
+  background-color: $colors--theme--background-default;
+  box-shadow: $box-shadow;
+  color: $colors--theme--text-default;
   left: 0;
   max-height: $dropdown-max-height;
   overflow: auto;
-
   padding-top: $spv--small;
   position: absolute;
   right: 0;
@@ -59,14 +63,15 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__dropdown-list {
-  @extend %vf-list;
-
+  list-style: none;
   margin-bottom: $sph--x-small;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 .multi-select__footer {
-  background: white;
-  border-top: 1px solid $color-mid-light;
+  background: $colors--theme--background-default;
+  border-top: 1px solid $colors--theme--border-default;
   bottom: 0;
   display: flex;
   flex-wrap: wrap;
@@ -97,12 +102,6 @@ $dropdown-max-height: 20rem;
   }
 }
 
-.multi-select__dropdown-item-description {
-  @extend %small-text;
-
-  color: $color-mid-dark;
-}
-
 .multi-select__dropdown-button {
   border: 0;
   margin-bottom: 0;
@@ -113,7 +112,7 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__selected-list {
-  background-color: $colors--light-theme--background-inputs;
+  background-color: $colors--theme--background-inputs;
   border-bottom: 0;
   margin: 0;
   overflow: hidden;
@@ -142,12 +141,12 @@ $dropdown-max-height: 20rem;
     transform: translateY(-50%) rotate(-180deg);
 
     @extend %icon;
-    @include vf-icon-chevron($color-mid-dark);
+    @include vf-icon-chevron-themed;
     @include vf-transition($property: transform, $duration: fast);
   }
 
   &[aria-expanded="true"] {
-    background-color: $colors--light-theme--background-hover;
+    background-color: $colors--theme--background-hover;
   }
 
   &[aria-expanded="false"] {

package/dist/components/NotificationProvider/NotificationProvider.js

@@ -49,7 +49,7 @@ const NotificationProvider = _ref => {
     queue: _messageBuilder.queue,
     failure: (title, error, message, actions) => setDeduplicated((0, _messageBuilder.failure)(title, error, message, actions)),
     info: (message, title) => setDeduplicated((0, _messageBuilder.info)(message, title)),
-    success: message => setDeduplicated((0, _messageBuilder.success)(message)),
+    success: (message, title) => setDeduplicated((0, _messageBuilder.success)(message, title)),
     setDeduplicated
   };
   return /*#__PURE__*/_react.default.createElement(NotifyContext.Provider, {

package/dist/components/NotificationProvider/messageBuilder.d.ts

@@ -2,5 +2,5 @@ import { NotificationAction, NotificationType, QueuedNotification } from "./type
 import { ReactNode } from "react";
 export declare const queue: (notification: NotificationType) => QueuedNotification;
 export declare const info: (message: ReactNode, title?: string) => NotificationType;
-export declare const success: (message: ReactNode) => NotificationType;
+export declare const success: (message: ReactNode, title?: string) => NotificationType;
 export declare const failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;

package/dist/components/NotificationProvider/messageBuilder.js

@@ -23,9 +23,10 @@ const info = (message, title) => {
   };
 };
 exports.info = info;
-const success = message => {
+const success = (message, title) => {
   return {
     message,
+    title,
     type: _Notification.NotificationSeverity.POSITIVE
   };
 };

package/dist/components/NotificationProvider/types.d.ts

@@ -29,7 +29,7 @@ export interface NotificationHelper {
     clear: () => void;
     failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
     info: (message: ReactNode, title?: string) => NotificationType;
-    success: (message: ReactNode) => NotificationType;
+    success: (message: ReactNode, title?: string) => NotificationType;
     queue: (notification: NotificationType) => QueuedNotification;
     setDeduplicated: (value: NotificationType) => NotificationType;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.50.4",
+  "version": "0.50.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -85,7 +85,7 @@
     "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
     "typescript": "5.3.3",
-    "vanilla-framework": "4.6.0",
+    "vanilla-framework": "4.9.0",
     "wait-on": "7.2.0",
     "webpack": "5.89.0"
   },