ECNIM-371

.yarn/versions/2cc69a83.yml

@@ -0,0 +1,13 @@
+releases:
+  "@nimbus-ds/chip": minor
+  "@nimbus-ds/icon": minor
+  "@nimbus-ds/styles": minor
+  "@nimbus-ds/text": major
+  "@nimbus-ds/title": minor
+  "@nimbus-ds/tokens": minor
+
+declined:
+  - nimbus-design-system
+  - "@nimbus-ds/badge"
+  - "@nimbus-ds/skeleton"
+  - "@nimbus-ds/tag"

packages/react/Badge/package.json

@@ -40,5 +40,6 @@
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
-  }
+  },
+  "stableVersion": "1.0.0"
 }

packages/react/Chip/CHANGELOG.md

@@ -14,8 +14,8 @@ The Chip component is primarily used to define cumulative criteria or attributes
 
 ### 🎉 New features
 
-- Added `count` and `appearance` properties to the Component. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `icon`, `removable`, and `text` properties to the Component. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
 - Added stories on Component. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
-- Created new `Badge.Skeleton` subcomponent. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `width` and `height` properties to the Component `Badge.Skeleton`. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
-- Added stories on Component `Badge.Skeleton`. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Created new `Chip.Skeleton` subcomponent. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `width` and `height` properties to the Component `Chip.Skeleton`. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Added stories on Component `Chip.Skeleton`. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))

packages/react/Chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/chip",
-  "version": "1.0.0",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -42,5 +42,6 @@
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
-  }
+  },
+  "stableVersion": "1.0.0"
 }

packages/react/Chip/src/Chip.tsx

