feat(SW-1446): add Jump to functionality to Destination Overview Page

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -39,6 +39,13 @@ export const PrimaryDefault: Story = {
   },
 }
 
+export const PrimaryDisabled: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    isDisabled: true,
+  },
+}
+
 export const PrimaryLarge: Story = {
   args: {
     ...PrimaryDefault.args,
@@ -69,6 +76,13 @@ export const SecondaryDefault: Story = {
   },
 }
 
+export const SecondaryDisabled: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    isDisabled: true,
+  },
+}
+
 export const SecondaryLarge: Story = {
   args: {
     ...SecondaryDefault.args,
@@ -99,6 +113,13 @@ export const TertiaryDefault: Story = {
   },
 }
 
+export const TertiaryDisabled: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    isDisabled: true,
+  },
+}
+
 export const TertiaryLarge: Story = {
   args: {
     ...TertiaryDefault.args,
@@ -120,6 +141,43 @@ export const TertiarySmall: Story = {
   },
 }
 
+export const InvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Inverted',
+  },
+}
+
+export const InvertedDisabled: Story = {
+  args: {
+    ...InvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const InvertedLarge: Story = {
+  args: {
+    ...InvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const InvertedMedium: Story = {
+  args: {
+    ...InvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const InvertedSmall: Story = {
+  args: {
+    ...InvertedDefault.args,
+    size: 'Small',
+  },
+}
+
 export const TextDefault: Story = {
   args: {
     onPress: fn(),

packages/design-system/lib/components/Button/button.module.css

@@ -74,6 +74,24 @@
   color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
 }
 
+.variant-inverted {
+  background-color: var(--Component-Button-Inverted-Default);
+  border-color: transparent;
+  color: var(--Component-Button-Inverted-On-fill-Default);
+}
+
+.variant-inverted:hover {
+  background-color: var(--Component-Button-Inverted-Hover);
+  border-color: transparent;
+  color: var(--Component-Button-Inverted-On-fill-Hover);
+}
+
+.variant-inverted:disabled {
+  background-color: var(--Component-Button-Inverted-Disabled);
+  border-color: transparent;
+  color: var(--Component-Button-Inverted-On-fill-Disabled);
+}
+
 .variant-text {
   background-color: transparent;
   border-color: transparent;

packages/design-system/lib/components/Button/variants.ts

@@ -14,6 +14,7 @@ export const config = {
       Primary: styles['variant-primary'],
       Secondary: styles['variant-secondary'],
       Tertiary: styles['variant-tertiary'],
+      Inverted: styles['variant-inverted'],
       Text: styles['variant-text'],
       Icon: styles['variant-icon'],
     },

packages/design-system/package.json

@@ -126,7 +126,7 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-aria-components": "^1.6.0",
+    "react-aria-components": "^1.7.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
@@ -161,7 +161,7 @@
     "material-symbols": "^0.29.0",
     "prettier": "^3.4.2",
     "react": "^18.2.0",
-    "react-aria-components": "^1.6.0",
+    "react-aria-components": "^1.7.1",
     "react-dom": "^18.2.0",
     "react-material-symbols": "^4.4.0",
     "rollup": "^4.34.8",