Skip to content

Commit eb72787

Browse files
fcollonvalfcollonval
authored
Add more components (#7)
* Add _Lightweight_ button appearance * Add slider * Fix manifest * Make test name less redundant * Improve focus stroke width * More manifest fix * Update doc * Update snapshots * Fix name in manifest * Update gallery screenshot * Update gallery example * Update snapshots * Skip partly webkit slider test
1 parent 6c2390d commit eb72787

File tree

59 files changed

+1185
-538
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1185
-538
lines changed

‎MANIFEST.in‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ include yarn.lock
1212
graft jupyter_ui_demo/labextension
1313

1414
# Javascript files
15+
include packages/components/README.md
1516
include packages/components/api-extractor.json
1617
include packages/components/package.json
1718
include packages/components/jest.config.js
@@ -23,9 +24,12 @@ include packages/components/tsconfig.storybook.json
2324
graft packages/components/.storybook
2425
graft packages/components/docs
2526
graft packages/components/src
27+
include packages/react-components/README.md
2628
include packages/react-components/package.json
2729
include packages/react-components/tsconfig.json
2830
graft packages/react-components/src
31+
include packages/lab-example/LICENSE
32+
include packages/lab-example/README.md
2933
include packages/lab-example/package.json
3034
include packages/lab-example/tsconfig.json
3135
graft packages/lab-example/src

‎packages/components/docs/api-report.md‎

Lines changed: 185 additions & 143 deletions
Large diffs are not rendered by default.

‎packages/components/docs/assets/toolkit-artwork.png‎

-327 Bytes
Loading

‎packages/components/docs/components.md‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,8 @@
22

33
Here you can find a list of all the components currently available in the toolkit with links to documentation for each component.
44

5-
| Component | Doc Link |
6-
| --------------- | ------------------------------------------------------------- |
7-
| `badge` | [Badge Documentation](../src/badge/README.md) |
8-
| `button` | [Button Documentation](../src/button/README.md) |
9-
| `checkbox` | [Checkbox Documentation](../src/checkbox/README.md) |
10-
| `data-grid` | [Data Grid Documentation](../src/data-grid/README.md) |
11-
| `divider` | [Divider Documentation](../src/divider/README.md) |
12-
| `dropdown` | [Dropdown Documentation](../src/dropdown/README.md) |
13-
| `link` | [Link Documentation](../src/link/README.md) |
14-
| `option` | [Option Documentation](../src/option/README.md) |
15-
| `panels` | [Panels Documentation](../src/panels/README.md) |
16-
| `progress-ring` | [Progress Ring Documentation](../src/progress-ring/README.md) |
17-
| `radio` | [Radio Documentation](../src/radio/README.md) |
18-
| `radio-group` | [Radio Group Documentation](../src/radio-group/README.md) |
19-
| `tag` | [Tag Documentation](../src/tag/README.md) |
20-
| `text-area` | [Text Area Documentation](../src/text-area/README.md) |
21-
| `text-field` | [Text Field Documentation](../src/text-field/README.md) |
5+
| Component | Doc Link |
6+
| --------- | -------- |
7+
| | |
8+
9+
<!-- | `button` | [Button Documentation](../src/button/README.md) | -->

‎packages/components/src/avatar/avatar.test.ts‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,26 @@
33

44
import { test, expect } from '@playwright/test';
55

6-
test.describe('Avatar', () => {
7-
test('Default', async ({ page }) => {
8-
await page.goto('/iframe.html?id=avatar--default');
6+
test('Default', async ({ page }) => {
7+
await page.goto('/iframe.html?id=avatar--default');
98

10-
expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
11-
'avatar-default.png'
12-
);
13-
});
9+
expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
10+
'avatar-default.png'
11+
);
12+
});
1413

15-
test('Square', async ({ page }) => {
16-
await page.goto('/iframe.html?id=avatar--square');
14+
test('Square', async ({ page }) => {
15+
await page.goto('/iframe.html?id=avatar--square');
1716

18-
expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
19-
'avatar-square.png'
20-
);
21-
});
17+
expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
18+
'avatar-square.png'
19+
);
20+
});
2221

23-
test('With Image', async ({ page }) => {
24-
await page.goto('/iframe.html?id=avatar--with-image');
22+
test('With Image', async ({ page }) => {
23+
await page.goto('/iframe.html?id=avatar--with-image');
2524

26-
expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
27-
'avatar-with-image.png'
28-
);
29-
});
25+
expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
26+
'avatar-with-image.png'
27+
);
3028
});

‎packages/components/src/breadcrumb-item/breadcrumb-item.test.ts‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,34 @@
33

44
import { test, expect } from '@playwright/test';
55

