@phillips/seldon 1.112.0 → 1.112.1

package/dist/components/Tags/Tags.d.ts

@@ -1,7 +1,8 @@
+import { default as React, ComponentProps } from 'react';
 export interface I18nObject {
     clearAllLabel?: string;
 }
-export interface TagsListProps {
+export interface TagsListProps extends ComponentProps<'ul'> {
     /**
      * Unique id for component testing
      */
@@ -40,8 +41,12 @@ export interface TagProps {
      * Tag item label.
      */
     label: string;
+    /**
+     * Tag button aria-label
+     */
+    removeText?: string;
 }
-export declare const Tag: ({ id, className, onRemove, label }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ id, className, onRemove, label, removeText }: TagProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * ## Overview
  *
@@ -51,5 +56,5 @@ export declare const Tag: ({ id, className, onRemove, label }: TagProps) => impo
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tags--overview)
  */
-declare const TagsList: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const TagsList: React.ForwardRefExoticComponent<Omit<TagsListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default TagsList;

package/dist/components/Tags/Tags.js

@@ -1,49 +1,58 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import c from "../../node_modules/classnames/index.js";
-import { getCommonProps as p, px as a } from "../../utils/index.js";
-import u from "../Button/Button.js";
-import N from "../IconButton/IconButton.js";
-import v from "../../assets/chevronRight.svg.js";
-import { ButtonVariants as h } from "../Button/types.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import v, { forwardRef as N } from "react";
+import d from "../../node_modules/classnames/index.js";
+import { getCommonProps as y, px as r } from "../../utils/index.js";
+import $ from "../Button/Button.js";
+import { ButtonVariants as p } from "../Button/types.js";
 import b from "../../assets/close.svg.js";
-const P = ({ id: e, className: s, onRemove: o, label: r }) => /* @__PURE__ */ m("div", { className: c(`${a}-tag`, `${a}-button`, s), "aria-label": "Close Tag", children: [
-  /* @__PURE__ */ t("div", { className: `${a}-tag__label`, children: r }),
-  /* @__PURE__ */ t("div", { onClick: () => o(r), className: `${a}-tag__button`, "data-testid": `${e}-item-close-button`, children: /* @__PURE__ */ t(N, { className: `${a}-tag__button--close`, children: /* @__PURE__ */ t(b, {}) }) })
-] }), C = f(
-  ({ className: e, children: s, clearAllLabel: o = "Clear All", onClear: r, ...i }, d) => {
-    const l = "tags-list", { className: g, ...$ } = p(i, "TagsList"), { id: n } = i;
-    return /* @__PURE__ */ m(
-      "div",
+import C from "../../assets/arrowPrev.svg.js";
+const w = ({ id: i, className: a, onRemove: o, label: s, removeText: e = "Remove" }) => /* @__PURE__ */ l(
+  $,
+  {
+    className: d(`${r}-tag`, `${r}-button`, a),
+    "aria-label": `${e} ${s}`,
+    onClick: () => o(s),
+    variant: p.tertiary,
+    children: [
+      /* @__PURE__ */ t("div", { className: `${r}-tag__label`, children: s }),
+      /* @__PURE__ */ t("div", { className: `${r}-tag__button`, "data-testid": `${i}-item-close-button`, children: /* @__PURE__ */ t(b, {}) })
+    ]
+  }
+), _ = N(
+  ({ className: i, children: a, clearAllLabel: o = "Clear All", onClear: s, ...e }, f) => {
+    const m = "tags-list", { className: g, ...u } = y(e, "TagsList"), { id: n } = e;
+    return /* @__PURE__ */ l(
+      "ul",
       {
-        className: c(`${a}-${l}`, g, e),
-        ...$,
-        ...i,
-        "data-testid": `${l}-${n}`,
-        ref: d,
+        className: d(`${r}-${m}`, g, i),
+        ...u,
+        ...e,
+        tabIndex: 0,
+        "data-testid": `${m}-${n}`,
+        ref: f,
         children: [
-          s,
-          Array.isArray(s) && s.length > 0 && /* @__PURE__ */ m(
-            u,
+          Array.isArray(a) ? v.Children.map(a, (c) => /* @__PURE__ */ t("li", { children: c }, c.props.id)) : a,
+          Array.isArray(a) && a.length > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ l(
+            $,
             {
-              onClick: r,
+              onClick: s,
               "data-testid": `${n}-clear-all-button`,
-              className: `${a}-${l}--clear`,
+              className: `${r}-${m}--clear`,
               "aria-label": o,
-              variant: h.tertiary,
+              variant: p.tertiary,
               children: [
-                /* @__PURE__ */ t("div", { className: `${a}-left-arrow`, children: /* @__PURE__ */ t(v, {}) }),
-                /* @__PURE__ */ t("div", { className: `${a}-label`, children: o })
+                /* @__PURE__ */ t(C, {}),
+                /* @__PURE__ */ t("div", { className: `${r}-label`, children: o })
               ]
             }
-          )
+          ) })
         ]
       }
     );
   }
 );
-C.displayName = "Tags";
+_.displayName = "Tags";
 export {
-  P as Tag,
-  C as default
+  w as Tag,
+  _ as default
 };

package/dist/components/Tags/Tags.stories.d.ts

@@ -1,7 +1,7 @@
 import { TagsListProps } from './Tags';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<Omit<TagsListProps, "ref"> & import('react').RefAttributes<HTMLUListElement>>;
 };
 export default meta;
 interface StoryProps extends TagsListProps {

package/dist/scss/components/Tags/_tags.scss

@@ -6,132 +6,102 @@
   flex-flow: row wrap;
   gap: $spacing-sm;
 
+  &:focus-visible {
+    border: unset;
+    outline: 1px solid $button-hover;
+    outline-offset: 1px;
+  }
+
   .#{$px}-tag {
-    align-items: center;
-    background-color: $pure-white;
     border: 1px solid $button-hover;
     border-radius: 6.25rem;
-    cursor: default;
-    display: flex;
-    gap: 0;
-    height: $button-tertiary-height;
-    justify-content: center;
-    padding: 0 $spacing-xsm 0 $spacing-sm;
+    gap: $spacing-micro;
+    padding: $spacing-micro $spacing-xsm $spacing-micro $spacing-sm;
 
     &__label {
       color: $button-hover;
-      font-size: 0.75rem;
+      font-size: $body-size3;
       font-variation-settings: 'wght' 600;
       text-align: center;
+
+      &:hover {
+        color: $pure-black;
+      }
     }
 
-    &__button {
-      align-items: center;
-      display: flex;
-      gap: $spacing-micro;
-      height: $button-tertiary-height;
-      justify-content: center;
-      padding: 0;
-
-      &--close {
-        height: 1.25rem;
-        width: 1.25rem;
-
-        svg {
-          height: 1rem;
-          width: 1rem;
-
-          path {
-            fill: $button-hover;
-          }
-
-          &:focus {
-            fill: $pure-black;
-          }
-        }
+    svg {
+      fill: $button-hover;
 
-        &:hover {
-          background-color: $pure-white;
+      path {
+        fill: $button-hover;
+      }
+    }
 
-          svg {
-            path {
-              fill: $pure-black;
-            }
-          }
-        }
+    &:hover {
+      color: $pure-black;
+
+      svg {
+        fill: $pure-black;
 
-        &:focus {
-          svg {
-            path {
-              fill: $pure-black;
-            }
-          }
+        path {
+          fill: $pure-black;
         }
       }
     }
   }
 
   &--clear {
+    @include text($body3);
+
     align-items: center;
     border-color: $pure-white;
+    border-style: solid;
+    border-width: 1px;
+    color: $button-hover;
     display: flex;
-    gap: 0;
+    gap: $spacing-micro;
     height: 2rem;
+    padding: 0 $spacing-sm;
 
-    &:hover {
-      cursor: pointer;
+    @include media($breakpoint-xl) {
+      padding: $spacing-sm;
+    }
 
-      .#{$px}-left-arrow {
-        svg {
-          fill: $pure-black;
+    svg {
+      fill: $button-hover;
+      height: 1rem;
+      width: 1rem;
 
-          path {
-            fill: $pure-black;
-          }
-        }
+      path {
+        fill: $button-hover;
       }
     }
 
-    &:focus-visible {
-      border-color: $button-hover;
-      border-radius: 6.25rem;
-      gap: 0;
-      outline-offset: 0;
-      padding: 0;
-    }
-
-    .#{$px}-left-arrow {
-      transform: rotateX(-1);
+    &:hover {
+      color: $pure-black;
+      cursor: pointer;
 
       svg {
-        height: 1rem;
-        width: 1rem;
-      }
-
-      &:hover {
-        background: $pure-white;
+        fill: $pure-black;
 
-        svg {
+        path {
           fill: $pure-black;
-
-          path {
-            fill: $pure-black;
-          }
-        }
-      }
-
-      &:focus-visible {
-        &:focus-visible {
-          outline: none;
-          outline-offset: none;
         }
       }
     }
 
-    .#{$px}-label {
-      color: $pure-black;
-      font-size: 0.875rem;
-      font-variation-settings: 'wght' 600;
+    &:focus-visible {
+      border-color: $button-hover;
+      border-radius: 6.25rem;
+      border-style: solid;
+      border-width: 1px;
+      outline-color: transparent;
+      outline-offset: unset;
+      padding: 0 $spacing-sm;
+
+      @include media($breakpoint-xl) {
+        padding: $spacing-sm;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.112.0",
+  "version": "1.112.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"