Merge pull request #30 from thelia/feat/card-review

feat: card review
thelia · May 2, 2024 · b33dbf0 · b33dbf0
2 parents 3cf9904 + 4565dd1
commit b33dbf0
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/components/Organisms/Card/Review/Review.stories.js b/components/Organisms/Card/Review/Review.stories.js
@@ -0,0 +1,19 @@
+import Review from './Review.twig';
+
+export default {
+  title: 'Design System/Organisms/Card/Review'
+};
+
+export const Base = {
+  render: (args) => Review(args),
+  args: {
+    author: "Prénom N.",
+    review: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    note: 4,
+    maxNote: 5,
+    date: "04/05/2021"
+  },
+  parameters: {
+    backgrounds: { default: 'grey' },
+  },
+};
diff --git a/components/Organisms/Card/Review/Review.twig b/components/Organisms/Card/Review/Review.twig
@@ -0,0 +1,17 @@
+<div class="Review">
+  <div class="Review-author">{{ author }}</div>
+  <div class="Review-review">{{ review }}</div>
+  <div class="Review-footer">
+    <div class="Review-note">
+      {% for star in 1..note %}
+        <span class="Review-star">{{ source("/icons/star.svg") }}</span>
+      {% endfor %}
+      {% if note < maxNote %}
+        {% for star in 1..(maxNote - note) %}
+          <span class="Review-star Review-star--empty">{{ source("/icons/star.svg") }}</span>
+        {% endfor %}
+      {% endif %}
+    </div>
+    <div class="Review-date">{{ date }}</div>
+  </div>
+</div>
diff --git a/components/Organisms/Card/Review/review.css b/components/Organisms/Card/Review/review.css
@@ -0,0 +1,41 @@
+.Review {
+  background-color: var(--white);
+  padding: rem-convert(16px);
+  border-radius: 8px;
+
+  &-author {
+    @apply paragraph-5;
+    margin-bottom: rem-convert(8px);
+    color: var(--grey);
+  }
+
+  &-review {
+    @apply paragraph-3;
+    margin-bottom: rem-convert(16px);
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-note {
+    display: flex;
+    gap: rem-convert(5px);
+  }
+
+  &-star {
+    width: rem-convert(14px);
+    height: rem-convert(14px);
+    color: var(--black);
+
+    &--empty {
+      color: var(--grey-lighter);
+    }
+  }
+
+  &-date {
+    @apply indication;
+    color: var(--grey);
+  }
+}
diff --git a/components/Organisms/Card/SuggestFilters/suggestFilters.css b/components/Organisms/Card/SuggestFilters/suggestFilters.css
@@ -3,6 +3,7 @@
   text-align: center;
   background-color: var(--theme-lightest);
   padding: rem-convert(24px);
+  border-radius: 8px;
 
   &-desc {
     @apply paragraph-2;