Skip to content

Commit

Permalink
breadcrumb
Browse files Browse the repository at this point in the history
  • Loading branch information
@Carl-OW
Carl-OW committed Nov 28, 2024
1 parent 5cfdab6 commit a96ffbb
Showing 1 changed file with 163 additions and 163 deletions.
326 changes: 163 additions & 163 deletions src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,178 +84,178 @@ const BreadcrumbInfo = () => {
const tabCodeClicked = e => changeCodeTab(e);

return (
<div className="col-lg-12">
<Title size={1}>Breadcrumb</Title>
<LeadParagraph>
Brødsmuler er en navigasjonshjelp som gir brukeren informasjon om hvor
de befinner seg på nettstedet, ved en kombinasjon av lenker som er
plassert under toppfeltet på en side.
</LeadParagraph>
<div className="col-lg-12">

Check warning on line 87 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 2 tab characters but found 0
<Title size={1}>Breadcrumb</Title>

Check warning on line 88 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0
<LeadParagraph>

Check warning on line 89 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0

Check warning on line 89 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0

Check warning on line 89 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0

Check warning on line 89 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0
Brødsmuler er en navigasjonshjelp som gir brukeren informasjon om hvor
de befinner seg på nettstedet, ved en kombinasjon av lenker som er
plassert under toppfeltet på en side.
</LeadParagraph>

<Tabs
activeOnInit={tabItems[0].path}
items={tabItems}
onClick={tabClicked}
/>
<Divider className="mb-4" />
<Tabs

Check warning on line 95 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0
activeOnInit={tabItems[0].path}

Check warning on line 96 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0
items={tabItems}

Check warning on line 97 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0
onClick={tabClicked}

Check warning on line 98 in src/pages/Components/ComponentsInfo/BreadcrumbInfo.jsx

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 1 tab character but found 0
/>
<Divider className="mb-4" />

{activeTab === '/overview' && (
<div className="row mb-4">
<Title size={2} className="col-lg-12">
Brødsmuler
</Title>
<div className="col-lg col-md-12">
<Paragraph>
Brødsmulene hjelper brukeren å se hvor de befinner seg på
nettstedet. Ved å følge lenkene til tidligere sider/nivåer, vil
brødsmulene fungere som en enkel navigasjon til foregående sider
og innhold.
</Paragraph>
</div>
<div className="component-example col-lg col-md-12 divider-left d-flex flex-column align-items-center">
<Breadcrumb items={mockedItems} />
</div>
<div className="col-lg-12">
<Tabs
activeOnInit={tabCode[0].path}
items={tabCode}
onClick={tabCodeClicked}
/>
<Divider light />
{activeCodeTab === '/react' && (
<CodeSnippet code={codeExample} language="jsx" />
)}
{activeCodeTab === '/html' && (
<CodeSnippet code={codeExampleHtml} language="html" />
)}
</div>
{activeTab === "/overview" && (
<div className="row mb-4">
<Title size={2} className="col-lg-12">
Brødsmuler
</Title>
<div className="col-lg col-md-12">
<Paragraph>
Brødsmulene hjelper brukeren å se hvor de befinner seg på
nettstedet. Ved å følge lenkene til tidligere sider/nivåer, vil
brødsmulene fungere som en enkel navigasjon til foregående sider
og innhold.
</Paragraph>
</div>
<div className="component-example col-lg col-md-12 divider-left d-flex flex-column align-items-center">
<Breadcrumb items={mockedItems} />
</div>
<div className="col-lg-12">
<Tabs
activeOnInit={tabCode[0].path}
items={tabCode}
onClick={tabCodeClicked}
/>
<Divider light />
{activeCodeTab === "/react" && (
<CodeSnippet code={codeExample} language="jsx" />
)}
{activeCodeTab === "/html" && (
<CodeSnippet code={codeExampleHtml} language="html" />
)}
</div>

<Divider light className="mb-4" />
<Divider light className="mb-4" />

<div className="row mb-4">
<Title size={2} className="col-lg-12">
Brødsmuler
</Title>
<div className="col-lg col-md-12">
<Paragraph>
The mobileCompressedView shows a compact breadcrumb on mobile,
displaying the second-to-last item with a left arrow.
</Paragraph>
</div>
<div className="component-example col-lg col-md-12 divider-left d-flex flex-column align-items-center">
<Link href=" " icon={<ArrowLeft size="20" />} standAlone>
breadcrumb 2
</Link>
</div>
<div className="col-lg-12">
<Divider light />
{activeCodeTab === '/react' && (
<CodeSnippet
code={mobileCompressedViewExample}
language="jsx"
/>
)}
</div>
</div>
</div>
)}
<div className="row mb-4">
<Title size={2} className="col-lg-12">
Brødsmuler
</Title>
<div className="col-lg col-md-12">
<Paragraph>
mobileCompressedView viser en kompakt brødsmulevisning på mobil,
der den nest siste elementet vises med en venstre pil.
</Paragraph>
</div>
<div className="component-example col-lg col-md-12 divider-left d-flex flex-column align-items-center">
<Link href=" " icon={<ArrowLeft size="20" />} standAlone>
breadcrumb 2
</Link>
</div>
<div className="col-lg-12">
<Divider light />
{activeCodeTab === "/react" && (
<CodeSnippet
code={mobileCompressedViewExample}
language="jsx"
/>
)}
</div>
</div>
</div>
)}

{activeTab === '/rationale' && (
<div className="row mb-4">
<Title size={3} className="col-lg-12">
Location based breadcrumbs
</Title>
<div className="col-lg col-md-12">
<Paragraph>
We have opted for a location based breadcrumbs as it gives the
user a good overview of where in the website hierarchy they are
currently in, instead of path based breadcrumb which only show the
path that the user have browsed.
</Paragraph>
</div>
{activeTab === "/rationale" && (
<div className="row mb-4">
<Title size={3} className="col-lg-12">
Location based breadcrumbs
</Title>
<div className="col-lg col-md-12">
<Paragraph>
We have opted for a location based breadcrumbs as it gives the
user a good overview of where in the website hierarchy they are
currently in, instead of path based breadcrumb which only show the
path that the user have browsed.
</Paragraph>
</div>

<Title size={3} className="col-lg-12">
Simplistic design
</Title>
<div className="col-lg col-md-12">
<Paragraph>
As breadcrumbs are a secondary navigation, the overall design of
breadcrumbs has been kept at a very simplistic level to avoid it
being too prominent or confused for being a main navigational
element.
</Paragraph>
</div>
</div>
)}
<Title size={3} className="col-lg-12">
Simplistic design
</Title>
<div className="col-lg col-md-12">
<Paragraph>
As breadcrumbs are a secondary navigation, the overall design of
breadcrumbs has been kept at a very simplistic level to avoid it
being too prominent or confused for being a main navigational
element.
</Paragraph>
</div>
</div>
)}

{activeTab === '/props' && (
<div>
<Title size={2} className="mt-4 mb-4">
Props
</Title>
<table className="col-lg-12 mb-4">
<thead style={{ textAlign: 'left' }}>
<tr>
<th>
<Title size={3}>Prop name</Title>
</th>
<th>
<Title size={3}>Type</Title>
</th>
<th>
<Title size={3}>Description</Title>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>className</code>
</td>
<td>string</td>
<td>Optional container class</td>
</tr>
<tr>
<td>
<code>items</code>
</td>
<td>Required array of objects</td>
<td>
A list of objects. Object key <code>text</code> is required,{' '}
<code>link</code> is optional.
</td>
</tr>
<tr>
<td>
<code>mobileCompressedView</code>
</td>
<td>boolean</td>
<td>
A prop that makes the breadcrumb compressed on mobile view
</td>
</tr>
</tbody>
</table>
{activeTab === "/props" && (
<div>
<Title size={2} className="mt-4 mb-4">
Props
</Title>
<table className="col-lg-12 mb-4">
<thead style={{ textAlign: "left" }}>
<tr>
<th>
<Title size={3}>Prop name</Title>
</th>
<th>
<Title size={3}>Type</Title>
</th>
<th>
<Title size={3}>Description</Title>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>className</code>
</td>
<td>string</td>
<td>Optional container class</td>
</tr>
<tr>
<td>
<code>items</code>
</td>
<td>Required array of objects</td>
<td>
A list of objects. Object key <code>text</code> is required,{" "}
<code>link</code> is optional.
</td>
</tr>
<tr>
<td>
<code>mobileCompressedView</code>
</td>
<td>boolean</td>
<td>
A prop that makes the breadcrumb compressed on mobile view
</td>
</tr>
</tbody>
</table>

<Divider className="mb-4" light />
<Divider className="mb-4" light />

<div>
<Text>Depends on</Text>
<ul>
<li>
<Link
href="https://github.com/statisticsnorway/ssb-component-library/tree/master/src/components/Link"
isExternal
>
Link
</Link>
</li>
</ul>
</div>
</div>
)}
</div>
);
<div>
<Text>Depends on</Text>
<ul>
<li>
<Link
href="https://github.com/statisticsnorway/ssb-component-library/tree/master/src/components/Link"
isExternal
>
Link
</Link>
</li>
</ul>
</div>
</div>
)}
</div>
);
};

export default BreadcrumbInfo;

0 comments on commit a96ffbb

Please sign in to comment.