diff --git a/components/stepper/src/stepper.types.ts b/components/stepper/src/stepper.types.ts
index 42cab310..a2fd280c 100644
--- a/components/stepper/src/stepper.types.ts
+++ b/components/stepper/src/stepper.types.ts
@@ -1,5 +1,5 @@
export type TStep = {
- name: string;
+ name?: string;
};
export type StepperProps = {
diff --git a/components/topbar/package.json b/components/topbar/package.json
index 4c724d6c..4044895b 100644
--- a/components/topbar/package.json
+++ b/components/topbar/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-topbar",
- "version": "11.6.0",
+ "version": "11.7.0",
"description": "Axis branded TopBar",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
"repository": {
diff --git a/examples/package.json b/examples/package.json
index 2f5c8cdc..2a1fa3b0 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -1,6 +1,6 @@
{
"name": "examples",
- "version": "11.6.0",
+ "version": "11.7.0",
"private": true,
"description": "Examples for Fluent UI v9",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
diff --git a/examples/src/stories/stepper/examples/minimal-with-counter-stepper-example.tsx b/examples/src/stories/stepper/examples/minimal-with-counter-stepper-example.tsx
new file mode 100644
index 00000000..65187561
--- /dev/null
+++ b/examples/src/stories/stepper/examples/minimal-with-counter-stepper-example.tsx
@@ -0,0 +1,82 @@
+import { DialogStep, StepperDialog } from "@axiscommunications/fluent-stepper";
+import { Body1 } from "@fluentui/react-components";
+import { useCallback, useState } from "react";
+import React from "react";
+
+const steps: DialogStep[] = [
+ {
+ content: <>{"This is the content of the first step. ".repeat(20)}>,
+ },
+ {
+ content: <>{"This is the content of the second step. ".repeat(20)}>,
+ },
+ {
+ content: <>{"This is the content of the third step. ".repeat(20)}>,
+ },
+];
+
+export function MinimalWithCustomFooterStepperDialogExample() {
+ const [step, setStep] = useState(0);
+ const onFinish = useCallback(() => alert("Finish!"), []);
+ const onCancel = useCallback(() => setStep(0), []);
+
+ return (
+
{`${step + 1} of ${steps.length}`}}
+ disableProgression={false}
+ onStepChange={setStep}
+ onFinish={onFinish}
+ onCancel={onCancel}
+ cancelLabel="Cancel"
+ nextLabel="Next"
+ previousLabel="Previous"
+ finishLabel="Finish"
+ />
+ );
+}
+
+export const MinimalWithCustomFooterStepperDialogExampleAsString = `
+import React, { useCallback, useState } from "react";
+
+import {
+ DialogStep,
+ StepperDialog
+} from "@axiscommunications/fluent-stepper";
+
+const steps: DialogStep[] = [
+ {
+ content: <>{"This is the content of the first step. ".repeat(20)}>,
+ },
+ {
+ content: <>{"This is the content of the second step. ".repeat(20)}>,
+ },
+ {
+ content: <>{"This is the content of the third step. ".repeat(20)}>,
+ },
+];
+export function StepperDialogExample() {
+ const [step, setStep] = useState(0);
+ const onFinish = useCallback(() => alert("Finish!"), []);
+ const onCancel = useCallback(() => setStep(0), []);
+
+ return (
+ $\{step + 1} of $\{steps.length}"}
+ disableProgression={false}
+ onStepChange={setStep}
+ onFinish={onFinish}
+ onCancel={onCancel}
+ cancelLabel="Cancel"
+ nextLabel="Next"
+ previousLabel="Previous"
+ finishLabel="Finish"
+ />
+ )
+}
+`;
diff --git a/examples/src/stories/stepper/stepper-page.tsx b/examples/src/stories/stepper/stepper-page.tsx
index 44ee48c8..9f45b9f3 100644
--- a/examples/src/stories/stepper/stepper-page.tsx
+++ b/examples/src/stories/stepper/stepper-page.tsx
@@ -10,6 +10,10 @@ import {
CustomStepperDialogExample,
CustomStepperDialogExampleAsString,
} from "./examples/custom-style-example";
+import {
+ MinimalWithCustomFooterStepperDialogExample,
+ MinimalWithCustomFooterStepperDialogExampleAsString,
+} from "./examples/minimal-with-counter-stepper-example";
import {
StepperDialogExample,
StepperDialogExampleAsString,
@@ -38,6 +42,12 @@ const examples: pageData[] = [
example: ,
codeString: CustomStepperDialogExampleAsString,
},
+ {
+ title: "Minimal with custom footer",
+ anchor: "Minimal with custom footer",
+ example: ,
+ codeString: MinimalWithCustomFooterStepperDialogExampleAsString,
+ },
];
export const StepperPage = () => {
diff --git a/hooks/package.json b/hooks/package.json
index 5ee28537..ac2ba205 100644
--- a/hooks/package.json
+++ b/hooks/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-hooks",
- "version": "11.6.0",
+ "version": "11.7.0",
"description": "Hooks",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
"repository": {
diff --git a/icons/package.json b/icons/package.json
index cecb5c25..2bcf1692 100644
--- a/icons/package.json
+++ b/icons/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-icons",
- "version": "11.6.0",
+ "version": "11.7.0",
"description": "Icons",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
"repository": {
diff --git a/illustrations/package.json b/illustrations/package.json
index 1b586b7b..bd417daf 100644
--- a/illustrations/package.json
+++ b/illustrations/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-illustrations",
- "version": "11.6.0",
+ "version": "11.7.0",
"description": "Illustrations",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
"repository": {
diff --git a/package.json b/package.json
index d2ae1180..9e22eb42 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-components",
- "version": "11.6.0",
+ "version": "11.7.0",
"private": true,
"description": "Axis branded theme, components and examples for Fluent UI v9",
"repository": {
diff --git a/styles/package.json b/styles/package.json
index e89d05c7..18c64eb1 100644
--- a/styles/package.json
+++ b/styles/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-styles",
- "version": "11.6.0",
+ "version": "11.7.0",
"description": "Styles for Fluent UI v9",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
"repository": {
diff --git a/theme/package.json b/theme/package.json
index 0e7ee01b..cee1f034 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -1,6 +1,6 @@
{
"name": "@axiscommunications/fluent-theme",
- "version": "11.6.0",
+ "version": "11.7.0",
"description": "Theme for Fluent UI v9",
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
"repository": {
diff --git a/tools/package.json b/tools/package.json
index b5ae090e..f93481c7 100644
--- a/tools/package.json
+++ b/tools/package.json
@@ -1,6 +1,6 @@
{
"name": "tools",
- "version": "11.6.0",
+ "version": "11.7.0",
"private": true,
"author": "Axis Communications AB",
"type": "module",