@westpac/ui 0.20.1 → 0.21.0

package/dist/components/input-group/input-group.styles.js

@@ -1,7 +1,4 @@
 import { tv } from 'tailwind-variants';
-const inlineFlexInput = {
-    input: 'inline-flex'
-};
 export const styles = tv({
     slots: {
         base: 'group m-0 mb-5 border-none p-0',
@@ -26,18 +23,42 @@ export const styles = tv({
         },
         width: {
             full: '',
-            1: inlineFlexInput,
-            2: inlineFlexInput,
-            3: inlineFlexInput,
-            4: inlineFlexInput,
-            5: inlineFlexInput,
-            6: inlineFlexInput,
-            7: inlineFlexInput,
-            8: inlineFlexInput,
-            9: inlineFlexInput,
-            10: inlineFlexInput,
-            20: inlineFlexInput,
-            30: inlineFlexInput
+            1: {
+                input: 'inline-flex'
+            },
+            2: {
+                input: 'inline-flex'
+            },
+            3: {
+                input: 'inline-flex'
+            },
+            4: {
+                input: 'inline-flex'
+            },
+            5: {
+                input: 'inline-flex'
+            },
+            6: {
+                input: 'inline-flex'
+            },
+            7: {
+                input: 'inline-flex'
+            },
+            8: {
+                input: 'inline-flex'
+            },
+            9: {
+                input: 'inline-flex'
+            },
+            10: {
+                input: 'inline-flex'
+            },
+            20: {
+                input: 'inline-flex'
+            },
+            30: {
+                input: 'inline-flex'
+            }
         }
     },
     compoundVariants: [

package/dist/components/popover/popover.component.d.ts

@@ -3,4 +3,4 @@ import { type PopoverProps } from './popover.types.js';
  * TODO: Revisit this component when react-aria has updated usePopover, see: https://github.com/adobe/react-spectrum/discussions/5341
  * This version does not currently use react-aria as it blocked so functionality that was needed to match GEL 3.0
  */
-export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, linkStyling, size, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.component.js

@@ -4,10 +4,12 @@ import { useOverlayTriggerState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { Panel } from './components/panel/panel.component.js';
 import { styles as popoverStyles } from './popover.styles.js';
-export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , icon  }) {
+export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , linkStyling =false , size ='medium' , icon  }) {
     const state = useOverlayTriggerState({});
     const panelId = useId();
-    const styles = popoverStyles({});
+    const styles = popoverStyles({
+        linkStyling
+    });
     const ref = useRef(null);
     const handleClick = useCallback(()=>{
         onClick();
@@ -41,13 +43,15 @@ export function Popover({ children , className , headingTag , content , heading
             className
         })
     }, React.createElement(Button, {
-        look: icon && !children ? 'link' : look,
+        look: icon && !children || linkStyling ? 'link' : look,
         iconAfter: icon,
         soft: soft,
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
         onClick: handleClick,
-        ref: ref
+        ref: ref,
+        size: size,
+        className: styles.button()
     }, children), state.isOpen && React.createElement(Panel, {
         placement: placement,
         heading: heading ? heading : '',

package/dist/components/popover/popover.styles.d.ts

@@ -1,7 +1,23 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    linkStyling: {
+        true: {
+            button: string;
+        };
+        false: {};
+    };
+}, {
     base: string;
+    button: string;
 }, undefined, {
     responsiveVariants: string[];
-}, {}, {
+}, {
+    linkStyling: {
+        true: {
+            button: string;
+        };
+        false: {};
+    };
+}, {
     base: string;
+    button: string;
 }>;

package/dist/components/popover/popover.styles.js

@@ -1,9 +1,17 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative inline-block'
+        base: 'relative inline-block',
+        button: ''
     },
-    variants: {}
+    variants: {
+        linkStyling: {
+            true: {
+                button: 'p-0'
+            },
+            false: {}
+        }
+    }
 }, {
     responsiveVariants: [
         'xsl',

package/dist/components/popover/popover.types.d.ts

@@ -23,6 +23,10 @@ export type PopoverProps = {
      * Use an icon as the button
      */
     icon?: (props: IconProps) => JSX.Element;
+    /**
+     * Removes padding from trigger button and sets look to link to be able to look inline, use size prop to match font size
+     */
+    linkStyling?: boolean;
     /**
      * A function for the onClick event
      */
@@ -36,4 +40,4 @@ export type PopoverProps = {
      * @default top
      */
     placement?: 'top' | 'bottom';
-} & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft'>;
+} & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft' | 'size'>;

package/dist/css/westpac-ui.css

@@ -1,5 +1,3 @@
-Tailwind Variants Transform Failed: inlineFlexInput is not defined
-If you think this is an issue, please submit it at https://github.com/nextui-org/tailwind-variants/issues/new/choose
 /*
 ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 *//*
@@ -7124,6 +7122,8 @@ video {
   }.xsl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xsl\:p-0 {
+    padding: 0rem;
   }.xsl\:p-2 {
     padding: 0.75rem;
   }.xsl\:p-3 {
@@ -8176,6 +8176,8 @@ video {
   }.sm\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.sm\:p-0 {
+    padding: 0rem;
   }.sm\:p-2 {
     padding: 0.75rem;
   }.sm\:p-3 {
@@ -9247,6 +9249,8 @@ video {
   }.md\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.md\:p-0 {
+    padding: 0rem;
   }.md\:p-2 {
     padding: 0.75rem;
   }.md\:p-3 {
@@ -10311,6 +10315,8 @@ video {
   }.lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.lg\:p-0 {
+    padding: 0rem;
   }.lg\:p-2 {
     padding: 0.75rem;
   }.lg\:p-3 {
@@ -11340,6 +11346,8 @@ video {
   }.xl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xl\:p-0 {
+    padding: 0rem;
   }.xl\:p-2 {
     padding: 0.75rem;
   }.xl\:p-3 {

package/dist/css/westpac-ui.min.css

@@ -1,5 +1,3 @@
-Tailwind Variants Transform Failed: inlineFlexInput is not defined
-If you think this is an issue, please submit it at https://github.com/nextui-org/tailwind-variants/issues/new/choose
 /*
 ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 *//*
@@ -7124,6 +7122,8 @@ video {
   }.xsl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xsl\:p-0 {
+    padding: 0rem;
   }.xsl\:p-2 {
     padding: 0.75rem;
   }.xsl\:p-3 {
@@ -8176,6 +8176,8 @@ video {
   }.sm\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.sm\:p-0 {
+    padding: 0rem;
   }.sm\:p-2 {
     padding: 0.75rem;
   }.sm\:p-3 {
@@ -9247,6 +9249,8 @@ video {
   }.md\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.md\:p-0 {
+    padding: 0rem;
   }.md\:p-2 {
     padding: 0.75rem;
   }.md\:p-3 {
@@ -10311,6 +10315,8 @@ video {
   }.lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.lg\:p-0 {
+    padding: 0rem;
   }.lg\:p-2 {
     padding: 0.75rem;
   }.lg\:p-3 {
@@ -11340,6 +11346,8 @@ video {
   }.xl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xl\:p-0 {
+    padding: 0rem;
   }.xl\:p-2 {
     padding: 0.75rem;
   }.xl\:p-3 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,8 +255,8 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
-    "@westpac/ts-config": "~0.0.0",
     "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0",
     "@westpac/eslint-config": "~0.2.1"
   },
   "dependencies": {

package/src/components/input-group/input-group.styles.ts

@@ -1,6 +1,5 @@
 import { tv } from 'tailwind-variants';
 
-const inlineFlexInput = { input: 'inline-flex' };
 export const styles = tv(
   {
     slots: {
@@ -27,18 +26,20 @@ export const styles = tv(
       // Has to be done this as doing it with compoundVariants with array was not working
       width: {
         full: '',
-        1: inlineFlexInput,
-        2: inlineFlexInput,
-        3: inlineFlexInput,
-        4: inlineFlexInput,
-        5: inlineFlexInput,
-        6: inlineFlexInput,
-        7: inlineFlexInput,
-        8: inlineFlexInput,
-        9: inlineFlexInput,
-        10: inlineFlexInput,
-        20: inlineFlexInput,
-        30: inlineFlexInput,
+        // Below ignored because tailwind was showing a transform error when using a const
+        // eslint-disable-next-line sonarjs/no-duplicate-string
+        1: { input: 'inline-flex' },
+        2: { input: 'inline-flex' },
+        3: { input: 'inline-flex' },
+        4: { input: 'inline-flex' },
+        5: { input: 'inline-flex' },
+        6: { input: 'inline-flex' },
+        7: { input: 'inline-flex' },
+        8: { input: 'inline-flex' },
+        9: { input: 'inline-flex' },
+        10: { input: 'inline-flex' },
+        20: { input: 'inline-flex' },
+        30: { input: 'inline-flex' },
       },
     },
     compoundVariants: [

package/src/components/popover/popover.component.tsx

@@ -25,11 +25,13 @@ export function Popover({
   look,
   soft = false,
   open = false,
+  linkStyling = false,
+  size = 'medium',
   icon,
 }: PopoverProps) {
   const state = useOverlayTriggerState({});
   const panelId = useId();
-  const styles = popoverStyles({});
+  const styles = popoverStyles({ linkStyling });
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
 
   const handleClick = useCallback(() => {
@@ -57,13 +59,15 @@ export function Popover({
   return (
     <div className={styles.base({ className })}>
       <Button
-        look={icon && !children ? 'link' : look}
+        look={(icon && !children) || linkStyling ? 'link' : look}
         iconAfter={icon}
         soft={soft}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
         onClick={handleClick}
         ref={ref}
+        size={size}
+        className={styles.button()}
       >
         {children}
       </Button>

package/src/components/popover/popover.styles.ts

@@ -4,8 +4,16 @@ export const styles = tv(
   {
     slots: {
       base: 'relative inline-block',
+      button: '',
+    },
+    variants: {
+      linkStyling: {
+        true: {
+          button: 'p-0',
+        },
+        false: {},
+      },
     },
-    variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );

package/src/components/popover/popover.types.ts

@@ -25,6 +25,10 @@ export type PopoverProps = {
    * Use an icon as the button
    */
   icon?: (props: IconProps) => JSX.Element;
+  /**
+   * Removes padding from trigger button and sets look to link to be able to look inline, use size prop to match font size
+   */
+  linkStyling?: boolean;
   /**
    * A function for the onClick event
    */
@@ -39,4 +43,4 @@ export type PopoverProps = {
    */
   placement?: 'top' | 'bottom';
 } & HTMLAttributes<Element> &
-  Pick<ButtonProps, 'look' | 'soft'>;
+  Pick<ButtonProps, 'look' | 'soft' | 'size'>;