From d04e7f97c4f8b262dabc721c02eed8e52241983e Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Mon, 4 Mar 2024 21:45:12 +0100
Subject: [PATCH] implementation of quote component

---
 src/components/quote/Quote.stories.tsx | 32 ++++++++++++++++++++++----
 src/components/quote/Quote.style.scss  |  8 +++----
 src/components/quote/Quote.tsx         | 31 ++++++++++++-------------
 3 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/components/quote/Quote.stories.tsx b/src/components/quote/Quote.stories.tsx
index 28f84429..3cef6978 100644
--- a/src/components/quote/Quote.stories.tsx
+++ b/src/components/quote/Quote.stories.tsx
@@ -1,22 +1,44 @@
 import {Meta, StoryObj} from "@storybook/react";
-import Menu from "../menu/Menu";
-import {Placement} from "react-aria";
 import {Quote} from "./Quote";
 import React from "react";
+import {Colors} from "../../utils/types";
 
 const meta: Meta = {
     title: "Quote",
     component: Quote,
+    argTypes: {
+        color: {
+            options: Colors,
+            control: {type: "radio"}
+        },
+        variant: {
+            options: ['none', 'normal', 'filled', 'outlined'],
+            control: {type: 'radio'},
+        },
+        gradient: {
+            type: "boolean"
+        },
+        gradientPosition: {
+            options: ["top-left", "top-right", "bottom-right", "bottom-left"],
+            control: {type: 'radio'},
+        },
+        outline: {
+            type: "boolean"
+        }
+    }
 }
 
 export default meta;
 
-type MenuStory = StoryObj
+type QuoteStory = StoryObj<typeof Quote>;
 
 
-export const MenuAccount: MenuStory = {
+export const QuoteSample: QuoteStory = {
     render: (args) => {
-        return <Quote name={"Name"} logo={"https://cdn-icons-png.flaticon.com/512/3135/3135715.png"}  position={"Position"}>
+        return <Quote  {...args} name={"Gero Liebig"}
+                      logo={"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/GLS_Logo_2021.svg/2560px-GLS_Logo_2021.svg.png"}
+                      position={"Managing Board GLS Germany"}
+                      style={{width: "200px"}}>
             My favorite UX feedback from customers is:
             "How is the app so fast?"
             Because we’ve built on Next.js and Vercel since day one, our pages load in an instant,
diff --git a/src/components/quote/Quote.style.scss b/src/components/quote/Quote.style.scss
index fd9b9e42..9900087b 100644
--- a/src/components/quote/Quote.style.scss
+++ b/src/components/quote/Quote.style.scss
@@ -2,20 +2,18 @@
 
   &__text {
     &:after {
-      right: 0;
-      top: 0;
       position: relative;
       content: "\”";
     }
     &:before {
-      right: 0;
-      top: 0;
       position: relative;
       content: "\”";
     }
   }
 
   &__img {
-    width: 2rem;
+    margin-top: 1rem;
+    width: 25%;
+    filter: brightness(0) invert(1);
   }
 }
\ No newline at end of file
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
index 20063ca2..6547839f 100644
--- a/src/components/quote/Quote.tsx
+++ b/src/components/quote/Quote.tsx
@@ -1,33 +1,32 @@
 import React from "react";
 import {TablerIconsProps} from "@tabler/icons-react";
-import Card from "../card/Card";
+import Card, {CardType} from "../card/Card";
 import "./Quote.style.scss"
+import Text from "../FontSizes/Text";
 
-export interface QuoteType {
-    children: React.ReactNode,
-    logo: string,
-    name: string,
-    position: string,
-}
-
-
-export interface QuoteLogo {
-    children: React.ReactElement<TablerIconsProps>
+export interface QuoteType extends Omit<CardType, "children"> {
+    children: string
+    logo: string
+    name: string
+    position: string
 }
 
 export const Quote: React.FC<QuoteType> = (props) => {
-    const {logo, children} = props;
-    return <Card>
+    const {logo, name, position, children, ...args} = props;
+    return <Card {...args}>
         <div className={"quote"}>
-            <Card.Section>
+            <Card.Section border>
                 <div className={"quote__text"}>
                     {children}
                 </div>
             </Card.Section>
             <Card.Section>
-                <img className={"quote__img"} src={logo} alt={"logo"}/>
+                <img className={"quote__img"} src={logo} alt={"logo of quote"}/>
+            </Card.Section>
+            <Card.Section>
+                <Text size={"md"} hierarchy={"primary"}>{name}</Text><br/>
+                <Text size={"sm"}>{position}</Text>
             </Card.Section>
-
         </div>
     </Card>
 }
\ No newline at end of file