Merge pull request #227 from Mezzanine-UI/feat/react-anchor

'Anchor' component implemented

.storybook/preview.ts

@@ -23,6 +23,7 @@ const preview: Preview = {
           'Data Entry',
           'Data Display',
           'Feedback',
+          'Others',
         ],
       },
     },

package.json

@@ -65,8 +65,8 @@
     "@storybook/react": "^8.2.8",
     "@storybook/react-webpack5": "^8.2.8",
     "@storybook/theming": "^8.2.8",
-    "@testing-library/dom": "^8.19.0",
-    "@types/jest": "^29.5.7",
+    "@testing-library/dom": "^10.4.0",
+    "@types/jest": "^29.5.12",
     "@types/react-refresh": "^0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
@@ -105,7 +105,7 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.5.0",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.2.4",
     "typescript": "^5.5.4",
     "webpack": "^5.93.0"
   },

packages/core/src/_styles.scss

@@ -81,4 +81,7 @@
   @include _load-styles($options, popconfirm);
   @include _load-styles($options, progress);
   @include _load-styles($options, skeleton);
+
+  // Others
+  @include _load-styles($options, anchor);
 }

packages/core/src/anchor/_anchor-styles.scss

@@ -0,0 +1,48 @@
+@use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/transition';
+@use '../button/utils' as btn-utils;
+@use './anchor' as *;
+
+$bar-width: 1px !default;
+$anchor-left-padding: 12px !default;
+
+.#{$prefix} {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  position: relative;
+
+  &__bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: $bar-width;
+    height: 100%;
+    background-color: palette.color(border);
+  }
+
+  &__anchor {
+    @include btn-utils.reset();
+
+    display: inline-grid;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    border-left: $bar-width solid palette.color(border);
+    padding-left: $anchor-left-padding;
+    text-align: left;
+    color: palette.color(action-inactive);
+    transition: transition.standard(border-left), transition.standard(color);
+
+    &:hover {
+      color: palette.color(primary);
+    }
+
+    &--active {
+      color: palette.color(primary);
+      border-left: $bar-width solid palette.color(primary);
+    }
+  }
+}

packages/core/src/anchor/_anchor.scss

@@ -0,0 +1 @@
+$prefix: mzn-anchor;

packages/core/src/anchor/_index.scss

@@ -0,0 +1 @@
+@forward './anchor';

packages/core/src/anchor/anchor.ts

@@ -0,0 +1,8 @@
+export const anchorPrefix = 'mzn-anchor';
+
+export const anchorClasses = {
+  host: anchorPrefix,
+  bar: `${anchorPrefix}__bar`,
+  anchor: `${anchorPrefix}__anchor`,
+  anchorActive: `${anchorPrefix}__anchor--active`,
+} as const;

packages/core/src/anchor/index.ts

@@ -0,0 +1 @@
+export * from './anchor';

packages/react/__test-utils__/core.ts

@@ -13,14 +13,14 @@ export {
 } from 'react-test-renderer';
 export * from '@testing-library/react';
 export {
-  act as actHook,
   renderHook,
   cleanup as cleanupHook,
 } from '@testing-library/react-hooks';
 
