@inseefr/lunatic 3.0.0-rc.9 → 3.0.1-rc.0

package/lib/components/index.scss

@@ -1,154 +0,0 @@
-* {
-	box-sizing: border-box;
-	--color-primary-dark: #2a5885;
-	--color-primary-light: #5181b8;
-	--color-primary-main: #4a73a4;
-	--color-primary-contrast-text: #ffffff;
-
-	--color-secondary-dark: #14202d;
-	--color-secondary-light: #f7f8fa;
-	--color-secondary-main: #1a293b;
-	--color-secondary-contrast-text: #ffffff;
-
-	--color-very-light: #dbe4ef;
-	--color-very-very-light: #e6eaee;
-	--color-current-item: #0d823e;
-
-	--color-error: #f50c0c;
-	--color-disabled: rgb(235, 235, 228);
-	--color-prefix: cornflowerblue;
-	--color-dropdown-active: rgba(0, 0, 0, 0.04);
-	--color-dropdown-selected: rgba(0, 0, 0, 0.08);
-
-	--dropdown-transition-time: 0.5s;
-}
-
-@mixin vertical-placement($reverse: false) {
-	display: flex;
-	flex-direction: if($reverse, column-reverse, column);
-}
-
-@mixin horizontal-placement($reverse: false) {
-	display: flex;
-	flex-direction: if($reverse, row-reverse, row);
-	align-items: baseline;
-
-	:first-child {
-		margin-right: 1rem;
-	}
-}
-
-.lunatic-component {
-	.mandatory:after {
-		content: ' *';
-		color: red;
-	}
-
-	.horizontal-options {
-		display: inline-block;
-		margin-right: 2em;
-	}
-
-	// Label & Legend
-	label,
-	legend,
-	.subsequence-lunatic,
-	.lunatic-dropdown-label,
-	.lunatic-dropdown-label focused {
-		color: var(--color-primary-dark);
-		background-color: var(--color-primary-contrast-text);
-		border: 0;
-		padding: 0;
-		font-size: 0.75rem;
-		font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-		font-weight: bold;
-		margin-bottom: 0.375rem;
-	}
-
-	/* refactor proposition */
-
-	// .lunatic-component {
-	// 	width: fit-content;
-	// }
-
-	.lunatic-component-container {
-		display: flex;
-
-		&.label-left-ex {
-			flex-direction: row;
-			align-items: baseline;
-			.lunatic-label {
-				margin-right: 1em;
-			}
-		}
-		&.label-right-ex {
-			flex-direction: row-reverse;
-			align-items: baseline;
-			.lunatic-label {
-				margin-left: 1em;
-			}
-		}
-		&.label-top-ex {
-			flex-direction: column;
-		}
-		&.label-bottom-ex {
-			flex-direction: column-reverse;
-		}
-	}
-
-	/******/
-
-	.label-top {
-		@include vertical-placement();
-	}
-	.label-bottom {
-		@include vertical-placement(true);
-	}
-	.label-right {
-		justify-content: flex-end;
-		@include horizontal-placement(true);
-	}
-	.label-left {
-		@include horizontal-placement();
-	}
-
-	.field-container {
-		display: flex;
-	}
-
-	.modality-label p {
-		display: inline;
-	}
-
-	.field {
-		width: 100%;
-		position: relative;
-	}
-
-	.link-md {
-		border-bottom: dashed 0.1em var(--color-primary-dark);
-		&:hover {
-			cursor: help;
-			color: var(--color-primary-contrast-text);
-			background-color: var(--color-primary-dark);
-		}
-	}
-
-	.tooltip-content {
-		min-width: 15em;
-		max-width: 25em;
-		background: var(--color-primary-dark);
-		color: var(--color-primary-contrast-text);
-		padding: 0.5em;
-		border-radius: 6px;
-		font-size: 1em;
-		&.place-bottom {
-			&::before {
-				border-bottom: 10px solid var(--color-primary-dark);
-			}
-			&::after {
-				content: none;
-			}
-		}
-	}
-}

package/lib/components/shared/Button/Button.scss

@@ -1,24 +0,0 @@
-.button-lunatic {
-	min-width: 20%;
-	color: white;
-	border-color: var(--color-primary-dark);
-	background-color: var(--color-primary-dark);
-	font-size: 1.2em;
-	font-weight: bold;
-	padding: 0.4em;
-	&:hover,
-	&:focus:hover {
-		color: var(--color-primary-dark);
-		background-color: white;
-		border-color: var(--color-primary-dark);
-	}
-	&:focus {
-		outline: none;
-		background-color: var(--color-primary-light);
-		border-color: var(--color-primary-light);
-	}
-	&:disabled {
-		background: var(--color-disabled);
-		color: var(--color-primary-dark);
-	}
-}

