genesys-react-components 1.0.6 → 1.1.0

package/src/dxaccordion/DxAccordion.tsx

@@ -1,5 +1,6 @@
 import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
 import React, { useState } from 'react';
+
 import { DxAccordionProps } from '..';
 
 import './DxAccordion.scss';
@@ -36,7 +37,7 @@ export default function DxAccordion(props: DxAccordionProps) {
 	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 id={props.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}

package/src/dxaccordion/DxAccordionGroup.tsx

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

package/src/dxbutton/DxButton.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { VoidEventCallback } from '..';
+
+import { BaseComponentProps, VoidEventCallback } from '..';
 
 import './DxButton.scss';
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	type?: 'primary' | 'secondary' | 'link';
 	disabled?: boolean;
 	children?: React.ReactNode;
@@ -34,7 +35,7 @@ export default function DxButton(props: IProps) {
 	};
 
 	return (
-		<button className={classNames.join(' ')} type="button" onClick={handleClick} disabled={props.disabled === true}>
+		<button id={props.id} className={classNames.join(' ')} type="button" onClick={handleClick} disabled={props.disabled === true}>
 			{props.children}
 		</button>
 	);

package/src/dxitemgroup/DxCheckbox.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { CheckedChangedCallback } from '..';
+
+import { BaseComponentProps, CheckedChangedCallback } from '..';
 
 import './DxCheckbox.scss';
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	label: string;
 	itemValue: string;
 	description?: string;
@@ -31,7 +32,7 @@ export default function DxCheckbox(props: IProps) {
 	}, [checked]);
 
 	return (
-		<label className={`dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}`}>
+		<label id={props.id} className={`dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}`}>
 			<input
 				type={props.useRadioType ? 'radio' : 'checkbox'}
 				name={props.name}

package/src/dxitemgroup/DxItemGroup.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
-import { DxItemGroupItem, DxItemGroupItemValue, DxItemGroupProps, ItemChangedCallback, ItemGroupChangedCallback } from '..';
+
+import { DxItemGroupItem, DxItemGroupItemValue, DxItemGroupProps } from '..';
+import DxLabel from '../dxlabel/DxLabel';
+import DxCheckbox from './DxCheckbox';
 
 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[]>(
@@ -75,7 +76,7 @@ export default function DxItemGroup(props: DxItemGroupProps) {
 		case 'dropdown': {
 			const isMulti = format === 'multiselect';
 			return (
-				<DxLabel label={title} description={description} className={className}>
+				<DxLabel id={props.id} label={title} description={description} className={className}>
 					<div className={`dx-item-group${isMulti ? ' dx-multiselect-group' : ' dx-select-group'}${disabled ? ' disabled' : ''}`}>
 						<select
 							multiple={isMulti}
@@ -102,6 +103,7 @@ export default function DxItemGroup(props: DxItemGroupProps) {
 		default: {
 			return (
 				<DxLabel
+					id={props.id}
 					label={title}
 					description={description}
 					className={`dx-item-group${disabled ? ' disabled' : ''}${className ? ' ' + className : ''}`}

package/src/dxlabel/DxLabel.tsx

@@ -1,9 +1,11 @@
 import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
 import React from 'react';
 
+import { BaseComponentProps } from '..';
+
 import './DxLabel.scss';
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	label?: string;
 	description?: string;
 	useFieldset?: boolean;
@@ -15,7 +17,7 @@ export default function DxLabel(props: IProps) {
 	const hasLabel = props.label && props.label !== '';
 
 	const description = props.description ? (
-		<div className='input-description'>
+		<div className="input-description">
 			<GenesysDevIcon icon={GenesysDevIcons.AppInfoSolid} />
 			<span>{props.description}</span>
 		</div>
@@ -24,7 +26,7 @@ export default function DxLabel(props: IProps) {
 	const contents = (
 		<React.Fragment>
 			{' '}
-			{hasLabel ? <span className='label-text'>{props.label}</span> : undefined}
+			{hasLabel ? <span className="label-text">{props.label}</span> : undefined}
 			{props.children}
 			{description}
 		</React.Fragment>
@@ -35,5 +37,9 @@ export default function DxLabel(props: IProps) {
 	if (props.useFieldset) {
 		return <fieldset className={className}>{contents}</fieldset>;
 	}
-	return <label className={className}>{contents}</label>;
+	return (
+		<label id={props.id} className={className}>
+			{contents}
+		</label>
+	);
 }

package/src/dxtabbedcontent/DxTabPanel.tsx

@@ -4,5 +4,9 @@ import { DxTabPanelProps } from '..';
 import './DxTabPanel.scss';
 
 export default function DxTabPanel(props: DxTabPanelProps) {
-	return <div className={`dx-tab-panel${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;
+	return (
+		<div id={props.id} className={`dx-tab-panel${props.className ? ' ' + props.className : ''}`}>
+			{props.children}
+		</div>
+	);
 }

package/src/dxtabbedcontent/DxTabbedContent.tsx

@@ -7,7 +7,7 @@ export default function DxTabbedContent(props: DxTabbedContentProps) {
 	const [activeTab, setActiveTab] = useState(props.initialTabId || 0);
 
 	return (
-		<div className={`dx-tabbed-content${props.className ? ' ' + props.className : ''}`}>
+		<div id={props.id} className={`dx-tabbed-content${props.className ? ' ' + props.className : ''}`}>
 			<div className="tab-titles">
 				{React.Children.toArray(props.children).map((child: any, i) => {
 					if (!child) return;

package/src/dxtextbox/DxTextbox.tsx

@@ -184,7 +184,7 @@ export default function DxTextbox(props: DxTextboxProps) {
 
 	// Render
 	return (
-		<DxLabel label={props.label} description={props.description} className={props.className}>
+		<DxLabel id={props.id} label={props.label} description={props.description} className={props.className}>
 			{component}
 		</DxLabel>
 	);

package/src/dxtoggle/DxToggle.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+
 import { BooleanChangedCallback, DxToggleProps } from '..';
+import DxLabel from '../dxlabel/DxLabel';
 
 import './DxToggle.scss';
-import DxLabel from '../dxlabel/DxLabel';
 
 export default function DxToggle(props: DxToggleProps) {
 	let initialValue: boolean | undefined = props.value !== undefined ? props.value : props.initialValue;
@@ -45,7 +46,7 @@ export default function DxToggle(props: DxToggleProps) {
 	};
 
 	return (
-		<DxLabel label={props.label} description={props.description} className={props.className}>
+		<DxLabel id={props.id} label={props.label} description={props.description} className={props.className}>
 			<div aria-checked={getToggleValue()} className={`dx-toggle-container${props.disabled ? ' disabled' : ''}`}>
 				<div className="dx-toggle" onClick={setToggleValue}>
 					{value !== false ? <GenesysDevIcon icon={falseIcon} /> : undefined}

package/src/index.ts

@@ -51,6 +51,10 @@ export interface VoidEventCallback {
 	(): void;
 }
 
+export interface BaseComponentProps {
+	id?: string;
+}
+
 // Item in a DxItemGroup
 export interface DxItemGroupItem {
 	label: string;
@@ -73,7 +77,7 @@ export interface ItemGroupChangedCallback {
 	(items: DxItemGroupItemValue[]): void;
 }
 
-export interface DxToggleProps {
+export interface DxToggleProps extends BaseComponentProps {
 	isTriState?: boolean;
 	initialValue?: boolean;
 	value?: boolean;
@@ -88,7 +92,7 @@ export interface DxToggleProps {
 
 export type DxTextboxType = 'text' | 'textarea' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
 
-export interface DxTextboxProps {
+export interface DxTextboxProps extends BaseComponentProps {
 	initialValue?: string;
 	value?: string;
 	inputType?: DxTextboxType;
@@ -109,19 +113,19 @@ export interface DxTextboxProps {
 	onKeyboardEvent?: { (event: KeyboardEvent): void };
 }
 
-export interface DxAccordionProps {
+export interface DxAccordionProps extends BaseComponentProps {
+	containerId?: string; // Deprecated, use id
 	title: React.ReactNode;
 	children: React.ReactNode;
 	showOpen?: boolean;
 	className?: string;
 	expandTrigger?: any;
 	showOpenTrigger?: any;
-	containerId?: string;
 	headingIcon?: any;
 	headingColor?: string;
 }
 
-export interface DxItemGroupProps {
+export interface DxItemGroupProps extends BaseComponentProps {
 	title?: string;
 	description?: string;
 	format: DxItemGroupFormat;
@@ -134,13 +138,13 @@ export interface DxItemGroupProps {
 
 export type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
 
-export interface DxTabbedContentProps {
+export interface DxTabbedContentProps extends BaseComponentProps {
 	children: React.ReactNode;
 	initialTabId?: number;
 	className?: string;
 }
 
-export interface DxTabPanelProps {
+export interface DxTabPanelProps extends BaseComponentProps {
 	title: React.ReactNode;
 	children: React.ReactNode;
 	className?: string;

package/src/loadingplaceholder/LoadingPlaceholder.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { BaseComponentProps } from '..';
+
 import './LoadingPlaceholder.scss';
 
 // SimCity loading messages! https://gist.github.com/erikcox/7e96d031d00d7ecb1a2f
@@ -95,13 +97,13 @@ const MESSAGES = [
 	'Unable to Reveal Current Activity',
 ];
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	text?: string;
 }
 
 export default function LoadingPlaceholder(props: IProps) {
 	return (
-		<div className="loading-placeholder">
+		<div id={props.id} className="loading-placeholder">
 			<span className="text">{props.text || MESSAGES[Math.floor(Math.random() * (MESSAGES.length - 1))]}</span>
 			<div></div>
 			<div></div>