-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add PixNavigationButton and PixNavigationSeparator
- Loading branch information
Showing
13 changed files
with
234 additions
and
31 deletions.
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,39 @@ | ||
| {{#if @route}} | ||
| <LinkTo | ||
| @route={{@route}} | ||
| @models={{if @model (array @model) this.defaultModel}} | ||
| @query={{if @query @query this.defaultParams}} | ||
| class="pix-navigation-button" | ||
| target={{if this.isLinkOpenInANewWindow "_blank"}} | ||
| ...attributes | ||
| > | ||
| {{#if @icon}} | ||
| <PixIcon | ||
| class="pix-navigation-button__icon" | ||
| @ariaHidden={{true}} | ||
| @name={{@icon}} | ||
| @plainIcon={{@iconPlain}} | ||
| /> | ||
| {{/if}} | ||
| {{yield}} | ||
| {{#if this.isLinkOpenInANewWindow}} | ||
| <PixIcon class="pix-navigation-button__external-icon" @ariaHidden={{true}} @name="openNew" /> | ||
| {{/if}} | ||
| </LinkTo> | ||
| {{else}} | ||
| {{! template-lint-disable link-href-attributes }} | ||
| <a class="pix-navigation-button" target={{if this.isLinkOpenInANewWindow "_blank"}} ...attributes> | ||
| {{#if @icon}} | ||
| <PixIcon | ||
| class="pix-navigation-button__icon" | ||
| @ariaHidden={{true}} | ||
| @name={{@icon}} | ||
| @plainIcon={{@iconPlain}} | ||
| /> | ||
| {{/if}} | ||
| {{yield}} | ||
| {{#if this.isLinkOpenInANewWindow}} | ||
| <PixIcon class="pix-navigation-button__external-icon" @ariaHidden={{true}} @name="openNew" /> | ||
| {{/if}} | ||
| </a> | ||
| {{/if}} |
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,10 @@ | ||
| import Component from '@glimmer/component'; | ||
|
|
||
| export default class PixNavigationButton extends Component { | ||
| defaultParams = {}; | ||
| defaultModel = []; | ||
|
|
||
| get isLinkOpenInANewWindow() { | ||
| return this.args?.target === '_blank'; | ||
| } | ||
| } |
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 @@ | ||
| <hr class="pix-navigation-separator" /> |
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,59 @@ | ||
| .pix-navigation-button { | ||
| @extend %pix-body-s; | ||
|
|
||
| position: relative; | ||
| display: flex; | ||
| gap: var(--pix-spacing-2x); | ||
| align-items: center; | ||
| width: max-content; | ||
| width: 100%; | ||
| padding: var(--pix-spacing-2x) var(--pix-spacing-3x); | ||
| font-weight: 400; | ||
| // stylelint-disable-next-line custom-property-pattern | ||
| font-family: var(--_pix-font-family-title); | ||
|
|
||
| &:focus::before, | ||
| &:focus-visible::before, | ||
| &.active::before, | ||
| &:hover::before { | ||
| position: absolute; | ||
| top:0; | ||
| left: 0; | ||
| z-index: -1; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: currentcolor; | ||
| border-radius: var(--pix-spacing-2x); | ||
| content: ''; | ||
| } | ||
|
|
||
| &:hover::before { | ||
| opacity: .3; | ||
| } | ||
|
|
||
| &:focus, &:focus-visible { | ||
| border-radius: var(--pix-spacing-2x); | ||
| outline: 1px solid currentcolor ; | ||
|
|
||
| &::before{ | ||
| opacity: .3; | ||
| } | ||
| } | ||
|
|
||
| &:active::before { | ||
| opacity: .5; | ||
| } | ||
|
|
||
| &.active::before { | ||
| opacity: .2; | ||
| } | ||
|
|
||
| &.active { | ||
| font-weight: var(--pix-font-bold); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .pix-navigation-button__external-icon { | ||
| width: 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .pix-navigation-separator { | ||
| @extend %pix-body-l; | ||
|
|
||
| height: 1.25rem; | ||
| margin: 0; | ||
| color: inherit; | ||
| line-height: 1.25rem; | ||
| border: none; | ||
|
|
||
| &::after { | ||
| font-weight: var(--pix-font-medium); | ||
| content: '–'; | ||
| } | ||
| } |
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
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
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 @@ | ||
| export { default } from '@1024pix/pix-ui/components/pix-navigation-button'; |
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 @@ | ||
| export { default } from '@1024pix/pix-ui/components/pix-navigation-separator'; |
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
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
Binary file not shown.
84 changes: 84 additions & 0 deletions
84
tests/integration/components/pix-navigation-button-test.js
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,84 @@ | ||
| import { module, test } from 'qunit'; | ||
| import { setupRenderingTest } from 'ember-qunit'; | ||
| import { render, within } from '@1024pix/ember-testing-library'; | ||
| import { hbs } from 'ember-cli-htmlbars'; | ||
|
|
||
| module('Integration | Component | pix-navigation-button', function (hooks) { | ||
| setupRenderingTest(hooks); | ||
| hooks.beforeEach(function () { | ||
| this.owner.setupRouter(); | ||
| }); | ||
| test('it renders an HTML link', async function (assert) { | ||
| // when | ||
| const screen = await render( | ||
| hbs`<PixNavigationButton href='https://pix.fr'>content</PixNavigationButton>`, | ||
| ); | ||
|
|
||
| // then | ||
| const link = screen.getByRole('link', { name: 'content' }); | ||
| assert.strictEqual(link.getAttribute('href'), 'https://pix.fr'); | ||
| }); | ||
|
|
||
| test('it renders an icon for an HTML link ', async function (assert) { | ||
| // when | ||
| const screen = await render( | ||
| hbs`<PixNavigationButton | ||
| href='https://pix.fr' | ||
| title='pix.fr' | ||
| @target='_blank' | ||
| >content</PixNavigationButton>`, | ||
| ); | ||
|
|
||
| // then | ||
| const link = screen.getByRole('link', { name: 'content' }); | ||
| assert.ok(within(link).getByRole('img', { hidden: true })); | ||
| }); | ||
|
|
||
| test('it renders an EmberJS link', async function (assert) { | ||
| // when | ||
| const screen = await render( | ||
| hbs`<PixNavigationButton @route='hello'>content</PixNavigationButton>`, | ||
| ); | ||
|
|
||
| // then | ||
| const link = screen.getByRole('link', { name: 'content' }); | ||
| assert.strictEqual(link.getAttribute('href'), '/hello-world'); | ||
| }); | ||
|
|
||
| test('it renders an EmberJS link with model', async function (assert) { | ||
| // when | ||
| const screen = await render( | ||
| hbs`<PixNavigationButton @route='bye' @model='bye'>content</PixNavigationButton>`, | ||
| ); | ||
|
|
||
| // then | ||
| const link = screen.getByRole('link', { name: 'content' }); | ||
| assert.strictEqual(link.getAttribute('href'), '/bye/bye'); | ||
| }); | ||
|
|
||
| test('it renders an EmberJS link with model and query params', async function (assert) { | ||
| // when | ||
| const screen = await render( | ||
| hbs`<PixNavigationButton | ||
| @route='bye' | ||
| @model='bye' | ||
| @query={{hash page=3 per_page=20}} | ||
| >content</PixNavigationButton>`, | ||
| ); | ||
|
|
||
| // then | ||
| const link = screen.getByRole('link', { name: 'content' }); | ||
| assert.strictEqual(link.getAttribute('href'), '/bye/bye?page=3&per_page=20'); | ||
| }); | ||
|
|
||
| test('it renders an icon', async function (assert) { | ||
| // when | ||
| const screen = await render( | ||
| hbs`<PixNavigationButton @route='hello' @icon='coversionPath'>content</PixNavigationButton>`, | ||
| ); | ||
|
|
||
| // then | ||
| const link = screen.getByRole('link', { name: 'content' }); | ||
| assert.ok(within(link).getByRole('img', { hidden: true })); | ||
| }); | ||
| }); |