Skip to content

Commit b3f135f

Browse files
adrianptrvadrianptrv
committed
feat(stepper): add new step height sample
1 parent 34f060b commit b3f135f

10 files changed

Lines changed: 401 additions & 0 deletions

File tree

‎samples/layouts/stepper/step-height/.devcontainer/devcontainer.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Node.js",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:22"
4+
}

‎samples/layouts/stepper/step-height/.eslintrc.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
2+
module.exports = {
3+
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
4+
parserOptions: {
5+
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
6+
sourceType: "module", // Allows for the use of imports
7+
ecmaFeatures: {
8+
jsx: true // Allows for the parsing of JSX
9+
}
10+
},
11+
settings: {
12+
react: {
13+
version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
14+
}
15+
},
16+
extends: [
17+
"eslint:recommended",
18+
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
19+
"plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
20+
],
21+
rules: {
22+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
23+
"default-case": "off",
24+
"no-undef": "off",
25+
"no-unused-vars": "off",
26+
"no-extend-native": "off",
27+
"no-throw-literal": "off",
28+
"no-useless-concat": "off",
29+
"no-mixed-operators": "off",
30+
"no-prototype-builtins": "off",
31+
"prefer-const": "off",
32+
"prefer-rest-params": "off",
33+
"jsx-a11y/alt-text": "off",
34+
"jsx-a11y/iframe-has-title": "off",
35+
"@typescript-eslint/no-unused-vars": "off",
36+
"@typescript-eslint/no-explicit-any": "off",
37+
"@typescript-eslint/no-inferrable-types": "off",
38+
"@typescript-eslint/no-useless-constructor": "off",
39+
"@typescript-eslint/no-use-before-define": "off",
40+
"@typescript-eslint/no-non-null-assertion": "off",
41+
"@typescript-eslint/interface-name-prefix": "off",
42+
"@typescript-eslint/prefer-namespace-keyword": "off",
43+
"@typescript-eslint/explicit-function-return-type": "off",
44+
"@typescript-eslint/explicit-module-boundary-types": "off"
45+
},
46+
"overrides": [
47+
{
48+
"files": ["*.ts", "*.tsx"],
49+
"rules": {
50+
"default-case": "off",
51+
"no-undef": "off",
52+
"no-unused-vars": "off",
53+
"no-extend-native": "off",
54+
"no-throw-literal": "off",
55+
"no-useless-concat": "off",
56+
"no-mixed-operators": "off",
57+
"no-prototype-builtins": "off",
58+
"prefer-const": "off",
59+
"prefer-rest-params": "off",
60+
"jsx-a11y/alt-text": "off",
61+
"jsx-a11y/iframe-has-title": "off",
62+
"@typescript-eslint/no-unused-vars": "off",
63+
"@typescript-eslint/no-explicit-any": "off",
64+
"@typescript-eslint/no-inferrable-types": "off",
65+
"@typescript-eslint/no-useless-constructor": "off",
66+
"@typescript-eslint/no-use-before-define": "off",
67+
"@typescript-eslint/no-non-null-assertion": "off",
68+
"@typescript-eslint/interface-name-prefix": "off",
69+
"@typescript-eslint/prefer-namespace-keyword": "off",
70+
"@typescript-eslint/explicit-function-return-type": "off",
71+
"@typescript-eslint/explicit-module-boundary-types": "off"
72+
}
73+
}
74+
]
75+
};

