@logora/debate 0.1.0

package/src/components/debate/debate_box/DebateBox.module.scss

@@ -0,0 +1,209 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.debateBox {
+  position: relative;
+  font-size: theme.$font-size-normal;
+  border: theme.$box-border;
+  box-shadow: theme.$box-shadow;
+  border-radius: theme.$box-border-radius;
+  background-color: theme.$background-color-primary;
+  @include spacing.m(0, xs);
+  @include spacing.p(0, xs);
+}
+
+.imageLink {
+  display: block !important;
+}
+
+.debateBoxImage {
+  width: 100%;
+  aspect-ratio: theme.$img-aspect-ratio;
+  object-fit: cover;
+  cursor: pointer;
+  border-top-right-radius: theme.$box-border-radius;
+  border-top-left-radius: theme.$box-border-radius;
+}
+
+.debateBoxImageBox {
+  position: relative;
+}
+
+.debateSuggestion {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  position: absolute;
+  gap: spacing.$spacer-xxs;
+  right: spacing.$spacer;
+  top: spacing.$spacer;
+  @include spacing.px(2.5, xs);
+  @include spacing.py(2, xs);
+  background-color: theme.$call-primary;
+  border-radius: theme.$box-border-radius;
+  max-width: 80%;
+  font-size: theme.$font-size-small;
+  span {
+    color: theme.$text-light;
+    font-size: theme.$font-size-extra-small;
+  }
+  .authorSuggestion {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 93%;
+  }
+  .authorName {
+    @include spacing.ml(1, xs);
+  }
+  svg {
+    fill: theme.$text-light;
+  }
+}
+
+.inactiveDebate {
+  @extend .debateSuggestion;
+  top: unset;
+  left: spacing.$spacer;
+  bottom: spacing.$spacer;
+  right: unset;
+  color: theme.$text-light;
+  @include spacing.px(2.5, xs);
+  @include spacing.py(2, xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 93%;
+  font-size: theme.$font-size-normal;
+}
+
+.debateBoxBody {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$box-spacing;
+  padding: spacing.$box-spacing;
+}
+
+.subApplication {
+  > img {
+    height: 20px;
+    @include spacing.mr(2, xs);
+  }
+  @include spacing.mb(3, xs);
+  color: theme.$text-secondary;
+  font-size: theme.$font-size-extra-small;
+  display: flex;
+  align-items: center;
+}
+
+.debateBoxTitle {
+  font-size: theme.$font-size-medium;
+  font-family: theme.$box-title-font-family;
+}
+
+.debateBoxTitle {
+  font-weight: theme.$font-weight-bold;
+  min-height: 2.7em;
+  line-height: theme.$line-height-normal;
+  a {
+    color: theme.$text-primary;
+    &:hover{
+      color: theme.$text-primary;
+      text-decoration: underline;
+    }
+  }
+}
+
+.debateTitle {
+  display: block;
+  @include display.line-clamp(2);
+  font-size: theme.$font-size-medium;
+  line-height: theme.$line-height-normal;
+  &.debateTitleMobile{
+    -webkit-line-clamp: 3;
+  }
+}
+
+.debateBoxFooter {
+  font-size: theme.$font-size-extra-small !important;
+  justify-content: space-between;
+  min-height: 40px;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  @include spacing.p(0, xs);
+  width: 100% !important;
+}
+
+.debateBoxFooter svg {
+  fill: theme.$text-primary;
+}
+
+.debateParticipantsBox {
+  display: flex !important;
+  flex-direction: row !important;
+  @include spacing.p(0, xs);
+}
+
+.debateParticipantsEmpty {
+  font-style: italic;
+  font-size: theme.$font-size-extra-small;
+}
+
+.debateParticipantItem {
+  margin-right: -0.5em !important;
+  cursor: pointer;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.debateBoxNumbers {
+  font-size: theme.$font-size-normal;
+  line-height: theme.$line-height-none;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-end !important;
+  justify-content: flex-end !important;
+  @include spacing.p(0, xs);
+  min-width: 0;
+  flex: 1;
+}
+
+.debateBoxNumbersText {
+  @include spacing.ml(3, xs);
+  display: flex !important;
+  align-items: baseline !important;
+  line-height: theme.$line-height-loose;
+  min-width: 0;
+  justify-content: flex-end !important;
+}
+
+.debateBoxPercentage {
+  flex-shrink: 0;
+  white-space: nowrap;
+  @include spacing.mr(1, xs);
+}
+
+.debateBoxPositionName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.participantsCountBox {
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
+  background: theme.$background-color-secondary;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: theme.$text-primary;
+  font-size: theme.$font-size-extra-small;
+  line-height: theme.$line-height-tight;
+}

package/src/components/debate/debate_box/DebateBox.stories.jsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import { DebateBox } from './DebateBox';
+import { Location } from '@logora/debate/util/location';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" });
+let DebateShowLocation = new Location('espace-debat/group/:debateSlug', { debateSlug: "" });
+
+const routes = {
+    userShowLocation: UserShowLocation,
+    debateShowLocation: DebateShowLocation
+};
+
+const createUser = () => {
+    return {
+        id: faker.number.int(10000000),
+        hash_id: faker.lorem.slug(),
+        first_name: faker.person.firstName(),
+        last_name: faker.person.lastName(),
+        slug: faker.lorem.slug(),
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName(),
+        description: null,
+        last_activity: faker.date.recent(),
+        role: 'contributor',
+        is_admin: false,
+        points: 41,
+        eloquence_title: null,
+        occupation: null
+    };
+};
+
+const participants = Array.from([1, 2, 3, 4, 5], () => createUser());
+
+const debate = {
+    id: 243,
+    name: faker.music.songName(),
+    slug: faker.lorem.slug(),
+    description: null,
+    created_at: faker.date.recent(),
+    score: 0,
+    image_url: faker.image.url(),
+    banner_image_url: faker.image.url(),
+    votes_count: {
+        655: '2',
+        656: '6',
+        657: '0'
+    },
+    participants_count: 5,
+    group_context: {
+        id: 273,
+        name: faker.music.songName(),
+        created_at: faker.date.recent(),
+        positions: [
+            {
+                id: 655,
+                name: 'Oui',
+                language: 'en',
+                translation_entries: []
+            },
+            {
+                id: 656,
+                name: 'Non',
+                language: 'en',
+                translation_entries: []
+            },
+            {
+                id: 657,
+                name: 'Sans opinion',
+                language: 'en',
+                translation_entries: []
+            }
+        ],
+        author: createUser()
+    },
+    participants: participants,
+    language: 'en',
+    translation_entries: [],
+    sub_application: {
+        logo: 'https://pbs.twimg.com/profile_images/1608100070754238467/NXpjW55F_400x400.jpg',
+        name: 'Test Ocean'
+    }
+};
+
+const debateWithLongPositionNames = {
+    ...debate,
+    name: 'Should Germany strengthen its defense capabilities given current geopolitical tensions?',
+    group_context: {
+        ...debate.group_context,
+        positions: [
+            {
+                id: 655,
+                name: 'Yes, Germany should significantly increase defense spending and military capabilities',
+                language: 'en',
+                translation_entries: []
+            },
+            {
+                id: 656,
+                name: 'No, Germany should maintain current defense levels and focus on diplomacy',
+                language: 'en',
+                translation_entries: []
+            },
+            {
+                id: 657,
+                name: 'Undecided on this complex geopolitical matter',
+                language: 'en',
+                translation_entries: []
+            }
+        ]
+    }
+};
+
+const meta = {
+    title: 'Debate/Debate Box',
+    component: DebateBox,
+    args: {
+        debate,
+        allowDebateBranding: false
+    },
+    argTypes: {
+        debate: {
+            control: 'object'
+        },
+        allowDebateBranding: {
+            control: 'boolean'
+        }
+    },
+    render: ({ debate, allowDebateBranding }) => (
+        <BrowserRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ResponsiveProvider>
+                        <ConfigProvider routes={{ ...routes }} config={{ modules: {}, actions: { allowDebateBranding } }}>
+                            <DebateBox debate={debate} />
+                        </ConfigProvider>
+                    </ResponsiveProvider>
+                </IconProvider>
+            </IntlProvider>
+        </BrowserRouter>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultDebateBox = (props) => renderStory(props);
+
+export const BrandedDebateBox = (props) => renderStory({ allowDebateBranding: true, ...props });
+
+export const DebateBoxWithLongAnswers = (props) => renderStory({ debate: debateWithLongPositionNames, ...props });

package/src/components/debate/debate_box/DebateBox.test.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { DefaultDebateBox } from './DebateBox.stories';
+import { render } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+
+const createUser = () => {
+	return {
+		id: faker.number.int(10000000),
+		hash_id: faker.lorem.slug(),
+		first_name: faker.person.firstName(),
+		last_name: faker.person.lastName(),
+		slug: faker.lorem.slug(),
+		image_url: faker.image.avatarGitHub(),
+		full_name: faker.person.fullName(),
+		description: null,
+		last_activity: faker.date.recent(),
+		role: "contributor",
+		is_admin: false,
+		points: 41,
+		eloquence_title: null,
+		occupation: null
+	};
+};
+
+const participants = Array.from([1, 2, 3], s => createUser());
+
+const debate = {
+	id: 243,
+	name: faker.music.songName(),
+	slug: faker.lorem.slug(),
+	description: null,
+	created_at: faker.date.recent(),
+	score: 0,
+	image_url: faker.image.url(),
+	banner_image_url: faker.image.avatarGitHub(),
+	votes_count: {
+		655: "2",
+		656: "6",
+		657: "0"
+	},
+	participants_count: 3,
+	group_context: {
+		id: 273,
+		name: faker.music.songName(),
+		created_at: faker.date.recent(),
+		positions: [
+			{
+				id: 655,
+				name: "Oui",
+				language: "en",
+				translation_entries: []
+			},
+			{
+				id: 656,
+				name: "Non",
+				language: "fr",
+    			translation_entries: []
+			},
+			{
+				id: 657,
+				name: "Sans opinion",
+				language: "es",
+    			translation_entries: []
+			}
+		],
+		author: createUser()
+	},
+	participants: participants,
+	language: "en",
+    translation_entries: []
+}
+
+describe('DebateBox', () => {
+	it ('renders DebateBox component', () => {
+		const { getByText } = render(<DefaultDebateBox debate={debate} />);
+		expect(getByText(debate.name)).toBeInTheDocument();
+		expect(getByText(/75/)).toBeTruthy();
+		expect(getByText(/Non/)).toBeTruthy();
+	});
+
+	it ('renders DebateBox with correct links', () => {
+		const { getByText } = render(<DefaultDebateBox  debate={debate} />);
+		expect(getByText(debate.name).closest('a')).toHaveAttribute('href', '/espace-debat/group/' + debate.slug)
+	});
+
+	it ('renders DebateBox with long position names without breaking layout', () => {
+		const debateWithLongNames = {
+			...debate,
+			group_context: {
+				...debate.group_context,
+				positions: [
+					{
+						id: 655,
+						name: "This is a very long answer option that should be truncated properly with ellipsis",
+						language: "en",
+						translation_entries: []
+					},
+					{
+						id: 656,
+						name: "Another extremely long position name that would normally break the layout of the debate card",
+						language: "fr",
+						translation_entries: []
+					},
+					{
+						id: 657,
+						name: "Short",
+						language: "es",
+						translation_entries: []
+					}
+				]
+			}
+		};
+		const { container } = render(<DefaultDebateBox debate={debateWithLongNames} />);
+		const numberText = container.querySelector('.debateBoxNumbersText');
+		expect(numberText).toBeInTheDocument();
+	});
+});

package/src/components/debate/debate_box/index.js

@@ -0,0 +1 @@
+export { DebateBox } from './DebateBox';

package/src/components/dialog/announcement_dialog/AnnouncementDialog.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A component to display an announcement message.
+labels: ['announcement', 'dialog']
+---
+
+A component that shows a message with icon. Icon and content can be customized.
+
+It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import { AnnouncementDialog } from '@logora/debate.dialog.announcement_dialog';
+```
+
+```js
+<AnnouncementDialog 
+    icon={Icon}
+    message={"Your text"}
+    fullWidth={true}
+    className={classNameToPass}
+    iconClassName={iconClassNameToPass}
+/>
+```

package/src/components/dialog/announcement_dialog/AnnouncementDialog.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Icon } from '@logora/debate/icons/icon';
+import cx from 'classnames';
+import styles from './AnnouncementDialog.module.scss';
+import PropTypes from "prop-types";
+
+export const AnnouncementDialog = ({ message, icon: CustomIcon, fullWidth = false, className, iconClassName, children }) => {
+    return (
+        <div className={cx(styles.container, className, {[styles.fullWidth]: fullWidth})} role="status">
+            <div className={cx(styles.icon, iconClassName)}>
+                { CustomIcon ?
+                    <CustomIcon height={24} width={24} data-testid={"custom-icon"} />
+                :
+                    <Icon name="announcement" height={24} width={24} aria-hidden="true" data-testid={"announcement-icon"} />
+                }
+            </div>
+            <div className={styles.content}>
+                { message ? message : children }
+            </div>
+        </div>
+    )
+}
+
+AnnouncementDialog.propTypes = {
+    /** Icon to display */
+    icon: PropTypes.any,
+    /** Message to display */
+    message: PropTypes.string,
+    /** If `true`, dialog will take 100% width */
+    fullWidth: PropTypes.bool,
+    /** Class name passed to the dialog */
+    className: PropTypes.string,
+    /** Class name passed to the icon */
+    iconClassName: PropTypes.string,
+    /** Content to display if message is empty */
+    children: PropTypes.node,
+};

package/src/components/dialog/announcement_dialog/AnnouncementDialog.module.scss

@@ -0,0 +1,35 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    display: flex !important;
+    width: fit-content;
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    background: theme.$background-color-primary;
+    &.fullWidth {
+        width: 100%;
+    }
+}
+
+.icon {
+    display: flex !important;
+    align-items: center !important;
+    @include spacing.p(3, xs);
+    background-color: theme.$call-primary;
+    border-radius: theme.$box-border-radius 0 0 theme.$box-border-radius;
+    svg {
+        fill: transparent;
+        path {
+            fill: theme.$text-light;
+        }
+        circle {
+            stroke: theme.$text-light;
+        }
+    }
+}
+
+.content {
+    @include spacing.p(3, xs);
+}

package/src/components/dialog/announcement_dialog/AnnouncementDialog.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { AnnouncementDialog } from './AnnouncementDialog';
+import HomeIcon from './HomeIcon.dev';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+    title: 'Dialog/Announcement Dialog',
+    component: AnnouncementDialog,
+    args: {
+        message: 'An announcement message !',
+        fullWidth: false,
+        useCustomIcon: false
+    },
+    argTypes: {
+        message: { control: 'text' },
+        fullWidth: { control: 'boolean' },
+        useCustomIcon: { control: 'boolean' }
+    },
+    render: ({ useCustomIcon, ...args }) => (
+        <IconProvider library={regularIcons}>
+            <AnnouncementDialog
+                {...args}
+                icon={useCustomIcon ? HomeIcon : undefined}
+            />
+        </IconProvider>
+    )
+};
+
+export const DefaultAnnouncementDialog = {};
+
+export const AnnouncementDialogCustomIcon = {
+    args: {
+        useCustomIcon: true,
+        message: 'An announcement message width custom icon !'
+    }
+};
+
+export const AnnouncementDialogFullWidth = {
+    args: {
+        fullWidth: true,
+        message: 'An announcement message with full width !'
+    }
+};

package/src/components/dialog/announcement_dialog/AnnouncementDialog.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AnnouncementDialog } from './AnnouncementDialog';
+import { Announcement } from '@logora/debate/icons/regular_icons';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+describe('AnnouncementDialog', () => {
+    it('should render with the correct text', () => {
+        const dialog = render(
+            <IconProvider library={regularIcons}>
+                <AnnouncementDialog 
+                    message={"An announcement message !"}
+                />
+            </IconProvider>
+        );
+        expect(screen.getByText("An announcement message !")).toBeTruthy();
+        expect(dialog.getByTestId('announcement-icon')).toBeTruthy();
+        expect(dialog.queryByTestId('custom-icon')).toBeNull();
+    });
+
+    it('should render with the custom icon', () => {
+        const dialog = render(
+            <IconProvider library={regularIcons}>
+                <AnnouncementDialog 
+                    icon={Announcement}
+                    message={"An other announcement message !"}
+                />
+            </IconProvider>
+        );
+        expect(screen.getByText("An other announcement message !")).toBeTruthy();
+        expect(dialog.getByTestId('custom-icon')).toBeTruthy();
+        expect(dialog.queryByTestId('announcement-icon')).toBeNull();
+    });
+});

package/src/components/dialog/announcement_dialog/HomeIcon.dev.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HomeIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path d="m23.121 9.069-7.585-7.586a5.008 5.008 0 0 0-7.072 0L.879 9.069A2.978 2.978 0 0 0 0 11.19v9.817a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V11.19a2.978 2.978 0 0 0-.879-2.121ZM15 22.007H9v-3.934a3 3 0 0 1 6 0Zm7-1a1 1 0 0 1-1 1h-4v-3.934a5 5 0 0 0-10 0v3.934H3a1 1 0 0 1-1-1V11.19a1.008 1.008 0 0 1 .293-.707L9.878 2.9a3.008 3.008 0 0 1 4.244 0l7.585 7.586a1.008 1.008 0 0 1 .293.704Z" />
+  </svg>
+)
+
+export default HomeIcon;

package/src/components/dialog/announcement_dialog/index.js

@@ -0,0 +1 @@
+export { AnnouncementDialog } from './AnnouncementDialog';

package/src/components/dialog/confirm_modal/ConfirmModal.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: A modal to ask for confirmation.
+labels: ['modal', 'confirmation', 'confirm-modal']
+---
+
+A modal component that asks for user's confirmation. The modal shows two buttons, one to confirm, one to cancel.
+
+### Component usage
+
+```js
+import { ConfirmModal } from '@logora/debate.dialog.confirm_modal';
+```
+
+```js
+    <ModalProvider>
+        <ConfirmModal 
+            title="User confirmation"
+            question="Are you sure you want to start this debate ?"
+            confirmLabel="Yes"
+            cancelLabel="No"
+            onConfirmCallback={() => alert("Debate started !")}
+            onCancelCallback={() => alert("Debate cancelled !")}
+        />
+    </ModalProvider>
+```