Component: @phase2/outline-core-breadcrumb
#429
There are no files selected for viewing
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,62 @@ | ||
| // Morgan commented out the code below because it was causing an error in the build process and it is not being used in the project | ||
|
|
||
| // import type { IconLibrary } from '../library'; | ||
|
|
||
| // | ||
| // System icons are a separate library to ensure they're always available, regardless of how the default icon library is | ||
| // configured or if its icons resolve properly. | ||
| // | ||
| // All Outline components must use the system library instead of the default library. For visual consistency, system | ||
| // icons are a subset of Bootstrap Icons. | ||
| // | ||
| // const icons = { | ||
| // 'check-lg': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16"> | ||
| // <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path> | ||
| // </svg> | ||
| // `, | ||
| // 'chevron-down': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"> | ||
| // <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/> | ||
| // </svg> | ||
| // `, | ||
| // 'chevron-left': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16"> | ||
| // <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> | ||
| // </svg> | ||
| // `, | ||
| // 'chevron-right': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"> | ||
| // <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> | ||
| // </svg> | ||
| // `, | ||
| // 'chevron-up': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"> | ||
| // <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/> | ||
| // </svg> | ||
| // `, | ||
| // 'x': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"> | ||
| // <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> | ||
| // </svg> | ||
| // `, | ||
| // 'x-circle-fill': ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"> | ||
| // <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path> | ||
| // </svg> | ||
| // `, | ||
| // 'home': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>`, | ||
| // 'back': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M459.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4L288 214.3V256v41.7L459.5 440.6zM256 352V256 128 96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160C4.2 237.5 0 246.5 0 256s4.2 18.5 11.5 24.6l192 160c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V352z"/></svg>`, | ||
| // }; | ||
|
|
||
| // const systemLibrary: IconLibrary = { | ||
| // name: 'system', | ||
| // resolver: (name: keyof typeof icons) => { | ||
| // if (name in icons) { | ||
| // return `data:image/svg+xml,${encodeURIComponent(icons[name])}`; | ||
| // } | ||
| // return ''; | ||
| // }, | ||
| // }; | ||
|
|
||
| // export default systemLibrary; |
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 { html } from 'lit'; | ||
| import { Meta, Canvas, Story } from '@storybook/addon-docs'; | ||
|
|
||
| import { OutlineCoreBreadcrumb } from '../src/outline-core-breadcrumb'; | ||
|
|
||
| <Meta | ||
| title="Navigation/ Core Breadcrumb" | ||
| component="outline-core-breadcrumb" | ||
| parameters={{ | ||
| viewMode: 'docs', | ||
| previewTabs: { | ||
| canvas: { | ||
| hidden: true, | ||
| }, | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
|
|
||
| <outline-core-breadcrumb> | ||
| <nav aria-label="Breadcrumb"> | ||
| <ul> | ||
| <li> | ||
| <a href="#">Home</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">About Us</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Our History</a> | ||
| </li> | ||
| <li aria-current="page"> | ||
| The current page title | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </outline-core-breadcrumb> |
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,71 @@ | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
|
|
||
| margin: 0.5rem; | ||
|
|
||
| padding: 0.5rem; | ||
|
|
||
| display: flex; | ||
|
|
||
| flex-direction: row; | ||
|
|
||
| flex-wrap: wrap; | ||
|
|
||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| li { | ||
| list-style: none; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| position: relative; | ||
| padding: 0.5rem; | ||
|
|
||
| margin: 0.5rem; | ||
| } | ||
|
|
||
| /** | ||
| * Using width,height,background,transform for breadcrumb separator because | ||
| * content: "/"; was getting read by screen readers. | ||
| */ | ||
| li:not(:first-of-type)::before { | ||
| content: ''; | ||
| display: flex; | ||
| margin-right: 0.5rem; | ||
| height: 1em; | ||
| width: 1px; | ||
| background: currentColor; | ||
| transform: rotate(23deg); | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| display: inline-flex; | ||
| align-items: center; | ||
|
|
||
| padding: 0.5rem; | ||
| margin: 0.5rem; | ||
|
|
||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| &:focus, | ||
| &:focus-visible { | ||
| outline: solid 3px blue; | ||
| border-radius: var(--border-radius-button-default); | ||
| outline-offset: var(--spacing-px); | ||
|
|
||
| } | ||
| } | ||
|
|
||
| .separator { | ||
| margin-left: 0.5rem; | ||
| } | ||
|
|
||
| .previous-link { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } |
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,71 @@ | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
|
|
||
| margin: 10px; | ||
|
|
||
| padding: 10px; | ||
|
|
||
| display: flex; | ||
|
|
||
| flex-direction: row; | ||
|
|
||
| flex-wrap: wrap; | ||
|
|
||
| gap: 10px; | ||
| } | ||
|
|
||
| li { | ||
| list-style: none; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| position: relative; | ||
| padding: 10px; | ||
|
|
||
| margin: 10px; | ||
| } | ||
|
|
||
| /** | ||
| * Using width,height,background,transform for breadcrumb separator because | ||
| * content: "/"; was getting read by screen readers. | ||
| */ | ||
| li:not(:first-of-type)::before { | ||
| content: ''; | ||
| display: flex; | ||
| margin-right: 10px; | ||
| height: 1em; | ||
| width: 1px; | ||
| background: currentColor; | ||
| transform: rotate(23deg); | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| display: inline-flex; | ||
| align-items: center; | ||
|
|
||
| padding: 10px; | ||
| margin: 10px; | ||
|
|
||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| &:focus, | ||
| &:focus-visible { | ||
| outline: solid 3px blue; | ||
| border-radius: var(--border-radius-button-default); | ||
| outline-offset: var(--spacing-px); | ||
|
|
||
| } | ||
| } | ||
|
|
||
| .separator { | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .previous-link { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
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.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The styling for links (
aelements) includes focus and hover states, which are crucial for accessibility and user experience. The use ofoutlineon focus andtext-decorationon hover follows best practices for indicating interactive elements. However, the choice ofbluefor the outline color might not meet contrast requirements against all backgrounds. Consider using a color that passes WCAG contrast ratio guidelines.Ensure
--outline-focus-coloris defined in a global stylesheet or within this component's styles to meet accessibility contrast requirements.Committable suggestion