@logora/debate 0.1.0

package/src/components/icons/spiegel_icons/SpiegelIcons.stories.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Alarm } from "./Alarm"
+import { Announcement } from "./Announcement"
+import { Arrow } from "./Arrow"
+import { Blockquote } from "./Blockquote"
+import { Bold } from "./Bold"
+import { Camera } from "./Camera"
+import { Chat } from "./Chat"
+import { Checkbox } from "./Checkbox"
+import { Check } from "./Check"
+import { Clap } from "./Clap"
+import { Clock } from "./Clock"
+import { Close } from "./Close"
+import { Code } from "./Code"
+import { Community } from "./Community"
+import { Crown } from "./Crown"
+import { Downvote } from "./Downvote"
+import { Ellipsis } from "./Ellipsis"
+import { ExpertBadge } from "./ExpertBadge"
+import { Facebook } from "./Facebook"
+import { Home } from "./Home"
+import { Italic } from "./Italic"
+import { LightArrow } from './LightArrow'
+import { Link } from "./Link"
+import { Login } from "./Login"
+import { Logora } from "./Logora"
+import { Mail } from "./Mail"
+import { MobileClose } from "./MobileClose"
+import { MobileMenu } from "./MobileMenu"
+import { Next } from "./Next"
+import { OpenBlank } from "./OpenBlank"
+import { OrderedList } from "./OrderedList"
+import { Point } from "./Point"
+import { Question } from "./Question"
+import { Refresh } from "./Refresh"
+import { Reply } from "./Reply"
+import { Search } from "./Search"
+import { Send } from "./Send"
+import { Share } from "./Share"
+import { SmallArrow } from "./SmallArrow"
+import { Source } from "./Source"
+import { Suggestion } from './Suggestion';
+import { Twitter } from "./Twitter"
+import { Underline } from "./Underline"
+import { Upvote } from "./Upvote";
+import { User } from "./User"
+import { Votebox } from './Votebox';
+import { Versus } from './Versus';
+import { CheckCircle } from './CheckCircle';
+import { MinusCircle } from './MinusCircle';
+import { Flag } from './Flag';
+import  { PauseCircle } from './PauseCircle'
+
+const meta = {
+    title: 'Icons/Spiegel Icons',
+    component: () => null,
+    args: {},
+    argTypes: {},
+    render: () => <SpiegelIconsLibrary />
+};
+
+export default meta;
+
+export const SpiegelIconsLibrary = () => {
+    return (
+        <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap" }}>
+            <Alarm width={50} height={50} data-testid={"alarm-icon"} style={{ margin: "15px" }} />
+            <Announcement width={50} height={50} data-testid={"announcement-icon"} style={{ margin: "15px" }} />
+            <Arrow width={50} height={50} data-testid={"arrow-icon"} style={{ margin: "15px" }} />
+            <Blockquote width={50} height={50} data-testid={"blockquote-icon"} style={{ margin: "15px" }} />
+            <Bold width={50} height={50} data-testid={"bold-icon"} style={{ margin: "15px" }} />
+            <Camera width={50} height={50} data-testid={"camera-icon"} style={{ margin: "15px" }} />
+            <Chat width={50} height={50} data-testid={"chat-icon"} style={{ margin: "15px" }} />
+            <Checkbox width={50} height={50} data-testid={"checkbox-icon"} style={{ margin: "15px" }} />
+            <Check width={50} height={50} data-testid={"checkbox-icon"} style={{ margin: "15px" }} />
+            <Clap width={50} height={50} data-testid={"clap-icon"} style={{ margin: "15px" }} />
+            <Clock width={50} height={50} data-testid={"clock-icon"} style={{ margin: "15px" }} />
+            <Close width={50} height={50} data-testid={"close-icon"} style={{ margin: "15px" }} />
+            <Code width={50} height={50} data-testid={"code-icon"} style={{ margin: "15px" }} />
+            <Community width={50} height={50} data-testid={"community-icon"} style={{ margin: "15px" }} />
+            <Crown width={50} height={50} data-testid={"crown-icon"} style={{ margin: "15px" }} />
+            <Downvote width={50} height={50} data-testid={"downvote-icon"} style={{ margin: "15px" }} />
+            <Ellipsis width={50} height={50} data-testid={"ellipsis-icon"} style={{ margin: "15px" }} />
+            <ExpertBadge width={50} height={50} data-testid={"expert-badge-icon"} style={{ margin: "15px" }} />
+            <Facebook width={50} height={50} data-testid={"facebook-icon"} style={{ margin: "15px" }} />
+            <Home width={50} height={50} data-testid={"home-icon"} style={{ margin: "15px" }} />
+            <Italic width={50} height={50} data-testid={"italic-icon"} style={{ margin: "15px" }} />
+            <LightArrow width={50} height={50} data-testid={"light-arrow-icon"} style={{ margin: "15px" }} />
+            <Link width={50} height={50} data-testid={"link-icon"} style={{ margin: "15px" }} />
+            <Login width={50} height={50} data-testid={"login-icon"} style={{ margin: "15px" }} />
+            <Logora width={50} height={50} data-testid={"logora-icon"} style={{ margin: "15px" }} />
+            <Mail width={50} height={50} data-testid={"mail-icon"} style={{ margin: "15px" }} />
+            <MobileClose width={50} height={50} data-testid={"mobile-close-icon"} style={{ margin: "15px" }} />
+            <MobileMenu width={50} height={50} data-testid={"mobile-menu-icon"} style={{ margin: "15px" }} />
+            <Next width={50} height={50} data-testid={"next-icon"} style={{ margin: "15px" }} />
+            <OpenBlank width={50} height={50} data-testid={"open-blank-icon"} style={{ margin: "15px" }} />
+            <OrderedList width={50} height={50} data-testid={"ordered-list-icon"} style={{ margin: "15px" }} />
+            <Point width={50} height={50} data-testid={"point-icon"} style={{ margin: "15px" }} />
+            <Question width={50} height={50} data-testid={"question-icon"} style={{ margin: "15px" }} />
+            <Refresh width={50} height={50} data-testid={"refresh-icon"} style={{ margin: "15px" }} />
+            <Reply width={50} height={50} data-testid={"reply-icon"} style={{ margin: "15px" }} />
+            <Search width={50} height={50} data-testid={"search-icon"} style={{ margin: "15px" }} />
+            <Send width={50} height={50} data-testid={"send-icon"} style={{ margin: "15px" }} />
+            <Share width={50} height={50} data-testid={"share-icon"} style={{ margin: "15px" }} />
+            <SmallArrow width={50} height={50} data-testid={"small-arrow-icon"} style={{ margin: "15px" }} />
+            <Source width={50} height={50} data-testid={"source-icon"} style={{ margin: "15px" }} />
+            <Suggestion width={50} height={50} data-testid={"suggestion-icon"} style={{ margin: "15px" }} />
+            <Twitter width={50} height={50} data-testid={"twitter-icon"} style={{ margin: "15px" }} />
+            <Underline width={50} height={50} data-testid={"underline-icon"} style={{ margin: "15px" }} />
+            <Upvote width={50} height={50} data-testid={"upvote-icon"} style={{ margin: "15px" }} />
+            <User width={50} height={50} data-testid={"user-icon"} style={{ margin: "15px" }} />
+            <Votebox width={50} height={50} data-testid={"vote-box-icon"} style={{ margin: "15px" }} />
+            <Versus width={50} height={50} data-testid={"versus-icon"} style={{ margin: "15px" }} />
+            <CheckCircle width={50} height={50} data-testid={"circlecheck-icon"} style={{ margin: "15px" }} />
+            <MinusCircle width={50} height={50} data-testid={"MinusCircle-icon"} style={{ margin: "15px" }} />
+            <Flag width={50} height={50} data-testid={"flag-icon"} style={{ margin: "15px" }} />
+            <PauseCircle width={50} height={50} data-testid={"PauseCircle-icon"} style={{ margin: "15px" }} />
+
+        </div>
+    )
+};

