@sproutsocial/seeds-react-list 0.3.41 → 0.4.0

package/src/__tests__/ListRouting.test.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { theme } from "@sproutsocial/seeds-react-theme";
+import List from "../List";
+import ListItem from "../ListItem";
+
+/**
+ * Routing and static-CSS tests for the List/ListItem Tailwind hybrid.
+ *
+ * The default (Tailwind) path renders semantic `seeds-list*` classes and no
+ * runtime CSS-in-JS. The styled-components path is retained for compatibility
+ * signals — system props (hasStyledProps), and styled() extensions
+ * (isStyledExtension) — and is the only path that resolves styled-system rules.
+ *
+ * CSS files are mocked in jest, so the Tailwind path is asserted via class
+ * names and the styled path via resolved style rules.
+ */
+
+describe("List routing", () => {
+  it("renders the Tailwind path by default", () => {
+    const { container } = render(
+      <List>
+        <li>Item</li>
+      </List>
+    );
+    expect(container.querySelector("ul")).toHaveClass("seeds-list");
+  });
+
+  it("places semantic class before consumer className", () => {
+    const { container } = render(
+      <List className="consumer">
+        <li>Item</li>
+      </List>
+    );
+    expect(container.querySelector("ul")?.className).toBe(
+      "seeds-list consumer"
+    );
+  });
+
+  it("routes to the styled-components path when a system prop is present", () => {
+    const { container } = render(
+      <List p={300}>
+        <li>Item</li>
+      </List>
+    );
+    const list = container.querySelector("ul") as HTMLElement;
+    // The styled Container emits its reset via styled-components (not a class),
+    // so a resolved list-style rule + the absence of the semantic class proves
+    // the styled path was taken.
+    expect(list).toHaveStyleRule("list-style", "none");
+    expect(list).not.toHaveClass("seeds-list");
+  });
+
+  it("routes to the styled-components path for a styled() extension className", () => {
+    const { container } = render(
+      <List className="sc-abc123">
+        <li>Item</li>
+      </List>
+    );
+    const list = container.querySelector("ul") as HTMLElement;
+    // Only the styled path emits the list-reset rule.
+    expect(list).toHaveStyleRule("list-style", "none");
+  });
+});
+
+describe("ListItem routing", () => {
+  it("renders the Tailwind path by default", () => {
+    const { container } = render(<ListItem>Item</ListItem>);
+    expect(container.querySelector("li")).toHaveClass("seeds-list-item");
+  });
+
+  it("adds the bordered modifier class when isBordered", () => {
+    const { container } = render(<ListItem isBordered>Item</ListItem>);
+    const item = container.querySelector("li") as HTMLElement;
+    expect(item).toHaveClass("seeds-list-item");
+    expect(item).toHaveClass("seeds-list-item-bordered");
+  });
+
+  it("omits the bordered modifier class when not bordered", () => {
+    const { container } = render(<ListItem>Item</ListItem>);
+    expect(container.querySelector("li")).not.toHaveClass(
+      "seeds-list-item-bordered"
+    );
+  });
+
+  it("places semantic class before consumer className", () => {
+    const { container } = render(
+      <ListItem className="consumer">Item</ListItem>
+    );
+    expect(container.querySelector("li")?.className).toBe(
+      "seeds-list-item consumer"
+    );
+  });
+
+  it("routes to the styled-components path when a system prop is present", () => {
+    const { container } = render(<ListItem p={300}>Item</ListItem>);
+    const item = container.querySelector("li") as HTMLElement;
+    // Only the styled path resolves styled-system padding.
+    expect(item).toHaveStyleRule("padding", theme.space[300]);
+    expect(item).not.toHaveClass("seeds-list-item");
+  });
+});

package/src/cn.ts

@@ -0,0 +1,27 @@
+/**
+ * Minimal className combiner. Mirrored inline from Card/Avatar —
+ * @sproutsocial/seeds-react-utilities does NOT export a `cn` helper.
+ *
+ * Falsy inputs are dropped; object inputs contribute each truthy key.
+ */
+export function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}

package/src/list.css

@@ -0,0 +1,112 @@
+/**
+ * Seeds List component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <ul class="seeds-list">
+ *     <li class="seeds-list-item">…</li>
+ *     <li class="seeds-list-item seeds-list-item-bordered">…</li>
+ *   </ul>
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities
+ * (e.g. mt-300, p-300) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  /* List container: strip the browser's default list chrome. */
+  .seeds-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* List item: rounded row that stacks with top spacing. The legacy component
+     applies `mt={300}` to every item (including the first), so the class does
+     the same rather than collapsing the first item's margin. */
+  .seeds-list-item {
+    box-sizing: border-box;
+    margin-top: var(--space-300);
+    border-radius: var(--radius-outer);
+  }
+
+  /* Bordered items read as a card/button: 1px container border + padding.
+     borderWidths[500] resolves to 1px; no --border-width var is emitted. */
+  .seeds-list-item-bordered {
+    border: 1px solid var(--color-container-border-base);
+    padding: var(--space-300);
+  }
+
+  /* ListItemContent ---------------------------------------------------- */
+
+  /* Outer row: main content left, aside/actions right, baseline-aligned. */
+  .seeds-list-item-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    border-radius: var(--radius-outer);
+  }
+
+  /* Main content grows to fill; icon sits to the left of the text block. */
+  .seeds-list-item-content-main {
+    display: flex;
+    flex: 1;
+  }
+
+  /* Icon spacing previously came from Icon's mr={300} system prop. */
+  .seeds-list-item-content-icon {
+    margin-right: var(--space-300);
+  }
+
+  .seeds-list-item-content-text {
+    flex: 1;
+  }
+
+  /* Details byline spacing previously came from its mt={200} system prop.
+     The details node is a Text.Byline, so it also carries `.seeds-text`, whose
+     `margin: 0` sits later in the aggregated component layer and would reset a
+     single-class rule. Qualify with the parent to raise specificity above
+     `.seeds-text` while staying inside the components layer (consumer utilities
+     still win). */
+  .seeds-list-item-content .seeds-list-item-content-details {
+    margin-top: var(--space-200);
+  }
+
+  /* Aside/actions cluster on the right; does not shrink. */
+  .seeds-list-item-content-aside {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    flex-shrink: 0;
+  }
+
+  .seeds-list-item-content-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  /* ListItemButton ----------------------------------------------------- */
+
+  /* Container reads as a card. radii[500] resolves to 6px (--radius-inner). */
+  .seeds-list-item-button {
+    position: relative;
+    box-sizing: border-box;
+    border: 1px solid var(--color-container-border-base);
+    padding: var(--space-300);
+    border-radius: var(--radius-inner);
+    background-color: var(--color-container-bg-base);
+    color: var(--color-text-body);
+  }
+
+  /* Transparent overlay button that captures clicks across the whole card. */
+  .seeds-list-item-button-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}