@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Megamenu/styles/style.scss

@@ -1,97 +1,209 @@
-@use "../../../styles/tools/generate";
-@use "../../../styles/tools/convert";
-@use "./config" as *;
-@use "./mixins" as mixins;
-@use "../../../styles/tokens/color";
-@use "../../../styles/tokens/space";
-@use "../../../styles/tokens/breakpoint";
+@use "../../Container/styles/mixins" as container;
+@use "../../Accordion/styles/mixins" as accordion;
+@use "../../../styles/typography/mixins" as typography;
 
-@layer components {
-  // =============================================================================
-  // MEGAMENU BASE
-  // =============================================================================
+@use "./mixins";
+@use "./config";
 
-  .megamenu {
-    @include mixins.megamenu();
+// Modifiers global states and resets
+#{config.$class-root} {
+  @include mixins.globals;
+}
+
+#{config.$class-root},
+#{config.$class-root}.is-light {
+  @include mixins.light-vars;
+}
+
+#{config.$class-root}.is-dark {
+  @include mixins.dark-vars;
+}
+
+// Component
+#{config.$class-root} {
+  @include mixins.base;
+
+  &__nav {
+    @include mixins.nav;
+
+    &-item {
+      @include mixins.nav-item;
+    }
+
+    &--vertical {
+      @include mixins.nav-vertical;
+    }
+
+    &--space-small {
+      @include mixins.nav-space-small;
+    }
+
+    &-dropdown {
+      @include mixins.nav-dropdown;
+
+      &.is-visible {
+        opacity: 1;
+      }
+    }
 
-    &__visible {
-      @include mixins.megamenu-visible();
+    &-logo {
+      @include mixins.nav-logo;
     }
+
+    &-link {
+      @include mixins.nav-link;
+    }
+
+    &-cart-icon {
+      @include mixins.nav-cart-icon;
+    }
+
+    &-button {
+      @include mixins.nav-button;
+
+      &--indicator {
+        @include mixins.nav-button-indicator;
+      }
+    }
+
+    &-icon {
+      @include mixins.nav-icon;
+    }
+
+    &-spacer {
+      @include mixins.nav-spacer;
+    }
+  }
+
+  &__subnav {
+    @include mixins.subnav;
+
+    &-item {
+      @include mixins.subnav-item;
+    }
+  }
+
+  &__top {
+    @include mixins.top;
   }
 
-  // =============================================================================
-  // HEADER & NAVIGATION
-  // =============================================================================
+  &__main {
+    @include mixins.main;
+  }
 
-  .megamenu-header {
-    @include mixins.megamenu-header();
+  &__submain {
+    @include mixins.submain;
   }
 
-  .megamenu-divider {
-    @include mixins.megamenu-divider();
+  &__mobile {
+    @include mixins.mobile;
+
+    &-overlay {
+      @include mixins.mobile-overlay;
+    }
+
+    &-wrapper {
+      @include mixins.mobile-wrapper;
+    }
+
+    &-header {
+      @include mixins.mobile-header;
+    }
+
+    &-body {
+      @include mixins.mobile-body;
+    }
   }
 
-  .megamenu-content {
-    @include mixins.megamenu-content();
+  &__container {
+    @include mixins.container;
   }
 
-  // =============================================================================
-  // SIDEBAR & OVERLAY
-  // =============================================================================
+  &__grid {
+    @include mixins.grid;
+  }
 
-  .megamenu-sidebar {
-    @include mixins.megamenu-sidebar();
+  &__card {
+    @include mixins.card;
   }
 
-  .megamenu-sidebar-header {
-    @include mixins.megamenu-sidebar-header();
+  &__text--large {
+    @include mixins.text-large;
   }
 
-  .megamenu-overlay {
-    @include mixins.megamenu-overlay();
+  &-icon {
+    @include mixins.icon;
   }
 
-  // =============================================================================
-  // NAVIGATION LINKS
-  // =============================================================================
+  &__overlay {
+    @include mixins.overlay;
+  }
 
-  .megamenu-link {
-    @include mixins.megamenu-link();
+  &-spacer {
+    @include mixins.spacer;
 
-    &__full {
-      @include mixins.megamenu-dropdown-button();
-      &--icon {
-        @include mixins.megamenu-dropdown-button-icon();
-      }
+    &--small {
+      @include mixins.spacer-small;
     }
+  }
 
-    &__small {
-      @include mixins.megamenu-link-small();
-    }
+  &__accordion {
+    @include mixins.accordion;
+  }
 
-    &.is-active,
-    &__small.is-active {
-      @include mixins.megamenu-link__active();
-    }
+  &__accordion-item {
+    @include mixins.accordion-item();
   }
 
-  .megamenu-logo {
-    @include mixins.megamenu-logo();
+  &__accordion-header {
+    @include accordion.header;
   }
 
-  .megamenu-icon {
-    @include mixins.megamenu-icon();
+  &__accordion-button {
+    @include mixins.accordion-button;
   }
 
-  // =============================================================================
-  // DROPDOWN FUNCTIONALITY
-  // =============================================================================
+  &__accordion-title {
+    @include mixins.accordion-title;
+  }
 
-  .megamenu-dropdown {
-    @include mixins.megamenu-dropdown();
+  &__accordion-icon {
+    @include mixins.accordion-icon;
+  }
 
-    &__active {
-      @include mixins.megamenu-dropdown-active();
+  &__accordion-body {
+    @include mixins.accordion-body;
+  }
+
+  &__input {
+    @include mixins.input;
+  }
+
+  &__tag {
+    @include mixins.tag;
+
+    &--transparent {
+      @include mixins.tag-transparent;
     }
   }
+
+  &__list--inline {
+    @include typography.list-inline;
+  }
+
+  &__list--gap-small {
+    @include mixins.list-gap-small;
+  }
+
+  &--hide-md-down {
+    @include mixins.hide-md-down;
+  }
+
+  &--hide-lg-up {
+    @include mixins.hide-lg-up;
+  }
+
+  &--align-center {
+    text-align: center !important;
+  }
 }

package/src/components/Modal/Modal.tsx

@@ -51,6 +51,12 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   /** Color scheme for the modal */
   colorScheme?: "dark" | "light";
+  /** Disables header paddings */
+  disableHeaderSpacing?: boolean;
+  /** Disables body paddings */
+  disableBodySpacing?: boolean;
+  /** Disables footer paddings */
+  disableFooterSpacing?: boolean;
 }
 
 const defaultProps = {
@@ -78,6 +84,9 @@ const Modal: React.FC<ModalProps> = ({
   renderFooter,
   fullHeight,
   colorScheme,
+  disableHeaderSpacing,
+  disableBodySpacing,
+  disableFooterSpacing,
   ...other
 }) => {
   const [modalRef, instance] = useStatic(ModalStatic);
@@ -125,7 +134,7 @@ const Modal: React.FC<ModalProps> = ({
         {}
         <div
           className={cx(`${CLASS_ROOT}__header`, {
-            [`${CLASS_ROOT}__header--no-spacing`]: !!renderHeader,
+            [`${CLASS_ROOT}__header--no-spacing`]: disableHeaderSpacing,
           })}
         >
           {renderHeader ? (
@@ -140,11 +149,17 @@ const Modal: React.FC<ModalProps> = ({
         {renderBody ? (
           renderBody()
         ) : (
-          <ModalBody withTopPadding={!!renderHeader}>{children}</ModalBody>
+          <ModalBody
+            disableSpacing={disableBodySpacing}
+            withTopPadding={!disableBodySpacing && !!renderHeader}
+          >
+            {children}
+          </ModalBody>
         )}
         <div
           className={cx(`${CLASS_ROOT}__footer`, {
             [`${CLASS_ROOT}__footer--sticky`]: hasStickyFooter,
+            [`${CLASS_ROOT}__footer--no-spacing`]: disableFooterSpacing,
           })}
         >
           {renderFooter ? (

package/src/components/Modal/ModalBody.tsx

@@ -1,26 +1,36 @@
 import React from "react";
 import cx from "classnames";
 
-export const colors = [
-  "white",
-  "gray",
-  "orange",
-  "orange-dark",
-  "black",
-  "blue",
-  "green",
-  "pink",
-  "violet",
-  "yellow",
+export const modalBodyColors = [
+  "background-primary",
+  "background-secondary",
+  "background-contrast",
+  "background-accent",
+  "background-accent1-blog",
+  "background-accent2-blog",
+  "surface-primary",
+  "surface-secondary",
+  "surface-tertiary",
+  "surface-subtle",
+  "surface-moderate",
+  "surface-contrast",
+  "surface-accent",
+  "fill-subtle",
+  "fill-accent1",
+  "fill-accent2",
+  "fill-accent3",
+  "fill-accent4",
+  "fill-accent5",
 ] as const;
 
-export type BodyColor = (typeof colors)[number];
+export type ModalBodyColor = (typeof modalBodyColors)[number];
 
 interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  color?: BodyColor;
+  color?: ModalBodyColor;
   className?: string;
   children?: React.ReactNode;
   withTopPadding?: boolean;
+  disableSpacing?: boolean;
 }
 
 const CLASS_ROOT = "modal__body";
@@ -30,13 +40,18 @@ const ModalBody: React.FC<ModalBodyProps> = ({
   className,
   children,
   withTopPadding,
+  disableSpacing,
   ...other
 }) => (
   <div
     className={cx(CLASS_ROOT, className, {
-      [`bg-${color}`]: color,
+      ...(color && color !== "background-contrast" ? { [color]: true } : {}),
+      ...(color === "background-contrast"
+        ? { [`${color} text-inverse`]: true }
+        : {}),
       [`${CLASS_ROOT}--colorful`]: color,
       [`${CLASS_ROOT}--with-top-padding`]: withTopPadding,
+      [`${CLASS_ROOT}--no-spacing`]: disableSpacing,
     })}
     {...other}
   >

package/src/components/Modal/ModalProductBody.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import cx from "classnames";
+
+interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  subtitleSection?: React.ReactNode;
+  listSection?: React.ReactNode;
+  benefitsSection?: React.ReactNode;
+  extraPaymentsSection?: React.ReactNode;
+}
+
+export const CLASS_ROOT = "modal__product-body";
+
+const ModalProductBody = React.forwardRef<
+  HTMLDivElement,
+  ModalProductBodyProps
+>(
+  (
+    {
+      className,
+      subtitleSection,
+      listSection,
+      benefitsSection,
+      extraPaymentsSection,
+      ...other
+    },
+    ref,
+  ) => {
+    const classes = cx(CLASS_ROOT, className);
+
+    const subtitleSectionClass = `${CLASS_ROOT}-subtitle-section`;
+    const listSectionClass = `${CLASS_ROOT}-list-section`;
+    const accordionSectionClass = `${CLASS_ROOT}-accordion-section`;
+
+    return (
+      <div className={classes} ref={ref} {...other}>
+        {subtitleSection && (
+          <div className={subtitleSectionClass}>{subtitleSection}</div>
+        )}
+        {listSection && <div className={listSectionClass}>{listSection}</div>}
+        {benefitsSection && (
+          <div className={accordionSectionClass}>{benefitsSection}</div>
+        )}
+        {extraPaymentsSection && (
+          <div className={listSectionClass}>{extraPaymentsSection}</div>
+        )}
+      </div>
+    );
+  },
+);
+ModalProductBody.displayName = "ModalProductBody";
+
+export { ModalProductBody };

package/src/components/Modal/ModalProductFooter.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import cx from "classnames";
+
+interface ModalProductFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  image?: React.ReactNode;
+  /** Use small spacing */
+  space?: "small";
+  button?: React.ReactNode;
+}
+
+export const CLASS_ROOT = "modal__product";
+
+const ModalProductFooter = React.forwardRef<
+  HTMLDivElement,
+  ModalProductFooterProps
+>(({ className, children, button, image, space, ...other }, ref) => {
+  const classes = cx(
+    `${CLASS_ROOT}-footer`,
+    // {
+    //   [`${CLASS_ROOT}-footer--space-small`]: space === "small",
+    // },
+    className,
+  );
+
+  const contentClasses = `${CLASS_ROOT}-footer-content`;
+  const buttonClasses = `${CLASS_ROOT}-footer-button`;
+
+  return (
+    <div className={classes} ref={ref} {...other}>
+      <div className={contentClasses}>{children}</div>
+      <div className={buttonClasses}>{button}</div>
+    </div>
+  );
+});
+
+ModalProductFooter.displayName = "ModalProductFooter";
+
+export { ModalProductFooter };

package/src/components/Modal/index.ts

@@ -3,3 +3,5 @@ export { ModalBody } from "./ModalBody";
 export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
 export { ModalProductHeader } from "./ModalProductHeader";
+export { ModalProductFooter } from "./ModalProductFooter";
+export { ModalProductBody } from "./ModalProductBody";

package/src/components/Modal/styles/config.scss

@@ -39,3 +39,10 @@ $spacing: (
   ),
   large: (), // same as default,
 );
+
+$spacing-product-footer: (
+  default: (
+    default: space.get("medium") space.get("small") convert.to-rem(40px),
+    md: space.get("medium") space.get("large") space.get("large") space.get("large"),
+  )
+)

package/src/components/Modal/styles/mixins.scss

@@ -134,14 +134,16 @@
 @mixin body-spacing($size, $sizes: config.$spacing) {
   $spacing: map.get($sizes, $size);
 
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-left: $space;
-      padding-right: $space;
+  &:not(.modal__body--no-spacing) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding-left: $space;
+        padding-right: $space;
+      }
     }
   }
 
-  &:not(.modal__body--colorful) {
+  &:not(.modal__body--colorful):not(.modal__body--no-spacing) {
     @each $breakpoint, $space in $spacing {
       @include breakpoint.get($breakpoint) {
         padding-bottom: $space;
@@ -184,21 +186,27 @@
   > *:last-child {
     margin-bottom: 0;
   }
+
+  .divider {
+    padding: 0;
+  }
 }
 
 @mixin footer-spacing($size, $sizes: config.$spacing) {
   $spacing: map.get($sizes, $size);
 
-  @each $breakpoint, $space in $spacing {
-    @include breakpoint.get($breakpoint) {
-      padding-top: 0;
-      padding-right: $space;
-      padding-bottom: $space;
-      padding-left: $space;
+  &:not(.modal__footer--no-spacing) {
+    @each $breakpoint, $space in $spacing {
+      @include breakpoint.get($breakpoint) {
+        padding-top: 0;
+        padding-right: $space;
+        padding-bottom: $space;
+        padding-left: $space;
 
-      @at-root {
-        .modal__body--colorful + .modal__footer {
-          padding: $space !important;
+        @at-root {
+          .modal__body--colorful + .modal__footer {
+            padding: $space !important;
+          }
         }
       }
     }
@@ -227,8 +235,107 @@
   }
 }
 
+@mixin modal-product-footer() {
+  display: flex;
+  align-items: center;
+  gap: convert.to-rem(20px);
+
+  @include breakpoint.get("md") {
+    gap: convert.to-rem(30px);
+  }
+
+  @include breakpoint.get("xs", "down") {
+    flex-direction: column;
+  }
+
+  @each $breakpoint, $value in map.get(config.$spacing-product-footer, "default") {
+    @include breakpoint.get($breakpoint) {
+      padding: $value;
+    }
+  }
+}
+
+@mixin modal-product-footer-content() {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: convert.to-rem(7px);
+
+  @include breakpoint.get("xs", "down") {
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@mixin modal-product-footer-button() {
+  @include breakpoint.get("xs", "down") {
+    width: 100%;
+
+    .btn {
+      width: 100%;
+    }
+  }
+}
+
 @mixin modal-product-image() {
   object-fit: cover;
   object-position: left;
   max-width: convert.to-rem(125px);
 }
+
+@mixin modal-product-body-subtitle-section() {
+  padding: convert.to-rem(15px) space.get();
+
+  @include breakpoint.get('md') {
+    padding: convert.to-rem(20px) space.get('large');
+  }
+}
+
+@mixin modal-product-body-list-section() {
+  padding: 0 space.get();
+
+  @include breakpoint.get('md') {
+    padding: space.get('small') space.get('large');
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding: space.get('small') space.get() space.get('small') convert.to-rem(18px);
+    @include breakpoint.get('md') {
+      padding-right: 0;
+    }
+  }
+
+  li {
+    margin-bottom: convert.to-rem(15px);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@mixin modal-product-body-accordion-section() {
+  padding: convert.to-rem(15px) space.get();
+
+  .accordion__body {
+    padding: 0 space.get() convert.to-rem(15px) space.get('small');
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get('md') {
+    padding: space.get('small') space.get('large');
+
+    .accordion__body {
+      padding: 0 space.get('large') convert.to-rem(15px) space.get('small');
+    }
+  }
+}
+
+@mixin modal-product-body-section-title() {
+  margin-bottom: 0 !important;
+
+  padding: space.get('small') 0;
+}

package/src/components/Modal/styles/style.scss

@@ -120,4 +120,32 @@
   .modal__product-header--space-small .modal__product-content {
     @include mixins.modal-product-header(space.get());
   }
+
+  .modal__product-footer {
+    @include mixins.modal-product-footer();
+  }
+
+  .modal__product-footer-content {
+    @include mixins.modal-product-footer-content();
+  }
+
+  .modal__product-footer-button {
+    @include mixins.modal-product-footer-button();
+  }
+
+  .modal__product-body-subtitle-section {
+    @include mixins.modal-product-body-subtitle-section();
+  }
+
+  .modal__product-body-list-section {
+    @include mixins.modal-product-body-list-section();
+  }
+
+  .modal__product-body-accordion-section {
+    @include mixins.modal-product-body-accordion-section();
+  }
+
+  .modal__product-body-section-title {
+    @include mixins.modal-product-body-section-title();
+  }
 }