make storybook a tabbed window

components/StyledButton.qml

@@ -8,6 +8,7 @@ Button {
     property alias radius: rectangle.radius
 
     font.pixelSize: Styling.typography.textSize.base
+    font.family: Styling.typography.fontFamily
     verticalPadding: 6
     horizontalPadding: 8
 

components/StyledIconButton.qml

@@ -22,6 +22,7 @@ RoundButton {
         id: icon
         font: control.font
         text: control.text
+        verticalAlignment: Text.AlignVCenter
         color: control.color
         Behavior on color {
             ColorAnimation {

components/StyledTabBar.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+TabBar {
+    id: control
+
+    background: Item {}
+}

components/StyledTabButton.qml

@@ -0,0 +1,44 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls.Basic
+
+TabButton {
+    id: control
+
+    contentItem: Text {
+        id: icon
+        font.pixelSize: Styling.typography.textSize.base
+        font.family: Styling.typography.fontFamily
+        text: control.text
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+        Behavior on color {
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
+        }
+        rotation: control.rotation
+        Behavior on rotation {
+            RotationAnimation {
+                duration: Styling.animations.speed.slow
+                easing.type: Easing.OutQuad
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: rectangle
+        color: control.hovered ? Styling.theme.primary : Styling.theme.base200
+        Behavior on color {
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
+        }
+        // radius: Styling.theme.radiusField
+    }
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+}