Skip to content

Commit 73ff2d6

Browse files
AndreasArvidssonAndreasArvidsson
committed
Added cards
1 parent 5f8e369 commit 73ff2d6

File tree

3 files changed

+96
-55
lines changed

3 files changed

+96
-55
lines changed

‎packages/cursorless-org-docs/src/css/custom.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,19 @@
2828
.hidden {
2929
display: none;
3030
}
31+
32+
.card {
33+
border: 1px solid rgba(0, 0, 0, 0.175);
34+
margin-bottom: 1rem;
35+
}
36+
37+
.card-header {
38+
background-color: #f8f9fa;
39+
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
40+
padding: 0.5rem 1rem;
41+
cursor: pointer;
42+
}
43+
44+
.card-body {
45+
padding: 1rem;
46+
}

‎packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupport.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,43 +31,44 @@ export function ScopeSupport({ languageId }: Props): JSX.Element {
3131
<>
3232
<ScopeSupportForLevel
3333
facets={supportedScopes}
34-
title={"Supported facets"}
35-
description={"These facets are supported"}
34+
title="Supported facets"
35+
subtitle="These facets are supported"
36+
expanded
3637
/>
3738

3839
<ScopeSupportForLevel
3940
facets={supportedLegacyScopes}
40-
title={"Supported Legacy facets"}
41-
description={
42-
"These facets are supported with the legacy implementation and should be migrated to the new implementation"
43-
}
41+
title="Supported Legacy facets"
42+
subtitle="These facets are supported with the legacy implementation and should be migrated to the new implementation"
4443
/>
4544

4645
<ScopeSupportForLevel
4746
facets={unsupportedScopes}
48-
title={"Unsupported facets"}
47+
title="Unsupported facets"
48+
subtitle="These facets are not supported yet and needs a developer to implement them"
4949
description={
5050
<>
51-
These facets are not supported yet and needs a developer to
52-
implement them. <br />
53-
We would happily accept
54-
[contributions](https://www.cursorless.org/docs/contributing/adding-a-new-scope).
51+
We would happily accept{" "}
52+
<a href="https://www.cursorless.org/docs/contributing/adding-a-new-scope">
53+
contributions
54+
</a>
5555
</>
5656
}
5757
/>
5858

5959
<ScopeSupportForLevel
6060
facets={unspecifiedScopes}
61-
title={"Unspecified facets"}
61+
title="Unspecified facets"
62+
subtitle="These facets are unspecified"
6263
description={
6364
<>
64-
These facets are unspecified <br />
65-
<i>
66-
Note that in many instances we actually do support these scopes,
67-
but we have not yet updated `languageScopeSupport` to reflect this
68-
fact. We would happily accept
69-
[contributions](https://www.cursorless.org/docs/contributing/adding-a-new-scope).
70-
</i>
65+
Note that in many instances we actually do support these scopes, but
66+
we have not yet updated 'languageScopeSupport' to reflect this fact.
67+
<br />
68+
We would happily accept{" "}
69+
<a href="https://www.cursorless.org/docs/contributing/adding-a-new-scope">
70+
contributions
71+
</a>
7172
</>
7273
}
7374
/>

‎packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupportForLevel.tsx‎

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,58 +8,82 @@ import {
88
type ScopeType,
99
type SimpleScopeTypeType,
1010
} from "@cursorless/common";
11-
import React from "react";
11+
import React, { useState } from "react";
1212

1313
interface Props {
1414
facets: ScopeSupportFacet[];
1515
title: string;
16-
description: React.ReactNode;
16+
subtitle: string;
17+
description?: React.ReactNode;
18+
expanded?: boolean;
1719
}
1820

1921
export function ScopeSupportForLevel({
2022
facets,
2123
title,
24+
subtitle,
2225
description,
26+
expanded: expandedProp,
2327
}: Props): JSX.Element | null {
28+
const [expanded, setExpanded] = useState(expandedProp ?? false);
29+
2430
if (facets.length === 0) {
2531
return null;
2632
}
27-
const facetInfos = facets.map(
28-
(facet): AugmentedFacetInfo => ({
29-
facet,
30-
...scopeSupportFacetInfos[facet],
31-
}),
32-
);
33-
const scopeGroups: Map<string, AugmentedFacetInfo[]> = groupBy(
34-
facetInfos,
35-
(facetInfo) => serializeScopeType(facetInfo.scopeType),
36-
);
37-
const scopeTypes = Array.from(scopeGroups.keys()).sort();
33+
34+
const renderBody = () => {
35+
if (!expanded) {
36+
return null;
37+
}
38+
39+
const facetInfos = facets.map(
40+
(facet): AugmentedFacetInfo => ({
41+
facet,
42+
...scopeSupportFacetInfos[facet],
43+
}),
44+
);
45+
const scopeGroups: Map<string, AugmentedFacetInfo[]> = groupBy(
46+
facetInfos,
47+
(facetInfo) => serializeScopeType(facetInfo.scopeType),
48+
);
49+
const scopeTypes = Array.from(scopeGroups.keys()).sort();
50+
51+
return (
52+
<div className="card-body">
53+
{description && <p>{description}</p>}
54+
55+
{scopeTypes.map((scopeType) => {
56+
const facetInfos = scopeGroups.get(scopeType) ?? [];
57+
return (
58+
<div key={scopeType}>
59+
<h4>{prettifyScopeType(scopeType)}</h4>
60+
<ul>
61+
{facetInfos.map((facetInfo) => {
62+
return (
63+
<li key={facetInfo.facet}>
64+
<b title={facetInfo.facet}>
65+
{prettifyFacet(facetInfo.facet)}
66+
</b>
67+
: {facetInfo.description}
68+
</li>
69+
);
70+
})}
71+
</ul>
72+
</div>
73+
);
74+
})}
75+
</div>
76+
);
77+
};
78+
3879
return (
39-
<div>
40-
<h3>{title}</h3>
41-
<p>{description}</p>
80+
<div className="card">
81+
<div className="card-header" onClick={() => setExpanded(!expanded)}>
82+
<h3>{title}</h3>
83+
{subtitle}
84+
</div>
4285

43-
{scopeTypes.map((scopeType) => {
44-
const facetInfos = scopeGroups.get(scopeType) ?? [];
45-
return (
46-
<div key={scopeType}>
47-
<h4>{prettifyScopeType(scopeType)}</h4>
48-
<ul>
49-
{facetInfos.map((facetInfo) => {
50-
return (
51-
<li key={facetInfo.facet}>
52-
<b title={facetInfo.facet}>
53-
{prettifyFacet(facetInfo.facet)}
54-
</b>
55-
: {facetInfo.description}
56-
</li>
57-
);
58-
})}
59-
</ul>
60-
</div>
61-
);
62-
})}
86+
{renderBody()}
6387
</div>
6488
);
6589
}

0 commit comments

Comments
 (0)