-
-
- {amount}
-
- available $9,999
-
- }
- >
-
- {name}
-
- {number}
-
- ))}
-
+ {title}
- {accounts.map(({ name, amount, number }) => ( -
+
+
+ {amount}
+
+ available $9,999
+
+ }
+ >
+
+ {name}
+
+ {number}
+
+ ))}
+
))}
);
@@ -375,11 +353,7 @@
tag="a"
href="#"
key={name}
- before={
- {title}
+ {accounts.map(({ name, amount, number }) => ( +{title}
- {payees.map(({ name }) => {
+ {payees.map(({ name, svg }) => {
return (
-
-
- }
+ before={{svg} }
>
{name}
@@ -518,6 +495,9 @@
number: '10964567891',
bank: 'BANK OF ANTARCTICA, ANTARCTICA',
code: 'NFBKAS33XXX',
+ svg: (
+
-
-
- }
+ before={{svg} }
after={
@@ -610,17 +588,7 @@
key={name}
before={
-
+ {svg}
}
after={
}
- topBadge={({ className }) => (
-
- Corner flag
-
- )}
+ topBadge={({ className }) => Corner flag }
>
MYER
@@ -725,11 +689,7 @@
href="#"
tag="a"
withBorder
- topBadge={({ className }) => (
-
- Corner flag
-
- )}
+ topBadge={({ className }) => Corner flag }
>
![]()
-
- }
- after={
-
- Completed
-
- }
- >
-
- {title}
-
- {subtitle}
-
-
-
- Completed
-
- }
- >
-
- {title}
-
- {subtitle}
-
+ tag="a"
+ href="#"
+ withBorder
+ withArrow
+ key={title}
+ before={
+
+
+ }
+ after={
+
+ Completed
+
+ }
+ >
+
+ {title}
+
+ {subtitle}
+
+
+
+ Completed
+
+ }
+ >
+
+ {title}
+
+ {subtitle}
+
);
};
diff --git a/apps/site/src/content/design-system/components/popover/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/popover/code/development-examples/content.mdoc
index acf905137..f9876f2c4 100644
--- a/apps/site/src/content/design-system/components/popover/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/popover/code/development-examples/content.mdoc
@@ -21,3 +21,40 @@
```
+
+### Popover with inline link styling
+
+```tsx
+(null);
const handleClick = useCallback(() => {
@@ -57,13 +59,15 @@ export function Popover({
return (
{title}
- {payees.map(({ name, number, paidAt, bank, code }) => + {payees.map(({ name, number, paidAt, bank, code, svg }) => paidAt ? (
+ <>
+
+ {' '}
+ This is an example of using a popover as link.{' '}
+
+ Click here.
+
+
+ }
+ >
+
+
+
+
+```
\ No newline at end of file
diff --git a/packages/ui/src/components/input-group/input-group.styles.ts b/packages/ui/src/components/input-group/input-group.styles.ts
index 61012617b..d6c30e1ac 100644
--- a/packages/ui/src/components/input-group/input-group.styles.ts
+++ b/packages/ui/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: [
diff --git a/packages/ui/src/components/popover/popover.component.tsx b/packages/ui/src/components/popover/popover.component.tsx
index f274bb4c5..2bfe6ce65 100644
--- a/packages/ui/src/components/popover/popover.component.tsx
+++ b/packages/ui/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 = useRefInside paragraph
+
+ {' '}
+ This is an example of using a popover as link.{' '}
+
Inside hint
+
diff --git a/packages/ui/src/components/popover/popover.stories.tsx b/packages/ui/src/components/popover/popover.stories.tsx
index 86e01e92b..6409295e1 100644
--- a/packages/ui/src/components/popover/popover.stories.tsx
+++ b/packages/ui/src/components/popover/popover.stories.tsx
@@ -1,6 +1,8 @@
import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { Field } from '../field/field.component.js';
import { HelpIcon } from '../icon/index.js';
+import { Input } from '../input/input.component.js';
import { Popover } from './popover.component.js';
@@ -66,6 +68,38 @@ export const NoHeading: Story = {
},
};
+/**
+ * > Popover trigger as inline link appearance
+ */
+export const AsInlineLinkAppearance = () => (
+ <>
+
+ {' '}
+ This is an example of using a popover that looks like an inline link.{' '}
+
+ Click here.
+
+
+ }
+ >
+
+
+
+);
+
/**
* > Auto adjustment NOTE: Does not display correctly in story view please check individual story
*/
diff --git a/packages/ui/src/components/popover/popover.styles.ts b/packages/ui/src/components/popover/popover.styles.ts
index 6ab9bf998..493641592 100644
--- a/packages/ui/src/components/popover/popover.styles.ts
+++ b/packages/ui/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'] },
);
diff --git a/packages/ui/src/components/popover/popover.types.ts b/packages/ui/src/components/popover/popover.types.ts
index 14734e22b..eb7fccf16 100644
--- a/packages/ui/src/components/popover/popover.types.ts
+++ b/packages/ui/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 &
- Pick;
+ Pick;
Inside paragraph
+
+ {' '}
+ This is an example of using a popover that looks like an inline link.{' '}
+