-
-
Notifications
You must be signed in to change notification settings - Fork 84
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
234 additions
and
1 deletion.
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
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
Large diffs are not rendered by default.
Oops, something went wrong.
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,26 @@ | ||
| .matter-link { | ||
| --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); | ||
| --matter-helper-safari1: rgba(var(--matter-helper-theme), 0.12); | ||
| border-radius: 4px; | ||
| color: rgb(var(--matter-helper-theme)); | ||
| text-decoration: none; | ||
| transition: background-color 0.2s, box-shadow 0.2s; | ||
| } | ||
|
|
||
| /* Hover */ | ||
| .matter-link:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* Focus */ | ||
| .matter-link:focus { | ||
| background-color: var(--matter-helper-safari1); | ||
| box-shadow: 0 0 0 0.16em var(--matter-helper-safari1); | ||
| outline: none; | ||
| } | ||
|
|
||
| /* Active */ | ||
| .matter-link:active { | ||
| background-color: transparent; | ||
| box-shadow: none; | ||
| } |
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 @@ | ||
| {} |
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,23 @@ | ||
| <link href="./link.css" rel="stylesheet"> | ||
|
|
||
| The purpose of Matter is to provide the most easy-to-use but accurate implementation of <a href="https://material.io/design/guidelines-overview/" class="matter-link">Material Design Components</a>. | ||
|
|
||
| Matter has probably the lowest entry-barrier among Material Design Component libraries. The only technical knowledge needed to use it is basic <a href="https://en.wikipedia.org/wiki/HTML5" class="matter-link">HTML5</a>. It doesn't rely on <a href="https://tc39.github.io" class="matter-link">JavaScript</a>, it only needs one to three HTML elements and a CSS class per component to work. The markup of the components is semantic by design. | ||
|
|
||
| Matter is built with theming in mind. Its components can be customized by specifying certain colors and/or fonts. The granularity of customization is variable: components can be themed on global level, component level, component instance level, or on any level between. | ||
|
|
||
| <br/><br/> | ||
|
|
||
| <a class="matter-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="font-size: large;">Large</a> | ||
|
|
||
| <br/><br/> | ||
|
|
||
| <a class="matter-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">Medium</a> | ||
|
|
||
| <br/><br/> | ||
|
|
||
| <a class="matter-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="font-size: small;">Small</a> | ||
|
|
||
| <br/><br/> | ||
|
|
||
| <a id="xmas" class="matter-link" href="https://english.stackexchange.com/questions/84564/a-case-that-exhibits-all-the-possible-conditions-a-subject-can-suffer-from" style="display: inline-block; width: 80px; font-family: 'Roboto', 'Segoe UI', BlinkMacSystemFont, system-ui, -apple-system; font-size: 16px;">Xmas Tree</a> |
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,149 @@ | ||
| import { setUp, tearDown } from '../../../test/helpers/fixture.js'; | ||
| import { capture3x } from '../../../test/helpers/capture.js'; | ||
| import { isBrowser, isBrowserNot } from '../../../test/helpers/browser.js'; | ||
|
|
||
| const SPACING = 4; | ||
|
|
||
| // transparent | ||
| const tp = { a: 0 }; | ||
|
|
||
| describe('Link', () => { | ||
|
|
||
| [ | ||
| { | ||
| label: 'normal', | ||
| states: {}, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: tp | ||
| }, | ||
| { | ||
| label: 'hover', | ||
| states: { | ||
| '#xmas.matter-link': [ 'hover' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: tp, | ||
| underline: true | ||
| }, | ||
| { | ||
| label: 'focus', | ||
| states: { | ||
| '#xmas.matter-link': [ 'focus' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: { r: [17, 41], g: [136, 162], b: [237, 255], a: [28, 34] } | ||
| }, | ||
| { | ||
| label: 'active', | ||
| states: { | ||
| '#xmas.matter-link': [ 'active' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: tp, | ||
| }, | ||
| { | ||
| label: 'hover & focus', | ||
| states: { | ||
| '#xmas.matter-link': [ 'hover', 'focus' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: { r: [17, 41], g: [136, 162], b: [237, 255], a: [28, 34] }, | ||
| underline: true | ||
| }, | ||
| { | ||
| label: 'hover & active', | ||
| states: { | ||
| '#xmas.matter-link': [ 'hover', 'active' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: tp, | ||
| underline: true | ||
| }, | ||
| { | ||
| label: 'focus & active', | ||
| states: { | ||
| '#xmas.matter-link': [ 'focus', 'active' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: tp | ||
| }, | ||
| { | ||
| label: 'hover, focus & active', | ||
| states: { | ||
| '#xmas.matter-link': [ 'hover', 'focus', 'active' ] | ||
| }, | ||
| textColor: { r: 33, g: 150, b: 243, a: 255 }, | ||
| bodyColor: tp, | ||
| underline: true | ||
| }, | ||
| { | ||
| label: 'customized', | ||
| states: { | ||
| '#xmas.matter-link': { | ||
| style: '--matter-primary-rgb: 255, 0, 0;display: inline-block; width: 80px; font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system; font-size: 16px;' | ||
| } | ||
| }, | ||
| textColor: { r: 255, g: 0, b: 0, a: 255 }, | ||
| bodyColor: tp | ||
| }, | ||
| { | ||
| label: 'customized & focus', | ||
| states: { | ||
| '#xmas.matter-link': { | ||
| style: '--matter-primary-rgb: 255, 0, 0;display: inline-block; width: 80px; font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system; font-size: 16px;', | ||
| focus: '' | ||
| } | ||
| }, | ||
| textColor: { r: 255, g: 0, b: 0, a: 255 }, | ||
| bodyColor: { r: [254, 255], g: 0, b: 0, a: [28, 34] }, | ||
| } | ||
| ].forEach((suite) => { | ||
|
|
||
| describe(`in ${suite.label} state`, () => { | ||
|
|
||
| let style; | ||
| let link; | ||
| let width; | ||
| let height; | ||
| let context; | ||
|
|
||
| beforeAll(async () => { | ||
| style = setUp('src/components/links/link', suite.states); | ||
|
|
||
| link = document.querySelector('#xmas'); | ||
| const rect = link.getBoundingClientRect(); | ||
| width = rect.width; | ||
| height = rect.height; | ||
| context = await capture3x(link, style, SPACING); | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| tearDown(); | ||
| }); | ||
|
|
||
| it(`should have dominant ${JSON.stringify(suite.bodyColor).replace(/"/g, '')} color`, () => { | ||
| const component = context.getImageData3x(-4, -4, width + 8, height + 8); | ||
|
|
||
| expect(component).toResembleColor(suite.bodyColor); | ||
| }); | ||
|
|
||
| it('should have caption text', () => { | ||
| const caption = context.getImageData3x(0, 1, width, 15); | ||
|
|
||
| expect(link.innerText).toBe('Xmas Tree'); | ||
| expect(caption).toResembleText('Xmas Tree', suite.textColor, suite.bodyColor); | ||
| }); | ||
|
|
||
| it(`should${suite.underline ? '' : ' not'} have underline`, () => { | ||
| const underline = context.getImageData3x(0, 16, width, 1); | ||
| const underlineFF = context.getImageData3x(0, 18, width, 1); | ||
|
|
||
| isBrowserNot('Firefox') && expect(underline).toResembleColor(suite.underline ? suite.textColor : suite.bodyColor); | ||
| isBrowser('Firefox') && expect(underlineFF).toResembleColor(suite.underline ? suite.textColor : suite.bodyColor); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); |