Create popover tokens (#366)

* First draft of the popover tokens

* Update Popover.json

* Update Popover.json

* Update Popover.json

* Update tokens/properties/components/Popover.json

* Update tokens/properties/components/Popover.json

* Update tokens/properties/components/Popover.json

* Update tokens/properties/components/Popover.json

* Update tokens/properties/components/Popover.json

* Update tokens/properties/components/Popover.json

* feat: add Popover component (#373)

* feat: add Popover component

The scss use directive has to be added to vue.config.js because it has
to be in front of all other rules.

Co-authored-by: bereket-WMDE <71328938+bereket-WMDE@users.noreply.github.com>

* Fix most rtl positioning issues

Easiest would be to manually define two explicit rtl and ltr blocks to
workaround transforms not being handled by postcss-logical, but that
doesn't work because we're prefixing _everything_ with .wikit :/

So we need to figure out how to not rely on translateX and horizontally
moved origins of transformation.

* Fix alignment of horizontal center tooltips

translateX isn't adjusted by postcss-logical, therefore we have to make
use of flexbox also somewhat affecting its absolute positioned children.

* Fix story layout

remove debugging color and make headline be on its own line.

* Change left to start and right to end for Popover

This accounts for the Popover actually switching sides between ltr and
rtl.

* Set direction in story explicitly to fix Safari

Co-authored-by: bereket-WMDE <71328938+bereket-WMDE@users.noreply.github.com>

Co-authored-by: Michael Große <michael.grosse@wikimedia.de>
Co-authored-by: bereket-WMDE <71328938+bereket-WMDE@users.noreply.github.com>

CHANGELOG.md

@@ -29,6 +29,7 @@ development)_
 - New nativeType prop to the Button component
 - New Checkbox Component
 - New ToggleButton and ToggleButtonGroup components
+- Add Popover component
 - Added new icon type for new window
 - Add new icon type for link 
 - Add new icon type for additions

tokens/properties/components/Popover.json

@@ -0,0 +1,69 @@
+{
+    "wikit-Popover": {
+        "color": {
+            "value": "{font.color.base.value}"
+        },
+        "font-family": {
+            "value": "{font.family.style.body.value}"
+        },
+        "font-size": {
+            "value": "{font.size.style.body-s.value}"
+        },
+        "font-weight": {
+            "value": "{font.weight.style.body.value}"
+        },
+        "line-height": {
+            "value": "{font.line-height.style.body-s.value}"
+        },
+        "padding": {
+            "value": "{dimension.spacing.medium.value}"
+        },
+        "border-style": {
+            "value": "{border.style.base.value}"
+        },
+        "border-width": {
+            "value": "{border.width.thin.value}"
+        },
+        "border-color": {
+            "value": "{border.color.base.default.value}"
+        },
+        "border-radius": {
+            "value": "{border.radius.base.value}"
+        },
+        "background-color": {
+            "value": "{background.color.base.default.value}"
+        },
+        "max-width": {
+            "value": "{dimension.width.large.value}"
+        },
+        "box-shadow": {
+            "value": "{box-shadow.elevation.dialog.value}"
+        },
+        "transition": {
+            "delay": {
+                "value":"{transition.duration.fast.value}",
+                "comment": "Show and hide delays"
+            }
+        },
+        "gap": {
+            "value": "{dimension.spacing.xsmall.value}",
+            "comment": "Aka distance. This refers to the space between the target and the popover pointer. Better names welcome"
+        },
+        "pointer":  {
+            "width": {
+                "value": "{dimension.spacing.large.value}"
+            },
+            "height": {
+                "value": "{dimension.spacing.small.value}"
+            },
+            "margin": {
+                "horizontal": {
+                    "value": "{dimension.spacing.medium.value}"
+                },
+                "vertical": {
+                    "value": "{dimension.spacing.small.value}"
+                }
+            }
+        }
+    }
+}