@transferwise/components 0.0.0-experimental-b2dc1ea → 0.0.0-experimental-4c86474

package/src/link/Link.tsx

@@ -1,6 +1,6 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes, forwardRef } from 'react';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
 
 import { LinkLarge, LinkDefault } from '../common';
@@ -14,35 +14,33 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge
  *
  * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
  */
-const Link = forwardRef<HTMLAnchorElement, Props>(
-  (
-    { className, children, href, target, type, 'aria-label': ariaLabel, onClick, ...props }: Props,
-    ref,
-  ) => {
-    const isBlank = target === '_blank';
+const Link = ({
+  className,
+  children,
+  href,
+  target,
+  type,
+  'aria-label': ariaLabel,
+  onClick,
+  ...props
+}: Props) => {
+  const isBlank = target === '_blank';
 
-    const { formatMessage } = useIntl();
+  const { formatMessage } = useIntl();
 
-    return (
-      <a
-        ref={ref}
-        href={href}
-        target={target}
-        className={clsx(
-          'np-link',
-          type ? `np-text-${type}` : undefined,
-          'd-inline-flex',
-          className,
-        )}
-        aria-label={ariaLabel}
-        rel={isBlank ? 'noreferrer' : undefined}
-        onClick={onClick}
-        {...props}
-      >
-        {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-      </a>
-    );
-  },
-);
+  return (
+    <a
+      href={href}
+      target={target}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
+      aria-label={ariaLabel}
+      rel={isBlank ? 'noreferrer' : undefined}
+      onClick={onClick}
+      {...props}
+    >
+      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
+    </a>
+  );
+};
 
 export default Link;

package/src/main.css

@@ -2038,6 +2038,30 @@ button.np-option {
     padding: var(--size-24);
   }
 }
+.wds-Divider {
+  --Divider-border-width: var(--size-4);
+  --Divider-border-color: var(--color-border-neutral);
+  --Divider-border-style: solid;
+  --Divider-dash-length: var(--size-4);
+  --Divider-dash-spacing: var(--size-4);
+  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 4px;
+  height: var(--Divider-border-width);
+  width: 100%;
+}
+.wds-Divider--content {
+  border-top: none;
+  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
+  height: var(--Divider-border-width);
+}
+.wds-Divider--content,
+.wds-Divider--subsection {
+  --Divider-border-width: 1px;
+}
 .np-dropfade,
 .np-dropfade-enter {
   opacity: 0;
@@ -2242,9 +2266,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-header--section {
-  border-bottom: none;
-}
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/main.less

@@ -23,6 +23,7 @@
 @import "./definitionList/DefinitionList.less";
 @import "./dimmer/Dimmer.less";
 @import "./drawer/Drawer.less";
+@import "./divider/Divider.less";
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";

package/src/ssr.spec.js

@@ -178,6 +178,7 @@ describe('Server side rendering', () => {
     // Override props in case of name collision.
     const overrideProps = {
       Alert: { children: undefined, message: 'Fluffy kittens', size: undefined },
+      Divider: { children: undefined },
       Card: { isExpanded: true },
       CheckboxButton: { children: undefined, onChange: jest.fn() },
       Typeahead: { size: 'md' },

package/src/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,29 +25,15 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-const Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
-  ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
-    const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
-    const isTypeSupported = mapping !== undefined;
-    if (isTypeSupported) {
-      const HeaderTag = as ?? mapping;
-      return (
-        <HeaderTag
-          ref={ref as React.Ref<any>}
-          {...props}
-          className={clsx(`np-text-${type}`, className)}
-        />
-      );
-    }
-    const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-    return (
-      <HeaderTag
-        ref={ref as React.Ref<any>}
-        {...props}
-        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
-      />
-    );
-  },
-);
+function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
+  const mapping = titleTypeMapping[type];
+  const isTypeSupported = mapping !== undefined;
+  if (isTypeSupported) {
+    const HeaderTag = as ?? mapping;
+    return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
+  }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
+}
 
 export default Title;