feat(card): update card samples for new documentation

browser/package.json

@@ -70,6 +70,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
+    "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser": "^3.2.4",
     "browser-sync": "^3.0.4",
@@ -103,6 +104,7 @@
     "tailwindcss": "^4.3.3",
     "ts-loader": "^9.5.4",
     "ts-node": "^10.9.2",
+    "tailwindcss": "^4.3.3",
     "typescript": "^4.8.4",
     "vite": "^7.1.9",
     "vite-tsconfig-paths": "^5.1.4",

browser/src/index.css

@@ -1,3 +1,6 @@
+@import "tailwindcss/utilities.css" layer(utilities);
+@source "./samples/**/*.{ts,tsx,js,jsx}";
+
 #root,
 html,
 body,

samples/layouts/card/actions/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}

samples/layouts/card/actions/.eslintrc.js

@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };

samples/layouts/card/actions/README.md

@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Actions feature using [Card](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/card/actions" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/card/actions?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/card/actions
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).

samples/layouts/card/actions/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>CardStyling</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/layouts/card/actions/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-card-actions",
+  "description": "This project provides example of Card Actions using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^1.17.0",
+    "igniteui-react": "19.7.0",
+    "igniteui-react-core": "19.6.0",
+    "igniteui-webcomponents": "^7.2.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

samples/layouts/card/actions/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 

samples/layouts/card/actions/src/icons.ts

@@ -0,0 +1,14 @@
+export const bookmarkIcon =
+  "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'><path d='M200-120v-720h560v720L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Z'/></svg>";
+
+export const shareIcon =
+  "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'><path d='M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Z'/></svg>";
+
+export const scheduleIcon =
+  "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'><path d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/></svg>";
+
+export const visibilityIcon =
+  "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'><path d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Z'/></svg>";
+
+export const moreIcon =
+  "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'><path d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/></svg>";

samples/layouts/card/actions/src/index.css

@@ -0,0 +1,41 @@
+.actions-sample {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    justify-content: center;
+    padding: 24px;
+}
+
+.actions-card {
+    width: min(360px, 100%);
+}
+
+.actions-card.rail-card {
+    width: min(360px, 100%);
+}
+
+.icon-actions {
+    display: flex;
+    gap: 8px;
+}
+
+igc-card-content p {
+    margin: 0;
+}
+
+.rail-layout {
+    align-items: stretch;
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr auto;
+}
+
+.action-rail {
+    align-items: center;
+    border-left: 1px solid var(--ig-gray-300);
+    gap: 12px;
+    justify-content: center;
+    padding-inline-start: 12px;
+}

samples/layouts/card/actions/src/index.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import {
+  IgrCard,
+  IgrCardHeader,
+  IgrCardContent,
+  IgrCardActions,
+  IgrButton,
+  IgrIconButton,
+  IgrRipple,
+  registerIconFromText,
+} from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import {
+  bookmarkIcon,
+  moreIcon,
+  scheduleIcon,
+  shareIcon,
+  visibilityIcon,
+} from "./icons";
+
+export default function CardActions() {
+  useEffect(() => {
+    registerIconFromText("bookmark", bookmarkIcon, "material");
+    registerIconFromText("share", shareIcon, "material");
+    registerIconFromText("schedule", scheduleIcon, "material");
+    registerIconFromText("visibility", visibilityIcon, "material");
+    registerIconFromText("more", moreIcon, "material");
+  }, []);
+
+  return (
+    <div className="container sample actions-sample">
+      <div className="actions-card">
+        <IgrCard>
+          <IgrCardHeader>
+            <span slot="title">Design Review</span>
+            <span slot="subtitle">Today, 2:30 PM</span>
+          </IgrCardHeader>
+          <IgrCardContent>
+            <p>Review the latest card layouts and approve the selected direction.</p>
+          </IgrCardContent>
+          <IgrCardActions>
+            <IgrButton slot="start" variant="contained">Open</IgrButton>
+            <IgrButton variant="flat">Dismiss</IgrButton>
+            <div slot="end" className="icon-actions">
+              <IgrIconButton name="bookmark" collection="material" variant="flat">
+                <IgrRipple />
+              </IgrIconButton>
+              <IgrIconButton name="share" collection="material" variant="flat">
+                <IgrRipple />
+              </IgrIconButton>
+            </div>
+          </IgrCardActions>
+        </IgrCard>
+      </div>
+
+      <div className="actions-card rail-card">
+        <IgrCard>
+          <div className="rail-layout">
+            <div>
+              <IgrCardHeader>
+                <span slot="title">Publish Queue</span>
+                <span slot="subtitle">3 items waiting</span>
+              </IgrCardHeader>
+              <IgrCardContent>
+                <p>Review queued items before publishing.</p>
+              </IgrCardContent>
+            </div>
+
+            <IgrCardActions orientation="vertical" className="action-rail">
+              <IgrIconButton name="schedule" collection="material" variant="flat" aria-label="Schedule">
+                <IgrRipple />
+              </IgrIconButton>
+              <IgrIconButton name="visibility" collection="material" variant="flat" aria-label="Preview">
+                <IgrRipple />
+              </IgrIconButton>
+              <IgrIconButton name="more" collection="material" variant="flat" aria-label="More options">
+                <IgrRipple />
+              </IgrIconButton>
+            </IgrCardActions>
+          </div>
+        </IgrCard>
+      </div>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<CardActions />);