@orangesk/orange-design-system 2.0.0-beta.5 → 2.0.0-beta.7

package/src/components/Icon/styles/style.scss

@@ -29,6 +29,10 @@
         }
       }
     }
+
+    &--with-text-end {
+      margin-inline-end: convert.to-rem(5px);
+    }
   }
 
   use {

package/src/components/Link/styles/style.scss

@@ -16,7 +16,8 @@
     .osk-footer a,
     .mm-header a,
     .megamenu-header a,
-    .tag
+    .tag,
+    small a
   ),
   .link {
     @include mixins.base();

package/src/components/Pill/Pill.tsx

@@ -3,17 +3,22 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
+export const pillColors = ["white", "gray", "transparent"] as const;
+export type PillColor = (typeof pillColors)[number];
+
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
   className?: string;
   children?: ReactNode;
-  colorScheme?: "dark" | "light" | "transparent";
+  color?: PillColor;
   size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
+  colorScheme?: "light" | "dark";
 }
 
 const Pill: React.FC<PillProps> = ({
   className,
   children,
   size,
+  color,
   colorScheme,
   ...other
 }) => (
@@ -21,9 +26,9 @@ const Pill: React.FC<PillProps> = ({
     className={cx(
       CLASS_ROOT,
       {
-        "is-dark": colorScheme === "dark",
+        [`${CLASS_ROOT}--${color}`]: color, // Only apply modifier if color is specified
         "is-light": colorScheme === "light",
-        "is-transparent": colorScheme === "transparent",
+        "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
       className,

package/src/components/Pill/styles/config.scss

@@ -1,10 +1,11 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
+@use "sass:map";
 
 $base: (
-  background-color: var(--color-surface-contrast),
-  color: var(--color-text-inverse),
   font-weight: bold,
+  background-color: map.get(color.$colors-dark, border-subtle),
+  color: color.$white,
 );
 
 $sizes: (
@@ -20,3 +21,18 @@ $sizes: (
     xxlarge: convert.to-rem(64px),
   ),
 );
+
+$colors: (
+  "white": (
+    background-color: color.$white,
+    color: color.$black,
+  ),
+  "gray": (
+    background-color: var(--color-surface-subtle),
+    color: var(--color-text-default),
+  ),
+  "transparent": (
+    background-color: rgba(#ffffff, 0.5),
+    color: var(--color-text-default),
+  ),
+);

package/src/components/Pill/styles/style.scss

@@ -1,15 +1,19 @@
 @use "../../../styles/tools/generate";
 @use "./config";
 @use "./mixins";
+@use "sass:map";
 
 @layer components {
   .pill {
     @include mixins.base();
     @include mixins.sizes();
 
-    &.is-transparent {
-      color: var(--color-text-default);
-      background-color: rgba(#ffffff, 0.5);
+    @each $colorName, $colorProps in config.$colors {
+      &--#{$colorName} {
+        @each $property, $value in $colorProps {
+          #{$property}: $value;
+        }
+      }
     }
   }
 }

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

@@ -18,15 +18,19 @@ const example = (
       Max 3 digits please. <Pill>123</Pill>
     </p>
     <p>
-      <Pill colorScheme="transparent">T</Pill>
-      <Pill colorScheme="dark">D</Pill>
-      <Pill colorScheme="light">L</Pill>
+      <Pill color="transparent">T</Pill>
+      <Pill color="black">D</Pill>
+      <Pill color="white">L</Pill>
     </p>
     <p>
       <Pill size="small">S</Pill>
       <Pill size="medium">M</Pill>
       <Pill size="large">L</Pill>
     </p>
+    <p>
+      <Pill colorScheme="light">Light</Pill>
+      <Pill colorScheme="dark">Dark</Pill>
+    </p>
   </>
 );
 

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/Section/styles/config.scss

@@ -1,38 +1,40 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 
 $spacing: (
   default: (
     default: (
-      padding-top: space.get('large'),
-      padding-bottom: space.get('large'),
+      padding-top: space.get("large"),
+      padding-bottom: space.get("large"),
     ),
     md: (
-      padding-top: space.get('xlarge'),
-      padding-bottom: space.get('xlarge'),
-    )
+      padding-top: space.get("xlarge"),
+      padding-bottom: space.get("xlarge"),
+    ),
   ),
   small: (
     default: (
       padding-top: space.get(),
+      padding-bottom: space.get(),
     ),
     md: (
-      padding-top: space.get('large'),
-    )
+      padding-top: space.get("large"),
+      padding-bottom: space.get("large"),
+    ),
   ),
   xsmall: (
     default: (
-      padding-top: space.get('small'),
-      padding-bottom: space.get('small'),
+      padding-top: space.get("small"),
+      padding-bottom: space.get("small"),
     ),
     md: (
-      padding-top: space.get('small'),
-      padding-bottom: space.get('small'),
-    )
+      padding-top: space.get("small"),
+      padding-bottom: space.get("small"),
+    ),
   ),
 );
 
 $stuck-image-spacing: (
-  default: #{space.get('large') * -1},
-  md: #{space.get('xlarge') * -1},
+  default: #{space.get("large") * -1},
+  md: #{space.get("xlarge") * -1},
 );

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/utilities/color.scss

@@ -117,6 +117,11 @@
     color: color.$black !important;
   }
 
+  .bg-accent {
+    background-color: var(--color-background-accent) !important;
+    color: var(--color-text-default) !important;
+  }
+
   .bg-accent1-blog {
     background-color: var(--color-background-accent1-blog) !important;
     color: var(--color-text-default) !important;

package/src/styles/utilities/layout.scss

@@ -151,6 +151,12 @@
       border: 0;
       aspect-ratio: 1 / 1;
     }
+
+    .aspect-ratio-3-2 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 3 / 2;
+    }
   }
 
   @include aspect-ratio-classes;
@@ -171,6 +177,9 @@
     .d-inline-flex {
       display: inline-flex;
     }
+    .flex-column {
+      flex-direction: column;
+    }
   }
 
   @include display-classes;