Add 'packages/canvas-header/' from commit 'e0d0b0293e1981eefa8b8a4df9a37926532356b6'

git-subtree-dir: packages/canvas-header
git-subtree-mainline: ec4fad8
git-subtree-split: e0d0b02

Author: TheSonOfThomp

packages/canvas-header/CHANGELOG.md

@@ -0,0 +1,62 @@
+# @lg-private/canvas-header
+
+## 3.0.1
+
+### Patch Changes
+
+- 1916bd3: Removes background color from canvas header.
+
+  Fixes "Copied" tooltip alignment.
+
+- f66e884: Updates `LiveExample` story so it displays correctly on .design
+
+## 3.0.0
+
+### Major Changes
+
+- c9203f7: Removes `prop-types`. Updates LG core packages to latest
+
+## 2.1.0
+
+### Minor Changes
+
+- daef9ca: Adds `resourceBadges` prop to render badges to the right of the resource name
+
+## 2.0.1
+
+### Patch Changes
+
+- 8f076fb: Fixes naming of lg private packages from `@leafygreen-ui/*` to `@lg-private/*`
+
+## 2.0.0
+
+### Major Changes
+
+- 0d12b4c: - Adds `badges` prop. This prop allows users to pass in [Badges](https://www.mongodb.design/component/badge/live-example).
+
+  E.g.
+
+  ```js
+  badges={<Badge variant="green">Enabled</Badge>}
+  ```
+
+  - Bump to @leafygreen-ui/leafygreen-provider@3.1.12
+
+## 1.0.2
+
+### Patch Changes
+
+- 33e6b57: No functional changes. Upgrades build to use Node 18
+
+## 1.0.1
+
+### Patch Changes
+
+- 476f90a: Updates `icon` & `tokens` packages to latest
+- d5c17a8: Updates TS builds to use `[email protected]`
+
+## 1.0.0
+
+### Major Changes
+
+- 8a2c4d1: First major release of `CanvasHeader`. [LG-3949](https://jira.mongodb.org/browse/LG-3949)

packages/canvas-header/README.md

@@ -0,0 +1,68 @@
+# Canvas Header
+
+![npm (scoped)](https://img.shields.io/npm/v/@lg-private/canvas-header.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/canvas-header/example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @lg-private/canvas-header
+```
+
+### NPM
+
+```shell
+npm install @lg-private/canvas-header
+```
+
+## Example
+
+```js
+import { CanvasHeader } from `@lg-private/canvas-header`;
+import Button from '@leafygreen-ui/button';
+import Icon from '@leafygreen-ui/icon';
+import { BackLink } from '@leafygreen-ui/typography';
+
+
+  <CanvasHeader
+    pageTitle="page title"
+    resourceName='ac_iqttxwn_shard-00-01.hvcuthh.mongodbnet:27017_324892384903284902384903284903284902384903284832908_long_name'
+    resourceIcon={<Icon glyph={'ShardedCluster'} />}
+    backLink={
+      <BackLink
+        href="/home"
+      >
+        Back to Cluster
+      </BackLink>
+    }
+    actions={
+      <Button
+        variant="primary"
+        leftGlyph={<Icon glyph={'InviteUser'} />}
+      >
+        Invite user
+      </Button>
+    }
+    badges={
+      <>
+        <Badge variant="green">Enabled</Badge>
+        <Badge variant="blue">In Dev Mode</Badge>
+      </>
+    }
+  />
+```
+
+## Properties
+
+| Prop           | Type              | Description                                                                   | Default |
+| -------------- | ----------------- | ----------------------------------------------------------------------------- | ------- |
+| `darkMode`     | `boolean`         | Determines if the component renders in dark mode                              | `false` |
+| `pageTitle`    | `React.ReactNode` | Required page title                                                           |         |
+| `resourceName` | `string`          | Opitional resource name that will copy to the clipboard when clicked          |         |
+| `resourceIcon` | `React.ReachNode` | Optional icon that will render to the left of the resource name               |         |
+| `badges`       | `React.ReachNode` | Optional badges that will render to the right of the resource name            |         |
+| `actions`      | `React.ReachNode` | Optional buttons that will render to the right of the badges or resource name |         |
+| `backLink`     | `React.ReactNode` | Optional link that will render above the page title.                          |         |

packages/canvas-header/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@lg-private/canvas-header",
+  "version": "3.0.1",
+  "description": "LeafyGreen UI Kit Canvas Header",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "^4.0.8",
+    "@leafygreen-ui/icon": "^13.0.0",
+    "@leafygreen-ui/lib": "^14.0.0",
+    "@leafygreen-ui/palette": "^4.1.0",
+    "@leafygreen-ui/tokens": "^2.11.0",
+    "@leafygreen-ui/tooltip": "^13.0.0",
+    "@leafygreen-ui/typography": "^20.0.0"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^4.0.0"
+  },
+  "devDependencies": {
+    "@leafygreen-ui/badge": "^9.0.0",
+    "@leafygreen-ui/button": "^22.0.0",
+    "@lg-tools/build": "0.8.0",
+    "@lg-tools/storybook-utils": "^0.3.0",
+    "@faker-js/faker": "^8.4.1"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/canvas-header",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}