🐛 74 muc comment limit initials length (#81)

* 📝 new documentation for comment-text #74 * changed initial generator #74 * 🐛 fixed computedInitials #74 * 📝 updated documentation for commentText-component #74 * 🎨 formated #74 * 🚨 removed unused variable #74 * 📝 #74 * Update src/components/Comment/MucCommentText.stories.ts
it-at-m · May 15, 2024 · d1bd385 · d1bd385
1 parent fab852d
commit d1bd385
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 51 deletions.
diff --git a/.storybook/MucTheme.ts b/.storybook/MucTheme.ts
@@ -1,9 +1,9 @@
-import { create } from '@storybook/theming/create';
+import { create } from "@storybook/theming/create";
 
 export default create({
-    base: 'light',
-    brandTitle: 'muc-patternlab-vue',
-    brandUrl: 'https://github.com/it-at-m/muc-patternlab-vue',
-    brandImage: './muc-patternlab-vue.png',
-    brandTarget: '_blank',
-});
+  base: "light",
+  brandTitle: "muc-patternlab-vue",
+  brandUrl: "https://github.com/it-at-m/muc-patternlab-vue",
+  brandImage: "./muc-patternlab-vue.png",
+  brandTarget: "_blank",
+});
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -6,12 +6,12 @@ import { StorybookConfig } from "@storybook/vue3-vite";
 const fs = require("fs");
 const path = require("path");
 const mucIconsSvg = fs.readFileSync(
-    path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"),
-    "utf8"
+  path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"),
+  "utf8"
 );
 const customIconsSvg = fs.readFileSync(
-    path.resolve(__dirname, "../public/assets/temporary/custom-icons.svg"),
-    "utf8"
+  path.resolve(__dirname, "../public/assets/temporary/custom-icons.svg"),
+  "utf8"
 );
 
 const config: StorybookConfig = {

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -1 +1,4 @@
-<link rel="shortcut icon" href="/favicon.ico">
+<link
+  rel="shortcut icon"
+  href="/favicon.ico"
+/>
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -1,6 +1,7 @@
-import { addons } from '@storybook/manager-api';
-import mucTheme from './MucTheme';
+import { addons } from "@storybook/manager-api";
+
+import mucTheme from "./MucTheme";
 
 addons.setConfig({
-    theme: mucTheme,
-});
+  theme: mucTheme,
+});
diff --git a/docs/GettingStarted.mdx b/docs/GettingStarted.mdx
@@ -39,8 +39,8 @@ In your Webcomponents root you should import the MDE5-CSS and SVG-Sprite for MDE
   lang="ts"
   setup
 >
-  import mucIconsSprite from "@muenchen/muc-patternlab-vue/dist/assets/temporary/muc-icons.svg?raw";
   import customIconsSprite from "@muenchen/muc-patternlab-vue/dist/assets/temporary/custom-icons.svg?raw";
+  import mucIconsSprite from "@muenchen/muc-patternlab-vue/dist/assets/temporary/muc-icons.svg?raw";
 </script>
 
 <template>

diff --git a/docs/Iconography.mdx b/docs/Iconography.mdx
@@ -1,4 +1,4 @@
-import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+import { IconGallery, IconItem, Meta } from "@storybook/blocks";
 
 <Meta title="Iconography" />
 
