@kwantis-id3/frontend-library 0.14.2 → 0.16.0

package/README.md

@@ -38,6 +38,7 @@ At the moment, the library contains the following components:
 - Select (both single and multi)
 - Slider
 - Textfield
+- Multilevel Dropdown
 
 The following are under development or on our roadmap:
 - Label
@@ -241,7 +242,13 @@ const primaryColor = theme.colors.primary.main;
 const primaryColor = theme.getColor("primary");
 ```
 
-Basically, the property `getColor` can recognise if you are passing a key of the theme, and return it’s corresponding object, or if you are passing it a hex string, or a rgb string, and so on.
+Basically, the property `getColor` can be used to:
+- Access the theme colors, in 2 ways:
+  - Access the color directly, if the passed string is a valid key of the `ThemeColorsObject` interface. This is the same as accessing the color directly from the `colors` property, giving you access to the possible custom properties that you may have added to the theme.
+  - Access the color through a path, if the passed string is a valid path of the `ThemeColorsObject` interface. This returns a `Color` object, that has only the `main` and `contrastText` properties, where `main` is the color that you are accessing, and `contrastText` is generated automatically to grant the best readability possible.
+- Generate a valid `Color` object, if the passed string is a valid hex code or css color function
+
+
 
 In the latter case, the contrastText property will automatically be generated to grant the best readability possible.
 
@@ -250,6 +257,9 @@ If the passed string is not a valid color, the function will default to the prim
   const tertiartyColor = theme.getColor("tertiary");
   console.log(tertiaryColor); // { main: "#7dcfb6", contrastText: "#ffffff" }
 
+  const tertiartyTextColor = theme.getColor("tertiary.contrastText");
+  console.log(tertiaryTextColor); // { main: "#ffffff", contrastText: "#000000"}
+
   const fuchsia = theme.getColor("fuchsia");
   console.log(fuchsia); // { main: "fuchsia", contrastText: "#000000" }
 
@@ -262,12 +272,15 @@ If the passed string is not a valid color, the function will default to the prim
 
 ## The Color prop
 Each component that has a **color** prop, accepts a string.
-The string can be a color name, a hex code, or a css color function.
+The string can be a color name, a color path, a hex code, or a css color function.
 
 ```tsx
 // Color name
 <Button color="primary" />
 
+// Color path
+<Button color="primary.contrastText" />
+
 // Hex code
 <Button color="#1d4e89" />
 
@@ -309,5 +322,5 @@ const MyComponent = () => {
   return <StyledDiv $bgColor="red">I'm red!</StyledDiv>;
 };
 ```
-It's important that the props defined this way are prefixed with a `$` sign, to avoid conflicts.
+It's important that the props defined this way are prefixed with a `$` sign, to avoid conflicts with the native HTML props.