package/src/components/icons/spiegel_icons/SpiegelIcons.test.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { SpiegelIconsLibrary } from "./SpiegelIcons.stories";
+import { render, screen } from '@testing-library/react';
+
+describe('Spiegel icons', () => {
+    it ('renders SpiegelIconsLibrary component', () => {  
+        render(<SpiegelIconsLibrary />);
+
+        const versusIcon = screen.getByTestId("versus-icon");
+        expect(versusIcon).toBeTruthy();
+        
+        const alarmIcon = screen.getByTestId("alarm-icon");
+        expect(alarmIcon).toBeTruthy();
+    })
+});

package/src/components/icons/spiegel_icons/Suggestion.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Suggestion = (props) => (
+    <svg viewBox="0 0 50 50" fill="black" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path fillRule="evenodd" clipRule="evenodd" d="M13.5892 26.0302C12.1456 24.2269 10.7535 22.0697 10.4121 17.3953C10.4362 9.70606 16.971 3.41206 24.8844 3.41206C32.7978 3.41206 39.3327 9.70606 39.3567 17.3953C39.0153 22.0713 37.6289 24.2299 36.189 26.0329C35.9796 26.2951 35.7624 26.5561 35.5419 26.821C34.1929 28.4416 32.719 30.2123 32.1407 33.3438L32.1206 33.4524V36.4573C32.1206 36.8569 31.7966 37.1809 31.397 37.1809H18.3719C17.9722 37.1809 17.6482 36.8569 17.6482 36.4573V33.4549L17.6291 33.3487C17.0621 30.206 15.5839 28.433 14.2299 26.809C14.0117 26.5473 13.7966 26.2893 13.5892 26.0302ZM24.8844 1C15.7009 1 8 8.32177 8 17.4378V17.4808L8.00306 17.5237C8.37983 22.8007 10.0101 25.4189 11.7062 27.5376C11.9484 27.8402 12.1847 28.1257 12.4133 28.4019C13.7227 29.984 14.7777 31.2587 15.2362 33.6734V36.4573C15.2362 38.1891 16.6401 39.593 18.3719 39.593H18.6454L19.1464 43.3314L19.3117 44.7387C19.5971 47.1685 21.6563 49 24.1029 49H25.6754C28.1245 49 30.1849 47.1649 30.4673 44.7322L30.6301 43.3301L31.1251 39.593H31.397C33.1288 39.593 34.5327 38.1891 34.5327 36.4573V33.676C35.0008 31.2674 36.0544 29.9924 37.3579 28.4148C37.5893 28.1348 37.8286 27.8452 38.0738 27.5381C39.7669 25.418 41.3891 22.799 41.7658 17.5237L41.7688 17.4808V17.4378C41.7688 8.32177 34.0679 1 24.8844 1ZM29.1786 39.593H20.5923L20.9479 42.2462H28.8272L29.1786 39.593ZM21.2282 44.5135L21.1885 44.1759H28.5893L28.5506 44.5097C28.3811 45.9693 27.1448 47.0704 25.6754 47.0704H24.1029C22.6349 47.0704 21.3994 45.9715 21.2282 44.5135Z"/>
+    </svg>
+)

