@sps-woodland/feedback-block 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/feedback-block](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/feedback-block#readme)
+
+SPS Woodland Design System feedback block component

package/lib/FeedbackBlock.css.d.ts

@@ -0,0 +1,11 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export declare type FeedbackBlockKind = keyof typeof Tokens.component["feedback-block"]["kind"];
+interface FeedbackBlockVariantDefinitions extends VariantDefinitions {
+    kind: RecipeVariant<FeedbackBlockKind>;
+    micro: BooleanRecipeVariant;
+}
+export declare const feedbackBlock: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<FeedbackBlockVariantDefinitions>;
+export declare const feedbackBlockIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<FeedbackBlockVariantDefinitions>;
+export declare const feedbackBlockText: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<FeedbackBlockVariantDefinitions, "micro">>;
+export {};

package/lib/FeedbackBlock.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+import type { IconName } from "@sps-woodland/tokens";
+import type { FeedbackBlockKind } from "./FeedbackBlock.css";
+export declare const FeedbackBlockIcons: Record<FeedbackBlockKind, IconName>;
+export declare function FeedbackBlock({ children, className, kind, micro, ...rest }: ComponentProps<{
+    kind?: FeedbackBlockKind;
+    micro?: boolean;
+}, HTMLDivElement>): React.ReactElement;

package/lib/FeedbackBlock.examples.d.ts

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

package/lib/index.cjs.js

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@sps-woodland/core"),n=require("@spscommerce/utils");function w(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(a,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return a.default=e,Object.freeze(a)}const t=w(g);function h(e,a,r){return a in e?Object.defineProperty(e,a,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[a]=r,e}function p(e,a){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);a&&(o=o.filter(function(c){return Object.getOwnPropertyDescriptor(e,c).enumerable})),r.push.apply(r,o)}return r}function b(e){for(var a=1;a<arguments.length;a++){var r=arguments[a]!=null?arguments[a]:{};a%2?p(Object(r),!0).forEach(function(o){h(e,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})}return e}var v=(e,a,r)=>{for(var o of Object.keys(e)){var c;if(e[o]!==((c=a[o])!==null&&c!==void 0?c:r[o]))return!1}return!0},k=e=>a=>{var r=e.defaultClassName,o=b(b({},e.defaultVariants),a);for(var c in o){var l,f=(l=o[c])!==null&&l!==void 0?l:e.defaultVariants[c];if(f!=null){var s=f;typeof s=="boolean"&&(s=s===!0?"true":"false");var u=e.variantClassNames[c][s];u&&(r+=" "+u)}}for(var[F,B]of e.compoundVariants)v(F,o,e.defaultVariants)&&(r+=" "+B);return r},y=k({defaultClassName:"_1r00l560",variantClassNames:{kind:{tip:"_1r00l561",success:"_1r00l562",warning:"_1r00l563",info:"_1r00l564",error:"_1r00l565"},micro:{true:"_1r00l566",false:"_1r00l567"}},defaultVariants:{kind:"tip",micro:!1},compoundVariants:[]}),O=k({defaultClassName:"",variantClassNames:{kind:{tip:"_1r00l568",success:"_1r00l569",warning:"_1r00l56a",info:"_1r00l56b",error:"_1r00l56c"},micro:{true:"_1r00l56d",false:"_1r00l56e"}},defaultVariants:{kind:"tip",micro:!1},compoundVariants:[[{kind:"tip",micro:!0},"_1r00l56f"]]}),_=k({defaultClassName:"",variantClassNames:{micro:{true:"_1r00l56g",false:"_1r00l56h"}},defaultVariants:{micro:!1},compoundVariants:[]});const m=Object.freeze({tip:"lightbulb",success:"checkmark",warning:"exclamation-triangle",error:"exclamation-circle",info:"info-circle"});function i({children:e,className:a,kind:r="tip",micro:o,...c}){return t.createElement("div",{className:d.cl(y({kind:r,micro:o}),a),...c},t.createElement(d.Icon,{className:O({kind:r,micro:o}),icon:m[r],"aria-hidden":"true"}),t.createElement("span",{className:_({micro:o})},e))}d.Metadata.set(i,{name:"FeedbackBlock",props:{kind:{type:"FeedbackBlockKind",default:"tip"},micro:{type:"boolean",default:"false"}}});const E={components:[i],description:({NavigateTo:e})=>t.createElement(t.Fragment,null,t.createElement("p",null,"Feedback Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a"," ",t.createElement(e,{to:"growler"},"Growler")," instead."),t.createElement("h5",null,"Variants"),t.createElement("p",null,"Variants are generally tied to a specific color and an accompanying icon."),t.createElement(i,{kind:"error",micro:!0},"Error"),t.createElement(i,{kind:"info",micro:!0},"Information"),t.createElement(i,{kind:"tip",micro:!0},"Tip"),t.createElement(i,{kind:"success",micro:!0},"Success"),t.createElement(i,{kind:"warning",micro:!0},"Warning")),examples:{standard:{label:"Standard Size",description:"Use Standard Size Feedback Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Feedback Block.",examples:{error:{description:"Error",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="error" data-testid="feedback-block-error">
+                  We are experiencing difficulties communicating to the server. Please try again later.
+                </FeedbackBlock>
+              );
+            }
+          `},info:{description:"Information",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="info" data-testid="feedback-block-info">
+                  FYI - This page has been updated. Click refresh to see the most recent version.
+                </FeedbackBlock>
+              );
+            }
+          `},proTip:{description:"Pro Tip",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="tip" data-testid="feedback-block-tip">
+                  Please Note: Click the Receive button above to check for new transactions from QuickBooks.
+                </FeedbackBlock>
+              );
+            }
+          `},success:{description:"Success",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="success" data-testid="feedback-block-success">
+                  All items have been uploaded and are ready for export.
+                </FeedbackBlock>
+              );
+            }
+          `},warning:{description:"Warning",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="warning" data-testid="feedback-block-warning">
+                  Warning! This order is missing a shipment date and is in jeopardy of being past due.
+                </FeedbackBlock>
+              );
+            }
+          `}}},micro:{label:"Micro Size",description:"Use Micro Size Feedback Blocks when a Standard Size Feedback Block is too large or too visually overwhelming.",examples:{error:{description:"Error",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="error" micro data-testid="feedback-block-micro-error">
+                  We are experiencing difficulties communicating to the server. Please try again later.
+                </FeedbackBlock>
+              );
+            }
+          `},info:{description:"Information",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="info" micro data-testid="feedback-block-micro-info">
+                  Refresh the page to see the most recent version.
+                </FeedbackBlock>
+              );
+            }
+          `},proTip:{description:"Pro Tip",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="tip" micro data-testid="feedback-block-micro-tip">
+                  Tip: Click the Receive button to check for new transactions.
+                </FeedbackBlock>
+              );
+            }
+          `},success:{description:"Success",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="success" micro data-testid="feedback-block-micro-success">
+                  All items have been uploaded and are ready for export.
+                </FeedbackBlock>
+              );
+            }
+          `},warning:{description:"Warning",react:n.code`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="warning" micro data-testid="feedback-block-micro-warning">
+                  This order is missing a shipment date.
+                </FeedbackBlock>
+              );
+            }
+          `}}}}},C={"Feedback Blocks":E};exports.FeedbackBlock=i;exports.FeedbackBlockIcons=m;exports.MANIFEST=C;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FeedbackBlock";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,268 @@
+import * as t from "react";
+import { Metadata as F, cl as B, Icon as g } from "@sps-woodland/core";
+import { code as n } from "@spscommerce/utils";
+function h(e, o, r) {
+  return o in e ? Object.defineProperty(e, o, {
+    value: r,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[o] = r, e;
+}
+function p(e, o) {
+  var r = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var a = Object.getOwnPropertySymbols(e);
+    o && (a = a.filter(function(c) {
+      return Object.getOwnPropertyDescriptor(e, c).enumerable;
+    })), r.push.apply(r, a);
+  }
+  return r;
+}
+function m(e) {
+  for (var o = 1; o < arguments.length; o++) {
+    var r = arguments[o] != null ? arguments[o] : {};
+    o % 2 ? p(Object(r), !0).forEach(function(a) {
+      h(e, a, r[a]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : p(Object(r)).forEach(function(a) {
+      Object.defineProperty(e, a, Object.getOwnPropertyDescriptor(r, a));
+    });
+  }
+  return e;
+}
+var w = (e, o, r) => {
+  for (var a of Object.keys(e)) {
+    var c;
+    if (e[a] !== ((c = o[a]) !== null && c !== void 0 ? c : r[a]))
+      return !1;
+  }
+  return !0;
+}, d = (e) => (o) => {
+  var r = e.defaultClassName, a = m(m({}, e.defaultVariants), o);
+  for (var c in a) {
+    var s, k = (s = a[c]) !== null && s !== void 0 ? s : e.defaultVariants[c];
+    if (k != null) {
+      var l = k;
+      typeof l == "boolean" && (l = l === !0 ? "true" : "false");
+      var f = e.variantClassNames[c][l];
+      f && (r += " " + f);
+    }
+  }
+  for (var [b, u] of e.compoundVariants)
+    w(b, a, e.defaultVariants) && (r += " " + u);
+  return r;
+}, v = d({ defaultClassName: "_1r00l560", variantClassNames: { kind: { tip: "_1r00l561", success: "_1r00l562", warning: "_1r00l563", info: "_1r00l564", error: "_1r00l565" }, micro: { true: "_1r00l566", false: "_1r00l567" } }, defaultVariants: { kind: "tip", micro: !1 }, compoundVariants: [] }), y = d({ defaultClassName: "", variantClassNames: { kind: { tip: "_1r00l568", success: "_1r00l569", warning: "_1r00l56a", info: "_1r00l56b", error: "_1r00l56c" }, micro: { true: "_1r00l56d", false: "_1r00l56e" } }, defaultVariants: { kind: "tip", micro: !1 }, compoundVariants: [[{ kind: "tip", micro: !0 }, "_1r00l56f"]] }), C = d({ defaultClassName: "", variantClassNames: { micro: { true: "_1r00l56g", false: "_1r00l56h" } }, defaultVariants: { micro: !1 }, compoundVariants: [] });
+const E = Object.freeze({
+  tip: "lightbulb",
+  success: "checkmark",
+  warning: "exclamation-triangle",
+  error: "exclamation-circle",
+  info: "info-circle"
+});
+function i({
+  children: e,
+  className: o,
+  kind: r = "tip",
+  micro: a,
+  ...c
+}) {
+  return /* @__PURE__ */ t.createElement("div", {
+    className: B(v({ kind: r, micro: a }), o),
+    ...c
+  }, /* @__PURE__ */ t.createElement(g, {
+    className: y({ kind: r, micro: a }),
+    icon: E[r],
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("span", {
+    className: C({ micro: a })
+  }, e));
+}
+F.set(i, {
+  name: "FeedbackBlock",
+  props: {
+    kind: { type: "FeedbackBlockKind", default: "tip" },
+    micro: { type: "boolean", default: "false" }
+  }
+});
+const O = {
+  components: [i],
+  description: ({ NavigateTo: e }) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("p", null, "Feedback Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a", " ", /* @__PURE__ */ t.createElement(e, {
+    to: "growler"
+  }, "Growler"), " instead."), /* @__PURE__ */ t.createElement("h5", null, "Variants"), /* @__PURE__ */ t.createElement("p", null, "Variants are generally tied to a specific color and an accompanying icon."), /* @__PURE__ */ t.createElement(i, {
+    kind: "error",
+    micro: !0
+  }, "Error"), /* @__PURE__ */ t.createElement(i, {
+    kind: "info",
+    micro: !0
+  }, "Information"), /* @__PURE__ */ t.createElement(i, {
+    kind: "tip",
+    micro: !0
+  }, "Tip"), /* @__PURE__ */ t.createElement(i, {
+    kind: "success",
+    micro: !0
+  }, "Success"), /* @__PURE__ */ t.createElement(i, {
+    kind: "warning",
+    micro: !0
+  }, "Warning")),
+  examples: {
+    standard: {
+      label: "Standard Size",
+      description: "Use Standard Size Feedback Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Feedback Block.",
+      examples: {
+        error: {
+          description: "Error",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="error" data-testid="feedback-block-error">
+                  We are experiencing difficulties communicating to the server. Please try again later.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        info: {
+          description: "Information",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="info" data-testid="feedback-block-info">
+                  FYI - This page has been updated. Click refresh to see the most recent version.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        proTip: {
+          description: "Pro Tip",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="tip" data-testid="feedback-block-tip">
+                  Please Note: Click the Receive button above to check for new transactions from QuickBooks.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        success: {
+          description: "Success",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="success" data-testid="feedback-block-success">
+                  All items have been uploaded and are ready for export.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        warning: {
+          description: "Warning",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="warning" data-testid="feedback-block-warning">
+                  Warning! This order is missing a shipment date and is in jeopardy of being past due.
+                </FeedbackBlock>
+              );
+            }
+          `
+        }
+      }
+    },
+    micro: {
+      label: "Micro Size",
+      description: "Use Micro Size Feedback Blocks when a Standard Size Feedback Block is too large or too visually overwhelming.",
+      examples: {
+        error: {
+          description: "Error",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="error" micro data-testid="feedback-block-micro-error">
+                  We are experiencing difficulties communicating to the server. Please try again later.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        info: {
+          description: "Information",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="info" micro data-testid="feedback-block-micro-info">
+                  Refresh the page to see the most recent version.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        proTip: {
+          description: "Pro Tip",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="tip" micro data-testid="feedback-block-micro-tip">
+                  Tip: Click the Receive button to check for new transactions.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        success: {
+          description: "Success",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="success" micro data-testid="feedback-block-micro-success">
+                  All items have been uploaded and are ready for export.
+                </FeedbackBlock>
+              );
+            }
+          `
+        },
+        warning: {
+          description: "Warning",
+          react: n`
+            import { FeedbackBlock } from "@sps-woodland/feedback-block";
+
+            function Component() {
+              return (
+                <FeedbackBlock kind="warning" micro data-testid="feedback-block-micro-warning">
+                  This order is missing a shipment date.
+                </FeedbackBlock>
+              );
+            }
+          `
+        }
+      }
+    }
+  }
+}, S = {
+  "Feedback Blocks": O
+};
+export {
+  i as FeedbackBlock,
+  E as FeedbackBlockIcons,
+  S 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 @@
+._1r00l560{display:flex}._1r00l561{background-color:#fff8e0;border-color:#fc0}._1r00l562{background-color:#e7f3ec;border-color:#0b8940}._1r00l563{background-color:#fcf1e7;border-color:#e7760b}._1r00l564{background-color:#e6f2f8;border-color:#09638d}._1r00l565{background-color:#fbe6ea;border-color:#de002e}._1r00l566{height:1rem;border:none;background-color:transparent}._1r00l567{border-radius:.125rem;border-style:solid;border-width:.0625rem;font-size:.875rem;font-weight:400;line-height:1.25rem;margin-bottom:1rem;padding:.5rem 1rem}._1r00l568{color:#fc0}._1r00l569{color:#0b8940}._1r00l56a{color:#e7760b}._1r00l56b{color:#09638d}._1r00l56c{color:#de002e}._1r00l56d{font-size:.875rem;font-weight:400;line-height:1.125rem;vertical-align:middle}._1r00l56e{margin-right:.5rem;font-size:1.25rem;vertical-align:middle}._1r00l56f{color:#09638d}._1r00l56g{color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.125rem;margin-left:.25rem}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@sps-woodland/feedback-block",
+  "description": "SPS Woodland Design System feedback block component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/feedback-block",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/feedback-block#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/tabs": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tabs": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@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) : [],
+    },
+  },
+});