diff --git a/examples/react-template/screens/Link.tsx b/examples/react-template/screens/Link.tsx index e99e00e6..3c668b51 100644 --- a/examples/react-template/screens/Link.tsx +++ b/examples/react-template/screens/Link.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { IconName, Link, Section, Text, Title, TitleLevels } from '@trilogy-ds/react/components' -import { Divider } from '@trilogy-ds/react' +import { Link, Section, Text, Title, TitleLevels } from '@trilogy-ds/react/components' +import { Icon, IconName } from '@trilogy-ds/react' export const LinkScreen = (): JSX.Element => { return ( @@ -16,14 +16,9 @@ export const LinkScreen = (): JSX.Element => { External link Link with icon - + External link - - - - - - Example + ) diff --git a/packages/react/components/link/Link.native.tsx b/packages/react/components/link/Link.native.tsx index a50168d6..175b2dc8 100644 --- a/packages/react/components/link/Link.native.tsx +++ b/packages/react/components/link/Link.native.tsx @@ -1,11 +1,7 @@ import * as React from 'react' import { Linking, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native' import { LinkProps } from './LinkProps' -import { TypographyAlign } from '@/objects' import { getColorStyle, TrilogyColor } from '@/objects/facets/Color' -import { TextLevels } from '@/components/text' -import { Icon } from '@/components/icon' -import { Spacer, SpacerSize } from '@/components/spacer' import { ComponentName } from '@/components/enumsComponentsName' /** @@ -16,55 +12,24 @@ import { ComponentName } from '@/components/enumsComponentsName' * @param children {React.ReactNode} * @param testId {string} id for test * @param accessibilityLabel {string} - * @param inline {boolean} If link is inside paragraphe - * @param iconName {IconName} Adding Icon Link * @param inverted {boolean} Inverted link */ -const Link = ({ - children, - to, - onClick, - testId, - accessibilityLabel, - inline, - iconName, - inverted, - ...others -}: LinkProps): JSX.Element => { - const linkLevels = (level: TextLevels) => { - return ( - (level && level == TextLevels.ONE && 16) || - (level && level == TextLevels.TWO && 14) || - (level && level == TextLevels.THREE && 12) || - (level && level == TextLevels.FOUR && 10) || - 10 - ) - } - - const getHeightLinkAndroid = (level: TextLevels) => { - return ( - (level && level == TextLevels.ONE && 20) || - (level && level == TextLevels.TWO && 18) || - (level && level == TextLevels.THREE && 15) || - (level && level == TextLevels.FOUR && 13) || - 14 - ) - } +const Link = ({ children, to, onClick, testId, accessibilityLabel, inverted, ...others }: LinkProps): JSX.Element => { const styles = StyleSheet.create({ linkAlignement: { alignSelf: 'baseline', }, container: { - padding: inline ? 4 : 8, - marginTop: inline ? -4 : 0, - marginBottom: inline ? -3 : -10, - paddingLeft: inline ? 4 : 0, - paddingRight: inline ? 4 : 0, + padding: 8, + marginTop: 0, + marginBottom: -10, + paddingLeft: 0, + paddingRight: 0, }, androidContainer: { - paddingLeft: inline ? 2 : 0, - paddingRight: inline ? 2 : 0, + paddingLeft: 0, + paddingRight: 0, }, link: { color: (inverted && getColorStyle(TrilogyColor.BACKGROUND)) || getColorStyle(TrilogyColor.MAIN), @@ -122,23 +87,13 @@ const Link = ({ } }} > - {iconName ? ( - - - {children} - - - - - ) : ( - - {children} - - )} + + {children} + ) : ( = (args) => ( <> Mot de passe oublié ? - Je suis dans un paragraphe et ceci est un{" "} - lien standard tandis que ceci est un - lien standard non souligné. ou bien - celui-ci non souligné. + Je suis dans un paragraphe et ceci est un lien standard -); +) export const DansUnParagraphe: Story = (args) => ( - Je suis dans un paragraphe et ceci est un{" "} - lien standard inline. + Je suis dans un paragraphe et ceci est un lien standard inline. -); +) DansUnParagraphe.args = { - inline: true, -}; + markup: 'span', +} -export const LiensVersPageExterne: Story = (args) => ( - En savoir plus -); +export const LiensVersPageExterne: Story = (args) => En savoir plus LiensVersPageExterne.args = { - iconName: IconName.NEW_TABBED_PAGE, - href: "_blank", -}; + blank: true, + href: 'https://github.com/BouyguesTelecom/trilogy', +} -export const LienAutonome: Story = (args) => ( - Mot de passe oublié -); +export const LienAutonome: Story = (args) => Mot de passe oublié LienAutonome.args = { - href: "_blank", -}; + href: 'https://github.com/BouyguesTelecom/trilogy' + + blank: true, +} export const Inverted: Story = (args) => ( -
+
Mot de passe oublié ?
-); +) Inverted.args = { inverted: true, -}; +} diff --git a/packages/react/components/link/Link.tsx b/packages/react/components/link/Link.tsx index 8b647bba..8ab6d6d9 100644 --- a/packages/react/components/link/Link.tsx +++ b/packages/react/components/link/Link.tsx @@ -1,8 +1,7 @@ import * as React from 'react' import clsx from 'clsx' import { LinkProps } from './LinkProps' -import { has, is } from '@/services/classify' -import { Icon, IconSize } from '@/components/icon' +import { is } from '@/services/classify' import { hashClass } from '@/helpers' import { useTrilogyContext } from '@/context' @@ -15,7 +14,6 @@ import { useTrilogyContext } from '@/context' * @param title {string} Title attribute * @param onClick {Function} onClick Event * @param accessibilityLabel {string} Accessibility label - * @param iconName {IconName} Adding Icon Link * @param inverted {boolean} Inverted link * @param others * - -------------------------- WEB PROPERTIES ------------------------------- @@ -27,75 +25,30 @@ import { useTrilogyContext } from '@/context' */ const Link = ({ - children, - className, - id, - to, - href, - onClick, - accessibilityLabel, - routerLink, - iconName, - inverted, - blank, - title, - ...others - }: LinkProps): JSX.Element => { + children, + className, + accessibilityLabel, + markup: LinkComponent = 'a', + inverted, + blank, + ...others +}: LinkProps): JSX.Element => { const { styled } = useTrilogyContext() - const classes = hashClass(styled, clsx('link', iconName && has('icon'), inverted && is('inverted'), className)) - - if (routerLink && to) { - const RouterLink = (routerLink ? routerLink : 'a') as React.ElementType - - const RouterLinkTrilogy = (): JSX.Element => { - return ( - - {children} - - ) - } - - return - } - - const LinkTrilogy = (): JSX.Element => { - return ( - - {iconName ? ( - <> - {children} - - - ) : ( - children - )} - - ) - } - - return + const classes = hashClass(styled, clsx('link', inverted && is('inverted'), className)) + + return ( + + {children} + + ) } export default Link diff --git a/packages/react/components/link/LinkProps.ts b/packages/react/components/link/LinkProps.ts index 5ed65846..29cadd63 100644 --- a/packages/react/components/link/LinkProps.ts +++ b/packages/react/components/link/LinkProps.ts @@ -1,4 +1,3 @@ -import { IconName, IconNameValues } from '../../components/icon' import { Accessibility, Clickable, Dev } from '../../objects/facets' import { CommonProps } from '../../objects/facets/CommonProps' @@ -9,9 +8,7 @@ export interface LinkProps extends Accessibility, Clickable, Dev, CommonProps { children?: React.ReactNode to?: string href?: string - routerLink?: React.ElementType - iconName?: IconName | IconNameValues - inline?: boolean + markup?: React.ElementType inverted?: boolean blank?: boolean title?: string diff --git a/packages/react/components/link/test/link.test.tsx b/packages/react/components/link/test/link.test.tsx index 6405feac..f84934a7 100644 --- a/packages/react/components/link/test/link.test.tsx +++ b/packages/react/components/link/test/link.test.tsx @@ -26,21 +26,10 @@ describe('Link component', () => { expect(handleClick).toHaveBeenCalled() }) - test('displays an icon when iconName is passed', async () => { - const { findByTestId } = render( - - Example - , - ) - const icon = await findByTestId('test-icon') - expect(icon).toHaveClass('link has-icon') - expect(icon).toBeInTheDocument() - }) - test('should have link with routerlink', () => { const fn = jest.fn() const { getByTestId } = render( - + example , )