✨ 30 adding comment component (#36)

* ✨ Added Comment Component #30-adding-comment-component

* 🍱 Added Comment Component to index files #30-adding-comment-component

* 🦺  Added documentation and example implementation #30-adding-comment-component

* ✨ added simplified version of comment component #30-adding-comment-component

* 💩 component save #30

* 🐛 fixed star ratings #30-adding-comment-component

* 🍱 changed datePrefix and example #30-adding-comment-component

* 📝 Updated documentation #30

* 🐛 Updated star evaluation and changed to using variant. Added code comments #30

* 📝 updated documentation #30

* merged and formated #30

* changed to variant #30

* 🔧 add missing font definitions

* Update docs/components/muc-comment.md

Co-authored-by: Fabian Wilms <[email protected]>

* Update docs/components/muc-comment.md

Co-authored-by: Fabian Wilms <[email protected]>

* Update src/components/Comment/MucComment.vue

Co-authored-by: Fabian Wilms <[email protected]>

* 📝 updated description #30

* ♻️ extracted type into sperate file and included it into both components #30

---------

Co-authored-by: jannik.lange <[email protected]>
Co-authored-by: fabian.wilms <[email protected]>
Co-authored-by: Fabian Wilms <[email protected]>

docs/.vitepress/config.ts

@@ -20,6 +20,7 @@ module.exports = {
           { text: 'MucButton', link: '/components/muc-button' },
           { text: 'MucCallout', link: '/components/muc-callout' },
           { text: 'MucIntro', link: '/components/muc-intro' },
+          { text: "MucComment", link: "/components/muc-comment" },
         ],
       }
     ],

docs/.vitepress/theme/index.js

@@ -2,7 +2,8 @@ import DefaultTheme from 'vitepress/theme'
 import DemoContainer from '../components/DemoContainer.vue'
 import MucPatternlabVue from 'muc-patternlab-vue'
 
