@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/src/system/content/typography/TypographyLink.features.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VStack } from '../../core/primitives/Stack';
+import { TypographyLink } from './TypographyLink';
+
+const meta: Meta<typeof TypographyLink> = {
+  title: 'Bumper/Content/TypographyLink/Features',
+  component: TypographyLink,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DisabledFalse: Story = {
+  args: {
+    disabled: false,
+    children: 'Enabled link (clickable with pointer cursor)',
+    onPress: () => alert('Link clicked!'),
+  },
+};
+
+export const DisabledTrue: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled link (not-allowed cursor, onPress removed)',
+    onPress: () => alert('This should not be called'),
+  },
+};
+
+export const NoUnderlineFalse: Story = {
+  args: {
+    noUnderline: false,
+    children: 'Link with underline (default)',
+    onPress: () => alert('Link clicked!'),
+  },
+};
+
+export const NoUnderlineTrue: Story = {
+  args: {
+    noUnderline: true,
+    children: 'Link without underline',
+    onPress: () => alert('Link clicked!'),
+  },
+};
+
+export const StateHover: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <TypographyLink forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state - underline removed (hoverStyle applied)
+      </TypographyLink>
+      <TypographyLink noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state with noUnderline - no visual change
+      </TypographyLink>
+      <TypographyLink disabled forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state on disabled - underline removed (hoverStyle applied)
+      </TypographyLink>
+      <TypographyLink disabled noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state with noUnderline on disabled - no visual change
+      </TypographyLink>
+    </VStack>
+  ),
+};

package/src/system/content/typography/TypographyLink.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { TypographyLink } from './TypographyLink';
+
+const meta: Meta<typeof TypographyLink> = {
+  title: 'Bumper/Content/TypographyLink',
+  component: TypographyLink,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'heading-2xl',
+        'heading-xl',
+        'heading-l',
+        'heading-m',
+        'heading-s',
+        'heading-xs',
+        'heading-2xs',
+        'body-xl',
+        'body-l',
+        'body-m',
+        'body-s',
+        'body-xs',
+        'label-xl',
+        'label-l',
+        'label-m',
+        'label-s',
+        'content-caps-3xl',
+        'content-caps-2xl',
+        'content-caps-xl',
+        'content-caps-l',
+        'content-caps-m',
+        'content-caps-s',
+        'content-caps-xs',
+      ],
+      description: 'Typography variant (inherited from Typography.Text)',
+    },
+    weight: {
+      control: 'select',
+      options: ['regular', 'semibold', 'bold'],
+      description: 'Font weight (inherited from Typography.Text)',
+    },
+    color: contentColorArgType,
+    disabled: {
+      control: 'boolean',
+      description: 'When true, shows not-allowed cursor and disabled color',
+    },
+    noUnderline: {
+      control: 'boolean',
+      description: 'When true, removes the underline decoration',
+    },
+    onPress: {
+      description: 'Click/press handler (automatically removed when disabled=true)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'body-m',
+    weight: 'regular',
+    color: '$content.accent',
+    disabled: false,
+    noUnderline: false,
+    children: 'This is a link',
+    onPress: () => alert('Link clicked!'),
+  },
+};

package/src/system/content/typography/TypographyLink.tsx

@@ -0,0 +1,38 @@
+import type { GetProps } from '@tamagui/core';
+import { styled } from '@tamagui/core';
+import { TypographyBase } from './Typography';
+
+export const TypographyLink = styled(TypographyBase, {
+  name: 'TypographyLink',
+  role: 'link',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        onPress: undefined,
+        color: '$content.disabled',
+        hoverStyle: undefined,
+      },
+      false: {
+        cursor: 'pointer',
+        hoverStyle: {
+          textDecorationLine: 'none',
+        },
+      },
+    },
+    noUnderline: {
+      true: {
+        textDecorationLine: 'none',
+      },
+      false: {
+        textDecorationLine: 'underline',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    disabled: false,
+    noUnderline: false,
+  },
+});
+
+export type TypographyLinkProps = GetProps<typeof TypographyLink>;

package/src/system/content/typography/TypographyView.tsx

@@ -0,0 +1,34 @@
+import type { GetProps } from '@tamagui/core';
+import { View, styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import { useTypographyContext } from './utils/typographyContext';
+
+const InternalTypographyView = styled(View, {
+  name: 'TypographyView',
+});
+
+type TypographyViewProps = GetProps<typeof InternalTypographyView>;
+
+/**
+ *
+ * A wrapper component that applies typography styles to its children in order to maintain consistent style between web and native
+ * In native, it simply renders a View as it renders correctly by default
+ * In web, it ensures that the display is set to inline-flex when inside a Typography context
+ *
+ * React Native Web includes this implementation in its codebase
+ * but Tamagui does not use React Native Webview, we need to implement it ourselves
+ *
+ * Inside a Typography component, always use TypographyView to wrap external components like Icon or Svg
+ */
+export function TypographyView(props: TypographyViewProps): ReactNode {
+  const isInTypographyContext = useTypographyContext();
+
+  return (
+    <InternalTypographyView
+      {...props}
+      $platform-web={
+        isInTypographyContext ? { ...props['$platform-web'], display: 'inline-flex' } : props['$platform-web']
+      }
+    />
+  );
+}