a0292d432a
* Remove treedropdown from ads * Change Treedropdown imports * Remove Notification Banner, change imports * Remove Toggle from ads * Change toggle imports * explicitly declare function argument types * Remove Menu from ads * Change menu imports * Remove Spinner from ads * Change spinner imports * Remove Radio, import changes * test: updated flaky test under default meta (#15707) * updated flaky test * Updated tests * updated tests * updated the tests * updated tests * Update constants.ts * add more typecasting * Remove ListSegmentHeader, import changes * Remove TagInputComponent, import changes * Remove Switch, import changes * Remove SearchInput, change imports * Rename TagInputComponent to TagInput * Remove ProgressiveImage, import changes * import changes for SearchVariant * Remove menu divider, import changes * Remove TableDropdown, import changes * Remove Switcher * Remove StatusBar, import changes * Remove showcase carousel * Remove RectangularSwitcher, import change * Add types to TableDropdown's args * Remove MultiSwitch, import change * Remove GifPlayerComponent, import change * Remove DraggableList, import change * Remove DisplayImageUpload, import change * Remove DatePickerComponent, import change * Remove CopyToClipBoard, import change * Remove ColorSelector, import change * Remove TabItemBackgroundFill, NumberedStep, ColorPickerComponent * GifPlayerComponent -> GifPlayer * change named import * Remove FormFieldError, change imports * Update to new version of Tree Dropdown * Fix issue with ads/index.ts * Test file fix * Fix issue with merge?!?!?? * update design system to 1.0.18 * Bump ds version * bump ds version * bump ds version Co-authored-by: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com> Co-authored-by: Albin <albin@appsmith.com>
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { noop } from "lodash";
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
import { Button, Category, Toggle, Size } from "design-system";
|
|
import {
|
|
AllowToggle,
|
|
AllowToggleLabel,
|
|
AllowToggleWrapper,
|
|
ButtonWrapper,
|
|
FormBodyWrapper,
|
|
FormHeaderIndex,
|
|
FormHeaderLabel,
|
|
FormHeaderWrapper,
|
|
} from "./common";
|
|
import { memo } from "react";
|
|
import {
|
|
createMessage,
|
|
WELCOME_FORM_NEWLETTER_HEADER,
|
|
WELCOME_FORM_NEWLETTER_LABEL,
|
|
WELCOME_FORM_SUBMIT_LABEL,
|
|
} from "@appsmith/constants/messages";
|
|
|
|
export const StyledButton = styled(Button)`
|
|
width: 201px;
|
|
height: 38px;
|
|
`;
|
|
|
|
const NewsletterContainer = styled.div`
|
|
widht: 100%;
|
|
position: relative;
|
|
padding-left: ${(props) => props.theme.spaces[17] * 2}px;
|
|
margin-top: ${(props) => props.theme.spaces[12] * 2}px;
|
|
`;
|
|
|
|
export default memo(function NewsletterForm() {
|
|
return (
|
|
<NewsletterContainer>
|
|
<FormHeaderWrapper className="relative flex-col items-start">
|
|
<FormHeaderIndex className="absolute -left-6">3.</FormHeaderIndex>
|
|
<FormHeaderLabel>
|
|
{createMessage(WELCOME_FORM_NEWLETTER_HEADER)}
|
|
</FormHeaderLabel>
|
|
</FormHeaderWrapper>
|
|
<FormBodyWrapper>
|
|
<AllowToggleWrapper>
|
|
<AllowToggle>
|
|
<Toggle
|
|
className="t--welcome-form-newsletter"
|
|
name="signupForNewsletter"
|
|
onToggle={() => noop}
|
|
value
|
|
/>
|
|
</AllowToggle>
|
|
<AllowToggleLabel>
|
|
{createMessage(WELCOME_FORM_NEWLETTER_LABEL)}
|
|
</AllowToggleLabel>
|
|
</AllowToggleWrapper>
|
|
<ButtonWrapper>
|
|
<StyledButton
|
|
category={Category.primary}
|
|
className="t--welcome-form-create-button"
|
|
size={Size.medium}
|
|
tag="button"
|
|
text={createMessage(WELCOME_FORM_SUBMIT_LABEL)}
|
|
type="submit"
|
|
/>
|
|
</ButtonWrapper>
|
|
</FormBodyWrapper>
|
|
</NewsletterContainer>
|
|
);
|
|
});
|