Skip to content

Commit 6e7fdc6

Browse files
tay1orjonestay1orjones
authored
Merge branch 'next' into 1852-overflow-background
2 parents abab28d + 2d8c6fd commit 6e7fdc6

42 files changed

Lines changed: 5930 additions & 70 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.storybook/__snapshots__/Welcome.story.storyshot‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2868,6 +2868,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
28682868
IconDropdown
28692869
</div>
28702870
</div>
2871+
<div
2872+
className="bx--structured-list-row"
2873+
>
2874+
<div
2875+
className="bx--structured-list-td"
2876+
/>
2877+
<div
2878+
className="bx--structured-list-td"
2879+
>
2880+
EmptyState
2881+
</div>
2882+
</div>
28712883
<div
28722884
className="bx--structured-list-row"
28732885
>
@@ -3780,6 +3792,78 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
37803792
DataTableIcon
37813793
</div>
37823794
</div>
3795+
<div
3796+
className="bx--structured-list-row"
3797+
>
3798+
<div
3799+
className="bx--structured-list-td"
3800+
/>
3801+
<div
3802+
className="bx--structured-list-td"
3803+
>
3804+
Emptystate404Icon
3805+
</div>
3806+
</div>
3807+
<div
3808+
className="bx--structured-list-row"
3809+
>
3810+
<div
3811+
className="bx--structured-list-td"
3812+
/>
3813+
<div
3814+
className="bx--structured-list-td"
3815+
>
3816+
EmptystateDefaultIcon
3817+
</div>
3818+
</div>
3819+
<div
3820+
className="bx--structured-list-row"
3821+
>
3822+
<div
3823+
className="bx--structured-list-td"
3824+
/>
3825+
<div
3826+
className="bx--structured-list-td"
3827+
>
3828+
EmptystateErrorIcon
3829+
</div>
3830+
</div>
3831+
<div
3832+
className="bx--structured-list-row"
3833+
>
3834+
<div
3835+
className="bx--structured-list-td"
3836+
/>
3837+
<div
3838+
className="bx--structured-list-td"
3839+
>
3840+
EmptystateNoresultsIcon
3841+
</div>
3842+
</div>
3843+
<div
3844+
className="bx--structured-list-row"
3845+
>
3846+
<div
3847+
className="bx--structured-list-td"
3848+
/>
3849+
<div
3850+
className="bx--structured-list-td"
3851+
>
3852+
EmptystateNotauthorizedIcon
3853+
</div>
3854+
</div>
3855+
<div
3856+
className="bx--structured-list-row"
3857+
>
3858+
<div
3859+
className="bx--structured-list-td"
3860+
/>
3861+
<div
3862+
className="bx--structured-list-td"
3863+
>
3864+
EmptystateSuccessIcon
3865+
</div>
3866+
</div>
37833867
<div
37843868
className="bx--structured-list-row"
37853869
>

‎__mocks__/@carbon/charts-react.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎__mocks__/@carbon/charts-react/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const PieChart = require('./pie-chart');
2+
const LineChart = require('./line-chart');
3+
const SimpleBarChart = require('./bar-chart-simple');
4+
const StackedBarChart = require('./bar-chart-stacked');
5+
const GroupedBarChart = require('./bar-chart-grouped');
6+
7+
module.exports = {
8+
PieChart,
9+
DonutChart: {},
10+
LineChart,
11+
SimpleBarChart,
12+
StackedBarChart,
13+
GroupedBarChart,
14+
};

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,13 @@
127127
},
128128
"dependencies": {
129129
"@babel/runtime": "^7.10.2",
130-
"@carbon/charts": "^0.41.6",
131-
"@carbon/charts-react": "^0.41.6",
130+
"@carbon/charts": "^0.41.11",
131+
"@carbon/charts-react": "^0.41.11",
132132
"@carbon/colors": "10.15.0",
133133
"@carbon/icons-react": "10.17.0",
134134
"@carbon/layout": "10.12.0",
135135
"@carbon/motion": "10.6.0",
136-
"@carbon/telemetry": "^0.0.0-alpha.4",
136+
"@carbon/telemetry": "^0.0.0-alpha.5",
137137
"@carbon/themes": "10.16.0",
138138
"@monaco-editor/react": "^3.6.2",
139139
"carbon-components": "10.17.0",

‎src/components/BarChartCard/BarChartCard.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
2-
import SimpleBarChart from '@carbon/charts-react/bar-chart-simple';
3-
import StackedBarChart from '@carbon/charts-react/bar-chart-stacked';
4-
import GroupedBarChart from '@carbon/charts-react/bar-chart-grouped';
2+
import {
3+
SimpleBarChart,
4+
StackedBarChart,
5+
GroupedBarChart,
6+
} from '@carbon/charts-react';
57
import classnames from 'classnames';
68
import isEmpty from 'lodash/isEmpty';
79
import memoize from 'lodash/memoize';

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,11 @@ const CardEditFormContent = ({
288288
</>
289289
) : null}
290290
{type === CARD_TYPES.IMAGE && (
291-
<ImageCardFormContent cardConfig={cardConfig} i18n={mergedI18n} />
291+
<ImageCardFormContent
292+
cardConfig={cardConfig}
293+
i18n={mergedI18n}
294+
onChange={onChange}
295+
/>
292296
)}
293297
</>
294298
);

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

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
// import { Scale32 } from '@carbon/icons-react';
4+
import { Close16 } from '@carbon/icons-react';
5+
import { Button } from 'carbon-components-react';
6+
import omit from 'lodash/omit';
47

5-
// import Button from '../../../../Button';
68
import { settings } from '../../../../../constants/Settings';
79

