-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [XD-56]: Initial breadcrumb component docs and change from Brea…
…dcrumbPART to Breadcrumb.PART
- Loading branch information
Showing
23 changed files
with
365 additions
and
132 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
apps/design-system/src/components/docs-page/code-block.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { FC } from 'react' | ||
|
|
||
| import { MarkdownViewer } from '@harnessio/ui/components' | ||
|
|
||
| export interface CodeBlockProps { | ||
| code: string | ||
| language?: string | ||
| } | ||
|
|
||
| const CodeBlock: FC<CodeBlockProps> = ({ code, language = 'typescript tsx' }) => ( | ||
| <MarkdownViewer | ||
| source={` | ||
| \`\`\`${language} | ||
| ${code} | ||
| \`\`\` | ||
| `} | ||
| /> | ||
| ) | ||
|
|
||
| export default CodeBlock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,19 @@ | ||
| import CodeBlock from './code-block.tsx' | ||
| import ComponentExample from './component-example' | ||
| import Example from './example' | ||
| import PropsTable from './props-table.tsx' | ||
| import Root from './root' | ||
| import Section from './section' | ||
| import SubSection from './sub-section.tsx' | ||
| import Summary from './summary' | ||
|
|
||
| export const DocsPage = { | ||
| Root, | ||
| Summary, | ||
| Section, | ||
| SubSection, | ||
| Example, | ||
| ComponentExample | ||
| ComponentExample, | ||
| CodeBlock, | ||
| PropsTable | ||
| } |
37 changes: 37 additions & 0 deletions
37
apps/design-system/src/components/docs-page/props-table.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { FC } from 'react' | ||
|
|
||
| import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@harnessio/ui/components' | ||
|
|
||
| interface PropDescription { | ||
| name: string | ||
| required?: boolean | ||
| defaultValue?: string | ||
| description?: string | ||
| } | ||
|
|
||
| export interface PropsTableProps { | ||
| props: PropDescription[] | ||
| } | ||
|
|
||
| const PropsTable: FC<PropsTableProps> = ({ props }) => ( | ||
| <Table> | ||
| <TableHeader> | ||
| <TableRow> | ||
| <TableHead>Prop</TableHead> | ||
| <TableHead>Required</TableHead> | ||
| <TableHead>Default</TableHead> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {props.map(({ name, required, defaultValue, description }) => ( | ||
| <TableRow key={name}> | ||
| <TableCell title={description}>{name}</TableCell> | ||
| <TableCell>{required ? 'yup' : 'nope'}</TableCell> | ||
| <TableCell>{defaultValue}</TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| ) | ||
|
|
||
| export default PropsTable |
5 changes: 5 additions & 0 deletions
5
apps/design-system/src/components/docs-page/section.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .section { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
apps/design-system/src/components/docs-page/sub-section.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { FC, PropsWithChildren, ReactNode } from 'react' | ||
|
|
||
| import { Text } from '@harnessio/ui/components' | ||
|
|
||
| import css from './section.module.css' | ||
|
|
||
| export interface SubSectionProps extends PropsWithChildren { | ||
| title: string | ||
| description?: ReactNode | ||
| } | ||
|
|
||
| const SubSection: FC<SubSectionProps> = ({ title, description, children }) => ( | ||
| <section className={css.section}> | ||
| <Text as="h4" size={4}> | ||
| {title} | ||
| </Text> | ||
| {description} | ||
| {children} | ||
| </section> | ||
| ) | ||
|
|
||
| export default SubSection |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
170 changes: 170 additions & 0 deletions
170
apps/design-system/src/subjects/components/breadcrumb.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| import { DocsPage } from '@components/docs-page/docs-page' | ||
|
|
||
| const BreadcrumbComponent = () => ( | ||
| <DocsPage.Root> | ||
| <DocsPage.Summary title="Breadcrumb"> | ||
| <p> | ||
| A breadcrumbs is a list of links that help visualize the location of a page within the hierarchical structure of | ||
| a site, it allows navigation up to any of the ancestors. | ||
| </p> | ||
| </DocsPage.Summary> | ||
|
|
||
| <DocsPage.ComponentExample | ||
| code={` | ||
| <Breadcrumb.Root className="select-none"> | ||
| <Breadcrumb.List> | ||
| <Breadcrumb.Item> | ||
| <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link> | ||
| </Breadcrumb.Item> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Ellipsis /> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Item> | ||
| <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link> | ||
| </Breadcrumb.Item> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Page>Dolor</Breadcrumb.Page> | ||
| </Breadcrumb.List> | ||
| </Breadcrumb.Root> | ||
| `} | ||
| /> | ||
|
|
||
| <DocsPage.Section title="Anatomy"> | ||
| <p>All parts of the breadcrumb can be imported and composed as required.</p> | ||
|
|
||
| <DocsPage.CodeBlock | ||
| code={`<Breadcrumb.Root className="select-none"> | ||
| <Breadcrumb.List> | ||
| <Breadcrumb.Item> | ||
| <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link> | ||
| </Breadcrumb.Item> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Ellipsis /> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Item> | ||
| <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link> | ||
| </Breadcrumb.Item> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Page>Dolor</Breadcrumb.Page> | ||
| </Breadcrumb.List> | ||
| </Breadcrumb.Root>`} | ||
| /> | ||
| </DocsPage.Section> | ||
|
|
||
| <DocsPage.Section title="API Reference"> | ||
| <DocsPage.SubSection title="Root"> | ||
| <p>The `Root` component wraps the breadcrumb with a `nav` tag for use as page navigation.</p> | ||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { name: 'children', description: 'You can pass in your `Breadcrumb.List` as a child', required: true }, | ||
| { name: 'className', required: false } | ||
| ]} | ||
| /> | ||
| </DocsPage.SubSection> | ||
|
|
||
| <DocsPage.SubSection title="List"> | ||
| <p>The `List` component adds styling to ensure the breadcrumb is displayed inline as a list.</p> | ||
| <DocsPage.CodeBlock | ||
| code={`<Breadcrumb.List> | ||
| {/* Pass Breadcrumb.Item, Breadcrumb.Separator and Breadcrumb.Page elements as children */} | ||
| </Breadcrumb.List>`} | ||
| /> | ||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { name: 'children', description: 'You can pass in your `Breadcrumb.Item`s as children', required: true }, | ||
| { name: 'className', required: false } | ||
| ]} | ||
| /> | ||
| </DocsPage.SubSection> | ||
|
|
||
| <DocsPage.SubSection title="Item"> | ||
| <p>The `Item` component displays its contents as a node within the breadcrumb.</p> | ||
| <DocsPage.CodeBlock | ||
| code={`<Breadcrumb.Item> | ||
| {/* Pass text, JSX elements or Breadcrumb.Link elements as children */} | ||
| </Breadcrumb.Item>`} | ||
| /> | ||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { name: 'children', description: 'Content to display', required: true }, | ||
| { name: 'className', required: false } | ||
| ]} | ||
| /> | ||
| </DocsPage.SubSection> | ||
|
|
||
| <DocsPage.SubSection title="Link"> | ||
| <p> | ||
| The `Link` component can be passed as a child to an `Item` component to display a clickable breadcrumb item. | ||
| </p> | ||
| <DocsPage.CodeBlock | ||
| code={`<Breadcrumb.Item> | ||
| <Breadcrumb.Link href="#"> | ||
| Lorem | ||
| </Breadcrumb.Link> | ||
| </Breadcrumb.Item> | ||
| <Breadcrumb.Item> | ||
| <Breadcrumb.Link asChild> | ||
| <button onClick={handleLinkClick}>Click me</button> | ||
| </Breadcrumb.Link> | ||
| </Breadcrumb.Item>`} | ||
| /> | ||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { name: 'href', description: 'Where to link to' }, | ||
| { name: 'children', description: 'Content to display in the link', required: true }, | ||
| { | ||
| name: 'asChild', | ||
| description: 'Render using the passed child element instead of as an anchor element', | ||
| defaultValue: 'false' | ||
| }, | ||
| { name: 'className' } | ||
| ]} | ||
| /> | ||
| </DocsPage.SubSection> | ||
|
|
||
| <DocsPage.SubSection title="Page"> | ||
| <p> | ||
| The `Page` component displays its contents as a node within the breadcrumb with styling to denote that it is | ||
| the current page. | ||
| </p> | ||
| <DocsPage.CodeBlock code={`<Breadcrumb.Page>Lorem ipsum</Breadcrumb.Page>`} /> | ||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { name: 'children', description: 'Content to display', required: true }, | ||
| { name: 'className', required: false } | ||
| ]} | ||
| /> | ||
| </DocsPage.SubSection> | ||
|
|
||
| <DocsPage.SubSection title="Separator"> | ||
| <p>The `Separator` component displays a separator between the items of the breadcrumb.</p> | ||
| <DocsPage.CodeBlock | ||
| code={`<Breadcrumb.Separator /> | ||
| <Breadcrumb.Item> | ||
| Lorem ipsum | ||
| </Breadcrumb.Item> | ||
| <Breadcrumb.Separator> | ||
| > | ||
| </Breadcrumb.Separator>`} | ||
| /> | ||
| <DocsPage.PropsTable | ||
| props={[ | ||
| { name: 'children', description: 'Content to display', defaultValue: '/' }, | ||
| { name: 'className', required: false } | ||
| ]} | ||
| /> | ||
| </DocsPage.SubSection> | ||
|
|
||
| <DocsPage.SubSection title="Ellipsis"> | ||
| <p>The `Ellipsis` component displays an ellipsis for use when there are too many items to display.</p> | ||
| <DocsPage.CodeBlock code={`<Breadcrumb.Ellipsis />`} /> | ||
| <DocsPage.PropsTable props={[{ name: 'className', required: false }]} /> | ||
| </DocsPage.SubSection> | ||
| </DocsPage.Section> | ||
| </DocsPage.Root> | ||
| ) | ||
|
|
||
| export default BreadcrumbComponent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.