@sproutsocial/seeds-react-link 1.0.0

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: "",
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-link/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     4.21 KB
+CJS dist/index.js.map 5.41 KB
+CJS ⚡️ Build success in 56ms
+ESM dist/esm/index.js     2.27 KB
+ESM dist/esm/index.js.map 5.38 KB
+ESM ⚡️ Build success in 63ms
+DTS Build start
+DTS ⚡️ Build success in 18856ms
+DTS dist/index.d.ts  1.25 KB
+DTS dist/index.d.mts 1.25 KB
+Done in 21.76s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-link
+
+## 1.0.0
+
+### Major Changes
+
+- ed554e3: Migrated Link and Banner to standalone packages

package/dist/esm/index.js

@@ -0,0 +1,108 @@
+// src/Link.tsx
+import "react";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import {
+  TYPOGRAPHY,
+  COMMON,
+  FLEXBOX
+} from "@sproutsocial/seeds-react-system-props";
+import { focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
+import Text from "@sproutsocial/seeds-react-text";
+var Container = styled(Text)`
+  border: 0;
+  font-family: ${(props) => props.theme.fontFamily};
+  text-decoration: ${(props) => props.underline ? "underline" : "none"};
+  appearance: none;
+  cursor: pointer;
+  ${(props) => props.disabled && css`
+      opacity: 0.4;
+      cursor: not-allowed;
+    `}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  color: ${(props) => props.theme.colors.link.base};
+
+  &:hover {
+    color: ${(props) => props.theme.colors.link.hover};
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: ${(props) => props.theme.colors.link.hover};
+  }
+
+  &:focus {
+    ${focusRing}
+  }
+
+  &:focus:active {
+    box-shadow: none;
+  }
+
+  ${(props) => !props.href && css`
+      background: none;
+    `}
+
+  ${(props) => props.disabled && disabled}
+
+   ${COMMON}
+   ${TYPOGRAPHY}
+   ${FLEXBOX}
+`;
+var styles_default = Container;
+
+// src/Link.tsx
+import { jsx } from "react/jsx-runtime";
+var Link = ({
+  href,
+  external,
+  children,
+  disabled: disabled2,
+  onClick,
+  as,
+  underline = true,
+  qa = {},
+  ...rest
+}) => {
+  if (!href && external) {
+    console.warn(
+      "Warning: external prop cannot be set without a href declaration"
+    );
+  }
+  const type = as || (href ? "a" : "button");
+  return /* @__PURE__ */ jsx(
+    styles_default,
+    {
+      href,
+      target: external ? "_blank" : void 0,
+      type: type === "button" ? "button" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      forwardedAs: type,
+      "aria-disabled": disabled2 ? disabled2 : void 0,
+      disabled: disabled2,
+      onClick,
+      underline,
+      "data-qa-link": "",
+      "data-qa-link-isdisabled": disabled2 === true,
+      ...qa,
+      ...rest,
+      children
+    }
+  );
+};
+var Link_default = Link;
+
+// src/LinkTypes.ts
+import "react";
+
+// src/constants.ts
+import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
+
+// src/index.ts
+var src_default = Link_default;
+export {
+  Link_default as Link,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Link.tsx","../../src/styles.ts","../../src/LinkTypes.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Link = ({\n  href,\n  external,\n  children,\n  disabled,\n  onClick,\n  as,\n  underline = true,\n  qa = {},\n  ...rest\n}: TypeLinkProps) => {\n  if (!href && external) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Warning: external prop cannot be set without a href declaration\"\n    );\n  }\n\n  const type = as || (href ? \"a\" : \"button\");\n  return (\n    <Container\n      href={href}\n      target={external ? \"_blank\" : undefined}\n      type={type === \"button\" ? \"button\" : undefined}\n      rel={external ? \"noopener noreferrer\" : undefined}\n      forwardedAs={type}\n      aria-disabled={disabled ? disabled : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      underline={underline}\n      data-qa-link=\"\"\n      data-qa-link-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Link;\n","import styled, { css } from \"styled-components\";\nimport {\n  TYPOGRAPHY,\n  COMMON,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Container = styled(Text)<TypeLinkProps>`\n  border: 0;\n  font-family: ${(props) => props.theme.fontFamily};\n  text-decoration: ${(props) => (props.underline ? \"underline\" : \"none\")};\n  appearance: none;\n  cursor: pointer;\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n      cursor: not-allowed;\n    `}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.link.base};\n\n  &:hover {\n    color: ${(props) => props.theme.colors.link.hover};\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ${(props) => props.theme.colors.link.hover};\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  &:focus:active {\n    box-shadow: none;\n  }\n\n  ${(props) =>\n    !props.href &&\n    css`\n      background: none;\n    `}\n\n  ${(props) => props.disabled && disabled}\n\n   ${COMMON}\n   ${TYPOGRAPHY}\n   ${FLEXBOX}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeSystemFlexboxProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeLinkProps\n  extends Omit<\n      TypeTextProps,\n      keyof Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">\n    >,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\">,\n    TypeSystemFlexboxProps {\n  /** Optional prop to make the URL open in a new tab */\n  external?: boolean;\n  children: React.ReactNode;\n\n  /** Setting this prop will cause the component to be rendered as a link */\n  href?: string;\n\n  /** Disables user action and applies a disabled style to the component */\n  disabled?: boolean;\n\n  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  underline?: boolean;\n  qa?: { [key: string]: unknown }; // should this be string|number?\n}\n","import { COLOR_BLUE_900 } from \"@sproutsocial/seeds-color\";\n\nconst defaultLink = {\n  color: \"link\",\n  hoverColor: \"link.hover\",\n  activeColor: COLOR_BLUE_900,\n  fontWeight: \"semibold\",\n};\n\nconst linkTheme = {\n  default: defaultLink,\n};\n\nexport default linkTheme;\n","import Link from \"./Link\";\n\nexport default Link;\nexport { Link };\nexport * from \"./LinkTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,UAAU,WAAW;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,gBAAgB;AACpC,OAAO,UAAU;AAGjB,IAAM,YAAY,OAAO,IAAI;AAAA;AAAA,iBAEZ,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,qBAC7B,CAAC,UAAW,MAAM,YAAY,cAAc,MAAO;AAAA;AAAA;AAAA,IAGpE,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA,iBACY,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,WACjD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,aAGrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,MAI/C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,CAAC,UACD,CAAC,MAAM,QACP;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA;AAAA,KAEpC,MAAM;AAAA,KACN,UAAU;AAAA,KACV,OAAO;AAAA;AAGZ,IAAO,iBAAQ;;;AD/BX;AApBJ,IAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,KAAK,CAAC;AAAA,EACN,GAAG;AACL,MAAqB;AACnB,MAAI,CAAC,QAAQ,UAAU;AAErB,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,OAAO,OAAO,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,WAAW,WAAW;AAAA,MAC9B,MAAM,SAAS,WAAW,WAAW;AAAA,MACrC,KAAK,WAAW,wBAAwB;AAAA,MACxC,aAAa;AAAA,MACb,iBAAeA,YAAWA,YAAW;AAAA,MACrC,UAAUA;AAAA,MACV;AAAA,MACA;AAAA,MACA,gBAAa;AAAA,MACb,2BAAyBA,cAAa;AAAA,MACrC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE5Cf,OAAuB;;;ACAvB,SAAS,sBAAsB;;;ACE/B,IAAO,cAAQ;","names":["disabled"]}

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeSystemFlexboxProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+
+interface TypeLinkProps extends Omit<TypeTextProps, keyof Omit<React.ComponentPropsWithoutRef<"span">, "color">>, Omit<React.ComponentPropsWithoutRef<"button">, "color">, TypeSystemFlexboxProps {
+    /** Optional prop to make the URL open in a new tab */
+    external?: boolean;
+    children: React.ReactNode;
+    /** Setting this prop will cause the component to be rendered as a link */
+    href?: string;
+    /** Disables user action and applies a disabled style to the component */
+    disabled?: boolean;
+    /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
+    onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    as?: TypeStyledComponentsCommonProps["as"];
+    underline?: boolean;
+    qa?: {
+        [key: string]: unknown;
+    };
+}
+
+declare const Link: ({ href, external, children, disabled, onClick, as, underline, qa, ...rest }: TypeLinkProps) => react_jsx_runtime.JSX.Element;
+
+export { Link, type TypeLinkProps, Link as default };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeSystemFlexboxProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+
+interface TypeLinkProps extends Omit<TypeTextProps, keyof Omit<React.ComponentPropsWithoutRef<"span">, "color">>, Omit<React.ComponentPropsWithoutRef<"button">, "color">, TypeSystemFlexboxProps {
+    /** Optional prop to make the URL open in a new tab */
+    external?: boolean;
+    children: React.ReactNode;
+    /** Setting this prop will cause the component to be rendered as a link */
+    href?: string;
+    /** Disables user action and applies a disabled style to the component */
+    disabled?: boolean;
+    /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
+    onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    as?: TypeStyledComponentsCommonProps["as"];
+    underline?: boolean;
+    qa?: {
+        [key: string]: unknown;
+    };
+}
+
+declare const Link: ({ href, external, children, disabled, onClick, as, underline, qa, ...rest }: TypeLinkProps) => react_jsx_runtime.JSX.Element;
+
+export { Link, type TypeLinkProps, Link as default };

package/dist/index.js

@@ -0,0 +1,141 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Link: () => Link_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Link.tsx
+var React = require("react");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var Container = (0, import_styled_components.default)(import_seeds_react_text.default)`
+  border: 0;
+  font-family: ${(props) => props.theme.fontFamily};
+  text-decoration: ${(props) => props.underline ? "underline" : "none"};
+  appearance: none;
+  cursor: pointer;
+  ${(props) => props.disabled && import_styled_components.css`
+      opacity: 0.4;
+      cursor: not-allowed;
+    `}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  color: ${(props) => props.theme.colors.link.base};
+
+  &:hover {
+    color: ${(props) => props.theme.colors.link.hover};
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: ${(props) => props.theme.colors.link.hover};
+  }
+
+  &:focus {
+    ${import_seeds_react_mixins.focusRing}
+  }
+
+  &:focus:active {
+    box-shadow: none;
+  }
+
+  ${(props) => !props.href && import_styled_components.css`
+      background: none;
+    `}
+
+  ${(props) => props.disabled && import_seeds_react_mixins.disabled}
+
+   ${import_seeds_react_system_props.COMMON}
+   ${import_seeds_react_system_props.TYPOGRAPHY}
+   ${import_seeds_react_system_props.FLEXBOX}
+`;
+var styles_default = Container;
+
+// src/Link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = ({
+  href,
+  external,
+  children,
+  disabled: disabled2,
+  onClick,
+  as,
+  underline = true,
+  qa = {},
+  ...rest
+}) => {
+  if (!href && external) {
+    console.warn(
+      "Warning: external prop cannot be set without a href declaration"
+    );
+  }
+  const type = as || (href ? "a" : "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    styles_default,
+    {
+      href,
+      target: external ? "_blank" : void 0,
+      type: type === "button" ? "button" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      forwardedAs: type,
+      "aria-disabled": disabled2 ? disabled2 : void 0,
+      disabled: disabled2,
+      onClick,
+      underline,
+      "data-qa-link": "",
+      "data-qa-link-isdisabled": disabled2 === true,
+      ...qa,
+      ...rest,
+      children
+    }
+  );
+};
+var Link_default = Link;
+
+// src/LinkTypes.ts
+var React2 = require("react");
+
+// src/constants.ts
+var import_seeds_color = require("@sproutsocial/seeds-color");
+
+// src/index.ts
+var src_default = Link_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Link
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Link.tsx","../src/styles.ts","../src/LinkTypes.ts","../src/constants.ts"],"sourcesContent":["import Link from \"./Link\";\n\nexport default Link;\nexport { Link };\nexport * from \"./LinkTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Link = ({\n  href,\n  external,\n  children,\n  disabled,\n  onClick,\n  as,\n  underline = true,\n  qa = {},\n  ...rest\n}: TypeLinkProps) => {\n  if (!href && external) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Warning: external prop cannot be set without a href declaration\"\n    );\n  }\n\n  const type = as || (href ? \"a\" : \"button\");\n  return (\n    <Container\n      href={href}\n      target={external ? \"_blank\" : undefined}\n      type={type === \"button\" ? \"button\" : undefined}\n      rel={external ? \"noopener noreferrer\" : undefined}\n      forwardedAs={type}\n      aria-disabled={disabled ? disabled : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      underline={underline}\n      data-qa-link=\"\"\n      data-qa-link-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Link;\n","import styled, { css } from \"styled-components\";\nimport {\n  TYPOGRAPHY,\n  COMMON,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Container = styled(Text)<TypeLinkProps>`\n  border: 0;\n  font-family: ${(props) => props.theme.fontFamily};\n  text-decoration: ${(props) => (props.underline ? \"underline\" : \"none\")};\n  appearance: none;\n  cursor: pointer;\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n      cursor: not-allowed;\n    `}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.link.base};\n\n  &:hover {\n    color: ${(props) => props.theme.colors.link.hover};\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ${(props) => props.theme.colors.link.hover};\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  &:focus:active {\n    box-shadow: none;\n  }\n\n  ${(props) =>\n    !props.href &&\n    css`\n      background: none;\n    `}\n\n  ${(props) => props.disabled && disabled}\n\n   ${COMMON}\n   ${TYPOGRAPHY}\n   ${FLEXBOX}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeSystemFlexboxProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeLinkProps\n  extends Omit<\n      TypeTextProps,\n      keyof Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">\n    >,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\">,\n    TypeSystemFlexboxProps {\n  /** Optional prop to make the URL open in a new tab */\n  external?: boolean;\n  children: React.ReactNode;\n\n  /** Setting this prop will cause the component to be rendered as a link */\n  href?: string;\n\n  /** Disables user action and applies a disabled style to the component */\n  disabled?: boolean;\n\n  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  underline?: boolean;\n  qa?: { [key: string]: unknown }; // should this be string|number?\n}\n","import { COLOR_BLUE_900 } from \"@sproutsocial/seeds-color\";\n\nconst defaultLink = {\n  color: \"link\",\n  hoverColor: \"link.hover\",\n  activeColor: COLOR_BLUE_900,\n  fontWeight: \"semibold\",\n};\n\nconst linkTheme = {\n  default: defaultLink,\n};\n\nexport default linkTheme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAA4B;AAC5B,sCAIO;AACP,gCAAoC;AACpC,8BAAiB;AAGjB,IAAM,gBAAY,yBAAAA,SAAO,wBAAAC,OAAI;AAAA;AAAA,iBAEZ,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,qBAC7B,CAAC,UAAW,MAAM,YAAY,cAAc,MAAO;AAAA;AAAA;AAAA,IAGpE,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA,iBACY,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,WACjD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,aAGrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,MAI/C,mCAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,CAAC,UACD,CAAC,MAAM,QACP;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAAA,KAEpC,sCAAM;AAAA,KACN,0CAAU;AAAA,KACV,uCAAO;AAAA;AAGZ,IAAO,iBAAQ;;;AD/BX;AApBJ,IAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,KAAK,CAAC;AAAA,EACN,GAAG;AACL,MAAqB;AACnB,MAAI,CAAC,QAAQ,UAAU;AAErB,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,OAAO,OAAO,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,WAAW,WAAW;AAAA,MAC9B,MAAM,SAAS,WAAW,WAAW;AAAA,MACrC,KAAK,WAAW,wBAAwB;AAAA,MACxC,aAAa;AAAA,MACb,iBAAeA,YAAWA,YAAW;AAAA,MACrC,UAAUA;AAAA,MACV;AAAA,MACA;AAAA,MACA,gBAAa;AAAA,MACb,2BAAyBA,cAAa;AAAA,MACrC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE5Cf,IAAAC,SAAuB;;;ACAvB,yBAA+B;;;AJE/B,IAAO,cAAQ;","names":["styled","Text","disabled","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-link",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sproutsocial/seeds-react-link",
+  "version": "1.0.0",
+  "description": "Seeds React Link",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-mixins": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-color": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-box": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Link.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import Container from "./styles";
+import type { TypeLinkProps } from "./LinkTypes";
+
+const Link = ({
+  href,
+  external,
+  children,
+  disabled,
+  onClick,
+  as,
+  underline = true,
+  qa = {},
+  ...rest
+}: TypeLinkProps) => {
+  if (!href && external) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Warning: external prop cannot be set without a href declaration"
+    );
+  }
+
+  const type = as || (href ? "a" : "button");
+  return (
+    <Container
+      href={href}
+      target={external ? "_blank" : undefined}
+      type={type === "button" ? "button" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      forwardedAs={type}
+      aria-disabled={disabled ? disabled : undefined}
+      disabled={disabled}
+      onClick={onClick}
+      underline={underline}
+      data-qa-link=""
+      data-qa-link-isdisabled={disabled === true}
+      {...qa}
+      {...rest}
+    >
+      {children}
+    </Container>
+  );
+};
+
+export default Link;