package/src/components/icons/spiegel_icons/Twitter.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export const Twitter = (props) => (
+  <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+  </svg>
+)

package/src/components/icons/spiegel_icons/Underline.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Underline = (props) => (
+    <svg viewBox="0 0 50 50" fill="black" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clipPath="url(#clip0_2638_46095)">
+            <path fillRule="evenodd" clipRule="evenodd" d="M19.6972 0H5V25.0101C5 28.4775 6.01479 32.5546 9.09083 35.763C12.1881 38.9936 17.1615 41.122 24.6267 41.0849C32.085 41.0479 36.9733 38.919 40.0149 35.7136C43.0326 32.5333 44.0116 28.5243 44.1384 25.147L44.1395 25.1176V0H29.3001V22.44C29.3001 23.7391 29.2206 24.9237 28.678 25.7975C28.2389 26.5048 27.2738 27.3379 24.6189 27.3379C21.758 27.3379 20.7596 26.5847 20.332 25.9671C19.8043 25.205 19.6972 24.0827 19.6972 22.44V0ZM8.14092 25.0101V3.14092H16.5562V22.44C16.5562 23.9625 16.5859 26.0744 17.7496 27.7551C19.0134 29.5804 21.2612 30.4788 24.6189 30.4788C28.0106 30.4788 30.1714 29.3468 31.3464 27.4544C32.418 25.7285 32.441 23.679 32.441 22.44V3.14092H40.9986V25.058C40.8849 27.9608 40.0471 31.1165 37.7365 33.5516C35.4421 35.9696 31.4734 37.9099 24.6111 37.944C17.7557 37.9781 13.7049 36.0372 11.3581 33.5894C8.99005 31.1194 8.14092 27.9087 8.14092 25.0101ZM8.36134 46.4182C7.37226 46.4182 6.57046 47.2201 6.57046 48.2091C6.57046 49.1982 7.37226 50 8.36134 50H40.7782C41.7673 50 42.5691 49.1982 42.5691 48.2091C42.5691 47.2201 41.7673 46.4182 40.7782 46.4182H8.36134Z" />
+        </g>
+        <defs>
+            <clipPath id="clip0_2638_46095">
+                <rect width="50" height="50" fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+);

