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

MANIFEST.in

@@ -12,6 +12,7 @@ include yarn.lock
 graft jupyter_ui_demo/labextension
 
 # Javascript files
+include packages/components/README.md
 include packages/components/api-extractor.json
 include packages/components/package.json
 include packages/components/jest.config.js
@@ -23,9 +24,12 @@ include packages/components/tsconfig.storybook.json
 graft packages/components/.storybook
 graft packages/components/docs
 graft packages/components/src
+include packages/react-components/README.md
 include packages/react-components/package.json
 include packages/react-components/tsconfig.json
 graft packages/react-components/src
+include packages/lab-example/LICENSE
+include packages/lab-example/README.md
 include packages/lab-example/package.json
 include packages/lab-example/tsconfig.json
 graft packages/lab-example/src

packages/components/docs/components.md

@@ -2,20 +2,8 @@
 
 Here you can find a list of all the components currently available in the toolkit with links to documentation for each component.
 
-| Component       | Doc Link                                                      |
-| --------------- | ------------------------------------------------------------- |
-| `badge`         | [Badge Documentation](../src/badge/README.md)                 |
-| `button`        | [Button Documentation](../src/button/README.md)               |
-| `checkbox`      | [Checkbox Documentation](../src/checkbox/README.md)           |
-| `data-grid`     | [Data Grid Documentation](../src/data-grid/README.md)         |
-| `divider`       | [Divider Documentation](../src/divider/README.md)             |
-| `dropdown`      | [Dropdown Documentation](../src/dropdown/README.md)           |
-| `link`          | [Link Documentation](../src/link/README.md)                   |
-| `option`        | [Option Documentation](../src/option/README.md)               |
-| `panels`        | [Panels Documentation](../src/panels/README.md)               |
-| `progress-ring` | [Progress Ring Documentation](../src/progress-ring/README.md) |
-| `radio`         | [Radio Documentation](../src/radio/README.md)                 |
-| `radio-group`   | [Radio Group Documentation](../src/radio-group/README.md)     |
-| `tag`           | [Tag Documentation](../src/tag/README.md)                     |
-| `text-area`     | [Text Area Documentation](../src/text-area/README.md)         |
-| `text-field`    | [Text Field Documentation](../src/text-field/README.md)       |
+| Component | Doc Link |
+| --------- | -------- |
+|           |          |
+
+<!-- | `button` | [Button Documentation](../src/button/README.md) | -->

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

@@ -3,28 +3,26 @@
 
 import { test, expect } from '@playwright/test';
 
-test.describe('Avatar', () => {
-  test('Default', async ({ page }) => {
-    await page.goto('/iframe.html?id=avatar--default');
+test('Default', async ({ page }) => {
+  await page.goto('/iframe.html?id=avatar--default');
 
-    expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
-      'avatar-default.png'
-    );
-  });
+  expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
+    'avatar-default.png'
+  );
+});
 
-  test('Square', async ({ page }) => {
-    await page.goto('/iframe.html?id=avatar--square');
+test('Square', async ({ page }) => {
+  await page.goto('/iframe.html?id=avatar--square');
 
-    expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
-      'avatar-square.png'
-    );
-  });
+  expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
+    'avatar-square.png'
+  );
+});
 
-  test('With Image', async ({ page }) => {
-    await page.goto('/iframe.html?id=avatar--with-image');
+test('With Image', async ({ page }) => {
+  await page.goto('/iframe.html?id=avatar--with-image');
 
-    expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
-      'avatar-with-image.png'
-    );
-  });
+  expect(await page.locator('jp-avatar').screenshot()).toMatchSnapshot(
+    'avatar-with-image.png'
+  );
 });

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

@@ -3,36 +3,34 @@
 
 import { test, expect } from '@playwright/test';
 
-test.describe('Breadcrumb Item', () => {
-  test('Default', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb-item--default');
-
-    expect(
-      await page.locator('jp-breadcrumb-item').screenshot()
-    ).toMatchSnapshot('breadcrumb-item-default.png');
-  });
-
-  test('Without href', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb-item--without-href');
-
-    expect(
-      await page.locator('jp-breadcrumb-item').screenshot()
-    ).toMatchSnapshot('breadcrumb-item-without-href.png');
-  });
-
-  test('With Start Icon', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb-item--with-start-icon');
-
-    expect(
-      await page.locator('jp-breadcrumb-item').screenshot()
-    ).toMatchSnapshot('breadcrumb-item-with-start-icon.png');
-  });
-
-  test('With End Icon', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb-item--with-end-icon');
-
-    expect(
-      await page.locator('jp-breadcrumb-item').screenshot()
-    ).toMatchSnapshot('breadcrumb-item-with-end-icon.png');
-  });
+test('Default', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb-item--default');
+
+  expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
+    'breadcrumb-item-default.png'
+  );
+});
+
+test('Without href', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb-item--without-href');
+
+  expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
+    'breadcrumb-item-without-href.png'
+  );
+});
+
+test('With Start Icon', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb-item--with-start-icon');
+
+  expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
+    'breadcrumb-item-with-start-icon.png'
+  );
+});
+
+test('With End Icon', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb-item--with-end-icon');
+
+  expect(await page.locator('jp-breadcrumb-item').screenshot()).toMatchSnapshot(
+    'breadcrumb-item-with-end-icon.png'
+  );
 });

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

@@ -3,36 +3,34 @@
 
 import { test, expect } from '@playwright/test';
 
-test.describe('Breadcrumb', () => {
-  test('Default', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb--default');
-
-    expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
-      'breadcrumb-default.png'
-    );
-  });
-
-  test('With Custom Children', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb--with-custom-children');
-
-    expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
-      'breadcrumb-with-custom-children.png'
-    );
-  });
-
-  test('With Start Icon', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb--with-start-icon');
-
-    expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
-      'breadcrumb-with-start-icon.png'
-    );
-  });
-
-  test('With End Icon', async ({ page }) => {
-    await page.goto('/iframe.html?id=breadcrumb--with-end-icon');
-
-    expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
-      'breadcrumb-with-end-icon.png'
-    );
-  });
+test('Default', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb--default');
+
+  expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
+    'breadcrumb-default.png'
+  );
+});
+
+test('With Custom Children', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb--with-custom-children');
+
+  expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
+    'breadcrumb-with-custom-children.png'
+  );
+});
+
+test('With Start Icon', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb--with-start-icon');
+
+  expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
+    'breadcrumb-with-start-icon.png'
+  );
+});
+
+test('With End Icon', async ({ page }) => {
+  await page.goto('/iframe.html?id=breadcrumb--with-end-icon');
+
+  expect(await page.locator('jp-breadcrumb').screenshot()).toMatchSnapshot(
+    'breadcrumb-with-end-icon.png'
+  );
 });

packages/components/src/button/button.stories.ts

@@ -11,7 +11,14 @@ export default {
     appearance: {
       control: {
         type: 'select',
-        options: ['Accent', 'Error', 'Neutral', 'Outline', 'Stealth']
+        options: [
+          'Accent',
+          'Error',
+          'Lightweight',
+          'Neutral',
+          'Outline',
+          'Stealth'
+        ]
       }
     },
     isDisabled: { control: 'boolean' },
@@ -75,6 +82,12 @@ Neutral.args = {
   appearance: 'Neutral'
 };
 
+export const Lightweight: any = Template.bind({});
+Lightweight.args = {
+  ...Default.args,
+  appearance: 'Lightweight'
+};
+
 export const WithAutofocus: any = Template.bind({});
 WithAutofocus.args = {
   ...Default.args,