Merge branch 'main' into fix/warning-icon-triangle-solid-naming

Author: tommayeliog

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.9.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.8.0...v1.9.0) (2024-07-11)
+
+
+### Features
+
+* change message property type for info bar component ([7a0b7fd](https://github.com/input-output-hk/lace-ui-toolkit/commit/7a0b7fd3d6f0eff6c4b6b0e4b483c1b0b131912e))
+
+# [1.8.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.7.0...v1.8.0) (2024-07-11)
+
+
+### Features
+
+* add limited px prop to text link component [LW-10645] ([f9150cf](https://github.com/input-output-hk/lace-ui-toolkit/commit/f9150cfe359945f781c08692bfccbd5c192bd710))
+
 # [1.7.0](https://github.com/input-output-hk/lace-ui-toolkit/compare/v1.6.0...v1.7.0) (2024-07-10)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@input-output-hk/lace-ui-toolkit",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Lace UI Toolkit",
   "homepage": "https://github.com/input-output-hk/lace-ui-toolkit/blob/main/README.md",
   "bugs": {

src/design-system/info-bar/info-bar.component.tsx

@@ -9,7 +9,7 @@ import { Text } from '../text';
 import * as cx from './info-bar.css';
 
 export interface Props {
-  message: string;
+  message: ReactNode;
   icon: ReactNode;
   callToAction?: {
     label?: string;

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>
 );