diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index c11fd5e..e475f9e 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -64,6 +64,14 @@ export function Button< const Tag = as ?? (href ? AriaLink : AriaButton); + const isExternal = href && (href.startsWith('http://') || href.startsWith('https://')); + + const linkProps = { + href, + target: isExternal ? '_blank' : undefined, + rel: isExternal ? 'noopener noreferrer' : undefined, + }; + const variantClasses = variantStyles[variant]; const sizeClasses = iconify ? sizeIconStyles[size] : @@ -92,6 +100,7 @@ export function Button< iconify && 'rounded-full', className )} + {...linkProps} {...props} > {startContent && {startContent}} diff --git a/packages/ui/src/widgets/Header/Header.stories.tsx b/packages/ui/src/widgets/Header/Header.stories.tsx index 208ccf3..45a1a33 100644 --- a/packages/ui/src/widgets/Header/Header.stories.tsx +++ b/packages/ui/src/widgets/Header/Header.stories.tsx @@ -133,6 +133,7 @@ export const Extended: Story = { variant: 'extended', socials, brand: { + name: 'User Interface Library', logo: 'https://github.com/do-ob-io/shared/blob/main/do-ob-logo-readme.png?raw=true', }, navigation: { diff --git a/packages/ui/src/widgets/Header/HeaderExtended.tsx b/packages/ui/src/widgets/Header/HeaderExtended.tsx index 72386c1..a89c5a7 100644 --- a/packages/ui/src/widgets/Header/HeaderExtended.tsx +++ b/packages/ui/src/widgets/Header/HeaderExtended.tsx @@ -1,6 +1,8 @@ import { cn } from '@do-ob/ui/utility'; +import { Toolbar } from 'react-aria-components'; import { Brand, Navigation } from '@do-ob/ui/widgets'; import type { HeaderProps } from './Header.types'; +import { SocialButtons } from '../SocialButtons/SocialButtons'; const maxWidthScreenStyles = { sm: 'max-w-screen-sm', @@ -13,6 +15,7 @@ const maxWidthScreenStyles = { export function HeaderExtended({ brand, navigation, + socials, maxWidth = '2xl', className, ...props @@ -35,10 +38,10 @@ export function HeaderExtended({
-
-
- -
+
+ + +
diff --git a/packages/ui/src/widgets/Header/HeaderStandard.tsx b/packages/ui/src/widgets/Header/HeaderStandard.tsx index 00be6e6..737acea 100644 --- a/packages/ui/src/widgets/Header/HeaderStandard.tsx +++ b/packages/ui/src/widgets/Header/HeaderStandard.tsx @@ -1,6 +1,8 @@ import { cn } from '@do-ob/ui/utility'; import { Brand, Navigation } from '@do-ob/ui/widgets'; import type { HeaderProps } from './Header.types'; +import { Toolbar } from 'react-aria-components'; +import { SocialButtons } from '../SocialButtons/SocialButtons'; const maxWidthScreenStyles = { sm: 'max-w-screen-sm', @@ -13,6 +15,7 @@ const maxWidthScreenStyles = { export function HeaderStandard({ brand, navigation, + socials, maxWidth = '2xl', className, ...props @@ -31,7 +34,9 @@ export function HeaderStandard({ )}> -
 
+ + + ); diff --git a/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx b/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx index 87349b0..e46b31f 100644 --- a/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx +++ b/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx @@ -17,7 +17,7 @@ const socialIcons: Record Promise