@sps-woodland/action-bar 8.3.0

package/README.md

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

package/lib/ActionBar.css.d.ts

@@ -0,0 +1,9 @@
+declare const root: string;
+declare const content: string;
+declare const contentMainBar: string;
+declare const itemsSelected: string;
+declare const itemsSelectedTag: string;
+declare const actionButtons: string;
+declare const clearSelected: string;
+declare const additionalContent: string;
+export { root, content, contentMainBar, itemsSelected, itemsSelectedTag, actionButtons, clearSelected, additionalContent, };

package/lib/ActionBar.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function ActionBar({ className, children, clearSelected, itemsSelected, itemsSelectedLabel, ...rest }: ComponentProps<{
+    clearSelected: () => void;
+    itemsSelected: number | string;
+    itemsSelectedLabel?: string;
+}>): React.ReactElement;

package/lib/ActionBar.examples.d.ts

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

package/lib/ActionBarAdditionalContent.d.ts

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

package/lib/index.cjs.js

@@ -0,0 +1,119 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("react"),S=require("@sps-woodland/buttons"),a=require("@sps-woodland/core"),h=require("@sps-woodland/tags"),r=require("@spscommerce/utils");function A(t){if(t&&t.__esModule)return t;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(o,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return o.default=t,Object.freeze(o)}const e=A(B);var f="_9yu2s95",b="_9yu2s97",w="_9yu2s96",g="_9yu2s91",v="_9yu2s92",x="_9yu2s93",C="_9yu2s94",y="_9yu2s90";function c({className:t,children:o,...n}){return e.createElement(a.Box,{className:a.cl(b,t),...n},o)}a.Metadata.set(c,{name:"ActionBarAdditionalContent",props:{}});function l({className:t,children:o,clearSelected:n,itemsSelected:s,itemsSelectedLabel:i,...m}){const{t:d}=e.useContext(a.I18nContext),[u,p]=a.selectChildren(o,[{type:c}]);return Number(s)>0?e.createElement("div",{className:a.cl(y,t),...m},e.createElement("div",{className:g},u,e.createElement("div",{className:v},e.createElement("div",{className:x},e.createElement(h.Tag,{kind:"info",className:C},s),i!=null?i:d("design-system:listActionBar.itemsSelected")),e.createElement("div",{className:f},p),e.createElement("div",{className:w},e.createElement(S.Button,{kind:"link",icon:"x",onPress:n},d("design-system:listActionBar.clearSelected")))))):e.createElement(e.Fragment,null)}a.Metadata.set(l,{name:"ActionBar",props:{clearSelected:{type:"() => void",required:!0},itemsSelected:{type:"number | string",required:!0},itemsSelectedLabel:{type:"string",required:!1}}});const E={components:[l,c],description:()=>e.createElement("p",null,"The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),examples:{general:{label:"General Usage",description:""},actionBar:{label:"Action Bar",description:"This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",examples:{basic:{react:r.code`
+            import { ActionBar } from "@sps-woodland/action-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { Vr } from "@sps-woodland/core";
+            
+            function ActionBarExample() {
+              const [itemsSelected, setItemsSelected] = React.useState(0);
+            
+              function handleClear() {
+                  setItemsSelected(0);
+              }
+            
+              function showExample() {
+                  setItemsSelected(3);
+              }
+            
+              return <>
+                <Button kind="link" onPress={showExample}>
+                  Show Action Bar
+                </Button>
+                <ActionBar
+                  itemsSelected={itemsSelected}
+                  clearSelected={handleClear}
+                >
+                  <Button kind="link" className={sp({ mr: "sm" })}>
+                    Text Button
+                  </Button>
+                  <Vr/>
+                  <Button kind="icon" icon="printer" aria-label="Print" />
+                  <Button
+                    kind="icon"
+                    icon="download-cloud"
+                    aria-label="Download"
+                  />
+                  <Vr/>
+                  <Button className={sp({ mx: "sm" })}>Button</Button>
+                  <Button
+                    kind="key"
+                    className={sp({ mr: "sm" })}
+                  >
+                    Button
+                  </Button>
+                  <Button kind="confirm">Button</Button>
+                </ActionBar>
+              </>
+            }
+          `}}},customLabel:{label:'Custom "Items Selected" Label',description:"If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized.",examples:{basic:{react:r.code`
+            import { ActionBar } from "@sps-woodland/action-bar";
+            import { Button } from "@sps-woodland/buttons";
+            
+            function ActionBarExample() {
+              const [itemsSelected, setItemsSelected] = React.useState([]);
+
+              const [data, setData] = React.useState([
+                { id: 1, name: "Item 1", cost: 100 },
+                { id: 2, name: "Item 2", cost: 7.99 },
+                { id: 3, name: "Item 3", cost: 23.45 },
+              ]);
+            
+              function handleClear() {
+                  setItemsSelected([]);
+              }
+            
+              function showExample() {
+                  setItemsSelected([1, 2, 3]);
+              }
+              
+              const costOfSelectedItems = itemsSelected.reduce((acc, id) => {
+                const item = data.find((d) => d.id === id);
+                return acc + item.cost;
+              }, 0);
+            
+              return <>
+                <Button kind="link" onPress={showExample}>
+                  Show Action Bar
+                </Button>
+                <ActionBar
+                  itemsSelected={itemsSelected.length}
+                  itemsSelectedLabel={\`\${itemsSelected.length} Items Selected - $\${costOfSelectedItems}\`}
+                  clearSelected={handleClear}
+                >
+                  <Button kind="confirm">Button</Button>
+                </ActionBar>
+              </>
+            }
+          `}}},addlContent:{label:"Additional Content",description:"An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",examples:{basic:{react:r.code`
+            import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/action-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { Card } from "@sps-woodland/cards";
+            
+            function ActionBarExample() {
+              const [itemsSelected, setItemsSelected] = React.useState(0);
+            
+              function handleClear() {
+                  setItemsSelected(0);
+              }
+            
+              function showExample() {
+                  setItemsSelected(3);
+              }
+            
+              return <>
+                <Button kind="link" onPress={showExample}>
+                  Show Action Bar
+                </Button>
+                <ActionBar
+                  itemsSelected={itemsSelected}
+                  clearSelected={handleClear}
+                >
+                  <ActionBarAdditionalContent textAlign="center">
+                    <Card>
+                      <p>hey what's goin on here</p>
+                    </Card>
+                  </ActionBarAdditionalContent>
+                  <Button kind="confirm">Button</Button>
+                </ActionBar>
+              </>
+            }
+          `}}}}},I={"Action Bar":E};exports.ActionBar=l;exports.ActionBarAdditionalContent=c;exports.MANIFEST=I;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ActionBar";
+export * from "./ActionBarAdditionalContent";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,223 @@
+import * as t from "react";
+import { Button as h } from "@sps-woodland/buttons";
+import { Metadata as l, Box as S, cl as d, I18nContext as A, selectChildren as f } from "@sps-woodland/core";
+import { Tag as b } from "@sps-woodland/tags";
+import { code as s } from "@spscommerce/utils";
+var x = "_9yu2s95", C = "_9yu2s97", w = "_9yu2s96", v = "_9yu2s91", E = "_9yu2s92", I = "_9yu2s93", k = "_9yu2s94", y = "_9yu2s90";
+function i({
+  className: e,
+  children: n,
+  ...o
+}) {
+  return /* @__PURE__ */ t.createElement(
+    S,
+    {
+      className: d(C, e),
+      ...o
+    },
+    n
+  );
+}
+l.set(i, {
+  name: "ActionBarAdditionalContent",
+  props: {}
+});
+function m({
+  className: e,
+  children: n,
+  clearSelected: o,
+  itemsSelected: c,
+  itemsSelectedLabel: a,
+  ...u
+}) {
+  const { t: r } = t.useContext(A), [B, p] = f(n, [
+    { type: i }
+  ]);
+  return Number(c) > 0 ? /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: d(y, e),
+      ...u
+    },
+    /* @__PURE__ */ t.createElement("div", { className: v }, B, /* @__PURE__ */ t.createElement("div", { className: E }, /* @__PURE__ */ t.createElement("div", { className: I }, /* @__PURE__ */ t.createElement(b, { kind: "info", className: k }, c), a != null ? a : r("design-system:listActionBar.itemsSelected")), /* @__PURE__ */ t.createElement("div", { className: x }, p), /* @__PURE__ */ t.createElement("div", { className: w }, /* @__PURE__ */ t.createElement(h, { kind: "link", icon: "x", onPress: o }, r("design-system:listActionBar.clearSelected")))))
+  ) : /* @__PURE__ */ t.createElement(t.Fragment, null);
+}
+l.set(m, {
+  name: "ActionBar",
+  props: {
+    clearSelected: {
+      type: "() => void",
+      required: !0
+    },
+    itemsSelected: {
+      type: "number | string",
+      required: !0
+    },
+    itemsSelectedLabel: {
+      type: "string",
+      required: !1
+    }
+  }
+});
+const g = {
+  components: [m, i],
+  description: () => /* @__PURE__ */ t.createElement("p", null, "The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),
+  examples: {
+    general: {
+      label: "General Usage",
+      description: ""
+    },
+    actionBar: {
+      label: "Action Bar",
+      description: "This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",
+      examples: {
+        basic: {
+          react: s`
+            import { ActionBar } from "@sps-woodland/action-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { Vr } from "@sps-woodland/core";
+            
+            function ActionBarExample() {
+              const [itemsSelected, setItemsSelected] = React.useState(0);
+            
+              function handleClear() {
+                  setItemsSelected(0);
+              }
+            
+              function showExample() {
+                  setItemsSelected(3);
+              }
+            
+              return <>
+                <Button kind="link" onPress={showExample}>
+                  Show Action Bar
+                </Button>
+                <ActionBar
+                  itemsSelected={itemsSelected}
+                  clearSelected={handleClear}
+                >
+                  <Button kind="link" className={sp({ mr: "sm" })}>
+                    Text Button
+                  </Button>
+                  <Vr/>
+                  <Button kind="icon" icon="printer" aria-label="Print" />
+                  <Button
+                    kind="icon"
+                    icon="download-cloud"
+                    aria-label="Download"
+                  />
+                  <Vr/>
+                  <Button className={sp({ mx: "sm" })}>Button</Button>
+                  <Button
+                    kind="key"
+                    className={sp({ mr: "sm" })}
+                  >
+                    Button
+                  </Button>
+                  <Button kind="confirm">Button</Button>
+                </ActionBar>
+              </>
+            }
+          `
+        }
+      }
+    },
+    customLabel: {
+      label: 'Custom "Items Selected" Label',
+      description: "If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized.",
+      examples: {
+        basic: {
+          react: s`
+            import { ActionBar } from "@sps-woodland/action-bar";
+            import { Button } from "@sps-woodland/buttons";
+            
+            function ActionBarExample() {
+              const [itemsSelected, setItemsSelected] = React.useState([]);
+
+              const [data, setData] = React.useState([
+                { id: 1, name: "Item 1", cost: 100 },
+                { id: 2, name: "Item 2", cost: 7.99 },
+                { id: 3, name: "Item 3", cost: 23.45 },
+              ]);
+            
+              function handleClear() {
+                  setItemsSelected([]);
+              }
+            
+              function showExample() {
+                  setItemsSelected([1, 2, 3]);
+              }
+              
+              const costOfSelectedItems = itemsSelected.reduce((acc, id) => {
+                const item = data.find((d) => d.id === id);
+                return acc + item.cost;
+              }, 0);
+            
+              return <>
+                <Button kind="link" onPress={showExample}>
+                  Show Action Bar
+                </Button>
+                <ActionBar
+                  itemsSelected={itemsSelected.length}
+                  itemsSelectedLabel={\`\${itemsSelected.length} Items Selected - $\${costOfSelectedItems}\`}
+                  clearSelected={handleClear}
+                >
+                  <Button kind="confirm">Button</Button>
+                </ActionBar>
+              </>
+            }
+          `
+        }
+      }
+    },
+    addlContent: {
+      label: "Additional Content",
+      description: "An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",
+      examples: {
+        basic: {
+          react: s`
+            import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/action-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { Card } from "@sps-woodland/cards";
+            
+            function ActionBarExample() {
+              const [itemsSelected, setItemsSelected] = React.useState(0);
+            
+              function handleClear() {
+                  setItemsSelected(0);
+              }
+            
+              function showExample() {
+                  setItemsSelected(3);
+              }
+            
+              return <>
+                <Button kind="link" onPress={showExample}>
+                  Show Action Bar
+                </Button>
+                <ActionBar
+                  itemsSelected={itemsSelected}
+                  clearSelected={handleClear}
+                >
+                  <ActionBarAdditionalContent textAlign="center">
+                    <Card>
+                      <p>hey what's goin on here</p>
+                    </Card>
+                  </ActionBarAdditionalContent>
+                  <Button kind="confirm">Button</Button>
+                </ActionBar>
+              </>
+            }
+          `
+        }
+      }
+    }
+  }
+}, P = {
+  "Action Bar": g
+};
+export {
+  m as ActionBar,
+  i as ActionBarAdditionalContent,
+  P 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 @@
+._9yu2s90{background-color:oklch(100% 0 0);display:flex;bottom:0;position:fixed;justify-content:center;left:0;right:0;padding:.5rem;box-shadow:0 0 .25rem .25rem oklch(26.99% .015 226.65 / .1);z-index:99}._9yu2s91{display:flex;flex-direction:column;max-width:77.5rem;width:100%}._9yu2s92{height:2rem;display:flex;align-items:center;width:100%}._9yu2s93{flex:1}._9yu2s94{margin-right:.25rem}._9yu2s95{display:flex;flex:2;align-items:center;justify-content:center}._9yu2s96{flex:1;text-align:right}._9yu2s97{margin-bottom:.5rem}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@sps-woodland/action-bar",
+  "description": "SPS Woodland Design System Action Bar component",
+  "version": "8.3.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/action-bar",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/action-bar#readme",
+  "type": "module",
+  "module": "./lib/index.es.js",
+  "main": "./lib/index.cjs.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js",
+      "default": "./lib/index.cjs.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./lib/style.css": {
+      "import": "./lib/style.css",
+      "require": "./lib/style.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "@sps-woodland/buttons": "8.3.0",
+    "@sps-woodland/core": "8.3.0",
+    "@sps-woodland/tags": "8.3.0",
+    "@sps-woodland/tokens": "8.3.0"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "@sps-woodland/buttons": "8.3.0",
+    "@sps-woodland/core": "8.3.0",
+    "@sps-woodland/tags": "8.3.0",
+    "@sps-woodland/tokens": "8.3.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) : [],
+    },
+  },
+});