Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
68cd1f1a
Commit
68cd1f1a
authored
Oct 12, 2022
by
Lyza Danger Gardner
Committed by
Lyza Gardner
Nov 16, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update shared components in `Tutorial`
parent
6fb4952a
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
33 additions
and
20 deletions
+33
-20
Tutorial.js
src/sidebar/components/Tutorial.js
+21
-12
Tutorial-test.js
src/sidebar/components/test/Tutorial-test.js
+12
-8
No files found.
src/sidebar/components/Tutorial.js
View file @
68cd1f1a
import
{
Icon
,
Link
}
from
'@hypothesis/frontend-shared'
;
import
{
Link
,
AnnotateIcon
,
HighlightIcon
,
ReplyIcon
,
}
from
'@hypothesis/frontend-shared/lib/next'
;
import
classnames
from
'classnames'
;
import
classnames
from
'classnames'
;
import
{
isThirdPartyService
}
from
'../helpers/is-third-party-service'
;
import
{
isThirdPartyService
}
from
'../helpers/is-third-party-service'
;
import
{
withServices
}
from
'../service-context'
;
import
{
withServices
}
from
'../service-context'
;
/**
* @typedef {import('@hypothesis/frontend-shared/lib/types').IconComponent} IconComponent
*/
/**
/**
* Subcomponent: an "instruction" within the tutorial step that includes an
* Subcomponent: an "instruction" within the tutorial step that includes an
* icon and a "command" associated with that icon. Encapsulating these together
* icon and a "command" associated with that icon. Encapsulating these together
...
@@ -11,19 +20,19 @@ import { withServices } from '../service-context';
...
@@ -11,19 +20,19 @@ import { withServices } from '../service-context';
*
*
* @param {object} props
* @param {object} props
* @param {string} props.commandName - Name of the "command" the instruction represents
* @param {string} props.commandName - Name of the "command" the instruction represents
* @param {
string} props.iconName - Name of the
icon to display
* @param {
IconComponent} props.icon
icon to display
*/
*/
function
TutorialInstruction
({
commandName
,
icon
Name
})
{
function
TutorialInstruction
({
commandName
,
icon
:
Icon
})
{
return
(
return
(
<
span
className
=
"whitespace-nowrap"
>
<
span
className
=
"whitespace-nowrap"
data
-
testid
=
"instruction"
>
<
Icon
<
Icon
name
=
{
iconName
}
className
=
{
classnames
(
classes
=
{
classnames
(
'w-em h-em'
,
'mx-1 -mt-1'
,
// Give horizontal space; pull up top margin a little
'mx-1 -mt-1'
,
// Give horizontal space; pull up top margin a little
'text-color-text-light inline'
'text-color-text-light inline'
)}
)}
/
>
/
>
<
em
>
{
commandName
}
<
/em
>
<
em
data
-
testid
=
"command-name"
>
{
commandName
}
<
/em
>
<
/span
>
<
/span
>
);
);
}
}
...
@@ -40,20 +49,20 @@ function Tutorial({ settings }) {
...
@@ -40,20 +49,20 @@ function Tutorial({ settings }) {
<
ol
className
=
"list-decimal pl-10 space-y-2"
>
<
ol
className
=
"list-decimal pl-10 space-y-2"
>
<
li
>
<
li
>
To
create
an
annotation
,
select
text
and
then
select
the
{
' '
}
To
create
an
annotation
,
select
text
and
then
select
the
{
' '
}
<
TutorialInstruction
icon
Name
=
"annotate"
commandName
=
"Annotate"
/>
{
' '
}
<
TutorialInstruction
icon
=
{
AnnotateIcon
}
commandName
=
"Annotate"
/>
{
' '
}
button
.
button
.
<
/li
>
<
/li
>
<
li
>
<
li
>
To
create
a
highlight
(
To
create
a
highlight
(
<
Link
<
Link
classes
=
"underline hover:underline"
href
=
"https://web.hypothes.is/help/why-are-highlights-private-by-default/"
href
=
"https://web.hypothes.is/help/why-are-highlights-private-by-default/"
target
=
"_blank"
target
=
"_blank"
underline
=
"always"
>
>
visible
only
to
you
visible
only
to
you
<
/Link
>
<
/Link
>
),
select
text
and
then
select
the
{
' '
}
),
select
text
and
then
select
the
{
' '
}
<
TutorialInstruction
icon
Name
=
"highlight"
commandName
=
"Highlight"
/>
{
' '
}
<
TutorialInstruction
icon
=
{
HighlightIcon
}
commandName
=
"Highlight"
/>
{
' '
}
button
.
button
.
<
/li
>
<
/li
>
{
canCreatePrivateGroups
&&
(
{
canCreatePrivateGroups
&&
(
...
@@ -61,9 +70,9 @@ function Tutorial({ settings }) {
...
@@ -61,9 +70,9 @@ function Tutorial({ settings }) {
To
annotate
in
a
private
group
,
select
the
group
from
the
groups
To
annotate
in
a
private
group
,
select
the
group
from
the
groups
dropdown
.
Don
&
apos
;
t
see
your
group
?
Ask
the
group
creator
to
send
a
{
' '
}
dropdown
.
Don
&
apos
;
t
see
your
group
?
Ask
the
group
creator
to
send
a
{
' '
}
<
Link
<
Link
classes
=
"underline hover:underline"
href
=
"https://web.hypothes.is/help/how-to-join-a-private-group/"
href
=
"https://web.hypothes.is/help/how-to-join-a-private-group/"
target
=
"_blank"
target
=
"_blank"
underline
=
"always"
>
>
join
link
join
link
<
/Link
>
<
/Link
>
...
@@ -72,7 +81,7 @@ function Tutorial({ settings }) {
...
@@ -72,7 +81,7 @@ function Tutorial({ settings }) {
)}
)}
<
li
>
<
li
>
To
reply
to
an
annotation
,
select
the
{
' '
}
To
reply
to
an
annotation
,
select
the
{
' '
}
<
TutorialInstruction
icon
Name
=
"reply"
commandName
=
"Reply"
/>
button
.
<
TutorialInstruction
icon
=
{
ReplyIcon
}
commandName
=
"Reply"
/>
button
.
<
/li
>
<
/li
>
<
/ol
>
<
/ol
>
);
);
...
...
src/sidebar/components/test/Tutorial-test.js
View file @
68cd1f1a
...
@@ -43,17 +43,21 @@ describe('Tutorial', () => {
...
@@ -43,17 +43,21 @@ describe('Tutorial', () => {
});
});
[
[
{
iconName
:
'
annotate
'
,
commandName
:
'Annotate'
},
{
iconName
:
'
AnnotateIcon
'
,
commandName
:
'Annotate'
},
{
iconName
:
'
highlight
'
,
commandName
:
'Highlight'
},
{
iconName
:
'
HighlightIcon
'
,
commandName
:
'Highlight'
},
{
iconName
:
'
reply
'
,
commandName
:
'Reply'
},
{
iconName
:
'
ReplyIcon
'
,
commandName
:
'Reply'
},
].
forEach
(
testCase
=>
{
].
forEach
(
testCase
=>
{
it
(
`renders expected
${
testCase
.
commandName
}
Tutorial
I
nstruction`
,
()
=>
{
it
(
`renders expected
${
testCase
.
commandName
}
Tutorial
i
nstruction`
,
()
=>
{
const
wrapper
=
createComponent
();
const
wrapper
=
createComponent
();
const
instruction
=
wrapper
.
find
(
'TutorialInstruction'
).
filter
({
const
instruction
=
wrapper
iconName
:
testCase
.
iconName
,
.
find
(
'[data-testid="instruction"]'
)
commandName
:
testCase
.
commandName
,
.
filterWhere
(
n
=>
n
.
find
(
testCase
.
iconName
).
exists
());
});
assert
.
isTrue
(
instruction
.
exists
());
assert
.
isTrue
(
instruction
.
exists
());
assert
.
equal
(
instruction
.
find
(
'[data-testid="command-name"]'
).
text
(),
testCase
.
commandName
);
});
});
});
});
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment