genesys-react-components 0.1.6 → 0.1.8-devengage-1376.128

package/src/copybutton/CopyButton.tsx

@@ -0,0 +1,42 @@
+import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import React, { useState } from 'react';
+import Tooltip from '../tooltip/Tooltip';
+
+import './CopyButton.scss';
+
+interface IProps {
+	copyText: string;
+	className?: string;
+	tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+export default function CopyButton(props: IProps) {
+	let [copyState, setCopyState] = useState(false);
+
+	// Copy function will set the component state to indicate we have copied the record and then show the tool tip. With the copyState set to true we will see 'Copied'
+	const copyCode = (e: React.MouseEvent<HTMLElement>) => {
+		e.stopPropagation();
+		setCopyState(true);
+		navigator.clipboard.writeText(props.copyText);
+		return;
+	};
+
+	// Once we lose focus on the copy button, we want to set the copyState to false so that we can hide the tool tip and set the default tool tip to ''
+	const loseFocus = () => {
+		setCopyState(false);
+		return;
+	};
+
+	const buttonClasses = ['copy-button'];
+	if (props.className) buttonClasses.push(props.className);
+
+	return (
+		<React.Fragment>
+			<Tooltip isShowing={copyState} text="Copied" position={props.tooltipPosition}>
+				<button type="button" className={buttonClasses.join(' ')} onClick={copyCode} onMouseOut={loseFocus}>
+					<GenesysDevIcon icon={GenesysDevIcons.AppCopy} />
+				</button>
+			</Tooltip>
+		</React.Fragment>
+	);
+}

package/src/dxaccordion/DxAccordion.scss

@@ -0,0 +1,41 @@
+.dx-accordion {
+	margin: 0;
+
+	.accordion-heading {
+		border-width: 0 0 1px 0;
+		border-style: solid;
+		border-color: #bfd4e4;
+		font-style: normal;
+		font-weight: bold;
+		font-size: 14px;
+		line-height: 14px;
+		color: #54565a;
+		padding: 13px 20px;
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+
+		.icon {
+			line-height: 0;
+		}
+
+		&__left {
+			align-self: left;
+		}
+	}
+
+	.accordion-content {
+		padding: 13px 20px 20px 20px;
+		border-bottom: 1px solid #bfd4e4;
+
+		// Clear excess margins from content, we provide the padding
+		& > *:first-child {
+			margin-top: 0;
+		}
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

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;
+		}
+	}
+}