Dpg 2443 [0.0.2-beta.20] - 2024-08-02 ### Added - Added css for Tag C…

…omponent (#108)

* added tag component

* updated versions

* updated with review changes

* added iconRender logic

react/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.20] - 2024-08-02
+### Added
+- Added css for Tag Component
+
 ## [0.0.2-beta.19] - 2024-07-31
 ### Added
 - Added css change for SelectionCard

react/css/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-components-css",
- "version": "0.0.2-beta.19",
+ "version": "0.0.2-beta.20",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

react/css/src/digitv2/components/tagV2.scss

@@ -0,0 +1,108 @@
+.digit-tag-wrapper {
+
+ border-radius: theme(digitv2.spacers.spacer1);
+ padding: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer3);
+ gap: 0.625rem;
+ display: flex;
+ align-items: center;
+ width: fit-content;
+ justify-content: center;
+
+ &.left {
+ justify-content: flex-start;
+ }
+
+ &.right {
+ justify-content: flex-end;
+ }
+
+ svg {
+ flex-shrink: 0;
+ }
+
+ &.success {
+ background-color: theme(digitv2.lightTheme.alert-successbg);
+
+ .digit-tag-text {
+ color: theme(digitv2.lightTheme.alert-success);
+ }
+ }
+
+ &.error {
+ background-color: theme(digitv2.lightTheme.alert-errorbg);
+
+ .digit-tag-text {
+ color: theme(digitv2.lightTheme.alert-error);
+ }
+ }
+
+ &.warning {
+ background-color: theme(digitv2.lightTheme.alert-warning-bg);
+
+ .digit-tag-text {
+ color: theme(digitv2.lightTheme.alert-warning);
+ }
+ }
+
+ &.monochrome {
+ background-color: theme(digitv2.lightTheme.paper-secondary);
+
+ .digit-tag-text {
+ color: theme(digitv2.lightTheme.primary-2);
+ }
+ }
+
+
+ &.stroke {
+ &.success {
+ border: 0.031rem solid theme(digitv2.lightTheme.alert-success);
+ }
+
+ &.error {
+ border: 0.031rem solid theme(digitv2.lightTheme.alert-error);
+ }
+
+ &.warning {
+ border: 0.031rem solid theme(digitv2.lightTheme.alert-warning);
+ }
+
+ &.monochrome {
+ border: 0.031rem solid theme(digitv2.lightTheme.primary-2);
+ }
+ }
+
+ .digit-tag-customIcon {
+ width: theme(digitv2.spacers.spacer4);
+ height: theme(digitv2.spacers.spacer4);
+ }
+
+ .digit-tag-text {
+ @extend .typography.body-s;
+ font-family: theme(digitv2.fontFamily.sans);
+ font-style: theme(digitv2.fontStyle.normal);
+ font-weight: theme(digitv2.fontWeight.regular);
+ line-height: theme(digitv2.lineHeight.lineheight2);
+
+ @media (max-aspect-ratio: 9/16) {
+ /* Media query for mobile */
+ font-size: theme(digitv2.fontSize.body-s.mobile);
+ }
+
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+ /* Media query for tablets */
+ font-size: theme(digitv2.fontSize.body-s.tablet);
+ }
+
+ @media (min-aspect-ratio: 3/4) {
+ /* Media query for desktop */
+ font-size: theme(digitv2.fontSize.body-s.desktop);
+ }
+ }
+
+ &.cp {
+ &:hover {
+ box-shadow: 0rem 0.063rem 0.188rem 0.063rem #00000026;
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #0000004D;
+ }
+ }
+}

react/css/src/digitv2/index.scss

