@neo4j-ndl/base 0.8.6 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 0.9.0
+
+### Minor Changes
+
+- 826d7ae: refactor code-block component and load more fonts from Google
+
+### Patch Changes
+
+- 4f3ec49: align switch, radio and checkbox to the top
+
+## 0.8.7
+
+### Patch Changes
+
+- 83f91c5: fix dropdown inconsistencies and text input flex gaps
+
 ## 0.8.6
 
 ### Patch Changes

package/lib/neo4j-ds-styles.css

@@ -1,6 +1,6 @@
 
 
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -420,7 +420,7 @@ Ensure the default browser behavior of the `hidden` attribute.
  */
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 09:13:22 GMT
+ * Generated on Thu, 03 Nov 2022 10:30:58 GMT
  */
 :root {
   --border-radius-sm: 4px;
@@ -574,7 +574,7 @@ Ensure the default browser behavior of the `hidden` attribute.
 code,
 .code {
   font-size: var(--font-size-code);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-normal);
   letter-spacing: 0px;
   line-height: 20px;
 }
@@ -1680,6 +1680,7 @@ a.ndl-btn{
     display: grid;
     height: 1rem;
     width: 1rem;
+    flex-shrink: 0;
     cursor: pointer;
     -webkit-appearance: none;
        -moz-appearance: none;
@@ -1851,7 +1852,7 @@ a.ndl-btn{
 /* Label */
 .ndl-form-item .form-item-label{
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
   font-size: var(--font-size-body-medium);
@@ -1859,6 +1860,9 @@ a.ndl-btn{
   letter-spacing: 0.25px;
   line-height: 20px;
 }
+.ndl-form-item .form-item-label > input {
+      margin-top: 2px;
+    }
 .ndl-form-item .form-item-label.fluid{
   display: flex;
   justify-content: space-between;
@@ -1869,7 +1873,7 @@ a.ndl-btn{
 .ndl-form-item.ndl-type-text .form-item-label{
   flex-direction: column-reverse;
   align-items: flex-start;
-  row-gap: 0.25rem;
+  row-gap: 5px;
 }
 .ndl-form-item.ndl-type-text .form-item-label .form-label-text{
   --tw-text-opacity: 1;
@@ -2738,6 +2742,20 @@ a.ndl-btn{
   letter-spacing: 0.25px;
   line-height: 20px;
 }
+.ndl-table .ndl-table-placeholder{
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  display: flex;
+  --tw-translate-x: 50%;
+  --tw-translate-y: -10%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-style: none;
+}
 .ndl-table tr th.table-column-styling {
       border-collapse: separate;
       box-sizing: content-box;
@@ -3367,20 +3385,35 @@ a.ndl-btn{
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 .ndl-code-block-container{
-  height: 100%;
+  position: relative;
+  min-height: 90px;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: 8px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(238 241 246 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(245 247 250 / var(--tw-bg-opacity));
+  padding-top: 0.75rem;
 }
-.ndl-code-block-container .highlight-wrapper{
-  margin-top: 1rem;
+.ndl-code-block-container .ndl-code-block-title{
+  margin-left: 0.75rem;
+  margin-bottom: 0.75rem;
+  min-height: 24px;
+  width: 100%;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-subheading-medium);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.25px;
+  line-height: 24px;
 }
-.ndl-code-block-container .highlight-wrapper.has-header{
-  height: calc(100% - 3.5em);
+.ndl-code-block-container .ndl-code-block-title.disabled{
+  pointer-events: none;
+  opacity: 0.5;
 }
-.ndl-code-block-container .highlight-wrapper:not(.has-header){
-  height: 100%;
+.ndl-code-block-container .highlight-wrapper{
+  position: relative;
 }
 .ndl-code-block-container .highlight-wrapper.focused{
   overflow-y: auto;
@@ -3388,28 +3421,48 @@ a.ndl-btn{
 .ndl-code-block-container .highlight-wrapper:not(.focused){
   overflow-y: hidden;
 }
-/* Component's header */
-.ndl-code-block-container .ndl-code-block-header{
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
-}
-.ndl-code-block-container .ndl-code-block-header.disabled{
-  opacity: 0.5;
+.ndl-code-block-container .highlight-wrapper:after{
+  position: absolute;
+  top: 0px;
+  right: 4px;
+  z-index: 1;
+  height: 100%;
+  width: 0.75rem;
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  --tw-gradient-from: transparent;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
+  --tw-gradient-to: #F5F7FA;
+  --tw-content: "";
+  content: var(--tw-content);
 }
-.ndl-code-block-container .ndl-code-block-header .ndl-code-block-title{
+/* Component's header icons */
+.ndl-code-block-container .ndl-code-block-actions{
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 10;
   display: flex;
-  align-items: center;
+  border-radius: 8px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
+  padding: 4px;
 }
-.ndl-code-block-container .ndl-code-block-header .ndl-code-block-title.disabled{
-  pointer-events: none;
+.ndl-code-block-container .ndl-code-block-actions.disabled{
+  opacity: 0.5;
 }
-/* Component's header icons */
-.ndl-code-block-container .ndl-code-block-header .ndl-code-block-actions{
-  display: flex;
+.ndl-code-block-container .ndl-code-block-expand-button{
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  z-index: 10;
+  border-radius: 8px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
+  padding: 0.25rem;
 }
+.ndl-code-block-container .linenumber {
+    min-width: 32px !important;
+  }
 .n-sr-only{
   position: absolute;
   width: 1px;
@@ -3501,9 +3554,6 @@ a.ndl-btn{
 .n-h-4{
   height: 1rem;
 }
-.n-h-80{
-  height: 20rem;
-}
 .n-h-10{
   height: 2.5rem;
 }

package/lib/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 09:13:22 GMT
+ * Generated on Thu, 03 Nov 2022 10:30:58 GMT
  */
 
 :root {

package/lib/tokens/js/tokens-raw.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 09:13:22 GMT
+ * Generated on Thu, 03 Nov 2022 10:30:58 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Mon, 24 Oct 2022 09:13:22 GMT
+* Generated on Thu, 03 Nov 2022 10:30:58 GMT
 */
 module.exports = {
     "borderRadius": {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 24 Oct 2022 09:13:22 GMT
+// Generated on Thu, 03 Nov 2022 10:30:58 GMT
 
 $border-radius-sm: 4px;
 $border-radius-md: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/base",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "description": "Neo4j base package for the design system",
   "author": "Neo4j Inc.",
   "homepage": "",