@inseefr/lunatic 0.2.63 → 0.3.0-prisme

package/src/components/progress-bar/component.js

@@ -1,28 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './progress-bar.scss';
-
-const ProgressBar = ({ id, value, style }) => {
-	let controledValue = value;
-	if (value < 0) controledValue = 0;
-	if (value > 100) controledValue = 100;
-	return (
-		<div
-			id={`progress-${id}`}
-			className="progress-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{`${controledValue.toFixed(0)} %`}
-			<span style={{ width: `${controledValue}%` }} />
-		</div>
-	);
-};
-
-ProgressBar.propTypes = {
-	id: PropTypes.string.isRequired,
-	value: PropTypes.number.isRequired,
-	style: PropTypes.object,
-};
-
-export default ProgressBar;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { buildStyleObject } from '../../utils/lib';
+import './progress-bar.scss';
+
+const ProgressBar = ({ id, value, style }) => {
+	let controledValue = value;
+	if (value < 0) controledValue = 0;
+	if (value > 100) controledValue = 100;
+	return (
+		<div
+			id={`progress-${id}`}
+			className="progress-lunatic"
+			style={buildStyleObject(style)}
+		>
+			{`${controledValue.toFixed(0)} %`}
+			<span style={{ width: `${controledValue}%` }} />
+		</div>
+	);
+};
+
+ProgressBar.propTypes = {
+	id: PropTypes.string.isRequired,
+	value: PropTypes.number.isRequired,
+	style: PropTypes.object,
+};
+
+export default ProgressBar;

package/src/components/progress-bar/index.js

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

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

@@ -1,54 +1,54 @@
-@import 'src/components/index.scss';
-
-.progress-lunatic {
-	height: 30px;
-	position: relative;
-	background: $progress_back;
-	-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: $main_color;
-	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,136 +1,9 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './radio.scss';
-
-const Radio = ({
-	id,
-	label,
-	preferences,
-	response,
-	options,
-	handleChange,
-	disabled,
-	focused,
-	keyboardSelection,
-	declarations,
-	tooltip,
-	style,
-	positioning,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const { fieldsetStyle, radioStyle } = style;
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<fieldset
-						key={`radio-${id}`}
-						className="radio-group"
-						style={U.buildStyleObject(fieldsetStyle)}
-					>
-						<legend>{label}</legend>
-						<Declarations
-							id={id}
-							type={C.AFTER_QUESTION_TEXT}
-							declarations={declarations}
-						/>
-						{options.map(({ label: optionLabel, value: optionValue }, i) => {
-							const checked =
-								U.getResponseByPreference(preferences)(response) ===
-								optionValue;
-							return (
-								<div
-									key={`radio-${id}-${optionValue}`}
-									className={`radio-modality ${U.getItemsPositioningClass(
-										positioning
-									)}`}
-								>
-									<input
-										type="radio"
-										name={`radio-${id}`}
-										ref={inputRef}
-										id={`radio-${id}-${optionValue}`}
-										aria-labelledby={`input-label-${id}-${optionValue}`}
-										className="radio-lunatic"
-										style={U.buildStyleObject(style)}
-										checked={checked}
-										disabled={disabled}
-										onChange={() =>
-											handleChange({
-												[U.getResponseName(response)]: optionValue,
-											})
-										}
-									/>
-									<label
-										htmlFor={`radio-${id}-${optionValue}`}
-										id={`input-label-${id}-${optionValue}`}
-										style={checked ? U.buildStyleObject(radioStyle) : {}}
-									>
-										{keyboardSelection
-											? `${U.getAlphabet()[i].toUpperCase()} - ${optionLabel}`
-											: optionLabel}
-									</label>
-								</div>
-							);
-						})}
-					</fieldset>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildResponse(options)(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-Radio.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	options: [],
-	disabled: false,
-	focused: false,
-	keyboardSelection: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	tooltip: false,
-	style: { fieldsetStyle: {}, radioStyle: {} },
-};
-
-Radio.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	keyboardSelection: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Radio;
+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/index.js

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

package/src/components/radio/radio.scss

@@ -1,24 +1,59 @@
-@import 'src/components/index.scss';
-
-.radio-group {
-	border: 0.1em solid $main_color;
-}
-
-.radio-lunatic {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: 1em;
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 0.3em 0.3em $main_color;
-	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
-	}
-}
-
-.radio-modality {
-	margin-top: 1em;
-}
+.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,43 +1,50 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './sequence.scss';
-
-const Sequence = ({ id, label, declarations, style }) => (
-	<React.Fragment>
-		<Declarations
-			id={id}
-			type={C.BEFORE_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<div
-			aria-label={`sequence-${id}`}
-			className="sequence-lunatic"
-			style={U.buildStyleObject(style)}
-		>
-			{label}
-		</div>
-		<Declarations
-			id={id}
-			type={C.AFTER_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-	</React.Fragment>
-);
-
-Sequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	style: PropTypes.object,
-};
-
-Sequence.defaultProps = {
-	declarations: [],
-	style: {},
-};
-
-export default Sequence;
+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/index.js

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

package/src/components/sequence/sequence.scss

@@ -1,15 +1,10 @@
-@import 'src/components/index.scss';
-
-.sequence-lunatic {
-	height: 40px;
-	box-sizing: border-box;
-	border-radius: 0px;
-	background-color: $main_color;
-	border: 0.1em solid $main_color;
-	color: white;
-	font-weight: bold;
-	font-size: 130%;
-	padding-left: 10px;
-	display: flex;
-	align-items: center;
-}
+.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,43 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './subsequence.scss';
-
-const Subsequence = ({ id, label, declarations, style }) => (
-	<React.Fragment>
-		<Declarations
-			id={id}
-			type={C.BEFORE_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<div
-			aria-label={`subsequence-${id}`}
-			className="subsequence-lunatic"
-			style={U.buildStyleObject(style)}
-		>
-			{label}
-		</div>
-		<Declarations
-			id={id}
-			type={C.AFTER_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-	</React.Fragment>
-);
-
-Subsequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	style: PropTypes.object,
-};
-
-Subsequence.defaultProps = {
-	declarations: [],
-	style: {},
-};
-
-export default Subsequence;
+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/subsequence/index.js

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