‎samples/layouts/stepper/step-height/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
3+
4+
This folder contains implementation of React application with example of Step Height feature using [Stepper](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/stepper/step-height" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/stepper/step-height?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_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.
27+
28+
## Instructions
29+
30+
Follow these instructions to run this example:
31+
32+
33+
```
34+
git clone https://github.com/IgniteUI/igniteui-react-examples.git
35+
git checkout master
36+
cd ./igniteui-react-examples
37+
cd ./samples/layouts/stepper/step-height
38+
```
39+
40+
open above folder in VS Code or type:
41+
```
42+
code .
43+
```
44+
45+
In terminal window, run:
46+
```
47+
npm install --legacy-peer-deps
48+
npm run-script start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
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/stepper/step-height/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>StepperStepHeight</title>
5+
<link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script type="module" src="/src/index.tsx"></script>
10+
</body>
11+
</html>

‎samples/layouts/stepper/step-height/package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "react-step-height",
3+
"description": "This project provides example of Dynamic Step Height feature using Infragistics React components",
4+
"author": "Infragistics",
5+
"homepage": ".",
6+
"version": "1.4.0",
7+
"private": true,
8+
"scripts": {
9+
"start": "vite --port 4200",
10+
"build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
11+
"preview": "vite preview",
12+
"test": "vitest"
13+
},
14+
"dependencies": {
15+
"igniteui-dockmanager": "^1.17.0",
16+
"igniteui-react": "^19.6.2",
17+
"igniteui-react-core": "19.3.2",
18+
"igniteui-webcomponents": "^7.0.0",
19+
"react": "^19.2.0",
20+
"react-dom": "^19.2.0",
21+
"tslib": "^2.4.0"
22+
},
23+
"devDependencies": {
24+
"@types/jest": "^29.2.0",
25+
"@types/node": "^24.7.1",
26+
"@types/react": "^18.0.24",
27+
"@types/react-dom": "^18.0.8",
28+
"@vitejs/plugin-react": "^5.0.4",
29+
"@vitest/browser": "^3.2.4",
30+
"typescript": "^4.8.4",
31+
"vite": "^7.1.9",
32+
"vitest": "^3.2.4",
33+
"vitest-canvas-mock": "^0.3.3",
34+
"worker-loader": "^3.0.8"
35+
},
36+
"browserslist": [
37+
">0.2%",
38+
"not dead",
39+
"not ie <= 11",
40+
"not op_mini all"
41+
]
42+
}

‎samples/layouts/stepper/step-height/sandbox.config.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser"
5+
}

‎samples/layouts/stepper/step-height/src/index.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* shared styles are loaded from: */
2+
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
3+
4+
igc-switch {
5+
margin-left: 0.5rem;
6+
}
7+
8+
igc-stepper {
9+
background: var(--ig-gray-100);
10+
padding: 16px;
11+
border-radius: 8px;
12+
border: 1px solid var(--ig-gray-400);
13+
margin-block-start: 12px;
14+
}
15+
16+
.header {
17+
display: flex;
18+
align-items: center;
19+
justify-content: space-between;
20+
gap: 1rem;
21+
22+
.switch-wrapper {
23+
border: 1px solid var(--ig-gray-400);
24+
border-radius: 6px;
25+
background: var(--ig-gray-100);
26+
padding: 8px;
27+
font-size: 22px;
28+
display: flex;
29+
align-items: center;
30+
flex-wrap: wrap;
31+
max-width: 195px;
32+
justify-content: center;
33+
}
34+
35+
igc-switch::part(label) {
36+
font-size: 22px;
37+
}
38+
}
39+
40+
igc-switch {
41+
--border-radius-track: 0px;
42+
--thumb-size: 1rem;
43+
--border-radius-thumb: 2px;
44+
--size: 2.5rem;
45+
--thumb-off-color: var(--ig-primary-500);
46+
--thumb-on-color: var(--ig-primary-500);
47+
--track-on-color: white;
48+
--track-on-hover-color: white;
49+
--thumb-off-hover-color: var(--ig-primary-500);
50+
--border-on-color: var(--ig-gray-400);
51+
--border-on-hover-color: var(--ig-gray-500);
52+
53+
&::part(control) {
54+
height: 1.5rem;
55+
border-radius: 4px;
56+
}
57+
}
58+
59+
igc-step::part(content) {
60+
@media (width < 756px) {
61+
overflow: scroll;
62+
}
63+
}
64+
65+
h5 {
66+
margin-block: 5px;
67+
}
68+
69+
li {
70+
font-size: 16px;
71+
padding-block: 8px;
72+
}
73+
74+
.container {
75+
padding: 1rem;
76+
}

‎samples/layouts/stepper/step-height/src/index.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import { IgrStepper, IgrStep, IgrSwitch } from 'igniteui-react';
4+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
5+
import './index.css';
6+
7+
export default function StepHeight() {
8+
const stepperRef = React.useRef<IgrStepper>(null);
9+
const [rows, setRows] = React.useState('1fr');
10+
11+
const onSwitchChange = (e: any) => {
12+
const newRows = e.detail.checked ? '0fr' : '1fr';
13+
stepperRef.current.style.setProperty('--body-grid-rows', newRows);
14+
setRows(newRows);
15+
};
16+
17+
return (
18+
<div className="container sample">
19+
<div className="header">
20+
<div className="switch-wrapper">
21+
<div>
22+
<span>1fr</span>
23+
<IgrSwitch onChange={onSwitchChange}>
24+
<span>0fr</span>
25+
</IgrSwitch>
26+
</div>
27+
<h5>
28+
--body-grid-rows: <span>{rows}</span>
29+
</h5>
30+
</div>
31+
</div>
32+
<IgrStepper ref={stepperRef} contentTop={true}>
33+
<IgrStep>
34+
<span slot="title">Personal Info</span>
35+
<h2>Personal Info</h2>
36+
<ul>
37+
<li>Please enter your personal information.</li>
38+
</ul>
39+
</IgrStep>
40+
<IgrStep>
41+
<span slot="title">Delivery address</span>
42+
<h2>Delivery address</h2>
43+
<ul>
44+
<li>Enter your shipping address for delivery.</li>
45+
<li>
46+
If you need to change your address, please contact our support
47+
team.
48+
</li>
49+
<li>
50+
If you won't be at the address during the delivery time, please
51+
provide an alternative address.
52+
</li>
53+
</ul>
54+
</IgrStep>
55+
<IgrStep>
56+
<span slot="title">Billing address</span>
57+
<h2>Billing address</h2>
58+
<ul>
59+
<li>Please enter your billing address.</li>
60+
</ul>
61+
</IgrStep>
62+
<IgrStep invalid={true}>
63+
<span slot="title">Confirmation</span>
64+
<h2>Confirmation</h2>
65+
<ul>
66+
<li>Please review your order details and confirm your purchase.</li>
67+
</ul>
68+
</IgrStep>
69+
</IgrStepper>
70+
</div>
71+
);
72+
}
73+
74+
// rendering above class to the React DOM
75+
const root = ReactDOM.createRoot(document.getElementById('root'));
76+
root.render(<StepHeight />);

0 commit comments

Comments
 (0)