@justeattakeaway/pie-icon-button 0.15.0 → 0.17.0

package/README.md

@@ -11,13 +11,16 @@
 # Table of Contents
 
 1. [Introduction](#pie-icon-button)
-2. [Local Development](#local-development)
-3. [Props](#props)
-4. [Events](#events)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Local Development](#local-development)
+6. [Props](#props)
+7. [Events](#events)
    - [HTML example](#html)
    - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
    - [React example (using Next 13)](#react-templates-using-next-13)
-5. [Testing](#testing)
+8. [Testing](#testing)
    - [Browser Tests](#browser-tests)
    - [Visual Tests](#visual-tests)
 
@@ -28,6 +31,41 @@
 
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
+
+## Installation
+
+To install `pie-icon-button` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-icon-button
+
+# yarn
+$ yarn add @justeattakeaway/pie-icon-button
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte etc.
+import { PieIconButton } from '@justeattakeaway/pie-icon-button';
+
+// React
+// For React, you will need to import our React specific component build
+// Which wraps the web component using the @lit-labs/react package
+import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-icon-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
 ## Local development
 
 Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
@@ -53,18 +91,6 @@ yarn dev --filter=pie-storybook
 ```
 
 
-### Importing the component
-
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte etc.
-import { PieIconButton } from '@justeattakeaway/pie-icon-button';
-
-// React
-// For React, you will need to import our React specific component build
-// Which wraps the web component using the @lit-labs/react package
-import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
-```
-
 ## Importing Icons
 
 We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE iconset as importable web components and are built to work alongside our other PIE components.
@@ -86,7 +112,7 @@ Then, in your markup, you would implement the component like this:
 <pie-icon-button><icon-close /></pie-icon-button>
 ```
 
-> **Warning**
+> [!WARNING]
 > Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as `<icon-close size="xl" />`).
 > These size props will have no effect when used alongside the `pie-icon-button` component, as the icon is resized with respect to the size of the `pie-icon-button`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",
@@ -23,16 +23,19 @@
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
     "test:visual:ci": "yarn test:visual"
   },
-  "author": "JustEatTakeaway - Design System Web Team",
+  "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.8.1",
-    "@justeattakeaway/pie-webc-core": "0.9.0"
+    "@justeattakeaway/pie-icons-webc": "0.10.0",
+    "@justeattakeaway/pie-webc-core": "0.10.0"
   },
   "peerDependencies": {
     "@justeat/pie-design-tokens": "^5.8.2"
   },
   "volta": {
     "extends": "../../../package.json"
-  }
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
 }

package/LICENSE

@@ -1,17 +0,0 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-Copyright (c) Just Eat Takeaway.com
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.