feat(stepper): add animations sample (#520)

* feat(stepper): add animations sample * fix(*): update WC version * npm(package.json): update to upstream * refactor(stepper): update animation sample * WC 4.5.0-beta.1 --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: HUSSAR-mtrela <HUSSAR-mtrela@users.noreply.github.com>
IgniteUI · Sep 29, 2023 · 70473cc · 70473cc
1 parent 62547a2
commit 70473cc
Show file tree

Hide file tree

Showing 10 changed files with 403 additions and 0 deletions.
diff --git a/browser/public/index.html b/browser/public/index.html
@@ -755,6 +755,7 @@
        </div>
        <label id="nav-stepper" class="nav-component">Stepper</label> 
        <div id="nav-stepper-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/stepper/animations">─<span>Animations</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/stepper/linear">─<span>Linear</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/stepper/orientation">─<span>Orientation</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/stepper/overview">─<span>Overview</span></a> 

diff --git a/samples/layouts/stepper/animations/.prettierrc b/samples/layouts/stepper/animations/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/samples/layouts/stepper/animations/ReadMe.md b/samples/layouts/stepper/animations/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Animations feature using [Stepper](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/stepper/orientation" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/stepper/orientation?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd ./igniteui-wc-examples
+cd ./samples/layouts/stepper/orientation
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/stepper/animations/index.html b/samples/layouts/stepper/animations/index.html
@@ -0,0 +1,90 @@
+<html>
+    <head>
+        <title>Stepper Animations Example</title>
+        <meta charset="UTF-8" />
+
+        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+    </head>
+
+    <section>
+        <div id="root">
+            <section class="container sample">
+                <article class="settings">
+                    <igc-select id="orientation" label="Orienation">
+                        <igc-select-item value="horizontal" selected>Horizontal</igc-select-item>
+                        <igc-select-item value="vertical">Vertical</igc-select-item>
+                    </igc-select>
+
+                    <igc-select id="vanimation" label="Vertical Animation">
+                        <igc-select-item value="grow" selected>Grow</igc-select-item>
+                        <igc-select-item value="fade">Fade</igc-select-item>
+                        <igc-select-item value="none">None</igc-select-item>
+                    </igc-select>
+
+                    <igc-select id="hanimation" label="Horizontal Animation">
+                        <igc-select-item value="slide" selected>Slide</igc-select-item>
+                        <igc-select-item value="fade">Fade</igc-select-item>
+                        <igc-select-item value="none">None</igc-select-item>
+                    </igc-select>
+
+                    <igc-input id="duration" type="number" value="320" label="Duration">
+                        <span slot="suffix">ms</span>
+                    </igc-input>
+                </article>
+
+                <igc-stepper id="stepper">
+                    <igc-step>
+                        <span slot="title">Personal Info</span>
+                        <igc-form>
+                            <igc-input label="Full Name" type="text" name="fullName"></igc-input>
+                            <igc-input label="Email" type="email" name="email"></igc-input>
+                            <br />
+                            <igc-button class="next" onclick="stepper.next()">NEXT</igc-button>
+                        </igc-form>
+                    </igc-step>
+
+                    <igc-step>
+                        <span slot="title">Delivery address</span>
+                        <igc-form>
+                            <igc-input label="City" type="text" name="city"></igc-input>
+                            <igc-input label="Street" type="text" name="street"></igc-input>
+                            <br />
+                            <igc-button onclick="stepper.prev()">PREVIOUS</igc-button>
+                            <igc-button class="next" onclick="stepper.next()">NEXT</igc-button>
+                        </igc-form>
+                    </igc-step>
+
+                    <igc-step>
+                        <span slot="title">Payment</span>
+                        <igc-form>
+                            <igc-radio-group>
+                                <igc-radio name="payment" checked>PayPal (n@mail.com; 18/02/2021)</igc-radio>
+                                <igc-radio name="payment">Visa (**** **** **** 1234; 12/23)</igc-radio>
+                                <igc-radio name="payment">MasterCard (**** **** **** 5678; 12/24)</igc-radio>
+                            </igc-radio-group>
+                            <br />
+                            <igc-button onclick="stepper.prev()">PREVIOUS</igc-button>
+                            <igc-button class="next" onclick="stepper.next()">SUBMIT</igc-button>
+                        </igc-form>
+                    </igc-step>
+
+                    <igc-step>
+                        <span slot="title">Delivery status</span>
+                        <p>Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p>
+                        <br />
+                        <igc-button onclick="stepper.prev()">PREVIOUS</igc-button>
+                        <igc-button onclick="stepper.reset()">RESET</igc-button>
+                    </igc-step>
+                </igc-stepper>
+            </div>
+        </section>
+        <!-- This script is needed only for parcel and it will be excluded for webpack -->
+        <% if (false) { %>
+        <script src="src/index.ts"></script>
+        <% } %>
+    </body>
+</html>
diff --git a/samples/layouts/stepper/animations/package.json b/samples/layouts/stepper/animations/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "wc-stepper-animations",
+  "version": "1.0.0",
+  "description": "This project provides example of Stepper Animations using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "^4.4.0",
+    "install": "^0.13.0",
+    "lit": "^2.1.1",
+    "lit-html": "^2.0.0",
+    "npm": "^8.19.2",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/layouts/stepper/animations/sandbox.config.json b/samples/layouts/stepper/animations/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+
diff --git a/samples/layouts/stepper/animations/src/index.css b/samples/layouts/stepper/animations/src/index.css
@@ -0,0 +1,16 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+.container {
+    padding: 1rem;
+}
+
+.settings {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.125rem;
+    background: hsl(var(--ig-gray-100));
+    padding: 1.125rem;
+    border: 1px solid hsl(var(--ig-gray-300));
+    border-radius: .25rem;
+    margin-bottom: 2rem;
+}
diff --git a/samples/layouts/stepper/animations/src/index.ts b/samples/layouts/stepper/animations/src/index.ts
@@ -0,0 +1,42 @@
+import { defineComponents, IgcStepperComponent, IgcSelectComponent, IgcSelectItemComponent, IgcRadioGroupComponent, IgcInputComponent, IgcButtonComponent, IgcRadioComponent } from "igniteui-webcomponents";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+
+defineComponents(IgcStepperComponent, IgcRadioGroupComponent, IgcInputComponent, IgcButtonComponent, IgcSelectComponent);
+export class StepperAnimations {
+    private stepper: IgcStepperComponent;
+    private inputDuration: IgcInputComponent;
+
+    constructor() {
+        const orientation = document.getElementById("orientation") as IgcSelectComponent;
+        const horizontalAnim = document.getElementById("hanimation") as IgcSelectComponent;
+        const verticalAnim = document.getElementById("vanimation") as IgcSelectComponent;
+
+        horizontalAnim?.addEventListener("igcChange", (ev) => this.updateAnimations(ev, 'horizontal'));
+        verticalAnim?.addEventListener("igcChange", (ev) => this.updateAnimations(ev, 'vertical'));
+        orientation?.addEventListener("igcChange", (ev) => this.updateOrientation(ev));
+
+        this.stepper = document.querySelector("igc-stepper") as IgcStepperComponent;
+        this.inputDuration = document.getElementById("duration") as IgcInputComponent;
+        this.inputDuration.addEventListener("igcChange", this.updateDuration.bind(this));
+    }
+
+    private updateOrientation(ev: CustomEvent) {
+        const orientation: any  = (ev.detail as IgcSelectItemComponent).value;
+        this.stepper.orientation = orientation;
+        console.log(orientation);
+    }
+
+    private updateAnimations(ev: CustomEvent, animationType: 'vertical' | 'horizontal') {
+        const animation: any  = (ev.detail as IgcSelectItemComponent).value;
+
+        if (animationType === 'horizontal') this.stepper.horizontalAnimation = animation;
+        if (animationType === 'vertical') this.stepper.verticalAnimation = animation;
+    }
+
+    private updateDuration() {
+        this.stepper.animationDuration = Number(this.inputDuration.value);
+    }
+}
+
+new StepperAnimations();
diff --git a/samples/layouts/stepper/animations/tsconfig.json b/samples/layouts/stepper/animations/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}