@@ -9,16 +9,24 @@ This library already contains MDE5-Patternlabs iconset. The documentation to it
 Additionally, it adds some specialty icons from [Pictogrammers](https://pictogrammers.com/library/mdi) which can be accessed by embedding the SVG-Sprite `custom-icons.svg` as described in [the getting started guide](/docs/getting-started--docs#setup).
 
 <IconGallery>
-    <IconItem name="pencil">
-        <svg fill="currentColor"><use href="#icon-pencil" /></svg>
-    </IconItem>
-    <IconItem name="dots-vertical">
-        <svg fill="currentColor"><use href="#icon-dots-vertical" /></svg>
-    </IconItem>
-    <IconItem name="circle-off-outline">
-        <svg fill="currentColor"><use href="#icon-circle-off-outline" /></svg>
-    </IconItem>
-    <IconItem name="account">
-        <svg fill="currentColor"><use href="#icon-account" /></svg>
-    </IconItem>
-</IconGallery>
+  <IconItem name="pencil">
+    <svg fill="currentColor">
+      <use href="#icon-pencil" />
+    </svg>
+  </IconItem>
+  <IconItem name="dots-vertical">
+    <svg fill="currentColor">
+      <use href="#icon-dots-vertical" />
+    </svg>
+  </IconItem>
+  <IconItem name="circle-off-outline">
+    <svg fill="currentColor">
+      <use href="#icon-circle-off-outline" />
+    </svg>
+  </IconItem>
+  <IconItem name="account">
+    <svg fill="currentColor">
+      <use href="#icon-account" />
+    </svg>
+  </IconItem>
+</IconGallery>
diff --git a/src/components/Card/MucCardContainer.vue b/src/components/Card/MucCardContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container card-container">
-    <slot/>
+    <slot />
   </div>
 </template>
 

diff --git a/src/components/Comment/MucComment.stories.ts b/src/components/Comment/MucComment.stories.ts
@@ -2,14 +2,13 @@ import MucComment from "./MucComment.vue";
 
 export default {
   component: MucComment,
-  title: "MucComment",
+  title: "Comment/MucComment",
   tags: ["autodocs"],
   parameters: {
     docs: {
       description: {
         component: `The muc-comment component can be used to display a comment in e.g. a chat.
-If you would like to display only text, we suggest using the more specific \`muc-comment-text\`. 
-For more general integration, we recommend the more general \`muc-comment\`.
+The \`muc-comment\`-component is designed to be as generic as possible.
 
 [🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
 `,

diff --git a/src/components/Comment/MucCommentText.stories.ts b/src/components/Comment/MucCommentText.stories.ts
@@ -0,0 +1,38 @@
+import MucCommentText from "./MucCommentText.vue";
+
+export default {
+  component: MucCommentText,
+  title: "Comment/MucCommentText",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The muc-comment component can be used to display a comment in e.g. a chat.
+If you would like to display only text, we suggest using this component instead of the more generic \`muc-comment\`.
+Furthermore this component does limit the number of charactesr for the initials to two.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    rating: 4.2,
+    author: "Max Foo Bar Mustermann",
+    headline: "Initials shortend",
+    text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut",
+  },
+};
+
+export const Slider = {
+  args: {
+    ...Default.args,
+    rating: 2.3,
+    author: "",
+    headline: "Empty Author",
+    variant: "slider",
+  },
+};
diff --git a/src/components/Comment/MucCommentText.vue b/src/components/Comment/MucCommentText.vue
@@ -22,6 +22,8 @@ import { computed } from "vue";
 import { MucComment } from "../index";
 import CommentType from "./CommentType";
 
+const AUTHOR_NAME_SEPERATOR = " ";
+
 const props = withDefaults(
   defineProps<{
     datePrefix?: string;
@@ -31,22 +33,28 @@ const props = withDefaults(
     headline?: string;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType;
   }>(),
   {
     datePrefix: "am",
     variant: "listing",
   }
 );
 
+/**
+ * Initials will be computed if none are given.
+ * In the case of an empty author field, an empty string is returned for the initials.
+ */
 const computedInitials = computed(() => {
   return (
-    props.initials ??
-    props.author
-      .split(" ")
-      .map((word) => word.charAt(0))
-      .join("")
-  );
+    (
+      props.initials ??
+      props.author
+        .split(AUTHOR_NAME_SEPERATOR)
+        .map((word) => word.charAt(0))
+        .join("")
+    ).match(/^.|.$/g) ?? [""]
+  ).join("");
 });
 </script>
 

diff --git a/src/components/Intro/MucIntro.vue b/src/components/Intro/MucIntro.vue
@@ -23,15 +23,16 @@ defineSlots<{
 </script>
 
 <template>
-  <div class="m-intro m-intro-static-image" style="background-color: var(--color-neutrals-blue-xlight);">
-    <div
-        class="container"
-    >
+  <div
+    class="m-intro m-intro-static-image"
+    style="background-color: var(--color-neutrals-blue-xlight)"
+  >
+    <div class="container">
       <div style="width: 66.6%">
         <div>
           <p
-              v-if="tagline"
-              class="m-intro-vertical__tagline"
+            v-if="tagline"
+            class="m-intro-vertical__tagline"
           >
             {{ tagline }}
           </p>
@@ -41,12 +42,12 @@ defineSlots<{
         </div>
 
         <div
-            v-if="divider"
-            class="muc-divider"
+          v-if="divider"
+          class="muc-divider"
         ></div>
 
         <div class="m-intro-vertical__content">
-          <p style="padding-bottom: 32px;">
+          <p style="padding-bottom: 32px">
             <slot></slot>
           </p>
         </div>