@sps-woodland/filter-tiles 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/filter-tiles](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/filter-tiles#readme)
+
+SPS Woodland Design System filter-tile and filter-tile-set components

package/lib/FilterTile.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const FilterTileExamples: ComponentManifestEntry;

package/lib/filter-tile/FilterTile.css.d.ts

@@ -0,0 +1,41 @@
+import { Tokens } from "@sps-woodland/tokens";
+export declare type FilterTileKind = keyof typeof Tokens.component["filter-tile"]["kind"];
+export declare const tile: string;
+export declare const tileBody: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    kind: {
+        general: {};
+        error: {};
+        success: {};
+        warning: {};
+        processing: {};
+    };
+    active: {
+        true: {};
+    };
+}>;
+export declare const tileValue: string;
+export declare const tileTitle: string;
+export declare const tileFooter: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    kind: {
+        general: {
+            backgroundColor: string;
+        };
+        error: {
+            backgroundColor: string;
+        };
+        success: {
+            backgroundColor: string;
+        };
+        warning: {
+            backgroundColor: string;
+        };
+        processing: {
+            backgroundColor: string;
+        };
+    };
+    active: {
+        true: {
+            height: string;
+        };
+    };
+}>;

package/lib/filter-tile/FilterTile.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import type { FilterTileKind } from "./FilterTile.css";
+export declare function FilterTile({ value, title, active: isActiveProp, kind, className, ...rest }: ComponentProps<{
+    value: number;
+    title: string;
+    active?: boolean;
+    kind?: FilterTileKind;
+}>): JSX.Element;

package/lib/filter-tile-set/FilterTileSet.css.d.ts

@@ -0,0 +1 @@
+export declare const tileSet: string;