package/src/components/icons/spiegel_icons/Upvote.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Upvote = (props) => (
+    <svg viewBox="0 0 27 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M24.7554 8.0429C24.2457 7.47999 23.6157 7.02861 22.9081 6.71931C22.2004 6.41002 21.4317 6.25003 20.654 6.25019H16.3177L16.683 4.12415C16.8122 3.37546 16.6563 2.60721 16.2437 1.9595C15.831 1.3118 15.1892 0.827807 14.4352 0.595806C13.6812 0.363805 12.8652 0.399253 12.1362 0.695685C11.4072 0.992116 10.8137 1.52978 10.464 2.21061L8.38333 6.25019H5.43525C3.99426 6.25184 2.61279 6.80111 1.59386 7.7775C0.574922 8.7539 0.00172608 10.0777 0 11.4585L0 16.6669C0.00172608 18.0477 0.574922 19.3715 1.59386 20.3479C2.61279 21.3243 3.99426 21.8735 5.43525 21.8752H19.893C21.2013 21.8701 22.4641 21.4151 23.4518 20.5931C24.4395 19.771 25.0865 18.6366 25.275 17.396L26.0414 12.1877C26.1493 11.4489 26.0903 10.6965 25.8685 9.98137C25.6466 9.26628 25.267 8.60521 24.7554 8.0429ZM2.1741 16.6669V11.4585C2.1741 10.6297 2.51769 9.83487 3.12927 9.24882C3.74086 8.66276 4.57034 8.33352 5.43525 8.33352H7.60935V19.7919H5.43525C4.57034 19.7919 3.74086 19.4626 3.12927 18.8766C2.51769 18.2905 2.1741 17.4957 2.1741 16.6669ZM23.8836 11.895L23.1161 17.1033C23.0039 17.8471 22.6169 18.5275 22.0254 19.0209C21.4339 19.5143 20.6772 19.7879 19.893 19.7919H9.78346V8.05644C9.8859 7.97092 9.97071 7.86774 10.0335 7.75227L12.413 3.13248C12.5023 2.97824 12.6284 2.84649 12.7811 2.74807C12.9338 2.64964 13.1088 2.58734 13.2915 2.56629C13.4742 2.54524 13.6595 2.56605 13.8322 2.62699C14.0049 2.68793 14.1601 2.78728 14.2849 2.91686C14.3917 3.03586 14.4698 3.17599 14.5136 3.32724C14.5574 3.47849 14.5658 3.63713 14.5382 3.79186L13.9643 7.12519C13.9391 7.27413 13.9479 7.42653 13.9903 7.57186C14.0326 7.71719 14.1073 7.85197 14.2094 7.96689C14.3114 8.0818 14.4383 8.1741 14.5812 8.23741C14.7241 8.30071 14.8797 8.33351 15.0372 8.33352H20.654C21.1207 8.33346 21.5821 8.42943 22.0069 8.61493C22.4316 8.80043 22.8098 9.07114 23.116 9.40877C23.4222 9.7464 23.6492 10.1431 23.7816 10.572C23.914 11.0009 23.9488 11.4521 23.8836 11.895Z" />
+    </svg>
+)

