genesys-react-components 0.1.6-devengage-1377-autofocus.120 → 0.1.8-devengage-1376.128

package/src/dxaccordion/DxAccordion.tsx

@@ -0,0 +1,49 @@
+import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import React, { useState } from 'react';
+import { DxAccordionProps } from '..';
+
+import './DxAccordion.scss';
+
+export default function DxAccordion(props: DxAccordionProps) {
+	const [isOpen, setIsOpen] = useState(props.showOpen || false);
+	const [expandTrigger, setExpandTrigger] = useState(props.expandTrigger);
+	const [showOpenTrigger, setShowOpenTrigger] = useState(props.showOpenTrigger);
+
+	// This one forcibly opens the component
+	React.useEffect(() => {
+		if (props.expandTrigger !== expandTrigger) {
+			setIsOpen(true);
+			setExpandTrigger(props.expandTrigger);
+		}
+	}, [props.expandTrigger, expandTrigger]);
+
+	// This one forcibly recalculates the state based on the value for props.showOpen
+	React.useEffect(() => {
+		if (props.showOpenTrigger !== showOpenTrigger) {
+			setIsOpen(props.showOpen);
+			setShowOpenTrigger(props.showOpenTrigger);
+		}
+	}, [props.showOpenTrigger, showOpenTrigger, props.showOpen]);
+
+	React.useEffect(() => {
+		if (props.showOpen === true || props.showOpen === false) setIsOpen(props.showOpen);
+	}, [props.showOpen]);
+
+	let style = {} as React.CSSProperties;
+	if (props.headingColor) style.color = props.headingColor;
+
+	let icon;
+	if (props.headingIcon) icon = <GenesysDevIcon icon={props.headingIcon} className="heading-icon" />;
+
+	return (
+		<div id={props.containerId || undefined} className={`dx-accordion${props.className ? ' ' + props.className : ''}`}>
+			<div className="accordion-heading" style={style} onClick={() => setIsOpen(!isOpen)}>
+				<span className="accordion-heading__left">
+					{icon} {props.title}
+				</span>{' '}
+				<GenesysDevIcon icon={isOpen ? GenesysDevIcons.AppChevronUp : GenesysDevIcons.AppChevronDown} />
+			</div>
+			{isOpen ? <div className="accordion-content">{props.children}</div> : undefined}
+		</div>
+	);
+}

package/src/dxaccordion/DxAccordionGroup.scss

@@ -0,0 +1,3 @@
+.dx-accordion-group {
+	margin: 40px 0;
+}

