@inseefr/lunatic 0.2.3-experimental → 0.2.3-prisme

package/src/components/modal/component.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from '../button';
+import './modal.scss';
+
+const Modal = ({ controls, cancelModal, validateModal }) => {
+	const disableValidation = controls
+		.map(({ criticality }) => criticality)
+		.includes('LOCK');
+	return (
+		<div className="lunatic-modal">
+			<div className="lunatic-modal-content">
+				<div className="lunatic-modal-text">
+					<ul>
+						{controls.map(({ id, errorMessage }) => (
+							<li key={id}>{errorMessage}</li>
+						))}
+					</ul>
+				</div>
+				<div className="lunatic-modal-buttons">
+					<div className="lunatic-modal-button">
+						<Button value="Corriger ma réponse" onClick={cancelModal} />
+					</div>
+					<div className="lunatic-modal-button">
+						<Button
+							value="Continuer"
+							onClick={validateModal}
+							disabled={disableValidation}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Modal;

package/src/components/modal/index.js

@@ -0,0 +1 @@
+export { default } from './component';

package/src/components/modal/modal.scss

@@ -0,0 +1,33 @@
+.lunatic-modal {
+	position: fixed;
+	padding-top: 50px;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 1000;
+	.lunatic-modal-content {
+		position: relative;
+		background-color: white;
+		padding: 20px;
+		margin: auto;
+		width: 50%;
+		-webkit-animation-name: animatetop;
+		-webkit-animation-duration: 0.4s;
+		animation-name: animatetop;
+		animation-duration: 0.4s;
+		.lunatic-modal-text {
+			font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+			font-size: 1em;
+		}
+		.lunatic-modal-buttons {
+			display: flex;
+			justify-content: space-around;
+			.lunatic-modal-button {
+				font-size: 0.8em;
+			}
+		}
+	}
+}

package/src/components/progress-bar/progress-bar.scss

@@ -1,54 +1,54 @@
-.lunatic-component {
-	.progress-lunatic {
-		height: 30px;
-		position: relative;
-		background: var(--color-disabled);
-		-moz-border-radius: 20px;
-		-webkit-border-radius: 20px;
-		border-radius: 20px;
-		padding: 5px;
-		box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-		text-align: center;
-		font-weight: bold;
-	}
-
-	.progress-lunatic > span {
-		display: block;
-		height: 100%;
-		border-radius: 20px;
-		background-color: var(--color-primary-light);
-		opacity: 0.6;
-		box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
-			inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-		position: relative;
-		top: -18px;
-		overflow: hidden;
-	}
-
-	.progress-lunatic > span:after {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		background-image: linear-gradient(
-			-45deg,
-			rgba(255, 255, 255, 0.2) 25%,
-			transparent 25%,
-			transparent 50%,
-			rgba(255, 255, 255, 0.2) 50%,
-			rgba(255, 255, 255, 0.2) 75%,
-			transparent 75%,
-			transparent
-		);
-		z-index: 1;
-		background-size: 50px 50px;
-		animation: move 2s linear infinite;
-		border-top-right-radius: 8px;
-		border-bottom-right-radius: 8px;
-		border-top-left-radius: 20px;
-		border-bottom-left-radius: 20px;
-		overflow: hidden;
-	}
-}
+.lunatic-component {
+	.progress-lunatic {
+		height: 30px;
+		position: relative;
+		background: var(--color-disabled);
+		-moz-border-radius: 20px;
+		-webkit-border-radius: 20px;
+		border-radius: 20px;
+		padding: 5px;
+		box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
+		text-align: center;
+		font-weight: bold;
+	}
+
+	.progress-lunatic > span {
+		display: block;
+		height: 100%;
+		border-radius: 20px;
+		background-color: var(--color-primary-light);
+		opacity: 0.6;
+		box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
+			inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+		position: relative;
+		top: -18px;
+		overflow: hidden;
+	}
+
+	.progress-lunatic > span:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-image: linear-gradient(
+			-45deg,
+			rgba(255, 255, 255, 0.2) 25%,
+			transparent 25%,
+			transparent 50%,
+			rgba(255, 255, 255, 0.2) 50%,
+			rgba(255, 255, 255, 0.2) 75%,
+			transparent 75%,
+			transparent
+		);
+		z-index: 1;
+		background-size: 50px 50px;
+		animation: move 2s linear infinite;
+		border-top-right-radius: 8px;
+		border-bottom-right-radius: 8px;
+		border-top-left-radius: 20px;
+		border-bottom-left-radius: 20px;
+		overflow: hidden;
+	}
+}

package/src/components/radio/component.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { ListDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './radio.scss';
-
-const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
-
-export default missingWrapper(React.memo(Radio, areEqual));
+import React from 'react';
+import componentWrapper from '../component-wrapper';
+import { ListDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import './radio.scss';
+
+const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
+
+export default componentWrapper(React.memo(Radio, areEqual));

package/src/components/radio/radio.scss

@@ -1,59 +1,59 @@
-.lunatic-component {
-	.radio-group-list {
-		border: 0;
-		outline: 0;
-		padding: 0;
-		margin-top: 0.9375rem;
-	}
-
-	.radio-lunatic {
-		position: absolute;
-		opacity: 0;
-		margin-bottom: 0;
-		margin-top: 0.05rem;
-		margin-left: 0.2rem;
-		height: 20px;
-		width: 20px;
-		+ label {
-			margin-left: 2rem;
-		}
-		&:focus {
-			+ label {
-				background-color: rgba(0, 0, 0, 0.05);
-			}
-		}
-		+ label::before {
-			float: left;
-			line-height: 2rem;
-		}
-	}
-
-	.field,
-	.field-with-tooltip {
-		.radio-group-list .radio-modality {
-			height: 1.375em;
-		}
-	}
-
-	.radio-group-list {
-		.radio-modality {
-			label {
-				display: flex;
-			}
-		}
-		.radio-modality.radio-modality-block label {
-			padding-top: 0.325em;
-		}
-		.radio-modality.radio-modality-block.horizontal-options label {
-			padding-top: 0;
-		}
-	}
-
-	.radio-modality {
-		margin-bottom: 0.8em;
-	}
-
-	.radio-lunatic + label {
-		margin-top: 0.325em;
-	}
-}
+.lunatic-component {
+	.radio-group-list {
+		border: 0;
+		outline: 0;
+		padding: 0;
+		margin-top: 0.9375rem;
+	}
+
+	.radio-lunatic {
+		position: absolute;
+		opacity: 0;
+		margin-bottom: 0;
+		margin-top: 0.05rem;
+		margin-left: 0.2rem;
+		height: 20px;
+		width: 20px;
+		+ label {
+			margin-left: 2rem;
+		}
+		&:focus {
+			+ label {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+		+ label::before {
+			float: left;
+			line-height: 2rem;
+		}
+	}
+
+	.field,
+	.field-with-tooltip {
+		.radio-group-list .radio-modality {
+			height: 1.375em;
+		}
+	}
+
+	.radio-group-list {
+		.radio-modality {
+			label {
+				display: flex;
+			}
+		}
+		.radio-modality.radio-modality-block label {
+			padding-top: 0.325em;
+		}
+		.radio-modality.radio-modality-block.horizontal-options label {
+			padding-top: 0;
+		}
+	}
+
+	.radio-modality {
+		margin-bottom: 0.8em;
+	}
+
+	.radio-lunatic + label {
+		margin-top: 0.325em;
+	}
+}

package/src/components/sequence/component.js

@@ -1,50 +1,50 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
-import * as U from '../../utils/lib';
-import { interpret } from '../../utils/to-expose';
-import './sequence.scss';
-
-const Sequence = ({
-	id,
-	label,
-	declarations,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`sequence-${id}`}
-			className="sequence-lunatic"
-			style={U.buildStyleObject(style)}
-			id={`sequence-${id}`}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	</SimpleDeclarationsWrapper>
-);
-
-Sequence.defaultProps = {
-	declarations: [],
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-Sequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default React.memo(Sequence, U.areEqual);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+import './sequence.scss';
+
+const Sequence = ({
+	id,
+	label,
+	declarations,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) => (
+	<SimpleDeclarationsWrapper
+		id={id}
+		declarations={declarations}
+		features={features}
+		bindings={bindings}
+	>
+		<div
+			aria-label={`sequence-${id}`}
+			className="sequence-lunatic"
+			style={U.buildStyleObject(style)}
+			id={`sequence-${id}`}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	</SimpleDeclarationsWrapper>
+);
+
+Sequence.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+Sequence.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default React.memo(Sequence, U.areEqual);

package/src/components/sequence/sequence.scss

@@ -1,10 +1,10 @@
-.lunatic-component {
-	.sequence-lunatic {
-		padding: 0;
-		font-size: 0.875rem;
-		color: var(--color-primary-light);
-		background-color: var(--color-secondary-contrast-text);
-		border: 0;
-		height: 1.875rem;
-	}
-}
+.lunatic-component {
+	.sequence-lunatic {
+		padding: 0;
+		font-size: 0.875rem;
+		color: var(--color-primary-light);
+		background-color: var(--color-secondary-contrast-text);
+		border: 0;
+		height: 1.875rem;
+	}
+}

package/src/components/subsequence/component.js

@@ -1,49 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
-import * as U from '../../utils/lib';
-import { interpret } from '../../utils/to-expose';
-
-const Subsequence = ({
-	id,
-	label,
-	declarations,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`subsequence-${id}`}
-			className="subsequence-lunatic"
-			style={U.buildStyleObject(style)}
-			aria-label={`subsequence-${id}`}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	</SimpleDeclarationsWrapper>
-);
-
-Subsequence.defaultProps = {
-	declarations: [],
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-Subsequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default React.memo(Subsequence, U.areEqual);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+
+const Subsequence = ({
+	id,
+	label,
+	declarations,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) => (
+	<SimpleDeclarationsWrapper
+		id={id}
+		declarations={declarations}
+		features={features}
+		bindings={bindings}
+	>
+		<div
+			aria-label={`subsequence-${id}`}
+			className="subsequence-lunatic"
+			style={U.buildStyleObject(style)}
+			aria-label={`subsequence-${id}`}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	</SimpleDeclarationsWrapper>
+);
+
+Subsequence.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+Subsequence.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default React.memo(Subsequence, U.areEqual);

package/src/components/suggester/check-store.js

@@ -59,10 +59,8 @@ function CheckStore({ storeName, version, setStore, children }) {
 	}
 	return (
 		<div className="lunatic-suggester-unvailable">
-			Le store {storeName} n'est pas disponible.
-			<button disabled={disabled} onClick={() => setRefresh(true)}>
-				Refresh
-			</button>
+			La suggestion sur liste n'est pas possible sur votre navigateur, vous
+			pouvez passer la question en appuyant sur Enregistrer et Continuer
 		</div>
 	);
 }

package/src/components/suggester/components/panel/default-option-renderer.js

@@ -1,27 +1,27 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function DefaultOptionRenderer({ option, selected }) {
-	const { id, label } = option;
-
-	if (label && label.length) {
-		return (
-			<div className={classnames('lunatic-suggester-option', { selected })}>
-				<span className="id">{id}</span>
-				{label && (
-					<>
-						<span> - </span>
-						<span className="label">{label}</span>
-					</>
-				)}
-			</div>
-		);
-	}
-	return (
-		<div className={classnames('lunatic-suggester-option', { selected })}>
-			<span className="id">{id}</span>
-		</div>
-	);
-}
-
-export default DefaultOptionRenderer;
+import React from 'react';
+import classnames from 'classnames';
+
+function DefaultOptionRenderer({ option, selected }) {
+	const { id, label } = option;
+
+	if (label && label.length) {
+		return (
+			<div className={classnames('lunatic-suggester-option', { selected })}>
+				<span className="id">{id}</span>
+				{label && (
+					<>
+						<span> - </span>
+						<span className="label">{label}</span>
+					</>
+				)}
+			</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-suggester-option', { selected })}>
+			<span className="id">{id}</span>
+		</div>
+	);
+}
+
+export default DefaultOptionRenderer;