@logora/debate 0.1.0

package/src/components/styles/spacing/_spacing.scss

@@ -0,0 +1,107 @@
+@use "sass:map";
+@use 'styles/display' as display;
+
+$spacer: var(--space-unit, 1em) !default;
+$spacer-xxs: var(--spacer-xxs, calc($spacer * .25));
+$spacer-xs: var(--spacer-xs, calc($spacer * .325));
+$spacer-sm: var(--spacer-sm, calc($spacer * .5));
+$spacer-md: var(--spacer-md, calc($spacer * .75));
+$spacer-lg: var(--spacer-lg, calc($spacer * 1.5));
+$spacer-xl: var(--spacer-xl, calc($spacer * 3));
+$spacers: () !default;
+$spacers: map.merge(
+        (
+                0: 0,
+                1: $spacer-xxs,
+                1.5: $spacer-xs,
+                2: $spacer-sm,
+                2.5: $spacer-md,
+                3: $spacer,
+                4: $spacer-lg,
+                5: $spacer-xl
+        ),
+        $spacers
+);
+$box-spacing: var(--box-spacing, $spacer);
+
+@mixin m($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    margin: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin mt($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    margin-top: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin ml($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    margin-left: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin mb($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    margin-bottom: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin mr($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    margin-right: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin my($value, $breakpoint) {
+  @include mt($value, $breakpoint);
+  @include mb($value, $breakpoint);
+}
+
+@mixin mx($value, $breakpoint) {
+  @include mr($value, $breakpoint);
+  @include ml($value, $breakpoint);
+}
+
+// PADDINGS
+
+@mixin p($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    padding: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin pt($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    padding-top: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin pl($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    padding-left: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin pb($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    padding-bottom: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin pr($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    padding-right: map.get($spacers, $value) !important;
+  }
+}
+
+@mixin py($value, $breakpoint) {
+  @include pt($value, $breakpoint);
+  @include pb($value, $breakpoint);
+}
+
+@mixin px($value, $breakpoint) {
+  @include pr($value, $breakpoint);
+  @include pl($value, $breakpoint);
+}

package/src/components/styles/spacing/index.scss

@@ -0,0 +1 @@
+@forward './spacing';

package/src/components/styles/spacing/spacing.docs.mdx

@@ -0,0 +1,8 @@
+---
+description: SASS mixins for margin and padding.
+---
+
+### Component usage
+```scss
+    @use '@logora/debate.styles.spacing' as spacing;
+```

package/src/components/styles/tabs/_tabs.scss

@@ -0,0 +1,159 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+:global(.MuiTab-root:focus) {
+    outline: none !important;
+}
+
+.navTabs {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: spacing.$spacer-lg;
+    white-space: nowrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    border-bottom: 0 !important;
+    list-style: none;
+
+    @include display.media-breakpoint-down(xs) {
+        font-size: theme.$font-size-normal;
+        gap: spacing.$spacer;
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .navItem {
+        margin-bottom: -1px;
+    }
+
+    .navLink {
+        border: 1px solid transparent;
+        border-top-left-radius: theme.$box-border-radius;
+        border-top-right-radius: theme.$box-border-radius;
+
+        &:hover,
+        &:focus {
+            border-color: theme.$text-tertiary theme.$text-tertiary theme.$darken-text-tertiary;
+        }
+
+        &.disabled {
+            color: theme.$darkest-text-tertiary;
+            background-color: transparent;
+            border-color: transparent;
+        }
+    }
+
+    .navLink.active,
+    .navItem.show .navLink {
+        color: theme.$text-secondary;
+        background-color: theme.$background-color-primary;
+        border-color: theme.$darken-text-tertiary theme.$darken-text-tertiary theme.$background-color-primary;
+    }
+}
+
+.navLink {
+    display: block;
+    padding-bottom: spacing.$spacer-xs;
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+
+    // Disabled state lightens text
+    &.disabled {
+        color: theme.$darkest-text-tertiary;
+        pointer-events: none;
+        cursor: default;
+    }
+}
+
+.tabContent {
+    >.tabPane {
+        display: none;
+    }
+
+    >.active {
+        display: block;
+    }
+}
+
+.navTabs .navItem {
+    cursor: pointer;
+    position: relative;
+}
+
+.navLink.active,
+.navLink:focus,
+.navLink.active:hover {
+    background: transparent;
+    border-width: 0 !important;
+}
+
+.navLink {
+    border: none !important;
+    color: theme.$text-primary;
+    outline: 0;
+}
+
+.navLink.active,
+.navLink:hover {
+    border: none !important;
+    color: theme.$text-primary !important;
+    background: transparent;
+    font-weight: theme.$font-weight-bold;
+}
+
+.navLink::after {
+    content: "";
+    background-color: theme.$text-primary;
+    height: 4px;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: -1px;
+    transition: all 250ms ease 0s;
+    transform: scale(0);
+}
+
+.navLink.active::after,
+.navTabs>.navItem:hover>.navLink::after {
+    transform: scale(1);
+}
+
+.navLink.active:hover {
+    background: transparent;
+}
+
+.tabPane {
+    padding: 10px 0;
+    min-height: 50vh;
+}
+
+.tabContainer {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$spacer-lg;
+    @include spacing.mt(2.5, xs);
+
+    @include display.media-breakpoint-down(xs) {
+        gap: spacing.$spacer;
+    }
+}
+
+.tab {
+    color: theme.$text-primary !important;
+    @include spacing.px(0, xs);
+}
+
+.tabSelected {
+    color: theme.$text-primary !important;
+    font-weight: theme.$font-weight-bold !important;
+}
+
+.tabIndicator {
+    background: theme.$text-primary !important;
+}

package/src/components/styles/tabs/index.scss

@@ -0,0 +1 @@
+@forward './tabs';

package/src/components/styles/tabs/tabs.docs.mdx

@@ -0,0 +1,8 @@
+---
+description: SASS classes for tabs.
+---
+
+### Component usage
+```scss
+    @use '@logora/debate.styles.tabs' as tabs;
+```

package/src/components/styles/theme/_theme.scss

@@ -0,0 +1,51 @@
+$for-primary: var(--for-primary-color, #cc6a6d);
+$against-primary: var(--against-primary-color,#7980bb);
+$third-position-color-primary: var(--third-position-color-primary, #9b9b9b);
+$call-primary: var(--call-primary-color,  #434343);
+$info-primary: var(--source-primary, #4485C3);
+$success-primary: var(--success-primary, #4d9e33);
+$cancel-primary: var(--cancel-primary, #c73c49);
+$connected-green: var(--connected-green, #80d764);
+$announcement-primary: var(--announcement-primary, #cce5ff);
+$announcement-text-primary: var(--announcement-text-primary, #004085);
+$background-color-container: var(--background-color-container, white);
+$background-color-container-dark: var(--background-color-container-dark, #000000);
+$background-color-primary: var(--background-color-primary, white);
+$background-color-secondary: var(--background-color-secondary ,#E8E8E8);
+$box-shadow: var(--box-shadow, 0px 2px 5px rgba(7,42,68, 0.1));
+$box-shadow-main-container : var(--box-shadow-main-container, $box-shadow);
+$box-border: var(--box-border, 1px solid rgba(7,42,68, 0.1));
+$box-border-main-container: var(--box-border-main-container, $box-border);
+$box-border-radius: var(--box-border-radius, 6px);
+$button-shadow: var(--button-shadow, $box-shadow);
+$button-border: var(--button-border, $box-border);
+$button-border-radius: var(--button-border-radius, $box-border-radius);
+$text-primary: var(--text-primary, #222222);
+$text-secondary: var(--text-secondary, #5F5F5F);
+$text-tertiary: var(--text-tertiary, #fafafa);
+$text-light: var(--text-light, white);
+$font-weight-normal: var(--font-weight-normal, 400);
+$font-weight-bold: var(--font-weight-bold, 700);
+$darken-text-tertiary: var(--darken-text-tertiary, #F1EFED);
+$darkest-text-tertiary: var(--darkest-text-tertiary, #c7c7c7);
+$font-family: var(--font-family, 'Montserrat');
+$title-font-family: var(--title-font-family, $font-family);
+$box-title-font-family: var(--box-title-font-family, $font-family);
+$font-size-large: var(--font-size-large, 20px);
+$font-size-extra-large: var(--font-size-extra-large, 22px);
+$font-size-medium: var(--font-size-medium, 18px);
+$font-size-normal: var(--font-size-normal, 16px);
+$font-size-small: var(--font-size-small, 16px);
+$font-size-extra-small: var(--font-size-extra-small, 14px);
+$tag-border-color: var(--tag-border-color, $call-primary);
+$tag-text-color: var(--tag-text-color, $call-primary);
+$tag-text-color-active: var(--tag-text-color-active, white);
+$layout-mobile-margin: var(--layout-horizontal-margin, 0);
+$layout-max-width: 1400px;
+$line-height-none: var(--line-height-none, 1em);
+$line-height-tight: var(--line-height-tight, 1.08em);
+$line-height-normal: var(--line-height-normal, 1.26em);
+$line-height-loose: var(--line-height-loose, 1.38em);
+$modal-margin-top: var(--modal-margin-top, 0.5em);
+$modal-margin-bottom: var(--modal-margin-bottom, 0.5em);
+$img-aspect-ratio: var(--img-aspect-ratio, 16/9);

package/src/components/styles/theme/index.scss

@@ -0,0 +1 @@
+@forward './theme';

package/src/components/styles/theme/theme.docs.mdx

@@ -0,0 +1,89 @@
+---
+description: SASS variable declaration for the theme.
+---
+
+## Component usage
+```scss
+    @use '@logora/debate.styles.theme' as theme;
+```
+
+## Description
+
+
+This SASS file contains all the variables used for defining colors, fonts, borders, shadows, layout, and other styles. Below is a comprehensive list of all variables and their purposes:
+
+
+### Colors
+
+- **$for-primary**: Primary color for "for" elements (`#cc6a6d`).
+- **$against-primary**: Primary color for "against" elements (`#7980bb`).
+- **$third-position-color-primary**: Primary color for third position (`#9b9b9b`).
+- **$call-primary**: Call to action color (`#434343`).
+- **$info-primary**: Information color (`#4485C3`).
+- **$success-primary**: Success color (`#4d9e33`).
+- **$cancel-primary**: Cancel color (`#c73c49`).
+- **$connected-green**: Connected pin color (`#80d764`).
+- **$announcement-primary**: Announcement background color (`#cce5ff`).
+- **$announcement-text-primary**: Announcement text color (`#004085`).
+- **$background-color-container**: Container background color (`white`).
+- **$background-color-primary**: Main background color (`white`).
+- **$background-color-secondary**: Secondary background color (`#E8E8E8`).
+- **$text-primary**: Main text color (`#222222`).
+- **$text-secondary**: Secondary text color (`#767676`).
+- **$text-tertiary**: Tertiary text color (`#fafafa`).
+- **$text-light**: Light text color (`white`).
+- **$darken-text-tertiary**: Slightly darker tertiary text (`#F1EFED`).
+- **$darkest-text-tertiary**: Darkest tertiary text (`#c7c7c7`).
+- **$tag-border-color**: Tag border color (defaults to `$call-primary`).
+- **$tag-text-color**: Tag text color (defaults to `$call-primary`).
+- **$tag-text-color-active**: Tag text color when active (`white`).
+
+### Fonts
+
+- **$font-family**: Main font family (`'Montserrat'`).
+- **$title-font-family**: Font family for titles (defaults to `$font-family`).
+- **$box-title-font-family**: Font family for box titles (defaults to `$font-family`).
+- **$font-size-extra-large**: Extra large font size (`22px`).
+- **$font-size-large**: Large font size (`20px`).
+- **$font-size-medium**: Medium font size (`18px`).
+- **$font-size-normal**: Normal font size (`16px`).
+- **$font-size-small**: Small font size (`16px`).
+- **$font-size-extra-small**: Extra small font size (`14px`).
+- **$font-weight-normal**: Normal font weight (`400`).
+- **$font-weight-bold**: Bold font weight (`700`).
+
+### Borders
+
+- **$box-border**: Border style for boxes (`1px solid rgba(7,42,68, 0.1)`).
+- **$box-border-main-container**: Border for main containers (defaults to `$box-border`).
+- **$box-border-radius**: Border radius for boxes (`6px`).
+- **$button-border**: Border style for buttons (`1px solid rgba(7,42,68, 0.1)`).
+- **$button-border-radius**: Border radius for buttons (`6px`).
+
+### Shadows
+
+- **$box-shadow**: Box shadow for boxes (`0px 2px 5px rgba(7,42,68, 0.1)`).
+- **$box-shadow-main-container**: Box shadow for main containers (defaults to `$box-shadow`).
+- **$button-shadow**: Box shadow for buttons (`0px 2px 5px rgba(7,42,68, 0.1)`).
+
+### Layout
+
+- **$layout-mobile-margin**: Horizontal margin for mobile layout (`0`).
+- **$layout-max-width**: Maximum layout width (`1400px`).
+
+### Modal
+
+- **$modal-margin-top**: Top margin for modal (`0.5em`).
+- **$modal-margin-bottom**: Bottom margin for modal (`0.5em`).
+
+### Line Heights
+
+- **$line-height-none**: No extra line height (`1em`).
+- **$line-height-tight**: Tight line height (`1.08em`).
+- **$line-height-normal**: Normal line height (`1.26em`).
+- **$line-height-loose**: Loose line height (`1.38em`).
+
+---
+
+All variables can be overridden using CSS custom properties (variables) for theming and customization.
+

package/src/components/suggestion/suggestion_banner/SuggestionBanner.docs.mdx

@@ -0,0 +1,35 @@
+---
+description: A component to display a suggestion banner in a debate context.
+labels: ['suggestion', 'banner']
+---
+
+A component to displays debate suggestions, allowing users to propose topics and vote on them to encourage engagement.
+
+### Component usage
+
+```js
+  import { SuggestionBanner } from '@logora.debate/suggestion/suggestion_banner';
+```
+
+```js
+const suggestion = [{
+    id: 414,
+    created_at: "2024-02-07T10:34:16.888Z",
+    expires_at: "",
+    total_upvotes: 0,
+    total_downvotes: 0,
+    is_accepted: false,
+    is_expired: false,
+    is_published: false,
+    group: {
+      slug: "default-slug"
+    },
+    author: {
+        id: 120
+        full_name: "John Doe",
+        image_url: "https://example.com/avatar.jpg",
+    },
+}];
+
+<SuggestionBanner />
+```

package/src/components/suggestion/suggestion_banner/SuggestionBanner.jsx

@@ -0,0 +1,86 @@
+import React, { useMemo, useState } from "react";
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { useRoutes } from '@logora/debate/data/config_provider';
+import { useIntl } from 'react-intl';
+import { Button } from '@logora/debate/action/button';
+import { VotePaginatedList } from "@logora/debate/list/paginated_list";
+import { Icon } from "@logora/debate/icons/icon";
+import { FormattedMessage } from "react-intl";
+import { UserContentSkeleton } from '@logora/debate/skeleton/user_content_skeleton';
+import { SuggestionBox } from '@logora/debate/suggestion/suggestion_box';
+import { useList } from "@logora/debate/list/list_provider";
+import { useToast } from '@logora/debate/dialog/toast_provider';
+import cx from 'classnames';
+import styles from "./SuggestionBanner.module.scss";
+
+export const SuggestionBanner = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [maxPage, setMaxPage] = useState(1);
+    const list = useList();
+    const seed = useMemo(() => Math.random(), []);
+    const routes = useRoutes();
+    const intl = useIntl();
+    const { isMobile, elementWidth } = useResponsive();
+    const { toast } = useToast() || {};
+
+    const handleVoteCallback = (suggestion) => {
+        list.remove("bannerSuggestionsList", [suggestion]);
+        toast(intl.formatMessage({ id: "header.vote_confirm_modal", defaultMessage: "Your vote has been saved !" }), { type: "success" });
+        if (currentPage + 1 < maxPage) {
+            setCurrentPage(currentPage + 1);
+        }
+    }
+
+    return (
+        <div className={cx(styles.suggestionBannerContainer, {
+            [styles.suggestionBannerContainerWrapped]: elementWidth < 768
+        })}>
+            <div className={cx(styles.suggestionBannerContext, { [styles.isMobile]: isMobile })}>
+                <div className={styles.suggestionBannerTitle}>
+                    <FormattedMessage id="suggestion.banner_title" defaultMessage="Suggest a debate question" />
+                </div>
+                <div className={styles.suggestionBannerDescription}>
+                    <FormattedMessage
+                        id="suggestion.banner_description"
+                        defaultMessage="Propose your own debate question and vote for your favourite. Questions that generate community interest are submitted to the editorial team."
+                    />
+                </div>
+                <Button
+                    to={routes.suggestionLocation.toUrl()}
+                    data-tid={"action_suggestions_banner"}
+                    className={cx(styles.suggestionBannerButton, { [styles.isMobile]: isMobile })}
+                    rightIcon={<Icon name="lightArrow" width={10} height={10} />}
+                >
+                    <span><FormattedMessage id="suggestion.suggest" defaultMessage="Suggest" /></span>
+                </Button>
+            </div>
+            <div className={cx(styles.suggestionBannerList, {
+                [styles.suggestionBannerListWrapped]: elementWidth < 768
+            })}>
+                <VotePaginatedList
+                    voteableType={"DebateSuggestion"}
+                    currentListId={"bannerSuggestionsList"}
+                    resource={"groups"}
+                    resourcePropName="suggestion"
+                    filters={{ "is_expired": false, "is_accepted": false, "status": "accepted", "is_admin": false, "random": seed }}
+                    perPage={1}
+                    withPagination={false}
+                    searchBar={false}
+                    currentPage={currentPage}
+                    display={"column"}
+                    onUpdateTotal={(total) => setMaxPage(total)}
+                    loadingComponent={<UserContentSkeleton />}
+                    emptyListComponent={
+                        <UserContentSkeleton border enableAnimation={false} numberLines={3}>
+                            <Button data-tid={"action_add_suggestion"} to={routes.suggestionLocation.toUrl()}>
+                                {intl.formatMessage({ id: "suggestion.suggestion_blank_box.add_suggestion", defaultMessage: "Add suggestion" })}
+                            </Button>
+                        </UserContentSkeleton>
+                    }
+                >
+                    <SuggestionBox onVoteCallback={handleVoteCallback} />
+                </VotePaginatedList>
+            </div>
+        </div>
+    )
+}

package/src/components/suggestion/suggestion_banner/SuggestionBanner.module.scss

@@ -0,0 +1,93 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/flex' as flex;
+@use 'styles/display' as display;
+
+
+.suggestionBannerContainer {
+    display: flex !important;
+    @include display.media-breakpoint-down(sm) {
+        flex-wrap: wrap !important;
+    }
+    box-shadow: theme.$box-shadow-main-container;
+    border: theme.$box-border-main-container;
+    color: theme.$text-primary;
+    border-radius: theme.$box-border-radius;
+    background: theme.$background-color-primary;
+    gap: spacing.$spacer-lg;
+    @include spacing.p(4, sm);
+    @include spacing.p(3, xs);
+
+    @include display.media-breakpoint-down(xs) {
+        gap: spacing.$spacer;
+        flex-direction: column !important;
+        width: 100% !important;
+    }
+
+    &.suggestionBannerContainerWrapped {
+        flex-wrap: wrap !important;
+    }
+}
+
+.suggestionBannerContext {
+    display: flex !important;
+    flex-direction: column !important;
+    @include flex.justify-content(center, xs);
+    @include flex.justify-content(flex-start, sm);
+    max-width: 50%;
+    gap: spacing.$spacer-lg;
+
+    @include display.media-breakpoint-down(sm) {
+        max-width: 100%;
+    }
+
+    @include display.media-breakpoint-down(xs) {
+        gap: spacing.$spacer;
+    }
+
+    &.isMobile {
+        max-width: 100%;
+    }
+}
+
+.suggestionBannerTitle {
+    width: 100%;
+    font-family: theme.$title-font-family;
+    font-size: theme.$font-size-large;
+    font-weight: theme.$font-weight-bold;
+    line-height: theme.$line-height-loose;
+}
+
+.suggestionBannerDescription {
+    font-size: theme.$font-size-normal;
+    line-height: theme.$line-height-loose;
+}
+
+.suggestionBannerList {
+    flex-grow: 1;
+
+    @include display.media-breakpoint-down(xs) {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+}
+
+.suggestionBannerButton {
+    width: fit-content !important;
+
+    svg {
+        transform: rotate(-90deg);
+    }
+
+    &.isMobile {
+        width: auto !important;
+        max-width: 100% !important;
+    }
+}
+
+
+.suggestionBannerListWrapped {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+}