6-
test.describe('Breadcrumb Item', () => {
7-
test('Default', async ({ page }) => {
8-
await page.goto('/iframe.html?id=breadcrumb-item--default');
9-
10-
expect(
11-
await page.locator('jp-breadcrumb-item').screenshot()
12-
).toMatchSnapshot('breadcrumb-item-default.png');
13-
});
14-
15-
test('Without href', async ({ page }) => {
16-
await page.goto('/iframe.html?id=breadcrumb-item--without-href');
17-
18-
expect(
19-
await page.locator('jp-breadcrumb-item').screenshot()
20-
).toMatchSnapshot('breadcrumb-item-without-href.png');
21-
});
22-
23-
test('With Start Icon', async ({ page }) => {
24-
await page.goto('/iframe.html?id=breadcrumb-item--with-start-icon');
25-
26-
expect(
27-
await page.locator('jp-breadcrumb-item').screenshot()
28-
).toMatchSnapshot('breadcrumb-item-with-start-icon.png');
29-
});
30-
31-
test('With End Icon', async ({ page }) => {
32-
await page.goto('/iframe.html?id=breadcrumb-item--with-end-icon');
33-
34-
expect(
35-
await page.locator('jp-breadcrumb-item').screenshot()
36-
).toMatchSnapshot('breadcrumb-item-with-end-icon.png');
37-
});
6+
test('Default', async ({ page }) => {
7+
await page.goto('/iframe.html?id=breadcrumb-item--default');
8+
9+
expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
10+
'breadcrumb-item-default.png'
11+
);
12+
});
13+
14+
test('Without href', async ({ page }) => {
15+
await page.goto('/iframe.html?id=breadcrumb-item--without-href');
16+
17+
expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
18+
'breadcrumb-item-without-href.png'
19+
);
20+
});
21+
22+
test('With Start Icon', async ({ page }) => {
23+
await page.goto('/iframe.html?id=breadcrumb-item--with-start-icon');
24+
25+
expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
26+
'breadcrumb-item-with-start-icon.png'
27+
);
28+
});
29+
30+
test('With End Icon', async ({ page }) => {
31+
await page.goto('/iframe.html?id=breadcrumb-item--with-end-icon');
32+
33+
expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
34+
'breadcrumb-item-with-end-icon.png'
35+
);
3836
});

‎packages/components/src/breadcrumb/breadcrumb.test.ts‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,34 @@
33

44
import { test, expect } from '@playwright/test';
55

6-
test.describe('Breadcrumb', () => {
7-
test('Default', async ({ page }) => {
8-
await page.goto('/iframe.html?id=breadcrumb--default');
9-
10-
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
11-
'breadcrumb-default.png'
12-
);
13-
});
14-
15-
test('With Custom Children', async ({ page }) => {
16-
await page.goto('/iframe.html?id=breadcrumb--with-custom-children');
17-
18-
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
19-
'breadcrumb-with-custom-children.png'
20-
);
21-
});
22-
23-
test('With Start Icon', async ({ page }) => {
24-
await page.goto('/iframe.html?id=breadcrumb--with-start-icon');
25-
26-
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
27-
'breadcrumb-with-start-icon.png'
28-
);
29-
});
30-
31-
test('With End Icon', async ({ page }) => {
32-
await page.goto('/iframe.html?id=breadcrumb--with-end-icon');
33-
34-
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
35-
'breadcrumb-with-end-icon.png'
36-
);
37-
});
6+
test('Default', async ({ page }) => {
7+
await page.goto('/iframe.html?id=breadcrumb--default');
8+
9+
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
10+
'breadcrumb-default.png'
11+
);
12+
});
13+
14+
test('With Custom Children', async ({ page }) => {
15+
await page.goto('/iframe.html?id=breadcrumb--with-custom-children');
16+
17+
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
18+
'breadcrumb-with-custom-children.png'
19+
);
20+
});
21+
22+
test('With Start Icon', async ({ page }) => {
23+
await page.goto('/iframe.html?id=breadcrumb--with-start-icon');
24+
25+
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
26+
'breadcrumb-with-start-icon.png'
27+
);
28+
});
29+
30+
test('With End Icon', async ({ page }) => {
31+
await page.goto('/iframe.html?id=breadcrumb--with-end-icon');
32+
33+
expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
34+
'breadcrumb-with-end-icon.png'
35+
);
3836
});

‎packages/components/src/breadcrumb/breadcrumb.test.ts-snapshots/breadcrumb-with-custom-children-chromium-linux.png‎

-38 Bytes
Loading

‎packages/components/src/breadcrumb/breadcrumb.test.ts-snapshots/breadcrumb-with-custom-children-firefox-linux.png‎

-32 Bytes
Loading

‎packages/components/src/breadcrumb/breadcrumb.test.ts-snapshots/breadcrumb-with-custom-children-webkit-linux.png‎

-77 Bytes
Loading

0 commit comments

Comments
 (0)