30/12 Daily Promotion

app/client/cypress/support/Objects/Registry.ts

@@ -35,6 +35,7 @@ import { AnvilSnapshot } from "../Pages/Anvil/AnvilSnapshot";
 
 export class ObjectsRegistry {
   private static aggregateHelper__: AggregateHelper;
+
   static get AggregateHelper(): AggregateHelper {
     if (ObjectsRegistry.aggregateHelper__ === undefined) {
       ObjectsRegistry.aggregateHelper__ = new AggregateHelper();
@@ -43,6 +44,7 @@ export class ObjectsRegistry {
   }
 
   private static assertHelper__: AssertHelper;
+
   static get AssertHelper(): AssertHelper {
     if (ObjectsRegistry.assertHelper__ === undefined) {
       ObjectsRegistry.assertHelper__ = new AssertHelper();
@@ -51,6 +53,7 @@ export class ObjectsRegistry {
   }
 
   private static jsEditor__: JSEditor;
+
   static get JSEditor(): JSEditor {
     if (ObjectsRegistry.jsEditor__ === undefined) {
       ObjectsRegistry.jsEditor__ = new JSEditor();
@@ -59,6 +62,7 @@ export class ObjectsRegistry {
   }
 
   private static commonLocators__: CommonLocators;
+
   static get CommonLocators(): CommonLocators {
     if (ObjectsRegistry.commonLocators__ === undefined) {
       ObjectsRegistry.commonLocators__ = new CommonLocators();
@@ -67,6 +71,7 @@ export class ObjectsRegistry {
   }
 
   private static entityExplorer__: EntityExplorer;
+
   static get EntityExplorer(): EntityExplorer {
     if (ObjectsRegistry.entityExplorer__ === undefined) {
       ObjectsRegistry.entityExplorer__ = new EntityExplorer();
@@ -75,6 +80,7 @@ export class ObjectsRegistry {
   }
 
   private static apiPage__: ApiPage;
+
   static get ApiPage(): ApiPage {
     if (ObjectsRegistry.apiPage__ === undefined) {
       ObjectsRegistry.apiPage__ = new ApiPage();
@@ -83,6 +89,7 @@ export class ObjectsRegistry {
   }
 
   private static adminSettings__: AdminSettings;
+
   static get AdminSettings(): AdminSettings {
     if (ObjectsRegistry.adminSettings__ === undefined) {
       ObjectsRegistry.adminSettings__ = new AdminSettings();
@@ -91,6 +98,7 @@ export class ObjectsRegistry {
   }
 
   private static homePage__: HomePage;
+
   static get HomePage(): HomePage {
     if (ObjectsRegistry.homePage__ === undefined) {
       ObjectsRegistry.homePage__ = new HomePage();
@@ -99,6 +107,7 @@ export class ObjectsRegistry {
   }
 
   private static dataSources__: DataSources;
+
   static get DataSources(): DataSources {
     if (ObjectsRegistry.dataSources__ === undefined) {
       ObjectsRegistry.dataSources__ = new DataSources();
@@ -107,6 +116,7 @@ export class ObjectsRegistry {
   }
 
   private static table__: Table;
+
   static get Table(): Table {
     if (ObjectsRegistry.table__ === undefined) {
       ObjectsRegistry.table__ = new Table();
@@ -115,6 +125,7 @@ export class ObjectsRegistry {
   }
 
   private static tabs__: Tabs;
+
   static get Tabs(): Tabs {
     if (ObjectsRegistry.tabs__ === undefined) {
       ObjectsRegistry.tabs__ = new Tabs();
@@ -123,6 +134,7 @@ export class ObjectsRegistry {
   }
 
   private static propertyPane__: PropertyPane;
+
   static get PropertyPane(): PropertyPane {
     if (ObjectsRegistry.propertyPane__ === undefined) {
       ObjectsRegistry.propertyPane__ = new PropertyPane();
@@ -131,6 +143,7 @@ export class ObjectsRegistry {
   }
 
   private static deployMode__: DeployMode;
+
   static get DeployMode(): DeployMode {
     if (ObjectsRegistry.deployMode__ === undefined) {
       ObjectsRegistry.deployMode__ = new DeployMode();
@@ -139,6 +152,7 @@ export class ObjectsRegistry {
   }
 
   private static gitSync__: GitSync;
+
   static get GitSync(): GitSync {
     if (ObjectsRegistry.gitSync__ === undefined) {
       ObjectsRegistry.gitSync__ = new GitSync();
@@ -147,6 +161,7 @@ export class ObjectsRegistry {
   }
 
   private static fakerHelper__: FakerHelper;
+
   static get FakerHelper(): FakerHelper {
     if (ObjectsRegistry.fakerHelper__ === undefined) {
       ObjectsRegistry.fakerHelper__ = new FakerHelper();
@@ -155,6 +170,7 @@ export class ObjectsRegistry {
   }
 
   private static debuggerHelper__: DebuggerHelper;
+
   static get DebuggerHelper(): DebuggerHelper {
     if (ObjectsRegistry.debuggerHelper__ === undefined) {
       ObjectsRegistry.debuggerHelper__ = new DebuggerHelper();
@@ -163,6 +179,7 @@ export class ObjectsRegistry {
   }
 
   private static appSettings__: AppSettings;
+
   static get AppSettings(): AppSettings {
     if (ObjectsRegistry.appSettings__ === undefined) {
       ObjectsRegistry.appSettings__ = new AppSettings();
@@ -171,6 +188,7 @@ export class ObjectsRegistry {
   }
 
   private static generalSettings__: GeneralSettings;
+
   static get GeneralSettings(): GeneralSettings {
     if (ObjectsRegistry.generalSettings__ === undefined) {
       ObjectsRegistry.generalSettings__ = new GeneralSettings();
@@ -179,6 +197,7 @@ export class ObjectsRegistry {
   }
 
   private static pageSettings__: PageSettings;
+
   static get PageSettings(): PageSettings {
     if (ObjectsRegistry.pageSettings__ === undefined) {
       ObjectsRegistry.pageSettings__ = new PageSettings();
@@ -187,6 +206,7 @@ export class ObjectsRegistry {
   }
 
   private static themeSettings__: ThemeSettings;
+
   static get ThemeSettings(): ThemeSettings {
     if (ObjectsRegistry.themeSettings__ === undefined) {
       ObjectsRegistry.themeSettings__ = new ThemeSettings();
@@ -195,6 +215,7 @@ export class ObjectsRegistry {
   }
 
   private static embedSettings__: EmbedSettings;
+
   static get EmbedSettings(): EmbedSettings {
     if (ObjectsRegistry.embedSettings__ === undefined) {
       ObjectsRegistry.embedSettings__ = new EmbedSettings();
@@ -203,6 +224,7 @@ export class ObjectsRegistry {
   }
 
   private static LibraryInstaller__: LibraryInstaller;
+
   static get LibraryInstaller(): LibraryInstaller {
     if (ObjectsRegistry.LibraryInstaller__ === undefined) {
       ObjectsRegistry.LibraryInstaller__ = new LibraryInstaller();
@@ -211,6 +233,7 @@ export class ObjectsRegistry {
   }
 
   private static peekOverlay__: PeekOverlay;
+
   static get PeekOverlay(): PeekOverlay {
     if (ObjectsRegistry.peekOverlay__ === undefined) {
       ObjectsRegistry.peekOverlay__ = new PeekOverlay();
@@ -219,6 +242,7 @@ export class ObjectsRegistry {
   }
 
   private static inviteModal__: InviteModal;
+
   static get InviteModal(): InviteModal {
     if (ObjectsRegistry.inviteModal__ === undefined) {
       ObjectsRegistry.inviteModal__ = new InviteModal();
@@ -227,6 +251,7 @@ export class ObjectsRegistry {
   }
 
   private static templates__: Templates;
+
   static get Templates(): Templates {
     if (ObjectsRegistry.templates__ === undefined) {
       ObjectsRegistry.templates__ = new Templates();
@@ -235,6 +260,7 @@ export class ObjectsRegistry {
   }
 
   private static onboarding__: Onboarding;
+
   static get Onboarding(): Onboarding {
     if (ObjectsRegistry.onboarding__ === undefined) {
       ObjectsRegistry.onboarding__ = new Onboarding();
@@ -243,6 +269,7 @@ export class ObjectsRegistry {
   }
 
   private static autoLayout__: AutoLayout;
+
   static get AutoLayout(): AutoLayout {
     if (ObjectsRegistry.autoLayout__ === undefined) {
       ObjectsRegistry.autoLayout__ = new AutoLayout();
@@ -251,6 +278,7 @@ export class ObjectsRegistry {
   }
 
   private static anvilLayout__: AnvilLayout;
+
   static get AnvilLayout(): AnvilLayout {
     if (ObjectsRegistry.anvilLayout__ === undefined) {
       ObjectsRegistry.anvilLayout__ = new AnvilLayout();
@@ -259,6 +287,7 @@ export class ObjectsRegistry {
   }
 
   private static wdsWidgets__: WDSWidgets;
+
   static get WDSWidgets(): WDSWidgets {
     if (ObjectsRegistry.wdsWidgets__ === undefined) {
       ObjectsRegistry.wdsWidgets__ = new WDSWidgets();
@@ -267,6 +296,7 @@ export class ObjectsRegistry {
   }
 
   private static anvilSnapshot__: AnvilSnapshot;
+
   static get AnvilSnapshot(): AnvilSnapshot {
     if (ObjectsRegistry.anvilSnapshot__ === undefined) {
       ObjectsRegistry.anvilSnapshot__ = new AnvilSnapshot();
@@ -275,6 +305,7 @@ export class ObjectsRegistry {
   }
 
   private static dataManager__: DataManager;
+
   static get DataManager(): DataManager {
     if (ObjectsRegistry.dataManager__ === undefined) {
       ObjectsRegistry.dataManager__ = new DataManager();
@@ -283,6 +314,7 @@ export class ObjectsRegistry {
   }
 
   private static gsheetHelper__: GsheetHelper;
+
   static get GSheetHelper(): GsheetHelper {
     if (ObjectsRegistry.gsheetHelper__ === undefined) {
       ObjectsRegistry.gsheetHelper__ = new GsheetHelper();
@@ -291,6 +323,7 @@ export class ObjectsRegistry {
   }
 
   private static communityTemplates__: CommunityTemplates;
+
   static get CommunityTemplates(): CommunityTemplates {
     if (ObjectsRegistry.communityTemplates__ === undefined) {
       ObjectsRegistry.communityTemplates__ = new CommunityTemplates();
@@ -299,6 +332,7 @@ export class ObjectsRegistry {
   }
 
   private static partialImportExport__: PartialImportExport;
+
   static get PartialImportExport(): PartialImportExport {
     if (ObjectsRegistry.partialImportExport__ === undefined) {
       ObjectsRegistry.partialImportExport__ = new PartialImportExport();
@@ -311,6 +345,7 @@ export const initLocalstorageRegistry = () => {
   cy.window().then((window) => {
     window.localStorage.setItem("ShowCommentsButtonToolTip", "");
     window.localStorage.setItem("updateDismissed", "true");
+    window.localStorage.setItem("NUDGE_SHOWN_SPLIT_PANE", "true");
   });
   localStorage.setItem("inDeployedMode", "false");
 };

app/client/cypress/support/commands.js

@@ -19,6 +19,7 @@ import { v4 as uuidv4 } from "uuid";
 const dayjs = require("dayjs");
 const loginPage = require("../locators/LoginPage.json");
 import homePage from "../locators/HomePage";
+
 dayjs.extend(advancedFormat);
 
 const commonlocators = require("../locators/commonlocators.json");
@@ -54,6 +55,7 @@ export const initLocalstorage = () => {
   cy.window().then((window) => {
     window.localStorage.setItem("ShowCommentsButtonToolTip", "");
     window.localStorage.setItem("updateDismissed", "true");
+    window.localStorage.setItem("NUDGE_SHOWN_SPLIT_PANE", "true");
   });
 };
 

app/client/packages/design-system/ads/jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
     "\\.(svg)$": "<rootDir>/fileTransformer.js", // Create this file for SVG handling (see below)
   },
   moduleNameMapper: {
+    "\\.(css|less)$": "<rootDir>/../../../test/__mocks__/styleMock.js",
     //  this mocks all binary files so jest doesn't try to convert it into js
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/fileTransformer.js",

app/client/packages/design-system/ads/src/Badge/Badge.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from "@storybook/blocks";
+
+import * as BadgeStories from "./Badge.stories";
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+A Badge component is a small visual element used to display additional information, typically in the form of status, count, or notification.
+
+<Canvas of={BadgeStories.BadgeStory} />
+
+## Usage
+
+Badge component often used to enhance the user's understanding of a piece of content or interface element.

app/client/packages/design-system/ads/src/Badge/Badge.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Badge } from "./Badge";
+import styled from "styled-components";
+import type { BadgeProps } from "./Badge.types";
+
+export default {
+  title: "ADS/Components/Badge",
+  component: Badge,
+  argTypes: {
+    kind: {
+      options: ["success", "error", "warning"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template = (args: BadgeProps) => {
+  return (
+    <Box>
+      <Badge {...args} />
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  width: 8vh;
+  height: 8vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const BadgeStory = Template.bind({}) as StoryObj;
+
+export const ButtonSuccessStory = Template.bind({}) as StoryObj;
+ButtonSuccessStory.args = {
+  kind: "success",
+};
+
+export const ButtonErrorStory = Template.bind({}) as StoryObj;
+ButtonErrorStory.args = {
+  kind: "error",
+};
+
+export const ButtonWarningStory = Template.bind({}) as StoryObj;
+ButtonWarningStory.args = {
+  kind: "warning",
+};

app/client/packages/design-system/ads/src/Badge/Badge.styles.tsx

@@ -0,0 +1,24 @@
+import styled, { css } from "styled-components";
+import type { BadgeKind } from "./Badge.types";
+
+const Kind = {
+  error: css`
+    --badge-color-bg: var(--ads-v2-color-fg-error);
+  `,
+  warning: css`
+    --badge-color-bg: var(--ads-v2-color-fg-warning);
+  `,
+  success: css`
+    --badge-color-bg: var(--ads-v2-color-fg-success);
+  `,
+};
+
+export const StyledBadge = styled.div<{
+  kind?: BadgeKind;
+}>`
+  width: 8px;
+  height: 8px;
+  background-color: var(--badge-color-bg);
+  border-radius: 50%;
+  ${({ kind }) => kind && Kind[kind]}
+`;