More components (#21)

* Add card

* Add divider

* Add radio component

* Wrap new components for React

* Add new components to lab demo

* Add switch component

* Add visual test

* Add switch snapshots

* Add switch to wrapped react components and demo

Author: fcollonval

packages/components/src/card/card.stories.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  neutralForegroundRest,
+  typeRampBaseFontSize
+} from '@microsoft/fast-components';
+import { setTheme } from '../utilities/storybook';
+
+export default {
+  title: 'Card',
+  parameters: {
+    controls: {
+      disabled: true
+    },
+    actions: {
+      disabled: true
+    }
+  },
+  decorators: [
+    story => `<style>
+      jp-card {
+        color: var(${neutralForegroundRest.cssCustomProperty});
+        font-size: var(${typeRampBaseFontSize.cssCustomProperty});
+        padding: 4px;
+      }
+      </style>
+      ${story()}`
+  ]
+};
+
+const Template = (
+  args,
+  { globals: { backgrounds, accent }, parameters }
+): string => {
+  setTheme(accent, parameters.backgrounds, backgrounds);
+
+  return `<jp-card>
+    Card with text
+  </jp-card>`;
+};
+
+export const Default = Template.bind({});

packages/components/src/card/card.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('Default', async ({ page }) => {
+  await page.goto('/iframe.html?id=card--default');
+
+  expect(await page.locator('jp-card').screenshot()).toMatchSnapshot(
+    'card-default.png'
+  );
+});

packages/components/src/card/index.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  Card as FoundationCard,
+  cardTemplate as template
+} from '@microsoft/fast-foundation';
+import { Card, cardStyles as styles } from '@microsoft/fast-components';
+
+/**
+ * A function that returns a {@link @microsoft/fast-foundation#Card} registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#cardTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: `<jp-card>`
+ */
+export const jpCard = Card.compose({
+  baseName: 'card',
+  baseClass: FoundationCard,
+  template,
+  styles
+});
+
+export { Card, styles as cardStyles };

packages/components/src/custom-elements.ts

@@ -7,17 +7,22 @@ import { jpAvatar } from './avatar/index';
 import { jpBreadcrumb } from './breadcrumb/index';
 import { jpBreadcrumbItem } from './breadcrumb-item/index';
 import { jpButton } from './button/index';
+import { jpCard } from './card/index';
 import { jpCheckbox } from './checkbox/index';
 import { jpCombobox } from './combobox/index';
 import { jpDataGrid, jpDataGridCell, jpDataGridRow } from './data-grid/index';
+import { jpDivider } from './divider/index';
 import { jpNumberField } from './number-field/index';
 import { jpOption } from './option/index';
 import { jpProgress } from './progress/index';
 import { jpProgressRing } from './progress-ring/index';
+import { jpRadio } from './radio/index';
+import { jpRadioGroup } from './radio-group/index';
 import { jpSearch } from './search/index';
 import { jpSelect } from './select/index';
 import { jpSlider } from './slider/index';
 import { jpSliderLabel } from './slider-label/index';
+import { jpSwitch } from './switch/index';
 import { jpTabPanel } from './tab-panel/index';
 import { jpTab } from './tab/index';
 import { jpTabs } from './tabs/index';
@@ -35,17 +40,22 @@ import type { Avatar } from './avatar/index';
 import type { Breadcrumb } from './breadcrumb/index';
 import type { BreadcrumbItem } from './breadcrumb-item/index';
 import type { Button } from './button/index';
+import type { Card } from './card/index';
 import type { Checkbox } from './checkbox/index';
 import type { Combobox } from './combobox/index';
 import type { DataGrid, DataGridCell, DataGridRow } from './data-grid/index';
+import type { Divider } from './divider/index';
 import type { NumberField } from './number-field/index';
 import type { Option } from './option/index';
 import type { Progress } from './progress/index';
 import type { ProgressRing } from './progress-ring/index';
