@canonical/react-components 1.2.4 → 1.3.0

package/dist/components/Navigation/Navigation.d.ts

@@ -1,66 +0,0 @@
-import { ReactNode, HTMLProps } from "react";
-import type { GenerateLink, NavItem, LogoProps } from "./types";
-import { PropsWithSpread, SubComponentProps } from "../../types";
-import { SearchBoxProps } from "../SearchBox";
-import { Theme } from "../../enums";
-export type Props = PropsWithSpread<{
-    /**
-     * By default the header is constrained to the width of the grid. Use this
-     * option to make the header take the full width of the page.
-     */
-    fullWidth?: boolean;
-    /**
-     * This function can be used to generate link elements when you don't want to
-     * use a standard HTML anchor.
-     */
-    generateLink?: GenerateLink | null;
-    /**
-     * The main navigation items that appear on the left hand side next to the logo.
-     */
-    items?: NavItem[] | null;
-    /**
-     * Additional navigation items that appear on the right hand side of the
-     * navigation banner.
-     */
-    itemsRight?: NavItem[] | null;
-    /**
-     * Additional props to be applied to the nav element that wraps the main
-     * navigation items on the left hand side.
-     */
-    leftNavProps?: HTMLProps<HTMLUListElement> | null;
-    /**
-     * The logo can be defined either by providing props for the standard logo
-     * or the full logo markup when a custom logo is needed.
-     */
-    logo: LogoProps | ReactNode;
-    /**
-     * Additional props to be applied to the nav element that wraps the
-     * left and right nav items.
-     */
-    navProps?: HTMLProps<HTMLElement> | null;
-    /**
-     * Additional props to be applied to the nav element that wraps the
-     * navigation items on the right hand side.
-     */
-    rightNavProps?: HTMLProps<HTMLUListElement> | null;
-    /**
-     * Props to pass to the SearchBox component. When these props are provided the
-     * search box will appear.
-     */
-    searchProps?: SubComponentProps<SearchBoxProps> | null;
-    /**
-     * The header theme. When this is not provided the header will use the default
-     * theme defined in the Vanilla settings.
-     */
-    theme?: Theme | null;
-}, HTMLProps<HTMLElement>>;
-/**
-This is the [React](https://reactjs.org/) component for the Vanilla
-[Navigation](https://vanillaframework.io/docs/patterns/navigation) pattern. It
-is a simple navigation bar that you can add to the top of your site or app.
-
-The navigation items are collapsed behind a "Menu" link in small screens and
-displayed horizontally on larger screens.
- */
-declare const Navigation: ({ fullWidth, generateLink, items, itemsRight, leftNavProps, logo, navProps, rightNavProps, searchProps, theme, ...headerProps }: Props) => JSX.Element;
-export default Navigation;

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

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Navigation from "./Navigation";
-declare const meta: Meta<typeof Navigation>;
-export default meta;
-type Story = StoryObj<typeof Navigation>;
-/**
- * The default navigation is constrained to the max width of the Vanilla grid and
-uses the light theme.
- */
-export declare const Default: Story;
-/**
- * You can switch to a dark themed Navigation by using the `dark` prop. This will
-automatically update the Navigation items to use lighter text and hover state
-colours.
- */
-export declare const Dark: Story;
-/**
- * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
-array instead of a URL. By default, the dropdown items will align to the left of the
-parent item. This can be changed by adding `alignRight` to the subnav
-object.
- */
-export declare const Dropdown: Story;
-/**
- * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
-component. Elements to toggle the Searchbox will be included automatically if
-the SearchBox props are provided.
- */
-export declare const Search: Story;
-/**
- * Logos can be displayed using the new tag design. In cases where another logo
-style is required then an element can be provided to the `logo` prop.
- */
-export declare const OverridingTheLogo: Story;
-/**
- * In some cases such as when using [React Router](https://reactrouter.com/) it is
-necessary to use custom components for links. When this is required then a
-function can be passed to `generateLink` which should return your component.
-Bear in mind that some props like classes and on-click events might be passed to
-this function so take care in overriding any link props.
- */
-export declare const OverridingTheLinkComponent: Story;
-export declare const NoMenuItems: Story;

