@renaissancerentals/renaissance-component 12.4.24 → 13.0.3

package/lib/announcement/Banner.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import './assets/Banner.scss';
+import './assets/Banner.css';
 export declare const Banner: React.FC<BannerProps>;
 export interface BannerProps {
     delay?: number;

package/lib/announcement/assets/Banner.css

@@ -0,0 +1,65 @@
+:root {
+    --announcement-font: 'Merriweather', serif;
+    --announcement-button-font: 'Merriweather Sans', sans-serif;
+    --announcement-secondary-color: #eae9e3;
+    --announcement-primary-color: #41606d;
+}
+
+.section-announcement {
+  font-family: var(--announcement-font);
+  text-align: center;
+
+  h2 {
+    font-family: var(--announcement-font);
+    text-transform: capitalize;
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 14px;
+  }
+
+  button {
+    font-family: var(--announcement-button-font);
+    font-weight: bold;
+    padding: .7rem 1rem;
+    background: var(--announcement-primary-color);
+    color: white;
+    font-size: 14px;
+  }
+
+  @media (min-width: 62rem) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    background: grey;
+  }
+
+  .left {
+    background: white;
+    color: var(--announcement-primary-color);
+
+    h2 {
+      color: var(--announcement-primary-color);
+    }
+  }
+
+  .right {
+    background: var(--announcement-primary-color);
+    color: white;
+  }
+
+  .left, .right {
+    padding: 1rem;
+
+  }
+
+  @media (min-width: 62rem) {
+    .left, .right {
+      max-width: 30rem;
+      height: 10rem;
+    }
+  }
+}
+

package/lib/application/ApplicationCompletion.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/ApplicationCompletion.scss";
+import "./assets/ApplicationCompletion.css";
 export declare const ApplicationCompletion: React.FC;

