@nimbus-ds/components 4.1.0 → 4.1.1

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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-13 `4.1.1`
+
+#### 🎉 New features
+
+- Added renderProps functionality to the component `Popover` so that it is possible to obtain the internal state of the popover in the component's children. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
+- Added responsive conditions to `Text` component properties. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
+
+#### 🐛 Bug fixes
+
+- Removed additional margin generated in component `Card` when using subcomponent `Card.Header` without a `Card.Footer`. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
+- Removed hover effect on `IconButton` component when disabled. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
+- Added side spacing to `Modal` component. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
+- Fixed bug in `Select` component where clicking on arrow icon didn't work. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
+
+## 2023-04-10 `4.1.0`
+
+#### 💡 Others
+
+- Changed `maxWidth` type description to reflect on prop documentation `Modal` component. ([#141](https://github.com/TiendaNube/nimbus-design-system/pull/141) by [@diegopsilverio](https://github.com/diegopsilverio))
+
 ## 2023-04-03 `4.0.0`
 
 #### 🛠 Breaking changes

package/dist/index.d.ts

@@ -727,13 +727,116 @@ export interface IconButtonSprinkle {
 	 */
 	backgroundColor?: IconButtonBackgroundColorProperties | IconButtonConditions<IconButtonBackgroundColorProperties>;
 }
+declare const propertiesText: {
+	color: {
+		currentColor: string;
+		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * The color property is used to set the color of the text.
+		 * @default neutral-textLow
+		 */
+		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	textAlign: TextAlign[];
+	lineHeight: {
+		readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	fontWeight: {
+		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	fontSize: {
+		caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+};
+export type TextColorProperties = keyof typeof propertiesText.color;
+export type TextFontSizeProperties = keyof typeof propertiesText.fontSize;
+export type TextFontWeightProperties = keyof typeof propertiesText.fontWeight;
+export type TextLineHeightProperties = keyof typeof propertiesText.lineHeight;
+export type TextConditions<T> = Conditions<T>;
+export interface TextSprinkle {
+	/**
+	 * The fontSize property sets the size of the text.
+	 * @default base
+	 */
+	fontSize?: TextFontSizeProperties | TextConditions<TextFontSizeProperties>;
+	/**
+	 * The fontWeight property sets how thick or thin characters in text should be displayed.
+	 * @default regular
+	 */
+	fontWeight?: TextFontWeightProperties | TextConditions<TextFontWeightProperties>;
+	/**
+	 * The lineHeight property specifies the line height of the text.
+	 * @default base
+	 */
+	lineHeight?: TextLineHeightProperties | TextConditions<TextLineHeightProperties>;
+	/**
+	 * The textAlign property specifies the horizontal alignment of text.
+	 * @default left
+	 */
+	textAlign?: TextAlign | TextConditions<TextAlign>;
+	/**
+	 * The color property is used to set the color of the text.
+	 * @default neutral-textLow
+	 */
+	color?: TextColorProperties | TextConditions<TextColorProperties>;
+}
 declare const text: {
 	sprinkle: ((props: {
-		color?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
-		textAlign?: TextAlign | undefined;
-		lineHeight?: "caption" | "base" | "highlight" | undefined;
-		fontWeight?: "regular" | "medium" | "bold" | undefined;
-		fontSize?: "caption" | "base" | "highlight" | undefined;
+		color?: ("primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | {
+			xs?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
+			md?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
+			lg?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
+			xl?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
+		}) | undefined;
+		textAlign?: (TextAlign | {
+			xs?: TextAlign | undefined;
+			md?: TextAlign | undefined;
+			lg?: TextAlign | undefined;
+			xl?: TextAlign | undefined;
+		}) | undefined;
+		lineHeight?: ("caption" | "base" | "highlight" | {
+			xs?: "caption" | "base" | "highlight" | undefined;
+			md?: "caption" | "base" | "highlight" | undefined;
+			lg?: "caption" | "base" | "highlight" | undefined;
+			xl?: "caption" | "base" | "highlight" | undefined;
+		}) | undefined;
+		fontWeight?: ("regular" | "medium" | "bold" | {
+			xs?: "regular" | "medium" | "bold" | undefined;
+			md?: "regular" | "medium" | "bold" | undefined;
+			lg?: "regular" | "medium" | "bold" | undefined;
+			xl?: "regular" | "medium" | "bold" | undefined;
+		}) | undefined;
+		fontSize?: ("caption" | "base" | "highlight" | {
+			xs?: "caption" | "base" | "highlight" | undefined;
+			md?: "caption" | "base" | "highlight" | undefined;
+			lg?: "caption" | "base" | "highlight" | undefined;
+			xl?: "caption" | "base" | "highlight" | undefined;
+		}) | undefined;
 	}) => string) & {
 		properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
 	};
@@ -1061,8 +1164,6 @@ declare const card: {
 	};
 	classnames: {
 		container: string;
-		container__header: string;
-		container__body: string;
 		container__footer: string;
 	};
 };
@@ -1528,12 +1629,12 @@ export interface IconProperties {
 }
 export type IconProps = IconProperties & HTMLAttributes<HTMLDivElement>;
 export declare const Icon: React.FC<IconProps> & IconComponents;
-export interface IconButtonSkeletonProperties {
+export type IconButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height">> & {
 	/**
 	 * This is an attribute used to identify a DOM node for testing purposes.
 	 */
 	"data-testid"?: string;
-}
+};
 export type IconButtonSkeletonProps = IconButtonSkeletonProperties;
 declare const IconButtonSkeleton: React.FC<IconButtonSkeletonProps>;
 export interface IconButtonComponents {
@@ -1587,6 +1688,10 @@ export interface InputProperties {
 	 * @TJS-type React.ReactNode
 	 */
 	append?: ReactNode;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
 }
 export type InputProps = InputProperties & InputHTMLAttributes<HTMLInputElement>;
 export declare const Input: React.FC<InputProps> & InputComponents;
@@ -1708,9 +1813,12 @@ export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "bottom-sta
 export interface PopoverProperties extends PopoverSprinkle {
 	/**
 	 * An HTML element, or a function that returns one. It's used to set the position of the popover.
-	 * @TJS-type React.ReactNode
+	 * @TJS-type React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode);
 	 */
-	children: ReactNode;
+	children: ReactNode | ((data: {
+		open: boolean;
+		setVisibility: (visibility: boolean) => void;
+	}) => ReactNode);
 	/**
 	 * The content of the popover.
 	 * @TJS-type React.ReactNode
@@ -1756,7 +1864,7 @@ export interface PopoverProperties extends PopoverSprinkle {
 	 */
 	offset?: number;
 }
-export type PopoverProps = PopoverProperties & HTMLAttributes<HTMLDivElement>;
+export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children">;
 export declare const Popover: React.FC<PopoverProps>;
 export type RadioSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<RadioProps, "as">> & {
 	/**
@@ -1888,13 +1996,15 @@ export interface TagProperties {
 }
 export type TagProps = TagProperties & HTMLAttributes<HTMLDivElement>;
 export declare const Tag: React.FC<TagProps> & TagComponents;
-export type TextSkeletonProperties = Pick<TextProps, "fontSize"> & Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
+export type TextSkeletonProperties = {
+	fontSize?: keyof typeof text.properties.fontSize;
+} & Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
 export type TextSkeletonProps = TextSkeletonProperties;
 declare const TextSkeleton: React.FC<TextSkeletonProps>;
 export interface TextComponents {
 	Skeleton: typeof TextSkeleton;
 }
-export interface TextProperties {
+export interface TextProperties extends TextSprinkle {
 	/**
 	 * The content of the link.
 	 * @TJS-type React.ReactNode
@@ -1905,33 +2015,8 @@ export interface TextProperties {
 	 * @default p
 	 */
 	as?: "p" | "span";
-	/**
-	 * The fontSize property sets the size of the text.
-	 * @default base
-	 */
-	fontSize?: keyof typeof text.properties.fontSize;
-	/**
-	 * The fontWeight property sets how thick or thin characters in text should be displayed.
-	 * @default regular
-	 */
-	fontWeight?: keyof typeof text.properties.fontWeight;
-	/**
-	 * The lineHeight property specifies the line height of the text.
-	 * @default base
-	 */
-	lineHeight?: keyof typeof text.properties.lineHeight;
-	/**
-	 * The textAlign property specifies the horizontal alignment of text.
-	 * @default left
-	 */
-	textAlign?: typeof text.properties.textAlign[number];
-	/**
-	 * The color property is used to set the color of the text.
-	 * @default neutral-textLow
-	 */
-	color?: keyof typeof text.properties.color;
 }
-export type TextProps = TextProperties & HTMLAttributes<HTMLParagraphElement>;
+export type TextProps = TextProperties & TextSprinkle & HTMLAttributes<HTMLParagraphElement>;
 export declare const Text: React.FC<TextProps> & TextComponents;
 export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
 export type TextareaSkeletonProps = TextareaSkeletonProperties;