genesys-react-components 1.0.6 → 1.1.0-devengage-3187-id-prop.758

package/package.json

@@ -1,59 +1,59 @@
 {
-	"name": "genesys-react-components",
-	"version": "1.0.6",
-	"description": "A React component library containing standardized form elements.",
-	"type": "module",
-	"types": "build/index.d.ts",
-	"main": "./build/index.js",
-	"exports": {
-		"require": "./src/index.ts",
-		"default": "./build/index.js"
-	},
-	"files": [
-		"build",
-		"src"
-	],
-	"scripts": {
-		"build": "rm -rf build && rollup -c rollup.config.js",
-		"localbuild": "npm i && npm run build && rm -rf node_modules",
-		"test": "echo \"0/0 tests passed. That's technically a perfect score. Keep up the great work!\""
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+ssh://git@github.com/purecloudlabs/genesys-react-components.git"
-	},
-	"author": "Genesys",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/purecloudlabs/genesys-react-components/issues"
-	},
-	"homepage": "https://purecloudlabs.github.io/genesys-react-components",
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "^21.0.1",
-		"@rollup/plugin-node-resolve": "^13.0.6",
-		"@types/react": "^16",
-		"react": "^16",
-		"react-dom": "^16",
-		"rollup": "^2.60.2",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-typescript2": "^0.31.1",
-		"sass": "^1.44.0",
-		"typescript": "^4.5.2",
-		"uuid": "^9.0.0"
-	},
-	"peerDependencies": {
-		"genesys-dev-icons": "^1.5.0",
-		"moment": "^2.30.1",
-		"postcss": "^8.5.3",
-		"react": ">=16",
-		"react-dom": ">=16",
-		"react-syntax-highlighter": "^15.5.0",
-		"uuid": "^9.0.0"
-	},
-	"dependencies": {
-		"moment": "^2.30.1",
-		"postcss": "^8.5.3",
-		"react-syntax-highlighter": "^15.6.1"
-	}
-}
+    "name": "genesys-react-components",
+    "version": "1.1.0-devengage-3187-id-prop.758",
+    "description": "A React component library containing standardized form elements.",
+    "type": "module",
+    "types": "build/index.d.ts",
+    "main": "./build/index.js",
+    "exports": {
+        "require": "./src/index.ts",
+        "default": "./build/index.js"
+    },
+    "files": [
+        "build",
+        "src"
+    ],
+    "scripts": {
+        "build": "rm -rf build && rollup -c rollup.config.js",
+        "localbuild": "npm i && npm run build && rm -rf node_modules",
+        "test": "echo \"0/0 tests passed. That's technically a perfect score. Keep up the great work!\""
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@github.com/purecloudlabs/genesys-react-components.git"
+    },
+    "author": "Genesys",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/purecloudlabs/genesys-react-components/issues"
+    },
+    "homepage": "https://purecloudlabs.github.io/genesys-react-components",
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^21.0.1",
+        "@rollup/plugin-node-resolve": "^13.0.6",
+        "@types/react": "^16",
+        "react": "^16",
+        "react-dom": "^16",
+        "rollup": "^2.60.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-typescript2": "^0.31.1",
+        "sass": "^1.44.0",
+        "typescript": "^4.5.2",
+        "uuid": "^9.0.0"
+    },
+    "peerDependencies": {
+        "genesys-dev-icons": "^1.5.0",
+        "moment": "^2.30.1",
+        "postcss": "^8.5.3",
+        "react": ">=16",
+        "react-dom": ">=16",
+        "react-syntax-highlighter": "^15.5.0",
+        "uuid": "^9.0.0"
+    },
+    "dependencies": {
+        "moment": "^2.30.1",
+        "postcss": "^8.5.3",
+        "react-syntax-highlighter": "^15.6.1"
+    }
+}

package/src/alertblock/AlertBlock.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
 
+import { BaseComponentProps } from '..';
+
 import './AlertBlock.scss';
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	title?: string;
 	alertType?: 'info' | 'success' | 'critical' | 'warning' | 'toast';
 	collapsible?: boolean;
@@ -59,6 +61,7 @@ export default function AlertBlock(props: IProps) {
 	//TODO: remove the card fence classes and build a proper collapser
 	return (
 		<div
+			id={props.id}
 			className={`alert-container${props.indentation && props.indentation > 0 ? ` indent-${props.indentation}` : ''} ${
 				props.className || ''
 			}`}

package/src/codefence/CodeFence.tsx

@@ -4,6 +4,7 @@ import { PrismAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism/index.js';
 
 import CopyButton from '../copybutton/CopyButton';
+import { BaseComponentProps } from '..';
 
 import './CodeFence.scss';
 
@@ -13,7 +14,7 @@ declare global {
 	}
 }
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	value: string;
 	noCollapse?: boolean;
 	noHeader?: boolean;
@@ -43,7 +44,7 @@ export default function CodeFence(props: IProps) {
 	const disableHighlighting = props.disableSyntaxHighlighting || props.value.length > 100000;
 
 	return (
-		<div className={classNames.join(' ')}>
+		<div id={props.id} className={classNames.join(' ')}>
 			{props.noHeader || typeof props.value !== 'string' ? (
 				''
 			) : (

package/src/copybutton/CopyButton.tsx

@@ -1,10 +1,12 @@
 import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
 import React, { useState } from 'react';
+
 import Tooltip from '../tooltip/Tooltip';
+import { BaseComponentProps } from '..';
 
 import './CopyButton.scss';
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	copyText: string;
 	className?: string;
 	tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
@@ -33,7 +35,7 @@ export default function CopyButton(props: IProps) {
 	return (
 		<React.Fragment>
 			<Tooltip isShowing={copyState} text="Copied" position={props.tooltipPosition}>
-				<button type="button" className={buttonClasses.join(' ')} onClick={copyCode} onMouseOut={loseFocus}>
+				<button id={props.id} type="button" className={buttonClasses.join(' ')} onClick={copyCode} onMouseOut={loseFocus}>
 					<GenesysDevIcon icon={GenesysDevIcons.AppCopy} />
 				</button>
 			</Tooltip>

package/src/datatable/DataTable.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState, ReactNode } from 'react';
 import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import moment from 'moment';
+
 import DxTextbox from '../dxtextbox/DxTextbox';
 import DxToggle from '../dxtoggle/DxToggle';
-import moment from 'moment';
-import React, { useEffect, useState, ReactNode } from 'react';
 import CopyButton from '../copybutton/CopyButton';
-import { DataTableRow } from '..';
+import { BaseComponentProps, DataTableRow } from '..';
+
 import './DataTable.scss';
 
-interface IProps {
+interface IProps extends BaseComponentProps {
 	rows: DataTableRow[];
 	headerRow?: DataTableRow;
 	className?: string;
@@ -409,7 +411,7 @@ export default function DataTable(props: IProps) {
 				<div className="filter-toggle" style={{ visibility: isFilterable ? 'visible' : 'hidden' }}>
 					<GenesysDevIcon icon={GenesysDevIcons.AppFilter} onClick={() => setIsFilterOpen(!isFilterOpen)} />
 				</div>
-				<table className={tableClassName} cellSpacing="0">
+				<table id={props.id} className={tableClassName} cellSpacing="0">
 					{thead}
 					<tbody>
 						{rows.map((row, i) => {

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>