UI k 5553/links redesign

crowdin.yml

@@ -120,15 +120,7 @@
     "translation": "/%original_path%/%two_letters_code%.json",
   },
   {
-    "source": "/semcore/notice/src/translations/en.json",
-    "translation": "/%original_path%/%two_letters_code%.json",
-  },
-  {
-    "source": "/semcore/notice-bubble/src/translations/en.json",
-    "translation": "/%original_path%/%two_letters_code%.json",
-  },
-  {
-    "source": "/semcore/notice-global/src/translations/en.json",
+    "source": "/semcore/link/src/translations/en.json",
     "translation": "/%original_path%/%two_letters_code%.json",
   },
   {

semcore/button/src/component/ButtonLink/ButtonLink.tsx

@@ -1,4 +1,4 @@
-import type { Intergalactic } from '@semcore/core';
+import type { Intergalactic, IRootComponentProps } from '@semcore/core';
 import { createComponent, sstyled, Root, Component } from '@semcore/core';
 import Link from '@semcore/link';
 import React from 'react';
@@ -37,6 +37,12 @@ class RootButtonLink extends Component<
   }
 }
 
+function Text(props: IRootComponentProps) {
+  const SText = Root;
+  const { styles } = props;
+  return sstyled(styles)(<SText render={Link.Text} />);
+}
+
 /**
  * ButtonLink
  *
@@ -45,7 +51,7 @@ class RootButtonLink extends Component<
 export const ButtonLink = createComponent<NSButtonLink.Component, typeof RootButtonLink>(
   RootButtonLink,
   {
-    Text: Link.Text,
+    Text,
     Addon: Link.Addon,
   },
   {

semcore/button/src/component/ButtonLink/buttonLink.shadow.css

@@ -4,12 +4,20 @@ SButtonLink {
 }
 
 SButtonLink[use='primary']:not([color]) {
-  color: var(--intergalactic-text-link, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary */
+  color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899));
+
+  SText {
+    text-decoration-color: transparent;
+  }
 
   &[active],
   &:active,
   &:hover {
-    color: var(--intergalactic-text-link-hover-active, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary-hover-active */
+    color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899));
+
+    SText {
+      text-decoration-color: currentColor;
+    }
   }
 }
 
@@ -19,11 +27,11 @@ SButtonLink[use='secondary']:not([color]) {
   &[active],
   &:active,
   &:hover {
-    color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
+    color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899));
   }
 }
 
 SButtonLink[use='secondary'] SText {
-  text-decoration-style: dashed;
+  text-decoration-style: dotted;
   text-decoration-color: currentColor;
 }

semcore/data-table/package.json

@@ -21,6 +21,7 @@
     "@semcore/checkbox": "^17.2.1",
     "@semcore/spin": "^17.2.1",
     "@semcore/tooltip": "^17.2.1",
+    "@semcore/link": "^17.2.1",
     "@semcore/widget-empty": "^17.2.1"
   },
   "devDependencies": {

semcore/data-table/src/components/LinkAction/LinkAction.tsx

@@ -0,0 +1,32 @@
+import { ButtonLink } from '@semcore/button';
+import Divider from '@semcore/divider';
+import LinkExternalM from '@semcore/icon/LinkExternal/m';
+import Link from '@semcore/link';
+import type { NSText } from '@semcore/typography';
+import React from 'react';
+
+interface IProps extends NSText.BaseProps, NSText.EllipsisProps, NSText.HintProps {
+  displayHref: string;
+  externalHref: string;
+  internalAction: string | (() => void);
+}
+
+export class LinkAction extends React.PureComponent<IProps> {
+  render(): React.ReactNode {
+    const { displayHref, externalHref, internalAction, ...textProps } = this.props;
+    return (
+      <>
+        {typeof internalAction === 'string'
+          ? (<Link href={internalAction}><Link.Text {...textProps}>{displayHref}</Link.Text></Link>)
+          : (<ButtonLink onClick={internalAction}><ButtonLink.Text {...textProps}>{displayHref}</ButtonLink.Text></ButtonLink>)}
+        <Divider orientation='vertical' mx={1} hMin={0} my={1} />
+        <Link
+          href={externalHref}
+          color='--gray-400'
+          addonLeft={() => <LinkExternalM width={14} height={14} />}
+          aria-label={externalHref}
+        />
+      </>
+    );
+  }
+}

semcore/data-table/src/index.ts

@@ -13,6 +13,7 @@ import type {
   ColumnGroupConfig,
   ColumnItemConfig,
 } from './components/DataTable/DataTable.types';
+import { LinkAction } from './components/LinkAction/LinkAction';
 import { SelectableRows } from './store/SelectableRows';
 
 const wrapDataTable = <PropsExtending extends {}>(
@@ -32,6 +33,7 @@ export {
   ROW_GROUP,
   wrapDataTable,
   SelectableRows,
+  LinkAction,
 };
 export type {
   DataTableSort,