feat(tabs): update samples content

samples/layouts/tabs/alignment/README.md → samples/layouts/tabs/amount/README.md

@@ -1,4 +1,4 @@
-This folder contains implementation of React application with example of Alignment feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Amount feature using [Tabs](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">
@@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Alignme
         <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/tabs/alignment" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tabs/amount" 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>
     </body>
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 cd ./igniteui-react-examples
 git checkout master
-cd ./samples/layouts/tabs/alignment
+cd ./samples/layouts/tabs/amount
 ```
 
 open above folder in VS Code or type:

samples/layouts/tabs/alignment/index.html → samples/layouts/tabs/amount/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>RadioGroup</title>
+    <title>Tabs Amount</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>

samples/layouts/tabs/alignment/package.json → samples/layouts/tabs/amount/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-radio-group",
-  "description": "This project provides example of Radio Group using Infragistics React components",
+  "name": "react-tabs-amount",
+  "description": "This project provides an example of Tabs amount using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",

samples/layouts/tabs/amount/src/index.css

@@ -0,0 +1,35 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.amounts {
+    display: grid;
+    grid-template-columns: 5.6875rem 35rem;
+    align-items: center;
+    row-gap: 3.75rem;
+}
+
+.amounts igc-tabs::part(inner) {
+    flex-grow: 1;
+}
+
+.two-tabs::part(inner) {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.five-tabs::part(inner) {
+    grid-template-columns: repeat(5, 1fr);
+}
+
+.amount-label {
+    font: 400 13px / 20px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.3px;
+    color: var(--ig-gray-600);
+}

samples/layouts/tabs/amount/src/index.tsx

@@ -0,0 +1,37 @@
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrTab, IgrTabs } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const categories = ['Podcasts', 'Playlists', 'Genres', 'Albums', 'Artists', 'Audiobooks', 'Radio'];
+
+export default function TabsAmount() {
+    return (
+        <div className="sample">
+            <div className="amounts">
+                <span className="amount-label">Two Tabs</span>
+                <IgrTabs className="two-tabs" alignment="justify">
+                    {categories.slice(0, 2).map((category) => (
+                        <IgrTab key={category} label={category} />
+                    ))}
+                </IgrTabs>
+                <span className="amount-label">Five Tabs</span>
+                <IgrTabs className="five-tabs" alignment="justify">
+                    {categories.slice(0, 5).map((category) => (
+                        <IgrTab key={category} label={category} />
+                    ))}
+                </IgrTabs>
+                <span className="amount-label">5+ Tabs</span>
+                <IgrTabs>
+                    {categories.map((category) => (
+                        <IgrTab key={category} label={category} />
+                    ))}
+                </IgrTabs>
+            </div>
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<TabsAmount/>);

samples/layouts/tabs/overview/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>RadioGroup</title>
+    <title>Tabs Overview</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>

samples/layouts/tabs/overview/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-radio-group",
-  "description": "This project provides example of Radio Group using Infragistics React components",
+  "name": "react-tabs-overview",
+  "description": "This project provides an example of Tabs overview using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",

samples/layouts/tabs/overview/src/index.css

@@ -1,2 +1,38 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.team-tabs {
+    width: 23.9375rem;
+    height: 17rem;
+    background: var(--ig-surface-500);
+}
+
+.team-tabs igc-tabs::part(inner) {
+    flex-grow: 1;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.team-tabs igc-tab::part(content) {
+    white-space: nowrap;
+}
+
+.team-tabs igc-list {
+    --ig-size: var(--ig-size-large);
+}
+
+.team-name {
+    font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+    font-size: var(--ig-subtitle-2-font-size);
+    font-weight: var(--ig-subtitle-2-font-weight);
+    line-height: var(--ig-subtitle-2-line-height);
+    letter-spacing: var(--ig-subtitle-2-letter-spacing);
+    color: var(--ig-gray-900);
+}

samples/layouts/tabs/overview/src/index.tsx

@@ -1,36 +1,43 @@
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import { IgrTabs, IgrTab, IgrIcon, registerIconFromText } from "igniteui-react";
-import "igniteui-webcomponents/themes/light/bootstrap.css";
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrAvatar, IgrList, IgrListItem, IgrTab, IgrTabs } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-const home = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
-const search = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
-const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
-registerIconFromText("home", home, "material");
-registerIconFromText("search", search, "material");
-registerIconFromText("favorite", favorite, "material");
+const people = [
+    { name: 'Emily Carter', team: 'Finance', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png' },
+    { name: 'Jose Diaz', team: 'Engineering', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png' },
+    { name: 'Kira Tanaka', team: 'Finance', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png' },
+    { name: 'Liam Brooks', team: 'Engineering', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png' },
+];
 
-export default function Overview() {
-  return (
-    <div className="container sample">
-      <IgrTabs>
-        <IgrTab>
-          <IgrIcon slot="label" name='home' collection="material"></IgrIcon>
-          <span>Home tab panel</span>
-        </IgrTab>
-        <IgrTab>
-           <IgrIcon slot="label" name='search' collection="material"></IgrIcon>
-           <span>Search tab panel</span>
-        </IgrTab>
-        <IgrTab>
-           <IgrIcon slot="label" name='favorite' collection="material"></IgrIcon>
-           <span>Favorite tab panel</span>
-        </IgrTab>
-      </IgrTabs>
-    </div>
-  );
+const teams = ['Everyone', 'Finance', 'Engineering'];
+
+export default function TabsOverview() {
+    return (
+        <div className="sample">
+            <div className="team-tabs">
+                <IgrTabs alignment="justify">
+                    {teams.map((team) => (
+                        <IgrTab key={team} label={team}>
+                            <IgrList>
+                                {people
+                                    .filter((person) => team === 'Everyone' || person.team === team)
+                                    .map((person) => (
+                                        <IgrListItem key={person.name}>
+                                            <IgrAvatar slot="start" src={person.avatar} alt={person.name} shape="circle" />
+                                            <span slot="title">{person.name}</span>
+                                            <span slot="end" className="team-name">{person.team}</span>
+                                        </IgrListItem>
+                                    ))}
+                            </IgrList>
+                        </IgrTab>
+                    ))}
+                </IgrTabs>
+            </div>
+        </div>
+    );
 }
 
 // rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(<Overview/>);
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<TabsOverview/>);