Skip to content

Commit 2a592fc

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
Merge pull request #1933 from carbon-design-system/fix-hotspot-i18nprops
fix(hotspot): i18n need to pass through all props downstream to components
2 parents a6684d1 + e79bf24 commit 2a592fc

26 files changed

Lines changed: 382 additions & 240 deletions

‎src/components/CardEditor/CardEditForm/CardEditFormContent.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ const CardEditFormContent = ({
141141
onChange={onChange}
142142
dataItems={dataItems}
143143
availableDimensions={availableDimensions}
144+
translateWithId={handleTranslation}
144145
/>
145146
) : type === CARD_TYPES.TABLE ? (
146147
<TableCardFormContent

‎src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const propTypes = {
3232
image: PropTypes.string,
3333
close: PropTypes.string,
3434
}),
35+
translateWithId: PropTypes.func.isRequired,
3536
/** an array of dataItems to be included on each card */
3637
dataItems: DataItemsPropTypes,
3738
/** an object where the keys are available dimensions and the values are the values available for those dimensions
@@ -58,6 +59,7 @@ const ImageCardFormItems = ({
5859
onChange,
5960
dataItems,
6061
availableDimensions,
62+
translateWithId,
6163
}) => {
6264
const [isHotspotModalShowing, setIsHotspotModalShowing] = useState(false);
6365
const mergedI18n = { ...defaultProps.i18n, ...i18n };
@@ -90,6 +92,8 @@ const ImageCardFormItems = ({
9092
availableDimensions={availableDimensions}
9193
onSave={handleSaveHotspotEditor}
9294
onClose={handleCloseHotspotEditor}
95+
translateWithId={translateWithId}
96+
i18n={mergedI18n}
9397
// TODO go get the hotspots from the real data layer
9498
onFetchDynamicHotspots={() => Promise.resolve([{ x: 10, y: 10 }])}
9599
/>

‎src/components/DashboardEditor/DashboardEditor.story.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -644,6 +644,8 @@ export const I18N = () => (
644644
defaultCardTitle: 'defaultCardTitle',
645645
cloneCardLabel: 'cloneCardLabel',
646646
deleteCardLabel: 'deleteCardLabel',
647+
titlePlaceholderText: 'titlePlaceholderText',
648+
titleEditableHintText: 'titleEditableHintText',
647649

648650
// card gallery
649651
galleryHeader: 'galleryHeader',
@@ -816,6 +818,55 @@ export const I18N = () => (
816818
descending: 'descending',
817819
showHeader: 'showHeader',
818820
allowNavigation: 'allowNavigation',
821+
822+
// HotspotEditorModal strings
823+
backgroundLabelText: 'backgroundLabelText',
824+
boldLabelText: 'boldLabelText',
825+
borderLabelText: 'borderLabelText',
826+
borderWidthInvalidText: 'borderWidthInvalidText',
827+
cancelButtonLabelText: 'cancelButtonLabelText',
828+
colorDropdownLabelText: 'colorDropdownLabelText',
829+
colorDropdownTitleText: 'colorDropdownTitleText',
830+
deleteButtonIconDescriptionText: 'deleteButtonIconDescriptionText',
831+
deleteButtonLabelText: 'deleteButtonLabelText',
832+
descriptionTextareaLabelText: 'descriptionTextareaLabelText',
833+
descriptionTextareaPlaceholderText:
834+
'descriptionTextareaPlaceholderText',
835+
fillOpacityInvalidText: 'fillOpacityInvalidText',
836+
fillOpacityLabelText: 'fillOpacityLabelText',
837+
fixedTypeDataSourceTabLabelText: 'fixedTypeDataSourceTabLabelText',
838+
fixedTypeTooltipTabLabelText: 'fixedTypeTooltipTabLabelText',
839+
fontSizeInvalidText: 'fontSizeInvalidText',
840+
hotspotsText: 'hotspotsText',
841+
iconDropdownLabelText: 'iconDropdownLabelText',
842+
iconDropdownTitleText: 'iconDropdownTitleText',
843+
italicLabelText: 'italicLabelText',
844+
labelsText: 'labelsText',
845+
loadingDynamicHotspotsText: 'loadingDynamicHotspotsText',
846+
modalHeaderTitleText: 'modalHeaderTitleText',
847+
modalIconDescriptionText: 'modalIconDescriptionText',
848+
saveButtonLabelText: 'saveButtonLabelText',
849+
textStyleLabelText: 'textStyleLabelText',
850+
textTypeDataSourceTabLabelText: 'textTypeDataSourceTabLabelText',
851+
titleInputLabelText: 'titleInputLabelText',
852+
titleInputPlaceholderText: 'titleInputPlaceholderText',
853+
tooManyHotspotsInfoText: 'tooManyHotspotsInfoText',
854+
underlineLabelText: 'underlineLabelText',
855+
fixedTypeTooltipInfoText: 'fixedTypeTooltipInfoText',
856+
clearIconDescription: 'clearIconDescription',
857+
xCoordinateDropdownTitleText: 'xCoordinateDropdownTitleText',
858+
xCoordinateDropdownLabelText: 'xCoordinateDropdownLabelText',
859+
yCoordinateDropdownTitleText: 'yCoordinateDropdownTitleText',
860+
yCoordinateDropdownLabelText: 'yCoordinateDropdownLabelText',
861+
selectDataItemsText: 'selectDataItemsText',
862+
dataItemText: 'dataItemText',
863+
editText: 'editText',
864+
// Hotspot Text Style Tab fields
865+
textTypeStyleInfoText: 'textTypeStyleInfoText',
866+
fontColorLabelText: 'fontColorLabelText',
867+
fontSizeLabelText: 'fontSizeLabelText',
868+
borderWidthLabelText: 'borderWidthLabelText',
869+
deleteButtonIconDescription: 'deleteButtonIconDescription',
819870
}}
820871
breakpointSwitcher={{ enabled: true }}
821872
headerBreadcrumbs={[

‎src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import PropTypes from 'prop-types';
33
import { Erase32 } from '@carbon/icons-react';
44
import classnames from 'classnames';
@@ -10,7 +10,6 @@ import Button from '../../Button/Button';
1010
const { iotPrefix } = settings;
1111

1212
const propTypes = {
13-
clearIconDescription: PropTypes.string,
1413
dataSourceItems: PropTypes.arrayOf(
1514
PropTypes.shape({
1615
dataSourceId: PropTypes.string,
@@ -24,26 +23,31 @@ const propTypes = {
2423
selectedSourceIdX: PropTypes.string,
2524
selectedSourceIdY: PropTypes.string,
2625
testID: PropTypes.string,
27-
xCoordinateDropdownTitleText: PropTypes.string,
28-
xCoordinateDropdownLabelText: PropTypes.string,
29-
yCoordinateDropdownTitleText: PropTypes.string,
30-
yCoordinateDropdownLabelText: PropTypes.string,
26+
i18n: PropTypes.shape({
27+
clearIconDescription: PropTypes.string,
28+
xCoordinateDropdownTitleText: PropTypes.string,
29+
xCoordinateDropdownLabelText: PropTypes.string,
30+
yCoordinateDropdownTitleText: PropTypes.string,
31+
yCoordinateDropdownLabelText: PropTypes.string,
32+
}),
33+
translateWithId: PropTypes.func.isRequired,
3134
};
3235

3336
const defaultProps = {
34-
clearIconDescription: 'Clear coordinate sources',
3537
id: 'dynamic-hotspot-source-picker',
3638
selectedSourceIdX: undefined,
3739
selectedSourceIdY: undefined,
3840
testID: 'dynamic-hotspot-source-picker',
39-
xCoordinateDropdownTitleText: 'X coordinate',
40-
xCoordinateDropdownLabelText: 'Select data item',
41-
yCoordinateDropdownTitleText: 'Y coordinate',
42-
yCoordinateDropdownLabelText: 'Select data item',
41+
i18n: {
42+
clearIconDescription: 'Clear coordinate sources',
43+
xCoordinateDropdownTitleText: 'X coordinate',
44+
xCoordinateDropdownLabelText: 'Select data item',
45+
yCoordinateDropdownTitleText: 'Y coordinate',
46+
yCoordinateDropdownLabelText: 'Select data item',
47+
},
4348
};
4449

4550
const DynamicHotspotSourcePicker = ({
46-
clearIconDescription,
4751
dataSourceItems,
4852
id,
4953
onClear,
@@ -52,12 +56,18 @@ const DynamicHotspotSourcePicker = ({
5256
selectedSourceIdX,
5357
selectedSourceIdY,
5458
testID,
55-
xCoordinateDropdownTitleText,
56-
xCoordinateDropdownLabelText,
57-
yCoordinateDropdownTitleText,
58-
yCoordinateDropdownLabelText,
59+
i18n,
60+
translateWithId,
5961
}) => {
6062
const classname = `${iotPrefix}--dynamic-hotspot-source-picker`;
63+
const mergedI18n = useMemo(() => ({ ...defaultProps.i18n, ...i18n }), [i18n]);
64+
const {
65+
clearIconDescription,
66+
xCoordinateDropdownTitleText,
67+
xCoordinateDropdownLabelText,
68+
yCoordinateDropdownTitleText,
69+
yCoordinateDropdownLabelText,
70+
} = mergedI18n;
6171
return (
6272
<div data-testid={testID} className={classname}>
6373
<Dropdown
@@ -71,6 +81,7 @@ const DynamicHotspotSourcePicker = ({
7181
label={xCoordinateDropdownLabelText}
7282
items={dataSourceItems}
7383
itemToString={(item) => item.label}
84+
translateWithId={translateWithId}
7485
onChange={(change) => {
7586
onXValueChange(change.selectedItem.dataSourceId);
7687
}}
@@ -85,6 +96,7 @@ const DynamicHotspotSourcePicker = ({
8596
titleText={yCoordinateDropdownTitleText}
8697
label={yCoordinateDropdownLabelText}
8798
items={dataSourceItems}
99+
translateWithId={translateWithId}
88100
itemToString={(item) => item.label}
89101
onChange={(change) => {
90102
onYValueChange(change.selectedItem.dataSourceId);

‎src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.story.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const WithStateInStory = () => {
4848
setXSourceId(undefined);
4949
setYSourceId(undefined);
5050
}}
51+
translateWithId={jest.fn()}
5152
/>
5253
</div>
5354
);

‎src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.test.jsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const getCallbacks = () => ({
1818
onXValueChange: jest.fn(),
1919
onYValueChange: jest.fn(),
2020
onClear: jest.fn(),
21+
translateWithId: jest.fn(),
2122
});
2223

2324
describe('DynamicHotspotSourcePicker', () => {
@@ -103,8 +104,10 @@ describe('DynamicHotspotSourcePicker', () => {
103104
dataSourceItems={getDataItems()}
104105
selectedSourceIdX={xSourceItem.dataSourceId}
105106
selectedSourceIdY={ySourceItem.dataSourceId}
106-
xCoordinateDropdownLabelText="select x"
107-
yCoordinateDropdownLabelText="select y"
107+
i18n={{
108+
xCoordinateDropdownLabelText: 'select x',
109+
yCoordinateDropdownLabelText: 'select y',
110+
}}
108111
onClear={onClear}
109112
/>
110113
);
@@ -126,8 +129,10 @@ describe('DynamicHotspotSourcePicker', () => {
126129
dataSourceItems={getDataItems()}
127130
selectedSourceIdX={xSourceItem.dataSourceId}
128131
selectedSourceIdY={ySourceItem.dataSourceId}
129-
xCoordinateDropdownLabelText="select x"
130-
yCoordinateDropdownLabelText="select y"
132+
i18n={{
133+
xCoordinateDropdownLabelText: 'select x',
134+
yCoordinateDropdownLabelText: 'select y',
135+
}}
131136
/>
132137
);
133138

@@ -140,8 +145,10 @@ describe('DynamicHotspotSourcePicker', () => {
140145
dataSourceItems={getDataItems()}
141146
selectedSourceIdX={undefined}
142147
selectedSourceIdY={undefined}
143-
xCoordinateDropdownLabelText="select x"
144-
yCoordinateDropdownLabelText="select y"
148+
i18n={{
149+
xCoordinateDropdownLabelText: 'select x',
150+
yCoordinateDropdownLabelText: 'select y',
151+
}}
145152
/>
146153
);
147154
expect(screen.getByText('select x')).toBeVisible();
@@ -156,8 +163,10 @@ describe('DynamicHotspotSourcePicker', () => {
156163
render(
157164
<DynamicHotspotSourcePicker
158165
testID="test-picker"
159-
xCoordinateDropdownLabelText="select x"
160-
yCoordinateDropdownLabelText="select y"
166+
i18n={{
167+
xCoordinateDropdownLabelText: 'select x',
168+
yCoordinateDropdownLabelText: 'select y',
169+
}}
161170
dataSourceItems={getDataItems()}
162171
onXValueChange={onXValueChange}
163172
onYValueChange={onYValueChange}

‎src/components/HotspotEditorModal/DynamicHotspotSourcePicker/__snapshots__/DynamicHotspotSourcePicker.story.storyshot‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,20 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
5555
className="bx--list-box__menu-icon"
5656
>
5757
<svg
58-
aria-label="Open menu"
58+
aria-hidden={true}
5959
fill="currentColor"
6060
focusable="false"
6161
height={16}
6262
name="chevron--down"
6363
preserveAspectRatio="xMidYMid meet"
64-
role="img"
6564
viewBox="0 0 16 16"
6665
width={16}
6766
xmlns="http://www.w3.org/2000/svg"
6867
>
6968
<path
7069
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
7170
/>
72-
<title>
73-
Open menu
74-
</title>
71+
<title />
7572
</svg>
7673
</div>
7774
</button>
@@ -125,23 +122,20 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
125122
className="bx--list-box__menu-icon"
126123
>
127124
<svg
128-
aria-label="Open menu"
125+
aria-hidden={true}
129126
fill="currentColor"
130127
focusable="false"
131128
height={16}
132129
name="chevron--down"
133130
preserveAspectRatio="xMidYMid meet"
134-
role="img"
135131
viewBox="0 0 16 16"
136132
width={16}
137133
xmlns="http://www.w3.org/2000/svg"
138134
>
139135
<path
140136
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
141137
/>
142-
<title>
143-
Open menu
144-
</title>
138+
<title />
145139
</svg>
146140
</div>
147141
</button>

‎src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const propTypes = {
4545
primaryButtonLabelText: PropTypes.string,
4646
secondaryButtonLabelText: PropTypes.string,
4747
}),
48+
translateWithId: PropTypes.func.isRequired,
4849
/* callback when image input value changes */
4950
onChange: PropTypes.func.isRequired,
5051
/** Id that can be used for testing */
@@ -100,6 +101,7 @@ const HotspotEditorDataSourceTab = ({
100101
onChange,
101102
availableDimensions,
102103
testID,
104+
translateWithId,
103105
}) => {
104106
const mergedI18n = { ...defaultProps.i18n, ...i18n };
105107

@@ -155,6 +157,7 @@ const HotspotEditorDataSourceTab = ({
155157
light
156158
onChange={handleSelectionChange}
157159
titleText={mergedI18n.dataItemText}
160+
translateWithId={translateWithId}
158161
/>
159162
</div>
160163
<List

‎src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.story.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export const WithStateInStory = () => {
153153
thresholds={cardConfigState.thresholds}
154154
cardConfig={cardConfigState}
155155
dataItems={dataItems}
156+
translateWithId={() => {}}
156157
onChange={(newData) => {
157158
if (Array.isArray(newData)) {
158159
setCardConfigState({
@@ -219,6 +220,7 @@ export const WithPresetValues = () => {
219220
thresholds={cardConfigState.thresholds}
220221
cardConfig={cardConfigState}
221222
dataItems={dataItems}
223+
translateWithId={() => {}}
222224
onChange={(newData) => {
223225
if (Array.isArray(newData)) {
224226
setCardConfigState({

0 commit comments

Comments
 (0)