Skip to content

Commit 9893a2f

Browse files
mmiaskmmiask
authored
feat: add Markdown support in descriptions (#146)
* feat: add markdown support in descriptions * test: update snapshots
1 parent aaac87f commit 9893a2f

File tree

4 files changed

+107
-43
lines changed

4 files changed

+107
-43
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"@rollup/plugin-typescript": "^3.1.1",
5555
"@sambego/storybook-state": "^1.3.6",
5656
"@stoplight/eslint-config": "^1.2.0",
57-
"@stoplight/markdown-viewer": "^4.3.2",
57+
"@stoplight/markdown-viewer": "^4.3.4",
5858
"@stoplight/scripts": "^8.2.0",
5959
"@stoplight/storybook-config": "^2.0.6",
6060
"@stoplight/types": "^11.9.0",

‎src/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 95 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,11 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
392392
<span>boolean</span>
393393
</div>
394394
</div>
395-
<div><div title=\\"Is this account enabled\\">Is this account enabled</div></div>
395+
<div>
396+
<div title=\\"Is this account enabled\\">
397+
<div class=\\"MarkdownViewer\\"><p>Is this account enabled</p></div>
398+
</div>
399+
</div>
396400
</div>
397401
</div>
398402
<div></div>
@@ -525,8 +529,12 @@ exports[`HTML Output given complex type that includes array and complex array su
525529
<div
526530
title=\\"This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!\\"
527531
>
528-
This description can be long and should truncate once it reaches the end of the row. If it's not
529-
truncating then theres and issue that needs to be fixed. Help!
532+
<div class=\\"MarkdownViewer\\">
533+
<p>
534+
This description can be long and should truncate once it reaches the end of the row. If it's not
535+
truncating then theres and issue that needs to be fixed. Help!
536+
</p>
537+
</div>
530538
</div>
531539
</div>
532540
</div>
@@ -659,7 +667,11 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
659667
<span>boolean</span>
660668
</div>
661669
</div>
662-
<div><div title=\\"Is this account enabled\\">Is this account enabled</div></div>
670+
<div>
671+
<div title=\\"Is this account enabled\\">
672+
<div class=\\"MarkdownViewer\\"><p>Is this account enabled</p></div>
673+
</div>
674+
</div>
663675
</div>
664676
</div>
665677
<div></div>
@@ -1062,8 +1074,12 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
10621074
<div
10631075
title=\\"The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!\\"
10641076
>
1065-
The user's full name. This description can be long and should truncate once it reaches the end of
1066-
the row. If it's not truncating then theres and issue that needs to be fixed. Help!
1077+
<div class=\\"MarkdownViewer\\">
1078+
<p>
1079+
The user's full name. This description can be long and should truncate once it reaches the end
1080+
of the row. If it's not truncating then theres and issue that needs to be fixed. Help!
1081+
</p>
1082+
</div>
10671083
</div>
10681084
</div>
10691085
</div>
@@ -1159,8 +1175,12 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
11591175
<div
11601176
title=\\"This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!\\"
11611177
>
1162-
This description can be long and should truncate once it reaches the end of the row. If it's not
1163-
truncating then theres and issue that needs to be fixed. Help!
1178+
<div class=\\"MarkdownViewer\\">
1179+
<p>
1180+
This description can be long and should truncate once it reaches the end of the row. If it's
1181+
not truncating then theres and issue that needs to be fixed. Help!
1182+
</p>
1183+
</div>
11641184
</div>
11651185
</div>
11661186
</div>
@@ -2338,7 +2358,11 @@ exports[`HTML Output should match combiners/allOfs/todo-full.json 1`] = `
23382358
</div>
23392359
<span>required</span>
23402360
</div>
2341-
<div><div title=\\"The user's full name.\\">The user's full name.</div></div>
2361+
<div>
2362+
<div title=\\"The user's full name.\\">
2363+
<div class=\\"MarkdownViewer\\"><p>The user's full name.</p></div>
2364+
</div>
2365+
</div>
23422366
</div>
23432367
</div>
23442368
<div></div>
@@ -2556,7 +2580,7 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
25562580
</div>
25572581
<div>
25582582
<div title=\\"The identifier of the existing reservation.\\">
2559-
The identifier of the existing reservation.
2583+
<div class=\\"MarkdownViewer\\"><p>The identifier of the existing reservation.</p></div>
25602584
</div>
25612585
</div>
25622586
</div>
@@ -2811,8 +2835,12 @@ exports[`HTML Output should match default-schema.json 1`] = `
28112835
<div
28122836
title=\\"The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!\\"
28132837
>
2814-
The user's full name. This description can be long and should truncate once it reaches the end of
2815-
the row. If it's not truncating then theres and issue that needs to be fixed. Help!
2838+
<div class=\\"MarkdownViewer\\">
2839+
<p>
2840+
The user's full name. This description can be long and should truncate once it reaches the end
2841+
of the row. If it's not truncating then theres and issue that needs to be fixed. Help!
2842+
</p>
2843+
</div>
28162844
</div>
28172845
</div>
28182846
</div>
@@ -2908,8 +2936,12 @@ exports[`HTML Output should match default-schema.json 1`] = `
29082936
<div
29092937
title=\\"This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!\\"
29102938
>
2911-
This description can be long and should truncate once it reaches the end of the row. If it's not
2912-
truncating then theres and issue that needs to be fixed. Help!
2939+
<div class=\\"MarkdownViewer\\">
2940+
<p>
2941+
This description can be long and should truncate once it reaches the end of the row. If it's not
2942+
truncating then theres and issue that needs to be fixed. Help!
2943+
</p>
2944+
</div>
29132945
</div>
29142946
</div>
29152947
</div>
@@ -3391,7 +3423,11 @@ exports[`HTML Output should match references/nested.json 1`] = `
33913423
<span>object</span>
33923424
</div>
33933425
</div>
3394-
<div><div title=\\"something\\">something</div></div>
3426+
<div>
3427+
<div title=\\"something\\">
3428+
<div class=\\"MarkdownViewer\\"><p>something</p></div>
3429+
</div>
3430+
</div>
33953431
</div>
33963432
</div>
33973433
<div></div>
@@ -3408,7 +3444,11 @@ exports[`HTML Output should match references/nested.json 1`] = `
34083444
<span>object</span>
34093445
</div>
34103446
</div>
3411-
<div><div title=\\"something\\">something</div></div>
3447+
<div>
3448+
<div title=\\"something\\">
3449+
<div class=\\"MarkdownViewer\\"><p>something</p></div>
3450+
</div>
3451+
</div>
34123452
</div>
34133453
</div>
34143454
<div></div>
@@ -3467,7 +3507,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
34673507
</div>
34683508
</div>
34693509
<div>
3470-
<div title=\\"List of ticketing options of the order.\\">List of ticketing options of the order.</div>
3510+
<div title=\\"List of ticketing options of the order.\\">
3511+
<div class=\\"MarkdownViewer\\"><p>List of ticketing options of the order.</p></div>
3512+
</div>
34713513
</div>
34723514
</div>
34733515
</div>
@@ -3501,7 +3543,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
35013543
</div>
35023544
<div>
35033545
<div title=\\"Common ticketing options to all order items.\\">
3504-
Common ticketing options to all order items.
3546+
<div class=\\"MarkdownViewer\\"><p>Common ticketing options to all order items.</p></div>
35053547
</div>
35063548
</div>
35073549
</div>
@@ -3523,7 +3565,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
35233565
</div>
35243566
<div>
35253567
<div title=\\"Ticketing option selection per order item.\\">
3526-
Ticketing option selection per order item.
3568+
<div class=\\"MarkdownViewer\\"><p>Ticketing option selection per order item.</p></div>
35273569
</div>
35283570
</div>
35293571
</div>
@@ -3545,10 +3587,14 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
35453587
<div
35463588
title=\\"The status that addresses if a specific ticket option is active or not. The status active is used before ticketing or before exchange confirmation. After ticketing, the status changes in completed. This allows to store ticketing options already used at ticketing time and to clean up all non selected options after ticketing or exchanged confirmation.\\"
35473589
>
3548-
The status that addresses if a specific ticket option is active or not. The status active is
3549-
used before ticketing or before exchange confirmation. After ticketing, the status changes in
3550-
completed. This allows to store ticketing options already used at ticketing time and to clean up
3551-
all non selected options after ticketing or exchanged confirmation.
3590+
<div class=\\"MarkdownViewer\\">
3591+
<p>
3592+
The status that addresses if a specific ticket option is active or not. The status active is
3593+
used before ticketing or before exchange confirmation. After ticketing, the status changes
3594+
in completed. This allows to store ticketing options already used at ticketing time and to
3595+
clean up all non selected options after ticketing or exchanged confirmation.
3596+
</p>
3597+
</div>
35523598
</div>
35533599
</div>
35543600
</div>
@@ -3579,7 +3625,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
35793625
</div>
35803626
<div>
35813627
<div title=\\"Structure that contains ticketing options per order item.\\">
3582-
Structure that contains ticketing options per order item.
3628+
<div class=\\"MarkdownViewer\\">
3629+
<p>Structure that contains ticketing options per order item.</p>
3630+
</div>
35833631
</div>
35843632
</div>
35853633
</div>
@@ -3617,7 +3665,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
36173665
</div>
36183666
<div>
36193667
<div title=\\"Available ticketing options for a given order item.\\">
3620-
Available ticketing options for a given order item.
3668+
<div class=\\"MarkdownViewer\\"><p>Available ticketing options for a given order item.</p></div>
36213669
</div>
36223670
</div>
36233671
</div>
@@ -3637,7 +3685,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
36373685
<span>read-only</span>
36383686
</div>
36393687
<div>
3640-
<div title=\\"Ticketing option short-description.\\">Ticketing option short-description.</div>
3688+
<div title=\\"Ticketing option short-description.\\">
3689+
<div class=\\"MarkdownViewer\\"><p>Ticketing option short-description.</p></div>
3690+
</div>
36413691
</div>
36423692
</div>
36433693
<div>
@@ -3666,8 +3716,12 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
36663716
<div
36673717
title=\\"Flag to specify which ticketing option is selected. Only one option is allowed to be selected.\\"
36683718
>
3669-
Flag to specify which ticketing option is selected. Only one option is allowed to be
3670-
selected.
3719+
<div class=\\"MarkdownViewer\\">
3720+
<p>
3721+
Flag to specify which ticketing option is selected. Only one option is allowed to be
3722+
selected.
3723+
</p>
3724+
</div>
36713725
</div>
36723726
</div>
36733727
</div>
@@ -3689,7 +3743,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
36893743
</div>
36903744
<div>
36913745
<div title=\\"Additional passenger required info specific to the given ticketing option.\\">
3692-
Additional passenger required info specific to the given ticketing option.
3746+
<div class=\\"MarkdownViewer\\">
3747+
<p>Additional passenger required info specific to the given ticketing option.</p>
3748+
</div>
36933749
</div>
36943750
</div>
36953751
</div>
@@ -3709,7 +3765,11 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
37093765
<span>object</span>
37103766
</div>
37113767
</div>
3712-
<div><div title=\\"Data for ticket delivery.\\">Data for ticket delivery.</div></div>
3768+
<div>
3769+
<div title=\\"Data for ticket delivery.\\">
3770+
<div class=\\"MarkdownViewer\\"><p>Data for ticket delivery.</p></div>
3771+
</div>
3772+
</div>
37133773
</div>
37143774
</div>
37153775
<div></div>
@@ -3794,7 +3854,11 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
37943854
<div
37953855
title=\\"The name of the Station in case you select pick up at station as a delivery type\\"
37963856
>
3797-
The name of the Station in case you select pick up at station as a delivery type
3857+
<div class=\\"MarkdownViewer\\">
3858+
<p>
3859+
The name of the Station in case you select pick up at station as a delivery type
3860+
</p>
3861+
</div>
37983862
</div>
37993863
</div>
38003864
</div>

‎src/components/shared/Description.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import { MarkdownViewer } from '@stoplight/markdown-viewer';
12
import * as React from 'react';
23

34
export const Description: React.FunctionComponent<{ value: string }> = ({ value }) => (
4-
// TODO (JJ): Add mosaic popover showing full description in MarkdownViewer
55
<div className="sl-w-full sl-text-muted" title={value}>
6-
{value}
6+
<MarkdownViewer markdown={value} />
77
</div>
88
);

‎yarn.lock‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2405,13 +2405,13 @@
24052405
dependencies:
24062406
wolfy87-eventemitter "~5.2.8"
24072407

2408-
"@stoplight/markdown-viewer@^4.3.2":
2409-
version "4.3.2"
2410-
resolved "https://registry.yarnpkg.com/@stoplight/markdown-viewer/-/markdown-viewer-4.3.2.tgz#8a746fc731df15f884edfc7e1e6c831b84a2cad7"
2411-
integrity sha512-sNmZSzHKuWh19Kfd90vAjQkupL93UGUq1ZnKZDi6a5RroDD3MYcc5su/MrTsvTwXwTda8y1z2tMogBDujzlE1w==
2408+
"@stoplight/markdown-viewer@^4.3.4":
2409+
version "4.3.4"
2410+
resolved "https://registry.yarnpkg.com/@stoplight/markdown-viewer/-/markdown-viewer-4.3.4.tgz#9b5e04ff7b90fb7d1e172c07c140d5466763a7d1"
2411+
integrity sha512-yIhjUckgHhsKGs2bLeQvYo1KgU4hbGfIYmwSwzSu648DSn3kxq5igAlujUf+K5ntK4kXpab3MjrbOojmb5OsIA==
24122412
dependencies:
24132413
"@stoplight/json" "^3.6"
2414-
"@stoplight/markdown" "^2.9.1"
2414+
"@stoplight/markdown" "^2.11.0"
24152415
"@stoplight/react-error-boundary" "^1.0.0"
24162416
classnames "^2"
24172417
dompurify "^2.0.11"
@@ -2420,10 +2420,10 @@
24202420
remark-slug "^6.0.0"
24212421
unified "^9.0.0"
24222422

2423-
"@stoplight/markdown@^2.9.1":
2424-
version "2.10.0"
2425-
resolved "https://registry.yarnpkg.com/@stoplight/markdown/-/markdown-2.10.0.tgz#b8cf098a8c76a0342bf89637a978ea2047576ce4"
2426-
integrity sha512-UdvFMtcxCY4RoU7e/9Bbhbe4G1ej4vBni/NQl7+cU0UrcI3Bz6jzxeweF9q6vsF7716+cX1u95tduyRk2zVWEQ==
2423+
"@stoplight/markdown@^2.11.0":
2424+
version "2.11.0"
2425+
resolved "https://registry.yarnpkg.com/@stoplight/markdown/-/markdown-2.11.0.tgz#a4736be93200d0d74dbbdba6d5c302308f77257e"
2426+
integrity sha512-EPUzoEPl1vC0V9PwC47XRYCcmhXCOpJ0JfPZsn2uFYX5I4gchJU6bXJ+03u/8ZwzPMpqvmU7/y/UvEEGkrKzkg==
24272427
dependencies:
24282428
"@stoplight/yaml" "^4.0.2"
24292429
lodash "^4.17.15"

0 commit comments

Comments
 (0)