@@ -38,6 +38,7 @@
 @import url("./components/sidebarV2.scss");
 @import url("./components/mobilesidebarV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
+@import url("./components/tagV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");

react/css/tailwind.config.js

@@ -126,7 +126,7 @@ module.exports = {
  "alert-errorbg": "#FFF5F4",
  "alert-success": "#00703C",
  "alert-successbg": "#F1FFF8",
- "alert-warning": "#EA8D00",
+ "alert-warning": "#9E5F00",
  "alert-warning-bg": "#FFF9F0",
  "alert-info": "#0057BD",
  "alert-infobg": "#DEEFFF",

react/example/package.json

@@ -10,7 +10,7 @@
  "build": "webpack --mode production"
  },
  "dependencies": {
- "@egovernments/digit-ui-components": "0.0.2-beta.20",
+ "@egovernments/digit-ui-components": "0.0.2-beta.21",
  "@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",

react/example/public/index.html

@@ -9,7 +9,7 @@
  rel='stylesheet' type='text/css'>
  <link
  rel="stylesheet"
- href="https://unpkg.com/@egovernments/[email protected].19/dist/index.css"
+ href="https://unpkg.com/@egovernments/[email protected].20/dist/index.css"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#00bcd1" />

react/modules/Project/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.20",
+ "@egovernments/digit-ui-components": "0.0.2-beta.21",
  "lodash": "^4.17.21",
  "react": "17.0.2",
  "react-date-range": "^1.4.0",

react/modules/core/package.json

@@ -14,7 +14,7 @@
  "prepublish": "yarn build"
  },
  "dependencies": {
- "@egovernments/digit-ui-components": "0.0.2-beta.20",
+ "@egovernments/digit-ui-components": "0.0.2-beta.21",
  "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
  "react": "17.0.2",
  "react-dom": "17.0.2",

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.20",
+ "@egovernments/digit-ui-components": "0.0.2-beta.21",
  "react": "17.0.2",
  "react-date-range": "^1.4.0",
  "react-dom": "17.0.2",

react/package.json

@@ -79,13 +79,13 @@
  "@babel/plugin-syntax-jsx": "^7.24.1",
  "@babel/preset-react": "^7.24.1",
  "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
- "@egovernments/digit-ui-components-css":"0.0.2-beta.19",
+ "@egovernments/digit-ui-components-css":"0.0.2-beta.20",
  "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
  "@egovernments/digit-ui-module-project": "0.3.4",
  "@egovernments/digit-ui-module-sample": "0.0.1",
  "@egovernments/digit-ui-react-components": "1.7.10",
  "@egovernments/digit-ui-svg-components": "1.0.4",
- "@egovernments/digit-ui-components": "0.0.2-beta.20",
+ "@egovernments/digit-ui-components": "0.0.2-beta.21",
  "babel-loader": "8.1.0",
  "clean-webpack-plugin": "4.0.0",
  "css-loader": "5.2.6",

react/ui-components/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.2-beta.21] - 2024-08-02
+### New Changes
+- Added Tag Component
+
 ## [0.0.2-beta.20] - 2024-07-30
 ### New Changes
 - Added Error State for Timeline, SelectionCard Component

react/ui-components/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-components",
- "version": "0.0.2-beta.20",
+ "version": "0.0.2-beta.21",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
  "dist"
  ],
  "dependencies": {
- "@egovernments/digit-ui-components-css": "0.0.2-beta.19",
+ "@egovernments/digit-ui-components-css": "0.0.2-beta.20",
  "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
  "@egovernments/digit-ui-svg-components": "1.0.4",
  "@googlemaps/js-api-loader": "1.13.10",

react/ui-components/src/atoms/Button.js

@@ -2,7 +2,8 @@ import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import StringManipulator from "./StringManipulator";
 import Menu from "./Menu";
-import { Colors} from "../constants/colors/colorconstants";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
 
 const Button = (props) => {
  const [dropdownStatus, setDropdownStatus] = useState(false);
@@ -76,28 +77,15 @@ const Button = (props) => {
  width = "1.5rem";
  height = "1.5rem";
  }
-
- try {
- const components = require("@egovernments/digit-ui-svg-components");
- const DynamicIcon = components?.[iconReq];
- if (DynamicIcon) {
- const svgElement = DynamicIcon({
- width: width,
- height: height,
- fill: iconFill,
- className: `digit-button-customIcon ${
- props?.size ? props?.size : ""
- } ${props?.variation ? props?.variation : ""} `,
- });
- return svgElement;
- } else {
- console.log("Icon not found");
- return null;
- }
- } catch (error) {
- console.error("Icon not found");
- return null;
- }
+ return iconRender(
+ iconReq,
+ iconFill,
+ width,
+ height,
+ `digit-button-customIcon ${props?.size ? props?.size : ""} ${
+ props?.variation ? props?.variation : ""
+ }`
+ );
  };
 
  const icon = IconRender();
@@ -129,7 +117,7 @@ const Button = (props) => {
  form={props.formId}
  onClick={
  props?.type === "actionButton"
- ? (e)=> handleActionButtonClick(e)
+ ? (e) => handleActionButtonClick(e)
  : props?.onClick
  }
  disabled={props?.isDisabled || null}

react/ui-components/src/atoms/Chip.js

@@ -40,11 +40,18 @@ const Chip = ({
  onClick={disabled ? null : onClick}
  className={`close-icon ${disabled ? "disabled" : ""}`}
  >
- <SVG.Close fill={IconColor} className="close" style={closeIconStyles} />
+ <SVG.Close
+ fill={IconColor}
+ className="close"
+ style={closeIconStyles}
+ />
  </span>
  </div>
- <div className={`${onErrorClick ? "cp" : "nonclickable"}`} onClick={onErrorClick}>
- {error && (
+ {error && (
+ <div
+ className={`${onErrorClick ? "cp" : "nonclickable"}`}
+ onClick={onErrorClick}
+ >
  <ErrorMessage
  message={error}
  truncateMessage={true}
@@ -53,8 +60,8 @@ const Chip = ({
  wrapperClassName="digit-tag-error"
  showIcon={true}
  />
- )}
- </div>
+ </div>
+ )}
  </div>
  );
 };

react/ui-components/src/atoms/Dropdown.js

@@ -5,6 +5,7 @@ import TreeSelect from "./TreeSelect";
 import { ProfileIcon } from "./svgindex";
 import Menu from "./Menu";
 import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
 
 const TextField = (props) => {
  const [value, setValue] = useState(
@@ -247,25 +248,13 @@ const Dropdown = (props) => {
 
  const IconRender = (iconReq, isActive) => {
  const iconFill = isActive ? primaryColor : inputBorderColor;
- try {
- const components = require("@egovernments/digit-ui-svg-components");
- const DynamicIcon = components?.[iconReq];
- if (DynamicIcon) {
- const svgElement = DynamicIcon({
- width: "1.25rem",
- height: "1.25rem",
- fill: iconFill,
- className: "",
- });
- return svgElement;
- } else {
- console.log("Icon not found");
- return null;
- }
- } catch (error) {
- console.error("Icon not found");
- return null;
- }
+ return iconRender(
+ iconReq,
+ iconFill,
+ "1.25rem",
+ "1.25rem",
+ ""
+ );
  };
 
  const flattenOptions = (options) => {