From bfb114acdfc165a8d71b0940f3d7cb890ff5d957 Mon Sep 17 00:00:00 2001 From: Eddie Arevalo Date: Wed, 7 Aug 2024 16:13:18 -0700 Subject: [PATCH 1/4] Add Button CTA Component -Added a button with only CTA styles. --- src/components/Button/Button.scss | 6 +++++ src/components/Button/Button.stories.tsx | 17 ++++++++++++ src/components/Button/Button.test.tsx | 21 +++++++++++++++ src/components/Button/Button.tsx | 34 ++++++++++++++++++++++++ src/components/Button/index.tsx | 1 + src/index.ts | 1 + src/styles/styles.scss | 1 + 7 files changed, 81 insertions(+) create mode 100644 src/components/Button/Button.scss create mode 100644 src/components/Button/Button.stories.tsx create mode 100644 src/components/Button/Button.test.tsx create mode 100644 src/components/Button/Button.tsx create mode 100644 src/components/Button/index.tsx diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss new file mode 100644 index 0000000..91a2f42 --- /dev/null +++ b/src/components/Button/Button.scss @@ -0,0 +1,6 @@ +.MuiButtonBase-root.MuiButton-root{ + &.wds-button-cta { + box-shadow: none; + @extend .wds-button-cta; + } +} \ No newline at end of file diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx new file mode 100644 index 0000000..fd14ba8 --- /dev/null +++ b/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; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; + +export const Placeholder: Story = { + args: { + placeholder: "placeholder", + }, +}; diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx new file mode 100644 index 0000000..8feca6b --- /dev/null +++ b/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(); + + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + test("The label prop works", () => { + const component = renderer.create(); + + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx new file mode 100644 index 0000000..2ed05d9 --- /dev/null +++ b/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; + +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 ( + + ); +}; diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx new file mode 100644 index 0000000..e22c29a --- /dev/null +++ b/src/components/Button/index.tsx @@ -0,0 +1 @@ +export * from "./Button"; diff --git a/src/index.ts b/src/index.ts index 559f3c3..9a34f27 100644 --- a/src/index.ts +++ b/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/FeaturedLinkListItem"; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 12f8567..75022ae 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -8,6 +8,7 @@ @import "_animations"; // Components +@import "../components/Button/Button.scss"; @import "../components/Chip/Chip.scss"; @import "../components/HelloWorld/HelloWorld.scss"; @import "../components/Navbar/Navbar.scss"; From 9c78bfe6152930c5c28b068ede2ea5fc8f6b6dc9 Mon Sep 17 00:00:00 2001 From: Eddie Arevalo Date: Wed, 7 Aug 2024 16:15:25 -0700 Subject: [PATCH 2/4] Update TextField Styles -Updated textfield styles to use css. -Added variant for search bar. -Fixed conflict with button props also being called just "props" --- src/components/TextField/TextField.scss | 27 +++++++++ src/components/TextField/TextField.tsx | 70 ++++++++++++------------ src/components/Typography/Typography.tsx | 18 +++--- src/styles/styles.scss | 4 +- 4 files changed, 74 insertions(+), 45 deletions(-) create mode 100644 src/components/TextField/TextField.scss diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss new file mode 100644 index 0000000..8e9cd0f --- /dev/null +++ b/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); +} + + diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index fbb4875..e959b56 100644 --- a/src/components/TextField/TextField.tsx +++ b/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; + 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" ? ( + + ) : ( ); -} \ No newline at end of file +}; diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx index 57246e0..8e8aaa2 100644 --- a/src/components/Typography/Typography.tsx +++ b/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"; type BodyProps = { variant: "body1" | "body2" | "body3" | "body4" | "body5"; @@ -56,14 +56,14 @@ type NumberProps = { }; export type Props = - | (BodyProps & Omit) - | (DisplayProps & Omit) - | (HeaderBLProps & Omit) - | (HeaderBRProps & Omit) - | (HeaderSRProps & Omit) - | (HeaderSProps & Omit) - | (LabelProps & Omit) - | (NumberProps & Omit); + | (BodyProps & Omit) + | (DisplayProps & Omit) + | (HeaderBLProps & Omit) + | (HeaderBRProps & Omit) + | (HeaderSRProps & Omit) + | (HeaderSProps & Omit) + | (LabelProps & Omit) + | (NumberProps & Omit); export const Typography = (props: Props) => { const { variant, weight, className, ...other } = props; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 75022ae..a58a9bc 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -14,5 +14,7 @@ @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"; \ No newline at end of file +@import "../components/Typography/Typography.scss"; + From 632d09aac2d080c93ccdb460d7546aefe65a7e80 Mon Sep 17 00:00:00 2001 From: Eddie Arevalo Date: Mon, 26 Aug 2024 12:46:13 -0700 Subject: [PATCH 3/4] Update Chip Styles -Updated chip font and icon size. -Replaced star icon with close. --- src/components/Chip/Chip.scss | 13 +++++++++++++ src/components/Chip/Chip.tsx | 4 ++-- src/components/Typography/Typography.scss | 2 ++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Chip/Chip.scss b/src/components/Chip/Chip.scss index f342923..bd664b0 100644 --- a/src/components/Chip/Chip.scss +++ b/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; } \ No newline at end of file diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 5901823..e263c43 100644 --- a/src/components/Chip/Chip.tsx +++ b/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) => { } + deleteIcon={} {...otherProps} /> ); diff --git a/src/components/Typography/Typography.scss b/src/components/Typography/Typography.scss index 4358cd0..df01fb0 100644 --- a/src/components/Typography/Typography.scss +++ b/src/components/Typography/Typography.scss @@ -1,3 +1,5 @@ +@use "@nasapds/wds/css/typography.css"; + .MuiTypography-root.MuiTypography-body1{ &.wds-typography-display-bold-120{ @extend .wds-typography-display-bold-120; From 7324f6dc07ac309599963ce0b76ffc52194c9cb4 Mon Sep 17 00:00:00 2001 From: Eddie Arevalo Date: Wed, 4 Sep 2024 15:38:56 -0700 Subject: [PATCH 4/4] Add Button Use Statement -Added button use statement to export css. --- src/components/Button/Button.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 91a2f42..84b905b 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,3 +1,5 @@ +@use "@nasapds/wds/css/button.css"; + .MuiButtonBase-root.MuiButton-root{ &.wds-button-cta { box-shadow: none;