-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
1 parent
419341f
commit 0b25bb1
Showing
2 changed files
with
125 additions
and
103 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,120 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" dir="ltr" theme="ionic"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>Typography - Display Tokens</title> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" | ||
| /> | ||
| <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" /> | ||
| <!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved --> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" /> | ||
| <script src="../../../../../scripts/testing/scripts.js"></script> | ||
| <script nomodule src="../../../../../dist/ionic/ionic.js"></script> | ||
| <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <style> | ||
| ion-title { | ||
| margin: 10px 0; | ||
| } | ||
| </style> | ||
|
|
||
| <ion-app> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>Typography - Display Tokens</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content class="ionic-padding-space-400"> | ||
| <div> | ||
| <ion-title>Display</ion-title> | ||
| <ion-title>lg</ion-title> | ||
| <p><ion-text class="ionic-display-lg-regular">display-lg-regular</ion-text></p> | ||
| <p><ion-text class="ionic-display-lg-light">display-lg-light</ion-text></p> | ||
| <ion-title>sm</ion-title> | ||
| <p><ion-text class="ionic-display-sm-regular">display-sm-regular</ion-text></p> | ||
| <p><ion-text class="ionic-display-sm-light">display-sm-light</ion-text></p> | ||
| </div> | ||
| <br /> | ||
| <div> | ||
| <ion-title>Headings</ion-title> | ||
| <ion-title>h1</ion-title> | ||
| <p><ion-text class="ionic-heading-h1-regular">heading-h1-regular</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h1-medium">heading-h1-medium</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h1-semi-bold">heading-h1-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h1-bold">heading-h1-bold</ion-text></p> | ||
| <ion-title>h2</ion-title> | ||
| <p><ion-text class="ionic-heading-h2-regular">heading-h2-regular</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h2-medium">heading-h2-medium</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h2-semi-bold">heading-h2-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h2-bold">heading-h2-bold</ion-text></p> | ||
| <ion-title>h3</ion-title> | ||
| <p><ion-text class="ionic-heading-h3-regular">heading-h3-regular</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h3-medium">heading-h3-medium</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h3-semi-bold">heading-h3-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h3-bold">heading-h3-bold</ion-text></p> | ||
| <ion-title>h4</ion-title> | ||
| <p><ion-text class="ionic-heading-h4-regular">heading-h4-regular</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h4-medium">heading-h4-medium</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h4-semi-bold">heading-h4-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h4-bold">heading-h4-bold</ion-text></p> | ||
| <ion-title>h5</ion-title> | ||
| <p><ion-text class="ionic-heading-h5-regular">heading-h5-regular</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h5-medium">heading-h5-medium</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h5-semi-bold">heading-h5-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h5-bold">heading-h5-bold</ion-text></p> | ||
| <ion-title>h6</ion-title> | ||
| <p><ion-text class="ionic-heading-h6-regular">heading-h6-regular</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h6-medium">heading-h6-medium</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h6-semi-bold">heading-h6-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-heading-h6-bold">heading-h6-bold</ion-text></p> | ||
| </div> | ||
| <br /> | ||
| <div> | ||
| <ion-title>Body</ion-title> | ||
| <ion-title>sm</ion-title> | ||
| <p><ion-text class="ionic-body-sm-regular">ionic-body-sm-regular</ion-text></p> | ||
| <p><ion-text class="ionic-body-sm-medium">ionic-body-sm-medium</ion-text></p> | ||
| <p><ion-text class="ionic-body-sm-semi-bold">ionic-body-sm-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-body-sm-bold">ionic-body-sm-bold</ion-text></p> | ||
| <p><ion-text class="ionic-body-sm-link">ionic-body-sm-link</ion-text></p> | ||
| <p><ion-text class="ionic-body-sm-italic">ionic-body-sm-italic</ion-text></p> | ||
| <ion-title>md</ion-title> | ||
| <p><ion-text class="ionic-body-md-regular">ionic-body-md-regular</ion-text></p> | ||
| <p><ion-text class="ionic-body-md-medium">ionic-body-md-medium</ion-text></p> | ||
| <p><ion-text class="ionic-body-md-semi-bold">ionic-body-md-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-body-md-bold">ionic-body-md-bold</ion-text></p> | ||
| <p><ion-text class="ionic-body-md-link">ionic-body-md-link</ion-text></p> | ||
| <p><ion-text class="ionic-body-md-italic">ionic-body-md-italic</ion-text></p> | ||
| <ion-title>lg</ion-title> | ||
| <p><ion-text class="ionic-body-lg-regular">ionic-body-lg-regular</ion-text></p> | ||
| <p><ion-text class="ionic-body-lg-medium">ionic-body-lg-medium</ion-text></p> | ||
| <p><ion-text class="ionic-body-lg-semi-bold">ionic-body-lg-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-body-lg-bold">ionic-body-lg-bold</ion-text></p> | ||
| <p><ion-text class="ionic-body-lg-link">ionic-body-lg-link</ion-text></p> | ||
| <p><ion-text class="ionic-body-lg-italic">ionic-body-lg-italic</ion-text></p> | ||
| </div> | ||
| <br /> | ||
| <div> | ||
| <ion-title>Action</ion-title> | ||
| <p><ion-text class="ionic-action-sm">ionic-action-sm</ion-text></p> | ||
| <p><ion-text class="ionic-action-md">ionic-action-md</ion-text></p> | ||
| <p><ion-text class="ionic-action-lg">ionic-action-lg</ion-text></p> | ||
| <p><ion-text class="ionic-action-xl">ionic-action-xl</ion-text></p> | ||
| </div> | ||
| <br /> | ||
| <div> | ||
| <ion-title>Overline</ion-title> | ||
| <p><ion-text class="ionic-overline-regular">ionic-overline-regular</ion-text></p> | ||
| <p><ion-text class="ionic-overline-medium">ionic-overline-medium</ion-text></p> | ||
| <p><ion-text class="ionic-overline-semi-bold">ionic-overline-semi-bold</ion-text></p> | ||
| <p><ion-text class="ionic-overline-bold">ionic-overline-bold</ion-text></p> | ||
| </div> | ||
| </ion-content> | ||
| </ion-app> | ||
| </body> | ||
| </html> |
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,112 +1,14 @@ | ||
| import { expect } from '@playwright/test'; | ||
| import { configs, test } from '@utils/test/playwright'; | ||
|
|
||
| /** | ||
| * Typography styles are only available in the Ionic theme | ||
| */ | ||
| configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { | ||
| test.describe(title('typography: global styles'), () => { | ||
| test('should apply the globals styles for each semantic tag', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <link href="/css/ionic/typography.ionic.css" rel="stylesheet" /> | ||
| <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" /> | ||
| <div> | ||
| <h1>H1: The quick brown fox jumps over the lazy dog</h1> | ||
| <h2>H2: The quick brown fox jumps over the lazy dog</h2> | ||
| <h3>H3: The quick brown fox jumps over the lazy dog</h3> | ||
| <h4>H4: The quick brown fox jumps over the lazy dog</h4> | ||
| <h5>H5: The quick brown fox jumps over the lazy dog</h5> | ||
| <h6>H6: The quick brown fox jumps over the lazy dog</h6> | ||
| <p><ion-text class="ionic-font-size-400"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p> | ||
| <p><ion-text class="ionic-font-size-350">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p> | ||
| <p><ion-text class="ionic-font-size-300"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p> | ||
| </div> | ||
| `, | ||
| config | ||
| ); | ||
| test.describe(title('Typography: basic'), () => { | ||
| test('should not have visual regressions', async ({ page }) => { | ||
| await page.goto(`/src/css/test/typography/basic`, config); | ||
|
|
||
| const div = page.locator('div'); | ||
| await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`)); | ||
| }); | ||
|
|
||
| test('should apply the utility classes for each heading', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <link href="/css/ionic/typography.ionic.css" rel="stylesheet" /> | ||
| <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" /> | ||
| <div> | ||
| <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1> | ||
| <h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2> | ||
| <h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3> | ||
| <h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4> | ||
| <h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5> | ||
| <h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6> | ||
| </div> | ||
| `, | ||
| config | ||
| ); | ||
|
|
||
| const div = page.locator('div'); | ||
| await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`)); | ||
| }); | ||
|
|
||
| test('should apply the heading classes on ion-text element', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <link href="/css/ionic/typography.ionic.css" rel="stylesheet" /> | ||
| <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" /> | ||
| <div> | ||
| <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p> | ||
| <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p> | ||
| <p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p> | ||
| <p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p> | ||
| <p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p> | ||
| <p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p> | ||
| </div> | ||
| `, | ||
| config | ||
| ); | ||
|
|
||
| const div = page.locator('div'); | ||
| await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`)); | ||
| }); | ||
|
|
||
| test('should apply the utility classes for font weights', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <link href="/css/ionic/typography.ionic.css" rel="stylesheet" /> | ||
| <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" /> | ||
| <div> | ||
| <p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p> | ||
| <p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p> | ||
| <p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p> | ||
| <p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p> | ||
| <p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p> | ||
| </div> | ||
| `, | ||
| config | ||
| ); | ||
|
|
||
| const div = page.locator('div'); | ||
| await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`)); | ||
| }); | ||
|
|
||
| test('should apply the utility classes for font display', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <link href="/css/ionic/typography.ionic.css" rel="stylesheet" /> | ||
| <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" /> | ||
| <div> | ||
| <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p> | ||
| <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p> | ||
| </div> | ||
| `, | ||
| config | ||
| ); | ||
| await page.setIonViewport(); | ||
|
|
||
| const div = page.locator('div'); | ||
| await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`)); | ||
| await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`)); | ||
| }); | ||
| }); | ||
| }); |