-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into snyk-upgrade-608a3880f9b96d2131b6286ffd83adf6
- Loading branch information
Showing
33 changed files
with
1,613 additions
and
1,566 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import PropTypes from "prop-types"; | ||
| import { Image } from "./Image"; | ||
|
|
||
| export function Button(props) { | ||
| const style = "btn-" + props.styling; | ||
| return props.href === "no ref" ? ( | ||
| <button | ||
| className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ${props.className} `} | ||
| onClick={props.onClick} | ||
| type={props.type} | ||
| id={props.id} | ||
| disabled={props.disabled} | ||
| {...props.attributes} | ||
| alt={props.iconAltText} | ||
| > | ||
| {props.icon && !props.iconEnd ? ( | ||
| <span className="grid place-items-center h-8 w-8"> | ||
| <Image className="pr-2" src={props.icon} alt={props.iconAltText} /> | ||
| </span> | ||
| ) : undefined} | ||
| {props.text} | ||
| {props.children} | ||
| {props.icon && props.iconEnd ? ( | ||
| <span className="grid place-items-center h-8 w-8"> | ||
| <Image className="pl-2" src={props.icon} alt={props.iconAltText} /> | ||
| </span> | ||
| ) : undefined} | ||
| </button> | ||
| ) : ( | ||
| <a | ||
| href={props.href} | ||
| className={`flex flex-row ${ | ||
| props.styling !== "none" ? "btn-link" : "" | ||
| } focus:ring focus:ring-offset-4 ${props.className}`} | ||
| onClick={props.onClick} | ||
| id={props.id} | ||
| disabled={props.disabled} | ||
| role="button" | ||
| > | ||
| {props.icon && !props.iconEnd ? ( | ||
| <Image | ||
| className="h-8 w-8 pr-2" | ||
| src={props.icon} | ||
| alt={props.iconAltText} | ||
| /> | ||
| ) : undefined} | ||
| {props.text} | ||
| {props.children} | ||
| {props.icon && props.iconEnd ? ( | ||
| <div className="grid place-items-center h-8 w-8"> | ||
| <Image | ||
| className="pl-5 pb-3" | ||
| src={props.icon} | ||
| alt={props.iconAltText} | ||
| /> | ||
| </div> | ||
| ) : undefined} | ||
| </a> | ||
| ); | ||
| } | ||
|
|
||
| Button.defaultProps = { | ||
| id: "btn1", | ||
| styling: "supertask", | ||
| text: "default", | ||
| href: "no ref", | ||
| }; | ||
|
|
||
| Button.propTypes = { | ||
| /** | ||
| * Identify which button being clicked | ||
| */ | ||
| id: PropTypes.string.isRequired, | ||
|
|
||
| /** | ||
| * User must input one of the follow button styles to apply | ||
| * to their button. To apply the link style, the user must | ||
| * also add a value to the href prop | ||
| */ | ||
| styling: PropTypes.oneOf([ | ||
| "supertask", | ||
| "primary", | ||
| "secondary", | ||
| "danger", | ||
| "link", | ||
| "none", | ||
| ]), | ||
|
|
||
| /** | ||
| * The text that the button will display | ||
| */ | ||
| text: PropTypes.string.isRequired, | ||
|
|
||
| /** | ||
| * This will add a img inside the button when needed | ||
| */ | ||
| icon: PropTypes.string, | ||
|
|
||
| /** | ||
| * Alt text for icon added to button | ||
| */ | ||
| iconAltText: PropTypes.string, | ||
|
|
||
| /** | ||
| * This is for placing an icon at the end of the component | ||
| */ | ||
| iconEnd: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Use when button redirects to a new page. | ||
| * Automatically applies the Link styling | ||
| */ | ||
| href: PropTypes.string, | ||
|
|
||
| /** | ||
| * the type of the button | ||
| */ | ||
| type: PropTypes.oneOf(["submit", "reset", "button"]), | ||
|
|
||
| /** | ||
| * Callback for a click event on the button | ||
| */ | ||
| onClick: PropTypes.func, | ||
|
|
||
| /** | ||
| * bool to disable a button | ||
| */ | ||
| disabled: PropTypes.bool, | ||
|
|
||
| /** | ||
| * css overrides for button | ||
| */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** | ||
| * additional attributes for button | ||
| */ | ||
| attributes: PropTypes.object, | ||
|
|
||
| /** | ||
| * any other elements you want to add to the button | ||
| */ | ||
| children: PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.element, | ||
| PropTypes.arrayOf(PropTypes.element), | ||
| ]), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { Button } from "./Button"; | ||
| import { Link } from "./Link"; | ||
| import { Image } from "./Image"; | ||
|
|
||
| export function CTA({ | ||
| heading, | ||
| body, | ||
| ButtonProps, | ||
| LinkProps, | ||
| containerClass = "", | ||
| }) { | ||
| return ( | ||
| <div className="bg-multi-blue-blue2 p-3"> | ||
| <div className={`flex flex-row ${containerClass}`}> | ||
| <div className="flex flex-col w-[60px] shrink-0"> | ||
| <Image alt="icon" src="/comment_bubble.svg" className="w-[60px]" /> | ||
| <div className="flex-grow divide-x-2 divide-multi-blue-blue60a flex flex-row justify-center mt-3"> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| <div className="pt-0 pl-5"> | ||
| <h3 className={`leading-[40px] text-multi-neutrals-grey100`}> | ||
| {heading} | ||
| </h3> | ||
| <p className="body">{body}</p> | ||
| <Button | ||
| styling="primary" | ||
| className="my-3" | ||
| type="button" | ||
| {...ButtonProps} | ||
| /> | ||
| {LinkProps && <Link {...LinkProps} />} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| export function Collapse(props) { | ||
| const { id, title, children } = props; | ||
| return ( | ||
| <details | ||
| key={id} | ||
| id={id} | ||
| className="mb-[5px] text-multi-neutrals-grey100 leading-[33px] text-mobileh5 font-body" | ||
| > | ||
| <summary | ||
| key={`summary-${id}`} | ||
| className="text-multi-blue-blue60d hover:hover:text-multi-blue-blue50b hover:underline border border-multi-neutrals-grey40 rounded px-[15px] py-[5px] cursor-pointer select-none outline-none" | ||
| > | ||
| {title} | ||
| </summary> | ||
| <div className="border border-multi-neutrals-grey40 rounded-b px-[18px] py-[5px] cursor-pointer select-none outline-none"> | ||
| {children} | ||
| </div> | ||
| </details> | ||
| ); | ||
| } | ||
|
|
||
| Collapse.defaultProps = { | ||
| id: "defaultAccordion", | ||
| }; | ||
|
|
||
| Collapse.propTypes = { | ||
| /** | ||
| * component id | ||
| */ | ||
| id: PropTypes.string, | ||
|
|
||
| /** | ||
| * Title of the collapsible header | ||
| */ | ||
| title: PropTypes.string, | ||
|
|
||
| /** | ||
| * code passed in to fill the expanded area. | ||
| */ | ||
| children: PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.element, | ||
| PropTypes.arrayOf(PropTypes.element), | ||
| ]), | ||
|
|
||
| /** | ||
| * Test id for unit test | ||
| */ | ||
| dataTestId: PropTypes.string, | ||
| }; |
Oops, something went wrong.