Add progress ring (#10)

* Add progress-ring

* Fix tag naming in React

* Improve some stories

* Add snapshots

Author: fcollonval

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

@@ -9,6 +9,11 @@ export default {
     href: { control: 'boolean' },
     startIcon: { control: 'boolean' },
     endIcon: { control: 'boolean' }
+  },
+  parameters: {
+    actions: {
+      disabled: true
+    }
   }
 };
 

packages/components/src/custom-elements.ts

@@ -8,6 +8,7 @@ import { jpBreadcrumbItem } from './breadcrumb-item/index';
 import { jpButton } from './button/index';
 import { jpOption } from './option/index';
 import { jpProgress } from './progress/index';
+import { jpProgressRing } from './progress-ring/index';
 import { jpSearch } from './search/index';
 import { jpSelect } from './select/index';
 import { jpSlider } from './slider/index';
@@ -26,6 +27,7 @@ import type { BreadcrumbItem } from './breadcrumb-item/index';
 import type { Button } from './button/index';
 import type { Option } from './option/index';
 import type { Progress } from './progress/index';
+import type { ProgressRing } from './progress-ring/index';
 import type { Search } from './search/index';
 import type { Select } from './select/index';
 import type { Slider } from './slider/index';
@@ -43,6 +45,7 @@ export {
   jpButton,
   jpOption,
   jpProgress,
+  jpProgressRing,
   jpSearch,
   jpSelect,
   jpSlider,
@@ -67,6 +70,7 @@ export const allComponents = {
   jpButton,
   jpOption,
   jpProgress,
+  jpProgressRing,
   jpSearch,
   jpSelect,
   jpSlider,

packages/components/src/progress-ring/index.ts

@@ -0,0 +1,47 @@
+import {
+  BaseProgress as ProgressRing,
+  ProgressRingOptions,
+  progressRingTemplate as template
+} from '@microsoft/fast-foundation';
+import { progressRingStyles as styles } from '@microsoft/fast-components';
+
+/**
+ * A function that returns a {@link @microsoft/fast-foundation#BaseProgress} registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#progressRingTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: `<jp-progress-ring>`
+ */
+export const jpProgressRing = ProgressRing.compose<ProgressRingOptions>({
+  baseName: 'progress-ring',
+  template,
+  styles,
+  indeterminateIndicator: `
+        <svg class="progress" part="progress" viewBox="0 0 16 16">
+            <circle
+                class="background"
+                part="background"
+                cx="8px"
+                cy="8px"
+                r="7px"
+            ></circle>
+            <circle
+                class="indeterminate-indicator-1"
+                part="indeterminate-indicator-1"
+                cx="8px"
+                cy="8px"
+                r="7px"
+            ></circle>
+        </svg>
+    `
+});
+
+/**
+ * Base class for ProgressRing
+ * @public
+ */
+export { ProgressRing };
+
+export { styles as progressRingStyles };

packages/components/src/progress-ring/progress-ring.stories.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { setTheme } from '../utilities/storybook';
+
+export default {
+  title: 'Progress Ring',
+  argTypes: {
+    min: { control: 'number', min: 0 },
+    max: { control: 'number', min: 0 },
+    value: { control: 'number', min: 0 },
+    paused: { control: 'boolean' },
+    height: { control: 'number', min: 4 }
+  },
+  parameters: {
+    actions: {
+      disabled: true
+    }
+  }
+};
+
+const Template = (
+  args,
+  { globals: { backgrounds, accent }, parameters }
+): string => {
+  setTheme(accent, parameters.backgrounds, backgrounds);
+  return `<jp-progress-ring
+    ${typeof args.min === 'number' ? `min="${args.min}"` : ''}
+    ${typeof args.max === 'number' ? `max="${args.max}"` : ''}
+    ${typeof args.value === 'number' ? `value="${args.value}"` : ''}
+    ${args.paused ? 'paused="true"' : ''}
+    ${
+      typeof args.height === 'number' ? `style="height: ${args.height}px;"` : ''
+    }
+  >
+  </jp-progress-ring>`;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  min: null,
+  max: null,
+  value: null,
+  paused: false,
+  height: null
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  ...Default.args,
+  min: 0,
+  max: 50,
+  value: 30
+};
+
+export const Paused = Template.bind({});
+Paused.args = {
+  ...WithValue.args,
+  paused: true
+};

packages/components/src/progress-ring/progress-ring.test.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { test, expect } from '@playwright/test';
+
+test('With value', async ({ browserName, page }) => {
+  // FIXME
+  test.skip(browserName === 'webkit', 'Progress ring bar animation unstable.');
+
+  await page.goto('/iframe.html?id=progress-ring--with-value');
+
+  // Ensure the progress animation is finished
+  await page.waitForTimeout(200);
+
+  expect(await page.locator('jp-progress-ring').screenshot()).toMatchSnapshot(
+    'progress-ring-with-value.png'
+  );
+});

packages/components/src/progress-ring/progress-ring.test.ts-snapshots/progress-ring-with-value-chromium-linux.png

@@ -1,6 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { action } from '@storybook/addon-actions';
 import { setTheme } from '../utilities/storybook';
 
 export default {
@@ -9,23 +10,21 @@ export default {
     activePanel: { control: 'select', options: [null, 'One', 'Two', 'Three'] },
     activeIndicator: { control: 'boolean' },
     orientation: { control: 'radio', options: ['horizontal', 'vertical'] }
-  },
-  parameters: {
-    actions: {
-      disabled: true
-    }
   }
 };
 
 const Template = (
   args,
   { globals: { backgrounds, accent }, parameters }
-): string => {
+): HTMLElement => {
   setTheme(accent, parameters.backgrounds, backgrounds);
 
-  return `<jp-tabs 
-    ${!args.activeIndicator && 'activeIndicator="false"'}
-    ${args.activePanel ? `activeId=Tab${args.activePanel}` : ''}
+  const container = document.createElement('div');
+  container.insertAdjacentHTML(
+    'afterbegin',
+    `<jp-tabs 
+    ${!args.activeIndicator && 'activeindicator="false"'}
+    ${args.activePanel ? `activeid=Tab${args.activePanel}` : ''}
     orientation="${args.orientation}"
   >
     <jp-tab id="TabOne">Tab one</jp-tab>
@@ -40,14 +39,24 @@ const Template = (
     <jp-tab-panel id="TabPanelThree">
         Tab three content. This is for testing.
     </jp-tab-panel>
-  </jp-tabs>`;
+  </jp-tabs>`
+  );
+
+  const tabs = container.firstChild as HTMLElement;
+
+  if (args.onChange) {
+    tabs.addEventListener('change', args.onChange);
+  }
+
+  return tabs;
 };
 
 export const Default = Template.bind({});
 Default.args = {
   activePanel: null,
   activeIndicator: true,
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  onChange: action('tabs-onchange')
 };
 
 export const Vertical = Template.bind({});

packages/components/src/progress-ring/progress-ring.test.ts-snapshots/progress-ring-with-value-firefox-linux.png

@@ -5,6 +5,7 @@ import {
   Button,
   Option,
   Progress,
+  ProgressRing,
   Search,
   Select,
   Slider,
@@ -160,6 +161,11 @@ function Artwork(): JSX.Element {
           <Progress></Progress>
           <Progress min={0} max={50} value={30}></Progress>
         </div>
+        <div className="jp-FlexColumn">
+          <label>Progress Ring</label>
+          <ProgressRing></ProgressRing>
+          <ProgressRing min={0} max={50} value={30}></ProgressRing>
+        </div>
       </div>
       <div className="jp-FlexColumn" style={{ gridColumn: 3 }}>
         <Tabs>
@@ -191,7 +197,6 @@ function Artwork(): JSX.Element {
         <div>
           <Tag>Tag</Tag>
         </div>
-        <ProgressRing></ProgressRing>
       </div> */}
     </div>
   );
@@ -249,7 +254,6 @@ function createNode(): HTMLElement {
         <jp-badge>1</jp-badge>
         <jp-tag>Tag</jp-tag>
       </div>
-      <jp-progress-ring></jp-progress-ring>
     </div>
     -->
     <div class="jp-FlexColumn" style="grid-column: 2;">
@@ -264,6 +268,11 @@ function createNode(): HTMLElement {
         <jp-progress></jp-progress>
         <jp-progress min="0" max="50" value="30"></jp-progress>
       </div>
+      <div class="jp-FlexColumn">
+        <label>Progress Ring</label>
+        <jp-progress-ring></jp-progress-ring>
+        <jp-progress-ring min="0" max="50" value="30"></jp-progress-ring>
+      </div>
     </div>
     <div class="jp-FlexColumn" style="grid-column: 3;">
       <!--

packages/components/src/tabs/tabs.stories.ts

@@ -4,6 +4,7 @@ export * from './breadcrumb-item';
 export * from './button';
 export * from './option';
 export * from './progress';
+export * from './progress-ring';
 export * from './search';
 export * from './select';
 export * from './slider';

packages/lab-example/src/index.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  provideJupyterDesignSystem,
+  jpProgressRing
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const ProgressRing: React.DetailedHTMLFactory<
+  React.HTMLAttributes<HTMLElement> & {
+    min?: number;
+    max?: number;
+    value?: number;
+    paused?: boolean;
+  },
+  HTMLElement
+> = wrap(
+  jpProgressRing(),
+  // Name need to be exported otherwise a `jp-progress` element is instantiated
+  { name: 'jp-progress-ring' }
+) as any;
+// @ts-expect-error unknown property
+ProgressRing.displayName = 'Jupyter.ProgressRing';

packages/react-components/src/index.ts

@@ -18,6 +18,6 @@ export const Progress: React.DetailedHTMLFactory<
     paused?: boolean;
   },
   HTMLElement
-> = wrap(jpProgress()) as any;
+> = wrap(jpProgress(), { name: 'jp-progress' }) as any;
 // @ts-expect-error unknown property
 Progress.displayName = 'Jupyter.Progress';