package/dist/components/Navigation/Navigation.stories.js

@@ -1,232 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Search = exports.OverridingTheLogo = exports.OverridingTheLinkComponent = exports.NoMenuItems = exports.Dropdown = exports.Default = exports.Dark = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Navigation = _interopRequireDefault(require("./Navigation"));
-var _enums = require("../../enums");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Navigation.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-/**
- * The default navigation is constrained to the max width of the Vanilla grid and
-uses the light theme.
- */
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    }
-  }
-};
-
-/**
- * You can switch to a dark themed Navigation by using the `dark` prop. This will
-automatically update the Navigation items to use lighter text and hover state
-colours.
- */
-const Dark = exports.Dark = {
-  name: "Dark",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    },
-    theme: _enums.Theme.DARK
-  }
-};
-
-/**
- * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
-array instead of a URL. By default, the dropdown items will align to the left of the
-parent item. This can be changed by adding `alignRight` to the subnav
-object.
- */
-const Dropdown = exports.Dropdown = {
-  name: "Dropdown",
-  args: {
-    items: [{
-      items: [{
-        label: "Introduction",
-        url: "#"
-      }, {
-        label: "News",
-        url: "#"
-      }, {
-        label: "Getting started - Command line",
-        url: "#"
-      }, {
-        label: "Getting started - OpenStack",
-        url: "#"
-      }, {
-        label: "Getting started - OpenNebula",
-        url: "#"
-      }],
-      label: "LXD"
-    }, {
-      items: [{
-        label: "Introduction",
-        url: "#"
-      }, {
-        label: "News",
-        url: "#"
-      }, {
-        label: "Getting started",
-        url: "#"
-      }],
-      label: "LXCFS"
-    }],
-    itemsRight: [{
-      alignRight: true,
-      items: [{
-        label: "Sign out",
-        url: "#"
-      }],
-      label: "My account"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "LXD",
-      url: "#"
-    }
-  }
-};
-
-/**
- * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
-component. Elements to toggle the Searchbox will be included automatically if
-the SearchBox props are provided.
- */
-const Search = exports.Search = {
-  name: "Search",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    },
-    searchProps: {
-      onSearch: () => null
-    }
-  }
-};
-
-/**
- * Logos can be displayed using the new tag design. In cases where another logo
-style is required then an element can be provided to the `logo` prop.
- */
-const OverridingTheLogo = exports.OverridingTheLogo = {
-  name: "Overriding the logo",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: /*#__PURE__*/_react.default.createElement("img", {
-      alt: "",
-      src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
-      width: "100"
-    })
-  }
-};
-
-/**
- * In some cases such as when using [React Router](https://reactrouter.com/) it is
-necessary to use custom components for links. When this is required then a
-function can be passed to `generateLink` which should return your component.
-Bear in mind that some props like classes and on-click events might be passed to
-this function so take care in overriding any link props.
- */
-const OverridingTheLinkComponent = exports.OverridingTheLinkComponent = {
-  name: "Overriding the link component",
-  args: {
-    generateLink: _ref => {
-      let {
-        label,
-        className
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: className
-      }, label);
-    },
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    }
-  }
-};
-const NoMenuItems = exports.NoMenuItems = {
-  name: "No menu items",
-  args: {
-    generateLink: _ref2 => {
-      let {
-        label,
-        className
-      } = _ref2;
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: className
-      }, label);
-    },
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    }
-  }
-};

package/dist/components/Navigation/NavigationLink/NavigationLink.d.ts

