Add some components and stories

Still to be defined which ones to use in the end

client/src/components/header/AccountMenuContent.stories.ts

@@ -21,25 +21,37 @@ const meta: Meta<typeof AccountMenuContent> = {
 export default meta;
 type Story = StoryObj<typeof AccountMenuContent>;
 
-export const DefaultStory: Story = {
+const courseSessions = [
+  {
+    id: 1,
+    title: "Bern 2023 a",
+  },
+  {
+    id: 2,
+    title: "Zürich 2023 a",
+  },
+];
+
+const loggedInUser = {
+  first_name: "Vreni",
+  last_name: "Schmid",
+  email: "vreni.schmid@example.com",
+  avatar_url: avatar,
+  loggedIn: true,
+};
+
+export const LoggedInUser: Story = {
   args: {
-    show: true,
-    courseSessions: [
-      {
-        id: 1,
-        title: "Bern 2023 a",
-      },
-      {
-        id: 2,
-        title: "Zürich 2023 a",
-      },
-    ],
+    courseSessions,
+    user: loggedInUser,
+  },
+};
+
+export const NoUser: Story = {
+  args: {
+    courseSessions,
     user: {
-      first_name: "Vreni",
-      last_name: "Schmid",
-      email: "vreni.schmid@example.com",
-      avatar_url: avatar,
-      loggedIn: true,
+      loggedIn: false,
     },
   },
 };

client/src/components/header/AccountMenuContent.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
   user: UserState | undefined;
 }>();
 
-const emits = defineEmits(["selectCourseSession", "logout"]);
+const emit = defineEmits(["selectCourseSession", "logout"]);
 </script>
 
 <template>
@@ -33,7 +33,7 @@ const emits = defineEmits(["selectCourseSession", "logout"]);
 
     <div v-if="props.courseSessions.length" class="border-b py-4">
       <div v-for="cs in props.courseSessions" :key="cs.id">
-        <button @click="$emit('selectCourseSession', cs)">{{ cs.title }}</button>
+        <button @click="emit('selectCourseSession', cs)">{{ cs.title }}</button>
       </div>
     </div>
 
@@ -41,7 +41,7 @@ const emits = defineEmits(["selectCourseSession", "logout"]);
       v-if="user?.loggedIn"
       type="button"
       class="mt-6 flex items-center"
-      @click="$emit('logout')"
+      @click="emit('logout')"
     >
       <it-icon-logout class="inline-block" />
       <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>

client/src/components/header/CourseSessionsMenu.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Item } from "./CourseSessionsMenu.vue";
+import CourseSessionsMenu from "./CourseSessionsMenu.vue";
+
+const meta: Meta<typeof CourseSessionsMenu> = {
+  title: "VBV/CourseSessionsMenu",
+  component: CourseSessionsMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof CourseSessionsMenu>;
+
+const items: Item[] = [
+  {
+    id: "1",
+    title: "Bern 2021 a",
+  },
+  {
+    id: "2",
+    title: "Bern 2021 b",
+  },
+  {
+    id: "3",
+    title: "Bern 2022 a",
+  },
+  {
+    id: "4",
+    title: "Bern 2022 b",
+  },
+];
+
+export const CourseSessionsMenuStory: Story = {
+  args: {
+    items,
+  },
+};

client/src/components/header/CourseSessionsMenu.vue

@@ -0,0 +1,39 @@
+<template>
+  <fieldset>
+    <div>
+      {{selected}}
+      <div v-for="item in props.items" :key="item.id" class="mb-4 flex items-center">
+        <input
+          :id="item.id"
+          name="coursesessions"
+          type="radio"
+          :value="item.id"
+          v-model="selected"
+          class="text-indigo-600 focus:ring-indigo-600 h-4 w-4 border-gray-300"
+        />
+        <label
+          :for="item.id"
+          class="ml-3 block text-sm font-medium leading-6 text-gray-900"
+        >
+          {{ item.title }}
+        </label>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+export interface Item {
+  id: string;
+  title: string;
+}
+
+export interface Props {
+  items: Item[];
+}
+
+const selected = ref(null);
+const props = defineProps<Props>();
+</script>

client/src/components/ui/ItRadioGroup.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import ItRadioGroup from "./ItRadioGroup.vue";
+import type { RadioItem } from "@/pages/learningPath/learningContentPage/feedback/feedback.types";
+
+const meta: Meta<typeof ItRadioGroup> = {
+  title: "VBV/RadioGroup",
+  component: ItRadioGroup,
+  argTypes: { "onUpdate:modelValue": { action: "updated" } },
+};
+
+export default meta;
+type Story = StoryObj<typeof ItRadioGroup>;
+let modelValue = "a";
+
+const items: RadioItem<string>[] = [
+  {
+    value: "a",
+    name: "A",
+  },
+  {
+    value: "b",
+    name: "B",
+  },
+];
+
+export const RadioGroup: Story = {
+  args: {
+    modelValue: modelValue,
+    items: items,
+    label: "Radiogroup",
+    "onUpdate:modelValue": (newValue) => { modelValue = newValue }
+  },
+};

client/src/components/ui/ItRadiobutton.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import ItRadiobutton from "./ItRadiobutton.vue";
+
+const meta: Meta<typeof ItRadiobutton> = {
+  title: "VBV/Radiobutton",
+  component: ItRadiobutton,
+};
+
+export default meta;
+type Story = StoryObj<typeof ItRadiobutton>;
+
+export const Radiobutton: Story = {
+  args: {
+    item: {
+      value: "Hallo",
+      label: "Velo",
+      subtitle: "Subtitle",
+    },
+    selected: false,
+  },
+};

client/src/components/ui/ItRadiobutton.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { RadioItem } from "@/components/ui/checkbox.types";
+import log from "loglevel";
+
+const props = defineProps<{
+  item: RadioItem<any>;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(["toggle"]);
+const toggle = () => {
+  emit("toggle");
+};
+const keydown = (e: KeyboardEvent) => {
+  log.debug("keydown", e.type, e.key);
+  if (e.key === " " && !props.disabled) {
+    e.preventDefault();
+    toggle();
+  }
+};
+const input = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  log.debug("input", e.type, target.checked, target.value);
+  emit("toggle");
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      'opacity-50': disabled,
+      'cursor-not-allowed': disabled,
+    }"
+    class="inline-flex cursor-pointer"
+  >
+    <label
+      class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50"
+      :class="
+        item.checked
+          ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'
+          : 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]'
+      "
+      tabindex="0"
+      @keydown.stop="keydown"
+    >
+      <input
+        ref="checkbox"
+        :checked="item.checked"
+        :value="item.value"
+        :disabled="disabled"
+        :data-cy="`it-checkbox-${item.value}`"
+        class="sr-only"
+        type="checkbox"
+        @keydown="keydown"
+        @input="input"
+      />
+      <div class="ml-4 flex-col">
+        <div v-if="item.label">
+          {{ item.label }}
+        </div>
+        <div v-if="item.subtitle" class="text-gray-900">
+          {{ item.subtitle }}
+        </div>
+      </div>
+    </label>
+  </div>
+</template>

client/src/components/ui/checkbox.types.ts

@@ -1,6 +1,13 @@
-export interface CheckboxItem<T> {
+export interface BaseItem<T> {
   value: T;
   label?: string;
-  checked: boolean;
   subtitle?: string;
 }
+
+export interface CheckboxItem<T> extends BaseItem<T> {
+  checked: boolean;
+}
+
+export interface RadioItem<T> extends BaseItem<T> {
+  selected: boolean;
+}