Skip to content

Tree component #87

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 5 commits into from
May 15, 2025
Merged

Tree component #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
22e4a64
use nightly version with fixed types
jivey May 15, 2025
07b642f
basic tree styles
jivey May 15, 2025
3790d39
export
jivey May 15, 2025
ee2ce66
tree snapshot
jivey May 15, 2025
add26d1
snapshot updates from rac build
jivey May 15, 2025
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
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@openstax/ui-components",
"version": "1.16.2",
"version": "1.17.0",
"license": "MIT",
"source": "./src/index.ts",
"types": "./dist/index.d.ts",
Expand Down Expand Up @@ -73,7 +73,7 @@
"classnames": "^2.3.1",
"crypto": "npm:crypto-browserify@^3.12.0",
"react-aria": "^3.37.0",
"react-aria-components": "^1.6.0",
"react-aria-components": "3.0.0-nightly-0ef9421d8-250514",
"stream": "npm:stream-browserify@^3.0.0"
}
}
48 changes: 48 additions & 0 deletions src/components/Tree.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { render } from "@testing-library/react";
import { Tree, TreeChevron, TreeItem, TreeItemContent } from './Tree';
import { Checkbox } from './Checkbox';

describe('Tree', () => {
it('matches snapshot', () => {
const { asFragment } = render(
<Tree>
<TreeItem id="1" textValue="1">
<TreeItemContent>
<Checkbox
value={"one"}
slot="check"
size={1.4}
>
First
</Checkbox>
<TreeChevron>Show/Hide</TreeChevron>
</TreeItemContent>
<TreeItem id="2" textValue="2">
<TreeItemContent>
<Checkbox
value={"two"}
slot="check"
size={1.4}
>
Second
</Checkbox>
<TreeChevron>Show/Hide</TreeChevron>
</TreeItemContent>
<TreeItem id="3" textValue="3">
<TreeItemContent>
<Checkbox
value={"third"}
slot="check"
size={1.4}
>
Third
</Checkbox>
</TreeItemContent>
</TreeItem>
</TreeItem>
</TreeItem>
</Tree>
)
expect(asFragment()).toMatchSnapshot();
});
});
42 changes: 42 additions & 0 deletions src/components/Tree.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Checkbox } from "./Checkbox";
import { Tree, TreeChevron, TreeItem, TreeItemContent } from "./Tree";

export const Default = () => {
return <Tree>
<TreeItem id="1" textValue="1">
<TreeItemContent>
<Checkbox
value={"one"}
slot="check"
size={1.4}
>
First
</Checkbox>
<TreeChevron>Show/Hide</TreeChevron>
</TreeItemContent>
<TreeItem id="2" textValue="2">
<TreeItemContent>
<Checkbox
value={"two"}
slot="check"
size={1.4}
>
Second
</Checkbox>
<TreeChevron>Show/Hide</TreeChevron>
</TreeItemContent>
<TreeItem id="3" textValue="3">
<TreeItemContent>
<Checkbox
value={"third"}
slot="check"
size={1.4}
>
Third
</Checkbox>
</TreeItemContent>
</TreeItem>
</TreeItem>
</TreeItem>
</Tree>
};
62 changes: 62 additions & 0 deletions src/components/Tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import * as RAC from "react-aria-components";
import { colors } from "../theme";
import styled from "styled-components";

export const Tree = styled(RAC.Tree)`
padding: 0.8rem;

&[data-expanded] .react-aria-Button[slot=chevron] svg {
rotate: 90deg;
}
`;

export const TreeItem = styled(RAC.TreeItem)`
padding-left: calc((var(--tree-item-level) - 1) * 5.5rem);
padding-bottom: 1rem;

&[data-expanded] svg {
rotate: 90deg;
}
`;

export const TreeItemContent = styled(RAC.TreeItemContent)`
`;

const ChevronWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 0 1rem 3rem;
font-weight: bold;
gap: 0.8rem;

button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
width: 1.4rem;
height: 100%;

svg {
rotate: 0deg;
transition: rotate 200ms;
width: 1.4rem;
height: 1.4rem;
stroke: ${colors.palette.neutralDarker};
stroke-width: 0.3rem;
}
}
`;

export const TreeChevron = styled((props: React.PropsWithChildren<{ className?: string }>) => (
<ChevronWrapper>
<button className={props.className} type="button" aria-label="expand/collapse">
<svg viewBox="0 0 24 24">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</button>
{props.children}
</ChevronWrapper>
))`
`;
4 changes: 4 additions & 0 deletions src/components/__snapshots__/DropdownMenu.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ exports[`DropdownMenu matches snapshots 1`] = `
aria-haspopup="true"
class="sc-bczRLJ hTVCmA"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-1"
tabindex="0"
type="button"
>
Test Menu
Expand All @@ -22,7 +24,9 @@ exports[`DropdownMenu matches snapshots 2`] = `
aria-haspopup="true"
class="sc-bczRLJ ga-doNl"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-4"
tabindex="0"
type="button"
>
Test Menu
Expand Down
2 changes: 2 additions & 0 deletions src/components/__snapshots__/HelpMenu.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ exports[`HelpMenu matches snapshot 1`] = `
aria-label="Help menu"
class="sc-bczRLJ dKgZvy sc-eCYdqJ henMfs"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-1"
tabindex="0"
type="button"
>
<span>
Expand Down
8 changes: 8 additions & 0 deletions src/components/__snapshots__/NavBarButton.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`NavBarButton matches base64 icon snapshot 1`] = `
aria-label="dots menu"
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-5"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -19,6 +20,7 @@ exports[`NavBarButton matches base64 icon snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<img
Expand All @@ -33,6 +35,7 @@ exports[`NavBarButton matches icon and text snapshot 1`] = `
<button
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-7"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -47,6 +50,7 @@ exports[`NavBarButton matches icon and text snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<svg
Expand All @@ -72,6 +76,7 @@ exports[`NavBarButton matches svg icon snapshot 1`] = `
aria-label="info"
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-3"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -86,6 +91,7 @@ exports[`NavBarButton matches svg icon snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<svg
Expand All @@ -107,6 +113,7 @@ exports[`NavBarButton matches text snapshot 1`] = `
<button
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-1"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -121,6 +128,7 @@ exports[`NavBarButton matches text snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span>
Expand Down
6 changes: 6 additions & 0 deletions src/components/__snapshots__/NavBarMenuButtons.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`NavBarMenuButton matches snapshot 1`] = `
aria-haspopup={true}
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-7"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -20,6 +21,7 @@ exports[`NavBarMenuButton matches snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span>
Expand All @@ -34,6 +36,7 @@ exports[`NavBarPopoverButton matches custom aria label snapshot 1`] = `
aria-label="Custom label"
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-5"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -48,6 +51,7 @@ exports[`NavBarPopoverButton matches custom aria label snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span>
Expand All @@ -61,6 +65,7 @@ exports[`NavBarPopoverButton matches snapshot 1`] = `
aria-expanded={false}
className="sc-bczRLJ dKgZvy"
data-rac=""
data-react-aria-pressable={true}
id="react-aria-2"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -75,6 +80,7 @@ exports[`NavBarPopoverButton matches snapshot 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span>
Expand Down
Loading
Loading