@inseefr/lunatic 0.1.7 → 0.1.8-experimental

package/src/components/dropdown/dropdown.scss

@@ -0,0 +1,176 @@
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin disableSelect {
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Internet Explorer */
+	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none; /* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
+}
+
+.lunatic-dropdown {
+	display: block;
+	width: 100%;
+	margin-bottom: 1.5rem;
+	&:focus {
+		outline: none;
+	}
+
+	&.label-left {
+		display: flex;
+		flex-direction: row;
+	}
+
+	&.label-right {
+		display: flex;
+		flex-direction: row-reverse;
+	}
+
+	&.label-top {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&.label-bottom {
+		display: flex;
+		flex-direction: column-reverse;
+	}
+
+	.lunatic-dropdown-label {
+		opacity: 1;
+	}
+
+	.lunatic-dropdown-container {
+		ul {
+			padding-inline-start: 0px;
+			font-size: 1rem;
+		}
+		position: relative;
+		height: 2em;
+		width: 100%;
+		z-index: 1;
+
+		&.focused {
+			z-index: 2;
+		}
+		&:focus {
+			outline: none;
+		}
+
+		.lunatic-dropdown-content {
+			// background-color: var(--color-very-very-light);
+			border-color: white;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			height: auto;
+			&.visible {
+				// border-radius: 0 0 16px 16px;
+				height: auto;
+			}
+
+			&.disabled {
+				background-color: var(--color-disabled);
+			}
+
+			.lunatic-dropdown-input {
+				border-bottom: 1px solid var(--color-primary-dark);
+				padding: 6px 0 7px;
+				input {
+					@include defaultFont();
+					@include disableSelect();
+					margin: 0px 25px 0px 0px;
+					width: calc(100% - 37px);
+					background-color: transparent;
+					border-color: transparent;
+					height: 2em;
+					border: none;
+					outline: none;
+					text-align: left;
+					cursor: inherit;
+				}
+				&:hover {
+					cursor: pointer;
+					border-bottom: 2px solid var(--color-primary-main);
+				}
+				&.focused {
+					background-color: rgba(0, 0, 0, 0.05);
+					box-shadow: 12px 0 rgba(0, 0, 0, 0.05);
+				}
+			}
+
+			.lunatic-dropdown-icon {
+				cursor: pointer;
+				position: absolute;
+				right: 2px;
+				top: 2px;
+				svg {
+					fill: rgb(146, 146, 146);
+				}
+			}
+
+			.lunatic-transition {
+				opacity: 0;
+
+				&:focus {
+					outline: none;
+				}
+
+				&.visible {
+					visibility: visible;
+					opacity: 1;
+					transition: opacity var(--dropdown-transition-time) ease-out;
+				}
+
+				.lunatic-dropdown-panel-container {
+					box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.9),
+						0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+						0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+
+					.lunatic-dropdown-panel {
+						background-color: white;
+						margin: 0 0 12px 0;
+						border-radius: 4px;
+						z-index: 3;
+						padding-top: 3px;
+						list-style: none;
+						&:focus {
+							outline: none;
+						}
+						max-height: 100px;
+						overflow-y: auto;
+					}
+				}
+
+				/** options style */
+				.lunatic-dropdown-option {
+					padding-left: 10px;
+					cursor: pointer;
+					@include defaultFont();
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					color: black;
+					line-height: 2rem;
+					display: block;
+					&.lunatic-dropdown-option-active {
+						color: var(--color-primary-dark);
+						background-color: var(--color-dropdown-active);
+					}
+					&.lunatic-dropdown-option-selected {
+						background-color: var(--color-dropdown-selected);
+					}
+
+					.lunatic-prefix {
+						color: var(--color-prefix);
+						font-weight: bold;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/dropdown/index.js

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

package/src/components/filter-description/component.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { interpret } from '../../utils/to-expose';
+import { buildStyleObject } from '../../utils/lib';
+
+const FilterDescription = ({
+	id,
+	label,
+	filterDescription,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) =>
+	filterDescription ? (
+		<div
+			id={`filter-description-${id}`}
+			aria-label={`filter-description`}
+			className="filter-description-lunatic"
+			style={buildStyleObject(style)}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	) : null;
+
+FilterDescription.defaultProps = {
+	filterDescription: false,
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+FilterDescription.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	filterDescription: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default FilterDescription;

package/src/components/filter-description/index.js

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

package/src/components/icon/assets/checkbox-checked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CheckboxChecked = () => (
+	<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>
+);
+
+export default CheckboxChecked;

package/src/components/icon/assets/checkbox-unchecked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CheckboxUnchecked = () => (
+	<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>
+);
+
+export default CheckboxUnchecked;

package/src/components/icon/assets/index.js

@@ -0,0 +1,4 @@
+export { default as RadioChecked } from './radio-checked';
+export { default as RadioUnchecked } from './radio-unchecked';
+export { default as CheckboxChecked } from './checkbox-checked';
+export { default as CheckboxUnchecked } from './checkbox-unchecked';

package/src/components/icon/assets/radio-checked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const RadioChecked = () => (
+	<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>
+);
+
+export default RadioChecked;

package/src/components/icon/assets/radio-unchecked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const RadioUnchecked = () => (
+	<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>
+);
+
+export default RadioUnchecked;

package/src/components/icon/component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+	CheckboxChecked,
+	CheckboxUnchecked,
+	RadioChecked,
+	RadioUnchecked,
+} from './assets';
+import './icon.scss';
+
+const Content = ({ type, checked }) => {
+	if (type === 'radio') {
+		if (checked) return <RadioChecked />;
+		return <RadioUnchecked />;
+	}
+	if (type === 'checkbox') {
+		if (checked) return <CheckboxChecked />;
+		return <CheckboxUnchecked />;
+	}
+	return null;
+};
+
+const Icon = ({ type, checked, disabled, children }) => (
+	<>
+		<span className={`list-icon-wrapper`}>
+			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
+				<Content type={type} checked={checked} />
+			</span>
+			{children}
+		</span>
+	</>
+);
+
+export default Icon;

package/src/components/icon/icon.scss

@@ -0,0 +1,13 @@
+.list-icon-wrapper {
+	&:focus-within svg {
+		fill: var(--color-primary-dark);
+	}
+}
+
+.list-icon {
+	position: absolute;
+	margin-top: -0.1rem;
+	&.list-icon-disabled svg {
+		background-color: var(--color-disabled);
+	}
+}

package/src/components/icon/index.js

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

package/src/components/index.js

@@ -1,5 +1,3 @@
-export { default as Button } from './button';
-export { CheckboxOne, CheckboxBoolean } from './checkbox';
-export { InputNumber } from './input';
-export { default as Sequence } from './sequence';
-export { default as Subsequence } from './subsequence';
+export * from './components';
+export { default as Table } from './table';
+export * from '../utils/to-expose';

package/src/components/index.scss

@@ -1,20 +1,34 @@
-// Define colors
-$main_color: #e80a4d;
-$progress_back: #d3d3d3;
-$background-warning: rgb(245, 12, 12);
-$disabled: rgb(235, 235, 228);
-
 * {
 	box-sizing: border-box;
-	font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
+	--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;
 }
 
-.required:after {
+.mandatory:after {
 	content: ' *';
 	color: red;
 }
 
-.horizontal-items {
+.horizontal-options {
 	display: inline-block;
 	margin-right: 2em;
 }
@@ -22,20 +36,66 @@ $disabled: rgb(235, 235, 228);
 @mixin vertical-placement($reverse: false) {
 	display: flex;
 	flex-direction: if($reverse, column-reverse, column);
-	:first-child {
-		margin-top: 0.5rem;
-	}
 }
 
 @mixin horizontal-placement($reverse: false) {
 	display: flex;
 	flex-direction: if($reverse, row-reverse, row);
 	align-items: baseline;
+
 	:first-child {
 		margin-right: 1rem;
 	}
 }
 
+// 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;
+	line-height: 0.75rem;
+	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();
 }
@@ -49,3 +109,65 @@ $disabled: rgb(235, 235, 228);
 .label-left {
 	@include horizontal-placement();
 }
+
+.field-container {
+	display: flex;
+}
+
+.modality-label p {
+	display: inline;
+}
+
+.tooltip {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.field-with-tooltip {
+	width: calc(100% - 25px);
+	position: relative;
+}
+
+.field {
+	width: 100%;
+	position: relative;
+}
+
+.field,
+.field-with-tooltip {
+	display: flex;
+	.unit {
+		margin: auto 0;
+		color: var(--color-primary-dark);
+		font-weight: bold;
+	}
+}
+
+.link-md .field-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);
+	}
+}
+
+.link-md .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/src/components/input/index.js

@@ -1 +1,2 @@
+export { default as Input } from './input';
 export { default as InputNumber } from './input-number';