package/lib/filter-tile-set/FilterTileSet.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function FilterTileSet({ className, children, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/index.cjs.js

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),c=require("@sps-woodland/core"),O=require("@spscommerce/utils");function T(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=T(_);function y(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r&&(i=i.filter(function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable})),t.push.apply(t,i)}return t}function f(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?v(Object(t),!0).forEach(function(i){y(e,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach(function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(t,i))})}return e}var F=(e,r,t)=>{for(var i of Object.keys(e)){var a;if(e[i]!==((a=r[i])!==null&&a!==void 0?a:t[i]))return!1}return!0},m=e=>r=>{var t=e.defaultClassName,i=f(f({},e.defaultVariants),r);for(var a in i){var u,o=(u=i[a])!==null&&u!==void 0?u:e.defaultVariants[a];if(o!=null){var l=o;typeof l=="boolean"&&(l=l===!0?"true":"false");var s=e.variantClassNames[a][l];s&&(t+=" "+s)}}for(var[p,b]of e.compoundVariants)F(p,i,e.defaultVariants)&&(t+=" "+b);return t},S="_1ub5g6g0",w=m({defaultClassName:"_1ub5g6g1",variantClassNames:{kind:{general:"_1ub5g6g2",error:"_1ub5g6g3",success:"_1ub5g6g4",warning:"_1ub5g6g5",processing:"_1ub5g6g6"},active:{true:"_1ub5g6g7"}},defaultVariants:{},compoundVariants:[[{kind:"general",active:!0},"_1ub5g6g8"],[{kind:"warning",active:!0},"_1ub5g6g9"],[{kind:"error",active:!0},"_1ub5g6ga"],[{kind:"processing",active:!0},"_1ub5g6gb"],[{kind:"success",active:!0},"_1ub5g6gc"]]}),j=m({defaultClassName:"_1ub5g6gf",variantClassNames:{kind:{general:"_1ub5g6gg",error:"_1ub5g6gh",success:"_1ub5g6gi",warning:"_1ub5g6gj",processing:"_1ub5g6gk"},active:{true:"_1ub5g6gl"}},defaultVariants:{kind:"general",active:!1},compoundVariants:[]}),P="_1ub5g6ge",E="_1ub5g6gd";function g({value:e,title:r,active:t,kind:i="general",className:a,...u}){const[o,l]=n.useState(!1),s=t||o;return n.createElement("div",{className:c.cl(S,a),...u},n.createElement("div",{className:w({kind:i,active:s}),onMouseOver:()=>l(!0),onMouseOut:()=>l(!1)},n.createElement("div",{className:E},e),n.createElement("div",{className:P},r)),n.createElement("div",{className:c.cl(j({active:s,kind:i}))}))}c.Metadata.set(g,{name:"Fitler tile",props:{value:{type:"number",required:!0},title:{type:"string",required:!0},active:{type:"boolean"},kind:{type:"FilterTileKind",default:"general"}}});var k="wqmu9d0";function d({className:e,children:r,...t}){return n.createElement("div",{className:c.cl(k,e),...t},r)}c.Metadata.set(d,{name:"Filter Tile Set"});const M={components:[g,d],examples:{basic:{label:"Filter Tiles",examples:{basic:{react:O.code`
+import { FilterTile, FilterTileSet } from "@sps-woodland/filter-tiles";
+function MyComponent() {
+  const data = [
+
+  {
+      value: 34,
+      title: 'Uncommitted - SPS Outreach Expiring'
+  },
+  {
+      value: 523,
+      title: 'Buying Org Review',
+      kind: "warning"
+  },
+  {
+      value: 7128,
+      title: 'Buying Org to Send Email',
+      kind: "error"
+  },
+  {
+      value: 19235,
+      title: 'Production Ready',
+      kind: "processing"
+  },
+];
+const [activeTile, setActiveTile] = React.useState(null);
+
+return (
+  <FilterTileSet>
+    {data.map(item => {
+      return <FilterTile
+        key={item.title}
+        value={item.value}
+        title={item.title}
+        kind={item.kind}
+        active={item.title === activeTile}
+        onClick={() => setActiveTile(item.title)} />
+      }
+    )}
+  </FilterTileSet>
+  );
+}
+`}}}}},N={"Filter Tiles":M};exports.FilterTile=g;exports.FilterTileSet=d;exports.MANIFEST=N;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./filter-tile/FilterTile";
+export * from "./filter-tile-set/FilterTileSet";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,163 @@
+import * as n from "react";
+import { Metadata as d, cl as o } from "@sps-woodland/core";
+import { code as O } from "@spscommerce/utils";
+function T(e, i, t) {
+  return i in e ? Object.defineProperty(e, i, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[i] = t, e;
+}
+function g(e, i) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(e);
+    i && (r = r.filter(function(a) {
+      return Object.getOwnPropertyDescriptor(e, a).enumerable;
+    })), t.push.apply(t, r);
+  }
+  return t;
+}
+function v(e) {
+  for (var i = 1; i < arguments.length; i++) {
+    var t = arguments[i] != null ? arguments[i] : {};
+    i % 2 ? g(Object(t), !0).forEach(function(r) {
+      T(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : g(Object(t)).forEach(function(r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+var y = (e, i, t) => {
+  for (var r of Object.keys(e)) {
+    var a;
+    if (e[r] !== ((a = i[r]) !== null && a !== void 0 ? a : t[r]))
+      return !1;
+  }
+  return !0;
+}, m = (e) => (i) => {
+  var t = e.defaultClassName, r = v(v({}, e.defaultVariants), i);
+  for (var a in r) {
+    var u, c = (u = r[a]) !== null && u !== void 0 ? u : e.defaultVariants[a];
+    if (c != null) {
+      var l = c;
+      typeof l == "boolean" && (l = l === !0 ? "true" : "false");
+      var s = e.variantClassNames[a][l];
+      s && (t += " " + s);
+    }
+  }
+  for (var [b, _] of e.compoundVariants)
+    y(b, r, e.defaultVariants) && (t += " " + _);
+  return t;
+}, F = "_1ub5g6g0", w = m({ defaultClassName: "_1ub5g6g1", variantClassNames: { kind: { general: "_1ub5g6g2", error: "_1ub5g6g3", success: "_1ub5g6g4", warning: "_1ub5g6g5", processing: "_1ub5g6g6" }, active: { true: "_1ub5g6g7" } }, defaultVariants: {}, compoundVariants: [[{ kind: "general", active: !0 }, "_1ub5g6g8"], [{ kind: "warning", active: !0 }, "_1ub5g6g9"], [{ kind: "error", active: !0 }, "_1ub5g6ga"], [{ kind: "processing", active: !0 }, "_1ub5g6gb"], [{ kind: "success", active: !0 }, "_1ub5g6gc"]] }), S = m({ defaultClassName: "_1ub5g6gf", variantClassNames: { kind: { general: "_1ub5g6gg", error: "_1ub5g6gh", success: "_1ub5g6gi", warning: "_1ub5g6gj", processing: "_1ub5g6gk" }, active: { true: "_1ub5g6gl" } }, defaultVariants: { kind: "general", active: !1 }, compoundVariants: [] }), E = "_1ub5g6ge", P = "_1ub5g6gd";
+function f({
+  value: e,
+  title: i,
+  active: t,
+  kind: r = "general",
+  className: a,
+  ...u
+}) {
+  const [c, l] = n.useState(!1), s = t || c;
+  return /* @__PURE__ */ n.createElement("div", {
+    className: o(F, a),
+    ...u
+  }, /* @__PURE__ */ n.createElement("div", {
+    className: w({ kind: r, active: s }),
+    onMouseOver: () => l(!0),
+    onMouseOut: () => l(!1)
+  }, /* @__PURE__ */ n.createElement("div", {
+    className: P
+  }, e), /* @__PURE__ */ n.createElement("div", {
+    className: E
+  }, i)), /* @__PURE__ */ n.createElement("div", {
+    className: o(S({ active: s, kind: r }))
+  }));
+}
+d.set(f, {
+  name: "Fitler tile",
+  props: {
+    value: { type: "number", required: !0 },
+    title: { type: "string", required: !0 },
+    active: { type: "boolean" },
+    kind: { type: "FilterTileKind", default: "general" }
+  }
+});
+var j = "wqmu9d0";
+function p({
+  className: e,
+  children: i,
+  ...t
+}) {
+  return /* @__PURE__ */ n.createElement("div", {
+    className: o(j, e),
+    ...t
+  }, i);
+}
+d.set(p, {
+  name: "Filter Tile Set"
+});
+const k = {
+  components: [f, p],
+  examples: {
+    basic: {
+      label: "Filter Tiles",
+      examples: {
+        basic: {
+          react: O`
+import { FilterTile, FilterTileSet } from "@sps-woodland/filter-tiles";
+function MyComponent() {
+  const data = [
+
+  {
+      value: 34,
+      title: 'Uncommitted - SPS Outreach Expiring'
+  },
+  {
+      value: 523,
+      title: 'Buying Org Review',
+      kind: "warning"
+  },
+  {
+      value: 7128,
+      title: 'Buying Org to Send Email',
+      kind: "error"
+  },
+  {
+      value: 19235,
+      title: 'Production Ready',
+      kind: "processing"
+  },
+];
+const [activeTile, setActiveTile] = React.useState(null);
+
+return (
+  <FilterTileSet>
+    {data.map(item => {
+      return <FilterTile
+        key={item.title}
+        value={item.value}
+        title={item.title}
+        kind={item.kind}
+        active={item.title === activeTile}
+        onClick={() => setActiveTile(item.title)} />
+      }
+    )}
+  </FilterTileSet>
+  );
+}
+`
+        }
+      }
+    }
+  }
+}, C = {
+  "Filter Tiles": k
+};
+export {
+  f as FilterTile,
+  p as FilterTileSet,
+  C as MANIFEST
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+._1ub5g6g0{height:6.625rem;max-width:15.625rem;min-width:6.875rem;flex:1;display:flex;flex-direction:column;justify-content:flex-end;margin-right:.25rem;margin-left:.25rem}._1ub5g6g0:first-child{margin-left:0}._1ub5g6g0:last-child{margin-right:0}._1ub5g6g1{padding:1rem;color:#1f282c;background-color:#fff;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-top-left-radius:.25rem;border-top-right-radius:.25rem;cursor:pointer}._1ub5g6g8{border-color:#007db8}._1ub5g6g9{border-color:#e7760b}._1ub5g6ga{border-color:#de002e}._1ub5g6gb{border-color:#91467f}._1ub5g6gc{border-color:#0b8940}._1ub5g6gd{height:1.875rem;font-size:1.875rem;line-height:1.875rem;font-weight:600;text-align:center}._1ub5g6ge{height:2.25rem;font-size:.875rem;line-height:1.125rem;display:flex;justify-content:center;align-items:center;text-align:center}._1ub5g6gf{height:.25rem;transition:all .25s ease}._1ub5g6gg{background-color:#007db8}._1ub5g6gh{background-color:#de002e}._1ub5g6gi{background-color:#0b8940}._1ub5g6gj{background-color:#e7760b}._1ub5g6gk{background-color:#91467f}._1ub5g6gl{height:.5rem}.wqmu9d0{display:flex}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@sps-woodland/filter-tiles",
+  "description": "SPS Woodland Design System filter tile component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/filter-tiles",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/filter-tiles#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});