Skip to content

Commit 341673d

Browse files
mtorres3mtorres3
authored
Merge branch 'release/14.0.0' into feat/is-on-background
2 parents c704a74 + 75c2382 commit 341673d

Some content is hidden

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

46 files changed

+2751
-482
lines changed

‎.all-contributorsrc

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,24 @@
308308
"bug",
309309
"code"
310310
]
311+
},
312+
{
313+
"login": "henryclong",
314+
"name": "Henry Long",
315+
"avatar_url": "https://avatars.githubusercontent.com/u/52258386?v=4",
316+
"profile": "https://github.com/henryclong",
317+
"contributions": [
318+
"code"
319+
]
320+
},
321+
{
322+
"login": "sirrah-tam",
323+
"name": "Mat Harris",
324+
"avatar_url": "https://avatars.githubusercontent.com/u/6874453?v=4",
325+
"profile": "https://matharris.dev/",
326+
"contributions": [
327+
"a11y"
328+
]
311329
}
312330
],
313331
"contributorsPerLine": 7

‎.changeset/five-moles-add.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ithaka/pharos': major
3+
---
4+
5+
Remove `paint` value of contain property globally

‎.storybook/initComponents.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
PharosButton,
66
PharosCheckbox,
77
PharosCheckboxGroup,
8+
PharosCoachMark,
89
PharosCombobox,
910
PharosDropdownMenu,
1011
PharosDropdownMenuItem,
@@ -22,10 +23,12 @@ import {
2223
PharosLoadingSpinner,
2324
PharosModal,
2425
PharosPagination,
26+
PharosPopover,
2527
PharosProgressBar,
2628
PharosRadioButton,
2729
PharosRadioGroup,
2830
PharosSelect,
31+
PharosSheet,
2932
PharosSidenav,
3033
PharosSidenavButton,
3134
PharosSidenavLink,
@@ -52,6 +55,7 @@ registerComponents('storybook', [
5255
PharosButton,
5356
PharosCheckbox,
5457
PharosCheckboxGroup,
58+
PharosCoachMark,
5559
PharosCombobox,
5660
PharosDropdownMenu,
5761
PharosDropdownMenuItem,
@@ -69,10 +73,12 @@ registerComponents('storybook', [
6973
PharosLoadingSpinner,
7074
PharosModal,
7175
PharosPagination,
76+
PharosPopover,
7277
PharosProgressBar,
7378
PharosRadioButton,
7479
PharosRadioGroup,
7580
PharosSelect,
81+
PharosSheet,
7682
PharosSidenav,
7783
PharosSidenavButton,
7884
PharosSidenavLink,

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
100100
<td align="center" valign="top" width="14.28%"><a href="https://github.com/HassanTanveer"><img src="https://avatars.githubusercontent.com/u/57575219?v=4?s=100" width="100px;" alt="Hassan Tanveer"/><br /><sub><b>Hassan Tanveer</b></sub></a><br /><a href="https://github.com/ithaka/pharos/commits?author=HassanTanveer" title="Code">💻</a></td>
101101
<td align="center" valign="top" width="14.28%"><a href="https://github.com/mariadevadoss"><img src="https://avatars.githubusercontent.com/u/132926833?v=4?s=100" width="100px;" alt="mariadevadoss"/><br /><sub><b>mariadevadoss</b></sub></a><br /><a href="https://github.com/ithaka/pharos/commits?author=mariadevadoss" title="Code">💻</a></td>
102102
<td align="center" valign="top" width="14.28%"><a href="http://brentswisher.com/"><img src="https://avatars.githubusercontent.com/u/6653970?v=4?s=100" width="100px;" alt="Brent Swisher"/><br /><sub><b>Brent Swisher</b></sub></a><br /><a href="https://github.com/ithaka/pharos/issues?q=author%3Abrentswisher" title="Bug reports">🐛</a> <a href="https://github.com/ithaka/pharos/commits?author=brentswisher" title="Code">💻</a></td>
103+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/henryclong"><img src="https://avatars.githubusercontent.com/u/52258386?v=4?s=100" width="100px;" alt="Henry Long"/><br /><sub><b>Henry Long</b></sub></a><br /><a href="https://github.com/ithaka/pharos/commits?author=henryclong" title="Code">💻</a></td>
104+
<td align="center" valign="top" width="14.28%"><a href="https://matharris.dev/"><img src="https://avatars.githubusercontent.com/u/6874453?v=4?s=100" width="100px;" alt="Mat Harris"/><br /><sub><b>Mat Harris</b></sub></a><br /><a href="#a11y-sirrah-tam" title="Accessibility">️️️️♿️</a></td>
103105
</tr>
104106
</tbody>
105107
</table>

‎package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"stylelint-config-prettier": "^9.0.5",
121121
"stylelint-config-standard-scss": "^10.0.0",
122122
"stylelint-scss": "^5.0.1",
123-
"svglint": "^2.2.0",
123+
"svglint": "^2.4.0",
124124
"vite": "^4.3.9"
125125
},
126126
"workspaces": {
@@ -131,17 +131,16 @@
131131
"resolutions": {
132132
"@typescript-eslint/parser": "^5.41.0",
133133
"axe-core": "^4.3.3",
134-
"playwright": "^1.17.1",
135134
"ansi-regex": "^5.0.1",
136135
"nth-check": "^2.0.1",
137136
"semver-regex": "^3.1.3",
138-
"immer": "^9.0.6",
139137
"object-path": "^0.11.8",
140138
"glob-parent": "^6.0.2",
141139
"browserslist": "^4.16.5",
142140
"trim": "^0.0.3",
143-
"marked": "^0.7.0",
144-
"graphql-config": "^4.1.0"
141+
"loader-utils": "^2.0.3",
142+
"marked": "^4.0.10",
143+
"json5": "^2.2.2"
145144
},
146145
"size-limit": [
147146
{

‎packages/pharos-site/CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @ithaka/pharos-site
22

3+
## 5.13.4
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [[`d67125a`](https://github.com/ithaka/pharos/commit/d67125a4a9598475aff9000b18567f734074915f)]:
8+
- @ithaka/pharos@13.0.0
9+
310
## 5.13.3
411

512
### Patch Changes

‎packages/pharos-site/initComponents.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ if (typeof window !== `undefined`) {
1010
pharos.PharosButton,
1111
pharos.PharosCheckbox,
1212
pharos.PharosCheckboxGroup,
13+
pharos.PharosCoachMark,
1314
pharos.PharosCombobox,
1415
pharos.PharosDropdownMenu,
1516
pharos.PharosDropdownMenuItem,

‎packages/pharos-site/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"access": "public"
55
},
66
"description": "Pharos acts as a guiding light to helps us create consistent, dependable and focused experiences for all of JSTOR users.",
7-
"version": "5.13.3",
7+
"version": "5.13.4",
88
"dependencies": {
9-
"@ithaka/pharos": "^12.20.0",
9+
"@ithaka/pharos": "^13.0.0",
1010
"@mdx-js/mdx": "^1.6.22",
1111
"@mdx-js/react": "^1.6.22",
1212
"@webcomponents/scoped-custom-element-registry": "^0.0.3",

‎packages/pharos-site/src/pages/components/coach-mark/index.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Intro from '@guidelines/coach-mark.docs';
2+
3+
<Intro />

‎packages/pharos-site/static/guidelines/coach-mark.docs.mdx

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import PageSection from '@components/statics/PageSection.tsx';
2+
import BestPractices from '@components/statics/BestPractices.tsx';
3+
4+
<PageSection
5+
title="Coach Mark"
6+
description="Coach marks highlight new or unique features, direct users in the right direction, or guide users during onboarding."
7+
isHeader
8+
storyBookType="forms"
9+
></PageSection>
10+
11+
## Examples
12+
13+
```jsx live
14+
<>
15+
<div
16+
style={{
17+
border: '1px solid #eae8e1',
18+
padding: '20px',
19+
margin: '200px auto',
20+
width: 'fit-content',
21+
}}
22+
data-coach-mark="example-coachmark"
23+
>
24+
Lorem Ipsum
25+
</div>
26+
<PharosCoachMark
27+
id="example-coachmark"
28+
hide="false"
29+
side="bottom"
30+
alignment="start"
31+
header="Coach Mark"
32+
delay="short"
33+
variant="light"
34+
>
35+
This is an example Coach Mark
36+
</PharosCoachMark>
37+
</>
38+
```
39+
40+
<PageSection
41+
topMargin
42+
title="Usage"
43+
description="Coach marks can appear automatically, after a delay, to focus the user's attention on a single primary action or in response to an action."
44+
>
45+
<PageSection title="Examples" subSectionLevel={1}>
46+
<ul>
47+
<li>When a user visits a page for the first time</li>
48+
<li>When a new feature is added</li>
49+
<li>Inform a user after they activated a process</li>
50+
</ul>
51+
</PageSection>
52+
<PageSection title="Placement" subSectionLevel={1}>
53+
<p>
54+
There are 12 placement options available. Coach marks can be placed top, bottom, left or right
55+
of the target (e.g. button, icon, link, etc.) and the caret (triangle) can be placed at the
56+
start, center or end of the coach mark.
57+
</p>
58+
<p>
59+
<strong>Where should I place a coach mark? </strong>
60+
</p>
61+
<p>
62+
The coach mark should be in close proximity to the feature that it highlights. There are 2
63+
preferred placement options out of a total of the available 12. A coachmark should be placed
64+
either on the top or bottom of a feature with the caret (triangle) appearing in the center.
65+
The other placement options should only be used so that important features or information is
66+
not hidden.
67+
</p>
68+
</PageSection>
69+
<PageSection title="Types" subSectionLevel={1}>
70+
<ol>
71+
<li>
72+
Informational: Focuses the attention of the user on a section of the page or process taking
73+
place.
74+
</li>
75+
<li>Instructional: Highlights a feature or action.</li>
76+
</ol>
77+
</PageSection>
78+
<PageSection title="Light vs Dark" subSectionLevel={1}>
79+
<p>
80+
The dark coach mark variant is the default state. Most of the backgrounds on JSTOR are white
81+
and should use the dark coach mark for contrast. Consider using the light coach mark variant
82+
when the coach mark will appear over dark backgrounds.
83+
</p>
84+
</PageSection>
85+
</PageSection>
86+
<PageSection title="Best practices">
87+
<BestPractices
88+
Do={
89+
<ul>
90+
<li>
91+
Use coach marks to focus attention to important functionality and feedback in context
92+
</li>
93+
<li>Display coach marks on a page once per session</li>
94+
<li>Checkboxes should always include a label</li>
95+
<li>
96+
Consider a coach mark to promote new features, functionality, or other changes to layout
97+
and patterns that may disorient the user
98+
</li>
99+
</ul>
100+
}
101+
Dont={
102+
<ul>
103+
<li>
104+
Do not repetitively display the same coach mark. You should be able to track whether the
105+
user has dismissed the coach mark and be confident it will not reappear
106+
</li>
107+
<li>
108+
Do not overuse the coach mark and consider where else in the user's journey they may be
109+
interacting with coach marks within the product
110+
</li>
111+
<li>
112+
Do not add more than one coach mark to a page. If features need explanation consider a
113+
tool tip or other passive communication devices (badges, external links, etc)
114+
</li>
115+
</ul>
116+
}
117+
/>
118+
</PageSection>
119+
<PageSection title="Content guidelines">
120+
<p>
121+
The coach mark headline and body copy should be informative, actionable, and concise. It should
122+
Include the minimum amount of information that users need to know. It should not repeat what is
123+
already visibly available to the user in the interface. For example, you should not use
124+
"Workspace" as a headline if the coach mark is targeting a "Workspace" navigation link. Rather
125+
you would expect something actionable like.. "Find what you saved". Content should be written in
126+
sentence case. Refer to{' '}
127+
<PharosLink href="https://pharos.jstor.org/content-style-guide/voice-and-tone">
128+
Voice and Tone guidelines
129+
</PharosLink>{' '}
130+
for more guidance.
131+
</p>
132+
</PageSection>
133+
<PageSection title="Accessibility">
134+
<PageSection subSectionLevel={1} title="Relevant WCAG guidelines">
135+
<ul>
136+
<li>
137+
<PharosLink href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html">
138+
4.1.3 Status Messages
139+
</PharosLink>
140+
</li>
141+
<li>
142+
<PharosLink href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html">
143+
1.3.1 Info and Relationships A
144+
</PharosLink>
145+
</li>
146+
</ul>
147+
</PageSection>
148+
<PageSection subSectionLevel={1} title="Code expectations">
149+
<ul>
150+
<li>Button contains "aria-haspopup="dialog"</li>
151+
</ul>
152+
</PageSection>
153+
</PageSection>

‎packages/pharos/CHANGELOG.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,49 @@
11
# @ithaka/pharos
22

3+
## 13.0.0
4+
5+
### Major Changes
6+
7+
- [#608](https://github.com/ithaka/pharos/pull/608) [`d67125a`](https://github.com/ithaka/pharos/commit/d67125a4a9598475aff9000b18567f734074915f) Thanks [@henryclong](https://github.com/henryclong)! - Adds the coach mark component, which is used to highlight new or unique features
8+
9+
## 12.26.2
10+
11+
### Patch Changes
12+
13+
- [#617](https://github.com/ithaka/pharos/pull/617) [`6ec2d69`](https://github.com/ithaka/pharos/commit/6ec2d695f4fcaefc46616f7e582d9e71f641a4f6) Thanks [@jialin-he](https://github.com/jialin-he)! - Update default height to sheet and emit events
14+
15+
## 12.26.1
16+
17+
### Patch Changes
18+
19+
- [#613](https://github.com/ithaka/pharos/pull/613) [`ef13fa1`](https://github.com/ithaka/pharos/commit/ef13fa18638f630f55716c60d81c9ba8d23c255d) Thanks [@jialin-he](https://github.com/jialin-he)! - Add overflow to sheet
20+
21+
## 12.26.0
22+
23+
### Minor Changes
24+
25+
- [#603](https://github.com/ithaka/pharos/pull/603) [`5d15316`](https://github.com/ithaka/pharos/commit/5d15316632da788f692ec731a2aae765e6785c21) Thanks [@michael-iden](https://github.com/michael-iden)! - Add sheet component
26+
27+
### Patch Changes
28+
29+
- [#610](https://github.com/ithaka/pharos/pull/610) [`d762a02`](https://github.com/ithaka/pharos/commit/d762a0294cd940970c8bbaff8c97aae7e9bdae82) Thanks [@michael-iden](https://github.com/michael-iden)! - Force popover border radius styling
30+
31+
- [#599](https://github.com/ithaka/pharos/pull/599) [`834f7ab`](https://github.com/ithaka/pharos/commit/834f7ab8976f194bc641db244671338e7f7ab023) Thanks [@jialin-he](https://github.com/jialin-he)! - Add line rules to light variant of dropdown
32+
33+
- [#606](https://github.com/ithaka/pharos/pull/606) [`e020300`](https://github.com/ithaka/pharos/commit/e02030087baffbc9685f39f1f77725d1ba5e10bc) Thanks [@daneah](https://github.com/daneah)! - Increase color contrast for glacier blue 40
34+
35+
## 12.25.0
36+
37+
### Minor Changes
38+
39+
- [#596](https://github.com/ithaka/pharos/pull/596) [`8c223fa`](https://github.com/ithaka/pharos/commit/8c223faf6c189e46bc4a8fc9291310947a5d04ba) Thanks [@michael-iden](https://github.com/michael-iden)! - Add compare and side-panel icons
40+
41+
## 12.24.0
42+
43+
### Minor Changes
44+
45+
- [#588](https://github.com/ithaka/pharos/pull/588) [`130ce55`](https://github.com/ithaka/pharos/commit/130ce553ddc7a16343ef934629e0ecd51f617267) Thanks [@michael-iden](https://github.com/michael-iden)! - added popover component
46+
347
## 12.23.0
448

549
### Minor Changes

‎packages/pharos/assets/icons/compare.svg

Lines changed: 2 additions & 0 deletions
Loading

‎packages/pharos/assets/icons/side-panel.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/pharos/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"publishConfig": {
44
"access": "public"
55
},
6-
"version": "12.23.0",
6+
"version": "13.0.0",
77
"description": "Pharos web components for products and experiences",
88
"files": [
99
"lib",
@@ -84,7 +84,7 @@
8484
"react-dom": "^17.0.1",
8585
"replace-in-file": "^6.3.2",
8686
"rimraf": "^3.0.2",
87-
"sassdoc": "^2.7.3",
87+
"sassdoc": "^2.7.4",
8888
"sinon": "^12.0.1",
8989
"style-dictionary": "^3.0.1",
9090
"ts-lit-plugin": "^1.2.1",

0 commit comments

Comments
 (0)