@design-system-rte/core 0.1.1 → 0.1.2-rc2

package/components/button/button.constants.ts

@@ -0,0 +1,7 @@
+import { ButtonSize } from './button.interface';
+
+export const buttonIconSize: Record<ButtonSize, number> = {
+  s: 16,
+  m: 20,
+  l: 24,
+};

package/components/button/button.interface.d.ts

@@ -0,0 +1,12 @@
+export type ButtonVariant = 'filled' | 'outlined' | 'text' | 'transparent' | 'danger'
+export type ButtonSize = 's' | 'm' | 'l';
+export type ButtonIconPosition = 'left' | 'right';
+
+export interface ButtonProps {
+    label: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    icon?: string;
+    iconPosition?: ButtonIconPosition
+}

package/components/grid/grid.interface.d.ts

@@ -0,0 +1,14 @@
+export type GridType = 'fluid' | 'fixed-narrow' | 'fixed-wide';
+
+export interface GridProps {
+  gridType?: GridType
+}
+
+export interface ColProps {
+  xxs?: number;
+  xs?: number;
+  s?: number;
+  m?: number;
+  l?: number;
+  xl?: number;
+}

package/components/grid/grid.scss

@@ -0,0 +1,79 @@
+@use '@design-system-rte/core/tokens/main.scss' as *;
+
+$grid-max-width-narrow: 864px;
+$grid-max-width-wide: 1296px;
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat($column-number-s, 1fr);
+    column-gap: $positive-spacing_150;
+    padding: 0 $positive-spacing_200;
+    margin: auto;
+
+    @media (min-width: $breakpoints-xs) {
+        grid-template-columns: repeat($column-number-m, 1fr);
+    }
+
+    @media (min-width: $breakpoints-m) {
+        grid-template-columns: repeat($column-number-l, 1fr);
+        column-gap: $positive-spacing_200;
+        padding: 0 $positive-spacing_400;
+    }
+
+    &[data-gridtype='fixed-narrow'] {
+        max-width: $grid-max-width-narrow;
+    }
+
+    &[data-gridtype='fixed-wide'] {
+        max-width: $grid-max-width-wide;
+    }
+}
+
+.col {
+  grid-column: span 1;
+}
+
+@for $i from 1 through 12 {
+  .col-xxs-#{$i} {
+    grid-column: span #{$i};
+  }
+}
+
+@media (min-width: $breakpoints-xs) {
+  @for $i from 1 through 12 {
+    .col-xs-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+@media (min-width: $breakpoints-s) {
+  @for $i from 1 through 12 {
+    .col-s-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+@media (min-width: $breakpoints-m) {
+  @for $i from 1 through 12 {
+    .col-m-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+@media (min-width: $breakpoints-l) {
+  @for $i from 1 through 12 {
+    .col-l-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+@media (min-width: $breakpoints-xl) {
+  @for $i from 1 through 12 {
+    .col-xl-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}

package/components/grid/grid.stories.scss

@@ -0,0 +1,22 @@
+@use '@design-system-rte/core/tokens/main.scss' as *;
+@use '@design-system-rte/core/tokens/primitives/_colors.scss' as *;
+
+.sb-css-grid-container {
+  background-color: $jaune-indications-200;
+  outline: 1px dashed $jaune-indications-400;
+
+  .grid {
+    .col {
+      @include typography-text-l;
+      background-color: #FFFFFF;
+      box-shadow: 0 0 0 1px $jaune-indications-400;
+      min-block-size: 100px;
+      display: flex;
+      gap: $positive-spacing_200;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+}

package/components/icon/icon.interface.d.ts

@@ -0,0 +1,4 @@
+export interface IconProps {
+    name: string;
+    size?: number;
+}

package/components/link/link.interface.d.ts

@@ -0,0 +1,5 @@
+export interface LinkProps {
+    label: string;
+    subtle?: boolean;
+    externalLink?: boolean;
+}

package/components/radio-button/radio-button.constants.ts

@@ -0,0 +1 @@
+export const labelSize = 16

package/components/radio-button/radio-button.interface.d.ts

@@ -0,0 +1,8 @@
+export interface RadioButtonProps {
+    label: string;
+    groupName: string;
+    showLabel?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    readOnly?: boolean;
+}

package/components/radio-button-group/radio-button-group.interface.d.ts

@@ -0,0 +1,16 @@
+export type Direction = "horizontal" | "vertical";
+
+export interface RadioButtonGroupProps {
+    groupName: string;
+    items: string[];
+    direction?: Direction;
+    showItemsLabel?: boolean;
+    groupTitle?: string;
+    showGroupTitle?: boolean;
+    groupHelpText?: string;
+    showHelpText?: boolean;
+    errorMessage?: string;
+    error?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+}

package/constants/keyboard.constants.ts

@@ -0,0 +1,3 @@
+export const SPACE_KEY = ' ';
+export const ENTER_KEY = 'Enter';
+export const TAB_KEY = 'Tab';

package/package.json

@@ -1,20 +1,10 @@
 {
   "name": "@design-system-rte/core",
-  "version": "0.1.1",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "style": "dist/styles/main.css",
-  "sass": "tokens/main.scss",
-  "files": ["dist", "tokens"],
+  "version": "0.1.2-rc2",
+  "main": "index.js",
   "scripts": {
-    "build": "vite build && sass tokens/main.scss:dist/styles/main.css",
-    "build:types": "tsc --emitDeclarationOnly",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rte-france/design-system-rte"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -24,13 +14,5 @@
   },
   "peerDependencies": {
     "sass": "^1.85.1"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./tokens/*": "./tokens/*",
-    "./style.css": "./dist/styles/main.css"
   }
 }

package/tokens/_layout.scss

@@ -4,10 +4,10 @@ $breakpoints-s: 768px;
 $breakpoints-m: 1024px;
 $breakpoints-l: 1440px;
 $breakpoints-xl: 1768px;
-$column-number-xs: 1px;
-$column-number-s: 2px;
-$column-number-m: 6px;
-$column-number-l: 12px;
+$column-number-xs: 1;
+$column-number-s: 2;
+$column-number-m: 6;
+$column-number-l: 12;
 $panel-width-xs: 56px;
 $panel-width-s: 320px;
 $panel-width-m: 400px;

package/tokens/_mixins.scss

@@ -1,6 +1,7 @@
 @use 'themes' as *;
 @use 'primitives/colors' as *;
 @use 'sass:map';
+@use 'sass:color';
 
 $themes: (
     "bleu_iceberg": $bleu_iceberg,

package/tokens/_typography.scss

@@ -146,4 +146,78 @@ $button-l-semibold-letter-spacing: $letter-spacing-s;
     font-size: $button-l-semibold-font-size;
     line-height: $button-l-semibold-line-height;
     letter-spacing: $button-l-semibold-letter-spacing;
+}
+
+@mixin typography-text {
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-style: normal;
+}
+
+@mixin typography-text-m {
+    @include typography-text;
+    font-family: $text-m-regular-font-family;
+    font-weight: $text-m-regular-font-weight;
+    font-size: $text-m-regular-font-size;
+    line-height: $text-m-regular-line-height;
+    letter-spacing: $text-m-regular-letter-spacing;
+}
+
+@mixin typography-text-m-bold {
+    @include typography-text;
+    font-family: $text-m-bold-font-family;
+    font-weight: $text-m-bold-font-weight;
+    font-size: $text-m-bold-font-size;
+    line-height: $text-m-bold-line-height;
+    letter-spacing: $text-m-bold-letter-spacing;
+}
+
+@mixin typography-text-l {
+    @include typography-text;
+    font-family: $text-l-regular-font-family;
+    font-weight: $text-l-regular-font-weight;
+    font-size: $text-l-regular-font-size;
+    line-height: $text-l-regular-line-height;
+    letter-spacing: $text-l-regular-letter-spacing;
+}
+
+@mixin typography-link {
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-style: normal;
+}
+
+@mixin typography-link-m {
+    @include typography-link;
+    font-family: $text-m-regular-font-family;
+    font-weight: $text-m-regular-font-weight;
+    font-size: $text-m-regular-font-size;
+    line-height: $text-m-regular-line-height;
+    letter-spacing: $text-m-regular-letter-spacing;
+}
+
+@mixin typography-radio-button {
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-style: normal;
+}
+
+@mixin typography-radio-button-l {
+    @include typography-radio-button;
+    font-family: $text-l-regular-font-family;
+    font-size: $text-l-regular-font-size;
+    font-weight: $text-l-regular-font-weight;
+    line-height: $text-l-regular-line-height;
+    letter-spacing: $text-l-regular-letter-spacing;
+}
+
+@mixin typography-heading{
+    font-feature-settings: "liga" off, "clig" off;
+    font-style: normal;
+}
+
+@mixin typography-heading-s{
+    @include typography-heading;
+    font-family: $heading-s-semibold-font-family;
+    font-weight: $heading-s-semibold-font-weight;
+    font-size: $heading-s-semibold-font-size;
+    line-height: $heading-s-semibold-line-height;
+    letter-spacing: $heading-s-semibold-letter-spacing;
 }

package/tokens/main.scss

@@ -3,6 +3,6 @@
 @forward "typography";
 @forward "layout";
 @forward "opacity";
-@forward "./mixins";
+@forward "mixins";
 
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap");

package/dist/core.mjs

@@ -1 +0,0 @@
-

package/dist/index.d.ts

@@ -1,16 +0,0 @@
-export declare type ButtonIconPosition = 'left' | 'right';
-
-export declare interface ButtonProps {
-    label: string;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    disabled?: boolean;
-    icon?: string;
-    iconPosition?: ButtonIconPosition;
-}
-
-export declare type ButtonSize = 's' | 'm' | 'l';
-
-export declare type ButtonVariant = 'filled' | 'outlined' | 'text' | 'transparent' | 'danger';
-
-export { }

package/dist/styles/main.css

@@ -1,27 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap");
-@font-face {
-  font-family: "Nunito";
-  src: url("../../assets/fonts/Nunito-Light.woff2") format("woff2");
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Nunito";
-  src: url("../../assets/fonts/Nunito-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Nunito";
-  src: url("../../assets/fonts/Nunito-SemiBold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Nunito";
-  src: url("../../assets/fonts/Nunito-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-}
-
-/*# sourceMappingURL=main.css.map */

package/dist/styles/main.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../tokens/main.scss","../../tokens/primitives/_typography.scss"],"names":[],"mappings":"AAOQ;ACLR;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"main.css"}