From fc08333898094bd5c83c5ec3a0630db330e90c23 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 12 Jul 2018 10:08:39 -0400
Subject: [PATCH] Change "how-to" messages to "tutorial" and update the icon to
lightbulb
---
src/components/cards/cards.jsx | 8 +++---
src/components/cards/icon--help.svg | Bin 1184 -> 0 bytes
src/components/menu-bar/icon--help.svg | Bin 1172 -> 0 bytes
src/components/menu-bar/menu-bar.css | 4 +--
src/components/menu-bar/menu-bar.jsx | 33 +++++++++++++------------
src/containers/tips-library.jsx | 6 ++---
src/lib/assets/icon--tutorials.svg | Bin 0 -> 4020 bytes
test/integration/how-tos.test.js | 2 +-
8 files changed, 26 insertions(+), 27 deletions(-)
delete mode 100644 src/components/cards/icon--help.svg
delete mode 100644 src/components/menu-bar/icon--help.svg
create mode 100644 src/lib/assets/icon--tutorials.svg
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index ab01f8ecd..dc081ae0b 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -8,7 +8,7 @@ import styles from './card.css';
import nextIcon from './icon--next.svg';
import prevIcon from './icon--prev.svg';
-import helpIcon from './icon--help.svg';
+import helpIcon from '../../lib/assets/icon--tutorials.svg';
import closeIcon from '../close-button/icon--close.svg';
const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
@@ -22,9 +22,9 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
src={helpIcon}
/>
<FormattedMessage
- defaultMessage="All How-Tos"
- description="Title for button to return to how-to library"
- id="gui.cards.all-how-tos"
+ defaultMessage="Tutorials"
+ description="Title for button to return to tutorials library"
+ id="gui.cards.all-tutorials"
/>
</div>
{totalSteps > 1 ? (
diff --git a/src/components/cards/icon--help.svg b/src/components/cards/icon--help.svg
deleted file mode 100644
index 436d052874bd47c11a55909be61d0fb83777c000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 1184
zcmZuwU2EJh5PZJ-6{`DGkYq{zl#@$nLK^}N6aslIj!(HWacpDzzEb+%J1eK5lpg0>
zd3JYpX6-w_Jiat+?}oAN+Et*X3YcrFZe6#VRj`|$L>^pTEYCj(!ERjZhH~nLf_+|h
zkB;3o&2F4L#Eg+jYR>K-ZrGP&-whM{-t0Ewwq??T5A%$IrBW$&wX2&oQ=b?U0`%j4
z^S1~cuzI};zLh68{J;$~w&N<;PE%im;o)$Qhe&qACNxT^5Y2BT#j&Z|=l>OIYi;PW
zC|w1rKL+eH$K`_UYj?Qn2xp4f6knMHY@AMwTLrEy9~&ng%j$VEbh~z4wC;eq_sTOr
zy%_tlLU}*9(G7bSkS$_h)2RnOx#JX8;|P2q$4UKss+*?x_|<>Tu*UA${c|f`>d6gF
zjZkQH_G@__dPXq!<+Np0Q;t{*$O49S-Nl)-LdpEvsQDl?H(F|hIG6gKU~V%`b%-NC
zD^Or5Z3X?@XYt(Xi-_!%-6fGUJWFK0TvUo{nF%dp9)TDa#jOBi1vKM|Fv|Og^IjxU
zSIQ^f;6JTf>hev5fY_7L`GKZka+-iLPGpS9!l1^GPGE^NG?S<E+#JnDL`c)z6cl*{
z@iCtlks+aRZ;?nSLBmKTMXUh!5Vyk0j9f%;VPr&k%F&se`x6{`2{|_+l`-VUs3T$$
zhBe6qcm~`8H^3wGr#wboEF<7FH^aOXO6Qo4kd#t8QDI*x*@X^V@PmF0&_{x;Uov^4
z9-@G1JShP5WFpTEewcpS!Yq=u5MijH*a&)64Do5QD@YctLVK$bm|+o$a%?eyDXlAP
z6$O^(m;*mt)4PI0m0}oP42>4=4Gwrh<zye-8P<~fsPO=<)0{FEsWd|_HZtMwPx>`j
NE<(KF^tZlP{s!xIAaMWy
diff --git a/src/components/menu-bar/icon--help.svg b/src/components/menu-bar/icon--help.svg
deleted file mode 100644
index 6974a7f45f8c740074060a3414eadc02cefd0084..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 1172
zcmZuwU2EJh5PZJ-6{`DGkYq{zknQ9Wn$m_q1BHXU7RRUDnK-tweP1d4@150MLMc5E
zE6?uE?u>nx*N2ye?c6ZdUAqXhQ~`5s)vfAwy$H6`lgNVWtNG;zA=s^J-B3>5P_WOd
z?$NQkrrC~@hnPXDG@LCTZrRsE-whM{(QMb^u4U4L52qOgOQllmW?MHaramzy1n9@z
z`tK!l!0Oc^_+B2}@DmT%u^kt|W}5mU4EOuJ+()t-)}c{Kg=jvP6o;m6pZ`~=^E?lI
z7Nv_o^@o5RPjNnDyV~t<I>MP^8tZA31Z<p+javk+Egu^v9?R-^J#^c4RkUu8y7$Tp
zKfM_HvO;-3xX}$e7mzGsVAHV&KDombR^teKCdWzrda9eI`1sBLE?{H#?EZNaFZJYx
zrbZ~Vy7)c63_T;5`*PZ_swqd<0<wU?uKPrBE%g@@QSj${P1F*%Jd-&`4aKE@u=WjH
z;z~^?idS}@Br@XGN;{ubL~DhXF^{AcI21R+%De(<xgw16KH|O;iPV+y$us=cx}h%L
zL<opIDcv7v8YZV!W<0hs!en7kV`MI3j7g-SnLIts&CqN_gfz`fL6KELflr}cp&q@6
zIT8saydzkNVh&<MaU*hRNks$|Mn;sU9NkH|zd@m2A>&4*GRFEb>WG*YGu+AqxCNdA
zH^3wGr#wboEF<9L4jG(c(^E`GtdvqaQNgd2<YEsT=s~{*=p(_oH<`3i4^d!i1*0I8
zx;!`dA^PmXX-RS+!car85oC-ZK2353twmO7FEs))Bx0isE+!DAbp=;Zkn;?4poi<&
zi;k-l!|-8fw0Lb$z!NGb`RKN=CG%0^1$?peCSr0Y&4I_n_5P+`gZV7PS51HAtN9-;
CCLNpr
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index eba5f885e..45669f8d6 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -151,9 +151,7 @@
}
.help-icon {
- height: 2rem;
- width: 3rem;
- margin-top: 0.5rem;
+ margin-right: 0.35rem;
}
.account-nav-menu, .mystuff-button {
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index f6399a9ac..b843e05b4 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -31,6 +31,7 @@ import {
import styles from './menu-bar.css';
+import helpIcon from '../../lib/assets/icon--tutorials.svg';
import mystuffIcon from './icon--mystuff.png';
import feedbackIcon from './icon--feedback.svg';
import profileIcon from './icon--profile.png';
@@ -40,18 +41,16 @@ import languageIcon from '../language-selector/language-icon.svg';
import scratchLogo from './scratch-logo.svg';
-import helpIcon from './icon--help.svg';
-
const ariaMessages = defineMessages({
language: {
id: 'gui.menuBar.LanguageSelector',
defaultMessage: 'language selector',
description: 'accessibility text for the language selection menu'
},
- howTo: {
- id: 'gui.menuBar.howToLibrary',
- defaultMessage: 'How-to Library',
- description: 'accessibility text for the how-to library button'
+ tutorials: {
+ id: 'gui.menuBar.tutorialsLibrary',
+ defaultMessage: 'Tutorials',
+ description: 'accessibility text for the tutorials button'
}
});
@@ -311,6 +310,18 @@ class MenuBar extends React.Component {
</div>
</div>
<Divider className={classNames(styles.divider)} />
+ <div
+ aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
+ className={classNames(styles.menuBarItem, styles.hoverable)}
+ onClick={this.props.onOpenTipLibrary}
+ >
+ <img
+ className={styles.helpIcon}
+ src={helpIcon}
+ />
+ <FormattedMessage {...ariaMessages.tutorials} />
+ </div>
+ <Divider className={classNames(styles.divider)} />
<div className={classNames(styles.menuBarItem)}>
<MenuBarItemTooltip id="title-field">
<input
@@ -381,16 +392,6 @@ class MenuBar extends React.Component {
</a>
</div>
<div className={styles.accountInfoWrapper}>
- <div
- aria-label={this.props.intl.formatMessage(ariaMessages.howTo)}
- className={classNames(styles.menuBarItem, styles.hoverable)}
- onClick={this.props.onOpenTipLibrary}
- >
- <img
- className={styles.helpIcon}
- src={helpIcon}
- />
- </div>
<MenuBarItemTooltip id="mystuff">
<div
className={classNames(
diff --git a/src/containers/tips-library.jsx b/src/containers/tips-library.jsx
index 4db0d0665..ebbee3f30 100644
--- a/src/containers/tips-library.jsx
+++ b/src/containers/tips-library.jsx
@@ -20,9 +20,9 @@ import {
const messages = defineMessages({
tipsLibraryTitle: {
- defaultMessage: 'How-Tos',
- description: 'Heading for the help/how-tos library',
- id: 'gui.tipsLibrary.howtos'
+ defaultMessage: 'Choose a Tutorial',
+ description: 'Heading for the help/tutorials library',
+ id: 'gui.tipsLibrary.tutorials'
}
});
diff --git a/src/lib/assets/icon--tutorials.svg b/src/lib/assets/icon--tutorials.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fea09e781b3f88a43750b69f25e6e522846a4466
GIT binary patch
literal 4020
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
literal 0
HcmV?d00001
diff --git a/test/integration/how-tos.test.js b/test/integration/how-tos.test.js
index 7a08385e8..67af2edc9 100644
--- a/test/integration/how-tos.test.js
+++ b/test/integration/how-tos.test.js
@@ -27,7 +27,7 @@ describe('Working with the how-to library', () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
await clickText('Costumes');
- await clickXpath('//*[@aria-label="How-to Library"]');
+ await clickXpath('//*[@aria-label="Choose a Tutorial"]');
await clickText('Getting Started'); // Modal should close
// Make sure YouTube video on first card appears
await findByXpath('//div[contains(@class, "step-video")]');
--
GitLab