@nimbus-ds/components 4.2.0-rc.3 โ†’ 4.2.1-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/index.d.ts +108 -115
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  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.
4
4
 
5
+ ## 2023-05-02 `4.2.1`
6
+
7
+ ### ๐ŸŽ‰ New features
8
+
9
+ - Added responsive conditions to `Title` component properties. ([#152](https://github.com/TiendaNube/nimbus-design-system/pull/152) by [@juanchigallego](https://github.com/juanchigallego))
10
+
11
+ #### ๐Ÿ› Bug fixes
12
+
13
+ - Omit `content` HTML prop on `Popover` API. ([#152](https://github.com/TiendaNube/nimbus-design-system/pull/152) by [@juanchigallego](https://github.com/juanchigallego))
14
+
5
15
  ## 2023-04-24 `4.2.0`
6
16
 
7
17
  #### ๐ŸŽ‰ New features
package/dist/index.d.ts CHANGED
@@ -887,99 +887,116 @@ declare const text: {
887
887
  base: string;
888
888
  };
889
889
  };
890
- declare const title: {
891
- sprinkle: ((props: {
892
- color?: "primary-textLow" | "primary-textHigh" | "success-textLow" | "success-textHigh" | "warning-textLow" | "warning-textHigh" | "danger-textLow" | "danger-textHigh" | "neutral-textLow" | "neutral-textHigh" | undefined;
893
- textAlign?: TextAlign | undefined;
894
- fontSize?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "1" | "2" | "3" | "4" | "5" | "0,5" | "6" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "1,5" | "2,5" | "3,5" | "4,5" | "7" | "9" | "11" | undefined;
895
- fontWeight?: "regular" | "medium" | "bold" | undefined;
896
- lineHeight?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "1" | "2" | "3" | "4" | "5" | "0,5" | "6" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "1,5" | "2,5" | "3,5" | "4,5" | "7" | "9" | "11" | undefined;
897
- }) => string) & {
898
- properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
890
+ declare const propertiesTitle: {
891
+ color: {
892
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
893
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
894
+ "success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
895
+ "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
896
+ "warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
897
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
898
+ "danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
899
+ "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
900
+ "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
901
+ "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
899
902
  };
900
- properties: {
901
- color: {
902
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
903
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
904
- "success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
905
- "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
906
- "warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
907
- "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
908
- "danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
909
- "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
910
- "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
911
- "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
912
- };
913
- textAlign: TextAlign[];
914
- fontSize: {
915
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
916
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
917
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
918
- "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
919
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
920
- "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
921
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
922
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
923
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
924
- "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
925
- "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
926
- "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
927
- "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
928
- "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
929
- "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
930
- "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
931
- "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
932
- "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
933
- "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
934
- "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
935
- "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
936
- h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
937
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
938
- h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
939
- h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
940
- h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
941
- h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
942
- };
943
- fontWeight: {
944
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
945
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
946
- bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
947
- };
948
- lineHeight: {
949
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
950
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
951
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
952
- "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
953
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
954
- "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
955
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
956
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
957
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
958
- "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
959
- "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
960
- "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
961
- "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
962
- "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
963
- "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
964
- "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
965
- "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
966
- "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
967
- "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
968
- "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
969
- "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
970
- h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
971
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
972
- h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
973
- h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
974
- h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
975
- h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
976
- };
903
+ textAlign: TextAlign[];
904
+ fontSize: {
905
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
906
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
907
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
908
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
909
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
910
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
911
+ "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
912
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
913
+ "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
914
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
915
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
916
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
917
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
918
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
919
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
920
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
921
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
922
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
923
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
924
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
925
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
926
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
927
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
928
+ h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
929
+ h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
930
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
931
+ h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
977
932
  };
978
- classnames: {
979
- base: string;
980
- appearance: Record<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", string>;
933
+ fontWeight: {
934
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
935
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
936
+ bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
937
+ };
938
+ lineHeight: {
939
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
940
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
941
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
942
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
943
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
944
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
945
+ "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
946
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
947
+ "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
948
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
949
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
950
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
951
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
952
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
953
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
954
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
955
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
956
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
957
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
958
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
959
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
960
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
961
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
962
+ h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
963
+ h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
964
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
965
+ h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
981
966
  };
982
967
  };
968
+ export type TitleColorProperties = keyof typeof propertiesTitle.color;
969
+ export type TitleFontSizeProperties = keyof typeof propertiesTitle.fontSize;
970
+ export type TitleFontWeightProperties = keyof typeof propertiesTitle.fontWeight;
971
+ export type TitleLineHeightProperties = keyof typeof propertiesTitle.lineHeight;
972
+ export type TitleConditions<T> = Conditions<T>;
973
+ export interface TitleSprinkle {
974
+ /**
975
+ * The fontSize property sets the size of the title.
976
+ * @default base
977
+ */
978
+ fontSize?: TitleFontSizeProperties | TitleConditions<TitleFontSizeProperties>;
979
+ /**
980
+ * The fontWeight property sets how thick or thin characters in title should be displayed.
981
+ * @default regular
982
+ */
983
+ fontWeight?: TitleFontWeightProperties | TitleConditions<TitleFontWeightProperties>;
984
+ /**
985
+ * The lineHeight property specifies the line height of the title.
986
+ * @default base
987
+ */
988
+ lineHeight?: TitleLineHeightProperties | TitleConditions<TitleLineHeightProperties>;
989
+ /**
990
+ * The textAlign property specifies the horizontal alignment of title.
991
+ * @default left
992
+ */
993
+ textAlign?: TextAlign | TitleConditions<TextAlign>;
994
+ /**
995
+ * The color property is used to set the color of the title.
996
+ * @default neutral-textLow
997
+ */
998
+ color?: TitleColorProperties | TitleConditions<TitleColorProperties>;
999
+ }
983
1000
  declare const propertiesPopover: {
984
1001
  backgroundColor: {
985
1002
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1862,7 +1879,7 @@ export interface PopoverProperties extends PopoverSprinkle {
1862
1879
  */
1863
1880
  offset?: number;
1864
1881
  }
1865
- export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children">;
1882
+ export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children" | "content">;
1866
1883
  export declare const Popover: React.FC<PopoverProps>;
1867
1884
  export type RadioSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<RadioProps, "as">> & {
1868
1885
  /**
@@ -2086,32 +2103,8 @@ export interface TitleProperties {
2086
2103
  * @default h1
2087
2104
  */
2088
2105
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
2089
- /**
2090
- * The textAlign property specifies the horizontal alignment of title.
2091
- * @default left
2092
- */
2093
- textAlign?: typeof title.properties.textAlign[number];
2094
- /**
2095
- * The color property is used to set the color of the title.
2096
- * @default primary-textHigh
2097
- */
2098
- color?: keyof typeof title.properties.color;
2099
- /**
2100
- * The fontSize property sets the size of the title.
2101
- */
2102
- fontSize?: keyof typeof title.properties.fontSize;
2103
- /**
2104
- * The fontWeight property sets how thick or thin characters in text should be displayed.
2105
- * @default medium
2106
- */
2107
- fontWeight?: keyof typeof title.properties.fontWeight;
2108
- /**
2109
- * The lineHeight property specifies the line height of the title.
2110
- * @default base
2111
- */
2112
- lineHeight?: keyof typeof title.properties.lineHeight;
2113
2106
  }
2114
- export type TitleProps = TitleProperties & HTMLAttributes<HTMLHeadingElement>;
2107
+ export type TitleProps = TitleProperties & TitleSprinkle & HTMLAttributes<HTMLHeadingElement>;
2115
2108
  export declare const Title: React.FC<TitleProps> & TitleComponents;
2116
2109
  export interface ToastProviderProperties {
2117
2110
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/components",
3
- "version": "4.2.0-rc.3",
3
+ "version": "4.2.1-rc.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -32,5 +32,5 @@
32
32
  "devDependencies": {
33
33
  "@nimbus-ds/webpack": "^1.3.0"
34
34
  },
35
- "stableVersion": "4.1.1"
35
+ "stableVersion": "4.2.0"
36
36
  }