@@ -1,10 +0,0 @@
-import type { GenerateLink, NavLink } from "../types";
-type Props = {
-    generateLink?: GenerateLink;
-    link: NavLink;
-};
-/**
- * This component is used internally to display links inside the Navigation component.
- */
-declare const NavigationLink: ({ generateLink, link }: Props) => JSX.Element | null;
-export default NavigationLink;

package/dist/components/Navigation/NavigationLink/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./NavigationLink";

package/dist/components/Navigation/NavigationMenu/NavigationMenu.d.ts

@@ -1,11 +0,0 @@
-import type { HTMLProps } from "react";
-import type { GenerateLink, NavMenu } from "../types";
-import { PropsWithSpread } from "../../../types";
-type Props = PropsWithSpread<NavMenu & {
-    generateLink?: GenerateLink;
-}, HTMLProps<HTMLLIElement>>;
-/**
- * This component is used internally to display menus inside the Navigation component.
- */
-declare const NavigationMenu: ({ alignRight, generateLink, items, label, ...props }: Props) => JSX.Element;
-export default NavigationMenu;

package/dist/components/Navigation/NavigationMenu/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./NavigationMenu";

package/dist/components/Navigation/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from "./Navigation";
-export type { Props as NavigationProps } from "./Navigation";
-export type { GenerateLink, LogoProps, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, NavMenu, NavItem, } from "./types";

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

@@ -1,64 +0,0 @@
-import type { HTMLAttributes, HTMLProps, ReactNode } from "react";
-import { PropsWithSpread } from "../../types";
-export type NavLinkBase = {
-    /**
-     * Whether this nav item is currently selected.
-     */
-    isSelected?: boolean;
-    /**
-     * The label of the link.
-     */
-    label: ReactNode;
-    /**
-     * The URL of the link.
-     */
-    url?: string;
-};
-export type NavLinkAnchor = PropsWithSpread<NavLinkBase & {
-    url: string;
-}, HTMLAttributes<HTMLAnchorElement>>;
-export type NavLinkButton = PropsWithSpread<NavLinkBase & {
-    url?: never;
-}, HTMLAttributes<HTMLButtonElement>>;
-export type NavLink = NavLinkAnchor | NavLinkButton;
-export type NavMenu = {
-    /**
-     * Whether to align the dropdown to the right edge of the navigation item.
-     */
-    alignRight?: boolean;
-    /**
-     * The links to appear in the dropdown.
-     */
-    items: NavLink[];
-    /**
-     * The label of the navigation item that opens the menu.
-     */
-    label: string;
-};
-/**
- * Navigation items which can be either a link or a menu containing links.
- */
-export type NavItem = NavLink | NavMenu;
-/**
- * A function that can be used to generate link elements when you don't want to
- * use a standard HTML anchor.
- */
-export type GenerateLink = (item: NavLink) => ReactNode;
-export type LogoProps = PropsWithSpread<{
-    /**
-     * An icon to display in the tag.
-     */
-    icon?: ReactNode;
-    /**
-     * The logo image source URL.
-     */
-    src?: string;
-    /**
-     * The site's title.
-     */
-    title: string;
-    /**
-     * The URL to navigate to when the logo is clicked.
-     */
-    url: string;
-}, HTMLProps<HTMLDivElement>>;

package/dist/components/Notification/Notification.d.ts

