Merge pull request #60 from NASA-PDS/search-page-components

Add search page components

src/components/Button/Button.scss

@@ -0,0 +1,8 @@
+@use "@nasapds/wds/css/button.css";
+
+.MuiButtonBase-root.MuiButton-root{
+   &.wds-button-cta {
+      box-shadow: none;
+      @extend .wds-button-cta;
+   }
+}

src/components/Button/Button.stories.tsx

@@ -0,0 +1,17 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { TextField } from "./Button";
+
+export default {
+  component: TextField,
+} as Meta<typeof TextField>;
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "placeholder",
+  },
+};

src/components/Button/Button.test.tsx

@@ -0,0 +1,21 @@
+import renderer from "react-test-renderer";
+import { describe, expect, test } from "vitest";
+import { TextField } from "./Button";
+
+describe("TextField", () => {
+  test("TextField component renders correctly", () => {
+    const component = renderer.create(<TextField />);
+
+    const tree = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test("The label prop works", () => {
+    const component = renderer.create(<TextField />);
+
+    const tree = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Button/Button.tsx

@@ -0,0 +1,34 @@
+import MaterialButton from "@mui/material/Button";
+import { ButtonProps as MuiBottonProps } from "@mui/material/Button";
+
+type PdsButtonProps = {
+  variant: "cta";
+};
+
+export type ButtonProps = PdsButtonProps & Omit<MuiBottonProps, "variant">;
+
+export const Button = (props: ButtonProps) => {
+  const { variant, className, ...other } = props;
+
+  let buttonClass = "";
+  let muiVariant;
+
+  if (className) {
+    buttonClass = className + " wds-button";
+  } else {
+    buttonClass = "wds-button";
+  }
+
+  switch (variant) {
+    case "cta":
+      buttonClass += "-cta";
+      muiVariant = "contained" as const;
+      break;
+    default:
+      muiVariant = "text" as const;
+  }
+
+  return (
+    <MaterialButton className={buttonClass} variant={muiVariant} {...other} />
+  );
+};

src/components/Button/index.tsx

@@ -0,0 +1 @@
+export * from "./Button";

src/components/Chip/Chip.scss

@@ -2,9 +2,22 @@
    border-radius: 4px;
    color: var(--pds-secondary-black-t3);
    border: 1px solid var(--pds-secondary-blue-t1);
+   font-size: var(--pds-typography-header-12-semibold-font-size);
+   line-height: var(--pds-typography-header-12-semibold-line-height);
+   letter-spacing: var(--pds-typography-header-12-semibold-letter-spacing);
+   font-weight: var(--pds-typography-header-12-semibold-font-weight);
 }
 
 .pds-wds-chip.MuiChip-root:hover{
    border: 1px solid var(--pds-secondary-blue-t1);
    color: var(--pds-primary-black);
+}
+
+.pds-wds-chip .MuiChip-deleteIcon{
+   height: 10px;
+}
+
+.pds-wds-chip .MuiChip-label{
+   padding-left: 8px;
+   padding-right: 8px;
 }

src/components/Chip/Chip.tsx

@@ -1,5 +1,5 @@
 import MuiChip from "@mui/material/Chip";
-import StarsIcon from "@mui/icons-material/Stars";
+import CloseIcon from "../Icons/Close";
 import { ChipProps } from "@mui/material";
 
 /**
@@ -14,7 +14,7 @@ export const Chip = ({ ...otherProps }: ChipProps) => {
     <MuiChip
       className="pds-wds-chip"
       variant="outlined"
-      deleteIcon={<StarsIcon />}
+      deleteIcon={<CloseIcon />}
       {...otherProps}
     />
   );

src/components/TextField/TextField.scss

@@ -0,0 +1,27 @@
+.pds-wds-react-textfield .MuiInputBase-root{
+    padding: 0 16px 0 16px;
+}
+
+.pds-wds-react-textfield .MuiOutlinedInput-notchedOutline {
+    border-color: var(--pds-secondary-white-s2);
+    border-radius: 2px;
+}
+
+.pds-wds-react-textfield .MuiInputBase-input.MuiOutlinedInput-input{
+    color: var(--pds-secondary-black-t2);
+    padding: 16px 0 16px 10px;
+}
+
+.pds-wds-react-textfield .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline{
+    border-color: var(--pds-secondary-white-s4);
+}
+
+.pds-wds-react-textfield .MuiInputBase-root.Mui-focused{
+    border-color: var(--pds-primary-blue);
+}
+
+.pds-wds-react-textfield .MuiInputBase-root.Mui-focused:hover .MuiOutlinedInput-notchedOutline{
+    border-color: var(--pds-primary-blue);
+}
+
+

src/components/TextField/TextField.tsx

@@ -1,35 +1,5 @@
-import MaterialTextField from '@mui/material/TextField';
-import { TextFieldProps } from '@mui/material/TextField';
-
-const styles = {
-  textField: {
-    '& label.Mui-focused': {
-    },
-    '& .MuiInput-underline:after': {
-      borderBottomColor: '#D1D1D1'
-    },
-    '& .MuiOutlinedInput-root': {
-      '& fieldset': {
-        borderColor:'#D1D1D1',
-        borderRadius: '2px'
-      },
-      '&:hover fieldset': {
-        borderColor:'#959599'
-      },
-      '&.Mui-focused fieldset': {
-        borderColor:'#1C67E3'
-      },
-      input: {
-        padding: '14px 16px'
-      },
-      label: {
-      },
-      '& .MuiInputAdornment-root': {
-        color: '#959599'
-      }
-    }
-  }
-}
+import MaterialTextField from "@mui/material/TextField";
+import { TextFieldProps as MuiTextFieldProps } from "@mui/material/TextField";
 
 /**
  * A simple text field.
@@ -38,13 +8,43 @@ const styles = {
  * Default prop values should be specified in the deconstructed parameter object.
  *
  */
+
+type PdsTextFieldProps = {
+  variant?: "standard" | "search";
+};
+
+export type TextFieldProps = PdsTextFieldProps &
+  Omit<MuiTextFieldProps, "variant">;
+
 export const TextField = ({
+  className,
+  variant,
   ...otherProps
 }: TextFieldProps) => {
-  return (
+  let textFieldClass = "";
+  let pdsVariant = variant;
+
+  if (className) {
+    textFieldClass = className + " pds-wds-react-textfield";
+  } else {
+    textFieldClass = "pds-wds-react-textfield";
+  }
+
+  if (!pdsVariant) {
+    pdsVariant = "standard";
+  }
+
+  return pdsVariant === "search" ? (
+    <MaterialTextField
+      className={textFieldClass}
+      variant="outlined"
+      {...otherProps}
+    />
+  ) : (
     <MaterialTextField
-      sx={styles.textField}
+      className={textFieldClass}
+      variant="outlined"
       {...otherProps}
     />
   );
-}
+};

src/components/Typography/Typography.tsx

@@ -1,5 +1,5 @@
 import MuiTypography from "@mui/material/Typography";
-import { TypographyProps } from "@mui/material";
+import { TypographyProps as MuiTypographyProps } from "@mui/material";
 import { StyledEngineProvider } from "@mui/material";
 
 type BodyProps = {
@@ -57,14 +57,14 @@ type NumberProps = {
 };
 
 export type Props =
-  | (BodyProps & Omit<TypographyProps, "variant">)
-  | (DisplayProps & Omit<TypographyProps, "variant">)
-  | (HeaderBLProps & Omit<TypographyProps, "variant">)
-  | (HeaderBRProps & Omit<TypographyProps, "variant">)
-  | (HeaderSRProps & Omit<TypographyProps, "variant">)
-  | (HeaderSProps & Omit<TypographyProps, "variant">)
-  | (LabelProps & Omit<TypographyProps, "variant">)
-  | (NumberProps & Omit<TypographyProps, "variant">);
+  | (BodyProps & Omit<MuiTypographyProps, "variant">)
+  | (DisplayProps & Omit<MuiTypographyProps, "variant">)
+  | (HeaderBLProps & Omit<MuiTypographyProps, "variant">)
+  | (HeaderBRProps & Omit<MuiTypographyProps, "variant">)
+  | (HeaderSRProps & Omit<MuiTypographyProps, "variant">)
+  | (HeaderSProps & Omit<MuiTypographyProps, "variant">)
+  | (LabelProps & Omit<MuiTypographyProps, "variant">)
+  | (NumberProps & Omit<MuiTypographyProps, "variant">);
 
 export const Typography = (props: Props) => {
   const { variant, weight, className, ...other } = props;

src/index.ts

@@ -1,5 +1,6 @@
 import "./styles/styles.scss";
 export * from "./components/Breadcrumbs";
+export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Chip";
 export * from "./components/FeaturedLink";

src/styles/styles.scss

@@ -8,10 +8,13 @@
 @import "_animations";
 
 // Components
+@import "../components/Button/Button.scss";
 @import "../components/Chip/Chip.scss";
 @import "../components/HelloWorld/HelloWorld.scss";
 @import "../components/Navbar/Navbar.scss";
 @import "../components/Pagination/Pagination.scss";
 @import "../components/Tag/Tag.scss";
+@import "../components/TextField/TextField.scss";
 @import "../components/TitleBar/TitleBar.scss";
-@import "../components/Typography/Typography.scss";
+@import "../components/Typography/Typography.scss";
+