igniteui-cli 15.2.2-alpha.3 → 15.3.0

package/templates/react/igr-ts/banner/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrBannerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrBannerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Banner";
         this.description = "basic IgrBanner";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrBannerTemplate();

package/templates/react/igr-ts/button/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Button";
         this.description = "displays a button with customizable size and content.";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrButtonTemplate();

package/templates/react/igr-ts/button-group/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrButtonGroupTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrButtonGroupTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReact
         this.projectType = "igr-ts";
         this.name = "Button group";
         this.description = "basic IgrButtonGroup";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrButtonGroupTemplate();

package/templates/react/igr-ts/calendar/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCalendarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCalendarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Calendar";
         this.description = "basic IgrCalendar";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCalendarTemplate();

package/templates/react/igr-ts/card/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCardTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCardTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Card";
         this.description = "basic IgrCard";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCardTemplate();

package/templates/react/igr-ts/checkbox/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCheckboxTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCheckboxTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Checkbox";
         this.description = "basic IgrCheckbox";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCheckboxTemplate();

package/templates/react/igr-ts/chip/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrChipTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrChipTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Chip";
         this.description = "basic IgrChip";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrChipTemplate();

package/templates/react/igr-ts/circular-progress/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCircularProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCircularProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIFor
         this.projectType = "igr-ts";
         this.name = "Circular Progress";
         this.description = "basic IgrCircularProgress";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCircularProgressTemplate();

package/templates/react/igr-ts/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const IGNITEUI_REACT_PACKAGE = "igniteui-react@~19.7.0";
+export declare const IGNITEUI_REACT_GRIDS_PACKAGE = "igniteui-react-grids@~19.7.0";

package/templates/react/igr-ts/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IGNITEUI_REACT_GRIDS_PACKAGE = exports.IGNITEUI_REACT_PACKAGE = void 0;
+exports.IGNITEUI_REACT_PACKAGE = "igniteui-react@~19.7.0";
+exports.IGNITEUI_REACT_GRIDS_PACKAGE = "igniteui-react-grids@~19.7.0";

package/templates/react/igr-ts/custom-templates/subscription-form/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrSubscriptionFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -10,7 +11,7 @@ class IgrSubscriptionFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIFor
         this.projectType = "igr-ts";
         this.name = "Subscription Form";
         this.description = "Subscription form with inputs, buttons and a checkbox inside";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrSubscriptionFormTemplate();

package/templates/react/igr-ts/date-picker/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrDatePickerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrDatePickerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.projectType = "igr-ts";
         this.name = "Date Picker";
         this.description = "basic IgrDatePicker";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrDatePickerTemplate();

package/templates/react/igr-ts/divider/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrDividerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrDividerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemp
         this.projectType = "igr-ts";
         this.name = "Divider";
         this.description = "basic IgrDivider";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrDividerTemplate();

package/templates/react/igr-ts/dropdown/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrDropdownTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrDropdownTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Dropdown";
         this.description = "basic IgrDropdown";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrDropdownTemplate();

package/templates/react/igr-ts/expansion-panel/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrExpansionPanelTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrExpansionPanelTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRe
         this.projectType = "igr-ts";
         this.name = "Expansion Panel";
         this.description = "basic IgrExpansionPanel";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrExpansionPanelTemplate();

package/templates/react/igr-ts/form/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Form";
         this.description = "basic IgrForm";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrFormTemplate();

