graphen 1.10.19 → 2.0.0

package/src/index.ts

@@ -1,4 +1,5 @@
 import Accordion from "src/components/Accordion";
+import Badge from "src/components/Badge";
 import Button from "src/components/Button";
 import Card from "src/components/Card";
 import Dialog from "src/components/Dialog";
@@ -26,6 +27,7 @@ import * as constants from "src/variables/constants";
 
 export {
   Accordion,
+  Badge,
   Button,
   Card,
   Dialog,

package/src/style.scss

@@ -35,6 +35,7 @@
 @import "components/PanelTitle/styles/styles";
 @import "components/Sample/styles/mixins";
 @import "components/Sample/styles/styles";
+@import "components/SectionHeader/styles/styles";
 @import "components/Separator/styles/styles";
 @import "components/Scroller/styles/styles";
 @import "components/Switch/styles/mixins";
@@ -43,5 +44,6 @@
 @import "components/Tooltip/styles/styles";
 @import "components/Validation/styles/styles";
 @import "components/Accordion/styles/styles";
+@import "components/Badge/styles/styles";
 @import "components/Dropdown/styles/styles";
 @import "components/Skeleton/styles/styles";

package/src/variables/_brand.scss

@@ -23,4 +23,5 @@ $gb-color-danger-soft: $color-beauty-bush !default;
 $gb-color-disabled: $color-boulder !default;
 
 /* Fonts */
-$gb-font: Arial !default;
+$gb-font: 'Geist', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif !default;
+$gb-font-mono: 'Geist Mono', ui-monospace, sfmono-regular, menlo, monospace !default;

package/src/variables/_sizes.scss

@@ -3,6 +3,6 @@ $spacing-medium: 6px;
 $spacing-large: 10px;
 $spacing-very-large: 15px;
 
-$radius-small: 2px;
-$radius-medium: 3px;
-$radius-large: 5px;
+$radius-small: 4px;
+$radius-medium: 6px;
+$radius-large: 10px;

package/src/variables/integration/colors.spec.js

@@ -4,18 +4,19 @@ describe("Colors", () => {
   });
 
   it("should make a screenshot", () => {
-    cy.get(".tst-colors").screenshot();
+    cy.get(".docs-tokens").screenshot();
   });
 
   describe("color brand primary", () => {
     it("should have proper styles", () => {
-      cy.get(".tst-colors-primary")
-        .should("have.class", "gc-sample")
-        .should("have.class", "gc-sample gc-sample--brand-primary");
+      cy.contains(".docs-token-row", "$gb-color-primary")
+        .should("have.class", "docs-token-row")
+        .and("contain", "Primary");
     });
 
     it("should have proper properties", () => {
-      cy.get(".tst-colors-primary")
+      cy.contains(".docs-token-row", "$gb-color-primary")
+        .find(".swatch")
         .should("have.css", "background-color")
         .and("equal", "rgb(51, 122, 183)");
     });
@@ -23,13 +24,14 @@ describe("Colors", () => {
 
   describe("color brand text", () => {
     it("should have proper styles", () => {
-      cy.get(".tst-colors-text")
-        .should("have.class", "gc-sample")
-        .should("have.class", "gc-sample gc-sample--brand-text");
+      cy.contains(".docs-token-row", "$gb-color-text")
+        .should("have.class", "docs-token-row")
+        .and("contain", "Text");
     });
 
     it("should have proper properties", () => {
-      cy.get(".tst-colors-text")
+      cy.contains(".docs-token-row", "$gb-color-text")
+        .find(".swatch")
         .should("have.css", "background-color")
         .and("equal", "rgb(88, 88, 88)");
     });
@@ -37,13 +39,14 @@ describe("Colors", () => {
 
   describe("color brand link", () => {
     it("should have proper styles", () => {
-      cy.get(".tst-colors-link")
-        .should("have.class", "gc-sample")
-        .should("have.class", "gc-sample gc-sample--brand-link");
+      cy.contains(".docs-token-row", "$gb-color-link")
+        .should("have.class", "docs-token-row")
+        .and("contain", "Link");
     });
 
     it("should have proper properties", () => {
-      cy.get(".tst-colors-link")
+      cy.contains(".docs-token-row", "$gb-color-link")
+        .find(".swatch")
         .should("have.css", "background-color")
         .and("equal", "rgb(51, 122, 183)");
     });
@@ -51,13 +54,14 @@ describe("Colors", () => {
 
   describe("color brand component", () => {
     it("should have proper styles", () => {
-      cy.get(".tst-colors-component")
-        .should("have.class", "gc-sample")
-        .should("have.class", "gc-sample gc-sample--brand-component");
+      cy.contains(".docs-token-row", "$gb-color-component")
+        .should("have.class", "docs-token-row")
+        .and("contain", "Component");
     });
 
     it("should have proper properties", () => {
-      cy.get(".tst-colors-component")
+      cy.contains(".docs-token-row", "$gb-color-component")
+        .find(".swatch")
         .should("have.css", "background-color")
         .and("equal", "rgb(245, 245, 245)");
     });