-export type RenderResult<Q extends Queries = typeof queries> = CoreRenderResult<Q> & {
-  getHostHTMLElement<E extends Element = HTMLElement>(): E;
-};
+export type RenderResult<Q extends Queries = typeof queries> =
+  CoreRenderResult<Q> & {
+    getHostHTMLElement<E extends Element = HTMLElement>(): E;
+  };
 
 export function render(
   ui: ReactElement,
@@ -35,7 +35,8 @@ export function render(ui: ReactElement, options?: RenderOptions): any {
   const coreResult = coreRender(ui, options);
   const result: RenderResult = {
     ...coreResult,
-    getHostHTMLElement: <E extends Element = HTMLElement>() => coreResult.container.firstElementChild as E,
+    getHostHTMLElement: <E extends Element = HTMLElement>() =>
+      coreResult.container.firstElementChild as E,
   };
 
   return result;

packages/react/src/Anchor/Anchor.mdx

@@ -0,0 +1,13 @@
+import { Meta, ArgTypes, Description } from '@storybook/blocks';
+import Anchor from '.';
+import * as AnchorStories from './Anchor.stories';
+
+<Meta of={AnchorStories} />
+
+# Anchor
+
+<Description of={Anchor} />
+
+[Source Code](https://github.com/Mezzanine-UI/mezzanine/blob/main/packages/react/src/Anchor/Anchor.tsx)
+
+<ArgTypes of={Anchor} />

packages/react/src/Anchor/Anchor.spec.tsx

@@ -0,0 +1,29 @@
+import { cleanup, fireEvent, render } from '../../__test-utils__';
+import {
+  describeForwardRefToHTMLElement,
+  describeHostElementClassNameAppendable,
+} from '../../__test-utils__/common';
+import Anchor from '.';
+
+const mockList = [
+  {
+    id: 'foo',
+    name: 'foo',
+  },
+  {
+    id: 'bar',
+    name: 'bar',
+  },
+];
+
+describe('<Anchor />', () => {
+  afterEach(cleanup);
+
+  describeForwardRefToHTMLElement(HTMLDivElement, (ref) =>
+    render(<Anchor ref={ref} list={mockList} />),
+  );
+
+  describeHostElementClassNameAppendable('foo', (className) =>
+    render(<Anchor className={className} list={mockList} />),
+  );
+});

packages/react/src/Anchor/Anchor.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/react';
+import Anchor from './Anchor';
+import { useState } from 'react';
+import Typography from '../Typography';
+
+export default {
+  title: 'Others/Anchor',
+} as Meta;
+
+const anchorList = [
+  {
+    id: 'Anchor1',
+    name: 'Anchor1',
+  },
+  {
+    id: 'Anchor2',
+    name: 'Anchor2',
+  },
+  {
+    id: 'lorem ipsum lorem ipsum lorem ipsum',
+    name: 'lorem ipsum lorem ipsum lorem ipsum',
+  },
+  {
+    id: 'Anchor4',
+    name: 'Anchor4',
+  },
+  {
+    id: 'Anchor5',
+    name: 'Anchor5',
+  },
+];
+
+export const Basics = () => {
+  const [currentActiveId, setCurrentActiveId] = useState<string>(
+    anchorList[0].id,
+  );
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridAutoFlow: 'row',
+        gap: '12px',
+      }}
+    >
+      <Typography variant="h4" color="secondary">
+        Non Ellipsis
+      </Typography>
+      <Anchor
+        activeAnchorId={currentActiveId}
+        list={anchorList}
+        maxWidth={180}
+        onClick={(nextAnchorId) => setCurrentActiveId(nextAnchorId)}
+      />
+      <Typography variant="h4" color="secondary">
+        Ellipsis
+      </Typography>
+      <Anchor
+        activeAnchorId={currentActiveId}
+        ellipsis
+        list={anchorList}
+        maxWidth={200}
+        onClick={(nextAnchorId) => setCurrentActiveId(nextAnchorId)}
+      />
+    </div>
+  );
+};

packages/react/src/Anchor/Anchor.tsx

