Merge pull request #27 from input-output-hk/feat/lw-10645-improve-text-link-component

feat: add limited px prop to text link component [LW-10645]

Author: DominikGuzei

src/design-system/text-link/text-link.component.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
+import { spacing } from '../../design-tokens';
 import { Flex } from '../flex';
 import { Text } from '../text';
 
@@ -12,10 +13,12 @@ import type { OmitClassName } from '../../types';
 export type Props = OmitClassName<'a'> & {
   disabled?: boolean;
   label?: string;
+  px?: keyof typeof spacing;
 };
 
 export const TextLink = ({
   disabled = false,
+  px = '$8',
   label,
   ...props
 }: Readonly<Props>): JSX.Element => {
@@ -26,6 +29,7 @@ export const TextLink = ({
       className={classNames(cx.button, cx.container)}
       alignItems="center"
       justifyContent="center"
+      px={px}
     >
       <Flex alignItems="center" justifyContent="center">
         <Text.Button

src/design-system/text-link/text-link.css.ts

@@ -1,39 +1,34 @@
-import { sx, style, vars, createVar, globalStyle } from '../../design-tokens';
+import { style, vars, createVar, globalStyle } from '../../design-tokens';
 
 export const button = style({});
 
 export const borderGap = createVar();
 
-export const container = style([
-  sx({
-    px: '$8',
-  }),
-  {
-    border: 'none',
-    outline: 'none',
-    position: 'relative',
-    zIndex: 1,
-    cursor: 'pointer',
-    display: 'inline-flex',
-
-    vars: {
-      [borderGap]: '2px',
-    },
+export const container = style({
+  border: 'none',
+  outline: 'none',
+  position: 'relative',
+  zIndex: 1,
+  cursor: 'pointer',
+  display: 'inline-flex',
 
-    selectors: {
-      '&[aria-disabled="true"]': {
-        opacity: vars.opacities.$0_24,
-      },
+  vars: {
+    [borderGap]: '2px',
+  },
 
-      '&:focus:not(:active)': {
-        outlineColor: `${vars.colors.$buttons_secondary_container_outlineColor}`,
-        outlineWidth: vars.spacing.$4,
-        outlineStyle: 'solid',
-        borderRadius: vars.spacing.$4,
-      },
+  selectors: {
+    '&[aria-disabled="true"]': {
+      opacity: vars.opacities.$0_24,
+    },
+
+    '&:focus:not(:active)': {
+      outlineColor: `${vars.colors.$buttons_secondary_container_outlineColor}`,
+      outlineWidth: vars.spacing.$4,
+      outlineStyle: 'solid',
+      borderRadius: vars.spacing.$4,
     },
   },
-]);
+});
 
 export const label = style([
   {

src/design-system/text-link/text-link.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta } from '@storybook/react';
 
 import { Variants, Section, page, UIStateTable } from '../decorators';
 import { Grid, Cell } from '../grid';
+import { Text } from '../text';
 
 import { TextLink } from './text-link.component';
 
@@ -15,7 +16,7 @@ export default {
   decorators: [page({ title: 'Text Link', subtitle })],
 } as Meta;
 
-const Buttons = (): JSX.Element => (
+const TextLinkExamples = (): JSX.Element => (
   <>
     <Variants.Row>
       <Variants.Cell>
@@ -69,10 +70,22 @@ export const Overview = (): JSX.Element => (
     <Cell>
       <Section title="Main components">
         <UIStateTable>
-          <Buttons />
+          <TextLinkExamples />
         </UIStateTable>
       </Section>
     </Cell>
+    <Cell>
+      <Section title="Usage Examples">
+        <Text.Body.Normal>
+          This is an example of a text link in the
+          <TextLink px="$4" label="middle" />
+          of a text using horizontal padding (default).
+        </Text.Body.Normal>
+      </Section>
+    </Cell>
+    <Cell>
+      <TextLink px="$0" label="Example without horizontal padding" />
+    </Cell>
   </Grid>
 );