@transferwise/components 45.22.0 → 45.23.0

package/build/types/header/Header.d.ts

@@ -16,7 +16,7 @@ export type HeaderProps = CommonProps & {
      *
      * @default "h5"
      */
-    as?: Heading;
+    as?: Heading | 'legend';
     title: string;
 };
 /**

package/build/types/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":";AAGA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiCF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCAS1E,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":";AAGA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiCF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCA4B1E,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/title/Title.d.ts

@@ -4,7 +4,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     /**
      * Default value will based one `type` prop
      */
-    as?: 'span' | 'label' | 'li' | Heading;
+    as?: 'span' | 'label' | 'li' | 'legend' | Heading;
     /**
      * Default value: {@link DEFAULT_TYPE}
      */

package/build/types/title/Title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BAUrE;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BAUrE;AAED,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.22.0",
+  "version": "45.23.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/header/Header.css

@@ -1 +1 @@
-.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}
+.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}.np-header legend{border-bottom:none;padding:0}

package/src/header/Header.less

@@ -19,4 +19,9 @@
       margin-bottom: calc(var(--size-4) * -1);
     }
   }
+
+  legend {
+    padding: 0;
+    border-bottom: none;
+  }
 }

package/src/header/Header.tsx

@@ -25,7 +25,7 @@ export type HeaderProps = CommonProps & {
    *
    * @default "h5"
    */
-  as?: Heading;
+  as?: Heading | 'legend';
   title: string;
 };
 
@@ -66,12 +66,31 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
  *
  */
 export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
+  if (!action) {
+    return (
+      <Title
+        as={as}
+        type={Typography.TITLE_GROUP}
+        className={classNames('np-header', 'np-header__title', className)}
+      >
+        {title}
+      </Title>
+    );
+  }
+
+  if (as === 'legend') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Legends should be the first child in a fieldset, and this is not possible when including an action',
+    );
+  }
+
   return (
     <div className={classNames('np-header', className)}>
       <Title as={as} type={Typography.TITLE_GROUP} className="np-header__title">
         {title}
       </Title>
-      {action && <HeaderAction action={action} />}
+      <HeaderAction action={action} />
     </div>
   );
 };