@egov3/system-design 1.3.155 → 1.3.156

package/dist/cjs/components/ServiceCardComponent/ServiceCardComponent.module.css.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css_248z = ".ServiceCardComponent-module_popularServiceCard__PSpZk {\n  position: relative;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  background: var(--surface-surface-1);\n  text-align: left;\n  color: var(--text-primary);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk:hover {\n  background: var(--surface-surface-3-color);\n}\n\n@media (min-width: 768px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--tablet) - 8px);\n  }\n}\n\n@media (min-width: 1024px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--labtop) - 8px);\n  }\n}\n\n@media (min-width: 1440px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--desktop) - 8px);\n  }\n}\n\n.ServiceCardComponent-module_TopServicesIconWrapper__Zj57c {\n  background: var(--text-white-nonconvert-color);\n  width: 48px;\n  height: 48px;\n  border-radius: 32px;\n  display: inline-block;\n}\n\n.ServiceCardComponent-module_TopServicesCardText__kvXXg {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-top: 12px;\n}\n\n.ServiceCardComponent-module_tagNew__ZXAN5 {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--leaf);\n  text-align: center;\n  border-radius: 20px;\n  font-weight: 600;\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_tagsBackground__-jLWc {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n  background-color: var(--page-color-background-white);\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_category__ddt6j {\n  width: 12px;\n}\n\n.ServiceCardComponent-module_subcategory__gU--u {\n  padding: 12px;\n}\n";
-var styles = {"popularServiceCard":"ServiceCardComponent-module_popularServiceCard__PSpZk","TopServicesIconWrapper":"ServiceCardComponent-module_TopServicesIconWrapper__Zj57c","TopServicesCardText":"ServiceCardComponent-module_TopServicesCardText__kvXXg","tagNew":"ServiceCardComponent-module_tagNew__ZXAN5","tagsBackground":"ServiceCardComponent-module_tagsBackground__-jLWc","category":"ServiceCardComponent-module_category__ddt6j","subcategory":"ServiceCardComponent-module_subcategory__gU--u"};
+var css_248z = ".ServiceCardComponent-module_popularServiceCard__PSpZk {\n  position: relative;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  background: var(--surface-surface-1);\n  text-align: left;\n  color: var(--text-primary);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk:hover {\n  background: var(--surface-surface-3-color);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk.ServiceCardComponent-module_mobile__EgbOw {\n  background: var(--surface-surface-2);\n  box-shadow: 0px 12px 32px 0px rgba(128, 130, 136, 0.12);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk.ServiceCardComponent-module_mobile__EgbOw:hover {\n  background: var(--surface-surface-2);\n}\n\n@media (min-width: 768px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--tablet) - 8px);\n  }\n}\n\n@media (min-width: 1024px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--labtop) - 8px);\n  }\n}\n\n@media (min-width: 1440px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--desktop) - 8px);\n  }\n}\n\n.ServiceCardComponent-module_TopServicesIconWrapper__Zj57c {\n  background: var(--text-white-nonconvert-color);\n  width: 48px;\n  height: 48px;\n  border-radius: 32px;\n  display: inline-block;\n}\n\n.ServiceCardComponent-module_TopServicesIconWrapper__Zj57c.ServiceCardComponent-module_mobile__EgbOw {\n  background: var(--surface-surface-1);\n}\n\n.ServiceCardComponent-module_TopServicesCardText__kvXXg {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-top: 12px;\n}\n\n.ServiceCardComponent-module_tagNew__ZXAN5 {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--leaf);\n  text-align: center;\n  border-radius: 20px;\n  font-weight: 600;\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_tagsBackground__-jLWc {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n  background-color: var(--page-color-background-white);\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_category__ddt6j {\n  width: 12px;\n}\n\n.ServiceCardComponent-module_subcategory__gU--u {\n  padding: 12px;\n  box-sizing: content-box;\n}\n";
+var styles = {"popularServiceCard":"ServiceCardComponent-module_popularServiceCard__PSpZk","mobile":"ServiceCardComponent-module_mobile__EgbOw","TopServicesIconWrapper":"ServiceCardComponent-module_TopServicesIconWrapper__Zj57c","TopServicesCardText":"ServiceCardComponent-module_TopServicesCardText__kvXXg","tagNew":"ServiceCardComponent-module_tagNew__ZXAN5","tagsBackground":"ServiceCardComponent-module_tagsBackground__-jLWc","category":"ServiceCardComponent-module_category__ddt6j","subcategory":"ServiceCardComponent-module_subcategory__gU--u"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

package/dist/cjs/components/ServiceCardComponent/index.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../styles/colors.css.js');
+var joinClasses = require('../../utils/joinClasses.js');
 require('../../baseComponents/Accordion/Accordion.module.css.js');
 require('@egov3/graphics/General/Close');
 require('../../baseComponents/Overlay/Overlay.module.css.js');
@@ -37,12 +38,15 @@ require('../../baseComponents/TabButtons/TabButtons.module.css.js');
 require('../../baseComponents/TextareaField/index.js');
 var ServiceCardComponent_module = require('./ServiceCardComponent.module.css.js');
 
-const ServiceCardComponent = ({ handleOrderService, badge, isNew, title, }) => (jsxRuntime.jsxs("button", { "data-testid": "ServiceCardComponent_BUTTON", onClick: handleOrderService, className: ServiceCardComponent_module.default.popularServiceCard, type: "button", children: [jsxRuntime.jsx("div", { "data-testid": "ServiceCardComponent_WRAPPER", className: ServiceCardComponent_module.default.TopServicesIconWrapper, children: badge.subcategory &&
-                React.cloneElement(badge.subcategory.icon, {
-                    className: ServiceCardComponent_module.default.subcategory,
-                }) }), isNew ? (jsxRuntime.jsx(index.Typography, { "data-testid": "ServiceCardComponent_NEW", tag: "span", className: ServiceCardComponent_module.default.tagNew, fontClass: "caption2Semibold", children: "NEW" })) : (jsxRuntime.jsx("div", { "data-testid": "ServiceCardComponent_CATEGORY", className: ServiceCardComponent_module.default.tagsBackground, children: React.cloneElement(badge.category.icon, {
-                className: ServiceCardComponent_module.default.category,
-            }) })), jsxRuntime.jsx(index.Typography, { "aria-label": title, "data-testid": "ServiceCardComponent_LABEL", tag: "span", fontClass: "caption1Regular", className: ServiceCardComponent_module.default.TopServicesCardText, children: title })] }));
+const ServiceCardComponent = ({ handleOrderService, badge, isNew, title, variant = "default", }) => {
+    const isMobile = variant === "mobile";
+    return (jsxRuntime.jsxs("button", { "data-testid": "ServiceCardComponent_BUTTON", onClick: handleOrderService, className: joinClasses.joinClasses(ServiceCardComponent_module.default.popularServiceCard, isMobile && ServiceCardComponent_module.default.mobile), type: "button", children: [jsxRuntime.jsx("div", { "data-testid": "ServiceCardComponent_WRAPPER", className: joinClasses.joinClasses(ServiceCardComponent_module.default.TopServicesIconWrapper, isMobile && ServiceCardComponent_module.default.mobile), children: badge.subcategory &&
+                    React.cloneElement(badge.subcategory.icon, {
+                        className: ServiceCardComponent_module.default.subcategory,
+                    }) }), isNew ? (jsxRuntime.jsx(index.Typography, { "data-testid": "ServiceCardComponent_NEW", tag: "span", className: ServiceCardComponent_module.default.tagNew, fontClass: "caption2Semibold", children: "NEW" })) : (jsxRuntime.jsx("div", { "data-testid": "ServiceCardComponent_CATEGORY", className: ServiceCardComponent_module.default.tagsBackground, children: React.cloneElement(badge.category.icon, {
+                    className: ServiceCardComponent_module.default.category,
+                }) })), jsxRuntime.jsx(index.Typography, { "aria-label": title, "data-testid": "ServiceCardComponent_LABEL", tag: "span", fontClass: isMobile ? "body2Medium" : "caption1Regular", className: ServiceCardComponent_module.default.TopServicesCardText, children: title })] }));
+};
 
 exports.ServiceCardComponent = ServiceCardComponent;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/ServiceCardComponent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ServiceCardComponent/index.tsx"],"sourcesContent":[null],"names":["_jsxs","styles","_jsx","Typography"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,oBAAoB,GAAG,CAAC,EACnC,kBAAkB,EAClB,KAAK,EACL,KAAK,EACL,KAAK,GACsB,MAC3BA,eAAA,CAAA,QAAA,EAAA,EAAA,aAAA,EACc,6BAA6B,EACzC,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAEC,mCAAM,CAAC,kBAAkB,EACpC,IAAI,EAAC,QAAQ,EAAA,QAAA,EAAA,CAEbC,uCACc,8BAA8B,EAC1C,SAAS,EAAED,mCAAM,CAAC,sBAAsB,EAAA,QAAA,EAEvC,KAAK,CAAC,WAAW;gBAChB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;oBACzC,SAAS,EAAEA,mCAAM,CAAC,WAAW;iBAC9B,CAAC,EAAA,CACA,EACL,KAAK,IACJC,cAAA,CAACC,gBAAU,EAAA,EAAA,aAAA,EACG,0BAA0B,EACtC,GAAG,EAAC,MAAM,EACV,SAAS,EAAEF,mCAAM,CAAC,MAAM,EACxB,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjB,KAEbC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,+BAA+B,EAC3C,SAAS,EAAED,mCAAM,CAAC,cAAc,EAAA,QAAA,EAE/B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE;gBACvC,SAAS,EAAEA,mCAAM,CAAC,QAAQ;AAC3B,aAAA,CAAC,EAAA,CACE,CACP,EACDC,cAAA,CAACC,gBAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACL,4BAA4B,EACxC,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,iBAAiB,EAC3B,SAAS,EAAEF,mCAAM,CAAC,mBAAmB,EAAA,QAAA,EAEpC,KAAK,EAAA,CACK,CAAA,EAAA,CACN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ServiceCardComponent/index.tsx"],"sourcesContent":[null],"names":["_jsxs","joinClasses","styles","_jsx","cloneElement","Typography"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,oBAAoB,GAAG,CAAC,EACnC,kBAAkB,EAClB,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,GACQ,KAAI;AAC/B,IAAA,MAAM,QAAQ,GAAG,OAAO,KAAK,QAAQ;IAErC,QACEA,2CACc,6BAA6B,EACzC,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAEC,uBAAW,CACpBC,mCAAM,CAAC,kBAAkB,EACzB,QAAQ,IAAIA,mCAAM,CAAC,MAAM,CAC1B,EACD,IAAI,EAAC,QAAQ,aAEbC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,8BAA8B,EAC1C,SAAS,EAAEF,uBAAW,CACpBC,mCAAM,CAAC,sBAAsB,EAC7B,QAAQ,IAAIA,mCAAM,CAAC,MAAM,CAC1B,EAAA,QAAA,EAEA,KAAK,CAAC,WAAW;AAChB,oBAAAE,kBAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;wBACnC,SAAS,EAAEF,mCAAM,CAAC,WAAW;qBAC9B,CAAC,EAAA,CACA,EACL,KAAK,IACJC,eAACE,gBAAU,EAAA,EAAA,aAAA,EACG,0BAA0B,EACtC,GAAG,EAAC,MAAM,EACV,SAAS,EAAEH,mCAAM,CAAC,MAAM,EACxB,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjB,KAEbC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,+BAA+B,EAC3C,SAAS,EAAED,mCAAM,CAAC,cAAc,YAE/BE,kBAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE;oBACjC,SAAS,EAAEF,mCAAM,CAAC,QAAQ;AAC3B,iBAAA,CAAC,GACE,CACP,EACDC,cAAA,CAACE,gBAAU,kBACG,KAAK,EAAA,aAAA,EACL,4BAA4B,EACxC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,iBAAiB,EACvD,SAAS,EAAEH,mCAAM,CAAC,mBAAmB,EAAA,QAAA,EAEpC,KAAK,EAAA,CACK,CAAA,EAAA,CACN;AAEb;;;;"}

package/dist/esm/components/ServiceCardComponent/ServiceCardComponent.module.css.js

@@ -1,5 +1,5 @@
-var css_248z = ".ServiceCardComponent-module_popularServiceCard__PSpZk {\n  position: relative;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  background: var(--surface-surface-1);\n  text-align: left;\n  color: var(--text-primary);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk:hover {\n  background: var(--surface-surface-3-color);\n}\n\n@media (min-width: 768px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--tablet) - 8px);\n  }\n}\n\n@media (min-width: 1024px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--labtop) - 8px);\n  }\n}\n\n@media (min-width: 1440px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--desktop) - 8px);\n  }\n}\n\n.ServiceCardComponent-module_TopServicesIconWrapper__Zj57c {\n  background: var(--text-white-nonconvert-color);\n  width: 48px;\n  height: 48px;\n  border-radius: 32px;\n  display: inline-block;\n}\n\n.ServiceCardComponent-module_TopServicesCardText__kvXXg {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-top: 12px;\n}\n\n.ServiceCardComponent-module_tagNew__ZXAN5 {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--leaf);\n  text-align: center;\n  border-radius: 20px;\n  font-weight: 600;\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_tagsBackground__-jLWc {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n  background-color: var(--page-color-background-white);\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_category__ddt6j {\n  width: 12px;\n}\n\n.ServiceCardComponent-module_subcategory__gU--u {\n  padding: 12px;\n}\n";
-var styles = {"popularServiceCard":"ServiceCardComponent-module_popularServiceCard__PSpZk","TopServicesIconWrapper":"ServiceCardComponent-module_TopServicesIconWrapper__Zj57c","TopServicesCardText":"ServiceCardComponent-module_TopServicesCardText__kvXXg","tagNew":"ServiceCardComponent-module_tagNew__ZXAN5","tagsBackground":"ServiceCardComponent-module_tagsBackground__-jLWc","category":"ServiceCardComponent-module_category__ddt6j","subcategory":"ServiceCardComponent-module_subcategory__gU--u"};
+var css_248z = ".ServiceCardComponent-module_popularServiceCard__PSpZk {\n  position: relative;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  background: var(--surface-surface-1);\n  text-align: left;\n  color: var(--text-primary);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk:hover {\n  background: var(--surface-surface-3-color);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk.ServiceCardComponent-module_mobile__EgbOw {\n  background: var(--surface-surface-2);\n  box-shadow: 0px 12px 32px 0px rgba(128, 130, 136, 0.12);\n}\n\n.ServiceCardComponent-module_popularServiceCard__PSpZk.ServiceCardComponent-module_mobile__EgbOw:hover {\n  background: var(--surface-surface-2);\n}\n\n@media (min-width: 768px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--tablet) - 8px);\n  }\n}\n\n@media (min-width: 1024px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--labtop) - 8px);\n  }\n}\n\n@media (min-width: 1440px) {\n  .ServiceCardComponent-module_popularServiceCard__PSpZk {\n    flex-basis: calc(100% / var(--desktop) - 8px);\n  }\n}\n\n.ServiceCardComponent-module_TopServicesIconWrapper__Zj57c {\n  background: var(--text-white-nonconvert-color);\n  width: 48px;\n  height: 48px;\n  border-radius: 32px;\n  display: inline-block;\n}\n\n.ServiceCardComponent-module_TopServicesIconWrapper__Zj57c.ServiceCardComponent-module_mobile__EgbOw {\n  background: var(--surface-surface-1);\n}\n\n.ServiceCardComponent-module_TopServicesCardText__kvXXg {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-top: 12px;\n}\n\n.ServiceCardComponent-module_tagNew__ZXAN5 {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--leaf);\n  text-align: center;\n  border-radius: 20px;\n  font-weight: 600;\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_tagsBackground__-jLWc {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n  background-color: var(--page-color-background-white);\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);\n  position: absolute;\n  top: 8px;\n  right: 8px;\n}\n\n.ServiceCardComponent-module_category__ddt6j {\n  width: 12px;\n}\n\n.ServiceCardComponent-module_subcategory__gU--u {\n  padding: 12px;\n  box-sizing: content-box;\n}\n";
+var styles = {"popularServiceCard":"ServiceCardComponent-module_popularServiceCard__PSpZk","mobile":"ServiceCardComponent-module_mobile__EgbOw","TopServicesIconWrapper":"ServiceCardComponent-module_TopServicesIconWrapper__Zj57c","TopServicesCardText":"ServiceCardComponent-module_TopServicesCardText__kvXXg","tagNew":"ServiceCardComponent-module_tagNew__ZXAN5","tagsBackground":"ServiceCardComponent-module_tagsBackground__-jLWc","category":"ServiceCardComponent-module_category__ddt6j","subcategory":"ServiceCardComponent-module_subcategory__gU--u"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

package/dist/esm/components/ServiceCardComponent/index.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
+import { cloneElement } from 'react';
 import '../../styles/colors.css.js';
+import { joinClasses } from '../../utils/joinClasses.js';
 import '../../baseComponents/Accordion/Accordion.module.css.js';
 import '@egov3/graphics/General/Close';
 import '../../baseComponents/Overlay/Overlay.module.css.js';
@@ -35,12 +36,15 @@ import '../../baseComponents/TabButtons/TabButtons.module.css.js';
 import '../../baseComponents/TextareaField/index.js';
 import styles from './ServiceCardComponent.module.css.js';
 
-const ServiceCardComponent = ({ handleOrderService, badge, isNew, title, }) => (jsxs("button", { "data-testid": "ServiceCardComponent_BUTTON", onClick: handleOrderService, className: styles.popularServiceCard, type: "button", children: [jsx("div", { "data-testid": "ServiceCardComponent_WRAPPER", className: styles.TopServicesIconWrapper, children: badge.subcategory &&
-                React.cloneElement(badge.subcategory.icon, {
-                    className: styles.subcategory,
-                }) }), isNew ? (jsx(Typography, { "data-testid": "ServiceCardComponent_NEW", tag: "span", className: styles.tagNew, fontClass: "caption2Semibold", children: "NEW" })) : (jsx("div", { "data-testid": "ServiceCardComponent_CATEGORY", className: styles.tagsBackground, children: React.cloneElement(badge.category.icon, {
-                className: styles.category,
-            }) })), jsx(Typography, { "aria-label": title, "data-testid": "ServiceCardComponent_LABEL", tag: "span", fontClass: "caption1Regular", className: styles.TopServicesCardText, children: title })] }));
+const ServiceCardComponent = ({ handleOrderService, badge, isNew, title, variant = "default", }) => {
+    const isMobile = variant === "mobile";
+    return (jsxs("button", { "data-testid": "ServiceCardComponent_BUTTON", onClick: handleOrderService, className: joinClasses(styles.popularServiceCard, isMobile && styles.mobile), type: "button", children: [jsx("div", { "data-testid": "ServiceCardComponent_WRAPPER", className: joinClasses(styles.TopServicesIconWrapper, isMobile && styles.mobile), children: badge.subcategory &&
+                    cloneElement(badge.subcategory.icon, {
+                        className: styles.subcategory,
+                    }) }), isNew ? (jsx(Typography, { "data-testid": "ServiceCardComponent_NEW", tag: "span", className: styles.tagNew, fontClass: "caption2Semibold", children: "NEW" })) : (jsx("div", { "data-testid": "ServiceCardComponent_CATEGORY", className: styles.tagsBackground, children: cloneElement(badge.category.icon, {
+                    className: styles.category,
+                }) })), jsx(Typography, { "aria-label": title, "data-testid": "ServiceCardComponent_LABEL", tag: "span", fontClass: isMobile ? "body2Medium" : "caption1Regular", className: styles.TopServicesCardText, children: title })] }));
+};
 
 export { ServiceCardComponent };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/ServiceCardComponent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ServiceCardComponent/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,oBAAoB,GAAG,CAAC,EACnC,kBAAkB,EAClB,KAAK,EACL,KAAK,EACL,KAAK,GACsB,MAC3BA,IAAA,CAAA,QAAA,EAAA,EAAA,aAAA,EACc,6BAA6B,EACzC,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,MAAM,CAAC,kBAAkB,EACpC,IAAI,EAAC,QAAQ,EAAA,QAAA,EAAA,CAEbC,4BACc,8BAA8B,EAC1C,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EAEvC,KAAK,CAAC,WAAW;gBAChB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;oBACzC,SAAS,EAAE,MAAM,CAAC,WAAW;iBAC9B,CAAC,EAAA,CACA,EACL,KAAK,IACJA,GAAA,CAAC,UAAU,EAAA,EAAA,aAAA,EACG,0BAA0B,EACtC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjB,KAEbA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,+BAA+B,EAC3C,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,QAAA,EAE/B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE;gBACvC,SAAS,EAAE,MAAM,CAAC,QAAQ;AAC3B,aAAA,CAAC,EAAA,CACE,CACP,EACDA,GAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACL,4BAA4B,EACxC,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,iBAAiB,EAC3B,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAA,QAAA,EAEpC,KAAK,EAAA,CACK,CAAA,EAAA,CACN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ServiceCardComponent/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,oBAAoB,GAAG,CAAC,EACnC,kBAAkB,EAClB,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,GACQ,KAAI;AAC/B,IAAA,MAAM,QAAQ,GAAG,OAAO,KAAK,QAAQ;IAErC,QACEA,gCACc,6BAA6B,EACzC,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,WAAW,CACpB,MAAM,CAAC,kBAAkB,EACzB,QAAQ,IAAI,MAAM,CAAC,MAAM,CAC1B,EACD,IAAI,EAAC,QAAQ,aAEbC,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,8BAA8B,EAC1C,SAAS,EAAE,WAAW,CACpB,MAAM,CAAC,sBAAsB,EAC7B,QAAQ,IAAI,MAAM,CAAC,MAAM,CAC1B,EAAA,QAAA,EAEA,KAAK,CAAC,WAAW;AAChB,oBAAA,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;wBACnC,SAAS,EAAE,MAAM,CAAC,WAAW;qBAC9B,CAAC,EAAA,CACA,EACL,KAAK,IACJA,IAAC,UAAU,EAAA,EAAA,aAAA,EACG,0BAA0B,EACtC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjB,KAEbA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,+BAA+B,EAC3C,SAAS,EAAE,MAAM,CAAC,cAAc,YAE/B,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE;oBACjC,SAAS,EAAE,MAAM,CAAC,QAAQ;AAC3B,iBAAA,CAAC,GACE,CACP,EACDA,GAAA,CAAC,UAAU,kBACG,KAAK,EAAA,aAAA,EACL,4BAA4B,EACxC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,iBAAiB,EACvD,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAA,QAAA,EAEpC,KAAK,EAAA,CACK,CAAA,EAAA,CACN;AAEb;;;;"}

package/dist/types/components/ServiceCardComponent/index.d.ts

@@ -1,19 +1,6 @@
-import { JSX } from 'react';
+import * as react from 'react';
+import { IServiceCardComponentProps } from '../../interfaces/ServiceCardComponent.js';
 
-interface IServiceCardComponentProps {
-    handleOrderService: () => void;
-    title: string;
-    badge: {
-        category: {
-            icon: JSX.Element;
-        };
-        subcategory?: {
-            icon: JSX.Element;
-        };
-    };
-    isNew: boolean;
-}
-declare const ServiceCardComponent: ({ handleOrderService, badge, isNew, title, }: IServiceCardComponentProps) => JSX.Element;
+declare const ServiceCardComponent: ({ handleOrderService, badge, isNew, title, variant, }: IServiceCardComponentProps) => react.JSX.Element;
 
 export { ServiceCardComponent };
-export type { IServiceCardComponentProps };

package/dist/types/index.d.ts

@@ -40,11 +40,12 @@ export { IIconToggleItemProps, IconToggleItem } from './components/Profile/IconT
 export { IProfileHealthGeneral, ProfileHealthGeneral } from './components/Profile/ProfileHealthGeneral/index.js';
 export { IRightMenuSectionItemProps, RightMenuSectionItem } from './components/Profile/RightMenuSectionItem/index.js';
 export { ISetUpAccessProps, SetUpAccess } from './components/Profile/SetUpAccess/index.js';
-export { IServiceCardComponentProps, ServiceCardComponent } from './components/ServiceCardComponent/index.js';
+export { ServiceCardComponent } from './components/ServiceCardComponent/index.js';
 export { Feedback, IFeedbackProps } from './components/Services/Feedback/index.js';
 export { FileForUpload, IFileForUploadProps } from './components/Services/FileForUpload/index.js';
 export { INextStepComponentProps, NextStepComponent } from './components/Services/NextStepComponent/index.js';
 export { ICalendarDayCell, ICalendarPeriod, IDateItem, IPeriodKeys, ISelectedPeriod, IStrictSelectedPeriod, TCalendarMode, TPeriodKeys, TTimeUnit } from './interfaces/Calendar.js';
 export { IHTMLAttributesDataProps, ILangGeneric, ILangProps, TPageOwner } from './interfaces/common/index.js';
 export { INotificationData, TNotificationType } from './interfaces/Notification.js';
+export { IServiceCardComponentProps, TServiceCardVariant } from './interfaces/ServiceCardComponent.js';
 export { IStatusStepItem, IStatusStepperProps, TStatusStepIcon, TStatusStepState } from './interfaces/StatusStepper.js';

package/dist/types/interfaces/ServiceCardComponent.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+
+type TServiceCardVariant = "default" | "mobile";
+interface IServiceCardComponentProps {
+    handleOrderService: () => void;
+    title: string;
+    badge: {
+        category: {
+            icon: JSX.Element;
+        };
+        subcategory?: {
+            icon: JSX.Element;
+        };
+    };
+    isNew: boolean;
+    variant?: TServiceCardVariant;
+}
+
+export type { IServiceCardComponentProps, TServiceCardVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.3.155",
+  "version": "1.3.156",
   "type": "module",
   "main": "dist/cjs/index.js",
   "types": "dist/types/index.d.ts",