@logora/debate 0.1.0 → 0.2.0

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

@@ -1,107 +0,0 @@
-@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

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

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

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

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

@@ -1,159 +0,0 @@
-@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

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

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

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

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

@@ -1,51 +0,0 @@
-$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

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

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

@@ -1,89 +0,0 @@
----
-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

@@ -1,35 +0,0 @@
----
-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

@@ -1,86 +0,0 @@
-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

@@ -1,93 +0,0 @@
-@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;
-}