Skip to content
This repository was archived by the owner on Dec 23, 2021. It is now read-only.

Commit ba2b92f

Browse files
vandyliuvandyliu
authored
Merge branch 'dev' into users/t-xunguy/currently-running
2 parents 841566e + 75b7040 commit ba2b92f

File tree

5 files changed

+317
-26
lines changed

5 files changed

+317
-26
lines changed

‎package-lock.json

Lines changed: 15 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/view/components/toolbar/ToolBar.tsx

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// Copyright (c) Microsoft Corporation.
22
// Licensed under the MIT license.
3-
import { TooltipHost } from "office-ui-fabric-react";
3+
import { Callout, TooltipHost } from "office-ui-fabric-react";
4+
import { IconButton } from "office-ui-fabric-react";
5+
import { initializeIcons } from "@uifabric/icons";
46
import * as React from "react";
57
import {
68
FormattedMessage,
@@ -19,6 +21,7 @@ import {
1921
interface IToolbarState {
2022
currentOpenedId: string;
2123
showModal: boolean;
24+
isDescriptionVisible: boolean;
2225
}
2326

2427
interface IProps extends WrappedComponentProps {
@@ -35,8 +38,10 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
3538

3639
constructor(props: IProps) {
3740
super(props);
41+
initializeIcons();
3842
this.state = {
3943
currentOpenedId: "",
44+
isDescriptionVisible: false,
4045
showModal: false,
4146
};
4247
}
@@ -129,6 +134,18 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
129134
this.changePressedState(label, true);
130135
};
131136

137+
private onShowDescriptionClicked = (): void => {
138+
this.setState({
139+
isDescriptionVisible: !this.state.isDescriptionVisible,
140+
});
141+
};
142+
143+
private onDescriptionDismiss = (): void => {
144+
this.setState({
145+
isDescriptionVisible: false,
146+
});
147+
};
148+
132149
private getIconModal() {
133150
if (
134151
!this.state.showModal ||
@@ -150,22 +167,40 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
150167
const component = content
151168
? content.component
152169
: DEFAULT_MODAL_CONTENT.component;
170+
153171
return (
154172
<div className="sensor_modal">
155173
<div className="title_group">
156174
<span className="title">
157175
<FormattedMessage id={content.descriptionTitle} />
158176
{content.tagInput}
159177
{content.tagOutput}
178+
<IconButton
179+
onClick={this.onShowDescriptionClicked}
180+
iconProps={{ iconName: "Info" }}
181+
title="Info"
182+
ariaLabel="More Information Button"
183+
className="info-icon"
184+
/>
160185
</span>
161186
</div>
162187
<br />
163-
<div className="description">
164-
<FormattedMessage id={content.descriptionText} />
165-
</div>
188+
{this.state.isDescriptionVisible && (
189+
<Callout
190+
className="description-callout"
191+
role="textbox"
192+
target=".info-icon"
193+
setInitialFocus={true}
194+
onDismiss={this.onDescriptionDismiss}
195+
>
196+
<div className="description">
197+
<FormattedMessage id={content.descriptionText} />
198+
</div>
199+
</Callout>
200+
)}
166201
<div className="try_area">
167202
<br />
168-
<span className="description">
203+
<span className="try-it-description">
169204
<FormattedMessage id={content.tryItDescription} />
170205
</span>
171206
<br />

‎src/view/components/toolbar/Toolbar.spec.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
3+
import { IntlProvider } from "react-intl";
4+
import * as testRenderer from "react-test-renderer";
5+
import Toolbar from "./ToolBar";
6+
import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
7+
import { MICROBIT_TOOLBAR_ID } from "./SensorModalUtils";
8+
import { SENSOR_LIST } from "../../constants";
9+
10+
const MOCK_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
11+
{
12+
image: TOOLBAR_SVG.LIGHT_SVG,
13+
label: MICROBIT_TOOLBAR_ID.LIGHT,
14+
},
15+
{
16+
image: TOOLBAR_SVG.MOTION_SVG,
17+
label: MICROBIT_TOOLBAR_ID.ACCELEROMETER,
18+
},
19+
];
20+
const mockUpdateSensors = () => {
21+
return;
22+
};
23+
const mockInitialValues = {
24+
[SENSOR_LIST.TEMPERATURE]: 0,
25+
[SENSOR_LIST.LIGHT]: 0,
26+
};
27+
describe("Toolbar component ", () => {
28+
it("should render correctly", () => {
29+
const component = testRenderer
30+
.create(
31+
<IntlProvider locale="en">
32+
<Toolbar
33+
buttonList={MOCK_TOOLBAR_BUTTONS}
34+
onUpdateSensor={mockUpdateSensors}
35+
sensorValues={mockInitialValues}
36+
/>
37+
</IntlProvider>
38+
)
39+
.toJSON();
40+
expect(component).toMatchSnapshot();
41+
});
42+
43+
it("should render without crashing", () => {
44+
const div = document.createElement("div");
45+
ReactDOM.render(
46+
<IntlProvider locale="en">
47+
<Toolbar
48+
buttonList={MOCK_TOOLBAR_BUTTONS}
49+
onUpdateSensor={mockUpdateSensors}
50+
sensorValues={mockInitialValues}
51+
/>
52+
</IntlProvider>,
53+
div
54+
);
55+
ReactDOM.unmountComponentAtNode(div);
56+
});
57+
});

‎src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Toolbar component should render correctly 1`] = `
4+
<div
5+
className="toolbar-parent"
6+
id="toolbar-parent"
7+
>
8+
<div
9+
className="toolbar"
10+
>
11+
<div
12+
className="toolbar-icon"
13+
>
14+
<div
15+
className="ms-TooltipHost root-49"
16+
onBlurCapture={[Function]}
17+
onFocusCapture={[Function]}
18+
onKeyDown={[Function]}
19+
onMouseEnter={[Function]}
20+
onMouseLeave={[Function]}
21+
>
22+
<button
23+
aria-label="toolbar light-sensor"
24+
className="toolbar-button button"
25+
id="toolbar-light-sensor-button"
26+
onClick={[Function]}
27+
role="button"
28+
style={
29+
Object {
30+
"width": 32,
31+
}
32+
}
33+
tabIndex={0}
34+
>
35+
<svg
36+
fill="none"
37+
height="16px"
38+
version="1.1"
39+
viewBox="0 0 16 16"
40+
width="16px"
41+
xmlns="http://www.w3.org/2000/svg"
42+
xmlnsXlink="http://www.w3.org/1999/xlink"
43+
>
44+
<title>
45+
Light sensor
46+
</title>
47+
<g
48+
fill="none"
49+
fill-rule="evenodd"
50+
id="light_sensor"
51+
stroke="none"
52+
stroke-width="1"
53+
>
54+
<g
55+
className="button-icon"
56+
fill-rule="nonzero"
57+
id="Group-10"
58+
transform="translate(4.000000, 0.000000)"
59+
>
60+
<g
61+
id="light-bulb"
62+
>
63+
<path
64+
d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
65+
id="Shape"
66+
/>
67+
<path
68+
d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
69+
id="Shape"
70+
/>
71+
<path
72+
d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
73+
id="Shape"
74+
/>
75+
</g>
76+
</g>
77+
</g>
78+
</svg>
79+
</button>
80+
</div>
81+
<div
82+
className="ms-TooltipHost root-49"
83+
onBlurCapture={[Function]}
84+
onFocusCapture={[Function]}
85+
onKeyDown={[Function]}
86+
onMouseEnter={[Function]}
87+
onMouseLeave={[Function]}
88+
>
89+
<button
90+
aria-label="toolbar accelerometer-sensor"
91+
className="toolbar-button button"
92+
id="toolbar-accelerometer-sensor-button"
93+
onClick={[Function]}
94+
role="button"
95+
style={
96+
Object {
97+
"width": 32,
98+
}
99+
}
100+
tabIndex={0}
101+
>
102+
<svg
103+
fill="none"
104+
height="16px"
105+
version="1.1"
106+
viewBox="0 0 17 16"
107+
width="17px"
108+
xmlns="http://www.w3.org/2000/svg"
109+
xmlnsXlink="http://www.w3.org/1999/xlink"
110+
>
111+
<g
112+
fill="none"
113+
fill-rule="evenodd"
114+
id="motion_sensor"
115+
stroke="none"
116+
stroke-width="1"
117+
>
118+
<g
119+
className="button-icon"
120+
id="Group-10"
121+
>
122+
<g
123+
id="Group-12"
124+
>
125+
<path
126+
d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
127+
id="Fill-1"
128+
/>
129+
<polygon
130+
id="Fill-3"
131+
points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
132+
/>
133+
<polygon
134+
id="Fill-10"
135+
points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
136+
/>
137+
</g>
138+
</g>
139+
</g>
140+
</svg>
141+
</button>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
`;

0 commit comments

Comments
 (0)