-import './custom.css'
+import './custom.css';
+import '../../../public/assets/temporary/muenchende-fontfaces.css';
 
 export default {
   ...DefaultTheme,

docs/components/demo/MucComment/BasicExample.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <muc-comment :rating="5">
+      <template v-slot:initials>TT</template>
+      <template v-slot:author>Max Mustermann</template>
+      <template v-slot:datePrefix>-</template>
+      <template v-slot:date>01.01.1970</template>
+      <template v-slot:headline>Lorem ipsum</template>
+      <template v-slot:text>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut
+      </template>
+    </muc-comment>
+    <muc-comment-text
+      date="01.01.2024"
+      author="Max Busch"
+      headline="Lorem ipsum"
+      :rating="2.3"
+      text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut"
+      variant
+      dot-divider
+    />
+  </div>
+</template>
+
+<style scoped></style>
+<script setup lang="ts"></script>

docs/components/muc-comment.md

@@ -0,0 +1,37 @@
+<script setup>
+import Basic from './demo/MucComment/BasicExample.vue'
+</script>
+
+# muc-banner
+
+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`.
+
+## Example Usage
+
+<DemoContainer>
+  <Basic/>
+</DemoContainer>
+
+<<< @/components/demo/MucComment/BasicExample.vue
+
+## Reference
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
+
+### Properties
+
+| Name    | Type        | Default | Description                                                               |
+|---------|-------------|---------|---------------------------------------------------------------------------|
+| rating  | number (float)     |         | Number of stars to be displayed.                                          |
+| variant | CommentType | `listing` | Choose the variant of the comment. This can be either `slider` oder `listing` |
+
+### Slots
+| Name           | Parameters | Description                                           |
+| -------------- | ---------- |-------------------------------------------------------|
+| initials       |            | Placeholder for the commenter's initials or avatar.   |
+| author         |            | Placeholder for the author's name or username.        |
+| datePrefix     |            | Prefix for the date (e.g., "am").                     |
+| date           |            | Placeholder for the comment's date.                   |
+| headline       |            | Placeholder for the comment's headline or title.      |
+| text           |            | Placeholder for the main text content of the comment. |

public/assets/temporary/muenchende-fontfaces.css

@@ -2,46 +2,46 @@
     font-family: Roboto Condensed;
     font-style: normal;
     font-weight: 300;
-    src: url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-300.eot);
-    src: local(""), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-300.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-300.woff2) format("woff2"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-300.woff) format("woff"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-300.ttf) format("truetype"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-300.svg#RobotoCondensed) format("svg")
+    src: url(../fonts/roboto-condensed/roboto-condensed-v19-latin-300.eot);
+    src: local(""), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-300.eot?#iefix) format("embedded-opentype"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-300.woff2) format("woff2"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-300.woff) format("woff"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-300.ttf) format("truetype"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-300.svg#RobotoCondensed) format("svg")
 }
 
 @font-face {
     font-family: Roboto Condensed;
     font-style: normal;
     font-weight: 400;
-    src: url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-regular.eot);
-    src: local(""), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-regular.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-regular.woff2) format("woff2"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-regular.woff) format("woff"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-regular.ttf) format("truetype"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-regular.svg#RobotoCondensed) format("svg")
+    src: url(../fonts/roboto-condensed/roboto-condensed-v19-latin-regular.eot);
+    src: local(""), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-regular.eot?#iefix) format("embedded-opentype"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-regular.woff2) format("woff2"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-regular.woff) format("woff"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-regular.ttf) format("truetype"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-regular.svg#RobotoCondensed) format("svg")
 }
 
 @font-face {
     font-family: Roboto Condensed;
     font-style: normal;
     font-weight: 700;
-    src: url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-700.eot);
-    src: local(""), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-700.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-700.woff2) format("woff2"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-700.woff) format("woff"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-700.ttf) format("truetype"), url(../assets/fonts/roboto-condensed/roboto-condensed-v19-latin-700.svg#RobotoCondensed) format("svg")
+    src: url(../fonts/roboto-condensed/roboto-condensed-v19-latin-700.eot);
+    src: local(""), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-700.eot?#iefix) format("embedded-opentype"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-700.woff2) format("woff2"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-700.woff) format("woff"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-700.ttf) format("truetype"), url(../fonts/roboto-condensed/roboto-condensed-v19-latin-700.svg#RobotoCondensed) format("svg")
 }
 
 @font-face {
     font-family: Open Sans;
     font-style: normal;
     font-weight: 400;
-    src: url(../assets/fonts/open-sans/open-sans-v27-latin-regular.eot);
-    src: local(""), url(../assets/fonts/open-sans/open-sans-v27-latin-regular.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/open-sans/open-sans-v27-latin-regular.woff2) format("woff2"), url(../assets/fonts/open-sans/open-sans-v27-latin-regular.woff) format("woff"), url(../assets/fonts/open-sans/open-sans-v27-latin-regular.ttf) format("truetype"), url(../assets/fonts/open-sans/open-sans-v27-latin-regular.svg#OpenSans) format("svg")
+    src: url(../fonts/open-sans/open-sans-v27-latin-regular.eot);
+    src: local(""), url(../fonts/open-sans/open-sans-v27-latin-regular.eot?#iefix) format("embedded-opentype"), url(../fonts/open-sans/open-sans-v27-latin-regular.woff2) format("woff2"), url(../fonts/open-sans/open-sans-v27-latin-regular.woff) format("woff"), url(../fonts/open-sans/open-sans-v27-latin-regular.ttf) format("truetype"), url(../fonts/open-sans/open-sans-v27-latin-regular.svg#OpenSans) format("svg")
 }
 
 @font-face {
     font-family: Open Sans;
     font-style: normal;
     font-weight: 700;
-    src: url(../assets/fonts/open-sans/open-sans-v27-latin-700.eot);
-    src: local(""), url(../assets/fonts/open-sans/open-sans-v27-latin-700.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/open-sans/open-sans-v27-latin-700.woff2) format("woff2"), url(../assets/fonts/open-sans/open-sans-v27-latin-700.woff) format("woff"), url(../assets/fonts/open-sans/open-sans-v27-latin-700.ttf) format("truetype"), url(../assets/fonts/open-sans/open-sans-v27-latin-700.svg#OpenSans) format("svg")
+    src: url(../fonts/open-sans/open-sans-v27-latin-700.eot);
+    src: local(""), url(../fonts/open-sans/open-sans-v27-latin-700.eot?#iefix) format("embedded-opentype"), url(../fonts/open-sans/open-sans-v27-latin-700.woff2) format("woff2"), url(../fonts/open-sans/open-sans-v27-latin-700.woff) format("woff"), url(../fonts/open-sans/open-sans-v27-latin-700.ttf) format("truetype"), url(../fonts/open-sans/open-sans-v27-latin-700.svg#OpenSans) format("svg")
 }
 
 @font-face {
     font-family: Open Sans;
     font-style: italic;
     font-weight: 400;
-    src: url(../assets/fonts/open-sans/open-sans-v27-latin-italic.eot);
-    src: local(""), url(../assets/fonts/open-sans/open-sans-v27-latin-italic.eot?#iefix) format("embedded-opentype"), url(../assets/fonts/open-sans/open-sans-v27-latin-italic.woff2) format("woff2"), url(../assets/fonts/open-sans/open-sans-v27-latin-italic.woff) format("woff"), url(../assets/fonts/open-sans/open-sans-v27-latin-italic.ttf) format("truetype"), url(../assets/fonts/open-sans/open-sans-v27-latin-italic.svg#OpenSans) format("svg")
+    src: url(../fonts/open-sans/open-sans-v27-latin-italic.eot);
+    src: local(""), url(../fonts/open-sans/open-sans-v27-latin-italic.eot?#iefix) format("embedded-opentype"), url(../fonts/open-sans/open-sans-v27-latin-italic.woff2) format("woff2"), url(../fonts/open-sans/open-sans-v27-latin-italic.woff) format("woff"), url(../fonts/open-sans/open-sans-v27-latin-italic.ttf) format("truetype"), url(../fonts/open-sans/open-sans-v27-latin-italic.svg#OpenSans) format("svg")
 }

src/components/Comment/CommentType.ts

@@ -0,0 +1,3 @@
+type CommentType = "listing" | "slider";
+
+export default CommentType;

src/components/Comment/MucComment.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="m-comment"
+    :class="commentClass"
+  >
+    <div class="m-comment__head">
+      <div class="m-comment__initials">
+        <slot name="initials" />
+      </div>
+      <div class="m-comment__info">
+        <span class="m-comment__author">
+          <slot name="author" />
+        </span>
+        <span v-if="showDate">
+          <span class="m-comment__author"
+            >&nbsp;<slot name="datePrefix"
+          /></span>
+          <span class="m-comment__date">&nbsp;<slot name="date" /> </span>
+        </span>
+        <div
+          class="m-star-rating"
+          role="img"
+          :aria-label="`Bewertung: ${rating} von ${MAX_STARS} Sternen`"
+        >
+          <div
+            v-for="n in evaluateRating.fullStars"
+            :key="n"
+            class="m-star-rating__item m-star-rating__item--full"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon"
+            >
+              <use xlink:href="#icon-solid-star"></use>
+            </svg>
+          </div>
+          <div
+            v-if="evaluateRating.isHalfStar"
+            class="m-star-rating__item m-star-rating__item--half"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon"
+            >
+              <use xlink:href="#icon-half-star"></use>
+            </svg>
+          </div>
+          <div
+            v-for="n in evaluateRating.emptyStars"
+            :key="n"
+            class="m-star-rating__item"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon"
+            >
+              <use xlink:href="#icon-solid-star"></use>
+            </svg>
+          </div>
+          <div class="m-star-rating__numeric">
+            {{ ratingWithDecimalComma }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m-comment__body">
+      <div class="m-comment__headline">
+        <slot name="headline" />
+      </div>
+      <div class="m-comment__text">
+        <slot name="text" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+import CommentType from "./CommentType";
+
+const LOCALES = "de-DE";
+const LOWER_THRESHOLD = 0.2;
+const UPPER_THRESHOLD = 0.8;
+const MAX_STARS = 5;
+
+const slots = useSlots();
+
+type RatingDisplayType = {
+  fullStars: number;
+  emptyStars: number;
+  isHalfStar: boolean;
+};
+
+const props = withDefaults(
+  defineProps<{
+    rating: number;
+    variant?: CommentType;
+  }>(),
+  {
+    variant: "listing",
+  }
+);
+
+const showDate = computed(() => {
+  return !!slots["date"];
+});
+
+const commentClass = computed(() => {
+  return props.variant === "slider"
+    ? "m-comment--slider"
+    : "m-comment--listing";
+});
+
+/*
+ * Converts the dot used on decimal numbers and converts it to a comma.
+ */
+const ratingWithDecimalComma = computed(() => {
+  return props.rating.toLocaleString(LOCALES.valueOf(), {
+    minimumFractionDigits: 1,
+  });
+});
+
+/*
+Calculates the amount of full, empty and half-stars to be displayed.
+ */
+const evaluateRating = computed(() => {
+  const decimalPart = +(props.rating % 1).toFixed(1); // ask Brendan Eich why "3.3 % 1 = 0.2999999999999998" and then come back
+
+  let fullStars = Math.min(Math.floor(props.rating), MAX_STARS);
+  let emptyStars = Math.floor(MAX_STARS - props.rating);
+  let isHalfStar = false;
+
+  // evaluating half-stars and if the rating is e.g. 3.9 an extra full star needs to be displayed
+  if (props.rating !== 0.0 && props.rating !== MAX_STARS) {
+    if (decimalPart <= LOWER_THRESHOLD) emptyStars++;
+    else if (decimalPart >= UPPER_THRESHOLD) fullStars++;
+    else isHalfStar = true;
+  }
+
+  return {
+    fullStars,
+    emptyStars,
+    isHalfStar,
+  } as RatingDisplayType;
+});
+</script>
+
+<style scoped></style>

src/components/Comment/MucCommentText.vue

@@ -0,0 +1,53 @@
+<template>
+  <muc-comment
+    :rating="rating"
+    :variant="variant"
+  >
+    <template v-slot:initials>{{ computedInitials }}</template>
+    <template v-slot:datePrefix>am</template>
+    <template v-slot:author>{{ author }}</template>
+    <template
+      v-if="!!date"
+      v-slot:date
+      >{{ date }}</template
+    >
+    <template v-slot:headline>{{ headline }}</template>
+    <template v-slot:text>{{ text }}</template>
+  </muc-comment>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { MucComment } from "../index";
+import CommentType from "./CommentType";
+
+const props = withDefaults(
+  defineProps<{
+    datePrefix?: string;
+    initials?: string;
+    author: string;
+    date?: string;
+    headline?: string;
+    text: string;
+    rating: number;
+    variant: CommentType;
+  }>(),
+  {
+    datePrefix: "am",
+    variant: "listing",
+  }
+);
+
+const computedInitials = computed(() => {
+  return (
+    props.initials ??
+    props.author
+      .split(" ")
+      .map((word) => word.charAt(0))
+      .join("")
+  );
+});
+</script>
+
+<style scoped></style>

src/components/Comment/index.ts

@@ -0,0 +1,4 @@
+import MucComment from "./MucComment.vue";
+import MucCommentText from "./MucCommentText.vue";
+
+export { MucComment, MucCommentText };

src/components/index.ts

@@ -1,6 +1,14 @@
 import { MucBanner } from "./Banner";
 import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
+import { MucComment, MucCommentText } from "./Comment/";
 import { MucIntro } from "./Intro";
 
-export { MucButton, MucBanner, MucIntro, MucCallout };
+export {
+  MucButton,
+  MucBanner,
+  MucIntro,
+  MucCallout,
+  MucComment,
+  MucCommentText,
+};