Feature/early access

.vscode/settings.json

@@ -12,6 +12,7 @@
     "digmathon",
     "digmo",
     "dont",
+    "drilldowns",
     "hotspot",
     "leaderboard",
     "precommit",

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/EarlyAccessPromotionCard/EarlyAccessPromotionCard.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { EarlyAccessPromotionCard } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof EarlyAccessPromotionCard> = {
+  title:
+    "Insights/InsightsCatalog/PromotionSection/PromotionCard/EarlyAccessPromotionCard",
+  component: EarlyAccessPromotionCard,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {}
+};

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/EarlyAccessPromotionCard/index.tsx

@@ -0,0 +1,41 @@
+import { PromoText, PromoTextBold } from "../../../styles";
+import { Right } from "../styles";
+import * as s from "./styles";
+import { EarlyAccessPromotionCardProps } from "./types";
+
+export const EarlyAccessPromotionCard = ({
+  onAccept,
+  onDiscard
+}: EarlyAccessPromotionCardProps) => {
+  return (
+    <s.StyledPromotionCard
+      onAccept={onAccept}
+      onDiscard={onDiscard}
+      scope="early-access"
+      acceptBtnText="Register now"
+      title={
+        <PromoText>
+          Get <PromoTextBold>Digma features early access</PromoTextBold>
+        </PromoText>
+      }
+      collapsedBackground={
+        <Right>
+          <img
+            src={
+              "/images/promotion/early-access/collapsedContainerBackground.svg"
+            }
+          />
+        </Right>
+      }
+      background={
+        <img src={"/images/promotion/early-access/promotionLogo.svg"} />
+      }
+    >
+      <s.StyledDescription>
+        <span>Register to get early</span>
+        <span>access to Digma</span>
+        <span>capabilities</span>
+      </s.StyledDescription>
+    </s.StyledPromotionCard>
+  );
+};

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/EarlyAccessPromotionCard/styles.ts

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { PromotionCard } from "..";
+import { Description } from "../styles";
+
+export const StyledDescription = styled(Description)`
+  height: 91px;
+`;
+
+export const StyledPromotionCard = styled(PromotionCard)`
+  padding: 16px;
+`;

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/EarlyAccessPromotionCard/types.ts

@@ -0,0 +1,4 @@
+export interface EarlyAccessPromotionCardProps {
+  onDiscard: () => void;
+  onAccept: () => void;
+}

src/components/Insights/InsightsCatalog/PromotionCard/PromotionCard.stories.tsx → src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/PromotionCard.stories.tsx

@@ -3,7 +3,7 @@ import { PromotionCard } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof PromotionCard> = {
-  title: "Insights/InsightsCatalog/PromotionCard",
+  title: "Insights/InsightsCatalog/PromotionSection/PromotionCard",
   component: PromotionCard,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightsCatalog/PromotionCard/PromotionTag/PromotionTag.stories.tsx → src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/PromotionTag/PromotionTag.stories.tsx

@@ -3,7 +3,7 @@ import { PromotionTag } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof PromotionTag> = {
-  title: "Insights/InsightsCatalog/PromotionCard/PromotionTag",
+  title: "Insights/InsightsCatalog/PromotionSection/PromotionCard/PromotionTag",
   component: PromotionTag,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightsCatalog/PromotionCard/PromotionTag/index.tsx → src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/PromotionTag/index.tsx

@@ -1,4 +1,4 @@
-import { AffectIcon } from "../../../../common/icons/12px/AffectIcon";
+import { AffectIcon } from "../../../../../common/icons/12px/AffectIcon";
 import * as s from "./styles";
 
 export const PromotionTag = () => {

src/components/Insights/InsightsCatalog/PromotionCard/PromotionTag/styles.ts → src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/PromotionTag/styles.ts

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { caption2BoldTypography } from "../../../../common/App/typographies";
+import { caption2BoldTypography } from "../../../../../common/App/typographies";
 
 export const Container = styled.div`
   width: fit-content;

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/UdemyCoursePromotionCard/UdemyCoursePromotionCard.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { UdemyCoursePromotionCard } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof UdemyCoursePromotionCard> = {
+  title:
+    "Insights/InsightsCatalog/PromotionSection/PromotionCard/UdemyCoursePromotionCard",
+  component: UdemyCoursePromotionCard,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {}
+};

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/UdemyCoursePromotionCard/index.tsx

@@ -0,0 +1,55 @@
+import { PromotionCard } from "..";
+import { PromoText, PromoTextBold } from "../../../styles";
+import { PromotionTag } from "../PromotionTag";
+import { Centered, Description, Right } from "../styles";
+import * as s from "./styles";
+import { UdemyCoursePromotionCardProps } from "./types";
+
+const UdemyPromotionCollapsedBackground = () => (
+  <>
+    <Centered>
+      <img src={"/images/promotion/udemy/collapsedContainerBackground.svg"} />
+    </Centered>
+    <Right>
+      <img
+        src={"/images/promotion/udemy/collapsedContainerEllipseShadow.svg"}
+      />
+    </Right>
+  </>
+);
+
+const UdemyPromotionBackground = () => (
+  <>
+    <img src={`/images/promotion/udemy/promotionLogo.svg`} />
+    <s.AnimatedPromotionBackground>
+      <img src={`/images/promotion/udemy/promotionLogoWithShadow.svg`} />
+    </s.AnimatedPromotionBackground>
+  </>
+);
+
+export const UdemyCoursePromotionCard = ({
+  onAccept,
+  onDiscard
+}: UdemyCoursePromotionCardProps) => {
+  return (
+    <PromotionCard
+      onAccept={onAccept}
+      onDiscard={onDiscard}
+      scope="early-access"
+      acceptBtnText="Access course"
+      title={
+        <PromoText>
+          Get our <PromoTextBold>Udemy course FREE</PromoTextBold>
+        </PromoText>
+      }
+      collapsedBackground={<UdemyPromotionCollapsedBackground />}
+      background={<UdemyPromotionBackground />}
+    >
+      <PromotionTag />
+      <Description>
+        <span>Learn how to get more out of Digma</span>
+        <span>issues</span>
+      </Description>
+    </PromotionCard>
+  );
+};

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/UdemyCoursePromotionCard/styles.ts

@@ -0,0 +1,12 @@
+import styled, { keyframes } from "styled-components";
+
+const blurAnimation = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`;
+
+export const AnimatedPromotionBackground = styled.div`
+  position: absolute;
+  top: 0;
+  animation: 1s ${blurAnimation} linear infinite alternate;
+`;

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/UdemyCoursePromotionCard/types.ts

@@ -0,0 +1,4 @@
+export interface UdemyCoursePromotionCardProps {
+  onDiscard: () => void;
+  onAccept: () => void;
+}