@coopdigital/react 0.12.1 → 0.13.0

package/dist/components/Pill/Pill.d.ts

@@ -21,7 +21,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     size?: "sm" | "md" | "lg" | "xl";
 }
 /**
- * The Pill component is a small, rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
+ * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
 export declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -2,7 +2,7 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import React from 'react';
 
 /**
- * The Pill component is a small, rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
+ * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
 const Pill = (_a) => {
     var { ariaLabel, as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md" } = _a, props = __rest(_a, ["ariaLabel", "as", "badge", "badgeColor", "children", "className", "href", "pillColor", "size"]);

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,26 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import React from "react";
+export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
+    /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
+    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Receives any className to be applied to Tag component. */
+    className?: string;
+    /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
+    href?: string;
+    /** **(Optional)** Specifies the Tag background color from the available options. */
+    tagColor?: "white" | "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
+}
+/**
+ * Tag is a simple component that is meant to communicate a brief message such as categories.
+ *
+ * It has similarities with Pill component but also has differences such as:
+ * - Tag doesn't accept a badge option
+ * - Tags have more rounded corners compared to Pill
+ * - Tags are more compact compared to Pill
+ * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
+ *
+ */
+export declare const Tag: ({ as, children, className, href, tagColor, ...props }: TagProps) => JSX.Element;
+export default Tag;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,24 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+
+/**
+ * Tag is a simple component that is meant to communicate a brief message such as categories.
+ *
+ * It has similarities with Pill component but also has differences such as:
+ * - Tag doesn't accept a badge option
+ * - Tags have more rounded corners compared to Pill
+ * - Tags are more compact compared to Pill
+ * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
+ *
+ */
+const Tag = (_a) => {
+    var { as, children, className = "", href, tagColor = "grey" } = _a, props = __rest(_a, ["as", "children", "className", "href", "tagColor"]);
+    let element = href ? "a" : "span";
+    const componentProps = Object.assign({ className: `coop-tag ${className}`, "data-tag-color": tagColor, href }, props);
+    if (as) {
+        element = as;
+    }
+    return React.createElement(element, Object.assign({}, componentProps), children);
+};
+
+export { Tag, Tag as default };

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,4 @@
+import Tag from "./Tag";
+export default Tag;
+export { Tag };
+export * from "./Tag";

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from "./components/Pill";
 export * from "./components/RootSVG";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
+export * from "./components/Tag";

package/dist/index.js

@@ -7,3 +7,4 @@ export { Pill } from './components/Pill/Pill.js';
 export { default as RootSVG } from './components/RootSVG/RootSVG.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
+export { Tag } from './components/Tag/Tag.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.11.0",
+    "@coopdigital/styles": "^0.12.0",
     "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -66,5 +66,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "c4995d875a4e9d54ef3c23c8652902fe6f1068cc"
+  "gitHead": "81b0f15eb07450a777497068be1422ebf01dc2fa"
 }

package/src/components/Pill/Pill.tsx

@@ -25,7 +25,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
 }
 
 /**
- * The Pill component is a small, rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
+ * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
 export const Pill = ({
   ariaLabel,

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,61 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+
+import React from "react"
+
+export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
+  /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Receives any className to be applied to Tag component. */
+  className?: string
+  /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
+  href?: string
+  /** **(Optional)** Specifies the Tag background color from the available options. */
+  tagColor?:
+    | "white"
+    | "grey"
+    | "purple"
+    | "pink"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "lilac"
+    | "blue"
+}
+
+/**
+ * Tag is a simple component that is meant to communicate a brief message such as categories.
+ *
+ * It has similarities with Pill component but also has differences such as:
+ * - Tag doesn't accept a badge option
+ * - Tags have more rounded corners compared to Pill
+ * - Tags are more compact compared to Pill
+ * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
+ *
+ */
+
+export const Tag = ({
+  as,
+  children,
+  className = "",
+  href,
+  tagColor = "grey",
+  ...props
+}: TagProps): JSX.Element => {
+  let element: TagProps["as"] = href ? "a" : "span"
+  const componentProps = {
+    className: `coop-tag ${className}`,
+    "data-tag-color": tagColor,
+    href,
+    ...props,
+  }
+  if (as) {
+    element = as
+  }
+  return React.createElement(element, { ...componentProps }, children)
+}
+
+export default Tag

package/src/components/Tag/index.ts

@@ -0,0 +1,5 @@
+import Tag from "./Tag"
+
+export default Tag
+export { Tag }
+export * from "./Tag"

package/src/index.ts

@@ -7,3 +7,4 @@ export * from "./components/Pill"
 export * from "./components/RootSVG"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
+export * from "./components/Tag"