@guardian/interactive-component-library 0.1.0-alpha.10 → 0.1.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -3,21 +3,8 @@
|
|
|
3
3
|
A set of reusable components for use in interactive pages, written in Preact using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles.
|
|
4
4
|
|
|
5
5
|
## Install the component library in a new client project
|
|
6
|
-
|
|
7
|
-
From [Github Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry):
|
|
8
|
-
|
|
9
|
-
1. [Create a personal access token (classic)](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with `read:packages` scope.
|
|
10
|
-
2. Create a file called `.npmrc` in the root of your new project and add the following:
|
|
11
|
-
|
|
12
|
-
```
|
|
13
|
-
@guardian:registry=https://npm.pkg.github.com
|
|
14
|
-
//npm.pkg.github.com/:_authToken=YOUR_PERSONAL_ACCESS_TOKEN
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
3. Install using npm:
|
|
18
|
-
|
|
19
6
|
```
|
|
20
|
-
npm
|
|
7
|
+
npm install @guardian/interactive-component-library
|
|
21
8
|
```
|
|
22
9
|
|
|
23
10
|
## Contributing to this repository
|
|
@@ -76,9 +63,9 @@ npm uninstall --no-save @guardian/interactive-component-library && npm install
|
|
|
76
63
|
|
|
77
64
|
To publish a new version of the component library, follow these steps:
|
|
78
65
|
|
|
79
|
-
1.
|
|
80
|
-
2. [
|
|
81
|
-
3.
|
|
66
|
+
1. [Create a new release](https://github.com/guardian/interactive-component-library/releases/new) on GitHub (don't forget to write some release notes)
|
|
67
|
+
2. Publishing the release [triggers a workflow](https://github.com/guardian/interactive-component-library/actions) to package the library and publish it to the NPM registry. If the publish actions fails, you can also trigger it manually
|
|
68
|
+
3. The publish action also creates a pull request to bump the version number. Merge the pull request to finish the release
|
|
82
69
|
|
|
83
70
|
## Scripts
|
|
84
71
|
|
|
@@ -1608,18 +1608,17 @@ function Tooltip({
|
|
|
1608
1608
|
}) : tooltip2, displayElement);
|
|
1609
1609
|
}
|
|
1610
1610
|
function tooltipPositionForPoint({
|
|
1611
|
-
targetRect,
|
|
1612
1611
|
positionInTarget,
|
|
1613
1612
|
tooltip: tooltip2,
|
|
1614
1613
|
displayElement
|
|
1615
1614
|
}) {
|
|
1615
|
+
const displayElementRect = displayElement.getBoundingClientRect();
|
|
1616
1616
|
const newPosition = {
|
|
1617
|
-
x: positionInTarget.x +
|
|
1618
|
-
y: positionInTarget.y +
|
|
1617
|
+
x: positionInTarget.x + displayElementRect.x,
|
|
1618
|
+
y: positionInTarget.y + displayElementRect.y
|
|
1619
1619
|
};
|
|
1620
1620
|
const tooltipWidth = tooltip2.offsetWidth;
|
|
1621
1621
|
const tooltipHeight = tooltip2.offsetHeight;
|
|
1622
|
-
const displayElementRect = displayElement.getBoundingClientRect();
|
|
1623
1622
|
if (newPosition.x + tooltipWidth > displayElementRect.right) {
|
|
1624
1623
|
newPosition.x -= tooltipWidth;
|
|
1625
1624
|
}
|