package/src/dxaccordion/DxAccordionGroup.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './DxAccordionGroup.scss';
+
+interface IProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function DxAccordionGroup(props: IProps) {
+	return <div className={`dx-accordion-group${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;
+}

package/src/dxbutton/DxButton.scss

@@ -0,0 +1,79 @@
+.dx-button {
+	margin: 15px 10px;
+	border-radius: 2px;
+	padding: 8px 15px;
+	cursor: pointer;
+	font-weight: 500;
+
+	&-primary {
+		color: #ffffff;
+		border: 1px solid #419bb2;
+		background-color: #419bb2;
+
+		&:hover {
+			background-color: #317b8d;
+			border-color: #317b8d;
+			transition: 0.1s;
+		}
+
+		&:focus {
+			background-color: #419bb2;
+			border-color: #419bb2;
+			box-shadow: 0 0 0 2px #aac9ff;
+			transition: 0.1s;
+		}
+
+		&:disabled {
+			background-color: #9aafb540;
+			border-color: #9aafb540;
+			transition: 0.1s;
+			cursor: not-allowed;
+		}
+	}
+
+	&-secondary {
+		color: #419bb2;
+		border: 1px solid #419bb2;
+		background-color: #ffffff;
+
+		&:hover {
+			color: #317b8d;
+			border-color: #317b8d;
+			transition: 0.1s;
+		}
+
+		&:focus {
+			color: #419bb2;
+			border-color: #419bb2;
+			box-shadow: 0 0 0 2px #aac9ff;
+			transition: 0.1s;
+		}
+
+		&:disabled {
+			color: #8a9a9e;
+			background-color: #e0e6e8;
+			border-color: #e0e6e8;
+			transition: 0.1s;
+			cursor: not-allowed;
+		}
+	}
+
+	&-link {
+		color: #2f7bb1;
+		background: transparent;
+		margin: 0;
+		padding: 0 2px;
+		border: 0;
+
+		&:hover {
+			color: #1c5176;
+		}
+
+		&:disabled {
+			color: #8a9a9e;
+			transition: 0.1s;
+			cursor: not-allowed;
+			text-decoration: line-through;
+		}
+	}
+}

package/src/dxbutton/DxButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { VoidEventCallback } from '..';
+
+import './DxButton.scss';
+
+interface IProps {
+	type?: 'primary' | 'secondary' | 'link';
+	disabled?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+	onClick?: VoidEventCallback;
+}
+
+export default function DxButton(props: IProps) {
+	let classNames = ['dx-button'];
+	classNames.push(`dx-button-${props.type || 'primary'}`);
+	if (props.className) classNames.push(props.className);
+
+	const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+		if (!props.onClick) return;
+		e.preventDefault();
+		e.stopPropagation();
+		props.onClick();
+	};
+
+	return (
+		<button className={classNames.join(' ')} type="button" onClick={handleClick} disabled={props.disabled === true}>
+			{props.children}
+		</button>
+	);
+}

package/src/dxitemgroup/DxCheckbox.scss

@@ -0,0 +1,145 @@
+.dx-checkbox {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	margin: 15px 0;
+
+	&:first-of-type {
+		margin-top: 0;
+	}
+
+	.label-text {
+		font-family: Roboto;
+		font-style: normal;
+		font-weight: normal;
+		font-size: 12px;
+		line-height: 18px;
+		color: #75757a;
+	}
+
+	input[type='checkbox'] {
+		// Hide default appearance
+		-webkit-appearance: none;
+		appearance: none;
+
+		// Custom appearance
+		margin: 0 8px 0 0;
+		width: 16px;
+		height: 16px;
+		border: 1px solid #8a96a3;
+		border-radius: 2px;
+		background-color: #ffffff;
+		flex-shrink: 0;
+	}
+
+	// Hide checkmark initially
+	input[type='checkbox']::before {
+		display: none;
+	}
+
+	// Fill in background on check
+	input[type='checkbox']:checked {
+		background-color: #8a96a3;
+	}
+
+	// Display checkmark on check
+	input[type='checkbox']:checked::before {
+		display: block;
+		position: relative;
+		top: 7px;
+		left: 3px;
+		font-size: 9px;
+		line-height: 0;
+		color: #ffffff;
+
+		// genesys-dev-icons app-check
+		content: '\f103';
+		font-family: genesys-dev-icons !important;
+		font-style: normal;
+		font-weight: normal !important;
+		font-feature-settings: normal;
+		font-variant: normal;
+		text-transform: none;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	// Hover - radio button
+	input[type='checkbox']:not(:disabled):hover {
+		border-color: #4d5061;
+	}
+
+	// Focus - radio button
+	input[type='checkbox']:not(:disabled):focus {
+		outline: #aac9ff solid 2px;
+	}
+	// Disable default focus outline
+	input[type='checkbox']:not(:disabled):focus-visible {
+		outline: 0;
+	}
+	input[type='radio'] {
+		// Hide default appearance
+		-webkit-appearance: none;
+		appearance: none;
+
+		// Custom appearance
+		margin: 0 8px 0 0;
+		width: 16px;
+		height: 16px;
+		border: 1px solid #8a96a3;
+		border-radius: 8px;
+		background-color: #ffffff;
+		flex-shrink: 0;
+	}
+
+	// Hide radio button initially
+	input[type='radio']::before {
+		display: none;
+	}
+
+	// Display filled radio button
+	input[type='radio']:checked::before {
+		content: '';
+		display: block;
+		width: 10px;
+		height: 10px;
+		border-radius: 8px;
+		position: relative;
+		top: 2px;
+		left: 2px;
+		background-color: #8a96a3;
+	}
+
+	// Hover - radio button
+	input[type='radio']:not(:disabled):hover {
+		border-color: #4d5061;
+	}
+
+	// Focus - radio button
+	input[type='radio']:not(:disabled):focus {
+		outline: #aac9ff solid 2px;
+	}
+	// Disable default focus outline
+	input[type='radio']:not(:disabled):focus-visible {
+		outline: 0;
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+
+		input {
+			border-color: #e8eaed;
+			cursor: not-allowed;
+		}
+
+		// Fill in background on check
+		input:checked {
+			background-color: #e8eaed;
+			cursor: not-allowed;
+		}
+	}
+}
+
+.dx-label .dx-checkbox .label-text {
+	margin: 0;
+}

package/src/dxitemgroup/DxCheckbox.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+import { CheckedChangedCallback } from '..';
+
+import './DxCheckbox.scss';
+
+interface IProps {
+	label: string;
+	itemValue: string;
+	description?: string;
+	checked?: boolean;
+	initiallyChecked?: boolean;
+	name?: string;
+	className?: string;
+	onCheckChanged?: CheckedChangedCallback;
+	useRadioType?: boolean;
+	disabled?: boolean;
+}
+
+export default function DxCheckbox(props: IProps) {
+	let initialValue: boolean = props.checked !== undefined ? props.checked : props.initiallyChecked || false;
+
+	const [checked, setChecked] = useState<boolean>(initialValue);
+
+	useEffect(() => {
+		if (props.checked === undefined || props.checked === checked) return;
+		setChecked(props.checked);
+	}, [props.checked]);
+
+	useEffect(() => {
+		if (props.onCheckChanged) props.onCheckChanged(checked);
+	}, [checked]);
+
+	return (
+		<label className={`dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}`}>
+			<input
+				type={props.useRadioType ? 'radio' : 'checkbox'}
+				name={props.name}
+				value={props.itemValue}
+				checked={checked}
+				onChange={(e) => setChecked(e.target.checked)}
+				disabled={props.disabled === true}
+			/>
+			<span className='label-text'>{props.label}</span>
+		</label>
+	);
+}

package/src/dxitemgroup/DxItemGroup.scss

@@ -0,0 +1,6 @@
+.dx-item-group {
+	display: block;
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

package/src/dxitemgroup/DxItemGroup.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { DxItemGroupItem, DxItemGroupItemValue, DxItemGroupProps, ItemChangedCallback, ItemGroupChangedCallback } from '..';
+
+import './DxItemGroup.scss';
+import './radiobutton.scss';
+import './dropdown.scss';
+import './multiselect.scss';
+import DxLabel from '../dxlabel/DxLabel';
+import DxCheckbox from './DxCheckbox';
+
+export default function DxItemGroup(props: DxItemGroupProps) {
+	const [data, setData] = useState<DxItemGroupItemValue[]>(
+		props.items.map((item) => {
+			return { item, isSelected: item.isSelected !== undefined ? item.isSelected : false };
+		})
+	);
+	const [id] = useState(uuid());
+	const [title, setTitle] = useState(props.title);
+	const [description, setDescription] = useState(props.description);
+	const [format, setFormat] = useState(props.format);
+	const [disabled, setDisabled] = useState(props.disabled);
+	const [className, setClassName] = useState(props.className);
+
+	// data changed
+	useEffect(() => {
+		if (props.onItemsChanged) props.onItemsChanged(data);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data]);
+
+	// Recalculate on props changed
+	useEffect(() => {
+		setTitle(props.title);
+		setDescription(props.description);
+		setFormat(props.format);
+		setDisabled(props.disabled);
+		setClassName(props.className);
+	}, [props.title, props.description, props.format, props.items, props.disabled, props.className]);
+
+	useEffect(() => {
+		setData(
+			props.items.map((item) => {
+				return { item, isSelected: item.isSelected !== undefined ? item.isSelected : false };
+			})
+		);
+	}, [props.items]);
+	// Handle individual item changed
+	const itemChanged = (idx: number, item: DxItemGroupItem, checked: boolean) => {
+		if (props.onItemChanged) props.onItemChanged(item, checked);
+		let newData = [...data];
+		// Unselect everything if it's radio buttons
+		if (format === 'radio') newData.forEach((value) => (value.isSelected = false));
+		// Set the selected state of the new item
+		newData[idx].isSelected = checked;
+		setData(newData);
+	};
+
+	const selectChanged = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		const options = e.target.options;
+		let newData = [...data];
+		// Assign selected value for each item in the list
+		for (let i = 0; i < options.length; i++) {
+			const thisItem = newData.find((value) => value.item.value === options[i].value);
+			thisItem.isSelected = options[i].selected;
+		}
+		// Update entire data list
+		setData(newData);
+		// Trigger individual update
+		const changedItemIdx = newData.findIndex((value) => value.item.value === e.target.value);
+		if (changedItemIdx >= 0) itemChanged(changedItemIdx, newData[changedItemIdx].item, newData[changedItemIdx].isSelected);
+	};
+
+	switch (format) {
+		case 'multiselect':
+		case 'dropdown': {
+			const isMulti = format === 'multiselect';
+			return (
+				<DxLabel label={title} description={description} className={className}>
+					<div className={`dx-item-group${isMulti ? ' dx-multiselect-group' : ' dx-select-group'}${disabled ? ' disabled' : ''}`}>
+						<select
+							multiple={isMulti}
+							disabled={disabled === true}
+							onChange={(e) => selectChanged(e)}
+							value={
+								isMulti
+									? data.filter((item) => item.isSelected)?.map((item) => item.item.value)
+									: data.find((item) => item.isSelected)?.item.value
+							}
+						>
+							{data.map((d, i) => (
+								<option key={i} value={d.item.value} disabled={d.item.disabled}>
+									{d.item.label}
+								</option>
+							))}
+						</select>
+					</div>
+				</DxLabel>
+			);
+		}
+		case 'checkbox':
+		case 'radio':
+		default: {
+			return (
+				<DxLabel
+					label={title}
+					description={description}
+					className={`dx-item-group${disabled ? ' disabled' : ''}${className ? ' ' + className : ''}`}
+					useFieldset={true}
+				>
+					<div
+						onChange={(e: React.ChangeEvent<HTMLDivElement>) => {
+							const i = data.findIndex((d) => d.item.value === (e.target as any)?.value);
+							if (i < 0) return;
+							itemChanged(i, data[i].item, (e.target as any)?.checked);
+						}}
+					>
+						{data.map((d, i) => (
+							<DxCheckbox
+								key={d.item.value}
+								name={format === 'checkbox' ? `${id}-${d.item.value}` : id}
+								label={d.item.label}
+								itemValue={d.item.value}
+								checked={d.isSelected}
+								useRadioType={format === 'radio'}
+								disabled={disabled || d.item.disabled}
+							/>
+						))}
+					</div>
+				</DxLabel>
+			);
+		}
+	}
+}

package/src/dxitemgroup/dropdown.scss

@@ -0,0 +1,53 @@
+.dx-select-group {
+	appearance: none;
+	position: relative;
+
+	select {
+		border: 1px solid #8a96a3;
+		border-radius: 2px;
+		background-color: #ffffff;
+		font-style: normal;
+		font-weight: 300;
+		font-size: 12px;
+		line-height: 14px;
+		color: #75757a;
+		padding: 8px 32px 8px 12px;
+		width: 100%;
+		appearance: none;
+
+		&:focus-visible {
+			outline: 2px solid #aac9ff;
+		}
+	}
+
+	&::after {
+		position: absolute;
+		bottom: 12px;
+		right: 12px;
+		content: '\f104';
+		font-size: 8px;
+		font-family: genesys-dev-icons !important;
+		font-style: normal;
+		font-weight: normal !important;
+		font-feature-settings: normal;
+		font-variant: normal;
+		text-transform: none;
+		line-height: 1;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		pointer-events: none;
+	}
+
+	&.disabled {
+		&::after {
+			color: #8a9a9e;
+		}
+
+		select:disabled {
+			background-color: #e6ebec;
+			border-color: #e8eaed;
+			color: #8a9a9e;
+			cursor: not-allowed;
+		}
+	}
+}

package/src/dxitemgroup/multiselect.scss

@@ -0,0 +1,74 @@
+.dx-multiselect-group {
+	appearance: none;
+	position: relative;
+
+	select {
+		border: 1px solid #8a96a3;
+		border-radius: 2px;
+		background-color: #ffffff;
+		font-style: normal;
+		font-weight: 300;
+		font-size: 12px;
+		line-height: 14px;
+		color: #75757a;
+		width: 100%;
+		appearance: none;
+
+		&:focus-visible {
+			outline: 2px solid #aac9ff;
+		}
+
+		option {
+			overflow: hidden;
+			white-space: pre;
+			text-overflow: ellipsis;
+			-webkit-appearance: none;
+			font-style: normal;
+			font-weight: 300;
+			font-size: 12px;
+			line-height: 31px;
+			padding: 8px 12px;
+			color: #75757a;
+
+			&:checked {
+				background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);
+			}
+
+			&:disabled {
+				color: #8a9a9e;
+				cursor: not-allowed;
+			}
+		}
+
+		// Webkit scrollbars (Chrome, Opera, Safari, Edge... every browser but firefox
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
+		&::-webkit-scrollbar {
+			-webkit-appearance: none;
+			width: 7px;
+			height: 7px;
+		}
+		&::-webkit-scrollbar-thumb {
+			border-radius: 4px;
+			background-color: #b0b2b5;
+		}
+		&::-webkit-scrollbar-corner {
+			background: transparent;
+		}
+
+		// Just firefox
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+		scrollbar-color: #b0b2b5 transparent;
+	}
+
+	&.disabled {
+		select:disabled {
+			background-color: #e6ebec;
+			border-color: #e8eaed;
+			cursor: not-allowed;
+
+			option {
+				color: #8a9a9e;
+			}
+		}
+	}
+}

package/src/dxitemgroup/radiobutton.scss

@@ -0,0 +1,2 @@
+.dx-item-group {
+}

package/src/dxlabel/DxLabel.scss

@@ -0,0 +1,31 @@
+.dx-label {
+	margin: 20px 0;
+	display: block;
+
+	.label-text,
+	.input-description {
+		display: block;
+		font-family: Roboto;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 14px;
+		color: #75757a;
+	}
+
+	.label-text {
+		margin: 0 0 4px 0;
+	}
+
+	.input-description {
+		padding: 6px 20px;
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 8px;
+
+		.icon {
+			color: #597393;
+			line-height: 0;
+		}
+	}
+}