Fix various components

packages/core/src/components/boxes/Boxes.mdx

@@ -2,6 +2,7 @@ import { Meta, Story } from "@storybook/blocks";
 
 import * as BaseBoxStories from "./BaseBox/BaseBox.stories";
 import * as InfoBoxStories from "./InfoBox/InfoBox.stories";
+import * as SuccessBoxStories from "./SuccessBox/SuccessBox.stories";
 import * as ErrorBoxStories from "./ErrorBox/ErrorBox.stories";
 
 <Meta title="Display Components/Boxes/Boxes" />
@@ -17,6 +18,10 @@ The `BaseBox` can be used to generate new variants of information boxes.
 The `InfoBox` should be used to display important information to the user
 <Story of={InfoBoxStories.Default} />
 
+## Success Box
+The `SuccessBox` should be used to display information after an action was successful
+<Story of={SuccessBoxStories.Default} />
+
 ## Error Box
 The `ErrorBox` should be used to display global error or errors to the user.
 <strong>It will not be rendered if no error given!</strong>

packages/core/src/components/boxes/ErrorBox/ErrorBox.vue

@@ -43,7 +43,7 @@ const localErrors = computed(() => {
   display: flex;
   gap: var(--space-sm);
   align-items: start;
-  color: var(--color-danger-hover);
+  color: var(--color-danger-600);
 
   ul {
     margin: 0;

packages/core/src/components/boxes/InfoBox/InfoBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseBox class="info-box" v-if="infoMessage">
+  <BaseBox v-if="infoMessage" class="info-box">
     <IconInfoCircle />
     <slot>{{ infoMessage }}</slot>
   </BaseBox>

packages/core/src/components/boxes/SuccessBox/SuccessBox.spec.js

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import InfoBox from '@core/components/boxes/InfoBox/InfoBox.vue'
+import IconInfoCircle from '@core/components/icons/IconInfoCircle.vue'
+
+describe('InfoBox', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(InfoBox)
+  })
+
+  describe(':props', () => {
+    it(':infoMessage - hides component when undefined', async () => {
+      await wrapper.setProps({
+        infoMessage: undefined
+      })
+      expect(wrapper.findComponent(IconInfoCircle).exists()).toBeFalsy()
+    })
+    it(':infoMessage - show component when set', async () => {
+      const expectedInfoMessage = 'test info message'
+      await wrapper.setProps({
+        infoMessage: expectedInfoMessage
+      })
+      expect(wrapper.text()).toContain(expectedInfoMessage)
+    })
+  })
+})

packages/core/src/components/boxes/SuccessBox/SuccessBox.stories.ts

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/vue3'
+import SuccessBox from './SuccessBox.vue'
+
+/**
+ * The success box should be used to display info to successful actions.
+ *
+ * **If the successMessage is undefined or empty, the box will not be rendered!**
+ */
+const meta: Meta<typeof SuccessBox> = {
+  component: SuccessBox,
+  title: 'Display Components/Boxes/SuccessBox'
+}
+export default meta
+type Story = StoryObj<typeof SuccessBox>
+
+/**
+ * It displays the success message inside the box.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { SuccessBox },
+    setup() {
+      return { args }
+    },
+    template: '<SuccessBox v-bind="args" />'
+  }),
+  args: {
+    successMessage: 'This is a success message'
+  }
+}
+
+/**
+ * It is also possible to use slots to display custom content inside the box.
+ *
+ *  **Currently, it is required to set the infoMessage prop to, but it is not displayed. Problem tracked by https://github.com/lion5/component-library/issues/201**
+ */
+export const UseSlot: Story = {
+  render: (args) => ({
+    components: { SuccessBox },
+    setup() {
+      return { args }
+    },
+    template:
+      '<SuccessBox v-bind="args"><h1>Html Content</h1><p>Success Text</p></SuccessBox>'
+  }),
+  args: {
+    successMessage: 'Not displayed'
+  }
+}

packages/core/src/components/boxes/SuccessBox/SuccessBox.vue

