Link component, Card component, Course Popup component styling, and wrangling with the serialization type"

src/views/components/common/Card/Card.module.scss

@@ -0,0 +1,8 @@
+@import 'src/views/styles/base.module.scss';
+
+.card {
+    background: $white;
+    border: 1px solid #c3cee0;
+    box-sizing: border-box;
+    border-radius: 8px;
+}

src/views/components/common/Card/Card.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import React, { Component } from 'react';
+import styles from './Card.module.scss';
+
+export type Props = {
+    style?: React.CSSProperties;
+    className?: string;
+    onClick?: (...args) => void;
+    children?: React.ReactNode;
+    testId?: string;
+};
+
+/**
+ * A reusable Card component that can be used to wrap other components
+ */
+export default function Card(props: Props) {
+    return (
+        <div
+            style={props.style}
+            className={classNames(styles.card, props.className)}
+            onClick={props.onClick}
+            data-testid={props.testId}
+        >
+            {props.children}
+        </div>
+    );
+}

src/views/components/common/Link/Link.module.scss

@@ -0,0 +1,5 @@
+.link {
+    font-family: 'Inter', sans-serif;
+    text-decoration: underline;
+    cursor: pointer;
+}

src/views/components/common/Link/Link.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import { bMessenger } from 'src/shared/messages';
+import Text, { TextProps } from '../Text/Text';
+import styles from './Link.module.scss';
+
+type Props = TextProps & {
+    url?: string;
+};
+
+/**
+ * A reusable Text component with props that build on top of the design system for the extension
+ */
+export default function Link(props: PropsWithChildren<Props>) {
+    let passedProps = {
+        ...props,
+    };
+    const { url } = props;
+
+    if (url && !props.onClick) {
+        passedProps.onClick = () => bMessenger.openNewTab({ url });
+    }
+
+    return <Text {...passedProps} className={classNames(styles.link, props.className)} />;
+}

src/views/components/common/Popup/Popup.tsx

@@ -17,16 +17,12 @@ export default function Popup(props: PropsWithChildren<Props>) {
     return (
         <div
             style={props.style}
-            className={classNames(
-                styles.container,
-                {
-                    [styles.overlay]: props.overlay,
-                },
-                props.className
-            )}
+            className={classNames(styles.container, {
+                [styles.overlay]: props.overlay,
+            })}
             data-testid={props.testId}
         >
-            <div className={styles.body}>{props.children}</div>
+            <div className={classNames(styles.body, props.className)}>{props.children}</div>
         </div>
     );
 }

src/views/components/common/Text/Text.tsx

@@ -4,9 +4,9 @@ import colors, { ISassColors } from 'src/views/styles/colors.module.scss';
 import fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
-type Props = {
+export type TextProps = {
     color?: keyof ISassColors;
-    weight: Weight;
+    weight?: Weight;
     size: Size;
     span?: boolean;
     className?: string;
@@ -18,7 +18,7 @@ type Props = {
 /**
  * A reusable Text component with props that build on top of the design system for the extension
  */
-export default function Text(props: PropsWithChildren<Props>) {
+export default function Text(props: PropsWithChildren<TextProps>) {
     const style = props.style || {};
 
     style.textAlign ??= props.align;