@logora/debate 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logora/debate",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "license": "AGPL-3.0",
   "description": "Design system of @Logora made with React",
@@ -8,7 +8,8 @@
   "module": "./dist/index.js",
   "files": [
     "dist",
-    "styles"
+    "styles",
+    "src/components/styles"
   ],
   "sideEffects": [
     "**/*.css",
@@ -23,18 +24,6 @@
     "./package.json": "./package.json"
   },
   "author": "Logora <contact@logora.fr>",
-  "scripts": {
-    "build": "vite build --config vite.lib.config.mjs",
-    "dev": "storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "format": "npx @biomejs/biome format --write ./src",
-    "lint": "npx @biomejs/biome lint ./src",
-    "check": "npx @biomejs/biome check ./src",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Logora/interface.git"
@@ -111,5 +100,17 @@
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router": "^6.29.0",
     "react-router-dom": "^6.29.0"
+  },
+  "scripts": {
+    "build": "vite build --config vite.lib.config.mjs",
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "npx @biomejs/biome format --write ./src",
+    "lint": "npx @biomejs/biome lint ./src",
+    "check": "npx @biomejs/biome check ./src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
-}
+}

package/src/components/styles/display/_display.scss

@@ -0,0 +1,127 @@
+@use "sass:map";
+@use "sass:list";
+
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px
+);
+
+@mixin display($value, $breakpoint) {
+  @include media-breakpoint-up($breakpoint) {
+    display: $value !important;
+  }
+}
+
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+
+  @return null;
+}
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+  @if $min != 0 {
+    @return $min;
+  }
+
+  @return null;
+}
+
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @if $next {
+    @return breakpoint-min($next, $breakpoints) - .02;
+  }
+
+  @return null;
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @container (min-width: #{$min}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @container (max-width: #{$max}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @container (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @container (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+@mixin text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* HYPHENS */
+@mixin hyphens($mode) {
+  -webkit-hyphens: $mode;
+  -ms-hyphens: $mode;
+  -moz-hyphens: $mode;
+  hyphens: $mode;
+}
+
+/* LINE CLAMP */
+@mixin line-clamp($number_lines) {
+  display: -webkit-box;
+  word-wrap: break-word;
+  -webkit-line-clamp: $number_lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

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

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

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

package/src/components/styles/flex/_flex.scss

@@ -0,0 +1,55 @@
+@use '../display' as display;
+
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@mixin flex-direction($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    flex-direction: $value !important;
+  }
+}
+
+@mixin flex-wrap($breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    flex-wrap: wrap !important;
+  }
+}
+
+@mixin flex-nowrap ($breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    flex-wrap: nowrap !important;
+  }
+}
+
+@mixin justify-content($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    justify-content: $value !important;
+  }
+}
+
+@mixin align-items($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    align-items: $value !important;
+  }
+}
+
+@mixin align-content($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    align-content: $value !important;
+  }
+}
+
+@mixin align-self($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    align-self: $value !important;
+  }
+}
+
+// ORDERS
+
+@mixin order($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    order: $value;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,107 @@
+@use "sass:map";
+@use '../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 '../theme' as theme;
+@use '../spacing' as spacing;
+@use '../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.
+