@inseefr/lunatic 2.0.2 → 2.0.4-v2

package/src/stories/utils/custom-lunatic.scss

@@ -1,595 +0,0 @@
-// Lunatic
-
-// Define colors
-$colorPrimaryDark: #2a5885;
-$colorPrimaryLight: rgb(81, 129, 184);
-$colorPrimaryMain: #4a73a4;
-$colorPrimaryContrastText: #ffffff;
-
-$colorVeryLight: rgb(219, 228, 239);
-$colorCurrentItem: #0d823e;
-
-$colorSecondaryDark: #1a293b;
-$colorSecondaryLight: #f7f8fa;
-$colorSecondaryMain: #1a293b;
-$colorSecondaryContrastText: #ffffff;
-
-* {
-	box-sizing: border-box;
-	font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
-}
-
-.lunatic input[type='number']::-webkit-inner-spin-button,
-.lunatic input[type='number']::-webkit-outer-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-.lunatic input[type='number'] {
-	text-align: left;
-}
-
-.lunatic textarea {
-	border-color: $colorPrimaryDark;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $colorPrimaryMain;
-	}
-}
-
-.lunatic .datepicker-lunatic {
-	border-color: $colorPrimaryDark;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $colorPrimaryMain;
-	}
-}
-
-// Conteneur
-.component.lunatic {
-	margin-bottom: 0.4375rem;
-}
-
-#componentsPrix {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-
-	// border: 1px solid #39d2b4;
-	width: 650px;
-}
-
-.promotionEtPrixLieQuantite {
-	margin-left: 15px;
-	visibility: hidden;
-	// border: 1px solid red;
-}
-
-.cacher {
-	visibility: hidden;
-	//border: 1px solid red;
-}
-// sequence-lunatic
-
-.lunatic .sequence-lunatic {
-	padding: 0;
-	font-size: 0.875rem;
-	color: $colorPrimaryLight;
-	background-color: $colorSecondaryContrastText;
-	border: 0;
-	height: 1.875rem;
-}
-
-// FIELDSET
-.lunatic fieldset,
-.lunatic .checkbox-group,
-.lunatic .radio-group {
-	border: 0;
-	outline: 0;
-	margin-top: 0.9375rem;
-}
-
-// CHECKBOXES & RADIO_BUTTONS
-.lunatic .checkbox-modality,
-.lunatic .radio-modality {
-	margin-top: 0.375rem;
-}
-
-.lunatic .checkbox-lunatic,
-.lunatic .radio-lunatic {
-	box-shadow: none;
-	opacity: 0;
-	margin-right: -1.1875rem;
-}
-
-.lunatic .checkbox-lunatic:focus,
-.lunatic .radio-lunatic:focus {
-	box-shadow: none;
-}
-
-.lunatic .checkbox-lunatic + label,
-.lunatic .radio-lunatic + label {
-	padding-right: 0.3125rem;
-	padding-top: 0.125rem;
-}
-
-.lunatic .checkbox-lunatic:focus + label,
-.lunatic .radio-lunatic:focus + label {
-	box-shadow: none;
-	background-color: rgba(0, 0, 0, 0.05);
-	border-right: 1px solid $colorVeryLight;
-	padding-right: 0.3125rem;
-	padding-top: 0.125rem;
-	padding-bottom: 0.125rem;
-}
-.lunatic .checkbox-modality label::before,
-.lunatic .checkbox-lunatic + label::before,
-.lunatic .radio-lunatic + label::before {
-	border: 0;
-	transform: none;
-	margin: 0;
-	margin-right: 0.375rem;
-	padding: 0;
-	position: relative;
-	top: 0.4375rem;
-}
-
-.lunatic .checkbox-lunatic + label::before {
-	content: url(./img/check_box_outline.svg);
-}
-
-.lunatic .radio-lunatic + label::before {
-	content: url(./img/radio_button_unchecked.svg);
-}
-
-.lunatic .checkbox-lunatic:checked + label,
-.lunatic .radio-lunatic:checked + label {
-	border: 0;
-	outline: 0;
-	padding: 0;
-	padding-right: 0.3125rem;
-	padding-top: 0.125rem;
-	padding-bottom: 0.125rem;
-	background-color: rgba(0, 0, 0, 0.05);
-	border-right: 1px solid $colorVeryLight;
-}
-
-.lunatic.checkbox-boolean .checkbox-modality {
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: flex-end;
-}
-
-.lunatic.checkbox-boolean .checkbox-lunatic {
-	position: relative;
-	top: 5px;
-}
-
-.lunatic .checkbox-lunatic:checked + label::before {
-	content: url(./img/check_box.svg);
-}
-
-.lunatic .radio-lunatic:checked + label::before {
-	content: url(./img/radio_button_checked.svg);
-}
-
-// CHECKBOX BOOLEAN
-.lunatic .checkbox-boolean-lunatic + label::before,
-.lunatic .checkbox-boolean-lunatic-no-margin + label::before {
-	content: url(./img/check_box_outline.svg);
-}
-.lunatic .checkbox-boolean-lunatic:checked + label::before,
-.lunatic .checkbox-boolean-lunatic-no-margin:checked + label::before {
-	content: url(./img/check_box.svg);
-}
-.lunatic .checkbox-boolean-lunatic {
-	box-shadow: none;
-	opacity: 1;
-	margin-right: -1.1875rem;
-	& + span {
-		padding-right: 0.3125rem;
-		padding-top: 0.125rem;
-	}
-}
-.lunatic .checkbox-boolean-modality label::before {
-	border: 0;
-	transform: none;
-	margin: 0;
-	margin-right: 0.375rem;
-	padding: 0;
-	position: relative;
-	top: 0.4375rem;
-}
-
-// LABEL, LEGEND
-.lunatic label,
-.lunatic legend,
-.lunatic .subsequence-lunatic,
-.lunatic-dropdown-label {
-	color: $colorPrimaryDark;
-	background-color: $colorPrimaryContrastText;
-	border: 0;
-	padding: 0;
-	font-size: 0.75rem;
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-	line-height: 0.75rem;
-	font-weight: bold;
-	margin-bottom: 0.375rem;
-}
-
-// SELECT
-// .lunatic .simple-select {
-// 	display: inline-block;
-// 	position: relative;
-// }
-
-// .lunatic .simple-select button {
-// 	width: 100%;
-// 	height: 2rem;
-// 	line-height: 1.1875rem;
-
-// 	color: $colorPrimaryMain;
-// 	background-color: white;
-// 	position: relative;
-
-// 	border: 0;
-// 	border-radius: 0;
-// 	border-bottom-width: 0.0625rem;
-// 	border-bottom-color: $colorPrimaryDark;
-// 	border-bottom-style: dotted;
-
-// 	margin: 0;
-
-// 	padding-bottom: 0.4375rem;
-// 	padding-left: 0.375rem;
-// 	padding-right: 0;
-// 	padding-top: 0.375rem;
-
-// 	text-decoration: none;
-// 	display: block;
-
-// 	text-align: left;
-// }
-
-// .lunatic .simple-select button:focus {
-// 	border: 0;
-// 	outline: none;
-// 	box-shadow: none;
-// 	background: rgba(0, 0, 0, 0.05);
-// 	border-bottom-width: 0.0625rem;
-// 	border-bottom-color: $colorPrimaryDark;
-// 	border-bottom-style: dotted;
-// }
-// .lunatic .simple-select button:after {
-// 	border: 0;
-// 	transform: none;
-// 	float: right;
-// 	margin-left: 0.3125rem;
-// 	content: url(./img/menu-down.svg);
-// 	color: rgba(0, 0, 0, 0.54);
-// 	padding: 0;
-// }
-
-// .lunatic .simple-select button[aria-expanded='true']:after {
-// 	border: 0;
-// 	transform: none;
-// 	float: right;
-// 	margin-left: 0.3125rem;
-// 	content: url(./img/menu-up.svg);
-// 	padding: 0;
-// }
-
-// .lunatic .simple-select ul.options,
-// .lunatic .simple-select ul.options:active {
-// 	box-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
-// 		0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
-// 		0 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
-// 	opacity: 1;
-// 	transform: scale(1, 1) translateZ(0);
-// 	transition: opacity 343ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-// 		transform 228ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-// 	transform-origin: 0 12.75rem 0;
-// 	padding: 0.5rem 0;
-// 	margin: 0;
-// 	background-color: white;
-// 	position: absolute;
-// 	top: -3.125rem;
-// 	list-style: none;
-// 	border: 0;
-// 	list-style-type: none;
-
-// 	min-width: 100%;
-// 	width: auto;
-
-// 	overflow-y: auto;
-// 	z-index: 1;
-// 	max-height: none;
-// }
-
-// .lunatic .simple-select .hidden {
-// 	display: none;
-// }
-
-// .lunatic .simple-select ul.options li.option {
-// 	cursor: pointer;
-// }
-
-// .lunatic .simple-select ul.options li.selected {
-// 	background-color: rgba(0, 0, 0, 0.14);
-// 	color: black;
-// }
-
-// .lunatic .simple-select .read-only {
-// 	background-color: #ebebe4;
-// 	color: black;
-// }
-
-// .lunatic .simple-select ul.options:focus {
-// 	border: 0;
-// 	outline: none;
-// 	background-color: white;
-// }
-
-// .lunatic .simple-select ul li.option {
-// 	display: flex;
-// 	justify-content: flex-start;
-// 	align-items: center;
-
-// 	border-color: rgba(0, 0, 0, 0.87);
-// 	border-radius: 0;
-// 	border-style: none;
-// 	border-width: 0;
-// 	border-image-outset: 0;
-// 	border-image-repeat: stretch;
-// 	border-image-slice: 100%;
-// 	border-image-source: none;
-// 	border-image-width: 1;
-
-// 	box-sizing: content-box;
-// 	color: rgba(0, 0, 0, 0.87);
-// 	cursor: pointer;
-
-// 	font-family: Roboto, Helvetica, Arial, sans-serif;
-// 	font-size: 1.1rem;
-// 	font-weight: normal;
-// 	height: 1.5rem;
-
-// 	line-height: 1.65rem;
-// 	list-style-image: none;
-// 	list-style-position: outside;
-// 	list-style-type: none;
-// 	margin: 0;
-// 	outline-color: rgba(0, 0, 0, 0.87);
-// 	outline-style: none;
-// 	outline-width: 0;
-// 	overflow: hidden;
-
-// 	padding: 0.6875rem 1rem;
-
-// 	position: relative;
-// 	text-align: left;
-// 	text-decoration-color: rgba(0, 0, 0, 0.87);
-// 	text-decoration-line: none;
-// 	text-decoration-style: solid;
-// 	transition-delay: 0s;
-// 	transition-duration: 0.15s;
-// 	transition-property: background-color;
-// 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-// 	user-select: none;
-// 	vertical-align: middle;
-// 	white-space: nowrap;
-// 	-webkit-appearance: none;
-// 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-// }
-
-// .lunatic .simple-select ul li:hover {
-// 	text-decoration: none;
-// 	background-color: rgba(0, 0, 0, 0.08);
-// }
-
-//TEXT
-.lunatic .input-lunatic {
-	font: inherit;
-	color: currentColor;
-	border: 0;
-	border-radius: 0;
-	border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
-	margin: 0;
-	padding: 0.375rem 0 0.375rem 0.4375rem;
-	display: block;
-	min-width: 0;
-	box-sizing: content-box;
-	background: none;
-	// -webkit-tap-highlight-color: transparent;
-}
-
-.lunatic .input-lunatic:hover {
-	outline: none;
-	box-shadow: none;
-	border-bottom: 0.125rem solid black;
-}
-
-.lunatic .input-lunatic:focus {
-	outline: none;
-	box-shadow: none;
-	border-bottom: 0.125rem solid $colorPrimaryMain;
-}
-
-// CHECKBOXES SWITCH
-// https://www.creativejuiz.fr/blog/tutoriels/personnaliser-aspect-boutons-radio-checkbox-css
-
-.lunatic.switch [type='checkbox']:not(:checked),
-.lunatic.switch [type='checkbox']:checked {
-	opacity: 0;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label,
-.lunatic.switch [type='checkbox']:checked + label {
-	position: relative;
-	padding-left: 46px;
-	cursor: pointer;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label:before,
-.lunatic.switch [type='checkbox']:checked + label:before,
-.lunatic.switch [type='checkbox']:not(:checked) + label:after,
-.lunatic.switch [type='checkbox']:checked + label:after {
-	content: '';
-	position: absolute;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label:before,
-.lunatic.switch [type='checkbox']:checked + label:before {
-	left: 0;
-	top: 2px;
-	width: 34px;
-	height: 14px;
-	background: #dddddd;
-	border-radius: 15px;
-	-webkit-transition: background-color 0.2s;
-	-moz-transition: background-color 0.2s;
-	-ms-transition: background-color 0.2s;
-	transition: background-color 0.2s;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label:after,
-.lunatic.switch [type='checkbox']:checked + label:after {
-	width: 20px;
-	height: 20px;
-	-webkit-transition: all 0.2s;
-	-moz-transition: all 0.2s;
-	-ms-transition: all 0.2s;
-	transition: all 0.2s;
-	border-radius: 50%;
-	background: #7f8c9a;
-	top: -1px;
-	left: 0;
-}
-
-/* on checked */
-.lunatic.switch [type='checkbox']:checked + label:before {
-	background: #34495e;
-}
-.lunatic.switch [type='checkbox']:checked + label:after {
-	background: $colorCurrentItem;
-	top: -1px;
-	left: 15px;
-}
-
-.lunatic.switch [type='checkbox']:checked + label .ui,
-.lunatic.switch [type='checkbox']:not(:checked) + label .ui:before,
-.lunatic.switch [type='checkbox']:checked + label .ui:after {
-	position: absolute;
-	left: 6px;
-	width: 65px;
-	border-radius: 15px;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 22px;
-	-webkit-transition: all 0.2s;
-	-moz-transition: all 0.2s;
-	-ms-transition: all 0.2s;
-	transition: all 0.2s;
-}
-.lunatic.switch [type='checkbox']:not(:checked) + label .ui:before {
-	content: 'no';
-	left: 32px;
-}
-.lunatic.switch [type='checkbox']:checked + label .ui:after {
-	content: 'yes';
-	color: #39d2b4;
-}
-.lunatic.switch [type='checkbox']:focus + label:before {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-ms-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.lunatic table.table-lunatic {
-	.table-cell-axis {
-		text-align: left;
-		width: 100%;
-	}
-	& td {
-		border-color: $colorPrimaryDark;
-	}
-	& thead td {
-		text-align: center;
-	}
-	td,
-	th {
-		border-color: $colorPrimaryDark;
-		padding: 0.4em;
-	}
-}
-
-.lunatic .button-lunatic {
-	color: white;
-	font-size: medium;
-	background-color: $colorPrimaryDark;
-	border-color: $colorPrimaryDark;
-	width: 30%;
-	&:hover {
-		background-color: white;
-		color: $colorPrimaryDark;
-		border-color: $colorPrimaryDark;
-	}
-	&:disabled {
-		color: $colorPrimaryDark;
-		background-color: $colorVeryLight;
-		border-color: $colorPrimaryDark;
-	}
-}
-
-.lunatic .tooltip-lunatic {
-	border: none;
-	color: white;
-	.tooltip-text {
-		background-color: $colorPrimaryDark;
-	}
-}
-
-.lunatic .filter-description-lunatic {
-	display: inline;
-	color: $colorPrimaryDark;
-	background-color: #dcdcdc;
-	font-weight: bold;
-	padding: 0.2em;
-}
-.lunatic .filter-description-lunatic::before {
-	content: url(./img/arrow.png);
-	vertical-align: -40%;
-	margin-right: 0.5em;
-}
-
-.field-container {
-	width: 100%;
-}
-
-.field-with-tooltip {
-	width: 90%;
-}
-
-.tooltip {
-	width: 10%;
-}
-
-.lunatic .table-lunatic {
-	width: 50%;
-	.field-with-tooltip {
-		width: 95%;
-	}
-	.tooltip {
-		width: 5%;
-	}
-	.tooltip-lunatic {
-		img {
-			width: 1em;
-		}
-	}
-}
-
-.lunatic-loop {
-	border: 1px solid $colorPrimaryMain;
-}

package/src/stories/utils/img/check_box.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>

package/src/stories/utils/img/check_box_outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/img/menu-down.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="rgba(0, 0, 0, 0.54)"><path d="M7,10L12,15L17,10H7Z" /></svg>

package/src/stories/utils/img/menu-up.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,15L12,10L17,15H7Z" /></svg>

package/src/stories/utils/img/radio_button_checked.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/img/radio_button_unchecked.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/options.js

@@ -1,21 +0,0 @@
-export const positioningOptions = {
-	Default: 'DEFAULT',
-	Horizontal: 'HORIZONTAL',
-	Vertical: 'VERTICAL',
-};
-
-export const labelPositionOptions = {
-	Default: 'DEFAULT',
-	Top: 'TOP',
-	Right: 'RIGHT',
-	Bottom: 'BOTTOM',
-	Left: 'LEFT',
-};
-
-export const unitPositionOptions = {
-	Default: 'DEFAULT',
-	Before: 'BEFORE',
-	After: 'AFTER',
-};
-
-export const featuresOptions = { None: [], Vtl: ['VTL'] };

package/src/stories/utils/orchestrator.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import * as lunatic from 'components';
-import './custom-lunatic.scss';
-
-const OrchestratorForStories = ({
-	source,
-	data = {},
-	management = false,
-	features,
-	...rest
-}) => {
-	const preferences = management
-		? ['COLLECTED', 'FORCED', 'EDITED']
-		: ['COLLECTED'];
-	const savingType = management ? 'EDITED' : 'COLLECTED';
-	const { handleChange, components, bindings } = lunatic.useLunatic(
-		source,
-		data,
-		{
-			savingType,
-			preferences,
-			features,
-			management,
-		}
-	);
-
-	return (
-		<div className="container">
-			<div className="components">
-				{components.map((q) => {
-					const { id, componentType } = q;
-					const Component = lunatic[componentType];
-					return (
-						<div className="lunatic lunatic-component" key={`component-${id}`}>
-							<Component
-								{...rest}
-								{...q}
-								handleChange={handleChange}
-								preferences={preferences}
-								management={management}
-								features={features}
-								bindings={bindings}
-								writable
-							/>
-						</div>
-					);
-				})}
-			</div>
-		</div>
-	);
-};
-
-export default OrchestratorForStories;

package/src/tests/components/breadcrumb.spec.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Breadcrumb } from 'components';
-
-describe('breadcrumb', () => {
-	it('renders without crashing', () => {
-		shallow(<Breadcrumb elements={[]} />);
-	});
-	it('renders with elements', () => {
-		const wrapper = shallow(<Breadcrumb elements={['One', 'Two']} />);
-		expect(wrapper.find('.breadcrumb-lunatic').children()).toHaveLength(2);
-	});
-});