@logora/debate 0.1.0

package/src/components/translation/translation_button/TranslationButton.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AuthProvider } from '@logora/debate/auth/use_auth';
+import { IntlProvider } from 'react-intl';
+import { TranslationButton } from './TranslationButton';
+
+const noop = () => null;
+
+const meta = {
+	title: 'Translation/Translation Button',
+	component: TranslationButton,
+	args: {
+		language: 'fr',
+		callback: noop
+	},
+	argTypes: {
+		language: { control: 'text' },
+		callback: { control: false }
+	},
+	render: (args) => (
+		<IntlProvider locale='en'>
+			<AuthProvider>
+				<TranslationButton {...args} />
+			</AuthProvider>
+		</IntlProvider>
+	)
+};
+
+export default meta;
+
+export const DefaultTranslationButton = {};

package/src/components/translation/translation_button/TranslationButton.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { TranslationButton } from './TranslationButton';
+import { AuthProvider } from '@logora/debate/auth/use_auth';
+import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
+
+const callback = vi.fn();
+
+it('should render with the correct text', () => {
+	const translationButton = render(
+		<IntlProvider locale='en'>
+			<AuthProvider>
+				<TranslationButton language="fr" callback={callback} />
+			</AuthProvider>
+		</IntlProvider>
+	);
+	const renderedButton = translationButton.getByText(/Translated from French - Show original/i);
+	expect(renderedButton).toBeTruthy();
+});
+
+it('should call callback func on click', async () => {
+	const translationButton = render(
+		<IntlProvider locale='en'>
+			<AuthProvider>
+				<TranslationButton language="fr" callback={callback} />
+			</AuthProvider>
+		</IntlProvider>
+	);
+	const renderedButton = translationButton.getByText(/Translated from French - Show original/i);
+	expect(renderedButton).toBeTruthy();
+
+    await userEvent.click(renderedButton);
+	expect(callback).toHaveBeenCalledTimes(1);
+});

package/src/components/translation/translation_button/index.js

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

package/src/components/user/author_box/AuthorBox.docs.mdx

