diff --git a/packages/common-ui-web/src/components/DynamicSVG/hooks/types.ts b/packages/common-ui-web/src/components/DynamicSVG/hooks/types.ts index a58d70f2c..1695c5bef 100644 --- a/packages/common-ui-web/src/components/DynamicSVG/hooks/types.ts +++ b/packages/common-ui-web/src/components/DynamicSVG/hooks/types.ts @@ -6,21 +6,21 @@ import { SVGProps } from 'react'; */ export interface DynamicSVGCustomizationFunctions { /** - * A callback used to customize SVG tags in a DynamicSVG component based on the HTMLElement itself, or the IDs of the + * A callback used to customize SVG tags in a DynamicSVG component based on the HTMLElement itself, or the Elements of the * groups this element is part of. * * @param element The element to apply the custom attributes to. - * @param groups SVG group elements this element is part of (the IDs are in order). + * @param groups SVG group elements this element is part of (the elements are in order). * @return This callback should return a set of custom HTML attributes to pass to the element or `null` for no * attributes. */ getAttributes?: (element: SVGElement, groups: SVGGElement[]) => SVGProps; /** * A callback used to customize the inner text of SVG tags in a DynamicSVG component based on the HTMLElement itself, - * or the IDs of the groups this element is part of. + * or the Elements of the groups this element is part of. * * @param element The element to set the innerText. - * @param groups SVG group elements this element is part of (the IDs are in order). + * @param groups SVG group elements this element is part of (the elements are in order). * @return This callback should return a string to use for the innerText of the element or `null` for no innerText. */ getInnerText?: (element: SVGElement, groups: SVGGElement[]) => string | null; @@ -36,7 +36,7 @@ export interface SVGElementCustomProps { */ element: SVGElement; /** - * The IDs of the SVG groups this element is part of (in order). + * The Elements of the SVG groups this element is part of (in order). * * @default [] */ diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.style.ts b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.style.ts index f3dcaa94b..b15a0fd9c 100644 --- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.style.ts +++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.style.ts @@ -4,7 +4,7 @@ export const styles: Styles = { notCarPart: { display: 'none', }, - selectAble: { + selectable: { pointerEvents: 'fill', cursor: 'pointer', }, diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx index 15bca784a..d0e89fabc 100644 --- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx +++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx @@ -10,6 +10,9 @@ import { partSelectionWireframes, vehicles } from '@monkvision/sights'; import { DynamicSVG, DynamicSVGCustomizationFunctions } from '../DynamicSVG'; import { styles } from './VehicleDynamicWireframe.style'; +/** + * Props accepted by the VehicleDynamicWireframe component. + */ export interface VehicleDynamicWireframeProps { /** * Vehicle type to display the wireframe for. @@ -17,14 +20,18 @@ export interface VehicleDynamicWireframeProps { vehicleType: VehicleType; /** * The orientation of the wireframe. + * + * @default PartSelectionOrientation.FRONT_LEFT */ orientation?: PartSelectionOrientation; /** - * Callback to return the clicked part. + * Callback when the user clicks a part. */ onClickPart?: (parts: VehiclePart) => void; /** - * Callback to return the attributes of the SVG HTML element from parent based on style. + * Callback used to customize the display style of each vehicle part on the wireframe. See `DynamicSVGCustomizationFunctions` for more details. + * + * @see DynamicSVGCustomizationFunctions */ getPartAttributes?: (part: VehiclePart) => SVGProps; } @@ -53,7 +60,7 @@ function createGetAttributesCallback( } if (element.classList.contains('selectable') && element.id) { attributes.onClick = () => onClickPart(part); - attributes.style = { ...attributes.style, ...styles['selectAble'] }; + attributes.style = { ...attributes.style, ...styles['selectable'] }; } return attributes; }; diff --git a/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts b/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts index fce6cb593..d3120c924 100644 --- a/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts +++ b/packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts @@ -1 +1,4 @@ -export * from './VehicleDynamicWireframe'; +export { + VehicleDynamicWireframe, + type VehicleDynamicWireframeProps, +} from './VehicleDynamicWireframe'; diff --git a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx index 17ea4bc94..f4fca9ca4 100644 --- a/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx +++ b/packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx @@ -5,6 +5,9 @@ import { Icon } from '../../icons'; import { VehicleDynamicWireframe, VehicleDynamicWireframeProps } from '../VehicleDynamicWireframe'; import { styles } from './VehiclePartSelection.style'; +/** + * Props accepted by the VehiclePartSelection component + */ export interface VehiclePartSelectionProps { /** * Vehicle type to display the wireframe for. @@ -15,7 +18,7 @@ export interface VehiclePartSelectionProps { */ orientation?: PartSelectionOrientation; /** - * Emit when change in the selected parts. + * Callback called when the selected parts are updated (the user selects or unselects a new part). */ onPartsSelected?: (parts: VehiclePart[]) => void; } @@ -28,8 +31,7 @@ const ORIENTATIONS = [ ]; /** - * Component that displays a rotatable vehicle wireframe that allows the user to - * select multiple vehicle parts. + * Component that displays a rotatable vehicle wireframe that allows the user to select multiple vehicle parts. */ export function VehiclePartSelection({ vehicleType, diff --git a/packages/common-ui-web/src/components/VehiclePartSelection/index.ts b/packages/common-ui-web/src/components/VehiclePartSelection/index.ts index c2af0057e..794bb1384 100644 --- a/packages/common-ui-web/src/components/VehiclePartSelection/index.ts +++ b/packages/common-ui-web/src/components/VehiclePartSelection/index.ts @@ -1 +1 @@ -export * from './VehiclePartSelection'; +export { VehiclePartSelection, type VehiclePartSelectionProps } from './VehiclePartSelection';