+import type { Radio } from './radio/index';
+import type { RadioGroup } from './radio-group/index';
 import type { Search } from './search/index';
 import type { Select } from './select/index';
 import type { Slider } from './slider/index';
 import type { SliderLabel } from './slider-label/index';
+import type { Switch } from './switch/index';
 import type { TabPanel } from './tab-panel/index';
 import type { Tab } from './tab/index';
 import type { Tabs } from './tabs/index';
@@ -62,19 +72,24 @@ export {
   jpBreadcrumb,
   jpBreadcrumbItem,
   jpButton,
+  jpCard,
   jpCheckbox,
   jpCombobox,
   jpDataGrid,
   jpDataGridCell,
   jpDataGridRow,
+  jpDivider,
   jpNumberField,
   jpOption,
   jpProgress,
   jpProgressRing,
+  jpRadio,
+  jpRadioGroup,
   jpSearch,
   jpSelect,
   jpSlider,
   jpSliderLabel,
+  jpSwitch,
   jpTab,
   jpTabPanel,
   jpTabs,
@@ -98,19 +113,24 @@ export const allComponents = {
   jpBreadcrumb,
   jpBreadcrumbItem,
   jpButton,
+  jpCard,
   jpCheckbox,
   jpCombobox,
   jpDataGrid,
   jpDataGridCell,
   jpDataGridRow,
+  jpDivider,
   jpNumberField,
   jpOption,
   jpProgress,
   jpProgressRing,
+  jpRadio,
+  jpRadioGroup,
   jpSearch,
   jpSelect,
   jpSlider,
   jpSliderLabel,
+  jpSwitch,
   jpTab,
   jpTabPanel,
   jpTabs,

packages/components/src/divider/divider.stories.ts

@@ -0,0 +1,48 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { setTheme } from '../utilities/storybook';
+
+export default {
+  title: 'Divider',
+  argTypes: {
+    orientation: { control: 'radio', options: ['horizontal', 'vertical'] }
+  },
+  parameters: {
+    actions: {
+      disabled: true
+    }
+  },
+  decorators: [
+    story => `
+      <style>
+        #container {
+          width: 300px;
+          height: 300px;
+        }
+      </style>
+      <div id="container">
+        ${story()}
+      </div>`
+  ]
+};
+
+const Template = (
+  args,
+  { globals: { backgrounds, accent }, parameters }
+): string => {
+  setTheme(accent, parameters.backgrounds, backgrounds);
+
+  return `<jp-divider orientation="${args.orientation}"></jp-divider>`;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  orientation: 'horizontal'
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  ...Default.args,
+  orientation: 'vertical'
+};

packages/components/src/divider/divider.test.ts

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

packages/components/src/divider/index.ts

@@ -0,0 +1,28 @@
+import {
+  Divider,
+  dividerTemplate as template
+} from '@microsoft/fast-foundation';
+import { dividerStyles as styles } from '@microsoft/fast-components';
+
+/**
+ * A function that returns a {@link @microsoft/fast-foundation#Divider} registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#dividerTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: `<jp-divider>`
+ */
+export const jpDivider = Divider.compose({
+  baseName: 'divider',
+  template,
+  styles
+});
+
+/**
+ * Base class for Divider
+ * @public
+ */
+export { Divider };
+
+export { styles as dividerStyles };

packages/components/src/index.ts

@@ -13,12 +13,16 @@ export * from './avatar/index';
 export * from './breadcrumb/index';
 export * from './breadcrumb-item/index';
 export * from './button/index';
+export * from './card/index';
 export * from './checkbox/index';
 export * from './combobox/index';
 export * from './data-grid/index';
+export * from './divider/index';
 export * from './number-field/index';
 export * from './option/index';
 export * from './progress/index';
+export * from './radio/index';
+export * from './radio-group/index';
 export * from './search/index';
 export * from './select/index';
 export * from './slider-label/index';

packages/components/src/radio-group/index.ts

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