Create newsletter section for article

system/libs/figa-ui/src/index.ts

@@ -38,3 +38,4 @@ export * from './lib/loader';
 export * from './lib/switch';
 export * from './lib/checkbox';
 export * from './lib/shared';
+export * from './lib/newsletter';

system/libs/figa-ui/src/lib/button/button.stories.tsx

@@ -174,3 +174,13 @@ SecondaryOutlined.args = {
   variant: 'outlined',
   motive: 'secondary',
 };
+export const TertiaryFilled = Template.bind({});
+TertiaryFilled.args = {
+  variant: 'filled',
+  motive: 'tertiary',
+};
+export const TertiaryOutlined = Template.bind({});
+TertiaryOutlined.args = {
+  variant: 'outlined',
+  motive: 'tertiary',
+};

system/libs/figa-ui/src/lib/button/consts.ts

@@ -1,6 +1,6 @@
 const BUTTON_SIZES = [1, 2, 3, 4, 5] as const;
 const BUTTON_SHAPES = ['rounded', 'rectangle'] as const;
 const BUTTON_VARIANTS = ['outlined', 'filled'] as const;
-const BUTTON_MOTIVES = ['primary', 'secondary'] as const;
+const BUTTON_MOTIVES = ['primary', 'secondary', 'tertiary'] as const;
 
 export { BUTTON_SIZES, BUTTON_SHAPES, BUTTON_VARIANTS, BUTTON_MOTIVES };

system/libs/figa-ui/src/lib/newsletter/defs.ts

@@ -0,0 +1,10 @@
+import type {ModalProps } from '../modal';
+
+interface NewsletterProps extends ModalProps {
+  title: string,
+  src: string,
+  description: string,
+
+}
+
+export type {NewsletterProps}

system/libs/figa-ui/src/lib/newsletter/index.ts

@@ -0,0 +1,2 @@
+export * from './defs';
+export * from './newsletter';

system/libs/figa-ui/src/lib/newsletter/newsletter.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, Story } from '@storybook/react';
+
+import Newsletter from './newsletter';
+
+export default {
+  component: Newsletter,
+  title: 'Newsletter',
+} as Meta;
+
+const Template: Story = () => {
+  return (
+    <Newsletter
+      title={'GET 10% OFF'}
+      src={
+        'https://plus.unsplash.com/premium_photo-1694383414357-6e5cb02b873a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1288&q=80'
+      }
+      description={'Subscribe now and get a promotion for your first order.'}
+      maxWidth="750px"
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

system/libs/figa-ui/src/lib/newsletter/newsletter.tsx

@@ -0,0 +1,64 @@
+import { Modal } from '../modal';
+import { Image } from '../image';
+import { Box } from '../box';
+import { Font } from '../font';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Link } from '../link';
+
+import { NewsletterProps } from './defs';
+import { useState } from 'react';
+import { doc } from 'prettier';
+import cursor = doc.builders.cursor;
+
+const Newsletter = ({
+  title,
+  src,
+  description,
+  onClose,
+
+  ...props
+}: NewsletterProps) => {
+  const [open, setOpen] = useState(true);
+  return (
+    <div>
+      {open && (
+        <Modal {...props} padding={[0, 0, 0, 0]} onClose={() => setOpen(false)}>
+          <Box orientation="row" spacing={[200]}>
+            <Image
+              maxWidth="300px"
+              maxHeight="400px"
+              alt="My image"
+              src={src}
+            />
+
+            <Box
+              center={true}
+              padding={[0, 0, 0, 0]}
+              spacing={[200, 500, 200, 600]}
+              minWidth="450px"
+            >
+              <Font variant="h3">{title}</Font>
+              <Font variant="b2">{description}</Font>
+              <Input
+                placeholder="Your email"
+                minWidth="350px"
+                type={'email'}
+              ></Input>
+              <Button>Subscribe</Button>
+              <Link
+                variant="b3"
+                motive="default"
+                onClick={() => setOpen(false)}
+                style={{ cursor: 'pointer' }}
+              >
+                No thanks, I don`t like gifts
+              </Link>
+            </Box>
+          </Box>
+        </Modal>
+      )}
+    </div>
+  );
+};
+export default Newsletter;

system/libs/figa-ui/src/lib/theme-provider/defs.ts

@@ -283,10 +283,12 @@ interface Theme {
     outlined: {
       primary: ButtonSetup;
       secondary: ButtonSetup;
+      tertiary: ButtonSetup;
     };
     filled: {
       primary: ButtonSetup;
       secondary: ButtonSetup;
+      tertiary: ButtonSetup;
     };
   };
   select: {