docs: fbadge documentation added (refs SFKUI-7023)

docs/components/FBadge.md

@@ -42,3 +42,7 @@ FBadgeLiveExample.vue
 :::api
 vue:FBadge
 :::
+
+## Relaterat
+
+- {@link FBadgePageObject FBadgePageObject}

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject-is-inverted.cy.ts

@@ -0,0 +1,18 @@
+import { FBadgePageObject } from "@fkui/vue/pageobject";
+import Example from "./FBadgePageObject-is-inverted.vue";
+
+it("should check if the badge is inverted or not ", () => {
+    cy.mount(Example);
+
+    /* --- cut above --- */
+    const myBadgeNotIverted = new FBadgePageObject(
+        "[data-test=my-badge-not-inverted]",
+    );
+    myBadgeNotIverted.isInverted().should("be.equal", false);
+
+    const myBadgeInverted = new FBadgePageObject(
+        "[data-test=my-badge-inverted]",
+    );
+    myBadgeInverted.isInverted().should("be.equal", true);
+    /* --- cut below --- */
+});

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject-is-inverted.md

@@ -0,0 +1,32 @@
+---
+name: FFileItemPageObject.inverted
+title: "FFileItemPageObject: inverted() method"
+short-title: inverted()
+layout: article
+---
+
+Används för att komma åt status om brickan är inverterad eller inte.
+
+## Syntax
+
+```ts
+inverted();
+```
+
+### Returvärde
+
+`Boolean` ger tillbaka status på brickan om den är inverterad eller inte.
+
+## Exempel
+
+```import static
+FBadgePageObject-is-inverted.vue
+```
+
+```import
+FBadgePageObject-is-inverted.cy.ts
+```
+
+## Relaterat
+
+- {@link FBadge}

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject-is-inverted.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { FBadge } from "@fkui/vue";
+</script>
+
+<template>
+    <div>
+        <f-badge v-test="'my-badge-not-inverted'" :status="'info'" :inverted="false"> My Not Inverted Badge </f-badge>
+    </div>
+    <div>
+        <f-badge v-test="'my-badge-inverted'" :status="'info'" :inverted="true"> My Inverted Badge </f-badge>
+    </div>
+</template>

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject-status.cy.ts

@@ -0,0 +1,11 @@
+import { FBadgePageObject } from "@fkui/vue/pageobject";
+import Example from "./FBadgePageObject-status.vue";
+
+it("Should match the status warning in the badge", () => {
+    cy.mount(Example);
+
+    /* --- cut above --- */
+    const myBadge = new FBadgePageObject("[data-test=my-badge-warning]");
+    myBadge.status().should("be.equal", "warning");
+    /* --- cut below --- */
+});

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject-status.md

@@ -0,0 +1,32 @@
+---
+name: FFileItemPageObject.status
+title: "FFileItemPageObject: status() method"
+short-title: status()
+layout: article
+---
+
+Används för att komma åt en statusens namn på brickan.
+
+## Syntax
+
+```ts
+status();
+```
+
+### Returvärde
+
+`String` som innehåller en del av klassnamnet på brickans namn som `default`, `warning`, `error`, `success` eller `info`.
+
+## Exempel
+
+```import static
+FBadgePageObject-status.vue
+```
+
+```import
+FBadgePageObject-status.cy.ts
+```
+
+## Relaterat
+
+- {@link FBadge}

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject-status.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { FBadge } from "@fkui/vue";
+</script>
+
+<template>
+    <f-badge v-test="'my-badge-warning'" :status="'warning'"> MyBadge </f-badge>
+</template>

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject.cy.ts

@@ -0,0 +1,12 @@
+import { FBadgePageObject } from "@fkui/vue/pageobject";
+import Example from "./FBadgePageObject.vue";
+
+it("Should show the status default and that the badge is not inverted", () => {
+    cy.mount(Example);
+
+    /* --- cut above --- */
+    const myBadge = new FBadgePageObject("[data-test=my-badge]");
+    myBadge.status().should("be.equal", "default");
+    myBadge.isInverted().should("be.equal", false);
+    /* --- cut below --- */
+});

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject.md

@@ -0,0 +1,35 @@
+---
+name: FBadgePageObject
+title: "FBadgePageObject: FBadgePageObject() constructor"
+short-title: FBadgePageObject()
+sortorder: 1
+layout: article
+---
+
+Använd `FBadgePageObject` för att hämta information relaterat till {@link FBadge bricka }.
+
+## Syntax
+
+```ts
+new FBadgePageObject(selector);
+```
+
+### Parametrar
+
+`selector: string`
+: Selector till `FBadge` elementet. Du kan med fördel använda {@link TestPlugin `v-test`} direktivet för din selector.
+
+## Exempel
+
+```import static
+FBadgePageObject.vue
+```
+
+```import
+FBadgePageObject.cy.ts
+```
+
+## Relaterat
+
+- {@link FBadge}
+- {@link TestPlugin}

docs/functions/cypress/pageobjects/FBadgePageObject/FBadgePageObject.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { FBadge } from "@fkui/vue";
+</script>
+
+<template>
+    <f-badge v-test="'my-badge'"> MyBadge </f-badge>
+</template>