@openmrs/esm-styleguide 9.0.3-pre.4788 → 9.0.3-pre.4809

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 123 files, copied 164 files with swc (279.96ms)
+[0] Successfully compiled: 123 files, copied 164 files with swc (210.35ms)
 [0] swc --strip-leading-paths --copy-files src -d dist && svgo -rf dist --quiet exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/empty-card/empty-card.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-card.component.d.ts","sourceRoot":"","sources":["../../src/empty-card/empty-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,cAAc;IAC7B,oHAAoH;IACpH,WAAW,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,WAAW,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,qBAAqB,GAAI;;;CAA+B,sBAMpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0B9C,CAAC"}
+{"version":3,"file":"empty-card.component.d.ts","sourceRoot":"","sources":["../../src/empty-card/empty-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,cAAc;IAC7B,oHAAoH;IACpH,WAAW,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,WAAW,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,qBAAqB,GAAI;;;CAA+B,sBAMpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4B9C,CAAC"}

package/dist/empty-card/empty-card.component.js

@@ -3,7 +3,6 @@ import React from "react";
 import { Button, Layer, Tile } from "@carbon/react";
 import { useLayoutType } from "@openmrs/esm-react-utils";
 import { getCoreTranslation } from "@openmrs/esm-translations";
-import { CardHeader } from "../cards/index.js";
 import styles from "./empty-card.module.scss";
 export const EmptyCardIllustration = ({ width = '64', height = '64' })=>{
     return /*#__PURE__*/ _jsx("svg", {
@@ -25,8 +24,11 @@ export const EmptyCardIllustration = ({ width = '64', height = '64' })=>{
         children: /*#__PURE__*/ _jsxs(Tile, {
             className: styles.tile,
             children: [
-                /*#__PURE__*/ _jsx(CardHeader, {
-                    title: props.headerTitle
+                /*#__PURE__*/ _jsx("div", {
+                    className: isTablet ? styles.tabletHeading : styles.desktopHeading,
+                    children: /*#__PURE__*/ _jsx("h4", {
+                        children: props.headerTitle
+                    })
                 }),
                 /*#__PURE__*/ _jsx(EmptyCardIllustration, {}),
                 /*#__PURE__*/ _jsx("p", {

package/dist/empty-card/empty-card.module.scss

@@ -13,12 +13,32 @@
   margin-bottom: layout.$spacing-03;
 }
 
-.heading:after {
-  content: '';
-  display: block;
-  width: layout.$spacing-07;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid var(--brand-03);
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
 }
 
 .tile {

package/dist/error-state/error-state.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-state.component.d.ts","sourceRoot":"","sources":["../../src/error-state/error-state.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,eAAe;IAC9B,kGAAkG;IAClG,KAAK,EAAE,GAAG,CAAC;IACX,uFAAuF;IACvF,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAahD,CAAC;AAEF,eAAO,MAAM,SAAS,2BAAa,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC"}
+{"version":3,"file":"error-state.component.d.ts","sourceRoot":"","sources":["../../src/error-state/error-state.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,eAAe;IAC9B,kGAAkG;IAClG,KAAK,EAAE,GAAG,CAAC;IACX,uFAAuF;IACvF,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiBhD,CAAC;AAEF,eAAO,MAAM,SAAS,2BAAa,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC"}

package/dist/error-state/error-state.component.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Layer, Tile } from "@carbon/react";
+import { useLayoutType } from "@openmrs/esm-react-utils";
 import { getCoreTranslation } from "@openmrs/esm-translations";
 import styles from "./error-state.module.scss";
-import { CardHeader } from "../cards/index.js";
 export const ErrorState = ({ error, headerTitle })=>{
+    const isTablet = useLayoutType() === 'tablet';
     return /*#__PURE__*/ _jsx(Layer, {
         children: /*#__PURE__*/ _jsxs(Tile, {
             className: styles.tile,
             children: [
-                /*#__PURE__*/ _jsx(CardHeader, {
-                    title: headerTitle
+                /*#__PURE__*/ _jsx("div", {
+                    className: isTablet ? styles.tabletHeading : styles.desktopHeading,
+                    children: /*#__PURE__*/ _jsx("h4", {
+                        children: headerTitle
+                    })
                 }),
                 /*#__PURE__*/ _jsxs("p", {
                     className: styles.errorMessage,

package/dist/error-state/error-state.module.scss

@@ -15,6 +15,34 @@
   color: $text-02;
 }
 
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
 .tile {
   text-align: center;
   border: 1px solid $ui-03;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "9.0.3-pre.4788",
+  "version": "9.0.3-pre.4809",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "module": "dist/internal.js",
@@ -98,18 +98,18 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "9.0.3-pre.4788",
-    "@openmrs/esm-config": "9.0.3-pre.4788",
-    "@openmrs/esm-emr-api": "9.0.3-pre.4788",
-    "@openmrs/esm-error-handling": "9.0.3-pre.4788",
-    "@openmrs/esm-extensions": "9.0.3-pre.4788",
-    "@openmrs/esm-globals": "9.0.3-pre.4788",
-    "@openmrs/esm-navigation": "9.0.3-pre.4788",
-    "@openmrs/esm-react-utils": "9.0.3-pre.4788",
-    "@openmrs/esm-routes": "9.0.3-pre.4788",
-    "@openmrs/esm-state": "9.0.3-pre.4788",
-    "@openmrs/esm-translations": "9.0.3-pre.4788",
-    "@openmrs/esm-utils": "9.0.3-pre.4788",
+    "@openmrs/esm-api": "9.0.3-pre.4809",
+    "@openmrs/esm-config": "9.0.3-pre.4809",
+    "@openmrs/esm-emr-api": "9.0.3-pre.4809",
+    "@openmrs/esm-error-handling": "9.0.3-pre.4809",
+    "@openmrs/esm-extensions": "9.0.3-pre.4809",
+    "@openmrs/esm-globals": "9.0.3-pre.4809",
+    "@openmrs/esm-navigation": "9.0.3-pre.4809",
+    "@openmrs/esm-react-utils": "9.0.3-pre.4809",
+    "@openmrs/esm-routes": "9.0.3-pre.4809",
+    "@openmrs/esm-state": "9.0.3-pre.4809",
+    "@openmrs/esm-translations": "9.0.3-pre.4809",
+    "@openmrs/esm-utils": "9.0.3-pre.4809",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@types/geopattern": "^1.2.9",

package/src/empty-card/empty-card.component.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Button, Layer, Tile } from '@carbon/react';
 import { useLayoutType } from '@openmrs/esm-react-utils';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import { CardHeader } from '../cards';
 import styles from './empty-card.module.scss';
 
 export interface EmptyCardProps {
@@ -32,7 +31,9 @@ export const EmptyCard: React.FC<EmptyCardProps> = (props) => {
   return (
     <Layer className={styles.layer}>
       <Tile className={styles.tile}>
-        <CardHeader title={props.headerTitle} />
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{props.headerTitle}</h4>
+        </div>
         <EmptyCardIllustration />
         <p className={styles.content}>
           {getCoreTranslation('emptyStateText', 'There are no {{displayText}} to display', {

package/src/empty-card/empty-card.module.scss

@@ -13,12 +13,32 @@
   margin-bottom: layout.$spacing-03;
 }
 
-.heading:after {
-  content: '';
-  display: block;
-  width: layout.$spacing-07;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid var(--brand-03);
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
 }
 
 .tile {

package/src/error-state/error-state.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Layer, Tile } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-react-utils';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import styles from './error-state.module.scss';
-import { CardHeader } from '../cards';
 
 export interface ErrorStateProps {
   /** The error that caused this error card to be rendered. Expected to be a failed fetch result. */
@@ -12,10 +12,14 @@ export interface ErrorStateProps {
 }
 
 export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
+  const isTablet = useLayoutType() === 'tablet';
+
   return (
     <Layer>
       <Tile className={styles.tile}>
-        <CardHeader title={headerTitle} />
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{headerTitle}</h4>
+        </div>
         <p className={styles.errorMessage}>
           {getCoreTranslation('error', 'Error')} {`${error?.response?.status}: `}
           {error?.response?.statusText}

package/src/error-state/error-state.module.scss

@@ -15,6 +15,34 @@
   color: $text-02;
 }
 
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
 .tile {
   text-align: center;
   border: 1px solid $ui-03;

package/src/error-state/error-state.test.tsx

@@ -31,7 +31,7 @@ describe('ErrorState', () => {
 
     render(<ErrorState headerTitle="test" error={{}} />);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('tabletHeader');
+    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('tabletHeading');
   });
 
   it('should render desktop layout when layout type is not tablet', () => {
@@ -39,7 +39,7 @@ describe('ErrorState', () => {
 
     render(<ErrorState headerTitle="test" error={{}} />);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('desktopHeader');
+    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('desktopHeading');
   });
 
   it('should handle error with partial response data', () => {