package/lib/application/ApplicationModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import "./assets/ApplicationModal.scss";
+import "./assets/ApplicationModal.css";
 import { ApplicationSectionProps } from "./ApplicationSection";
 export declare const ApplicationModal: React.FC<ApplicationModalProps>;
 export interface ApplicationModalProps extends ApplicationSectionProps {

package/lib/application/ApplicationSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/ApplicationSection.scss";
+import "./assets/ApplicationSection.css";
 import { ContactPropertyIds } from "../contact/ContactSection";
 export declare const ApplicationSection: React.FC<ApplicationSectionProps>;
 export interface ApplicationSectionProps {

package/lib/application/assets/ApplicationCompletion.css

@@ -0,0 +1,44 @@
+:root {
+    --application-completion-background-color: var(--primary-background-color);
+    --application-completion-banner-background-color: var(--primary-color);
+    --application-completion-banner-color: var(--primary-background-color);
+}
+
+.section-application-completion {
+  padding-top: 2em;
+  text-align: center;
+  background: var(--application-completion-background-color);
+  .completion-banner {
+    background: var(--application-completion-banner-background-color);
+    padding: .5rem 1rem 1.5rem 1rem;
+    color: var(--application-completion-banner-color);
+  }
+
+  .completion-step-banner {
+    margin: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .muncher-step .muncher-step--label {
+    font-family: var(--sans-serif-font);
+  }
+
+  .info, .emphasized-info {
+    padding: 1rem;
+  }
+
+  .emphasized-info {
+    text-transform: uppercase;
+    font-family: var(--sans-serif-font);
+    font-size: 1.2rem;
+  }
+
+  @media (min-width: 48rem) {
+    .muncher-step--container {
+      margin: 2rem 10rem;
+    }
+  }
+}
+

package/lib/application/assets/{ApplicationModal.scss → ApplicationModal.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .div-contact--modal {
   position: relative;
   .close {
@@ -7,7 +5,7 @@
     top: 1rem;
     right: 1rem;
     padding: .4rem;
-    color: $primary-color;
+    color: var(--primary-color);
     cursor: pointer;
   }
 
@@ -25,10 +23,10 @@
 
     .section__contact .form--element {
       width: 70vw;
-      @media (min-width: $medium-size) {
+      @media (min-width: 48rem) {
         max-width: 17rem;
       }
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         max-width: 25rem;
       }
     }

package/lib/application/assets/{ApplicationSection.scss → ApplicationSection.css}

@@ -1,21 +1,22 @@
-@import "src/assets/variables";
-@import "../../assets/form";
+@import '../../assets/form.css';
 
-$application-section-background-color: $primary-background-color !default;
-$banner-background-color: $secondary-background-color !default;
-$banner-color: #D73647 !default;
+:root {
+    --application-section-background-color: var(--primary-background-color);
+    --banner-background-color: var(--secondary-background-color);
+    --banner-color: #D73647;
+}
 
 .section-application {
   padding-top: 2em;
   text-align: center;
-  background: $application-section-background-color;
+  background: var(--application-section-background-color);
 
   .application-heading {
 
     .banner {
-      background: $banner-background-color;
+      background: var(--banner-background-color);
       padding: .5rem 1rem 1.5rem 1rem;
-      color: $banner-color;
+      color: var(--banner-color);
 
       .emphasized {
         font-weight: bold;
@@ -38,7 +39,7 @@ $banner-color: #D73647 !default;
   }
 
   .muncher-step .muncher-step--label {
-    font-family: $sans-serif-font;
+    font-family: var(--sans-serif-font);
   }
 
   .info, .emphasized-info {
@@ -47,11 +48,11 @@ $banner-color: #D73647 !default;
 
   .emphasized-info {
     text-transform: uppercase;
-    font-family: $sans-serif-font;
+    font-family: var(--sans-serif-font);
     font-size: 1.2rem;
   }
 
-  @media (min-width: $medium-size) {
+  @media (min-width: 48rem) {
     .muncher-step--container {
       margin: 2rem 10rem;
     }

package/lib/asset/AssetModal.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/AssetModal.scss";
+import "./assets/AssetModal.css";
 export declare const AssetModal: React.FC<AssetModalProps>;
 export interface AssetModalProps {
     assetUrl: string | null;

package/lib/asset/VideoModal.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/VideoModal.scss";
+import "./assets/VideoModal.css";
 import { Video } from "./data/Asset";
 export declare const VideoModal: React.FC<VideoModalProps>;
 export interface VideoModalProps {

package/lib/asset/assets/{AssetModal.scss → AssetModal.css}

@@ -1,9 +1,7 @@
-@import "src/assets/variables";
-
 .asset-modal {
 
   .muncher-modal {
-    color: $primary-background-color;
+    color: var(--primary-background-color);
     text-align: center;
     top: 3vh;
 

package/lib/asset/assets/{VideoModal.scss → VideoModal.css}

@@ -1,9 +1,7 @@
-@import "src/assets/variables";
-
 .video-modal {
 
   .muncher-modal {
-    color: $primary-background-color;
+    color: var(--primary-background-color);
     text-align: center;
     top: 3vh;
 

package/lib/assets/App.css

@@ -0,0 +1,3 @@
+/* Back-compat for apps still importing "@renaissancerentals/renaissance-component/lib/assets/App".
+   The real source of truth is src/index.css, matching the @contentmunch/contentmunch-ui convention. */
+@import '../index.css';

package/lib/assets/form.css

@@ -0,0 +1,89 @@
+form .form-element {
+  margin: .5rem 2rem;
+  padding: 0 .5rem;
+  text-align: left;
+}
+
+form .form-element p {
+  font-size: .8rem;
+}
+
+form .form-element .message {
+  text-align: center;
+}
+
+form .checkboxes {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+form .checkboxes > div {
+  padding: 0 .5rem;
+}
+
+form .captcha + p {
+  display: inline;
+  margin: .5rem 2rem;
+}
+
+form .captcha {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 2rem;
+}
+
+form .form-submit {
+  display: inline-flex;
+  align-items: center;
+}
+
+form .form-submit .muncher-spinner {
+  width: 1rem;
+  height: 1rem;
+  border-width: .2rem;
+  margin-left: 1rem;
+}
+
+@media (min-width: 48rem) {
+  form {
+    column-count: 2;
+    text-align: left;
+  }
+
+  form .form-element {
+    break-inside: avoid-column;
+    max-width: 28rem;
+    width: 35vw;
+  }
+
+  form .form-element .message {
+    text-align: left;
+  }
+}
+
+@media (min-width: 62rem) {
+  form .form-element {
+    max-width: 30rem;
+    width: 35vw;
+  }
+}
+
+form ::-webkit-input-placeholder { /* Edge */
+  font-size: .8rem;
+}
+
+form :-ms-input-placeholder { /* Internet Explorer */
+  font-size: .8rem;
+}
+
+form ::placeholder {
+  font-size: .8rem;
+}
+
+form .hp-form-item {
+  position: absolute;
+  left: -9999px; /* moves it off-screen */
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}

package/lib/assets/variables.css

@@ -0,0 +1,49 @@
+/* overrides from contentmunch-ui */
+:root {
+    --primary-color: #40606f;
+    --secondary-color: #4b4f54;
+    --tertiary-color: #f7f7f7;
+    --primary-background-color: white;
+    --secondary-background-color: #e2e4e2;
+    --tertiary-background-color: #91a9b3;
+    --nav-color: var(--primary-color);
+    --link-color: var(--primary-color);
+    --link-hover-color: var(--secondary-color);
+    --nav-background-color: var(--secondary-background-color);
+    --disabled-color: #959698;
+    --danger-color: #a52a2a;
+    --success-color: green;
+    --border-color: #d8d8d8;
+    --sans-serif-font: 'Merriweather Sans', sans-serif;
+    --monospace-font: 'Roboto Mono', monospace;
+    --serif-font: 'Merriweather', serif;
+    --button-font: var(--sans-serif-font);
+
+    --black: var(--primary-color);
+    --violet: rgba(127, 0, 255, 1.0);
+    --indigo: rgba(75, 0, 130, 1.0);
+    --green: rgba(0, 180, 0, 1.0);
+    --blue: rgba(0, 0, 255, 1.0);
+    --yellow: rgba(180, 180, 0, 1.0);
+    --orange: rgba(255, 127, 0, 1.0);
+    --red: rgba(255, 0, 0, 1.0);
+    --brown: var(--danger-color);
+
+    --extra-small-size: 20rem;
+    --small-size: 22rem;
+    --medium-size: 48rem;
+    --large-size: 62rem;
+    --extra-large-size: 75rem;
+
+    /* component variables */
+    --body-color: var(--primary-background-color);
+    --section-heading-color: var(--link-color);
+    --main-font: var(--serif-font);
+    --heading-font: var(--sans-serif-font);
+    --italic-font: var(--main-font);
+    --nav-font: var(--heading-font);
+    --secondary-nav-background-color: #f0f0f0;
+    --input-focus-color: var(--tertiary-background-color);
+    --input-border-color: var(--primary-color);
+    --special-offer-color: #c55e5e;
+}

package/lib/banner/SubmissionRequestBanner.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/SubmissionRequestBanner.scss";
+import "./assets/SubmissionRequestBanner.css";
 export declare const SubmissionRequestBanner: React.FC;

package/lib/banner/assets/{SubmissionRequestBanner.scss → SubmissionRequestBanner.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .submission-request-banner {
   font-size: .8rem;
   font-style: italic;

package/lib/card/Card.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/Card.scss";
+import "./assets/Card.css";
 export declare const Card: React.FC<CardProps>;
 export interface CardProps {
     title?: string;

package/lib/card/assets/Card.css

@@ -0,0 +1,45 @@
+:root {
+    --card-color: var(--secondary-color);
+    --card-background: var(--primary-background-color);
+    --card-header-background: var(--tertiary-background-color);
+}
+
+.section-card {
+  color: var(--card-color);
+  background: var(--card-background);
+  font-family: var(--sans-serif-font);
+  line-height: 1.4rem;
+  margin: 3vw;
+  width: 94vw;
+  @media (min-width: 62rem) {
+    margin: 0;
+    width: 100%;
+  }
+
+  .muncher-paper {
+    padding: 0;
+  }
+
+  .card-header {
+    background: var(--card-header-background);
+    color: var(--card-background);
+    padding: 1rem;
+    font-size: 1.2rem;
+    font-style: italic;
+    font-weight: 400;
+    font-family: var(--serif-font);
+  }
+
+  .card-body {
+    padding: 1rem;
+    font-size: .8rem;
+    font-weight: 400;
+
+  }
+
+  .card-body--featured {
+    color: var(--card-background);
+    background: var(--primary-color);
+  }
+}
+

package/lib/contact/ContactModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import "./assets/ContactModal.scss";
+import "./assets/ContactModal.css";
 import { ContactSectionProps } from "./ContactSection";
 export declare const ContactModal: React.FC<ContactModalProps>;
 export interface ContactModalProps extends ContactSectionProps {

package/lib/contact/ContactSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/ContactSection.scss';
+import './assets/ContactSection.css';
 import { PropertyId } from "../property/data/Property";
 export declare const ContactSection: React.FC<ContactSectionProps>;
 export interface ContactSectionProps {

package/lib/contact/ContactSectionSkeleton.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import './assets/ContactSkeleton.scss';
+import './assets/ContactSkeleton.css';
 export declare const ContactSectionSkeleton: React.FC;

package/lib/contact/assets/{ContactModal.scss → ContactModal.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .div-contact--modal {
   position: relative;
 
@@ -8,7 +6,7 @@
     top: 1rem;
     right: 1rem;
     padding: .4rem;
-    color: $primary-color;
+    color: var(--primary-color);
     cursor: pointer;
   }
 
@@ -19,7 +17,7 @@
   .muncher-modal {
     margin: 1rem 0;
     padding: 0;
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       padding: 1rem 1rem 5rem 1rem;
     }
 

package/lib/contact/assets/{ContactSection.scss → ContactSection.css}

@@ -1,21 +1,23 @@
-@import "src/assets/variables";
-@import "../../assets/form";
+@import '../../assets/form.css';
+
+:root {
+    --contact-section-background-color: var(--primary-background-color);
+}
 
-$contact-section-background-color: $primary-background-color !default;
 .section-contact {
   padding-top: 2em;
   text-align: center;
-  background: $contact-section-background-color;
+  background: var(--contact-section-background-color);
 
   .muncher-badge {
     border-radius: 0;
     padding: .8rem 1rem;
     font-weight: bold;
-    font-family: $sans-serif-font;
+    font-family: var(--sans-serif-font);
   }
 
   .container {
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       display: flex;
       justify-content: space-between;
     }
@@ -52,7 +54,7 @@ $contact-section-background-color: $primary-background-color !default;
 
     .item-right--range {
       width: 50vw;
-      @media (min-width: $medium-size) {
+      @media (min-width: 48rem) {
         width: 30vw;
       }
     }
@@ -69,7 +71,7 @@ $contact-section-background-color: $primary-background-color !default;
     }
 
     .error {
-      color: $danger-color;
+      color: var(--danger-color);
 
       .muncher-icon {
         margin: .2rem 0;
@@ -103,7 +105,7 @@ $contact-section-background-color: $primary-background-color !default;
 
   .with-sub {
     width: 99%;
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -170,7 +172,7 @@ $contact-section-background-color: $primary-background-color !default;
   }
 
   .left, .right {
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       width: 50vw;
     }
   }
@@ -185,7 +187,7 @@ $contact-section-background-color: $primary-background-color !default;
   }
 
   .step-div {
-    @media (min-width: $small-size) {
+    @media (min-width: 22rem) {
       display: flex;
       align-items: flex-start;
       justify-content: center;
@@ -194,7 +196,7 @@ $contact-section-background-color: $primary-background-color !default;
         width: 50vw;
       }
     }
-    @media (min-width: $medium-size) {
+    @media (min-width: 48rem) {
       display: block;
 
       .active, .inactive {

package/lib/contact/assets/{ContactSkeleton.scss → ContactSkeleton.css}

@@ -1,4 +1,4 @@
-@import "ContactSection";
+@import "./ContactSection.css";
 .section-contact {
   .heading {
     .react-loading-skeleton {

package/lib/faq/FaqsCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FaqsCard.scss";
+import "./assets/FaqsCard.css";
 import { FaqsSectionProps } from "./FaqsSection";
 export declare const FaqsCard: React.FC<FaqsCardProps>;
 export interface FaqsCardProps extends FaqsSectionProps {

package/lib/faq/FaqsSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/FaqsSection.scss";
+import "./assets/FaqsSection.css";
 import { Faq } from "./data/Faq";
 export declare const FaqsSection: React.FC<FaqsSectionProps>;
 export interface FaqsSectionProps {

package/lib/faq/PropertyFaqSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/PropertyFaqSection.scss";
+import "./assets/PropertyFaqSection.css";
 export declare const PropertyFaqSection: React.FC<PropertyFaqSectionProps>;
 export interface PropertyFaqSectionProps {
     propertyId: string;

package/lib/faq/ResidentFaqSection.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/ResidentFaqSection.scss";
+import "./assets/ResidentFaqSection.css";
 export declare const ResidentFaqSection: React.FC;

package/lib/faq/assets/{FaqsCard.scss → FaqsCard.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .faqs-div {
   section {
     padding: 0;

package/lib/faq/assets/{FaqsSection.scss → FaqsSection.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .faqs-section {
 
   .muncher-accordion {
@@ -8,7 +6,7 @@
         text-align: left;
         font-size: 1rem;
         text-transform: none;
-        color: $primary-color;
+        color: var(--primary-color);
       }
     }
   }

package/lib/faq/assets/{PropertyFaqSection.scss → PropertyFaqSection.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .property-faq-section {
   display: flex;
   align-items: flex-start;