Skip to content

Commit

Permalink
Merge pull request #18 from vanessatran-ddi/feat/list-component-page
Browse files Browse the repository at this point in the history 
feat: Add list page- Code review needed
  • Loading branch information
@chrisolsen
chrisolsen authored Nov 10, 2023
2 parents 4018a83 + 07be018 commit 7cf1254
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ import ButtonPage from "./routes/components/Button";
import FormStepperPage from "./routes/components/FormStepper";
import CheckboxPage from "./routes/components/Checkbox";
import BadgePage from "./routes/components/Badge";
import PopoverPage from "./routes/components/Popover";

import ListPage from "@routes/components/List";
import PopoverPage from "./routes/components/Popover";
import ContainerPage from "@routes/components/Container";
import SkeletonPage from "@routes/components/Skeleton.tsx";
import AllComponentsPage from "./routes/components/AllComponents";
Expand Down Expand Up @@ -51,6 +52,7 @@ import HomePage from "@routes/home";




interface DeviceWidthProviderProps {
children: ReactNode;
}
Expand Down Expand Up @@ -80,6 +82,7 @@ const router = createBrowserRouter(
<Route path="badge" element={<BadgePage />} />
<Route path="popover" element={<PopoverPage />} />
<Route path="badge" element={<BadgePage/>} />
<Route path="list" element={<ListPage/>} />
<Route path='container' element={<ContainerPage />} />
<Route path="skeleton-loader" element={<SkeletonPage/>} />ß
<Route path="*" element={<ComponentNotFoundPage />} />
Expand Down
207 changes: 207 additions & 0 deletions src/routes/components/List.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
import {Category, ComponentHeader} from "@components/component-header/ComponentHeader.tsx";
import {GoABadge, GoABlock, GoAContainer, GoATab, GoATabs} from "@abgov/react-components";
import {CodeSnippet} from "@components/code-snippet/CodeSnippet.tsx";
import {useContext} from "react";
import {LanguageContext} from "@components/sandbox";

export default function ListPage() {
const language = useContext(LanguageContext);

return (
<>
<ComponentHeader
name="List"
category={Category.CONTENT_AND_LAYOUT}
description="Chunk information into short succinct ideas."
/>
<GoATabs>
<GoATab heading="Code examples">
{/*We don't use sandbox because it isn't starting with "GoA" components*/}
<GoAContainer>
<ol className="goa-ordered-list">
<li>
An ordered item
<ul>
<li>An unordered item</li>
<li>
A longer item that wraps to a second line
<ul>
<li>An item on a 3rd level</li>
</ul>
</li>
</ul>
</li>
<li>
An ordered item
<ul>
<li>
An unordered item
<ul>
<li>An item on a third level</li>
<li>
A second item on a 3rd level
<ul>
<li>An item on a 4th level</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</GoAContainer>

{language === "react" && (
<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<ol className="goa-ordered-list">
<li>
An ordered item
<ul>
<li>An unordered item</li>
<li>
A longer item that wraps to a second line
<ul>
<li>An item on a 3rd level</li>
</ul>
</li>
</ul>
</li>
<li>
An ordered item
<ul>
<li>
An unordered item
<ul>
<li>An item on a third level</li>
<li>
A second item on a 3rd level
<ul>
<li>An item on a 4th level</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
`}
/>
)}

{language === "angular" && (
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<ol class="goa-ordered-list">
<li>
An ordered item
<ul>
<li>An unordered item</li>
<li>
A longer item that wraps to a second line
<ul>
<li>An item on a 3rd level</li>
</ul>
</li>
</ul>
</li>
<li>
An ordered item
<ul>
<li>
An unordered item
<ul>
<li>An item on a third level</li>
<li>
A second item on a 3rd level
<ul>
<li>An item on a 4th level</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
`}
/>
)}

<GoABlock gap="xs" direction="column" mt="2xl" mb="3xl">
<a href="#unordered-list">Unordered list</a>
</GoABlock>

<h3 id="unordered-list">Unordered list</h3>
<GoAContainer>
<ul className="goa-unordered-list">
<li>Milk</li>
<li>
Cheese
<ul className="goa-unordered-list">
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
</GoAContainer>

{language === "react" && (
<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<ul className="goa-unordered-list">
<li>Milk</li>
<li>
Cheese
<ul className="goa-unordered-list">
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
`}
/>
)}

{language === "angular" && (
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<ul class="goa-unordered-list">
<li>Milk</li>
<li>
Cheese
<ul class="goa-unordered-list">
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
`}
/>
)}
</GoATab>

<GoATab
heading={
<>
Design guidelines
<GoABadge type="information" content="In progress" />
</>
}>
<p>Coming Soon</p>
</GoATab>
</GoATabs>
</>
);
}

0 comments on commit 7cf1254

Please sign in to comment.