@orangesk/orange-design-system 2.0.0-beta.6 → 2.0.0-beta.8

package/src/components/Pill/tests/Pill.unit.test.js

@@ -35,25 +35,54 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("pill--large");
     });
 
-    it("has colorScheme class when colorScheme prop is set", () => {
+    it("has default black styling without modifier", () => {
+      const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
+      expect(getByTestId("test-id")).toHaveClass("pill");
+      expect(getByTestId("test-id")).not.toHaveClass("pill--black");
+    });
+
+    it("has white class when color is white", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="transparent" data-testid="test-id">
+        <Pill color="white" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-transparent");
+      expect(getByTestId("test-id")).toHaveClass("pill--white");
     });
 
-    it("has dark colorScheme class when colorScheme is dark", () => {
+    it("has gray class when color is gray", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="dark" data-testid="test-id">
+        <Pill color="gray" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
+      expect(getByTestId("test-id")).toHaveClass("pill--gray");
     });
 
-    it("has light colorScheme class when colorScheme is light", () => {
+    it("has transparent class when color is transparent", () => {
+      const { getByTestId } = render(
+        <Pill color="transparent" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("pill--transparent");
+    });
+
+    it("supports all available colors", () => {
+      const colors = ["white", "gray", "transparent"];
+
+      colors.forEach((color) => {
+        const { getByTestId } = render(
+          <Pill color={color} data-testid={`test-${color}`}>
+            {color}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${color}`)).toHaveClass(`pill--${color}`);
+      });
+    });
+
+    it("has is-light class when colorScheme is light", () => {
       const { getByTestId } = render(
         <Pill colorScheme="light" data-testid="test-id">
           pill
@@ -62,6 +91,15 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("is-light");
     });
 
+    it("has is-dark class when colorScheme is dark", () => {
+      const { getByTestId } = render(
+        <Pill colorScheme="dark" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+
     it("passes other props", () => {
       const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
       expect(getByTestId("test")).toBeInTheDocument();

package/src/components/index.ts

@@ -1,5 +1,6 @@
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
+import { AnchorNavigation } from "./AnchorNavigation";
 import { Tag, TagButton } from "./Tag";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
@@ -94,6 +95,7 @@ export {
   Accordion,
   AccordionItem,
   Alert,
+  AnchorNavigation,
   Autocomplete,
   Bar,
   BarBreak,

package/src/styles/base/globals.scss

@@ -28,8 +28,26 @@
   color: var(--color-text-default);
 }
 
+:root {
+  --extra-scroll-margin: 0;
+  --header-height: 80px;
+}
+
+@media screen and (min-width: 992px) {
+  :root {
+    --header-height: 120px;
+  }
+}
+
+:target {
+  scroll-margin-top: calc(
+    var(--header-height) + var(--extra-scroll-margin) - 1px
+  );
+}
+
 html {
   font-size: base.$font-size;
+  scroll-padding-top: unset;
 }
 
 html,

package/src/styles/utilities/color.scss

@@ -75,6 +75,10 @@
     background-color: var(--color-surface-subtle) !important;
   }
 
+  .bg-gray-lighter {
+    background-color: var(--color-background-secondary) !important;
+  }
+
   .bg-blue {
     background-color: var(--color-fill-accent1) !important;
     // TODO: replace with new token when available