@nimbus-ds/alert 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+The alert component is used to showcase relevant or time-sensitive information to the user in a visually prominent banner.
+
+## 2022-10-26
+
+### 📚 3rd party library updates
+
+- Added `@vanilla-extract/webpack-plugin@2.1.11`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `terser-webpack-plugin@5.3.5`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `ts-loader@9.3.1`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `typescript@4.7.4`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `webpack@5.74.0`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `webpack-cli@4.10.0`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+
+### 🎉 New features
+
+- Added `title`, `appearance`, `children`, `onRemove` and `show` properties to the component API. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added stories to the component. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Created new `Alert.Skeleton` subcomponent. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))
+- Added stories to the subcomponent `Alert.Skeleton`. ([#50](https://github.com/TiendaNube/nimbus-design-system/pull/50) by [@juanchigallego](https://github.com/juanchigallego))

package/README.md

@@ -0,0 +1,13 @@
+# `@nimbus-ds/alert`
+
+[![@nimbus-ds/alert](https://img.shields.io/npm/v/@nimbus-ds/alert?label=%40nimbus-ds%2Falert)](https://www.npmjs.com/package/@nimbus-ds/alert)
+
+The alert component is used to showcase relevant or time-sensitive information to the user in a visually prominent banner.
+
+## Installation
+
+```sh
+$ yarn add @nimbus-ds/alert
+# or
+$ npm install @nimbus-ds/alert
+```

package/dist/Alert.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AlertProps, AlertComponents } from "./alert.types";
+declare const Alert: React.FC<AlertProps> & AlertComponents;
+export { Alert };

package/dist/alert.definitions.d.ts

@@ -0,0 +1,22 @@
+export declare const alertVariants: {
+    neutral: {
+        icon: import("@tiendanube/icons/dist/icons").Icon;
+        role: string;
+    };
+    primary: {
+        icon: import("@tiendanube/icons/dist/icons").Icon;
+        role: string;
+    };
+    success: {
+        icon: import("@tiendanube/icons/dist/icons").Icon;
+        role: string;
+    };
+    warning: {
+        icon: import("@tiendanube/icons/dist/icons").Icon;
+        role: string;
+    };
+    danger: {
+        icon: import("@tiendanube/icons/dist/icons").Icon;
+        role: string;
+    };
+};

package/dist/alert.types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { Skeleton } from "./components";
+export interface AlertComponents {
+    Skeleton: typeof Skeleton;
+}
+export interface AlertProps extends HTMLAttributes<HTMLElement> {
+    /** Alert title */
+    title?: string;
+    /** Alert appearance */
+    appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
+    /** Alert body content */
+    children: ReactNode;
+    /** Function to be passed on actioning the dismiss button */
+    onRemove?: () => void;
+    /** Determines if the alert is shown or not */
+    show?: boolean;
+}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SkeletonProps } from "./skeleton.types";
+declare const Skeleton: React.FC<SkeletonProps>;
+export { Skeleton };

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

@@ -0,0 +1,3 @@
+import { Skeleton } from "./Skeleton";
+export { Skeleton } from "./Skeleton";
+export default Skeleton;

package/dist/components/Skeleton/skeleton.types.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps as SkeletonBaseProps } from "@nimbus-ds/skeleton";
+export declare type SkeletonProps = Partial<Pick<SkeletonBaseProps, "width">> & Partial<Pick<SkeletonBaseProps, "height">> & {
+    "data-testid"?: string;
+};

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Alert } from "./Alert";
+import "@nimbus-ds/styles/packages/alert/index.css";
+export { Alert } from "./Alert";
+export type { AlertProps } from "./alert.types";
+export default Alert;