package/src/components/icons/spiegel_icons/User.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const User = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M7.5,13A4.5,4.5,0,1,1,12,8.5,4.505,4.505,0,0,1,7.5,13Zm0-7A2.5,2.5,0,1,0,10,8.5,2.5,2.5,0,0,0,7.5,6ZM15,23v-.5a7.5,7.5,0,0,0-15,0V23a1,1,0,0,0,2,0v-.5a5.5,5.5,0,0,1,11,0V23a1,1,0,0,0,2,0Zm9-5a7,7,0,0,0-11.667-5.217,1,1,0,1,0,1.334,1.49A5,5,0,0,1,22,18a1,1,0,0,0,2,0ZM17.5,9A4.5,4.5,0,1,1,22,4.5,4.505,4.505,0,0,1,17.5,9Zm0-7A2.5,2.5,0,1,0,20,4.5,2.5,2.5,0,0,0,17.5,2Z"/>
+    </svg>
+)

package/src/components/icons/spiegel_icons/Versus.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Versus = (props) => (
+    <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path 
+            d="M14.8686 11L11.8386 18H10.2386L7.21859 11H8.96859L11.0986 16L13.2586 11H14.8686ZM17.753 18.12C17.1997 18.12 16.663 18.0467 16.143 17.9C15.6297 17.7467 15.2164 17.55 14.903 17.31L15.453 16.09C15.753 16.31 16.1097 16.4867 16.523 16.62C16.9364 16.7533 17.3497 16.82 17.763 16.82C18.223 16.82 18.563 16.7533 18.783 16.62C19.003 16.48 19.113 16.2967 19.113 16.07C19.113 15.9033 19.0464 15.7667 18.913 15.66C18.7864 15.5467 18.6197 15.4567 18.413 15.39C18.213 15.3233 17.9397 15.25 17.593 15.17C17.0597 15.0433 16.623 14.9167 16.283 14.79C15.943 14.6633 15.6497 14.46 15.403 14.18C15.163 13.9 15.043 13.5267 15.043 13.06C15.043 12.6533 15.153 12.2867 15.373 11.96C15.593 11.6267 15.923 11.3633 16.363 11.17C16.8097 10.9767 17.353 10.88 17.993 10.88C18.4397 10.88 18.8764 10.9333 19.303 11.04C19.7297 11.1467 20.103 11.3 20.423 11.5L19.923 12.73C19.2764 12.3633 18.6297 12.18 17.983 12.18C17.5297 12.18 17.193 12.2533 16.973 12.4C16.7597 12.5467 16.653 12.74 16.653 12.98C16.653 13.22 16.7764 13.4 17.023 13.52C17.2764 13.6333 17.6597 13.7467 18.173 13.86C18.7064 13.9867 19.143 14.1133 19.483 14.24C19.823 14.3667 20.113 14.5667 20.353 14.84C20.5997 15.1133 20.723 15.4833 20.723 15.95C20.723 16.35 20.6097 16.7167 20.383 17.05C20.163 17.3767 19.8297 17.6367 19.383 17.83C18.9364 18.0233 18.393 18.12 17.753 18.12Z" 
+            fill="#FFF"
+        />
+    </svg>
+
+)