package/src/LinkTypes.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeTextProps } from "@sproutsocial/seeds-react-text";
+import type { TypeSystemFlexboxProps } from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeLinkProps
+  extends Omit<
+      TypeTextProps,
+      keyof Omit<React.ComponentPropsWithoutRef<"span">, "color">
+    >,
+    Omit<React.ComponentPropsWithoutRef<"button">, "color">,
+    TypeSystemFlexboxProps {
+  /** Optional prop to make the URL open in a new tab */
+  external?: boolean;
+  children: React.ReactNode;
+
+  /** Setting this prop will cause the component to be rendered as a link */
+  href?: string;
+
+  /** Disables user action and applies a disabled style to the component */
+  disabled?: boolean;
+
+  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
+  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+  as?: TypeStyledComponentsCommonProps["as"];
+  underline?: boolean;
+  qa?: { [key: string]: unknown }; // should this be string|number?
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { TYPOGRAPHY_SIZE_600 } from "@sproutsocial/seeds-typography";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Link from "../Link";
+
+describe("Racine Link", () => {
+  it("should render in an anchor tag", () => {
+    render(
+      <Link href="http://sproutsocial.style" external>
+        Link
+      </Link>
+    );
+    expect(screen.getByText("Link")).toBeInTheDocument();
+  });
+
+  it("should render disabled", () => {
+    render(
+      <>
+        <Link>Regular Link</Link>
+        <Link disabled>Disabled Link</Link>
+      </>
+    );
+    expect(screen.getByText("Regular Link")).toBeEnabled();
+    expect(screen.getByText("Disabled Link")).toBeDisabled();
+  });
+
+  it("setting external to prop true should add target blank attribute to anchor", () => {
+    render(
+      <Link href="http://sproutsocial.com" external>
+        Link
+      </Link>
+    );
+    expect(screen.getByText("Link").closest("a")?.target).toEqual("_blank");
+  });
+
+  it("setting external to prop true should add rel='noopener' attribute", () => {
+    render(
+      <Link href="http://sproutsocial.com" external>
+        Link
+      </Link>
+    );
+    expect(screen.getByText("Link").closest("a")?.rel).toEqual(
+      "noopener noreferrer"
+    );
+  });
+
+  it("setting a onClick instead of href renders component as a Button", () => {
+    render(
+      <Link
+        onClick={() => {
+          // eslint-disable-next-line no-console
+          console.log("Button");
+        }}
+      >
+        Am I a button?
+      </Link>
+    );
+    expect(screen.getByText("Am I a button?").tagName).toEqual("BUTTON");
+  });
+
+  it("setting both href and onClick renders component as an Anchor", () => {
+    render(
+      <Link
+        href="http://sproutsocial.com"
+        onClick={() => {
+          // eslint-disable-next-line no-console
+          console.log("Button");
+        }}
+      >
+        Am I a button?
+      </Link>
+    );
+    expect(screen.getByText("Am I a button?").tagName).toEqual("A");
+  });
+
+  it("Using the 'as' prop works as expected and retains styles from Text and Link", () => {
+    render(
+      <Link
+        as="span"
+        fontSize={600}
+        href="//sproutsocial.com/seeds/components/link"
+      >
+        Link as span
+      </Link>
+    );
+    expect(screen.getByText("Link as span").tagName).toEqual("SPAN");
+    expect(screen.getByText("Link as span")).toHaveStyleRule(
+      "font-size",
+      TYPOGRAPHY_SIZE_600.fontSize
+    );
+  });
+
+  it("Has type attribute as button when rendered as a button element", () => {
+    render(<Link>Link</Link>);
+    expect(screen.getByDataQaLabel({ link: "" }).tagName).toEqual("BUTTON");
+  });
+
+  it("Does not have type attribute when rendered as an anchor element", () => {
+    render(<Link href="google.com">Link</Link>);
+    expect(screen.getByDataQaLabel({ link: "" })).not.toHaveAttribute("type");
+    expect(screen.getByDataQaLabel({ link: "" }).tagName).not.toEqual("BUTTON");
+  });
+
+  it("Can render with an underline", () => {
+    render(<Link underline>Link</Link>);
+    expect(screen.getByText("Link")).toHaveStyleRule(
+      "text-decoration",
+      "underline"
+    );
+  });
+});

package/src/__tests__/types.test.tsx

@@ -0,0 +1,47 @@
+import React, { Fragment } from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import Link from "../Link";
+
+describe("Link Types", () => {
+  it("should render valid props", () => {
+    render(
+      <Fragment>
+        <Link href="http://sproutsocial.style">Link</Link>
+        <Link href="http://sproutsocial.style" external={false}>
+          Link
+        </Link>
+        <Link href="http://sproutsocial.style" external>
+          Link
+        </Link>
+        <Link href="#anchor">Link</Link>
+        <Link onClick={jest.fn()}>Link</Link>
+        <Link
+          fontSize={200}
+          fontWeight="bold"
+          color="text.subtext"
+          href="#anchor"
+        >
+          Link
+        </Link>
+        <Link
+          title="title"
+          fontSize={200}
+          fontWeight="bold"
+          href="#anchor"
+          external
+          truncated
+          ml="300"
+          style={{ whiteSpace: "nowrap" }}
+        >
+          Link
+        </Link>
+        {/* @ts-expect-error -test that childess is rejected */}
+        <Link fontSize={200} fontWeight="bold" href="#anchor" />
+        {/* @ts-expect-error -test that improper front size is rejected */}
+        <Link fontSize="12" href="link.com">
+          Link
+        </Link>
+      </Fragment>
+    );
+  });
+});

package/src/constants.ts

@@ -0,0 +1,14 @@
+import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
+
+const defaultLink = {
+  color: "link",
+  hoverColor: "link.hover",
+  activeColor: COLOR_BLUE_900,
+  fontWeight: "semibold",
+};
+
+const linkTheme = {
+  default: defaultLink,
+};
+
+export default linkTheme;

package/src/index.stories.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+// @ts-ignore-next-line: TS hates that this isn't part of the package.json vite magic
+import { Banner } from "@sproutsocial/seeds-react-banner";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Link } from "./";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Link> = {
+  title: "Components/Link",
+  component: Link,
+  args: {
+    href: "?path=/story/components-button--primary",
+    children: "Normal link",
+    external: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const NormalLink: Story = {
+  args: {
+    href: "?path=/story/components-button--primary",
+    children: "Normal link",
+    external: false,
+  },
+};
+
+export const ExternalLink: Story = {
+  render: (args) => (
+    <Link {...args}>
+      <Box display="flex" alignItems="center">
+        External link
+        <Icon
+          ml={200}
+          size="mini"
+          name="arrow-right-up-solid"
+          role={undefined}
+          svgProps={{ role: "img", "aria-label": "opens in a new tab" }}
+        />
+      </Box>
+    </Link>
+  ),
+  args: {
+    href: "#YouClickedAnExternalLink",
+    external: true,
+    children: "Opens in a new tab",
+  },
+};
+
+export const LinkAsAButton: Story = {
+  render: (args) => (
+    <Link
+      onClick={() => {
+        alert("You clicked a Button that looks like a Link!");
+      }}
+    >
+      {args.children}
+    </Link>
+  ),
+  args: {
+    children: "Primary Link",
+  },
+};
+
+export const UnderlinedLink: Story = {
+  render: (args) => <Link underline={false}>{args.children}</Link>,
+  args: {
+    children: "Link underline set to false",
+  },
+};
+
+export const DecorativeBackgrounds: Story = {
+  render: () => (
+    <Banner
+      text={
+        <Box
+          width={1}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text>Banners use decorative backgrounds</Text>
+          <Link external href="https://seeds.sproutsocial.com/components/link">
+            Links use text.body
+            <Icon
+              ml={200}
+              size="mini"
+              name="arrow-right-up-solid"
+              role={undefined}
+              svgProps={{ role: "img", "aria-label": "opens in a new tab" }}
+            />
+          </Link>
+        </Box>
+      }
+    />
+  ),
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+import Link from "./Link";
+
+export default Link;
+export { Link };
+export * from "./LinkTypes";
+export * from "./constants";

package/src/styles.ts

@@ -0,0 +1,56 @@
+import styled, { css } from "styled-components";
+import {
+  TYPOGRAPHY,
+  COMMON,
+  FLEXBOX,
+} from "@sproutsocial/seeds-react-system-props";
+import { focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
+import Text from "@sproutsocial/seeds-react-text";
+import type { TypeLinkProps } from "./LinkTypes";
+
+const Container = styled(Text)<TypeLinkProps>`
+  border: 0;
+  font-family: ${(props) => props.theme.fontFamily};
+  text-decoration: ${(props) => (props.underline ? "underline" : "none")};
+  appearance: none;
+  cursor: pointer;
+  ${(props) =>
+    props.disabled &&
+    css`
+      opacity: 0.4;
+      cursor: not-allowed;
+    `}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  color: ${(props) => props.theme.colors.link.base};
+
+  &:hover {
+    color: ${(props) => props.theme.colors.link.hover};
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: ${(props) => props.theme.colors.link.hover};
+  }
+
+  &:focus {
+    ${focusRing}
+  }
+
+  &:focus:active {
+    box-shadow: none;
+  }
+
+  ${(props) =>
+    !props.href &&
+    css`
+      background: none;
+    `}
+
+  ${(props) => props.disabled && disabled}
+
+   ${COMMON}
+   ${TYPOGRAPHY}
+   ${FLEXBOX}
+`;
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));