810
const { iotPrefix, prefix } = settings;
@@ -22,7 +24,7 @@ const propTypes = {
2224
interval: PropTypes.string,
2325
}),
2426
/* callback when image input value changes (File object) */
25-
// onChange: PropTypes.func.isRequired,
27+
onChange: PropTypes.func.isRequired,
2628
i18n: PropTypes.shape({}),
2729
};
2830

@@ -32,10 +34,11 @@ const defaultProps = {
3234
imageFile: 'Image file',
3335
editImage: 'Edit image',
3436
image: 'Image',
37+
close: 'Close',
3538
},
3639
};
3740

38-
const ImageCardFormItems = ({ cardConfig, i18n }) => {
41+
const ImageCardFormItems = ({ cardConfig, i18n, onChange }) => {
3942
const mergedI18n = { ...defaultProps.i18n, ...i18n };
4043
const baseClassName = `${iotPrefix}--card-edit-form`;
4144
return (
@@ -44,7 +47,7 @@ const ImageCardFormItems = ({ cardConfig, i18n }) => {
4447
className={`${baseClassName}--form-section ${baseClassName}--form-section-image`}>
4548
{mergedI18n.image}
4649
</div>
47-
<div className={`${baseClassName}--input`}>
50+
<div className={`${baseClassName}--form-section-image--input`}>
4851
<label
4952
id={`${mergedI18n.imageFile}-label`}
5053
className={`${prefix}--label`}
@@ -56,6 +59,27 @@ const ImageCardFormItems = ({ cardConfig, i18n }) => {
5659
readOnly
5760
value={cardConfig.content?.id || ''}
5861
/>
62+
{cardConfig.content?.id ? (
63+
<Button
64+
kind="ghost"
65+
renderIcon={Close16}
66+
size="field"
67+
iconDescription={mergedI18n.close}
68+
className={`${baseClassName}--form-section ${baseClassName}--form-section-image-clear-button`}
69+
onClick={() =>
70+
// close means clear the image info out of the JSON
71+
onChange(
72+
omit(
73+
cardConfig,
74+
'content.id',
75+
'content.src',
76+
'content.alt',
77+
'content.imgState'
78+
)
79+
)
80+
}
81+
/>
82+
) : null}
5983
</label>
6084
{/* TODO enable once hotspot editing is live <Button
6185
className={`${baseClassName}--form-section-image-btn`}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
5+
import ImageCardFormContent from './ImageCardFormContent';
6+
7+
describe('ImageCardFormContent', () => {
8+
it('onChange', () => {
9+
const mockOnChange = jest.fn();
10+
const mockCardConfig = {
11+
content: {
12+
id: 'imageid',
13+
src: 'imagesrc',
14+
},
15+
};
16+
render(
17+
<ImageCardFormContent
18+
onChange={mockOnChange}
19+
cardConfig={mockCardConfig}
20+
/>
21+
);
22+
userEvent.click(screen.getByRole('button'));
23+
expect(mockOnChange).toHaveBeenCalledTimes(1);
24+
expect(mockOnChange).toHaveBeenCalledWith({ content: {} });
25+
});
26+
});

‎src/components/CardEditor/CardEditForm/_card-edit-form.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,13 +157,30 @@
157157
margin-bottom: 0;
158158
}
159159

160-
&-input {
160+
&--input {
161161
margin-bottom: $spacing-05;
162+
position: relative;
162163
}
163164

164165
&-btn {
165166
width: 100%;
166167
}
168+
&-clear-button {
169+
position: absolute;
170+
right: 0;
171+
top: 1.25rem;
172+
color: $ui-05;
173+
background-color: $ui-02;
174+
&:hover,
175+
&:active {
176+
color: $ui-05;
177+
}
178+
border: 0;
179+
min-height: 2rem;
180+
> svg.#{$prefix}--btn__icon {
181+
margin-left: 0;
182+
}
183+
}
167184

168185
.#{$prefix}--slider {
169186
min-width: 4.5rem;

‎src/components/CardEditor/CardEditor.story.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import { action } from '@storybook/addon-actions';
33
import { withKnobs, object } from '@storybook/addon-knobs';
44

5+
import munichBuilding from '../ImageCard/MunichBuilding.png';
56
import { CARD_SIZES } from '../../constants/LayoutConstants';
67

78
import CardEditor from './CardEditor';
@@ -167,3 +168,36 @@ export const Interactive = () => <CardEditorInteractive />;
167168
Interactive.story = {
168169
name: 'interactive',
169170
};
171+
172+
export const ForImage = () => (
173+
<div style={{ position: 'absolute', right: 0, height: 'calc(100vh - 6rem)' }}>
174+
<CardEditor
175+
cardConfig={object('cardConfig', {
176+
id: 'image',
177+
title: 'image-card',
178+
size: 'MEDIUMWIDE',
179+
type: 'IMAGE',
180+
content: {
181+
id: 'munich_image',
182+
src: munichBuilding,
183+
alt: 'Munich',
184+
},
185+
})}
186+
errors={{}}
187+
onShowGallery={action('onShowGallery')}
188+
onChange={action('onChange')}
189+
dataItems={[
190+
{ dataSourceId: 'torque_max', label: 'Torque Max' },
191+
{ dataSourceId: 'torque_min', label: 'Torque Min' },
192+
{ dataSourceId: 'torque_mean', label: 'Torque Mean' },
193+
{ dataSourceId: 'temperature', label: 'Temperature' },
194+
{ dataSourceId: 'pressure', label: 'Pressure' },
195+
]}
196+
onAddCard={action('onAddCard')}
197+
/>
198+
</div>
199+
);
200+
201+
ForImage.story = {
202+
name: 'for Image',
203+
};

0 commit comments

Comments
 (0)