package/src/components/icons/spiegel_icons/Votebox.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Votebox = (props) => (
+    <svg viewBox="0 0 50 50" fill="black" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clipPath="url(#clip0_2638_39785)">
+            <path fillRule="evenodd" clipRule="evenodd" d="M4.6875 3.125H45.3125C46.1754 3.125 46.875 3.82456 46.875 4.6875V45.3125C46.875 46.1754 46.1754 46.875 45.3125 46.875H4.6875C3.82456 46.875 3.125 46.1754 3.125 45.3125V4.6875C3.125 3.82456 3.82456 3.125 4.6875 3.125ZM0 4.6875C0 2.09867 2.09867 0 4.6875 0H45.3125C47.9013 0 50 2.09867 50 4.6875V45.3125C50 47.9013 47.9013 50 45.3125 50H4.6875C2.09867 50 0 47.9013 0 45.3125V4.6875ZM36.65 15.5426C37.1798 14.8614 37.0571 13.8798 36.3759 13.35C35.6948 12.8202 34.7131 12.9429 34.1833 13.6241L20.8559 30.7593L15.8333 24.0625C15.3156 23.3721 14.3362 23.2322 13.6458 23.75C12.9555 24.2678 12.8156 25.2471 13.3333 25.9375L20.8108 35.9074L36.65 15.5426Z"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_2638_39785">
+            <rect width="50" height="50" fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+);

package/src/components/icons/spiegel_icons/index.js

@@ -0,0 +1,51 @@
+export { Alarm } from "./Alarm"
+export { Announcement } from "./Announcement"
+export { Arrow } from "./Arrow"
+export { Blockquote } from "./Blockquote"
+export { Bold } from "./Bold"
+export { Camera } from "./Camera"
+export { Chat } from "./Chat"
+export { Checkbox } from "./Checkbox"
+export { Check } from "./Check"
+export { Clap } from "./Clap"
+export { Clock } from "./Clock"
+export { Close } from "./Close"
+export { Code } from "./Code"
+export { Community } from "./Community"
+export { Crown } from "./Crown"
+export { Downvote } from "./Downvote"
+export { Ellipsis } from "./Ellipsis"
+export { ExpertBadge } from "./ExpertBadge"
+export { Facebook } from "./Facebook"
+export { Home } from "./Home"
+export { Italic } from "./Italic"
+export { LightArrow } from "./LightArrow"
+export { Link } from "./Link"
+export { Login } from "./Login"
+export { Logora } from "./Logora"
+export { Mail } from "./Mail"
+export { MobileClose } from "./MobileClose"
+export { MobileMenu } from "./MobileMenu"
+export { Next } from "./Next"
+export { OpenBlank } from "./OpenBlank"
+export { OrderedList } from "./OrderedList"
+export { Point } from "./Point"
+export { Question } from "./Question"
+export { Refresh } from "./Refresh"
+export { Reply } from "./Reply"
+export { Search } from "./Search"
+export { Send } from "./Send"
+export { Share } from "./Share"
+export { SmallArrow } from "./SmallArrow"
+export { Source } from "./Source"
+export { Suggestion } from './Suggestion';
+export { Twitter } from "./Twitter"
+export { Underline } from "./Underline"
+export { Upvote } from "./Upvote";
+export { User } from "./User"
+export { Votebox } from './Votebox';
+export { Versus } from'./Versus';
+export { CheckCircle } from './CheckCircle';
+export { MinusCircle} from './MinusCircle';
+export { Flag } from './Flag';
+export { PauseCircle} from './PauseCircle'

package/src/components/information/information_box/InformationBox.docs.mdx

