@nimbus-ds/patterns 1.2.0-rc.3 → 1.2.1-rc.1

package/CHANGELOG.md

@@ -2,14 +2,45 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
-## 2023-04-12 `1.2.0`
+## 2023-04-18 `1.2.0`
+## 2023-04-18 `1.2.0`
 
 #### 🎉 New features
 
-- Added `Menu.ButtonAccordion` subcomponent of `Menu` component. ([#39](https://github.com/TiendaNube/nimbus-patterns/pull/39) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `MenuButton.Accordion` subcomponent of `MenuButton` component. ([#39](https://github.com/TiendaNube/nimbus-patterns/pull/39) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `Menu.ButtonAccordion` subcomponent of `Menu` component. ([#44](https://github.com/TiendaNube/nimbus-patterns/pull/44) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `MenuButton.Accordion` subcomponent of `MenuButton` component. ([#44](https://github.com/TiendaNube/nimbus-patterns/pull/44) by [@juniorconquista](https://github.com/juniorconquista))
 
-## 2022-04-11 `1.1.0`
+## 2023-04-17 `1.1.1`
+
+#### 🎉 New features
+
+- Added new `DataTable.Cell` subcomponent. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `bottomDivider` property to `DataList` component API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `topDivider` property to `DataList.Row` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `DataList` properties inside `InteractiveList` component API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `topDivider` property from `DataList.Row` subcomponent inside `InteractiveList.CheckboxItem` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `topDivider` property from `DataList.Row` subcomponent inside `InteractiveList.RadioItem` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `topDivider` property from `DataList.Row` subcomponent inside `InteractiveList.ToggleItem` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `topDivider` property from `DataList.Row` subcomponent inside `InteractiveList.ButtonItem` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added new `HelpLink` component. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `children` property to the `HelpLink` component API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added stories documentation for `HelpLink` component. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+
+#### 💡 Others
+
+- Extend `Box` properties inside `Page` component API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `Box` properties inside `Page.Header` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `Box` properties inside `Page.Body` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Extend `Box` properties inside `AppShell.Header` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `ariaLabel` property to `NavTabs.Item` subcomponent API. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `stressed` story to `CalloutCard` stories documentation. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+
+#### 🐛 Bug fixes
+
+- Fixed a bug on `AppShell.Header` subcomponent where content on `rightSlot` would fall off to the left when `leftSlot` property was empty. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+- Fixed a bug on `CalloutCard` component where the icon would incorrectly stretch and warp when the text was too long. ([#45](https://github.com/TiendaNube/nimbus-patterns/pull/45) by [@juanchigallego](https://github.com/juanchigallego))
+
+## 2023-04-11 `1.1.0`
 
 #### 🎉 New features
 
@@ -23,7 +54,7 @@ Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s tea
 
 - Fixed bug using Crypto library when generating unique id's for `InteractiveListItem`. ([#38](https://github.com/TiendaNube/nimbus-patterns/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
 
-## 2022-04-06 `1.0.0`
+## 2023-04-06 `1.0.0`
 
 #### 🎉 New features
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 // Generated by dts-bundle-generator v8.0.0
 
-import { BoxProperties, ButtonProperties, CheckboxProperties, CheckboxProps, IconButtonProperties, IconButtonProps, InputProperties, PaginationProperties, PopoverProperties, RadioProperties, SelectProperties, SidebarProperties, TableProperties, TableRowProperties, TextareaProperties, ThumbnailProperties, ThumbnailProps, ToggleProperties } from '@nimbus-ds/components';
+import { BoxProperties, ButtonProperties, CheckboxProperties, CheckboxProps, IconButtonProperties, IconButtonProps, InputProperties, PaginationProperties, PopoverProperties, RadioProperties, SelectProperties, SidebarProperties, TableCellProperties, TableProperties, TableRowProperties, TextareaProperties, ThumbnailProperties, ThumbnailProps, ToggleProperties } from '@nimbus-ds/components';
 import { IconProps } from '@nimbus-ds/icons';
 import { PolymorphicForwardRefComponent } from '@nimbus-ds/typings';
 import React from 'react';
@@ -18,7 +18,7 @@ export interface AppShellHeaderProperties {
 	 */
 	rightSlot?: ReactNode;
 }
-export type AppShellHeaderProps = AppShellHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type AppShellHeaderProps = AppShellHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProperties, "display" | "justifyContent">;
 declare const AppShellHeader: React.FC<AppShellHeaderProps>;
 export interface AppShellComponents {
 	Header: typeof AppShellHeader;
@@ -79,6 +79,11 @@ export interface DataListRowProperties extends Omit<BoxProperties, "padding"> {
 	 * @TJS-type React.ReactNode
 	 */
 	children: ReactNode;
+	/**
+	 * Determines if the row has a top border.
+	 * @default true
+	 */
+	topDivider?: boolean;
 }
 export type DataListRowProps = DataListRowProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const DataListRow: React.FC<DataListRowProps>;
@@ -91,6 +96,11 @@ export interface DataListProperties {
 	 * @TJS-type React.ReactNode
 	 */
 	children: ReactNode;
+	/**
+	 * Defines whether the List has a bottom border.
+	 * @default true
+	 */
+	bottomDivider?: boolean;
 }
 export type DataListProps = DataListProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export declare const DataList: React.FC<DataListProps> & DataListComponents;
@@ -160,11 +170,21 @@ export type DataTableRowProps = DataTableRowProperties & {
 	checkbox: CheckboxProps;
 } & TableRowProperties & HTMLAttributes<HTMLElement>;
 declare const DataTableRow: React.FC<DataTableRowProps>;
+export interface DataTableCellProperties {
+	/**
+	 * Content of the List component.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type DataTableCellProps = DataTableCellProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & TableCellProperties;
+declare const DataTableCell: React.FC<DataTableCellProps>;
 export interface DataTableComponents {
 	BulkActions: typeof DataTableBulkActions;
 	Header: typeof DataTableHeader;
 	Footer: typeof DataTableFooter;
 	Row: typeof DataTableRow;
+	Cell: typeof DataTableCell;
 }
 export interface DataTableProperties {
 	/**
@@ -264,6 +284,15 @@ export interface FormFieldProperties {
 }
 export type FormFieldProps = FormFieldProperties & HTMLAttributes<HTMLElement>;
 export declare const FormField: React.FC<FormFieldProps> & FormFieldComponents;
+export interface HelpLinkProperties {
+	/**
+	 * Content to be rendered inside the HelpLink component.
+	 * @TJS-type ReactNode
+	 */
+	children: ReactNode;
+}
+export type HelpLinkProps = HelpLinkProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const HelpLink: React.FC<HelpLinkProps>;
 export interface InteractiveListStructureProperties {
 	/**
 	 * Title of the list item element. Also used to generate the ID for the interactive element.
@@ -288,13 +317,26 @@ declare const InteractiveListStructure: React.FC<InteractiveListStructureProps>;
 export type InteractiveListStructureSkeletonProperties = InteractiveListStructureProperties;
 export type InteractiveListStructureSkeletonProps = InteractiveListStructureSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const InteractiveListStructureSkeleton: React.FC<InteractiveListStructureSkeletonProps>;
+export interface InteractiveListRowProperties extends Omit<BoxProperties, "padding"> {
+	/**
+	 * Content of the row.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Determines if the row has a top border.
+	 * @default true
+	 */
+	topDivider?: boolean;
+}
+export type InteractiveListRowProps = InteractiveListRowProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 export interface InteractiveListCheckboxItemProperties extends InteractiveListStructureProperties {
 	/**
 	 * Checkbox props inherited from Nimbus components.
 	 */
 	checkbox: CheckboxProperties;
 }
-export type InteractiveListCheckboxItemProps = InteractiveListCheckboxItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type InteractiveListCheckboxItemProps = InteractiveListCheckboxItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
 declare const InteractiveListCheckboxItem: React.FC<InteractiveListCheckboxItemProps>;
 export type InteractiveListCheckboxItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
 export type InteractiveListCheckboxItemSkeletonProps = InteractiveListCheckboxItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
@@ -305,7 +347,7 @@ export interface InteractiveListRadioItemProperties extends InteractiveListStruc
 	 */
 	radio: RadioProperties;
 }
-export type InteractiveListRadioItemProps = InteractiveListRadioItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type InteractiveListRadioItemProps = InteractiveListRadioItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
 declare const InteractiveListRadioItem: React.FC<InteractiveListRadioItemProps>;
 export type InteractiveListRadioItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
 export type InteractiveListRadioItemSkeletonProps = InteractiveListRadioItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
@@ -316,7 +358,7 @@ export interface InteractiveListToggleItemProperties extends InteractiveListStru
 	 */
 	toggle: ToggleProperties;
 }
-export type InteractiveListToggleItemProps = InteractiveListToggleItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type InteractiveListToggleItemProps = InteractiveListToggleItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
 declare const InteractiveListToggleItem: React.FC<InteractiveListToggleItemProps>;
 export interface InteractiveListToggleItemSkeletonProperties extends InteractiveListStructureProperties {
 	/**
@@ -334,7 +376,7 @@ export interface InteractiveListButtonItemProperties extends InteractiveListStru
 }
 export type InteractiveListButtonItemProps = InteractiveListButtonItemProperties & {
 	iconButton: Omit<IconButtonProps, "backgroundColor" | "borderColor" | "size" | "source">;
-} & Omit<HTMLAttributes<HTMLElement>, "color">;
+} & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
 declare const InteractiveListButtonItem: React.FC<InteractiveListButtonItemProps>;
 export type InteractiveListButtonItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
 export type InteractiveListButtonItemSkeletonProps = InteractiveListButtonItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
@@ -351,7 +393,7 @@ export interface InteractiveListComponents {
 	RadioItem: typeof InteractiveListRadioItem;
 	RadioItemSkeleton: typeof InteractiveListRadioItemSkeleton;
 }
-export interface InteractiveListProperties {
+export interface InteractiveListProperties extends DataListProps {
 	/**
 	 * Content of the InteractiveList
 	 * @TJS-type React.ReactNode
@@ -405,6 +447,10 @@ export interface MenuButtonAccordionProperties {
 	 * @default false
 	 */
 	controlled?: boolean;
+	/**
+	 * Sets the state of the button as active/inactive.
+	 */
+	active?: boolean;
 }
 export type MenuButtonAccordionPros = MenuButtonAccordionProperties & {
 	menuButton: MenuButtonProps;
@@ -511,6 +557,10 @@ export interface NavTabsItemProperties extends BoxProperties {
 	 * @TJS-type onClick: () => void;
 	 */
 	onClick: () => void;
+	/**
+	 * Text label used for accessibility.
+	 */
+	ariaLabel: string;
 }
 export type NavTabsItemProps = NavTabsItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
 declare const NavTabsItem: React.FC<NavTabsItemProps>;
@@ -546,7 +596,7 @@ export interface PageHeaderProperties {
 	 */
 	children?: ReactNode;
 }
-export type PageHeaderProps = PageHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type PageHeaderProps = PageHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProperties, "display" | "flexDirection">;
 declare const PageHeader: React.FC<PageHeaderProps>;
 export interface PageBodyProperties {
 	/**
@@ -555,7 +605,7 @@ export interface PageBodyProperties {
 	 */
 	children: ReactNode;
 }
-export type PageBodyProps = PageBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type PageBodyProps = PageBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & BoxProperties;
 declare const PageBody: React.FC<PageBodyProps>;
 export interface PageComponents {
 	Header: typeof PageHeader;
@@ -572,7 +622,7 @@ export interface PageProperties {
 	 */
 	maxWidth?: string;
 }
-export type PageProps = PageProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export type PageProps = PageProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProperties, "width" | "maxWidth" | "marginX">;
 export declare const Page: React.FC<PageProps> & PageComponents;
 export interface ProductUpdatesProperties extends Omit<PopoverProperties, "content" | "appearance" | "padding" | "enabledDismiss"> {
 	/**