-
Notifications
You must be signed in to change notification settings - Fork 535
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Hidden: rename prop
on
-> when
and reformat stories and add e2e t…
…ests (#2985) * Hidden: rename -> and reformat stories and add e2e tests * Update generated/components.json * update tests and story * Update generated/components.json * test(vrt): update snapshots * add changeset --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
- Loading branch information
1 parent
c8ab99f
commit 38ac17a
Showing
44 changed files
with
162 additions
and
81 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,5 @@ | ||
--- | ||
'@primer/react': minor | ||
--- | ||
|
||
Hidden: rename prop 'on' -> 'when' |
Binary file added
BIN
+20.8 KB
...onents/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.7 KB
...components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-dimmed-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.5 KB
...nts/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.8 KB
...pshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.8 KB
...onents/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.6 KB
...nents/Hidden.test.ts-snapshots/Hidden-Default-medium-light-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.5 KB
...ts/Hidden.test.ts-snapshots/Hidden-Default-medium-light-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.6 KB
...shots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.6 KB
...nents/Hidden.test.ts-snapshots/Hidden-Default-medium-light-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.4 KB
...onents/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.5 KB
...components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-dimmed-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.3 KB
...nts/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.4 KB
...pshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.4 KB
...onents/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.2 KB
...nents/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.2 KB
...ts/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.2 KB
...shots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+13.2 KB
...nents/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.6 KB
...mponents/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.6 KB
...s/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-dimmed-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.4 KB
...nents/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.6 KB
...napshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.6 KB
...mponents/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-tritanopia-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.4 KB
...ponents/Hidden.test.ts-snapshots/Hidden-Default-wide-light-colorblind-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.3 KB
...ents/Hidden.test.ts-snapshots/Hidden-Default-wide-light-high-contrast-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.4 KB
...apshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-linux.png
Oops, something went wrong.
Binary file added
BIN
+21.4 KB
...ponents/Hidden.test.ts-snapshots/Hidden-Default-wide-light-tritanopia-linux.png
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
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,50 @@ | ||
import {test, expect} from '@playwright/test' | ||
import {visit} from '../test-helpers/storybook' | ||
import {themes} from '../test-helpers/themes' | ||
import {viewports} from '../test-helpers/viewports' | ||
|
||
test.describe('Hidden', () => { | ||
test.describe('Default', () => { | ||
for (const theme of themes) { | ||
test.describe(theme, () => { | ||
test('default @vrt', async ({page}) => { | ||
await visit(page, { | ||
id: 'drafts-components-hidden--default', | ||
globals: { | ||
colorScheme: theme, | ||
}, | ||
}) | ||
|
||
// Regular size viewport | ||
await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 768}) | ||
await page | ||
.getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:') | ||
.waitFor() | ||
expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.medium.${theme}.png`) | ||
// Wide size viewport | ||
await page.setViewportSize({width: viewports['primer.breakpoint.lg'], height: 768}) | ||
await page | ||
.getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:') | ||
.waitFor() | ||
expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.wide.${theme}.png`) | ||
// Narrow size viewport | ||
await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768}) | ||
await page | ||
.getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:') | ||
.waitFor() | ||
expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.narrow.${theme}.png`) | ||
}) | ||
|
||
test('axe @aat', async ({page}) => { | ||
await visit(page, { | ||
id: 'drafts-components-hidden--default', | ||
globals: { | ||
colorScheme: theme, | ||
}, | ||
}) | ||
await expect(page).toHaveNoViolations() | ||
}) | ||
}) | ||
} | ||
}) | ||
}) |
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
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,29 @@ | ||
import {ComponentMeta} from '@storybook/react' | ||
import React from 'react' | ||
import {Hidden} from './Hidden' | ||
import {Box, Button} from '..' | ||
|
||
export default { | ||
title: 'Drafts/Components/Hidden/Features', | ||
component: Hidden, | ||
} as ComponentMeta<typeof Hidden> | ||
|
||
export const HideContent = () => ( | ||
<Box> | ||
<Hidden when="narrow"> This value is shown in regular and wide viewports</Hidden> | ||
<Hidden when="regular"> This value is shown in narrow and wide viewports</Hidden> | ||
<Hidden when="wide"> This value is shown in narrow and regular viewports</Hidden> | ||
</Box> | ||
) | ||
|
||
export const RenderContentResponsively = () => ( | ||
<Box> | ||
<Hidden when="narrow"> | ||
<Button variant="primary">I am visible when the viewport is regular or wide viewport</Button> | ||
</Hidden> | ||
|
||
<Hidden when={['regular', 'wide']}> | ||
<Button variant="primary">I am visible when the viewport is narrow</Button> | ||
</Hidden> | ||
</Box> | ||
) |
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
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 was deleted.
Oops, something went wrong.
Oops, something went wrong.