🪟 🎨 Add Text component (#15570)

* Add Text component

* Fix regexp for heading matching in Text component

Co-authored-by: Krishna Glick <[email protected]>

* Reset margin and padding on text elements

* Update default text element to p

* Split scss for heading and text

* Split types between Text and Heading

* Rename text scss

* Rename text scsss module

* Remove font-weight from FormTitle

* Split Text md size out of default style, fix typing issues

* Update line heights on headings and remove override from SignupPage

* Remove default heading type assignment when destructuring props since `as` is required to infer heading

Co-authored-by: Krishna Glick <[email protected]>

Author: edmundito

airbyte-webapp/src/components/base/Text/Text.tsx

@@ -0,0 +1,68 @@
+import classNames from "classnames";
+import React from "react";
+
+import headingStyles from "./heading.module.scss";
+import textStyles from "./text.module.scss";
+
+type TextSize = "sm" | "md" | "lg";
+type HeadingSize = TextSize | "xl";
+type TextElementType = "p" | "span" | "div";
+type HeadingElementType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+interface BaseProps {
+  className?: string;
+  centered?: boolean;
+}
+
+interface TextProps extends BaseProps {
+  as?: TextElementType;
+  size?: TextSize;
+  bold?: boolean;
+}
+
+interface HeadingProps extends BaseProps {
+  as: HeadingElementType;
+  size?: HeadingSize;
+}
+
+const getTextClassNames = ({ size, centered, bold }: Required<Pick<TextProps, "size" | "centered" | "bold">>) => {
+  const sizes: Record<TextSize, string> = {
+    sm: textStyles.sm,
+    md: textStyles.md,
+    lg: textStyles.lg,
+  };
+
+  return classNames(textStyles.text, sizes[size], centered && textStyles.centered, bold && textStyles.bold);
+};
+
+const getHeadingClassNames = ({ size, centered }: Required<Pick<HeadingProps, "size" | "centered">>) => {
+  const sizes: Record<HeadingSize, string> = {
+    sm: headingStyles.sm,
+    md: headingStyles.md,
+    lg: headingStyles.lg,
+    xl: headingStyles.xl,
+  };
+
+  return classNames(headingStyles.heading, sizes[size], centered && headingStyles.centered);
+};
+
+const isHeadingType = (props: TextProps | HeadingProps): props is HeadingProps => {
+  return props.as ? /^h[0-6]$/.test(props.as) : false;
+};
+
+export const Text: React.FC<TextProps | HeadingProps> = React.memo((props) => {
+  const isHeading = isHeadingType(props);
+  const { as = "p", centered = false, children } = props;
+
+  const className = classNames(
+    isHeading
+      ? getHeadingClassNames({ centered, size: props.size ?? "md" })
+      : getTextClassNames({ centered, size: props.size ?? "md", bold: props.bold ?? false }),
+    props.className
+  );
+
+  return React.createElement(as, {
+    className,
+    children,
+  });
+});

airbyte-webapp/src/components/base/Text/heading.module.scss

@@ -0,0 +1,36 @@
+@use "../../../scss/colors";
+
+.heading {
+  font-weight: 700;
+
+  color: colors.$dark-blue;
+  margin: 0;
+  padding: 0;
+}
+
+.sm {
+  font-size: 16px;
+  line-height: 1.2em;
+}
+
+.md,
+.lg,
+.xl {
+  line-height: 1.3em;
+}
+
+.md {
+  font-size: 20px;
+}
+
+.lg {
+  font-size: 24px;
+}
+
+.xl {
+  font-size: 32px;
+}
+
+.centered {
+  text-align: center;
+}

airbyte-webapp/src/components/base/Text/index.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Text } from "./Text";
+
+export default {
+  title: "Ui/Text",
+  component: Text,
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  size: "md",
+  children:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+};

airbyte-webapp/src/components/base/Text/index.ts

@@ -0,0 +1 @@
+export { Text } from "./Text";

airbyte-webapp/src/components/base/Text/text.module.scss

@@ -0,0 +1,36 @@
+@use "../../../scss/colors";
+
+.text {
+  color: colors.$dark-blue;
+  margin: 0;
+  padding: 0;
+}
+
+.sm,
+.md {
+  font-weight: 400;
+  line-height: 1.2em;
+}
+
+.sm {
+  font-size: 12px;
+}
+
+.md {
+  font-size: 13px;
+}
+
+.lg {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3em;
+}
+
+.centered {
+  text-align: center;
+}
+
+.bold,
+.text > strong {
+  font-weight: 600;
+}

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss

@@ -1,13 +1,11 @@
 @use "../../../../../scss/colors";
+@use "../../../../../scss/variables";
 
 .title {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 39px;
   width: 250px;
-  color: colors.$dark-blue-900;
+  margin-bottom: variables.$spacing-md;
 }
 
 .highlight {
-  color: colors.$blue-400;
+  color: colors.$blue;
 }

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Text } from "components/base/Text";
 import HeadTitle from "components/HeadTitle";
 
 import { OAuthLogin } from "../OAuthLogin";
@@ -16,7 +17,7 @@ const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
   return (
     <div>
       <HeadTitle titles={[{ id: "login.signup" }]} />
-      <h1 className={styles.title}>
+      <Text as="h1" size="xl" className={styles.title}>
         <FormattedMessage
           id="login.activateAccess"
           values={{
@@ -27,7 +28,7 @@ const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
             ),
           }}
         />
-      </h1>
+      </Text>
       <SpecialBlock />
       <SignupForm />
       <OAuthLogin isSignUpPage />

airbyte-webapp/src/packages/cloud/views/auth/components/FormComponents.tsx

@@ -2,7 +2,7 @@ import { Form as FormikForm } from "formik";
 import styled from "styled-components";
 
 export const Form = styled(FormikForm)`
-  margin-top: 42px;
+  margin-top: 40px;
 `;
 
 export const FieldItem = styled.div`
@@ -28,7 +28,7 @@ export const BottomBlock = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-top: 38px;
+  margin-top: 40px;
   font-size: 11px;
 `;
 

airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.module.scss

@@ -1,8 +1,5 @@
 @use "../../../../../../scss/colors";
 
 .title {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 39px;
-  color: colors.$blue-400;
+  color: colors.$blue;
 }

airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx

@@ -1,5 +1,11 @@
 import React from "react";
 
+import { Text } from "components/base/Text";
+
 import styles from "./FormTitle.module.scss";
 
-export const FormTitle: React.FC = ({ children }) => <h1 className={styles.title}>{children}</h1>;
+export const FormTitle: React.FC = ({ children }) => (
+  <Text as="h1" size="xl" className={styles.title}>
+    {children}
+  </Text>
+);