@@ -0,0 +1,28 @@
+---
+description: A box information component.
+---
+
+import { InformationBox } from './InformationBox';
+import { IntlProvider } from 'react-intl';
+
+A box that renders a piece of information with title, description, icon and link redirection.
+
+It should be wrapped around [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+### Component usage
+```js
+import InformationBox from '@logora/debate.box.information_box';
+```
+```js
+<IntlProvider locale="en">
+    <InformationBox 
+        icon={YourIcon}
+        title={"Your title"}
+        points={100} 
+        description={"Your description"}
+        textLink={"Your text link"}
+        link={"Router link"}
+        isActive={false}
+    />
+</IntlProvider>
+```

package/src/components/information/information_box/InformationBox.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styles from './InformationBox.module.scss';
+import { Icon } from '@logora/debate/icons/icon';
+import { Link } from '@logora/debate/action/link';
+import { useIntl, FormattedMessage } from "react-intl";
+import PropTypes from "prop-types";
+
+export const InformationBox = ({ icon, title, points, description, textLink, link, isActive = false}) => {
+    const intl = useIntl();
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.title}>
+                { icon && <div className={styles.icon} data-testid="icon">{icon}</div> }
+                <span>{ title }</span>
+            </div>
+            <div className={styles.point}>
+                <span className={styles.pointNumber}>
+                    <FormattedMessage id="information.information_box.eloquence_point" values={{ count: points }} defaultMessage={"From {count} eloquence points"}/>
+                </span>
+            </div>
+            <div className={styles.text}>
+                <span>{ description }</span>
+            </div>
+            {isActive ?
+                <div className={styles.link}>
+                    <Link to={link}>
+                        <span>{ textLink }</span>
+                        <Icon name="lightArrow" width={10} height={10} />
+                    </Link>
+                </div>
+            :
+                <span className={styles.moduleNotActive}>{intl.formatMessage({ id: "information.information_box.module_not_active", defaultMessage: "Module not available on this debate space" })}</span>
+            }
+        </div>
+  )
+};
+
+InformationBox.propTypes = {
+    /** Icon to display */
+    icon: PropTypes.any,
+    /** Box title */
+    title: PropTypes.string,
+    /** Points reward */
+    points: PropTypes.number,
+    /** Box description */
+    description: PropTypes.string,
+    /** Link's text */
+    textLink: PropTypes.string,
+    /** Router link */
+    link: PropTypes.string,
+    /** If true, enable link and redirectio */
+    isActive: PropTypes.bool,
+};

package/src/components/information/information_box/InformationBox.module.scss

@@ -0,0 +1,92 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    display: flex !important;
+    flex-direction: column !important;
+    @include spacing.p(3, xs);
+    height: 100%;
+    row-gap: spacing.$box-spacing;
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+}
+
+.icon {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    max-height: 30px;
+    border-radius: 50%;
+    background-color: theme.$call-primary;
+    @include spacing.mr(2, xs);
+    svg {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        fill: theme.$text-light;
+    }
+}
+
+.title {
+    display: flex !important;
+    align-items: center !important;
+    font-size: theme.$font-size-large;
+    font-weight: theme.$font-weight-bold;
+    color: theme.$text-primary;
+}
+
+.point {
+    font-weight: theme.$font-weight-bold;
+    svg {
+        display: inline-block;
+        vertical-align: middle;
+        @include spacing.mr(1, xs);
+    }
+    .pointNumber {
+        @include spacing.mx(1, xs);
+    }
+}
+
+.text {
+    height: 100%;
+    color: theme.$text-primary;
+}
+
+.textSpacing {
+    @include spacing.mr(1, xs);
+}
+
+.link {
+    display: flex !important;
+    align-items: center !important;
+    @include spacing.px(3, xs);
+    @include spacing.py(2, xs);
+    width: fit-content;
+    border: 1px solid;
+    border-color: theme.$text-primary;
+    border-radius: theme.$box-border-radius;
+    cursor: pointer;
+    svg {
+        display: inline-block;
+        vertical-align: middle;
+        @include spacing.ml(2, xs);
+        transform: rotate(-90deg);
+        fill: theme.$text-primary;
+    }
+    a {
+        color: theme.$text-primary !important;
+        text-decoration: none;
+    }
+    &:hover {
+        opacity: 0.9;
+    }
+}
+
+.moduleNotActive {
+    font-size: theme.$font-size-extra-small;
+    color: theme.$text-secondary;
+    font-style: italic;
+}