@@ -0,0 +1,83 @@
+import { forwardRef } from 'react';
+import { anchorClasses as classes } from '@mezzanine-ui/core/anchor';
+import { cx } from '../utils/cx';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import Typography from '../Typography';
+
+export interface AnchorProps
+  extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+  /** The current active anchor ID */
+  activeAnchorId?: string;
+  /** Whether apply ellipsis or not
+   * @default false
+   */
+  ellipsis?: boolean;
+  /**
+   * Anchor list.
+   */
+  list: {
+    id: string;
+    name: string;
+  }[];
+  /**
+   * The maximum width for anchor container. This might be useful when you need to set `ellipsis: true`.
+   */
+  maxWidth?: number;
+  /**
+   * Trigger when user click on any anchor.
+   */
+  onClick?: (nextAnchorId: string) => void;
+}
+
+/**
+ * The react component for `mezzanine` anchor.
+ * This component should always be full width of its parent.
+ */
+const Anchor = forwardRef<HTMLDivElement, AnchorProps>(
+  function Anchor(props, ref) {
+    const {
+      activeAnchorId,
+      className,
+      children,
+      ellipsis = false,
+      list,
+      maxWidth,
+      onClick,
+      style,
+      ...rest
+    } = props;
+
+    const resolvedStyle = {
+      ...(style || {}),
+      ...(maxWidth ? { maxWidth: `${maxWidth}px` } : {}),
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cx(classes.host, className)}
+        style={resolvedStyle}
+        {...rest}
+      >
+        <div className={classes.bar} />
+        {list.map((anchor) => (
+          <button
+            key={anchor.id}
+            type="button"
+            onClick={() => onClick?.(anchor.id)}
+            className={cx(
+              classes.anchor,
+              activeAnchorId === anchor.id && classes.anchorActive,
+            )}
+          >
+            <Typography variant="input3" color="inherit" ellipsis={ellipsis}>
+              {anchor.name}
+            </Typography>
+          </button>
+        ))}
+      </div>
+    );
+  },
+);
+
+export default Anchor;

packages/react/src/Anchor/index.ts

@@ -0,0 +1 @@
+export { AnchorProps, default } from './Anchor';

packages/react/src/DatePicker/DatePickerCalendar.spec.tsx

@@ -1,5 +1,5 @@
 /* global document */
-import { createRef } from 'react';
+import { createRef, act } from 'react';
 import moment from 'moment';
 import {
   CalendarMode,
@@ -8,7 +8,6 @@ import {
   getYearRange,
 } from '@mezzanine-ui/core/calendar';
 import CalendarMethodsMoment from '@mezzanine-ui/core/calendarMethodsMoment';
-import { act } from 'react-dom/test-utils';
 import { cleanup, fireEvent, render } from '../../__test-utils__';
 import { describeForwardRefToHTMLElement } from '../../__test-utils__/common';
 import { CalendarConfigProvider } from '../Calendar';

packages/react/src/DateRangePicker/DateRangePickerCalendar.spec.tsx

@@ -1,8 +1,8 @@
 /* global document */
 import moment from 'moment';
+import { act } from 'react';
 import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
 import CalendarMethodsMoment from '@mezzanine-ui/core/calendarMethodsMoment';
-import { act } from 'react-dom/test-utils';
 import { cleanup, fireEvent, render } from '../../__test-utils__';
 import { describeForwardRefToHTMLElement } from '../../__test-utils__/common';
 import { CalendarConfigProvider } from '../Calendar';

packages/react/src/Notifier/createNotifier.spec.tsx

@@ -1,5 +1,4 @@
-import { act } from '@testing-library/react';
-import { Key } from 'react';
+import { Key, act } from 'react';
 import { cleanup, cleanupHook } from '../../__test-utils__';
 import { createNotifier, Notifier, NotifierData, RenderNotifier } from '.';
 

packages/react/src/index.ts

@@ -367,6 +367,11 @@ export {
 } from './Progress';
 export { SkeletonProps, default as Skeleton } from './Skeleton';
 
+/**
+ * Others
+ */
+export { AnchorProps, default as Anchor } from './Anchor';
+
 /**
  * Utility
  */

packages/react/src/utils/scroll-lock.ts

@@ -3,12 +3,11 @@ import { getScrollbarWidth } from './get-scrollbar-width';
 export function lockBodyScroll() {
   const { scrollY } = window;
 
-  document.body.style.position = 'fixed';
-  document.body.style.top = `-${scrollY}px`;
-
   // Calculate scroll bar width and use padding-right to remain layout width.
   const scrollbarWidth = getScrollbarWidth();
 
+  document.body.style.position = 'fixed';
+  document.body.style.top = `-${scrollY}px`;
   document.body.style.paddingRight = `${scrollbarWidth}px`;
   document.body.style.overflow = 'hidden';
 }

packages/react/tsconfig.dev.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "composite": true,
     "importHelpers": false,
     "noEmitHelpers": false
   },