@@ -0,0 +1,35 @@
+---
+description: A component to display a user's avatar image, name link and other information in a box.
+tags: ['author', 'avatar', 'user', 'image']
+---
+
+The AuthorBox component is used to display a user's avatar image, name link, points and occupation in a box.
+It uses [ConfigProvider](https://bit.cloud/logora/debate/data/config_provider) for routing.
+The avatar image is rendered using the [Avatar](https://bit.cloud/logora/debate/user/avatar) component.
+
+It must be inside react-intl's IntlProvider, ConfigProvider and be inside a Router.
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import { AuthorBox } from '@logora/debate.user.author_box';
+```
+
+```
+import { AuthorBox } from './AuthorBox';
+
+const author = {
+  hash_id: 'john-doe',
+  full_name: 'John Doe',
+  image_url: 'https://example.com/avatar.jpg',
+  points: 53
+};
+
+<AuthorBox 
+  slug={author.hash_id}
+  fullName={author.full_name}
+  avatarUrl={author.image_url}
+  points={author.points}
+/>
+```

package/src/components/user/author_box/AuthorBox.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useRoutes } from '@logora/debate/data/config_provider';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Avatar } from '@logora/debate/user/avatar';
+import { Link } from '@logora/debate/action/link';
+import { Icon } from '@logora/debate/icons/icon';
+import { getLocaleIcon } from '@logora/debate/util/lang_emojis';
+import styles from './AuthorBox.module.scss';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+export const AuthorBox = ({
+    fullName,
+    slug,
+    avatarUrl,
+    lastActivity,
+    showBadge = false,
+    points = 0,
+    eloquenceTitle,
+    occupation,
+    disableLinks = false,
+    isDeleted = false,
+    language = null,
+    languageDialect = null,
+}) => {
+    const intl = useIntl();
+    const routes = useRoutes();
+    const isOnline = (new Date(lastActivity) > Date.now());
+
+    return (
+        <div className={cx(styles.authorBox, "author-box")}>
+            {!slug || disableLinks || isDeleted ?
+                <Avatar avatarUrl={isDeleted ? null : avatarUrl} userName={fullName} isOnline={isOnline} size={48} />
+                :
+                <Link to={routes.userShowLocation.toUrl({ userSlug: slug })} className={styles.authorLink}>
+                    <Avatar avatarUrl={avatarUrl} userName={fullName} isOnline={isOnline} size={48} />
+                </Link>
+            }
+            <div className={styles.authorNameBox}>
+                <div className={styles.authorName}>
+                    <div className={styles.authorNameLine}>
+                        {!slug || disableLinks || isDeleted ?
+                            <span className={cx(styles.authorLink, { [styles.deleted]: isDeleted, [styles.linkDisabled]: !slug || disableLinks })}>
+                                {isDeleted ? intl.formatMessage({ id: "user.author_box.deleted", defaultMessage: "Deleted" }) : fullName}
+                            </span>
+                            :
+                            <div className={styles.authorLink}>
+                                <Link to={routes.userShowLocation.toUrl({ userSlug: slug })}>
+                                    {fullName}
+                                </Link>
+                            </div>
+                        }
+                        {showBadge && !isDeleted &&
+                            <div className={styles.expertContainer}>
+                                <Icon name="expertBadge" width={14} height={14} />
+                                <span className={styles.expertBadge}>{intl.formatMessage({ id: "user.author_box.expert", defaultMessage: "Journalist" })}</span>
+                            </div>
+                        }
+                        {language && languageDialect &&
+                            <div className={styles.languageContainer}>
+                                {getLocaleIcon(language, languageDialect)}
+                            </div>
+                        }
+                    </div>
+                </div>
+                {!isDeleted &&
+                    <>
+                        <div className={styles.authorPointsBox}>
+                            {points != null &&
+                                <div className={styles.authorPoints} aria-label={intl.formatMessage({ id: "user.author_box.aria_label", defaultMessage: "User points" })}>
+                                    <span>
+                                        {intl.formatNumber(points, { notation: 'compact', maximumFractionDigits: 1, roundingMode: "floor" })}
+                                        {" "}
+                                        <FormattedMessage
+                                            id="user.author_box.points"
+                                            defaultMessage={"points"}
+                                            values={{ count: points }}
+                                        />
+                                    </span>
+                                </div>
+                            }
+                            {eloquenceTitle &&
+                                <>
+                                    <span className={styles.separator}></span>
+                                    <div className={styles.authorEloquence}>
+                                        <span>{intl.formatMessage({ id: "gamification.badge_box." + eloquenceTitle + ".reward", defaultMessage: "Eloquence title" })}</span>
+                                    </div>
+                                </>
+                            }
+                        </div>
+                        {occupation &&
+                            <div className={styles.occupationBox}>
+                                <span className={styles.authorPoints}>
+                                    {occupation}
+                                </span>
+                            </div>
+                        }
+                    </>
+                }
+            </div>
+        </div>
+    )
+};
+
+AuthorBox.propTypes = {
+    /** User first name and last name combined */
+    fullName: PropTypes.string,
+    /** User avatar URL */
+    avatarUrl: PropTypes.string,
+    /** User slug used in the router link */
+    slug: PropTypes.string,
+    /** User last activity date time */
+    lastActivity: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    /** Whether an user has a special status or not */
+    showBadge: PropTypes.bool,
+    /** User eloquence points total */
+    points: PropTypes.number,
+    /** User eloquence title */
+    eloquenceTitle: PropTypes.string,
+    /** User occupation as in profession */
+    occupation: PropTypes.string,
+    /** Should a click on the user redirect on his/her profile */
+    disableLinks: PropTypes.bool,
+    /** Give information about the current status of the content displayed and whether to show the user as deleted or not */
+    isDeleted: PropTypes.bool,
+    /** User language */
+    language: PropTypes.string
+}

package/src/components/user/author_box/AuthorBox.module.scss

@@ -0,0 +1,110 @@
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+@use 'styles/spacing' as spacing;
+
+.authorBox {
+    display: flex !important;
+    flex-direction: row !important;
+    width: 100%;
+    gap: spacing.$spacer;
+    @include spacing.p(0, xs);
+    @include spacing.pr(2, xs);
+}
+
+.authorNameBox {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    @include display.text-truncate();
+    flex: 1;
+
+    @include display.media-breakpoint-down(sm) {
+        .authorNameBox {
+            font-size: theme.$font-size-small;
+        }
+    }
+}
+
+.authorName {
+    font-weight: theme.$font-weight-bold;
+    font-size: theme.$font-size-normal;
+    cursor: pointer;
+    color: theme.$text-primary;
+    line-height: theme.$line-height-loose;
+    @include spacing.pb(1, xs);
+}
+
+.authorLink {
+    @include display.text-truncate();
+}
+
+.authorName a {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+
+.authorName a:hover {
+    text-decoration: underline !important;
+    color: theme.$text-primary !important;
+}
+
+.authorNameLine {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: spacing.$spacer-sm;
+    .expertContainer, .deleted {
+        cursor: default;
+        color: theme.$text-secondary;
+    }
+    .linkDisabled {
+        cursor: default;
+        color: theme.$text-primary;
+    }
+    .expertContainer {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        align-items: center;
+        gap: spacing.$spacer-xs;
+    }
+    .expertBadge {
+        font-weight: theme.$font-weight-normal;
+        font-size: theme.$font-size-extra-small;
+        overflow: hidden;
+    }
+}
+
+.authorPointsBox {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    font-weight: theme.$font-weight-normal;
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    gap: spacing.$spacer-xs;
+}
+
+.occupationBox {
+    @extend .authorPointsBox;
+    align-items: flex-start !important;
+    @include spacing.pt(2, xs);
+}
+
+.authorPoints {
+    color: theme.$text-secondary;
+}
+
+.authorEloquence {
+    color: theme.$text-secondary;
+    @include display.text-truncate();
+}
+
+.separator {
+    width: 3px;
+    min-width: 3px;
+    height: 3px;
+    background-color: theme.$text-secondary;
+    border-radius: 50%;
+}

package/src/components/user/author_box/AuthorBox.stories.jsx

@@ -0,0 +1,193 @@
+export default {
+  title: 'User/Author Box',
+  component: AuthorBox,
+  args: {},
+  argTypes: {}
+};
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthorBox } from './AuthorBox';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const author = {
+  image_url: faker.image.avatarGitHub(),
+  full_name: faker.person.fullName(),
+  hash_id: faker.lorem.slug(),
+  points: 52,
+  eloquence_title: faker.science.chemicalElement().symbol,
+  occupation: faker.vehicle.bicycle(),
+  last_activity: faker.date.recent(),
+  description: faker.person.jobTitle(),
+};
+
+
+const routes = {
+  userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+export const DefaultAuthorBox = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IntlProvider locale="en">
+          <IconProvider library={regularIcons}>
+            <AuthorBox
+              fullName={author.full_name}
+              avatarUrl={author.image_url}
+              slug={author.hash_id}
+              points={author.points}
+              showBadge={false}
+            />
+          </IconProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+export const AuthorBoxWithoutLinks = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IntlProvider locale="en">
+          <IconProvider library={regularIcons}>
+            <AuthorBox
+              fullName={author.full_name}
+              avatarUrl={author.image_url}
+              slug={author.hash_id}
+              points={author.points}
+              showBadge={false}
+              disableLinks
+            />
+          </IconProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+export const AuthorBoxWithTitle = () => {
+    return (
+      <BrowserRouter>
+        <ConfigProvider routes={{ ...routes }}>
+          <IntlProvider locale="en">
+            <IconProvider library={regularIcons}>
+              <AuthorBox 
+                fullName={author.full_name}
+                avatarUrl={author.image_url}
+                slug={author.hash_id}
+                points={author.points}
+                eloquenceTitle={author.eloquence_title}
+              />
+            </IconProvider>
+          </IntlProvider>
+        </ConfigProvider>
+      </BrowserRouter>
+    );
+};
+
+export const AuthorBoxWithOccupation = () => {
+    return (
+      <BrowserRouter>
+        <ConfigProvider routes={{ ...routes }}>
+          <IntlProvider locale="en">
+            <IconProvider library={regularIcons}>
+              <AuthorBox 
+                fullName={author.full_name}
+                avatarUrl={author.image_url}
+                slug={author.hash_id}
+                points={author.points}
+                occupation={author.occupation}
+              />
+            </IconProvider>
+          </IntlProvider>
+        </ConfigProvider>
+      </BrowserRouter>
+    );
+};
+
+export const AuthorBoxExpert = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IntlProvider locale="en">
+          <IconProvider library={regularIcons}>
+            <AuthorBox 
+              fullName={author.full_name}
+              avatarUrl={author.image_url}
+              slug={author.hash_id}
+              points={author.points}
+              showBadge={true}
+            />
+          </IconProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+export const AuthorBoxDeletedUser = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IntlProvider locale="en">
+          <IconProvider library={regularIcons}>
+            <AuthorBox 
+              fullName={author.full_name}
+              avatarUrl={author.image_url}
+              slug={author.hash_id}
+              points={author.points}
+              isDeleted={true}
+            />
+          </IconProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+export const AuthorBoxWithoutPoints = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IntlProvider locale="en">
+          <IconProvider library={regularIcons}>
+            <AuthorBox 
+              fullName={author.full_name}
+              avatarUrl={author.image_url}
+              slug={author.hash_id}
+              points={null}
+              showBadge={true}
+            />
+          </IconProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+export const AuthorBoxWithLang = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IntlProvider locale="en">
+          <IconProvider library={regularIcons}>
+            <AuthorBox 
+              fullName={author.full_name}
+              avatarUrl={author.image_url}
+              slug={author.hash_id}
+              language={"fr-CH"}
+              showBadge={false}
+            />
+          </IconProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};