updated stories (#134)

egovernments · Oct 9, 2024 · d867276 · d867276
1 parent 22b0912
commit d867276
Show file tree

Hide file tree

Showing 21 changed files with 99 additions and 61 deletions.
diff --git a/react/example/package.json b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.44",
+    "@egovernments/digit-ui-components": "0.0.2-beta.45",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.44",
+    "@egovernments/digit-ui-components": "0.0.2-beta.45",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.44",
+    "@egovernments/digit-ui-components": "0.0.2-beta.45",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -85,7 +85,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.12",
-    "@egovernments/digit-ui-components": "0.0.2-beta.44",
+    "@egovernments/digit-ui-components": "0.0.2-beta.45",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.44",
+  "version": "0.0.2-beta.45",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

diff --git a/react/ui-components/src/atoms/NestedTable.js b/react/ui-components/src/atoms/NestedTable.js
@@ -6,6 +6,7 @@ import TableCell from "./TableCell";
 import TableRow from "./TableRow";
 import Card from "./Card";
 import { SVG } from "./SVG";
+import PropTypes from 'prop-types';
 
 const NestedTable = ({ nestedData, toggleRowExpansion, rowIndex }) => {
   const lastNestedData = nestedData[nestedData.length - 1];
@@ -95,4 +96,11 @@ const NestedTable = ({ nestedData, toggleRowExpansion, rowIndex }) => {
   );
 };
 
+
+NestedTable.propTypes = {
+  nestedData: PropTypes.arrayOf(PropTypes.object).isRequired,
+  toggleRowExpansion: PropTypes.func.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  };
+
 export default NestedTable;
diff --git a/react/ui-components/src/atoms/SlideOverMenu.js b/react/ui-components/src/atoms/SlideOverMenu.js
@@ -204,7 +204,12 @@ SlideOverMenu.propTypes = {
   children: PropTypes.node,
   header: PropTypes.node,
   footer: PropTypes.node,
-  onClose: PropTypes.bool,
+  addClose: PropTypes.bool,
+  closedContents: PropTypes.node,
+  closedSections: PropTypes.arrayOf(PropTypes.node),
+  closedHeader: PropTypes.node,
+  closedFooter: PropTypes.node,
+  transitionDuration: PropTypes.number,
   bgActive: PropTypes.bool,
   isOverlay: PropTypes.bool,
   isDraggable: PropTypes.bool,

diff --git a/react/ui-components/src/atoms/TableCell.js b/react/ui-components/src/atoms/TableCell.js
@@ -231,6 +231,10 @@ TableCell.propTypes = {
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
+  updateTableData: PropTypes.func,
+  tableData: PropTypes.array,
+  rowIndex: PropTypes.number,
+  cellIndex: PropTypes.number,
 };
 
 TableCell.defaultProps = {

diff --git a/react/ui-components/src/atoms/TextBlock.js b/react/ui-components/src/atoms/TextBlock.js
@@ -7,11 +7,11 @@ const TextBlock = ({
   caption,
   captionClassName,
   header,
-  headerClasName,
+  headerClassName,
   subHeader,
-  subHeaderClasName,
+  subHeaderClassName,
   body,
-  bodyClasName,
+  bodyClassName,
   style
 }) => {
   return (
@@ -26,19 +26,19 @@ const TextBlock = ({
             </div>
           )}
           {header && (
-            <div className={`digit-text-block-header ${headerClasName}`}>
+            <div className={`digit-text-block-header ${headerClassName}`}>
               {header}
             </div>
           )}
           {subHeader && (
-            <div className={`digit-text-block-subheader ${subHeaderClasName}`}>
+            <div className={`digit-text-block-subheader ${subHeaderClassName}`}>
               {subHeader}
             </div>
           )}
         </div>
       )}
       {body && (
-        <div className={`digit-text-block-body ${bodyClasName}`}>{body}</div>
+        <div className={`digit-text-block-body ${bodyClassName}`}>{body}</div>
       )}
     </div>
   );
@@ -50,11 +50,11 @@ TextBlock.propTypes = {
   caption: PropTypes.string,
   captionClassName: PropTypes.string,
   header: PropTypes.string,
-  headerClasName: PropTypes.string,
+  headerClassName: PropTypes.string,
   subHeader: PropTypes.string,
-  subHeaderClasName: PropTypes.string,
+  subHeaderClassName: PropTypes.string,
   body: PropTypes.string,
-  bodyClasName: PropTypes.string,
+  bodyClassName: PropTypes.string,
 };
 
 TextBlock.defaultProps = {
@@ -63,11 +63,11 @@ TextBlock.defaultProps = {
   caption: "",
   captionClassName: "",
   header: "",
-  headerClasName: "",
+  headerClassName: "",
   subHeader: "",
-  subHeaderClasName: "",
+  subHeaderClassName: "",
   body: "",
-  bodyClasName: "",
+  bodyClassName: "",
 };
 
 export default TextBlock;
diff --git a/react/ui-components/src/atoms/TextInput.js b/react/ui-components/src/atoms/TextInput.js
@@ -210,7 +210,7 @@ const TextInput = (props) => {
     props.errorStyle ? "digit-employeeCard-inputError" : ""
   } ${props.nonEditable ? "noneditable" : ""} ${
     props.type === "numeric" ? "numeric" : ""
-  }`;
+  } ${props.customClass || ""}`;
 
   const defaultType =
     props.type === "password" && inputType === "text"

diff --git a/react/ui-components/src/atoms/stories/Animation.stories.js b/react/ui-components/src/atoms/stories/Animation.stories.js
@@ -6,7 +6,7 @@ import newSceneAnimation from "../../constants/animations/newScene.json";
 import warningOutlineAnimation from "../../constants/animations/warningOutline.json";
 
 export default {
-  title: "Animations",
+  title: "Foundations/Animations",
   component: Animation,
   argTypes: {
     loop: {

diff --git a/react/ui-components/src/atoms/stories/ColorLibrary.stories.js b/react/ui-components/src/atoms/stories/ColorLibrary.stories.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Colors } from "../../constants/colors/colorconstants";
 
 export default {
-  title: "ColorLibrary",
+  title: "Foundations/ColorLibrary",
   argTypes: {
     color: {
       control: {
@@ -57,9 +57,14 @@ const hexCodes = {
 
 
 const Template = (args) => {
+
+  const capitalizedColorName = args?.color?.replace(/\b\w/g, (char) =>
+    char.toUpperCase()
+  );
+
   return (
     <div>
-      <div style={{...args?.style,top:"25%",border:"none"}} className={`typography body-l`}>{`${args?.color} : ${hexCodes[args?.color]}`}</div>
+      <div style={{...args?.style,top:"25%",border:"none"}} className={`typography body-l`}>{`${capitalizedColorName} : ${hexCodes[args?.color]}`}</div>
       <button className={`color-constants-story ${args?.color}`} style={args?.style}></button>
     </div>
   );

diff --git a/react/ui-components/src/atoms/stories/SVG.stories.js b/react/ui-components/src/atoms/stories/SVG.stories.js
@@ -9,15 +9,27 @@ export default {
       control: { type: "check" },
     },
   },
-  title: "SVG",
+  title: "Foundations/Iconography",
   component: SVG,
   icon:""
 };
 
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)"
+};
+
+
 const Template = (args) => {
   const IconComponent = SVG[args.icon];
   return (
-    <div>
+    <div style={style}>
       {IconComponent ? <IconComponent {...args} /> : "Icon not found"}
     </div>
   );

diff --git a/react/ui-components/src/atoms/stories/Spacers.stories.js b/react/ui-components/src/atoms/stories/Spacers.stories.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Spacers } from "../../constants/spacers/spacers";
 
 export default {
-  title: "Spacers",
+  title: "Foundations/Spacers",
   argTypes: {
     spacer: {
       control: {

diff --git a/react/ui-components/src/atoms/stories/TextBlock.stories.js b/react/ui-components/src/atoms/stories/TextBlock.stories.js
@@ -13,10 +13,10 @@ Default.args = {
   caption: "Caption",
   captionClassName: "",
   header: "Heading",
-  headerClasName: "",
+  headerClassName: "",
   subHeader: "Subheading",
-  subHeaderClasName: "",
+  subHeaderClassName: "",
   body:
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-  bodyClasName: "",
+  bodyClassName: "",
 };
diff --git a/react/ui-components/src/atoms/stories/Typography.stories.js b/react/ui-components/src/atoms/stories/Typography.stories.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 export default {
-  title: "Typography",
+  title: "Foundations/Typography",
   argTypes: {
     typoName: {
       control: {
@@ -52,6 +52,7 @@ const style = {
   alignItems: "center",
   justifyContent: "center",
   transform: "translate(-50%, -50%)",
+  lineHeight:"normal"
 };
 
 export const Playground = Template.bind({});
@@ -61,42 +62,42 @@ Playground.args = {
 };
 
 export const HeadingXL = () => (
-  <div style={style} className={`typography heading-xl`}>Heading XL</div>
+  <div style={style} className={`typography heading-xl`}>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const HeadingL = () => (
-  <div style={style} className="typography heading-l">Heading L</div>
+  <div style={style} className="typography heading-l">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const HeadingM = () => (
-  <div style={style} className="typography heading-m">Heading M</div>
+  <div style={style} className="typography heading-m">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const HeadingS = () => (
-  <div style={style} className="typography heading-s">Heading S</div>
+  <div style={style} className="typography heading-s">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const HeadingXS = () => (
-  <div style={style} className="typography heading-xs">Heading XS</div>
+  <div style={style} className="typography heading-xs">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const CaptionL = () => (
-  <div style={style} className="typography caption-l">Caption L</div>
+  <div style={style} className="typography caption-l">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const CaptionM = () => (
-  <div style={style} className="typography caption-m">Caption M</div>
+  <div style={style} className="typography caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
 export const CaptionS = () => (
-  <div style={style} className="typography caption-s">Caption S</div>
+  <div style={style} className="typography caption-s">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
 );
 
-export const BodyL = () => <div style={style} className="typography body-l">Body L</div>;
+export const BodyL = () => <div style={style} className="typography body-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </div>;
 
-export const BodyS = () => <div style={style} className="typography body-s">Body S</div>;
+export const BodyS = () => <div style={style} className="typography body-s">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </div>;
 
-export const BodyXS = () => <div style={style} className="typography body-xs">Body XS</div>;
+export const BodyXS = () => <div style={style} className="typography body-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </div>;
 
 export const Label = () => <div style={style} className="typography label">Label</div>;
 

diff --git a/react/ui-components/src/molecules/FilterCard.js b/react/ui-components/src/molecules/FilterCard.js
@@ -87,10 +87,13 @@ const FilterCard = ({
   const handleOverlayClick = () => {
     setIsClosing(true);
     setTimeout(() => {
-      onOverlayClick();
+      if(onOverlayClick){
+        onOverlayClick();
+      }
     }, 300);
   };
 
+
   const renderButtons = () =>
     isMobileView || layoutType === "vertical" ? (
       <div

diff --git a/react/ui-components/src/molecules/stories/CardVariantPrimaryCard.stories.js b/react/ui-components/src/molecules/stories/CardVariantPrimaryCard.stories.js
@@ -149,11 +149,11 @@ export const PrimaryCardWithTextBlock = () => (
       caption="Caption"
       captionClassName=""
       header="Header"
-      headerClasName=""
+      headerClassName=""
       subHeader="Sub Header"
-      subHeaderClasName=""
+      subHeaderClassName=""
       body="Body"
-      bodyClasName=""
+      bodyClassName=""
     ></TextBlock>
   </Card>
 );

diff --git a/react/ui-components/src/molecules/stories/CardVariantScondaryCard.stories.js b/react/ui-components/src/molecules/stories/CardVariantScondaryCard.stories.js
@@ -148,11 +148,11 @@ export const SecondaryCardWithTextBlock = () => (
       caption="Caption"
       captionClassName=""
       header="Header"
-      headerClasName=""
+      headerClassName=""
       subHeader="Sub Header"
-      subHeaderClasName=""
+      subHeaderClassName=""
       body="Body"
-      bodyClasName=""
+      bodyClassName=""
     ></TextBlock>
   </Card>
 );