Skip to content

feat: add Markdown support in descriptions #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 25, 2021
Merged

feat: add Markdown support in descriptions #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a70b855
feat: add markdown support in descriptions
mmiask May 25, 2021
e5ba825
test: update snapshots
mmiask May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@rollup/plugin-typescript": "^3.1.1",
"@sambego/storybook-state": "^1.3.6",
"@stoplight/eslint-config": "^1.2.0",
"@stoplight/markdown-viewer": "^4.3.2",
"@stoplight/markdown-viewer": "^4.3.4",
"@stoplight/scripts": "^8.2.0",
"@stoplight/storybook-config": "^2.0.6",
"@stoplight/types": "^11.9.0",
Expand Down
126 changes: 95 additions & 31 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,11 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
<span>boolean</span>
</div>
</div>
<div><div title=\\"Is this account enabled\\">Is this account enabled</div></div>
<div>
<div title=\\"Is this account enabled\\">
<div class=\\"MarkdownViewer\\"><p>Is this account enabled</p></div>
</div>
</div>
</div>
</div>
<div></div>
Expand Down Expand Up @@ -525,8 +529,12 @@ exports[`HTML Output given complex type that includes array and complex array su
<div
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!\\"
>
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!
<div class=\\"MarkdownViewer\\">
<p>
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!
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -659,7 +667,11 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
<span>boolean</span>
</div>
</div>
<div><div title=\\"Is this account enabled\\">Is this account enabled</div></div>
<div>
<div title=\\"Is this account enabled\\">
<div class=\\"MarkdownViewer\\"><p>Is this account enabled</p></div>
</div>
</div>
</div>
</div>
<div></div>
Expand Down Expand Up @@ -1062,8 +1074,12 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
<div
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!\\"
>
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!
<div class=\\"MarkdownViewer\\">
<p>
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!
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1159,8 +1175,12 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
<div
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!\\"
>
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!
<div class=\\"MarkdownViewer\\">
<p>
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!
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2338,7 +2358,11 @@ exports[`HTML Output should match combiners/allOfs/todo-full.json 1`] = `
</div>
<span>required</span>
</div>
<div><div title=\\"The user's full name.\\">The user's full name.</div></div>
<div>
<div title=\\"The user's full name.\\">
<div class=\\"MarkdownViewer\\"><p>The user's full name.</p></div>
</div>
</div>
</div>
</div>
<div></div>
Expand Down Expand Up @@ -2556,7 +2580,7 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
</div>
<div>
<div title=\\"The identifier of the existing reservation.\\">
The identifier of the existing reservation.
<div class=\\"MarkdownViewer\\"><p>The identifier of the existing reservation.</p></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2811,8 +2835,12 @@ exports[`HTML Output should match default-schema.json 1`] = `
<div
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!\\"
>
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!
<div class=\\"MarkdownViewer\\">
<p>
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!
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2908,8 +2936,12 @@ exports[`HTML Output should match default-schema.json 1`] = `
<div
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!\\"
>
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!
<div class=\\"MarkdownViewer\\">
<p>
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!
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3391,7 +3423,11 @@ exports[`HTML Output should match references/nested.json 1`] = `
<span>object</span>
</div>
</div>
<div><div title=\\"something\\">something</div></div>
<div>
<div title=\\"something\\">
<div class=\\"MarkdownViewer\\"><p>something</p></div>
</div>
</div>
</div>
</div>
<div></div>
Expand All @@ -3408,7 +3444,11 @@ exports[`HTML Output should match references/nested.json 1`] = `
<span>object</span>
</div>
</div>
<div><div title=\\"something\\">something</div></div>
<div>
<div title=\\"something\\">
<div class=\\"MarkdownViewer\\"><p>something</p></div>
</div>
</div>
</div>
</div>
<div></div>
Expand Down Expand Up @@ -3467,7 +3507,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
</div>
</div>
<div>
<div title=\\"List of ticketing options of the order.\\">List of ticketing options of the order.</div>
<div title=\\"List of ticketing options of the order.\\">
<div class=\\"MarkdownViewer\\"><p>List of ticketing options of the order.</p></div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3501,7 +3543,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
</div>
<div>
<div title=\\"Common ticketing options to all order items.\\">
Common ticketing options to all order items.
<div class=\\"MarkdownViewer\\"><p>Common ticketing options to all order items.</p></div>
</div>
</div>
</div>
Expand All @@ -3523,7 +3565,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
</div>
<div>
<div title=\\"Ticketing option selection per order item.\\">
Ticketing option selection per order item.
<div class=\\"MarkdownViewer\\"><p>Ticketing option selection per order item.</p></div>
</div>
</div>
</div>
Expand All @@ -3545,10 +3587,14 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
<div
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.\\"
>
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.
<div class=\\"MarkdownViewer\\">
<p>
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.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3579,7 +3625,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
</div>
<div>
<div title=\\"Structure that contains ticketing options per order item.\\">
Structure that contains ticketing options per order item.
<div class=\\"MarkdownViewer\\">
<p>Structure that contains ticketing options per order item.</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3617,7 +3665,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
</div>
<div>
<div title=\\"Available ticketing options for a given order item.\\">
Available ticketing options for a given order item.
<div class=\\"MarkdownViewer\\"><p>Available ticketing options for a given order item.</p></div>
</div>
</div>
</div>
Expand All @@ -3637,7 +3685,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
<span>read-only</span>
</div>
<div>
<div title=\\"Ticketing option short-description.\\">Ticketing option short-description.</div>
<div title=\\"Ticketing option short-description.\\">
<div class=\\"MarkdownViewer\\"><p>Ticketing option short-description.</p></div>
</div>
</div>
</div>
<div>
Expand Down Expand Up @@ -3666,8 +3716,12 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
<div
title=\\"Flag to specify which ticketing option is selected. Only one option is allowed to be selected.\\"
>
Flag to specify which ticketing option is selected. Only one option is allowed to be
selected.
<div class=\\"MarkdownViewer\\">
<p>
Flag to specify which ticketing option is selected. Only one option is allowed to be
selected.
</p>
</div>
</div>
</div>
</div>
Expand All @@ -3689,7 +3743,9 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
</div>
<div>
<div title=\\"Additional passenger required info specific to the given ticketing option.\\">
Additional passenger required info specific to the given ticketing option.
<div class=\\"MarkdownViewer\\">
<p>Additional passenger required info specific to the given ticketing option.</p>
</div>
</div>
</div>
</div>
Expand All @@ -3709,7 +3765,11 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
<span>object</span>
</div>
</div>
<div><div title=\\"Data for ticket delivery.\\">Data for ticket delivery.</div></div>
<div>
<div title=\\"Data for ticket delivery.\\">
<div class=\\"MarkdownViewer\\"><p>Data for ticket delivery.</p></div>
</div>
</div>
</div>
</div>
<div></div>
Expand Down Expand Up @@ -3794,7 +3854,11 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
<div
title=\\"The name of the Station in case you select pick up at station as a delivery type\\"
>
The name of the Station in case you select pick up at station as a delivery type
<div class=\\"MarkdownViewer\\">
<p>
The name of the Station in case you select pick up at station as a delivery type
</p>
</div>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/Description.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { MarkdownViewer } from '@stoplight/markdown-viewer';
import * as React from 'react';

export const Description: React.FunctionComponent<{ value: string }> = ({ value }) => (
// TODO (JJ): Add mosaic popover showing full description in MarkdownViewer
<div className="sl-w-full sl-text-muted" title={value}>
{value}
<MarkdownViewer markdown={value} />
</div>
);
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2405,13 +2405,13 @@
dependencies:
wolfy87-eventemitter "~5.2.8"

"@stoplight/markdown-viewer@^4.3.2":
version "4.3.2"
resolved "https://registry.yarnpkg.com/@stoplight/markdown-viewer/-/markdown-viewer-4.3.2.tgz#8a746fc731df15f884edfc7e1e6c831b84a2cad7"
integrity sha512-sNmZSzHKuWh19Kfd90vAjQkupL93UGUq1ZnKZDi6a5RroDD3MYcc5su/MrTsvTwXwTda8y1z2tMogBDujzlE1w==
"@stoplight/markdown-viewer@^4.3.4":
version "4.3.4"
resolved "https://registry.yarnpkg.com/@stoplight/markdown-viewer/-/markdown-viewer-4.3.4.tgz#9b5e04ff7b90fb7d1e172c07c140d5466763a7d1"
integrity sha512-yIhjUckgHhsKGs2bLeQvYo1KgU4hbGfIYmwSwzSu648DSn3kxq5igAlujUf+K5ntK4kXpab3MjrbOojmb5OsIA==
dependencies:
"@stoplight/json" "^3.6"
"@stoplight/markdown" "^2.9.1"
"@stoplight/markdown" "^2.11.0"
"@stoplight/react-error-boundary" "^1.0.0"
classnames "^2"
dompurify "^2.0.11"
Expand All @@ -2420,10 +2420,10 @@
remark-slug "^6.0.0"
unified "^9.0.0"

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