diff --git a/doorway-ui-components/__tests__/blocks/InfoCard.test.tsx b/doorway-ui-components/__tests__/blocks/InfoCard.test.tsx deleted file mode 100644 index 1adca06f9e..0000000000 --- a/doorway-ui-components/__tests__/blocks/InfoCard.test.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react" -import { render, cleanup } from "@testing-library/react" -import { InfoCard } from "../../src/blocks/InfoCard" - -afterEach(cleanup) - -describe("", () => { - it("can apply a link", () => { - const { getByText } = render( - - Children go here - - ) - expect(getByText("Info Card Title").closest("a")?.getAttribute("href")).toBe( - "https://www.google.com" - ) - }) - - it("can apply a custom class", () => { - const { container } = render( - - Children go here - - ) - expect(container.getElementsByClassName("custom-class").length).toBe(1) - }) - - it("if children are JSX, render as inputted", () => { - const { container } = render( - -
Children go here
- - ) - expect(container.getElementsByClassName("markdown").length).toBe(0) - }) - - it("if children are a string, render as Markdown", () => { - const { container } = render( - - {"Children go here"} - - ) - expect(container.getElementsByClassName("markdown").length).toBe(1) - }) -}) diff --git a/doorway-ui-components/index.ts b/doorway-ui-components/index.ts index 77e32a5cba..51e5b008b8 100644 --- a/doorway-ui-components/index.ts +++ b/doorway-ui-components/index.ts @@ -18,7 +18,6 @@ export * from "./src/blocks/DashBlocks" export * from "./src/blocks/FormCard" export * from "./src/blocks/HousingCounselor" export * from "./src/blocks/ImageCard" -export * from "./src/blocks/InfoCard" export * from "./src/blocks/StatusBar" export * from "./src/blocks/ViewItem" export * from "./src/blocks/StandardCard" diff --git a/doorway-ui-components/src/blocks/InfoCard.docs.mdx b/doorway-ui-components/src/blocks/InfoCard.docs.mdx deleted file mode 100644 index 2895499c2c..0000000000 --- a/doorway-ui-components/src/blocks/InfoCard.docs.mdx +++ /dev/null @@ -1,34 +0,0 @@ -import { Canvas, Story, ArgsTable } from "@storybook/addon-docs" -import { Swatch } from "../prototypes/Swatch" -import { InfoCard } from "./InfoCard" - -# Info Card - -The Info Card component renders a box with a title, which can optionally be a hyperlink. Beneath the title is an optional subtitle. Beneath the subtitle can be a string, a component, or markdown. - - - - - -
-
- -## Component Properties - - - -## Theming Variables - -You can apply CSS variables to the `.info-card` selector to customize the appearance of the component. - -| Name | Type | Description | Default | -| --------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------- | -| `--padding` | Size | Padding around card | `--bloom-s6` | -| `--margin-bottom` | Size | Margin beneath card | `--bloom-s4` | -| `--border-color` | | Color of border around card | `--bloom-color-gray-450` | -| `--background-color` | | Background color of card | `--bloom-color-primary-lighter` | -| `--title-color` | | Color of title text | `--bloom-color-gray-800` | -| `--title-font-size` | Size | Size of title text | `--bloom-font-size-base` | -| `--title-font-family` | Font | Font family of title text | `--bloom-font-sans` | -| `--title-text-transform` | Font | Capitalization of title text | `none` | -| `--title-letter-spacing` | Size | Spacing of title text | `0` | diff --git a/doorway-ui-components/src/blocks/InfoCard.scss b/doorway-ui-components/src/blocks/InfoCard.scss deleted file mode 100644 index 3c453cf9d4..0000000000 --- a/doorway-ui-components/src/blocks/InfoCard.scss +++ /dev/null @@ -1,102 +0,0 @@ -.info-card { - --padding: var(--bloom-s6); - --margin-bottom: var(--bloom-s4); - --margin-sides: var(--bloom-s3); - --background-color: var(--bloom-color-blue-300); - --background-color-lighter: var(--bloom-color-gray-300); - --background-color-inline: inherit; - --title-color: var(--bloom-text-color-darker); - --title-secondary-color: var(--bloom-color-primary-dark); - --title-font-size: var(--bloom-font-size-xs); - --title-font-size-normal: var(--bloom-font-size-2xl); - --title-font-weight-normal: 100; - --title-font-family: var(--bloom-font-serif); - --title-text-transform: uppercase; - --title-text-transform-normal: none; - --title-letter-spacing: 0.025em; - --title-letter-spacing-normal: 0; - --content-font-size: inherit; - - padding: var(--padding); - margin-bottom: var(--margin-bottom); - margin-left: var(--margin-sides); - margin-right: var(--margin-sides); - border-radius: 0.5rem; - border-width: 0px; - background-color: var(--background-color); - - &.is-inline { - background-color: var(--background-color-inline); - } - - &.is-normal { - .info-card__title { - font-size: var(--title-font-size-normal); - text-transform: var(--title-text-transform-normal); - letter-spacing: var(--title-letter-spacing-normal); - font-weight: var(--title-font-weight-normal); - } - } -} - -.info-card.is-normal-primary-lighter, -.markdown .info-card { - background-color: var(--background-color); - - .info-card__title { - font-size: var(--title-font-size-normal); - text-transform: var(--title-text-transform-normal); - letter-spacing: var(--title-letter-spacing-normal); - font-weight: var(--title-font-weight-normal); - } -} - -.info-card.is-normal-secondary-lighter, -.markdown .info-card { - background-color: var(--background-color-lighter); - - .info-card__title { - font-size: var(--title-font-size-normal); - text-transform: var(--title-text-transform-normal); - letter-spacing: var(--title-letter-spacing-normal); - color: var(--title-secondary-color); - font-weight: var(--title-font-weight-normal); - } -} - -.info-card__title { - color: var(--title-color); - text-transform: var(--title-text-transform); - font-weight: bold; - font-size: var(--title-font-size); - font-family: var(--title-font-family); - letter-spacing: var(--title-letter-spacing); -} - -.info-card__header { - &:not([class*="mb-"]) { - margin-bottom: var(--bloom-s4); - } -} - -.info-card__columns { - display: flex; - flex-wrap: wrap; -} - -.info-card__column { - flex: 1 1 0%; -} - -.info-card__column-2 { - flex: 1 1 100%; - margin-top: var(--bloom-s4); - margin-right: var(--bloom-s4); - @media (min-width: 440px) { - flex: 1 1 45%; - } -} - -.info-card__content { - font-size: var(--content-font-size); -} diff --git a/doorway-ui-components/src/blocks/InfoCard.stories.tsx b/doorway-ui-components/src/blocks/InfoCard.stories.tsx deleted file mode 100644 index 2e418c51f2..0000000000 --- a/doorway-ui-components/src/blocks/InfoCard.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from "react" -import { BADGES } from "../../.storybook/constants" -import { InfoCard } from "./InfoCard" -import { ExpandableText } from "../actions/ExpandableText" -import InfoCardDocumentation from "./InfoCard.docs.mdx" - -export default { - title: "blocks/Info Card 🚩", - decorators: [(storyFn: any) =>
{storyFn()}
], - id: "blocks/info-card", - parameters: { - docs: { - page: InfoCardDocumentation, - }, - badges: [BADGES.GEN2], - }, -} - -export const Default = () => ( - <> - - {` -Paragraph content - ----- - -More content - `} - - -) - -export const NoChildren = () => ( - <> - - -) - -export const WithMarkdown = () => ( - - {` -#### Header 4 - -* A list -* of items - `} - -) - -export const WithChildComponent = () => ( - - - {` -Text within _another_ component… - `} - - -) diff --git a/doorway-ui-components/src/blocks/InfoCard.tsx b/doorway-ui-components/src/blocks/InfoCard.tsx deleted file mode 100644 index 28bfb1574f..0000000000 --- a/doorway-ui-components/src/blocks/InfoCard.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from "react" -import "./InfoCard.scss" -import Markdown from "markdown-to-jsx" - -export interface InfoCardProps { - title: string - subtitle?: string - externalHref?: string - className?: string - children?: React.ReactNode -} - -const InfoCard = (props: InfoCardProps) => { - const wrapperClasses = ["info-card"] - if (props.className) { - wrapperClasses.push(props.className) - } - - return ( -
-
- {props.externalHref ? ( -

- - {props.title} - -

- ) : ( -

{props.title}

- )} - {props.subtitle && {props.subtitle}} -
- {typeof props.children == "string" ? ( -
- -
- ) : ( - props.children - )} -
- ) -} - -export { InfoCard as default, InfoCard } diff --git a/doorway-ui-components/src/page_components/listing/AdditionalFees.tsx b/doorway-ui-components/src/page_components/listing/AdditionalFees.tsx index 0bcf841752..7b5648e2b9 100644 --- a/doorway-ui-components/src/page_components/listing/AdditionalFees.tsx +++ b/doorway-ui-components/src/page_components/listing/AdditionalFees.tsx @@ -1,6 +1,6 @@ import * as React from "react" import { GridSection, GridCell } from "../../sections/GridSection" -import { InfoCard } from "../../blocks/InfoCard" +import { InfoCard } from "@bloom-housing/ui-components" export interface AdditionalFeesProps { /** The application fee for the property, rendered in the first block */ diff --git a/doorway-ui-components/src/sections/InfoCardGrid.stories.tsx b/doorway-ui-components/src/sections/InfoCardGrid.stories.tsx index 8ba99e2e15..2b7ca672ba 100644 --- a/doorway-ui-components/src/sections/InfoCardGrid.stories.tsx +++ b/doorway-ui-components/src/sections/InfoCardGrid.stories.tsx @@ -1,6 +1,6 @@ import React from "react" -import { InfoCard } from "../blocks/InfoCard" +import { InfoCard } from "@bloom-housing/ui-components" import { InfoCardGrid } from "./InfoCardGrid" import { ExpandableText } from "../actions/ExpandableText" diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx index f23806e5f5..3c829bea08 100644 --- a/sites/public/src/components/listings/ListingsList.tsx +++ b/sites/public/src/components/listings/ListingsList.tsx @@ -1,9 +1,9 @@ import * as React from "react" import { getListings } from "../../lib/helpers" import { Listing, Jurisdiction } from "@bloom-housing/backend-core" -import { InfoCard, LinkButton, ZeroListingsItem } from "@bloom-housing/doorway-ui-components" +import { LinkButton, ZeroListingsItem } from "@bloom-housing/doorway-ui-components" import { Pagination } from "./Pagination" -import { LoadingOverlay, t } from "@bloom-housing/ui-components" +import { LoadingOverlay, t, InfoCard } from "@bloom-housing/ui-components" type ListingsListProps = { jurisdiction: Jurisdiction diff --git a/sites/public/src/pages/index.tsx b/sites/public/src/pages/index.tsx index 47e9c63470..2f9dec6d78 100644 --- a/sites/public/src/pages/index.tsx +++ b/sites/public/src/pages/index.tsx @@ -8,8 +8,9 @@ import { t, SiteAlert, AppearanceSizeType, + InfoCard, } from "@bloom-housing/ui-components" -import { ActionBlock, DoorwayHero, InfoCard } from "@bloom-housing/doorway-ui-components" +import { ActionBlock, DoorwayHero } from "@bloom-housing/doorway-ui-components" import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" import { UserStatus } from "../lib/constants" import Layout from "../layouts/application" diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss index b7f711b9be..f3729dcf96 100644 --- a/sites/public/styles/overrides.scss +++ b/sites/public/styles/overrides.scss @@ -35,4 +35,55 @@ .warning-message { --message-max-width: initial; } + + .info-card { + --margin-sides: var(--bloom-s3); + --background-color: var(--bloom-color-blue-300); + --background-color-lighter: var(--bloom-color-gray-300); + --background-color-inline: inherit; + --title-color: var(--bloom-text-color-darker); + --title-secondary-color: var(--bloom-color-primary-dark); + --title-font-size-normal: var(--bloom-font-size-2xl); + --title-font-weight-normal: 100; + --title-font-family: var(--bloom-font-serif); + --title-text-transform-normal: none; + + margin-left: var(--margin-sides); + margin-right: var(--margin-sides); + border-radius: 0.5rem; + border-width: 0px; + + &.is-inline { + --background-color: var(--background-color-inline); + } + + &.is-normal { + .info-card__title { + --title-font-size: var(--title-font-size-normal); + --title-text-transform: var(--title-text-transform-normal); + font-weight: var(--title-font-weight-normal); + } + } + + &.is-normal-primary-lighter { + --background-color-lighter: var(--background-color); + + .info-card__title { + --title-font-size-lighter: var(--title-font-size-normal); + font-weight: var(--title-font-weight-normal); + } + } + + &.is-normal-secondary-lighter { + --background-color: var(--background-color-lighter); + + .info-card__title { + --title-font-size: var(--title-font-size-normal); + --title-text-transform: var(--title-text-transform-normal); + --title-letter-spacing: var(--title-letter-spacing-normal); + --title-color: var(--title-secondary-color); + font-weight: var(--title-font-weight-normal); + } + } + } }