@@ -1,110 +0,0 @@
-import { ElementType } from "react";
-import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
-export declare enum Label {
-    Close = "Close notification"
-}
-export declare const NotificationSeverity: {
-    readonly CAUTION: "caution";
-    readonly INFORMATION: "information";
-    readonly NEGATIVE: "negative";
-    readonly POSITIVE: "positive";
-};
-export declare const DefaultTitles: {
-    caution: string;
-    information: string;
-    negative: string;
-    positive: string;
-};
-type NotificationAction = {
-    label: string;
-    onClick: () => void;
-};
-/**
- * The props for the Notification component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * A list of up to two actions that the notification can perform.
-     */
-    actions?: NotificationAction[];
-    /**
-     * Whether the notification should not have a border.
-     */
-    borderless?: boolean;
-    /**
-     * The notification message content.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to apply to the parent notification element.
-     */
-    className?: ClassName;
-    /**
-     * **Deprecated**. Use `onDismiss` instead.
-     */
-    close?: never;
-    /**
-     * Whether the title should display inline with the message.
-     */
-    inline?: boolean;
-    /**
-     * The function to run when dismissing/closing the notification.
-     */
-    onDismiss?: () => void;
-    /**
-     * The severity of the notification.
-     */
-    severity?: ValueOf<typeof NotificationSeverity>;
-    /**
-     * **Deprecated**. Use `title` instead.
-     */
-    status?: never;
-    /**
-     * The amount of time (in ms) until the notification is automatically dismissed.
-     */
-    timeout?: number;
-    /**
-     * A relevant timestamp for the notification, e.g. when it was created.
-     */
-    timestamp?: ReactNode;
-    /**
-     * The title of the notification.
-     */
-    title?: ReactNode;
-    /**
-     * Optional element or component to use for the title.
-     */
-    titleElement?: ElementType;
-    /**
-     * **Deprecated**. Use `severity` instead.
-     */
-    type?: never;
-}, HTMLProps<HTMLDivElement>>;
-/**
-This is a [React](https://reactjs.org/) component for the Vanilla [Notification](https://docs.vanillaframework.io/patterns/notification/).
-
-Notifications are used to display global information, our notification variants consist of default, caution, negative or positive.
-
-The `NotificationProvider` component can be used to manage the notification state globally. Wrap your application components with it and then in any child component you can get the helper with `const notify = useNotify()` to easily trigger notifications:
-
-* `notify.info("You should keep this in mind")`
-* `notify.failure("Error when fooing a bar", errorObjectFromCatch)`
-* `notify.success("The bar was foo'd", "Success")`
-
-The `NotificationConsumer` component can be used to display notifications. It will automatically display any notifications that are added to the `NotificationProvider` state.
-
-The Notification API has changed since v0.18 in order to support new variants
-and align with our component prop naming conventions.
-
-| Deprecated prop names | Replaced by |
-| --------------------- | ----------- |
-| `type`                | `severity`  |
-| `status`              | `title`     |
-| `close`               | `onDismiss` |
-
-The `notificationTypes` const has also been replaced with `NotificationSeverity`
-to reflect the new prop name.
- */
-declare const Notification: ({ actions, borderless, children, className, close, inline, onDismiss, severity, status, timeout, timestamp, title, titleElement: TitleComponent, type, ...props }: Props) => JSX.Element;
-export default Notification;

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

@@ -1,45 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Notification from "./Notification";
-declare const meta: Meta<typeof Notification>;
-export default meta;
-type Story = StoryObj<typeof Notification>;
-/**
- * The information severity should be used to convey an information message.
- */
-export declare const Information: Story;
-/**
- * The caution severity should be used to convey information that is not critical but the user should be aware of.
- */
-export declare const Caution: Story;
-/**
- * The negative severity should be used to convey information that is critical and the user should take action.
- */
-export declare const Negative: Story;
-/**
- * The positive severity should be used to convey success or completion.
- */
-export declare const Positive: Story;
-/**
- * When vertical space is limited, you can use the inline variant.
- */
-export declare const Inline: Story;
-/**
- * In cases where a notification sits inside another component, such as a table cell or a card, it may be useful to remove the outer border and highlight bar.
- */
-export declare const Borderless: Story;
-/**
- * Actions will appear below the notification message.
- */
-export declare const Actions: Story;
-/**
- * Notifications that can be dismissed should be given an onDismiss function.
- */
-export declare const Dismissible: Story;
-/**
- * Notifications can be automatically dismissed after a timeout interval.
- */
-export declare const Timeout: Story;
-/**
- * For notifications in which recency is important, you can include a section for time.
- */
-export declare const Timestamp: Story;