package/src/components/information/information_box/InformationBox.stories.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { InformationBox } from './InformationBox';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from "react-router-dom";
+import { Suggestion } from '@logora/debate/icons/regular_icons';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+    title: 'Information/Information Box',
+    component: InformationBox,
+    args: {
+        title: 'Suggestion',
+        points: 100,
+        description: 'Propose debate questions and support user suggestions that you find relevant.',
+        textLink: 'View suggestions',
+        link: 'https://example.fr/test/',
+        isActive: true,
+        withIcon: true
+    },
+    argTypes: {
+        title: { control: 'text' },
+        points: { control: 'number' },
+        description: { control: 'text' },
+        textLink: { control: 'text' },
+        link: { control: 'text' },
+        isActive: { control: 'boolean' },
+        withIcon: { control: 'boolean' }
+    },
+    render: ({ withIcon, ...args }) => (
+        <MemoryRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <InformationBox
+                        {...args}
+                        icon={withIcon ? <Suggestion /> : null}
+                    />
+                </IconProvider>
+            </IntlProvider>
+        </MemoryRouter>
+    )
+};
+
+export const DefaultInformationBox = {};
+
+export const DefaultInformationBoxWithDisabledModule = {
+    args: {
+        isActive: false
+    }
+};

package/src/components/information/information_box/InformationBox.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from 'react-intl';
+import { render, screen } from '@testing-library/react';
+import { InformationBox } from './InformationBox';
+import { Suggestion } from '@logora/debate/icons/regular_icons';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+it('should render with icon, title and description', () => {
+	const container = render(
+		<MemoryRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <InformationBox 
+                        icon={<Suggestion />}
+                        title={"Title"}
+                        points={100} 
+                        description={"Description"}
+                        textLink={"View suggestions"}
+                        link={"https://example.fr/test/"}
+                        isActive={true}
+                    />
+                </IconProvider>
+            </IntlProvider>
+        </MemoryRouter>
+	);
+    expect(container.queryByTestId('icon')).toBeTruthy();
+    expect(screen.getByText("Title")).toBeTruthy();
+    expect(screen.getByText("Description")).toBeTruthy();
+});
+
+it('should render with link', () => {
+	const container = render(
+		<MemoryRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <InformationBox 
+                        icon={<Suggestion />}
+                        title={"Title"}
+                        points={100} 
+                        description={"Description"}
+                        textLink={"View suggestions"}
+                        link={"/link"}
+                        isActive={true}
+                    />
+                </IconProvider>
+            </IntlProvider>
+        </MemoryRouter>
+	);
+    const link = screen.queryAllByRole("link");
+    expect(link).toHaveLength(1);
+    expect(link[0]).toHaveAttribute('href', '/link');
+});
+
+it('should render with disabled module text', () => {
+	const container = render(
+		<MemoryRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <InformationBox 
+                        icon={<Suggestion />}
+                        title={"Title"}
+                        points={100} 
+                        description={"Description"}
+                        textLink={"View suggestions"}
+                        link={"https://example.fr/test/"}
+                    />
+                </IconProvider>
+            </IntlProvider>
+        </MemoryRouter>
+	);
+    expect(screen.getByText("Module not available on this debate space")).toBeTruthy();
+});
+
+it('should render with points number', () => {
+	const container = render(
+		<MemoryRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <InformationBox 
+                        icon={<Suggestion />}
+                        title={"Title"}
+                        points={100} 
+                        description={"Description"}
+                        textLink={"View suggestions"}
+                        link={"https://example.fr/test/"}
+                    />
+                </IconProvider>
+            </IntlProvider>
+        </MemoryRouter>
+	);
+    expect(screen.getByText("From 100 eloquence points")).toBeTruthy();
+});

package/src/components/information/information_box/index.js

@@ -0,0 +1 @@
+export { InformationBox as default } from './InformationBox';

package/src/components/input/argument_input/ArgumentInput.docs.mdx

@@ -0,0 +1,29 @@
+---
+description: An input to submit an argument.
+labels: ['argument', 'input']
+---
+
+An input to write and submit an argument.
+
+It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import ArgumentInput from '@logora/debate.input.argument_input';
+```
+
+```js
+<ArgumentInput 
+    placeholder="Search"
+    onSubmit={() => {}}
+    groupId={23}
+    groupName={"My name"}
+    positions={[{id: 2, name: "Yes"}, {id: 3, name: "No"}]}
+    disabledPositions={[]}
+    listId={"argumentList"}
+    positionId={2}
+    hideSourceAction={false}
+    avatarSize={48}
+/>
+```