@@ -17,7 +17,7 @@ const Chip: React.FC<ChipProps> & ChipComponents = ({
 }: ChipProps) => (
   <button type="button" {...rest} className={chip.style}>
     {icon && <Icon source={icon} color="neutral.textLow" />}
-    <Text color="neutral.textLow" size="small">
+    <Text color="neutral.textLow" fontSize="small">
       {text}
     </Text>
     {removable && (

packages/react/Chip/webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
     path: path.resolve(__dirname, "dist"),
     filename: "[name].js",
     libraryTarget: "umd",
-    library: "nimbus-ds",
+    library: "@nimbus-ds/chip",
   },
   module: {
     rules: [

packages/react/Icon/CHANGELOG.md

@@ -14,8 +14,8 @@ Icons are used to visually communicate core parts of the product and available a
 
 ### 🎉 New features
 
-- Added `source` and `color` properties to the Component. ([#20](https://github.com/TiendaNube/nimbus-design-system/pull/20) by [@juniorconquista](https://github.com/juniorconquista))
-- Added stories on Component. ([#20](https://github.com/TiendaNube/nimbus-design-system/pull/20) by [@juniorconquista](https://github.com/juniorconquista))
-- Created new `Icon.Skeleton` subcomponent. ([#20](https://github.com/TiendaNube/nimbus-design-system/pull/20) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `width` and `height` properties to the Component `Icon.Skeleton`. ([#20](https://github.com/TiendaNube/nimbus-design-system/pull/20) by [@juniorconquista](https://github.com/juniorconquista))
-- Added stories on Component `Icon.Skeleton`. ([#20](https://github.com/TiendaNube/nimbus-design-system/pull/20) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `source` and `color` properties to the Component. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Added stories on Component. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Created new `Icon.Skeleton` subcomponent. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `width` and `height` properties to the Component `Icon.Skeleton`. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))
+- Added stories on Component `Icon.Skeleton`. ([#21](https://github.com/TiendaNube/nimbus-design-system/pull/21) by [@juniorconquista](https://github.com/juniorconquista))

packages/react/Icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/icon",
-  "version": "1.0.0",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -40,5 +40,6 @@
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
-  }
+  },
+  "stableVersion": "1.0.0"
 }

packages/react/Icon/webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
     path: path.resolve(__dirname, "dist"),
     filename: "[name].js",
     libraryTarget: "umd",
-    library: "nimbus-ds",
+    library: "@nimbus-ds/tag",
   },
   module: {
     rules: [

packages/react/Tag/package.json

@@ -41,5 +41,6 @@
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
-  }
+  },
+  "stableVersion": "1.1.0"
 }

packages/react/Text/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 Text is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
 
+## 2022-09-12
+
+### 🎉 New features
+
+- Added `fontWeight` property to the Component Text. ([#23](https://github.com/TiendaNube/nimbus-design-system/pull/23) by [@juniorconquista](https://github.com/juniorconquista))
+
+### 💡 Others
+
+- Renamed `size` property for `fontSize` to the Component Text. ([#23](https://github.com/TiendaNube/nimbus-design-system/pull/23) by [@juniorconquista](https://github.com/juniorconquista))
+- Removed `bold` property to the Component Text. ([#23](https://github.com/TiendaNube/nimbus-design-system/pull/23) by [@juniorconquista](https://github.com/juniorconquista))
+
 ## 2022-09-01
 
 ### 📚 3rd party library updates

packages/react/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/text",
-  "version": "2.0.0",
+  "version": "3.0.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -39,5 +39,6 @@
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
-  }
+  },
+  "stableVersion": "2.0.0"
 }

packages/react/Text/src/Text.tsx

@@ -9,18 +9,18 @@ const Text: React.FC<TextProps> & TextComponents = ({
   style: _style,
   as: As = "p",
   color = "primary.textLow",
+  textAlign = "left",
+  lineHeight = "caption",
+  fontWeight = "regular",
+  fontSize = "caption",
   children,
-  textAlign,
-  lineHeight,
-  bold,
-  size,
   ...rest
 }: TextProps) => (
   <As
     {...rest}
     className={[
-      text.sprinkle({ color }),
-      text.style({ bold, size, textAlign, lineHeight }),
+      text.sprinkle({ color, textAlign, lineHeight, fontWeight, fontSize }),
+      text.style,
     ].join(" ")}
   >
     {children}

packages/react/Text/src/components/Skeleton/skeleton.spec.tsx

@@ -11,7 +11,7 @@ const makeSut = (props?: SkeletonProps) => {
 describe("GIVEN <Text.Skeleton />", () => {
   describe("WHEN rendered", () => {
     it('THEN should render skeleton size="small"', () => {
-      makeSut({ size: "small" });
+      makeSut({ fontSize: "small" });
       const skeleton = screen.getByTestId("skeleton-element");
       expect(skeleton.getAttribute("style")).toMatch(/--width__\w{0,9}: 2rem;/);
       expect(skeleton.getAttribute("style")).toMatch(
@@ -23,7 +23,7 @@ describe("GIVEN <Text.Skeleton />", () => {
     });
 
     it('THEN should render skeleton size="caption"', () => {
-      makeSut({ size: "caption" });
+      makeSut({ fontSize: "caption" });
       const skeleton = screen.getByTestId("skeleton-element");
       expect(skeleton.getAttribute("style")).toMatch(/--width__\w{0,9}: 2rem;/);
       expect(skeleton.getAttribute("style")).toMatch(
@@ -35,7 +35,7 @@ describe("GIVEN <Text.Skeleton />", () => {
     });
 
     it('THEN should render skeleton type="base"', () => {
-      makeSut({ size: "base" });
+      makeSut({ fontSize: "base" });
       const skeleton = screen.getByTestId("skeleton-element");
       expect(skeleton.getAttribute("style")).toMatch(/--width__\w{0,9}: 2rem;/);
       expect(skeleton.getAttribute("style")).toMatch(

packages/react/Text/src/components/Skeleton/skeleton.tsx

@@ -5,14 +5,14 @@ import { SkeletonProps } from "./skeleton.types";
 import { sizes } from "./skeleton.definitions";
 
 const Skeleton: React.FC<SkeletonProps> = ({
-  size = "caption",
+  fontSize = "caption",
   width,
   height,
   "data-testid": dataTestId,
 }) => (
   <SkeletonBase
-    width={width ?? sizes[size].width}
-    height={height ?? sizes[size].height}
+    width={width ?? sizes[fontSize].width}
+    height={height ?? sizes[fontSize].height}
     data-testid={dataTestId}
     borderRadius="0.25rem"
   />

packages/react/Text/src/components/Skeleton/skeleton.types.ts

@@ -1,7 +1,7 @@
 import { SkeletonProps as SkeletonBaseProps } from "@nimbus-ds/skeleton";
 import { TextProps } from "../../text.types";
 
-export type SkeletonProps = Pick<TextProps, "size"> &
+export type SkeletonProps = Pick<TextProps, "fontSize"> &
   Partial<Pick<SkeletonBaseProps, "width">> &
   Partial<Pick<SkeletonBaseProps, "height">> & {
     "data-testid"?: string;

packages/react/Text/src/text.spec.tsx

@@ -57,35 +57,42 @@ describe("GIVEN <Text />", () => {
     });
   });
 
-  describe("THEN should correctly render a bold", () => {
-    it("THEN should correctly render a bold true", () => {
-      makeSut({ bold: true });
+  describe("THEN should correctly render a fontWeight", () => {
+    it("THEN should correctly render a bold", () => {
+      makeSut({ fontWeight: "bold" });
       expect(
         screen.getByTestId("text-element").getAttribute("class")
-      ).toContain("bold_true");
+      ).toContain("fontWeight_bold");
+    });
+
+    it("THEN should correctly render a regular", () => {
+      makeSut({ fontWeight: "regular" });
+      expect(
+        screen.getByTestId("text-element").getAttribute("class")
+      ).toContain("fontWeight_regular");
     });
   });
 
   describe("THEN should correctly render the size", () => {
     it("THEN should correctly render the size base", () => {
-      makeSut({ size: "base" });
+      makeSut({ fontSize: "base" });
       expect(
         screen.getByTestId("text-element").getAttribute("class")
-      ).toContain("size_base");
+      ).toContain("fontSize_base");
     });
 
     it("THEN should correctly render the size caption", () => {
-      makeSut({ size: "caption" });
+      makeSut({ fontSize: "caption" });
       expect(
         screen.getByTestId("text-element").getAttribute("class")
-      ).toContain("size_caption");
+      ).toContain("fontSize_caption");
     });
 
     it("THEN should correctly render the size small", () => {
-      makeSut({ size: "small" });
+      makeSut({ fontSize: "small" });
       expect(
         screen.getByTestId("text-element").getAttribute("class")
-      ).toContain("size_small");
+      ).toContain("fontSize_small");
     });
   });
 

packages/react/Text/src/text.types.ts

@@ -12,14 +12,14 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
   children: ReactNode;
   /** Type of html tag to create for the Text component */
   as?: "p" | "span";
-  /** Text alignment in content */
-  textAlign?: "left" | "right" | "center" | "justify";
-  /** Bold font for the text component */
-  bold?: boolean;
   /** Text size */
-  size?: "small" | "caption" | "base";
+  fontSize?: keyof typeof text.properties.fontSize;
+  /** Bold font for the text component */
+  fontWeight?: keyof typeof text.properties.fontWeight;
   /** Text line height */
-  lineHeight?: "small" | "caption" | "base";
+  lineHeight?: keyof typeof text.properties.lineHeight;
+  /** Text alignment in content */
+  textAlign?: keyof typeof text.properties.textAlign;
   /** Text color */
-  color?: keyof typeof text.properties;
+  color?: keyof typeof text.properties.colors;
 }

packages/react/Title/CHANGELOG.md

@@ -22,9 +22,9 @@ Tilte is a basic component that allows you to give titles and more hierarchy to
 
 ### 🎉 New features
 
-- Created new `Text.Skeleton` subcomponent. ([#15](https://github.com/TiendaNube/nimbus-design-system/pull/15) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `as`, `width` and `height` properties to the Component `Text.Skeleton`. ([#15](https://github.com/TiendaNube/nimbus-design-system/pull/15) by [@juniorconquista](https://github.com/juniorconquista))
-- Added stories on Component `Text.Skeleton`. ([#15](https://github.com/TiendaNube/nimbus-design-system/pull/15) by [@juniorconquista](https://github.com/juniorconquista))
+- Created new `Title.Skeleton` subcomponent. ([#15](https://github.com/TiendaNube/nimbus-design-system/pull/15) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `as`, `width` and `height` properties to the Component `Title.Skeleton`. ([#15](https://github.com/TiendaNube/nimbus-design-system/pull/15) by [@juniorconquista](https://github.com/juniorconquista))
+- Added stories on Component `Title.Skeleton`. ([#15](https://github.com/TiendaNube/nimbus-design-system/pull/15) by [@juniorconquista](https://github.com/juniorconquista))
 
 ## 2022-08-21
 

packages/react/Title/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/title",
-  "version": "1.2.0",
+  "version": "1.3.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -39,5 +39,6 @@
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
-  }
+  },
+  "stableVersion": "1.2.0"
 }

packages/react/Title/src/Title.tsx

@@ -9,15 +9,15 @@ const Title: React.FC<TitleProps> & TitleComponents = ({
   style: _style,
   as: As = "h1",
   color = "primary.textHigh",
+  textAlign = "left",
   children,
-  textAlign,
   ...rest
 }: TitleProps) => (
   <As
     {...rest}
     className={[
-      title.sprinkle({ color }),
-      title.style({ as: As, textAlign }),
+      title.sprinkle({ color, textAlign }),
+      title.style({ as: As }),
     ].join(" ")}
   >
     {children}

packages/react/Title/src/title.types.ts

@@ -12,7 +12,7 @@ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /** Type of html tag to create for the Title component */
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   /** Title alignment in content */
-  textAlign?: "left" | "right" | "center" | "justify";
+  textAlign?: keyof typeof title.properties.textAlign;
   /** Title color */
-  color?: keyof typeof title.properties;
+  color?: keyof typeof title.properties.colors;
 }

packages/react/Title/webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
     path: path.resolve(__dirname, "dist"),
     filename: "[name].js",
     libraryTarget: "umd",
-    library: "nimbus-ds",
+    library: "@nimbus-ds/title",
   },
   module: {
     rules: [