package/lib/components/shared/Button/IconButton.scss

@@ -1,33 +0,0 @@
-// floating action button
-.lunatic-fab {
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	margin: 0;
-	padding: 0;
-	outline: inherit;
-	border: none;
-	background-color: royalblue;
-	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
-		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
-
-	&:hover {
-		cursor: pointer;
-		background-color: navy;
-		transition: background-color 1s;
-	}
-
-	&.mini {
-		width: 18px;
-		height: 18px;
-	}
-
-	&:focus {
-		border: solid 1px black;
-	}
-
-	&:disabled {
-		cursor: default;
-		background-color: darkgray;
-	}
-}

package/lib/components/shared/Button/__snapshots__/Button.spec.tsx.snap

@@ -1,80 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`Button > renders without crashing 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <button
-        class="button-lunatic"
-        type="button"
-      >
-        <span>
-          Click me!
-        </span>
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      class="button-lunatic"
-      type="button"
-    >
-      <span>
-        Click me!
-      </span>
-    </button>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;

package/lib/components/shared/Checkbox/CheckboxOption.scss

@@ -1,19 +0,0 @@
-.checkbox-modality {
-	.lunatic-input-checkbox {
-		display: flex;
-		.label-description {
-			font-weight: lighter;
-		}
-
-		.lunatic-label {
-			font-weight: normal;
-			display: flex;
-			gap: 0.5em;
-			align-items: center;
-		}
-	}
-}
-.lunatic-checkbox-label {
-	gap: 0.5em;
-	align-items: center;
-}

package/lib/components/shared/Combobox/Combobox.scss

@@ -1,206 +0,0 @@
-@mixin preventSelect() {
-	-moz-user-select: -moz-none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-}
-
-@mixin placeholder {
-	color: gray;
-	@include defaultFont();
-	font-size: 15px;
-	line-height: 34px;
-	vertical-align: middle;
-	font-weight: normal;
-}
-
-@mixin defaultFont {
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-}
-
-@mixin selection() {
-	@include defaultFont();
-}
-
-.lunatic-combo-box-container {
-	position: relative;
-	width: 100%;
-
-	&.default-style {
-		--color-combo-box-selected: Cornsilk;
-		--color-primary-dark: DarkGreen;
-		--color-primary-main: FloralWhite;
-		--color-combo-box-background: snow;
-		--color-disabled: Gainsboro;
-		--color-primary-light: GreenYellow;
-
-		margin-bottom: 10px;
-		.lunatic-combo-box {
-			min-height: 30px;
-			min-width: 260px;
-			width: 100%;
-			.lunatic-combo-box-content {
-				.lunatic-combo-box-selection {
-					border-radius: 5px;
-					border: 2px solid var(--color-primary-dark);
-					background-color: var(--color-combo-box-background);
-					&:hover {
-						border-color: var(--color-primary-main);
-					}
-					.lunatic-combo-box-input {
-						height: 34px;
-						line-height: 34px;
-						font-size: 15px;
-						padding-left: 4px;
-						@include selection();
-
-						&::placeholder {
-							@include placeholder();
-						}
-					}
-
-					.lunatic-combo-box-selected {
-						height: 42px;
-						line-height: 34px;
-						background-color: var(--color-combo-box-background);
-						border-radius: 5px;
-						padding-left: 4px;
-						@include selection();
-						outline: none;
-						overflow-y: hidden;
-						display: block;
-						@include placeholder();
-
-						.selection {
-							display: inline-block;
-							line-height: 34px;
-							font-size: 15px;
-						}
-
-						&.disabled {
-							background-color: var(--color-disabled);
-						}
-					}
-				}
-
-				.lunatic-combo-box-panel {
-					@include defaultFont();
-					height: 0;
-					opacity: 0;
-					background-color: var(--color-combo-box-background);
-					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-					&.expanded {
-						border: solid 1px var(--color-primary-light);
-						opacity: 1;
-						min-height: 30px;
-						height: max-content;
-						box-shadow: 0 2px 2px grey;
-						border-radius: 4px;
-					}
-					.lunatic-combo-box-option {
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						overflow: hidden;
-						margin-bottom: 0.1em;
-						line-height: 2rem;
-						display: block;
-
-						&.selected {
-							color: var(--color-primary-dark);
-							background-color: var(--color-combo-box-selected);
-						}
-						&:hover {
-							background-color: var(--color-primary-main);
-							color: var(--color-combo-box-background);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.lunatic-combo-box-fab {
-		position: absolute;
-		right: 4px;
-		top: 8px;
-		z-index: 0;
-		&.focused {
-			z-index: 1;
-		}
-
-		.lunatic-icon {
-			svg {
-				fill: white;
-				width: 16px;
-				height: 16px;
-				margin: auto;
-			}
-		}
-	}
-
-	.lunatic-combo-box {
-		position: relative;
-		z-index: 0;
-
-		&:focus {
-			outline: none;
-		}
-
-		&.focused {
-			z-index: 1;
-		}
-
-		.lunatic-combo-box-content {
-			position: absolute;
-			width: 100%;
-
-			.lunatic-combo-box-selection {
-				position: relative;
-				.lunatic-combo-box-input {
-					border: none;
-					margin: 0;
-					padding: 0;
-					background-color: transparent;
-					&:focus {
-						outline: none;
-					}
-
-					width: 100%;
-				}
-
-				.lunatic-combo-box-selected {
-					// position: absolute;
-					top: 0;
-					white-space: nowrap;
-					overflow-x: hidden;
-					width: 100%;
-					display: none;
-					&.displayed {
-						display: block;
-					}
-				}
-			}
-
-			ul,
-			li,
-			div,
-			span {
-				margin: 0;
-				padding: 0;
-				border: none;
-				list-style: none;
-			}
-
-			.lunatic-combo-box-panel {
-				&:focus {
-					outline: none;
-				}
-				.lunatic-combo-box-option {
-					white-space: nowrap;
-					@include preventSelect();
-				}
-			}
-		}
-	}
-}

package/lib/components/shared/Combobox/Selection/__snapshots__/ComboboxSelection.spec.tsx.snap

@@ -1,76 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`Selection component > should render correctly when it is disabled 1`] = `
-<div
-  aria-autocomplete="list"
-  aria-controls="todo"
-  aria-haspopup="listbox"
-  class="lunatic-combo-box-selection disabled"
-  role="combobox"
->
-  <div
-    class="lunatic-combo-box-selected disabled"
-  >
-    <span
-      class="placeholder"
-    >
-      hello!
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Selection component > should render correctly when it is editable 1`] = `
-<div
-  aria-autocomplete="list"
-  aria-controls="todo"
-  aria-haspopup="listbox"
-  class="lunatic-combo-box-selection"
-  role="combobox"
->
-  <div
-    class="lunatic-combo-box-selected"
-  >
-    <span
-      class="placeholder"
-    />
-  </div>
-</div>
-`;
-
-exports[`Selection component > should render correctly when it is expanded 1`] = `
-<div
-  aria-autocomplete="list"
-  aria-controls="todo"
-  aria-expanded="true"
-  aria-haspopup="listbox"
-  class="lunatic-combo-box-selection"
-  role="combobox"
->
-  <div
-    class="lunatic-combo-box-selected"
-  >
-    <span
-      class="placeholder"
-    />
-  </div>
-</div>
-`;
-
-exports[`Selection component > should render correctly with default props 1`] = `
-<div
-  aria-autocomplete="list"
-  aria-controls="todo"
-  aria-haspopup="listbox"
-  class="lunatic-combo-box-selection"
-  role="combobox"
->
-  <div
-    class="lunatic-combo-box-selected"
-  >
-    <span
-      class="placeholder"
-    />
-  </div>
-</div>
-`;

package/lib/components/shared/ComponentErrors/ComponentErrors.scss

@@ -1,5 +0,0 @@
-.lunatic-errors {
-	.lunatic-error {
-		color: red;
-	}
-}

package/lib/components/shared/Declarations/Declarations.scss

@@ -1,42 +0,0 @@
-.lunatic-component {
-	.lunatic-declarations {
-		margin-bottom: 0.4rem;
-	}
-
-	.declaration-instruction {
-		font-style: italic;
-		font-size: 80%;
-	}
-
-	.declaration-statement {
-		font-style: italic;
-		font-size: 80%;
-		color: blue;
-	}
-
-	.declaration-help {
-		font-style: italic;
-		font-size: 80%;
-		color: green;
-	}
-
-	.CODECARD {
-		font-style: bold;
-		font-size: 80%;
-		color: grey;
-		border: solid 1px grey;
-		width: fit-content;
-		padding: 1em;
-		&:before {
-			content: "→ "
-		}
-	}
-
-	.declaration-message_filter {
-		font-size: 100%;
-		color: rgb(73, 66, 66);
-		&:before {
-			content: '→ ';
-		}
-	}
-}

package/lib/components/shared/Fieldset/Fieldset.scss

@@ -1,5 +0,0 @@
-fieldset {
-	border: 0;
-	margin: 0;
-	padding: 0;
-}

package/lib/components/shared/Icons/lunatic-icon.scss

@@ -1,4 +0,0 @@
-.lunatic-icon {
-	display: flex;
-	align-items: center;
-}

package/lib/components/shared/Label/Label.scss

@@ -1,6 +0,0 @@
-.lunatic-label {
-	.label-description {
-		font-weight: lighter;
-		display: block;
-	}
-}