package/templates/react/igr-ts/grid/basic/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     /**
      *
@@ -14,7 +15,7 @@ class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
         this.projectType = "igr-ts";
         this.components = ["Grid"];
         this.controlGroup = "Data Grids";
-        this.packages = ["igniteui-react-grids@~19.6.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_GRIDS_PACKAGE];
         this.hasExtraConfiguration = false;
     }
 }

package/templates/react/igr-ts/icon/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrIconTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrIconTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Icon";
         this.description = "basic IgrIcon";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrIconTemplate();

package/templates/react/igr-ts/icon-button/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrIconButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrIconButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.projectType = "igr-ts";
         this.name = "Icon button";
         this.description = "basic IgrIconButton";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrIconButtonTemplate();

package/templates/react/igr-ts/input/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrInputTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrInputTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempla
         this.projectType = "igr-ts";
         this.name = "Input";
         this.description = "basic IgrInput";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrInputTemplate();

package/templates/react/igr-ts/linear-progress/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrLinearProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrLinearProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRe
         this.projectType = "igr-ts";
         this.name = "Linear Progress";
         this.description = "basic IgrLinearProgress";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrLinearProgressTemplate();

package/templates/react/igr-ts/list/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrListTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrListTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "List";
         this.description = "basic IgrList";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrListTemplate();

package/templates/react/igr-ts/navbar/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrNavbarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrNavbarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Navbar";
         this.description = "basic IgrNavbar";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrNavbarTemplate();

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -13,9 +13,10 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@igniteui/material-icons-extended": "^3.0.2",
     "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
-    "igniteui-react": "~19.6.2",
+    "igniteui-react": "~19.7.0",
     "react": "^19.2.4",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^19.2.4",

package/templates/react/igr-ts/projects/_base/files/src/app/app.tsx

@@ -3,6 +3,8 @@ import { Outlet } from "react-router-dom";
 export default function App() {
 
   return (
-    <Outlet />
-  )
+    <div className="outer-wrapper">
+      <Outlet />
+    </div>
+  );
 }

package/templates/react/igr-ts/projects/_base/files/src/setupTests.ts

@@ -4,6 +4,18 @@ import ResizeObserver from 'resize-observer-polyfill';
 export function setupTestMocks() {
   globalThis.ResizeObserver = ResizeObserver;
 
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
   HTMLElement.prototype.scrollIntoView = vi.fn();
   HTMLElement.prototype.hidePopover = vi.fn();
   HTMLElement.prototype.showPopover = vi.fn();

package/templates/react/igr-ts/projects/_base/files/styles.css

@@ -14,6 +14,12 @@ html, body, #root {
   height: 100%;
 }
 
+.outer-wrapper {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
 /* minor CSS reset */
 body, h1, h2, h3, h4, h5, h6, p {
   margin: 0;

package/templates/react/igr-ts/projects/_base_with_home/files/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>IgniteUI for React</title>
+    <title>Ignite UI for React</title>
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
     <link rel="stylesheet" href="./styles.css">
   </head>
   <body>

package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx

@@ -1,24 +1,74 @@
 import logo from "/logo.svg";
+import { github } from "@igniteui/material-icons-extended";
+import { IgrIcon, registerIconFromText } from "igniteui-react";
 import styles from "./style.module.css";
 
-export default function App() {
-  const name = '$(name)';
+registerIconFromText(github.name, github.value, "imx-icons");
 
+export default function App() {
   return (
-    <div className="app">
-      <div className={styles.app__name}>{name}</div>
-      <header className={styles.header}>
-        <img src={logo} className={styles.logo} alt="logo" />
-        <p>Welcome to Ignite UI for React!</p>
+    <main className={styles.content}>
+      <h1 className={styles.header}>Welcome to Ignite UI for React!</h1>
+      <h4 className={styles.subject}>
+        A complete library of 50+ UI components for building modern web applications with reusable React components.
+      </h4>
+      <img src={logo} className={styles.logo} alt="Ignite UI for React" />
+
+      <p className={styles.subtitle}>Discover more at</p>
+      <p>
         <a
           className={styles.link}
           target="_blank"
           href="https://www.infragistics.com/products/ignite-ui-react"
           rel="noopener noreferrer"
         >
-          Learn More
+          www.infragistics.com/products/ignite-ui-react
+        </a>
+      </p>
+      <p>
+        <a
+          className={styles.link}
+          target="_blank"
+          href="https://www.infragistics.com/products/indigo-design"
+          rel="noopener noreferrer"
+        >
+          www.infragistics.com/products/indigo-design
         </a>
-      </header>
-    </div>
+      </p>
+
+      <p className={styles.subtitle}>We are also on GitHub</p>
+      <p className={styles.githubLinks}>
+        <span className={styles.githubItem}>
+          <IgrIcon
+            className={styles.githubIcon}
+            name="github"
+            collection="imx-icons"
+          />
+          <a
+            className={styles.githubLink}
+            target="_blank"
+            href="https://github.com/IgniteUI/igniteui-react"
+            rel="noopener noreferrer"
+          >
+            Ignite UI for React
+          </a>
+        </span>
+        <span className={styles.githubItem}>
+          <IgrIcon
+            className={styles.githubIcon}
+            name="github"
+            collection="imx-icons"
+          />
+          <a
+            className={styles.githubLink}
+            target="_blank"
+            href="https://github.com/IgniteUI/igniteui-cli"
+            rel="noopener noreferrer"
+          >
+            Ignite UI CLI
+          </a>
+        </span>
+      </p>
+    </main>
   );
 }

package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css

@@ -1,36 +1,95 @@
-:local(.logo) {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
+:local(.content) {
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+  color: #000;
 }
 
 :local(.header) {
-  padding-top: 5em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: #333;
+  color: #09f;
+  font-size: 80px;
+  font-weight: 300;
+  line-height: 1.2;
+  margin: 0 0 16px;
+}
+
+:local(.subject) {
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0 0 32px;
+  max-width: 1120px;
+}
+
+:local(.logo) {
+  display: block;
+  margin-bottom: 32px;
+  width: 500px;
+  height: 350px;
+  max-width: 100%;
+  object-fit: contain;
 }
 
 :local(.link) {
-  color: #61dafb;
+  font-size: 16px;
+}
+
+:local(.subtitle) {
+  font-size: 16px;
+  margin: 16px 0 8px;
+}
+
+:local(.content) p:nth-last-child(2) {
+  padding-top: 16px;
 }
 
-:local(.app__name) {
-  padding-top: 1em;
+:local(.githubLinks) {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  gap: 24px;
+  margin: 0;
+}
+
+:local(.githubItem) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+:local(.githubLink) {
+  font-size: 16px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+:local(.githubIcon) {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  flex: 0 0 24px;
+  display: block;
+}
+
+:local(.content) p {
+  margin: 0 0 8px;
+}
+
+@media (max-width: 768px) {
+  :local(.header) {
+    font-size: 40px;
   }
-  to {
-    transform: rotate(360deg);
+
+  :local(.subject) {
+    font-size: 20px;
+  }
+
+  :local(.logo) {
+    width: 100%;
+    height: 240px;
   }
 }