@teambit/component 0.0.558 → 0.0.559

package/component.docs.mdx

@@ -0,0 +1,8 @@
+---
+description: Component aspect for Bit components
+labels: ['component', 'bit', 'extension', 'aspect']
+---
+
+import { Component } from '@teambit/component.aspect-docs.component';
+
+<Component />

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.558",
+  "version": "0.0.559",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.558"
+    "version": "0.0.559"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -26,38 +26,38 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/component-id": "0.0.378",
-    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.467",
-    "@teambit/aspect-loader": "0.0.558",
-    "@teambit/legacy-bit-id": "0.0.377",
-    "@teambit/toolbox.string.capitalize": "0.0.462",
-    "@teambit/cli": "0.0.388",
-    "@teambit/config": "0.0.399",
-    "@teambit/express": "0.0.477",
-    "@teambit/graphql": "0.0.558",
-    "@teambit/bit-error": "0.0.374",
-    "@teambit/command-bar": "0.0.558",
-    "@teambit/preview": "0.0.558",
-    "@teambit/pubsub": "0.0.558",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.465",
-    "@teambit/ui-foundation.ui.main-dropdown": "0.0.465",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.467",
-    "@teambit/ui": "0.0.558",
-    "@teambit/component-issues": "0.0.23",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.466",
-    "@teambit/cli-table": "0.0.11",
-    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.465",
+    "@teambit/component-id": "0.0.379",
+    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.468",
+    "@teambit/aspect-loader": "0.0.559",
+    "@teambit/legacy-bit-id": "0.0.378",
+    "@teambit/toolbox.string.capitalize": "0.0.463",
+    "@teambit/cli": "0.0.389",
+    "@teambit/config": "0.0.400",
+    "@teambit/express": "0.0.478",
+    "@teambit/graphql": "0.0.559",
+    "@teambit/bit-error": "0.0.375",
+    "@teambit/command-bar": "0.0.559",
+    "@teambit/preview": "0.0.559",
+    "@teambit/pubsub": "0.0.559",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.466",
+    "@teambit/ui-foundation.ui.main-dropdown": "0.0.466",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.468",
+    "@teambit/ui": "0.0.559",
+    "@teambit/component-issues": "0.0.24",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.467",
+    "@teambit/cli-table": "0.0.12",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.466",
     "@teambit/design.ui.empty-box": "0.0.352",
-    "@teambit/harmony.ui.aspect-box": "0.0.465",
+    "@teambit/harmony.ui.aspect-box": "0.0.466",
     "@teambit/design.ui.pages.not-found": "0.0.352",
     "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/compositions": "0.0.558",
-    "@teambit/deprecation": "0.0.558",
-    "@teambit/envs": "0.0.558",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.465",
-    "@teambit/component.ui.version-dropdown": "0.0.469",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.86",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.86"
+    "@teambit/compositions": "0.0.559",
+    "@teambit/deprecation": "0.0.559",
+    "@teambit/envs": "0.0.559",
+    "@teambit/component.ui.version-dropdown": "0.0.470",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.87",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.87",
+    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.466"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -72,11 +72,11 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/component.aspect-docs.component": "0.0.107"
+    "@teambit/component.aspect-docs.component": "0.0.108"
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.174",
+    "@teambit/legacy": "1.0.175",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -104,7 +104,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.174",
+        "@teambit/legacy": "1.0.175",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
@@ -113,10 +113,17 @@
   "files": [
     "dist",
     "!dist/tsconfig.tsbuildinfo",
-    "README.md",
-    "README.mdx",
-    "*.js",
-    "*.json"
+    "**/*.md",
+    "**/*.mdx",
+    "**/*.js",
+    "**/*.json",
+    "**/*.sass",
+    "**/*.scss",
+    "**/*.less",
+    "**/*.css",
+    "**/*.css",
+    "**/*.jpeg",
+    "**/*.gif"
   ],
   "private": false,
   "engines": {

package/ui/aspect-page/aspect-page.module.scss

@@ -0,0 +1,20 @@
+.aspectPage {
+  padding: 50px 40px 100px 40px;
+  width: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  > div {
+    max-width: 1440px;
+    margin: 0 auto;
+  }
+}
+.title {
+  margin-bottom: 25px;
+  font-size: var(--bit-h-xs, 26px);
+}
+.separator {
+  margin-bottom: 41px;
+}
+.aspectBox {
+  margin-bottom: 32px;
+}

package/ui/component.module.scss

@@ -0,0 +1,7 @@
+$topbarHeight: 64px;
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}

package/ui/menu/menu.module.scss

@@ -0,0 +1,62 @@
+.topBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.leftSide {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.navigation {
+  display: flex;
+  list-style: none;
+  height: 100%;
+  padding-left: 28px;
+  @media screen and (max-width: 768px) {
+    padding-left: 6px;
+  }
+
+  > li {
+    display: block;
+    margin-right: 16px;
+    height: 100%;
+  }
+}
+
+.rightSide {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  > * {
+    margin-right: 12px;
+    &:last-child {
+      margin-right: 16px;
+    }
+  }
+  .widgets {
+    height: 100%;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+    > nav {
+      > a {
+        padding: 0;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .widget {
+    font-size: 17px;
+  }
+}
+
+.useBox {
+  --bit-drawer-margin: 14px;
+}

package/ui/top-bar-nav/top-bar-nav.module.scss

@@ -0,0 +1,52 @@
+.topBarLink {
+  position: relative;
+  padding: 0 8px;
+
+  box-sizing: border-box;
+
+  display: flex;
+  align-items: center;
+
+  color: inherit;
+  text-decoration: none;
+
+  transition: color 300ms;
+  margin: 0 5px;
+
+  &:hover:not(.active) {
+    > div {
+      background-color: var(--bit-bg-heavy);
+    }
+  }
+
+  &.active {
+    color: var(--bit-accent-color, #6c5ce7);
+
+    &:after {
+      background-color: var(--bit-accent-color, #6c5ce7);
+      height: 4px;
+    }
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: transparent;
+    height: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    transition: background-color 300ms, height 300ms;
+  }
+
+  > div {
+    border-radius: 6px;
+    padding: 0 8px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    transition: background-color 300ms ease-in-out;
+  }
+}