From fbea91463a4d178da96a34e8e935ec4324e8f8bb Mon Sep 17 00:00:00 2001 From: Maxwell Austensen Date: Mon, 16 Dec 2024 16:29:53 -0500 Subject: [PATCH] use accordions for all content box sections (#45) Adds a simple accordion component and uses that for all content box sections and the related-buildings. I moved around styles for better separation between pages and components. Moved all the know-your-rights content boxes to a separate file to simplify the results file and since we'll reuse in standalone page. Also changed them all to components to easily change the header text based on context. --- src/Components/Accordion/Accordion.scss | 4 +- src/Components/ContentBox/ContentBox.scss | 33 +- src/Components/ContentBox/ContentBox.tsx | 52 ++- src/Components/KYRContent/KYRContent.tsx | 232 ++++++++++ .../Pages/PortfolioSize/PortfolioSize.scss | 16 +- .../Pages/PortfolioSize/PortfolioSize.tsx | 8 +- .../RentStabilization/RentStabilization.tsx | 8 +- src/Components/Pages/Results/Results.scss | 28 ++ src/Components/Pages/Results/Results.tsx | 411 +++--------------- 9 files changed, 404 insertions(+), 388 deletions(-) create mode 100644 src/Components/KYRContent/KYRContent.tsx diff --git a/src/Components/Accordion/Accordion.scss b/src/Components/Accordion/Accordion.scss index dddae2a..1834e60 100644 --- a/src/Components/Accordion/Accordion.scss +++ b/src/Components/Accordion/Accordion.scss @@ -2,12 +2,11 @@ @import "../../mixins.scss"; .accordion { + padding: 0; summary { display: flex; align-items: center; list-style: none; - @include body_standard_desktop; - font-weight: 600; cursor: pointer; .accordion__chevron { @@ -16,7 +15,6 @@ } &[open] { - padding-bottom: 1.125rem; // 18px summary .accordion__chevron { transform: scale(-1, -1); } diff --git a/src/Components/ContentBox/ContentBox.scss b/src/Components/ContentBox/ContentBox.scss index a2e32a2..1697148 100644 --- a/src/Components/ContentBox/ContentBox.scss +++ b/src/Components/ContentBox/ContentBox.scss @@ -31,29 +31,30 @@ $videoEmbedW: 623px; .content-box__section, .content-box__footer { display: flex; - padding: $contentBoxPadding; + flex-direction: column; + padding: 1.5rem 2.25rem; // 24px 36px border-top: 1px solid $GREY_NEW; - .eligibility__icon { - font-size: 1.875rem; //30px - width: 1.875rem; //30px - margin-right: 36px; + .accordion__summary { + padding: 1.5rem 2.25rem; // 24px 36px + } - .eligible { - color: $GREEN; - } - .ineligible { - color: $RED; - } - .unknown { - color: $YELLOW; - } + &.accordion[open] .accordion__summary { + padding: 1.5rem 2.25rem 1.125rem 2.25rem; // 24px 36px 18px 36px } - .content-box__section__content { + .content-box__section__header { + @include body_large_desktop; + } + + .accordion__content { + padding: 0 2.25rem 2rem 2.25rem; // 0 36px 32px 36px + } + + .content-box__section__content, + .accordion__content { display: flex; flex-direction: column; - width: 100%; .content-box__section__step { @include eyebrow_small_desktop; diff --git a/src/Components/ContentBox/ContentBox.tsx b/src/Components/ContentBox/ContentBox.tsx index 8169ff5..f6b826d 100644 --- a/src/Components/ContentBox/ContentBox.tsx +++ b/src/Components/ContentBox/ContentBox.tsx @@ -1,29 +1,31 @@ import { ReactNode } from "react"; import "./ContentBox.scss"; +import { Accordion } from "../Accordion/Accordion"; +import classNames from "classnames"; export type ContentBoxProps = { - headerTitle?: ReactNode; - headerSubtitle?: ReactNode; + title?: ReactNode; + subtitle?: ReactNode; + className?: string; children: ReactNode; }; export const ContentBox: React.FC = ({ - headerTitle, - headerSubtitle, + title, + subtitle, + className, children, }) => { - // const arrayChildren = Children.toArray(children); return ( -
- {headerTitle && ( +
+ {title && (
-
{headerTitle}
- {headerSubtitle && ( -
{headerSubtitle}
+
{title}
+ {subtitle && ( +
{subtitle}
)}
)} - {/* {Children.map(arrayChildren, (child, index) => {})} */} {children}
); @@ -34,21 +36,35 @@ export type ContentBoxItemProps = { step?: number; icon?: ReactNode; children?: ReactNode; + accordion?: boolean; + open?: boolean; + className?: string; }; export const ContentBoxItem: React.FC = ({ title, - step, icon, + accordion = true, + open = false, + className, children, }) => { - return ( -
- {icon && {icon}} - {step && ( -
{`step ${step}`}
- )} + const headerSection = ( + <> + {icon} {title &&
{title}
} + + ); + + const containerClass = classNames("content-box__section", className); + + return accordion ? ( + + {children} + + ) : ( +
+ {headerSection} {children}
); diff --git a/src/Components/KYRContent/KYRContent.tsx b/src/Components/KYRContent/KYRContent.tsx new file mode 100644 index 0000000..006f29f --- /dev/null +++ b/src/Components/KYRContent/KYRContent.tsx @@ -0,0 +1,232 @@ +import React from "react"; +import { + ContentBox, + ContentBoxItem, + ContentBoxProps, +} from "../ContentBox/ContentBox"; +import JFCLLinkExternal from "../JFCLLinkExternal"; +import { Button } from "@justfixnyc/component-library"; + +type ContentBoxHeaderProps = Omit; + +export const UniversalProtections: React.FC = ({ + title = "UNIVERSAL TENANT RIGHTS", + subtitle: headerSubtitle = "Protections that all New Yorkers have", +}) => ( + + +

+ The only way your landlord can evict you is through housing court. + Lockouts (also known as unlawful evictions or self-help evictions) are + illegal. All tenants, including those in private residential programs, + have the right to stay in their home unless they choose to leave or are + evicted through a court process. +

+
+

Learn more about the eviction process

+ + NY Homes and Community Renewal + +
+
+

See if you are eligible for a free attorney

+ + Eviction Free NYC + + + + +

+ Tenants have the right to live in a safe, sanitary, and well-maintained + apartment, including public areas of the building. This right is implied + in every residential lease, and any lease provision that waives it is + void. If your landlord is not providing these conditions in your + apartment or building, there are actions you can take to exercise your + rights. +

+
+

Learn about warranty of habitability

+ + NY Courts + +
+
+

Learn how tenant associations can help

+ + Met Council on Housing + +
+
+

Notify your landlord of repair issues

+ + JustFix’s Letter of Complaint + + + +

+ Your landlord can’t evict you based on your race, religion, gender, + national origin, familial status, or disability. New York State law + promises protection from discrimination, banning bias based on age, + sexual orientation, and military status. +

+

+ Source of income discrimination the illegal practice by landlords, + owners, and real estate brokers of refusing to rent to current or + prospective tenants seeking to pay for housing with housing assistance + vouchers, subsidies, or other forms of public assistance. +

+
+

Learn more about fair housing

+ + Fair Housing NYC + +
+
+

+ Learn more about lawful source of income discrimination +

+ + Lawful source of income + +
+
+

Report source of income discrimination

+ + Unlock NYC + + + +); + +export const GoodCauseProtections: React.FC = ({ + title = "KNOW YOUR RIGHTS", + subtitle = "Protections you have under Good Cause Eviction law", +}) => ( + + +

+ Your landlord will need to provide a good cause reason for ending a + tenancy. This includes evicting tenants, not renewing a lease, or, if + the tenant does not have a lease, giving notice that the tenancy will + end. +

+ + + +

+ Your landlord is not allowed to increase your rent at a rate higher than + the local standard. The local rent standard is set every year at the + rate of inflation plus 5%, with a maximum of 10% total. +

+
+

+ As of May 1, 2024, the rate of inflation for the New York City area is + 3.82%, meaning that the current local rent standard is 8.82%. A rent + increase of more than 8.82% could be found unreasonable by the court if + the rent was increased after April 20, 2024. +

+ + + + + Housing Justice for All Good Cause Eviction fact sheet + + + Met Council on Housing Good Cause Eviction fact sheet + + + +); + +export const GoodCauseExercisingRights: React.FC = ({ + title = "EXERCISING YOUR RIGHTS", + subtitle: headerSubtitle = "Share your coverage with your landlord", +}) => ( + +
+
+

+ Assert your rights by printing your coverage results and sharing with + your landlord. You can use these results as an indicator that your + apartment is covered by Good Cause Eviction Law. +

+
+
+ +
+
+
+
+ +); + +export const RentStabilizedProtections: React.FC = ({ + title = "EXERCISING YOUR RIGHTS", + subtitle = "Your right to limited rent increases", +}) => ( + + +

+ For rent-stabilized leases being renewed between October 1, 2024 and + September 30, 2025 the legal rent may be increased at the following + levels: for a one-year renewal there is a 2.75% increase, or for a + two-year renewal there is a 5.25% increase. +

+ + Learn about rent increase rights + + + + +

+ If you are rent-stabilized your landlord cannot simply decide they don’t + want you as a tenant anymore, they are limited to certain reasons for + evicting you. +

+ + Learn about lease renewal rights + + + + +

+ If you are the immediate family member of a rent-stabilized tenant and + have been living with them immediately prior to their moving or passing + away, you might be entitled to take over the lease. +

+ + Learn about succession rights + + + +); diff --git a/src/Components/Pages/PortfolioSize/PortfolioSize.scss b/src/Components/Pages/PortfolioSize/PortfolioSize.scss index 2c57922..0113dfd 100644 --- a/src/Components/Pages/PortfolioSize/PortfolioSize.scss +++ b/src/Components/Pages/PortfolioSize/PortfolioSize.scss @@ -8,7 +8,12 @@ .acris-links { border: 1px solid $GREY_NEW; - padding: 1.125rem 1.5rem; // 18px 24px + + .accordion__summary, + & > .acris-links__header { + padding: 1.125rem 1.5rem; // 18px 24px + } + .acris-links__header { display: flex; align-items: center; @@ -22,10 +27,13 @@ } } + .accordion__content { + padding: 0; + } + .acris-links__content { - .info-box { - margin: 1.125rem 0; // 18px - } + padding: 0 1.5rem 1.125rem 1.5rem; // 0 24px 18px 24px + p { font-weight: 600; margin-top: 1.875rem; // 30px diff --git a/src/Components/Pages/PortfolioSize/PortfolioSize.tsx b/src/Components/Pages/PortfolioSize/PortfolioSize.tsx index 04b9bfb..ff091aa 100644 --- a/src/Components/Pages/PortfolioSize/PortfolioSize.tsx +++ b/src/Components/Pages/PortfolioSize/PortfolioSize.tsx @@ -69,8 +69,8 @@ export const PortfolioSize: React.FC = () => {
@@ -85,8 +85,8 @@ export const PortfolioSize: React.FC = () => {
diff --git a/src/Components/Pages/RentStabilization/RentStabilization.tsx b/src/Components/Pages/RentStabilization/RentStabilization.tsx index e3f6172..592fc81 100644 --- a/src/Components/Pages/RentStabilization/RentStabilization.tsx +++ b/src/Components/Pages/RentStabilization/RentStabilization.tsx @@ -28,8 +28,8 @@ export const RentStabilization: React.FC = () => {
@@ -43,8 +43,8 @@ export const RentStabilization: React.FC = () => {
diff --git a/src/Components/Pages/Results/Results.scss b/src/Components/Pages/Results/Results.scss index e20c5b5..cf67155 100644 --- a/src/Components/Pages/Results/Results.scss +++ b/src/Components/Pages/Results/Results.scss @@ -297,3 +297,31 @@ $eligibilityTablePaddingH: 36px; } } } + +.next-step { + --icon-size: 2.75rem; // 44px; + --icon-margin: 1.5rem; // 24px; + + .eligibility__icon { + font-size: 1.875rem; //30px + margin-right: var(--icon-margin); + + .eligible { + color: $GREEN; + } + .ineligible { + color: $RED; + } + .unknown { + color: $YELLOW; + } + + svg { + width: var(--icon-size); + height: var(--icon-size); + } + } + .accordion__content { + margin-left: calc(var(--icon-size) + var(--icon-margin)); + } +} diff --git a/src/Components/Pages/Results/Results.tsx b/src/Components/Pages/Results/Results.tsx index e73f891..78ec54e 100644 --- a/src/Components/Pages/Results/Results.tsx +++ b/src/Components/Pages/Results/Results.tsx @@ -24,10 +24,15 @@ import { } from "../../../api/helpers"; import { Address } from "../Home/Home"; import { breadCrumbAddress, getDetermination } from "../../../helpers"; -import { ContentBox, ContentBoxProps } from "../../ContentBox/ContentBox"; +import { ContentBox, ContentBoxItem } from "../../ContentBox/ContentBox"; import { BreadCrumbs } from "../../BreadCrumbs/BreadCrumbs"; -import JFCLLinkExternal from "../../JFCLLinkExternal"; import JFCLLinkInternal from "../../JFCLLinkInternal"; +import { + GoodCauseExercisingRights, + GoodCauseProtections, + RentStabilizedProtections, + UniversalProtections, +} from "../../KYRContent/KYRContent"; import "./Results.scss"; export const Results: React.FC = () => { @@ -159,10 +164,7 @@ export const Results: React.FC = () => {
- + @@ -183,28 +185,22 @@ export const Results: React.FC = () => { /> )} - {isRentStabilized && rentStabilizedProtections} - + {isRentStabilized && } {determination === "UNKNOWN" && ( - + <> + + + )} - {determination === "ELIGIBLE" && ( <> - - {goodCauseExercisingRights} + + )} - - {determination === "INELIGIBLE" && - !isRentStabilized && - universalProtections} + {determination === "INELIGIBLE" && !isRentStabilized && ( + + )}

@@ -236,7 +232,7 @@ const EligibilityIcon: React.FC<{ determination?: Determination }> = ({ }) => { switch (determination) { case "ELIGIBLE": - return ; + return ; default: return ( {rentRegulationUnknown && ( -
- - - -
-
- We need to know if your apartment is rent stabilized. -
-

- The Good Cause Eviction law only covers tenants whose apartments - are not rent regulated. You told us that you are unsure of your - rent regulation status. -

- - Learn how to find out - -
-
+ + + + } + className="next-step" + open + > +

+ The Good Cause Eviction law only covers tenants whose apartments are + not rent regulated. You told us that you are unsure of your rent + regulation status. +

+ + Learn how to find out + + )} {portfolioSizeUnknown && ( -
- - - -
-
- We need to know if your landlord owns more than 10 units. -
- {bldgData.related_properties.length ? ( - <> -

- {`Good Cause Eviction law only covers tenants whose landlord owns + + + + } + className="next-step" + open + > + {bldgData.related_properties.length ? ( + <> +

+ {`Good Cause Eviction law only covers tenants whose landlord owns more than 10 units. Your building has only ${bldgData.unitsres} apartments, but your landlord may own other buildings.`} -

+

- - Learn how to find out - - - ) : ( - <> -

- {`Good Cause Eviction law only covers tenants whose landlord owns + + Learn how to find out + + + ) : ( + <> +

+ {`Good Cause Eviction law only covers tenants whose landlord owns more than 10 units. Your building has only ${bldgData.unitsres} apartments.`} -

-
-

- We are unable to find other apartments your landlord might own - in our records. -

- - )} -
-
+

+
+

+ We are unable to find other apartments your landlord might own + in our records. +

+ + )} + )}
@@ -423,271 +421,6 @@ const EligibilityNextSteps: React.FC<{ ); }; -const GoodCauseProtections = (props: Omit) => ( - -
-
-
- Your right to a lease renewal -
-

- Your landlord will need to provide a good cause reason for ending a - tenancy. This includes evicting tenants, not renewing a lease, or, if - the tenant does not have a lease, giving notice that the tenancy will - end. -

-
-
- -
-
-
- Your right to limited rent increases -
-

- Your landlord is not allowed to increase your rent at a rate higher - than the local standard. The local rent standard is set every year at - the rate of inflation plus 5%, with a maximum of 10% total. -

-
-

- As of May 1, 2024, the rate of inflation for the New York City area is - 3.82%, meaning that the current local rent standard is 8.82%. A rent - increase of more than 8.82% could be found unreasonable by the court - if the rent was increased after April 20, 2024. -

-
-
- -
-
-

- Learn more about Good Cause Eviction Law protections -

- - Housing Justice for All Good Cause Eviction fact sheet - - - Met Council on Housing Good Cause Eviction fact sheet - -
-
- -); - -const goodCauseExercisingRights = ( - -
-
-

- Assert your rights by printing your coverage results and sharing with - your landlord. You can use these results as an indicator that your - apartment is covered by Good Cause Eviction Law. -

-
-
- -
-
-
-
- -); - -const rentStabilizedProtections = ( - -
-
-
- Your right to limited rent increases -
-

- For rent-stabilized leases being renewed between October 1, 2024 and - September 30, 2025 the legal rent may be increased at the following - levels: for a one-year renewal there is a 2.75% increase, or for a - two-year renewal there is a 5.25% increase. -

- - Learn about rent increase rights - -
-
- -
-
-
- Your right to a lease renewal -
-

- If you are rent-stabilized your landlord cannot simply decide they - don’t want you as a tenant anymore, they are limited to certain - reasons for evicting you. -

- - Learn about lease renewal rights - -
-
- -
-
-
- Your right to succession -
-

- If you are the immediate family member of a rent-stabilized tenant and - have been living with them immediately prior to their moving or - passing away, you might be entitled to take over the lease. -

- - Learn about succession rights - -
-
- -); - -const universalProtections = ( - -
-
-
- Your eviction protections -
-

- The only way your landlord can evict you is through housing court. - Lockouts (also known as unlawful evictions or self-help evictions) are - illegal. All tenants, including those in private residential programs, - have the right to stay in their home unless they choose to leave or - are evicted through a court process. -

-
-

Learn more about the eviction process

- - NY Homes and Community Renewal - -
-
-

See if you are eligible for a free attorney

- - Eviction Free NYC - -
-
- -
-
-
- Your right to a liveable home -
-

- Tenants have the right to live in a safe, sanitary, and - well-maintained apartment, including public areas of the building. - This right is implied in every residential lease, and any lease - provision that waives it is void. If your landlord is not providing - these conditions in your apartment or building, there are actions you - can take to exercise your rights. -

-
-

Learn about warranty of habitability

- - NY Courts - -
-
-

Learn how tenant associations can help

- - Met Council on Housing - -
-
-

Notify your landlord of repair issues

- - JustFix’s Letter of Complaint - -
-
- -
-
-
- Your rights if you’re being discriminated against -
-

- Your landlord can’t evict you based on your race, religion, gender, - national origin, familial status, or disability. New York State law - promises protection from discrimination, banning bias based on age, - sexual orientation, and military status. -

-

- Source of income discrimination the illegal practice by landlords, - owners, and real estate brokers of refusing to rent to current or - prospective tenants seeking to pay for housing with housing assistance - vouchers, subsidies, or other forms of public assistance. -

-
-

Learn more about fair housing

- - Fair Housing NYC - -
-
-

- Learn more about lawful source of income discrimination -

- - Lawful source of income - -
-
-

Report source of income discrimination

- - Unlock NYC - -
-
- -); - const EligibilityResultHeadline: React.FC<{ address: string; determination: Determination;