Merge pull request #717 from appsmithorg/release

chore: Release PR

.changeset/afraid-kids-stare.md

@@ -0,0 +1,6 @@
+---
+"@appsmithorg/design-system-old": patch
+"@appsmithorg/design-system": patch
+---
+
+feat: new workflow icons

.changeset/poor-clouds-greet.md

@@ -0,0 +1,5 @@
+---
+"@appsmithorg/design-system": patch
+---
+
+feat: Announcement modal

packages/design-system/src/AnnouncementModal/AnnouncementModal.constants.ts

@@ -0,0 +1,7 @@
+import { CLASS_NAME_PREFIX } from "__config__/constants";
+
+export const AnnouncementModalClassName = `${CLASS_NAME_PREFIX}-announcement-modal`;
+export const AnnouncementModalBannerClassName = `${AnnouncementModalClassName}__banner`;
+export const AnnouncementModalContentClassName = `${AnnouncementModalClassName}__content`;
+export const AnnouncementModalContentDataClassName = `${AnnouncementModalContentClassName}-data`;
+export const AnnouncementModalContentFooterClassName = `${AnnouncementModalContentClassName}-footer`;

packages/design-system/src/AnnouncementModal/AnnouncementModal.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { AnnouncementModal } from "./AnnouncementModal";
+import { Button } from "../Button";
+
+export default {
+  title: "Design System/Announcement",
+  component: AnnouncementModal,
+} as Meta<typeof AnnouncementModal>;
+
+type Story = StoryObj<typeof AnnouncementModal>;
+
+export const AnnouncementModalStory: Story = {
+  name: "Modal",
+  args: {
+    banner: "https://assets.appsmith.com/new-sidebar-banner.svg",
+    description:
+      "You can now write queries & JS functions as you refer to your UI on the side. This is a beta version that we will continue to improve with your feedback.",
+    title: "Code and UI side-by-side",
+    footer: (
+      <>
+        <Button kind="primary" size="md">
+          Try out
+        </Button>
+        <Button kind="tertiary" size="md">
+          Learn More
+        </Button>
+      </>
+    ),
+    isOpen: true,
+    isBeta: true,
+  },
+  render: (args) => <AnnouncementModal {...args} />,
+};

packages/design-system/src/AnnouncementModal/AnnouncementModal.styles.tsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { ModalContent } from "Modal";
+
+export const StyledModalContent = styled(ModalContent)`
+  padding: 0;
+  width: 400px;
+  overflow: hidden;
+`;
+
+export const BannerImage = styled.div<{ url: string }>`
+  height: 350px;
+  width: 100%;
+  background-image: url("${({ url }) => url}");
+  background-position: center;
+  background-size: cover;
+`;
+
+export const BannerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--ads-v2-spaces-9);
+  gap: var(--ads-v2-spaces-7);
+`;
+
+export const BannerData = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: var(--ads-v2-spaces-3);
+`;
+
+export const BannerTitle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ads-v2-spaces-3);
+`;
+
+export const BannerFooter = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: var(--ads-v2-spaces-3);
+`;

packages/design-system/src/AnnouncementModal/AnnouncementModal.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Modal } from "Modal";
+
+import { AnnouncementModalProps } from "./AnnouncementModal.types";
+import {
+  StyledModalContent,
+  BannerImage,
+  BannerContent,
+  BannerData,
+  BannerTitle,
+  BannerFooter,
+} from "./AnnouncementModal.styles";
+import { Text } from "Text";
+import { Tag } from "Tag";
+import {
+  AnnouncementModalBannerClassName,
+  AnnouncementModalClassName,
+  AnnouncementModalContentClassName,
+  AnnouncementModalContentDataClassName,
+  AnnouncementModalContentFooterClassName,
+} from "./AnnouncementModal.constants";
+
+function AnnouncementModal({
+  banner,
+  description,
+  footer,
+  isBeta,
+  isOpen,
+  title,
+}: AnnouncementModalProps) {
+  return (
+    <Modal open={isOpen}>
+      <StyledModalContent className={AnnouncementModalClassName}>
+        <BannerImage
+          className={AnnouncementModalBannerClassName}
+          url={banner}
+        />
+        <BannerContent className={AnnouncementModalContentClassName}>
+          <BannerData className={AnnouncementModalContentDataClassName}>
+            <BannerTitle>
+              <Text kind="heading-m">{title}</Text>
+              {isBeta ? (
+                <Tag isClosable={false} size="md">
+                  Beta
+                </Tag>
+              ) : null}
+            </BannerTitle>
+            <Text kind="body-m">{description}</Text>
+          </BannerData>
+          <BannerFooter className={AnnouncementModalContentFooterClassName}>
+            {footer}
+          </BannerFooter>
+        </BannerContent>
+      </StyledModalContent>
+    </Modal>
+  );
+}
+
+AnnouncementModal.displayName = "AnnouncementModal";
+
+export { AnnouncementModal };

packages/design-system/src/AnnouncementModal/AnnouncementModal.types.ts

@@ -0,0 +1,15 @@
+// AnnouncementModal props
+export type AnnouncementModalProps = {
+  /** flag to show or hide modal  */
+  isOpen: boolean;
+  /** the banner url of the announcement */
+  banner: string;
+  /** the title of the announcement */
+  title: string;
+  /** the description of the announcement */
+  description: string;
+  /** the footer of the announcement */
+  footer?: React.ReactNode;
+  /** flag to show or hide beta flag  */
+  isBeta?: boolean;
+};

packages/design-system/src/AnnouncementModal/index.ts

@@ -0,0 +1,2 @@
+export * from "./AnnouncementModal";
+export * from "./AnnouncementModal.types";

packages/design-system/src/Icon/Icon.provider.tsx

@@ -711,6 +711,9 @@ const ModuleIcon = importSvg(
 const WorkflowsIcon = importSvg(
   () => import("../__assets__/icons/ads/workflows.svg"),
 );
+const WorkflowsMonochromeIcon = importSvg(
+  () => import("../__assets__/icons/ads/workflows-mono.svg"),
+);
 const DeleteIcon = importSvg(
   () => import("../__assets__/icons/control/delete.svg"),
 );
@@ -1281,6 +1284,7 @@ const ICON_LOOKUP = {
   "packages-v3": PackagesV3Icon,
   "minimize-v3": MinimizeV3Icon,
   "maximize-v3": MaximizeV3Icon,
+  "workflows-mono": WorkflowsMonochromeIcon,
   billing: BillingIcon,
   binding: Binding,
   book: BookIcon,

packages/design-system/src/Modal/Modal.tsx

@@ -28,7 +28,7 @@ function ModalContent(props: ModalContentProps) {
   const { children, className, overlayClassName, ...rest } = props;
   return (
     <Portal>
-      <StyledOverlay className={overlayClassName}/>
+      <StyledOverlay className={overlayClassName} />
       <StyledContent
         className={clsx(ModalContentClassName, className)}
         {...rest}

packages/design-system/src/index.ts

@@ -1,6 +1,7 @@
 import "./__theme__/default/index.css";
 
 export * from "./AnnouncementPopover";
+export * from "./AnnouncementModal";
 export * from "./Avatar";
 export * from "./Button";
 export * from "./Banner";