Add anchor component (#64)

* Add anchor component

* Fix CI

* Fix anchor react component props

Author: fcollonval

packages/components/src/anchor/anchor.stories.ts

@@ -0,0 +1,47 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import type { StoryFn, Meta, StoryObj } from '@storybook/html';
+import { getFaIcon, setTheme } from '../utilities/storybook';
+
+export default {
+  title: 'Components/Anchor',
+  argTypes: {
+    label: { control: 'text' },
+    appearance: {
+      control: 'select',
+      options: [
+        'Accent',
+        'Lightweight',
+        'Neutral',
+        'Outline',
+        'Stealth',
+        'Hypertext'
+      ]
+    },
+    startIcon: { control: 'boolean' },
+    endIcon: { control: 'boolean' }
+  }
+} as Meta;
+
+const Template: StoryFn = (args, context): string => {
+  const {
+    globals: { backgrounds, accent },
+    parameters
+  } = context;
+  setTheme(accent, parameters.backgrounds, backgrounds);
+
+  return `<jp-anchor
+  href="#"
+  ${args.appearance ? `appearance="${args.appearance.toLowerCase()}` : ''}">
+  ${args.startIcon ? getFaIcon('plus', 'start') : ''}${args.label ?? 'Link'}
+  ${args.endIcon ? getFaIcon('plus', 'end') : ''}
+  </jp-anchor>`;
+};
+
+export const Default: StoryObj = { render: Template.bind({}) };
+Default.args = {
+  label: 'Link',
+  appearance: 'Neutral',
+  startIcon: false,
+  endIcon: false
+};

packages/components/src/anchor/anchor.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=components-anchor--default');
+
+  expect(await page.locator('jp-anchor').screenshot()).toMatchSnapshot(
+    'anchor-default.png'
+  );
+});

packages/components/src/anchor/index.ts

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

packages/components/src/custom-elements.ts

@@ -4,6 +4,7 @@
 import type { Container } from '@microsoft/fast-foundation';
 import { jpAccordion } from './accordion/index';
 import { jpAccordionItem } from './accordion-item/index';
+import { jpAnchor } from './anchor/index';
 import { jpAnchoredRegion } from './anchored-region/index';
 import { jpAvatar } from './avatar/index';
 import { jpBadge } from './badge/index';
@@ -44,6 +45,7 @@ import { jpTreeView } from './tree-view/index';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { Accordion } from './accordion/index';
 import type { AccordionItem } from './accordion-item/index';
+import type { Anchor } from './anchor/index';
 import type { AnchoredRegion } from './anchored-region/index';
 import type { Avatar } from './avatar/index';
 import type { Badge } from './badge/index';
@@ -83,6 +85,7 @@ import type { TreeView } from './tree-view/index';
 export {
   jpAccordion,
   jpAccordionItem,
+  jpAnchor,
   jpAnchoredRegion,
   jpAvatar,
   jpBadge,
@@ -131,6 +134,7 @@ export {
 export const allComponents = {
   jpAccordion,
   jpAccordionItem,
+  jpAnchor,
   jpAnchoredRegion,
   jpAvatar,
   jpBadge,

packages/components/src/index.ts

@@ -11,6 +11,7 @@ export * from './custom-elements';
 // Export components and classes
 export * from './accordion/index';
 export * from './accordion-item/index';
+export * from './anchor/index';
 export * from './anchored-region/index';
 export * from './avatar/index';
 export * from './badge/index';

packages/components/tests-out/anchor/anchor.test.js-snapshots/anchor-default-chromium-linux.png

@@ -4,6 +4,7 @@
 import {
   Accordion,
   AccordionItem,
+  Anchor,
   Avatar,
   Badge,
   Breadcrumb,
@@ -254,6 +255,9 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
             <span className="fa fa-cog"></span>
           </Button>
         </div>
+        <Anchor appearance="outline" href="#">
+          Anchor element
+        </Anchor>
         <Search
           value="Dummy search text"
           onChange={onChange}
@@ -454,6 +458,9 @@ function createNode(): HTMLElement {
         <jp-button appearance="neutral">Button</jp-button>
         <jp-button appearance="stealth" aria-label="Confirm"><span class="fa fa-cog"></span></jp-button>
       </div>
+      <jp-anchor appearance="outline" href="#">
+        Anchor element
+      </jp-anchor>
       <jp-search value="Dummy search text">Search Label</jp-search>
       <jp-text-field value="Populated text">Text Field Label</jp-text-field>
       <jp-number-field value="30">Number Field Label</jp-number-field>

packages/components/tests-out/anchor/anchor.test.js-snapshots/anchor-default-firefox-linux.png

@@ -0,0 +1,31 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { provideJupyterDesignSystem, jpAnchor } from '@jupyter/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Anchor: React.DetailedHTMLFactory<
+  React.HTMLAttributes<HTMLElement> & {
+    appearance?:
+      | 'accent'
+      | 'lightweight'
+      | 'neutral'
+      | 'outline'
+      | 'stealth'
+      | 'hypertext';
+    download?: string;
+    href?: string;
+    hreflang?: string;
+    ping?: string;
+    referrerpolicy?: string;
+    rel?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    type?: string;
+  },
+  HTMLElement
+> = wrap(jpAnchor()) as any;
+// @ts-expect-error unknown property
+Anchor.displayName = 'Jupyter.Anchor';