feat(Modal)!: remove top-level sub-component(s)

chanzuckerberg · Jul 14, 2023 · 1ec7315 · 1ec7315
1 parent 5aeb9de
commit 1ec7315
Show file tree

Hide file tree

Showing 17 changed files with 378 additions and 420 deletions.
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
@@ -160,3 +160,153 @@
 .modal__close-icon--brand {
  color: var(--eds-theme-color-icon-neutral-default-inverse);
 }
+
+/*------------------------------------*\
+ # MODAL BODY
+\*------------------------------------*/
+
+/**
+ * The body of the modal
+ */
+ .modal-body {
+ padding: var(--eds-size-4) var(--modal-horizontal-padding);
+ flex: 1;
+}
+
+.modal-body:focus-visible {
+ @mixin focusInside;
+}
+
+@supports not selector(:focus-visible) {
+ .modal-body:focus {
+ @mixin focusInside;
+ }
+}
+
+/*------------------------------------*\
+ # MODAL FOOTER
+\*------------------------------------*/
+
+/**
+ * Footer for the modal.
+ */
+ .modal-footer {
+ padding-top: var(--eds-size-2-and-half);
+ padding-bottom: var(--eds-size-2-and-half);
+ padding-left: var(--modal-horizontal-padding);
+ padding-right: var(--eds-size-3);
+
+ width: 100%;
+ background-color: var(--eds-theme-color-background-neutral-default);
+
+ border-bottom-left-radius: var(--eds-border-radius-lg);
+ border-bottom-right-radius: var(--eds-border-radius-lg);
+
+ z-index: var(--eds-z-index-100);
+}
+
+/**
+ * Sticky variant of the footer.
+ * Used when the modal variant is scrollable.
+ */
+.modal-footer--sticky {
+ position: sticky;
+ bottom: 0;
+ box-shadow: var(--eds-box-shadow-xl);
+}
+
+/*------------------------------------*\
+ # MODAL HEADER
+\*------------------------------------*/
+
+/**
+ * Header for the modal.
+ */
+ .modal-header {
+ width: 100%;
+ background-color: var(--eds-theme-color-background-neutral-default);
+ padding-top: var(--eds-size-7);
+ padding-left: var(--modal-horizontal-padding);
+ padding-right: var(--modal-horizontal-padding);
+}
+
+/**
+ * Brand variant for the header.
+ */
+.modal-header--brand {
+ display: flex;
+ flex-direction: column;
+
+ min-height: 10.75rem;
+
+ @media all and (min-height: $eds-bp-sm-2) {
+ min-height: 19.75rem;
+ }
+ @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
+ flex-direction: row;
+ }
+
+ flex-shrink: 0;
+
+ color: var(--eds-theme-color-text-neutral-default-inverse);
+ background-color: var(--eds-theme-color-modal-brand-header-background);
+ h2 {
+ /**
+ * Brand specific font for the title.
+ */
+ flex: 1;
+ font: var(--eds-theme-typography-headline-secondary-lg);
+
+ @media all and (min-width: $eds-bp-sm-2) {
+ margin-bottom: var(--eds-size-3);
+ }
+ @media all and (min-width: $eds-bp-xl) {
+ font: var(--eds-theme-typography-headline-secondary-md);
+
+ }
+ }
+}
+
+/**
+ * Specific asset placement for brand.
+ */
+.modal-header__brand-asset {
+ align-self: flex-end;
+ position: relative;
+ top: var(--eds-size-2);
+ left: var(--eds-size-2);
+
+ width: 8.5rem;
+ height: 8.5rem;
+
+ /* For mobile landscape orientation. */
+ @media all and (min-width: $eds-bp-sm-2) {
+ display: none;
+ }
+
+ @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
+ display: block;
+ width: 14rem;
+ height: 14rem;
+ left: var(--eds-size-3);
+ }
+
+ @media all and (min-width: $eds-bp-xl) {
+ width: 16.5rem;
+ height: 16.5rem;
+ left: 0;
+ }
+}
+
+/*------------------------------------*\
+ # MODAL STEPPER
+\*------------------------------------*/
+
+/**
+ * Stepper that resides in the modal footer.
+ */
+ .modal-stepper {
+ color: var(--eds-theme-color-icon-neutral-default);
+ display: flex;
+ gap: var(--eds-size-1-and-half);
+}