Add dialog component (#69)

* Add dialog component

* Add to intro

* Skip dialog test

Author: fcollonval

packages/components/docs/Introduction.mdx

@@ -21,6 +21,7 @@ Here is the list of components part of the Jupyter UI toolkit:
 | `combobox`        | [Combobox element](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)                         | [Stories](?path=/story/components-combobox--documentation)        |
 | `data-grid`       | [Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)                                 | [Stories](?path=/story/components-data-grid--documentation)       |
 | `date-field`      | [Date input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)     | [Stories](?path=/story/components-date-field--documentation)      |
+| `dialog`          | [Dialog (Modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)               | [Stories](?path=/story/components-dialog--documentation)          |
 | `divider`         | [Horizontal or vertical rule](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)    | [Stories](?path=/story/components-divider--documentation)         |
 | `listbox`         | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)                                   | [Stories](?path=/story/components-listbox--documentation)         |
 | `menu`            | [Menu](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)                                      | [Stories](?path=/story/components-menu--documentation)            |

packages/components/src/custom-elements.ts

@@ -16,6 +16,7 @@ import { jpCheckbox } from './checkbox/index';
 import { jpCombobox } from './combobox/index';
 import { jpDataGrid, jpDataGridCell, jpDataGridRow } from './data-grid/index';
 import { jpDateField } from './date-field/index';
+import { jpDialog } from './dialog/index';
 import { jpDivider } from './divider/index';
 import { jpListbox } from './listbox/index';
 import { jpMenu } from './menu/index';
@@ -58,6 +59,7 @@ import type { Checkbox } from './checkbox/index';
 import type { Combobox } from './combobox/index';
 import type { DataGrid, DataGridCell, DataGridRow } from './data-grid/index';
 import type { DateField } from './date-field/index';
+import type { Dialog } from './dialog/index';
 import type { Divider } from './divider/index';
 import type { ListboxElement } from './listbox/index';
 import type { Menu } from './menu/index';
@@ -101,6 +103,7 @@ export {
   jpDataGridCell,
   jpDataGridRow,
   jpDateField,
+  jpDialog,
   jpDivider,
   jpListbox,
   jpMenu,
@@ -151,6 +154,7 @@ export const allComponents = {
   jpDataGridCell,
   jpDataGridRow,
   jpDateField,
+  jpDialog,
   jpDivider,
   jpListbox,
   jpMenu,

packages/components/src/dialog/dialog.stories.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import type { StoryFn, Meta, StoryObj } from '@storybook/html';
+import { setTheme } from '../utilities/storybook';
+
+export default {
+  title: 'Components/Dialog',
+  argTypes: {
+    trapFocus: { control: 'boolean' }
+  },
+  parameters: {
+    actions: {
+      disabled: true
+    }
+  },
+  decorators: [
+    story => `
+      <style>
+        #container {
+          width: 300px;
+          height: 300px;
+        }
+
+        jp-dialog > div {
+          padding: 10px;
+          color: var(--neutral-foreground-rest);
+        }
+      </style>
+      <div id="container">
+        ${story()}
+      </div>`
+  ]
+} as Meta;
+
+const Template: StoryFn = (args, context): string => {
+  const {
+    globals: { backgrounds, accent },
+    parameters
+  } = context;
+  setTheme(accent, parameters.backgrounds, backgrounds);
+
+  return `<jp-dialog trap-focus="${args.trapFocus}">
+    <div>
+      <h2>Dialog heading</h2>
+      <jp-button>Cancel</jp-button><jp-button appearance="accent">Ok</jp-button>
+    </div>
+</jp-dialog>`;
+};
+
+export const Default: StoryObj = { render: Template.bind({}) };
+Default.args = {
+  trapFocus: true
+};

packages/components/src/dialog/dialog.test.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { test, expect } from '@playwright/test';
+
+test.skip('Default', async ({ page }) => {
+  await page.goto('/iframe.html?id=components-dialog--default');
+
+  expect(await page.locator('jp-dialog').screenshot()).toMatchSnapshot(
+    'dialog-default.png'
+  );
+});

packages/components/src/dialog/index.ts

@@ -0,0 +1,29 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Dialog, dialogTemplate as template } from '@microsoft/fast-foundation';
+import { dialogStyles as styles } from '@microsoft/fast-components';
+
+/**
+ * A function that returns a {@link @microsoft/fast-foundation#Dialog} registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#dialogTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<jp-dialog>`
+ *
+ */
+export const jpDialog = Dialog.compose({
+  baseName: 'dialog',
+  template,
+  styles
+});
+
+/**
+ * Base class for Dialog
+ * @public
+ */
+export { Dialog };
+
+export { styles as dialogStyles };

packages/components/src/index.ts

@@ -23,6 +23,7 @@ export * from './checkbox/index';
 export * from './combobox/index';
 export * from './date-field/index';
 export * from './data-grid/index';
+export * from './dialog/index';
 export * from './divider/index';
 export * from './listbox/index';
 export * from './menu/index';

packages/react-components/src/dialog/index.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { provideJupyterDesignSystem, jpDialog } from '@jupyter/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Dialog: React.DetailedHTMLFactory<
+  React.HTMLAttributes<HTMLElement> & {
+    hidden?: boolean;
+    modal?: boolean;
+    'trap-focus'?: boolean;
+  },
+  HTMLElement
+> = wrap(jpDialog()) as any;
+// @ts-expect-error unknown property
+Dialog.displayName = 'Jupyter.Dialog';

packages/react-components/src/index.ts

@@ -15,6 +15,7 @@ export * from './checkbox';
 export * from './combobox';
 export * from './data-grid';
 export * from './date-field';
+export * from './dialog';
 export * from './divider';
 export * from './listbox';
 export * from './menu';