@sps-woodland/page-title 7.0.0

package/README.md

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

package/lib/PageTitle.examples.d.ts

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

package/lib/index.cjs.js

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),t=require("@sps-woodland/core"),r=require("@spscommerce/utils");function m(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(o,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return o.default=e,Object.freeze(o)}const n=m(d);var g="_14vazzb0",p="_14vazzb2",b="_14vazzb1";function c({children:e,className:o,...a}){const[[i],l]=t.selectChildren(e,[{type:t.Icon}]),u=i?t.addClassName(i,p):"";return n.createElement("div",{className:t.cl(g,o),...a},u,n.createElement("div",{className:b},l))}t.Metadata.set(c,{name:"Page Title"});var P="_30pzwb0",T="_30pzwb1";function s({children:e,className:o,...a}){const i=t.modChildren(e,l=>l.type===t.Icon?[{className:t.cl(l.props.className,T)}]:[]);return n.createElement("div",{className:t.cl(P,o),...a},i)}t.Metadata.set(s,{name:"Page Subtitle"});const S={components:[c,s],examples:{basic:{label:"Basic",examples:{basic:{react:r.code`
+            import { PageTitle } from "@sps-woodland/page-title";
+            
+            function Component() {
+              return (
+                <PageTitle>
+                  Cabela's Purchase Order #123456789012
+                </PageTitle>
+              );
+            }
+          `}}},withIcon:{label:"With Icon",examples:{withIcon:{react:r.code`
+            import { PageTitle } from "@sps-woodland/page-title";
+            import { Icon } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <PageTitle>
+                  <Icon icon="status-error" color="red-medium" />
+                  Cabela's Purchase Order #123456789012
+                </PageTitle>
+              );
+            }
+          `}}},withSubtitle:{label:"With Subtitle",examples:{withSubtitle:{react:r.code`
+            import { PageTitle, PageSubtitle } from "@sps-woodland/page-title";
+            import { Icon } from "@sps-woodland/core;
+
+            function Component() {
+              return (
+                <PageTitle>
+                  Cabela's Purchase Order #123456789012
+                  <PageSubtitle>Cabela's
+                      <Icon icon="outgoing" />
+                      MacNeil Automotive Parts
+                  </PageSubtitle>
+                </PageTitle>
+              );
+            }
+          `}}},withSubtitleAndIcon:{label:"With Subtitle And Icon",examples:{withSubtitleAndIcon:{react:r.code`
+            import { PageTitle, PageSubtitle } from "@sps-woodland/page-title";
+            import { Icon } from "@sps-woodland/core;
+
+            function Component() {
+              return (
+                <PageTitle>
+                  <Icon aria-hidden="true" icon="status-error" color="red-medium" size="lg"/>
+                  Cabela's Purchase Order #123456789012
+                  <PageSubtitle>
+                      Cabela's <Icon aria-hidden="true" icon="outgoing" />
+                    MacNeil Automotive Parts
+                  </PageSubtitle>
+                </PageTitle>
+              );
+            }
+          `}}}}},f={"Page Title":S};exports.MANIFEST=f;exports.PageSubtitle=s;exports.PageTitle=c;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./page-title/PageTitle";
+export * from "./page-subtitle/PageSubtitle";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,134 @@
+import * as n from "react";
+import { Metadata as s, selectChildren as u, Icon as c, addClassName as g, cl as r, modChildren as b } from "@sps-woodland/core";
+import { code as a } from "@spscommerce/utils";
+var P = "_14vazzb0", T = "_14vazzb2", h = "_14vazzb1";
+function m({
+  children: o,
+  className: i,
+  ...l
+}) {
+  const [[e], t] = u(o, [{ type: c }]), p = e ? g(e, T) : "";
+  return /* @__PURE__ */ n.createElement("div", {
+    className: r(P, i),
+    ...l
+  }, p, /* @__PURE__ */ n.createElement("div", {
+    className: h
+  }, t));
+}
+s.set(m, {
+  name: "Page Title"
+});
+var I = "_30pzwb0", S = "_30pzwb1";
+function d({
+  children: o,
+  className: i,
+  ...l
+}) {
+  const e = b(o, (t) => t.type === c ? [{
+    className: r(t.props.className, S)
+  }] : []);
+  return /* @__PURE__ */ n.createElement("div", {
+    className: r(I, i),
+    ...l
+  }, e);
+}
+s.set(d, {
+  name: "Page Subtitle"
+});
+const f = {
+  components: [m, d],
+  examples: {
+    basic: {
+      label: "Basic",
+      examples: {
+        basic: {
+          react: a`
+            import { PageTitle } from "@sps-woodland/page-title";
+            
+            function Component() {
+              return (
+                <PageTitle>
+                  Cabela's Purchase Order #123456789012
+                </PageTitle>
+              );
+            }
+          `
+        }
+      }
+    },
+    withIcon: {
+      label: "With Icon",
+      examples: {
+        withIcon: {
+          react: a`
+            import { PageTitle } from "@sps-woodland/page-title";
+            import { Icon } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <PageTitle>
+                  <Icon icon="status-error" color="red-medium" />
+                  Cabela's Purchase Order #123456789012
+                </PageTitle>
+              );
+            }
+          `
+        }
+      }
+    },
+    withSubtitle: {
+      label: "With Subtitle",
+      examples: {
+        withSubtitle: {
+          react: a`
+            import { PageTitle, PageSubtitle } from "@sps-woodland/page-title";
+            import { Icon } from "@sps-woodland/core;
+
+            function Component() {
+              return (
+                <PageTitle>
+                  Cabela's Purchase Order #123456789012
+                  <PageSubtitle>Cabela's
+                      <Icon icon="outgoing" />
+                      MacNeil Automotive Parts
+                  </PageSubtitle>
+                </PageTitle>
+              );
+            }
+          `
+        }
+      }
+    },
+    withSubtitleAndIcon: {
+      label: "With Subtitle And Icon",
+      examples: {
+        withSubtitleAndIcon: {
+          react: a`
+            import { PageTitle, PageSubtitle } from "@sps-woodland/page-title";
+            import { Icon } from "@sps-woodland/core;
+
+            function Component() {
+              return (
+                <PageTitle>
+                  <Icon aria-hidden="true" icon="status-error" color="red-medium" size="lg"/>
+                  Cabela's Purchase Order #123456789012
+                  <PageSubtitle>
+                      Cabela's <Icon aria-hidden="true" icon="outgoing" />
+                    MacNeil Automotive Parts
+                  </PageSubtitle>
+                </PageTitle>
+              );
+            }
+          `
+        }
+      }
+    }
+  }
+}, C = {
+  "Page Title": f
+};
+export {
+  C as MANIFEST,
+  d as PageSubtitle,
+  m as PageTitle
+};

package/lib/manifest.d.ts

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

package/lib/page-subtitle/PageSubtitle.css.d.ts

@@ -0,0 +1,2 @@
+export declare const pageSubtitle: string;
+export declare const pageSubtitleIcon: string;

package/lib/page-subtitle/PageSubtitle.d.ts

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

package/lib/page-title/PageTitle.css.d.ts

@@ -0,0 +1,3 @@
+export declare const pageTitle: string;
+export declare const pageTitleText: string;
+export declare const pageTitleIcon: string;

package/lib/page-title/PageTitle.d.ts

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

package/lib/style.css

@@ -0,0 +1 @@
+._14vazzb0{display:flex;flex-direction:row}._14vazzb1{color:#1f282c;display:flex;flex-direction:column;font-size:1.5rem;line-height:1.5rem}._14vazzb2{align-self:flex-start;font-size:1.125rem;line-height:1.5rem;margin-right:.25rem}._30pzwb0{color:#4b5356;font-size:1.125rem;line-height:1.125rem;margin-top:.25rem}._30pzwb1{font-size:.75rem;line-height:1.125rem;margin-left:.25rem;margin-right:.25rem}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@sps-woodland/page-title",
+  "description": "SPS Woodland Design System page title component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/page-title",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/page-title#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": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.1",
+    "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) : [],
+    },
+  },
+});