@@ -0,0 +1,28 @@
+<template>
+  <BaseBox v-if="successMessage" class="success-box">
+    <BaseIcon icon="bi-check-circle-fill" />
+    <slot>{{ successMessage }}</slot>
+  </BaseBox>
+</template>
+
+<script lang="ts" setup>
+import BaseBox from '@core/components/boxes/BaseBox/BaseBox.vue'
+import { BaseIcon } from '@core/components'
+
+defineProps<{
+  /**
+   * the success message that shall be displayed
+   */
+  successMessage?: string
+}>()
+</script>
+<style lang="scss" scoped>
+.success-box {
+  --box-background-color: var(--color-success-200);
+  --box-color: var(--color-font-1);
+
+  i {
+    margin-right: var(--space-sm);
+  }
+}
+</style>

packages/core/src/components/cards/EntityCard/EntityCard.stories.ts

@@ -0,0 +1,46 @@
+import EntityCard from '@core/components/cards/EntityCard/EntityCard.vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+export default {
+  component: EntityCard,
+  title: 'Display Components/Cards/EntityCard',
+  render: (args) => ({
+    components: { EntityCard },
+    setup() {
+      return { args }
+    },
+    template: `
+      <EntityCard v-bind="args">
+        The cards content. You can place anything here.
+      </EntityCard>`
+  })
+} as Meta<typeof EntityCard>
+type Story = StoryObj<typeof EntityCard>
+
+export const Default: Story = {
+  args: {
+    title: 'Topic',
+    busyMsg: 'Please wait while we are loading the contents...'
+  }
+}
+
+export const BusyState: Story = {
+  args: {
+    ...Default.args,
+    busy: true
+  }
+}
+
+export const ErrorState: Story = {
+  args: {
+    ...Default.args,
+    error: new Error('We are unable to load the contents.')
+  }
+}
+
+export const ErrorStateWithContent: Story = {
+  args: {
+    ...ErrorState.args,
+    showContentOnError: true
+  }
+}

packages/core/src/components/cards/EntityCard/EntityCard.vue

@@ -1,25 +1,26 @@
 <template>
-  <div class="entity-card">
+  <BaseCard class="entity-card">
     <!-- @slot the cards title section. Overwrites the title set via the title prop -->
     <slot name="title">
       <h2 v-if="title" data-cy="entity-card-title">
         {{ title }}
       </h2>
     </slot>
-    <PortalEntityWrapper
+    <EntityWrapper
       :busy="busy"
       :busy-msg="busyMsg"
       :error="error"
       :show-content-on-error="showContentOnError"
     >
       <!-- @slot the cards content -->
       <slot v-if="!busy && (showContentOnError || !error)" />
-    </PortalEntityWrapper>
-  </div>
+    </EntityWrapper>
+  </BaseCard>
 </template>
 
 <script lang="ts" setup>
-import PortalEntityWrapper from '@core/components/utils/EntityWrapper/EntityWrapper.vue'
+import EntityWrapper from '@core/components/utils/EntityWrapper/EntityWrapper.vue'
+import BaseCard from '@core/components/cards/BaseCard/BaseCard.vue'
 
 withDefaults(
   defineProps<{
@@ -57,18 +58,4 @@ withDefaults(
 </script>
 
 <style lang="scss">
-.entity-card {
-  border-radius: var(--border-radius-700);
-  box-shadow: var(--shadow-600);
-  margin-bottom: 2rem;
-  padding: 1rem 2rem;
-  background-color: white;
-  width: 100%;
-  max-width: var(--card-max-width, 1000px);
-  overflow: hidden;
-
-  h2 {
-    text-align: center;
-  }
-}
 </style>

packages/core/src/components/icons/IconInfoCircle.vue

@@ -1,3 +1,3 @@
 <template>
-  <i class="bi-info-circle" />
+  <i class="bi-info-circle-fill" />
 </template>

packages/core/src/components/icons/IconWarning.vue

@@ -1,3 +1,3 @@
 <template>
-  <i class="bi bi-exclamation-circle"></i>
+  <i class="bi bi-exclamation-circle-fill"></i>
 </template>