diff --git a/packages/assets/css/src/scss/_components/_summary-box/_elements/_elements.scss b/packages/assets/css/src/scss/_components/_summary-box/_elements/_elements.scss index ec0b204df..b192b42a4 100644 --- a/packages/assets/css/src/scss/_components/_summary-box/_elements/_elements.scss +++ b/packages/assets/css/src/scss/_components/_summary-box/_elements/_elements.scss @@ -3,3 +3,5 @@ @forward "./summary-box-body"; @forward "./summary-box-list"; @forward "./summary-box-footer"; +@forward "./summary-box-content"; +@forward "./summary-box-row"; diff --git a/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-body.scss b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-body.scss index 409f286fe..198afb399 100644 --- a/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-body.scss +++ b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-body.scss @@ -24,6 +24,10 @@ height: 100%; padding: $spacing-lg; + @include media(max-width, sm) { + padding: $spacing-md; + } + * { margin: 0; } diff --git a/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-content.scss b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-content.scss new file mode 100644 index 000000000..7ad9cffa2 --- /dev/null +++ b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-content.scss @@ -0,0 +1,41 @@ +@use "sass:math"; +@use "../../../_utils/utils" as *; + +/// Build Summary box content +/// +/// @type block +/// @author WPMU DEV +/// +/// @param {String} $block - Main block name +@mixin build-content($block) { + // DIR: Left to right. + // THEME: None. + @include sui-class($rtl: false, $theme: null) { + @include block($block) { + @include element(content) { + background: $summary-content-background; + border-radius: $summary-content-border-radius; + padding: $summary-content-padding-lg; + width: calc(50% - $summary-row-gap-md / 2); + + @include modifier(fluid) { + flex: 1 1 100%; + width: 100%; + } + + // Stack on mobile + @include media(max-width, sm) { + width: 100%; + } + + @include modifier(md) { + padding: $summary-content-padding-md; + + @include media(max-width, sm) { + padding: $summary-content-padding-sm; + } + } + } + } + } +} diff --git a/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-row.scss b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-row.scss new file mode 100644 index 000000000..efa1da01a --- /dev/null +++ b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-row.scss @@ -0,0 +1,29 @@ +@use "sass:math"; +@use "../../../_utils/utils" as *; + +/// Build Summary box content +/// +/// @type block +/// @author WPMU DEV +/// +/// @param {String} $block - Main block name +@mixin build-row($block) { + // DIR: Left to right. + // THEME: None. + @include sui-class($rtl: false, $theme: null) { + @include block($block) { + @include element(row) { + display: flex; + gap: $summary-row-gap-md; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + + // Smaller gap on mobile + @include media(max-width, sm) { + gap: $summary-row-gap-sm; + } + } + } + } +} diff --git a/packages/assets/css/src/scss/_components/_summary-box/_summary-box.scss b/packages/assets/css/src/scss/_components/_summary-box/_summary-box.scss index 0a18daa8b..0f1ecbd52 100644 --- a/packages/assets/css/src/scss/_components/_summary-box/_summary-box.scss +++ b/packages/assets/css/src/scss/_components/_summary-box/_summary-box.scss @@ -4,4 +4,6 @@ @include sui-summary-box--element.build-header(summary-box); @include sui-summary-box--element.build-body(summary-box); @include sui-summary-box--element.build-list(summary-box); -@include sui-summary-box--element.build-footer(summary-box); \ No newline at end of file +@include sui-summary-box--element.build-footer(summary-box); +@include sui-summary-box--element.build-content(summary-box); +@include sui-summary-box--element.build-row(summary-box); diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss deleted file mode 100644 index 12fc9cd1e..000000000 --- a/packages/assets/css/src/scss/_utils/_tokens.scss +++ /dev/null @@ -1,694 +0,0 @@ - -// Do not edit directly -// Generated on Wed, 20 Nov 2024 12:04:49 GMT - -$accordion-border-radius-sm: 10px; -$advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%); -$advanced-banner-size-width: 260px; -$avatar-container-size-sm: 24px; -$avatar-container-size-md: 32px; -$avatar-icon-size-sm: 14px; -$avatar-icon-size-md: 20px; -$avatar-status-margin-sm: -2px; -$avatar-status-margin-md: -3px; -$avatar-status-size-sm: 12px; -$avatar-status-size-md: 16px; -$banner-font-size-lg: 40px; -$banner-font-height-lg: 48px; -$banner-font-spacing: 1px; -$banner-border-radius: 16px; -$banner-spacing-xxs: 10px; -$banner-spacing-xs: 12px; -$banner-spacing-sm: 24px; -$banner-spacing-md: 34px; -$banner-spacing-lg: 48px; -$banner-size-sm: 420px; -$banner-size-md: 420px; -$banner-size-lg: 784px; -$banner-bg-color: rgb(255 255 255 / 39%); -$banner-bg-position-xs: 5px; -$banner-bg-position-sm: -200px; -$banner-bg-position-md: 150px; -$banner-bg-size: 40px; -$builder-size-width-xs: 32px; -$builder-size-width-xxl: 680px; -$builder-size-height-xs: 32px; -$builder-size-height-md: 72px; -$builder-spacing-md: 20px; -$button-container-size-md: 74px; -$button-container-size-sm: 68px; -$button-container-padding-vertical: 3px; -$button-container-padding-horizontal: 11px; -$button-container-border-radius: 4px; -$button-container-border-width: 1px; -$button-container-border-style: solid; -$button-container-margin-vertical: 0; -$button-container-margin-horizontal: 8px; -$button-label-padding-vertical: 4px; -$button-label-padding-horizontal: 4px; -$button-label-font-weight: 500; -$button-label-font-size-md: 16px-1px; -$button-label-font-height-md: 24px; -$button-label-font-height-sm: 16px; -$button-label-font-spacing-md: 0.2px; -$button-label-font-spacing-sm: 0px; -$button-icon-padding-vertical-md: 8px; -$button-icon-padding-vertical-sm: 4px; -$button-icon-padding-horizontal-md: 4px; -$button-icon-padding-horizontal-sm: 4px; -$checkbox-size-md: 20px; -$checkbox-spacing-xs: 8px; -$checkbox-spacing-md: 27px; -$checkbox-spacing-lg: 28px; -$checkbox-icon-width-sm: 11px; -$checkbox-icon-width-md: 12px; -$checkbox-icon-height-sm: 9px; -$checkbox-icon-height-md: 10px; -$code-editor-size-width: 40px; -$code-editor-position-left: -40px; -$code-editor-spacing-lg: 40px; -$code-snippet-font-family: "Roboto Mono", monospace; -$code-snippet-font-size-xs: 12px; -$code-snippet-font-size-sm: 12px+1px; -$code-snippet-font-spacing: 0px; -$code-snippet-font-height-xs: 16px; -$code-snippet-font-height-sm: 24px-4px; -$code-snippet-font-weight: 400; -$code-snippet-spacing-right: 16px+70px; -$code-snippet-height: 75px; -$colorpicker-border-radius-md: 10px; -$colorpicker-spacing-lg: 40px; -$colorpicker-spacing-sm: 6px; -$colorpicker-spacing-xs: 5px; -$colorpicker-spacing-2xs: -1px; -$colorpicker-size-height-2xl: 120px; -$colorpicker-size-height-md: 24px; -$colorpicker-size-height-sm: 10px; -$colorpicker-size-height-xs: 8px; -$colorpicker-size-width-xl: 280px; -$colorpicker-size-width-lg: 240px; -$colorpicker-size-width-md: 150px; -$colorpicker-size-width-sm: 24px; -$colorpicker-size-width-xs: 10px; -$color-base-white: #ffffff; -$color-base-black: #000000; -$color-white-a10: rgba(255, 255, 255, 0.1); -$color-white-a30: rgba(255, 255, 255, 0.3); -$color-white-a50: rgba(255, 255, 255, 0.5); -$color-white-a70: rgba(255, 255, 255, 0.7); -$color-white-a90: rgba(255, 255, 255, 0.9); -$color-black-a10: rgba(0, 0, 0, 0.1); -$color-black-a30: rgba(0, 0, 0, 0.3); -$color-black-a50: rgba(0, 0, 0, 0.5); -$color-black-a70: rgba(0, 0, 0, 0.7); -$color-black-a90: rgba(0, 0, 0, 0.9); -$color-grey-10: #e6e6e6; -$color-grey-20: #cccccc; -$color-grey-30: #b3b3b3; -$color-grey-40: #999999; -$color-grey-50: #7f7f7f; -$color-grey-60: #666666; -$color-grey-70: #4c4c4c; -$color-grey-80: #333333; -$color-grey-90: #1a1a1a; -$color-grey-02: #f8f8f8; -$color-grey-05: #f2f2f2; -$color-grey-a01: rgba(26, 26, 26, 0.01); -$color-grey-a05: rgba(26, 26, 26, 0.05); -$color-grey-a10: rgba(26, 26, 26, 0.1); -$color-grey-a20: rgba(26, 26, 26, 0.2); -$color-grey-a30: rgba(26, 26, 26, 0.3); -$color-grey-a70: rgba(26, 26, 26, 0.7); -$color-grey-a90: rgba(26, 26, 26, 0.9); -$color-blue-10: #b3cdff; -$color-blue-20: #99bdff; -$color-blue-30: #669bff; -$color-blue-40: #337aff; -$color-blue-50: #0059ff; -$color-blue-60: #0047cc; -$color-blue-70: #003599; -$color-blue-80: #002466; -$color-blue-90: #001233; -$color-blue-05: #e6eeff; -$color-green-10: #d1eeda; -$color-green-20: #a3dcb5; -$color-green-30: #74cb91; -$color-green-40: #46b96c; -$color-green-50: #18a847; -$color-green-60: #138639; -$color-green-70: #0e652b; -$color-green-80: #0a431c; -$color-green-90: #05220e; -$color-green-05: #e8f6ed; -$color-yellow-10: #fff5d2; -$color-yellow-20: #ffeba6; -$color-yellow-30: #ffe079; -$color-yellow-40: #ffd64d; -$color-yellow-50: #ffcc20; -$color-yellow-60: #cca31a; -$color-yellow-70: #997a13; -$color-yellow-80: #66520d; -$color-yellow-90: #332906; -$color-yellow-05: #fffae9; -$color-red-10: #fad3cc; -$color-red-20: #f5a799; -$color-red-30: #ef7c66; -$color-red-40: #ea5033; -$color-red-50: #e52400; -$color-red-60: #b71d00; -$color-red-70: #891600; -$color-red-80: #5c0e00; -$color-red-90: #2e0700; -$color-red-05: #fce9e6; -$color-red-a10: rgba(229, 36, 0, 0.1); -$color-red-a30: rgba(229, 36, 0, 0.3); -$color-red-a50: rgba(229, 36, 0, 0.5); -$color-red-a70: rgba(229, 36, 0, 0.7); -$color-red-a90: rgba(229, 36, 0, 0.9); -$color-transparent: rgba(0, 0, 0, 0); -$color-primary-10: #b3cdff; -$color-primary-20: #99bdff; -$color-primary-30: #669bff; -$color-primary-40: #337aff; -$color-primary-50: #0059ff; -$color-primary-60: #0047cc; -$color-primary-70: #003599; -$color-primary-05: #e6eeff; -$color-primary-a10: rgba(0, 119, 255, 0.1); -$color-primary-a30: rgba(0, 119, 255, 0.3); -$color-primary-a50: rgba(0, 119, 255, 0.5); -$color-primary-a70: rgba(0, 119, 255, 0.7); -$color-primary-a90: rgba(0, 119, 255, 0.9); -$color-secondary-smush-general-10: #09272d; -$color-secondary-smush-general-30: #0d3b43; -$color-secondary-smush-general-50: #2dc4e0; -$color-secondary-smush-general-70: #c0edf6; -$color-secondary-smush-general-90: #eaf9fc; -$color-secondary-smush-variant-10: #09060f; -$color-secondary-smush-variant-30: #170732; -$color-secondary-smush-variant-50: #2f1d4d; -$color-secondary-smush-variant-70: #d3bef2; -$color-secondary-smush-variant-90: #f1e7ff; -$color-secondary-hummingbird-general-10: #331c0c; -$color-secondary-hummingbird-general-30: #80471e; -$color-secondary-hummingbird-general-50: #ff8e3c; -$color-secondary-hummingbird-general-70: #ffddc5; -$color-secondary-hummingbird-general-90: #fff4ec; -$color-secondary-hummingbird-variant-10: #051315; -$color-secondary-hummingbird-variant-30: #0e3135; -$color-secondary-hummingbird-variant-50: #1b6169; -$color-secondary-hummingbird-variant-70: #bbd0d2; -$color-secondary-hummingbird-variant-90: #e8eff0; -$color-secondary-smartcrawl-general-10: #2c0702; -$color-secondary-smartcrawl-general-30: #9b1907; -$color-secondary-smartcrawl-general-50: #de240a; -$color-secondary-smartcrawl-general-70: #f5bdb6; -$color-secondary-smartcrawl-general-90: #fce9e7; -$color-secondary-smartcrawl-variant-10: #2b2c2d; -$color-secondary-smartcrawl-variant-30: #979b9d; -$color-secondary-smartcrawl-variant-50: #d7dee0; -$color-secondary-smartcrawl-variant-70: #eff2f3; -$color-secondary-smartcrawl-variant-90: #f7f8f9; -$color-secondary-defender-general-10: #040404; -$color-secondary-defender-general-30: #1c1d1f; -$color-secondary-defender-general-50: #282a2c; -$color-secondary-defender-general-70: #bfbfc0; -$color-secondary-defender-general-90: #eaeaea; -$color-secondary-defender-variant-10: #190d04; -$color-secondary-defender-variant-30: #964e1a; -$color-secondary-defender-variant-50: #fa822c; -$color-secondary-defender-variant-70: #fedac0; -$color-secondary-defender-variant-90: #fff3ea; -$color-secondary-forminator-general-10: #060810; -$color-secondary-forminator-general-30: #141934; -$color-secondary-forminator-general-50: #1f2852; -$color-secondary-forminator-general-70: #bcbfcb; -$color-secondary-forminator-general-90: #e9eaee; -$color-secondary-forminator-variant-10: #2e2d28; -$color-secondary-forminator-variant-30: #747065; -$color-secondary-forminator-variant-50: #e8e0c9; -$color-secondary-forminator-variant-70: #f5f1e6; -$color-secondary-forminator-variant-90: #faf9f4; -$color-secondary-hustle-general-10: #030303; -$color-secondary-hustle-general-30: #121212; -$color-secondary-hustle-general-50: #1a1a1a; -$color-secondary-hustle-general-70: #bababa; -$color-secondary-hustle-general-90: #e8e8e8; -$color-secondary-hustle-variant-10: #4c3810; -$color-secondary-hustle-variant-30: #b38224; -$color-secondary-hustle-variant-50: #ffba34; -$color-secondary-hustle-variant-70: #ffeac2; -$color-secondary-hustle-variant-90: #fff8eb; -$color-secondary-beehive-general-10: #000c22; -$color-secondary-beehive-general-30: #012365; -$color-secondary-beehive-general-50: #013aa9; -$color-secondary-beehive-general-70: #b3c4e5; -$color-secondary-beehive-general-90: #e6ebf6; -$color-secondary-beehive-variant-10: #332a13; -$color-secondary-beehive-variant-30: #7f6930; -$color-secondary-beehive-variant-50: #fed260; -$color-secondary-beehive-variant-70: #fff2cf; -$color-secondary-beehive-variant-90: #fffbef; -$color-secondary-branda-general-10: #331a1a; -$color-secondary-branda-general-30: #994d4f; -$color-secondary-branda-general-50: #ff8184; -$color-secondary-branda-general-70: #ffd9da; -$color-secondary-branda-general-90: #fff2f3; -$color-secondary-branda-variant-10: #030303; -$color-secondary-branda-variant-30: #121212; -$color-secondary-branda-variant-50: #1a1a1a; -$color-secondary-branda-variant-70: #bababa; -$color-secondary-branda-variant-90: #e8e8e8; -$color-secondary-snapshot-general-10: #0e1a30; -$color-secondary-snapshot-general-30: #15294d; -$color-secondary-snapshot-general-50: #1a325e; -$color-secondary-snapshot-general-70: #87a6de; -$color-secondary-snapshot-general-90: #d7e1f4; -$color-secondary-snapshot-variant-10: #020202; -$color-secondary-snapshot-variant-30: #060706; -$color-secondary-snapshot-variant-50: #141613; -$color-secondary-snapshot-variant-70: #b9b9b8; -$color-secondary-snapshot-variant-90: #e8e8e7; -$color-secondary-dashboard-general-10: #07142c; -$color-secondary-dashboard-general-30: #0d2148; -$color-secondary-dashboard-general-50: #102c60; -$color-secondary-dashboard-general-70: #7ca2e9; -$color-secondary-dashboard-general-90: #d3e0f8; -$color-secondary-dashboard-variant-10: #0b1e28; -$color-secondary-dashboard-variant-30: #215978; -$color-secondary-dashboard-variant-50: #3793c7; -$color-secondary-dashboard-variant-70: #87bfde; -$color-secondary-dashboard-variant-90: #d7eaf4; -$color-secondary-shipper-general-10: #1a1221; -$color-secondary-shipper-general-30: #4f3663; -$color-secondary-shipper-general-50: #7b5499; -$color-secondary-shipper-general-70: #b59cc9; -$color-secondary-shipper-general-90: #e6deed; -$color-secondary-shipper-variant-10: #04252f; -$color-secondary-shipper-variant-30: #0d6e8c; -$color-secondary-shipper-variant-50: #7dd7f3; -$color-secondary-shipper-variant-70: #b9e9f9; -$color-secondary-shipper-variant-90: #e8f8fd; -$color-secondary-ivt-general-10: #092a09; -$color-secondary-ivt-general-30: #1c7e1b; -$color-secondary-ivt-general-50: #65de63; -$color-secondary-ivt-general-70: #c1f2c0; -$color-secondary-ivt-general-90: #eafbea; -$color-secondary-ivt-variant-10: #0d2326; -$color-secondary-ivt-variant-30: #286871; -$color-secondary-ivt-variant-50: #368c98; -$color-secondary-ivt-variant-70: #8eced7; -$color-secondary-ivt-variant-90: #d9eff2; -$color-secondary-blc-general-10: #00332c; -$color-secondary-blc-general-30: #009984; -$color-secondary-blc-general-50: #00bfa5; -$color-secondary-blc-general-70: #c1eee8; -$color-secondary-blc-general-90: #e8faf8; -$color-secondary-blc-variant-10: #151b1e; -$color-secondary-blc-variant-30: #2a363c; -$color-secondary-blc-variant-50: #455a64; -$color-secondary-blc-variant-70: #a4b7c1; -$color-secondary-blc-variant-90: #e1e7ea; -$color-secondary-hub-general-10: #470905; -$color-secondary-hub-general-30: #a7160c; -$color-secondary-hub-general-50: #f36056; -$color-secondary-hub-general-70: #f8a5a0; -$color-secondary-hub-general-90: #fcd2cf; -$color-secondary-hub-variant-10: #04222f; -$color-secondary-hub-variant-30: #07364a; -$color-secondary-hub-variant-50: #0a4c68; -$color-secondary-hub-variant-70: #73ccf2; -$color-secondary-hub-variant-90: #d0eefb; -$color-shadow-light: rgba(115, 115, 115, 0.05); -$color-shadow-default: rgba(115, 115, 115, 0.08); -$color-shadow-dark: rgba(115, 115, 115, 0.1); -$spacing-2xs: 1px; -$spacing-xs: 2px; -$spacing-sm: 4px; -$spacing-md: 8px; -$spacing-lg: 16px; -$spacing-xl: 24px; -$spacing-2xl: 32px; -$spacing-default: 12px; -$shadow-offset-2xs: 1px; -$shadow-offset-xs: 2px; -$shadow-offset-sm: 4px; -$shadow-offset-md: 8px; -$shadow-offset-lg: 12px; -$shadow-offset-xl: 16px; -$shadow-offset-2xl: 20px; -$shadow-offset-default: 6px; -$border-width-xs: 0.5px; -$border-width-sm: 1px; -$border-width-md: 2px; -$border-width-xl: 4px; -$border-radius-xs: 3px; -$border-radius-sm: 4px; -$border-radius-md: 4px*2; -$border-radius-lg: 4px*3; -$border-radius-xl: 4px*4; -$border-radius-2xl: 4px*5; -$border-radius-default: 6px; -$font-weight-sm: 400; -$font-weight-md: 500; -$font-weight-lg: 700; -$font-weight-default: 400; -$font-size-2xs: 12px; -$font-size-xs: 13px; -$font-size-sm: 14px; -$font-size-md: 16px; -$font-size-lg: 24px; -$font-size-xl: 32px; -$font-size-2xl: 40px; -$font-size-default: 16px-1px; -$font-height-2xs: 16px; -$font-height-xs: 20px; -$font-height-sm: 24px; -$font-height-md: 32px; -$font-height-lg: 40px; -$font-height-xl: 48px; -$font-height-default: 24px-2px; -$font-spacing-sm: 0.1px; -$font-spacing-md: 0.2px; -$font-spacing-lg: 0.5px; -$font-spacing-2xl: 1px; -$font-spacing-default: 0px; -$font-family-default: "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; -$font-family-code: "Roboto Mono", monospace; -$dashboard-size-width-lg: 440px; -$datepicker-font-size: 14px-1px; -$datepicker-font-height-sm: 16px; -$datepicker-spacing-default: 2px; -$datepicker-spacing-xs: 5px; -$datepicker-spacing-sm: 10px; -$datepicker-spacing-md: 12px; -$datepicker-spacing-lg: 15px; -$datepicker-size-width-sm: 32px; -$datepicker-size-width-md: 40px; -$datepicker-size-width-lg: 280px; -$datepicker-size-height-sm: 32px; -$datepicker-size-height-lg: 248px; -$datepicker-border-radius-lg: 20px; -$drawer-size-sm: 320px; -$drawer-size-lg: 520px; -$dropdown-size-width-2xs: 12px; -$dropdown-size-width-sm: 160px; -$dropdown-size-width-md: 240px; -$dropdown-size-width-lg: 280px; -$dropdown-size-height-3xs: 10px; -$dropdown-size-height-2xs: 12px; -$dropdown-size-height-md: 225px; -$dropdown-position-xs: 7px; -$dropdown-position-sm: 10px; -$dropdown-position-md: 20px; -$dropdown-spacing-default: 12px; -$emptystate-spacing-sm: 24px; -$emptystate-spacing-md: 32px; -$emptystate-spacing-lg: 64px; -$fieldlist-spacing-md: 20px; -$footer-size-width-md: 93px; -$footer-spacing-md: 45px; -$grid-spacing-sm: 8px * 2; -$grid-spacing-md: 8px * 3; -$grid-spacing-lg: 8px * 4; -$grid-breakpoint-sm: 600px; -$grid-breakpoint-md: 1024px; -$grid-breakpoint-lg: 1200px; -$grid-breakpoint-xl: 1600px; -$grid-columns: 12; -$icon-size-xs: 12px; -$icon-size-sm: 16px; -$icon-size-md: 24px; -$icon-size-lg: 48px; -$icon-size-xl: 64px; -$input-font-color-default: #1a1a1a; -$input-font-color-placeholder: #666666; -$input-font-color-disabled: #b3b3b3; -$input-font-size-sm: 12px; -$input-font-size-md: 16px-1px; -$input-font-height-sm: 16px; -$input-font-height-md: 24px; -$input-spacing-padding-vertical-sm: 8px; -$input-spacing-padding-vertical-md: 8px; -$input-spacing-padding-horizontal-sm: 4px*3; -$input-spacing-padding-horizontal-md: 16px; -$input-spacing-lg: 44px; -$input-border-width-sm: 1px; -$input-border-width-md: 2px; -$input-border-style: solid; -$input-border-color-default: #b3b3b3; -$input-border-color-active: #0059ff; -$input-border-color-error: #e52400; -$input-border-color-disabled: #f2f2f2; -$input-border-color-readonly: #f8f8f8; -$input-border-radius: 4px; -$input-bg-default: #ffffff; -$input-bg-disabled: #f2f2f2; -$input-bg-readonly: #f8f8f8; -$integration-disabled-opacity: 0.5; -$layout-content-width: 1600px; -$layout-spacing-main-sm: -20px; -$layout-spacing-main-md: -10px; -$layout-spacing-content-sm: 8px*2; -$layout-spacing-content-md: 8px*3; -$layout-spacing-content-lg: 8px*4; -$link-outline-color: #0059ff; -$link-outline-style: solid; -$link-outline-size: 1px; -$menu-spacing-horizontal: 24px; -$modal-spacing-lg: 40px; -$modal-border-radius: 24px; -$modal-size-width-xs: 64px; -$modal-size-width-md: 480px; -$modal-size-width-lg: 720px; -$modal-size-width-xl: 1024px; -$modal-size-height-xs: 64px; -$navigation-border-radius-md: 10px; -$navigation-size-width-md: 32px; -$navigation-size-width-lg: 48px; -$navigation-size-height-md: 32px; -$navigation-size-height-lg: 48px; -$navigation-spacing-sm: 12px; -$navigation-spacing-md: 20px; -$notification-size-width-md: 360px; -$notification-size-width-lg: 640px; -$notification-spacing-md: 10px; -$notification-font-color: #4c4c4c; -$pagination-size-width-md: 32px; -$pagination-size-height-md: 32px; -$password-font-size-xs: 10px; -$password-font-size-sm: 14px-1px; -$password-font-size-md: 16px; -$password-font-size-lg: 24px; -$password-font-height-xs: 8px; -$password-font-height-sm: 16px; -$password-padding: 4px; -$password-input-padding-sm: 40px; -$password-input-padding-md: 60px; -$popover-size-height-md: 180px; -$popover-size-width-md: 300px; -$popover-size-width-lg: 360px; -$popover-spacing-sm: 3px; -$popover-spacing-md: 6px; -$popover-spacing-xl: 14px; -$popover-spacing-2xl: 15px; -$progress-border-radius-md: 10px; -$progress-size-height-xs: 4px; -$progress-size-height-sm: 8px; -$progress-size-height-md: 16px; -$progress-size-width-lg: 140px; -$radio-border-radius-sm: 6px; -$radio-spacing-sm: 24px; -$radio-spacing-md: 28px; -$radio-size-xs: 6px; -$radio-size-sm: 8px; -$radio-size-md: 16px; -$radio-size-lg: 20px; -$score-font-size-sm: 14px; -$score-font-size-md: 24px; -$score-font-size-lg: 40px; -$score-font-height-md: 16px; -$score-font-height-lg: 48px; -$score-font-weight-normal: 500; -$score-font-weight-bold: 700; -$score-color-black: #1a1a1a; -$score-color-green: #18a847; -$score-color-grey: #f2f2f2; -$score-color-yellow: #ffcc20; -$score-color-red: #e52400; -$score-color-blue: #0059ff; -$score-spacing-vertical: 8px; -$score-size-width: 90px; -$score-size-height-sm: 32px; -$score-size-height-lg: 150px; -$score-stroke-lg: 10px; -$search-size-height-md: 144px; -$segmented-border-radius: 4px; -$segmented-border-width: 1px; -$segmented-border-color: #e6e6e6; -$segmented-font-size: 14px-1px; -$segmented-font-weight: 500; -$segmented-spacing-horizontal: 16px; -$segmented-spacing-vertical: 8px; -$segmented-size-height: 42px; -$select-spacing-2xs: 6px; -$select-spacing-xs: 7px; -$select-spacing-sm: 9px; -$select-spacing-md: 10px; -$select-spacing-lg: 20px; -$select-spacing-xl: 34px; -$select-spacing-2xl: 37px; -$select-spacing-3xl: 55px; -$select-spacing-4xl: 60px; -$select-size-sm: 18px; -$select-size-md: 32px; -$select-size-xl: 280px; -$select-font-size-xs: 10px; -$select-font-size-sm: 11px; -$select-font-size-lg: 20px; -$selector-spacing-xs: 3px; -$selector-spacing-lg: 12px; -$selector-border-width: 37px; -$selector-size-width-xs: 32px; -$selector-size-width-sm: 72px; -$selector-size-width-md: 130px; -$selector-size-width-lg: 208px; -$sidebar-spacing-md: 12px; -$sidebar-size-width-md: 260px; -$skeleton-background: linear-gradient(93.77deg, $color-grey-10 -10.31%, #f5f5f5 -4.92%); -$skeleton-height: 18px; -$skeleton-animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -$spinner-size-height-lg: 36px; -$spinner-size-height-md: 18px; -$spinner-size-height-xs: 8px; -$spinner-size-width-lg: 36px; -$spinner-size-width-md: 18px; -$spinner-size-width-xs: 8px; -$spinner-stroke-width-md: 8px; -$spinner-stroke-width-lg: 12px; -$spinner-stroke-dashoffset: 200; -$spinner-stroke-dasharray: 276.4608; -$summary-size-height-md: 24px; -$table-width-xs: 100px; -$table-width-sm: 216px; -$table-width-md: 320px; -$table-width-lg: 380px; -$table-height-sm: 60px; -$table-spacing-sm: 6px; -$table-font-size-md: 18px; -$table-font-height-md: 28px; -$tabs-border-width: 1px; -$tabs-border-color: #e6e6e6; -$tabs-border-radius: 4px; -$tabs-shadow-dark: rgba(115, 115, 115, 0.05); -$tabs-shadow-medium: rgba(115, 115, 115, 0.03); -$tabs-shadow-light: rgba(115, 115, 115, 0.02); -$tabs-shadow-offset-sm: 0px 2px 5px 0px; -$tabs-shadow-offset-md: 0px 8px 17px 0px; -$tabs-shadow-offset-lg: 0px 36px 80px 0px; -$tabs-navitem-font-size: 16px-1px; -$tabs-navitem-font-height: 24px; -$tabs-navitem-font-weight: 500; -$tabs-navitem-font-color: #4c4c4c; -$tabs-navitem-spacing-vertical: 26px; -$tabs-navitem-spacing-horizontal: 16px; -$tabs-navitem-gap: 4px; -$tabs-navitem-border-width: 4px; -$tabs-panel-spacing: 16px*2; -$tabs-color-active: #0059ff; -$tabs-color-hover: #0059ff; -$tabs-color-focus-border-color: #0059ff; -$tabs-color-focus-color: #1a1a1a; -$tabs-color-focus-background: #b3cdff; -$tabs-color-disabled: #b3b3b3; -$tabs-arrow-size-width: 48px; -$tabs-arrow-size-height: 100%; -$tabs-arrow-color: #b3b3b3; -$tabs-arrow-hover-color: #1a1a1a; -$tabs-arrow-hover-background: #ffffff; -$tabs-arrow-left-background: linear-gradient(90deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%); -$tabs-arrow-right-background: linear-gradient(270deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%); -$tag-font-size-sm: 10px; -$tag-font-size-md: 12px; -$tag-font-spacing-sm: -0.1px; -$tag-font-spacing-md: 0px; -$tag-font-height-sm: 12px; -$tag-font-height-md: 16px; -$tag-font-weight-sm: 700; -$tag-font-weight-md: 500; -$tag-margin-vertical: 0; -$tag-margin-horizontal: 4px; -$tag-padding-vertical-sm: 1px; -$tag-padding-vertical-md: 4px-1px; -$tag-padding-horizontal-sm: 8px-1px; -$tag-padding-horizontal-md: 8px-1px; -$tag-border-radius: 12px; -$tag-border-width: 1px; -$tag-border-style: solid; -$tag-font-size: 12px - 2px; -$tag-font-spacing: 0px; -$tag-font-height: 16px - 4px; -$tag-font-weight: 700; -$toggle-spacing-xs: 2px; -$toggle-spacing-lg: 48px; -$toggle-size-width-sm: 14px; -$toggle-size-width-md: 36px; -$toggle-size-height-sm: 14px; -$toggle-size-height-md: 20px; -$toggle-border-radius: 10px; -$tooltip-font-size: 14px-1px; -$tooltip-font-spacing: normal; -$tooltip-font-height: 24px; -$tooltip-spacing-padding-vertical: 8px; -$tooltip-spacing-padding-horizontal: 16px-4px; -$tooltip-spacing-margin: 16px-6px; -$tooltip-size-width-sm: 95px; -$tooltip-size-width-md: 120px; -$treeview-size-md: 20px; -$heading-one-font-size: 40px; -$heading-one-font-height: 48px; -$heading-one-font-spacing: 0px; -$heading-two-font-size: 32px; -$heading-two-font-height: 40px; -$heading-two-font-spacing: 0px; -$heading-font-weight: 700; -$heading-three-font-size: 24px; -$heading-three-font-height: 32px; -$heading-three-font-spacing: 0px; -$heading-four-font-size: 16px + 2px; -$heading-four-font-height: 24px + 4px; -$heading-four-font-spacing: 0px; -$heading-five-font-size: 16px; -$heading-five-font-height: 24px; -$heading-five-font-weight: 500; -$heading-five-font-spacing: 0px; -$body-md-font-size: 16px-1px; -$body-sm-font-size: 16px-1px - 2px; -$body-sm-font-height: 24px - 4px; -$body-font-spacing: 0px; -$body-font-weight: 400; -$body-font-height: 24px; -$label-font-size: 16px - 1px; -$label-font-height: 24px; -$label-font-weight: 500; -$label-font-spacing: 0px; -$helper-font-size: 14px - 1px; -$helper-font-height: 24px - 4px; -$helper-font-weight: 400; -$helper-font-spacing: 0px; -$overline-font-size: 14px - 1px; -$overline-font-spacing: 0.1px; -$overline-font-height: 16px + 4px; -$overline-font-weight: 500; -$uploader-size-width: 240px; -$uploader-border-width: 1px; -$uploader-border-color: #e6e6e6; -$uploader-border-radius: 4px; -$uploader-spacing-horizontal: 16px-4px; -$uploader-spacing-vertical: 8px; -$uploader-icon-spacing-horizontal: 4px; -$uploader-icon-margin-horizontal: 10px; -$uploader-preview-size: 37px; -$uploader-preview-spacing: 2px; -$upsell-border-radius-md: 14px; -$upsell-spacing-lg: 40px; diff --git a/packages/assets/css/src/tokens/summary.json b/packages/assets/css/src/tokens/summary.json index a1fd924ba..6b3a116bf 100644 --- a/packages/assets/css/src/tokens/summary.json +++ b/packages/assets/css/src/tokens/summary.json @@ -1,12 +1,50 @@ { - "summary": { - "size": { - "height": { - "md": { - "value": "24px", - "type": "sizing" - } - } - } - } -} \ No newline at end of file + "summary": { + "size": { + "height": { + "md": { + "value": "24px", + "type": "sizing" + } + } + }, + "content": { + "padding": { + "lg": { + "value": "24px", + "type": "padding" + }, + "md": { + "value": "16px", + "type": "padding" + }, + "sm": { + "value": "12px", + "type": "padding" + } + }, + "background": { + "value": "{color.extended.neutral.100}", + "type": "background" + }, + "border": { + "radius": { + "value": "{border.radius.md}", + "type": "radius" + } + } + }, + "row": { + "gap": { + "md": { + "value": "16px", + "type": "gap" + }, + "sm": { + "value": "8px", + "type": "gap" + } + } + } + } +} diff --git a/packages/ui/summary-box/src/index.ts b/packages/ui/summary-box/src/index.ts index eba62cdda..c1bad259c 100644 --- a/packages/ui/summary-box/src/index.ts +++ b/packages/ui/summary-box/src/index.ts @@ -3,5 +3,7 @@ export { SummaryBox } from "./summary-box" export { SummaryBoxBody } from "./summary-box-body" export { SummaryBoxItem } from "./summary-box-item" export { SummaryFooterBody } from "./summary-box-footer" +export { SummaryBoxContent } from "./summary-box-content" +export { SummaryBoxRow } from "./summary-box-row" export type { SummaryBoxProps } from "./summary-box.types" diff --git a/packages/ui/summary-box/src/summary-box-content.tsx b/packages/ui/summary-box/src/summary-box-content.tsx new file mode 100644 index 000000000..e8f0a63aa --- /dev/null +++ b/packages/ui/summary-box/src/summary-box-content.tsx @@ -0,0 +1,46 @@ +import React from "react" + +import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils" + +import { SummaryBoxContentProps } from "./summary-box.types" +import { useStyles } from "@wpmudev/sui-hooks" + +/** + * SummaryBox Content Component + * + * Content for the left box with a white background + * + * @param {Object} props - The props for the SummaryBoxContent component. + * @param {string} props.className - Additional CSS classes to apply to the component. + * @param {string} props.span - The space the content should take either half or full + * @param {string} props.padding - The space the content should take either half or full + * @param {React.ReactNode} props.children - Optional additional content within the summary box. + * @param props._htmlProps + * @param props._style + * @return {JSX.Element} The SummaryBoxContent component. + */ +export const SummaryBoxContent: React.FC = ({ + className, + children, + span = "half", + padding = "lg", + _style, + _htmlProps, +}) => { + const { suiInlineClassname } = useStyles(_style, className) + + const classNames = generateCN( + "sui-summary-box__content", + { + fluid: span === "full", + [padding]: !!padding && padding !== "lg", + }, + suiInlineClassname, + ) + + return ( +
+ {children} +
+ ) +} diff --git a/packages/ui/summary-box/src/summary-box-row.tsx b/packages/ui/summary-box/src/summary-box-row.tsx new file mode 100644 index 000000000..a59c46cb1 --- /dev/null +++ b/packages/ui/summary-box/src/summary-box-row.tsx @@ -0,0 +1,34 @@ +import React from "react" + +import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils" +import { SummaryBoxRowProps } from "./summary-box.types" +import { useStyles } from "@wpmudev/sui-hooks" + +/** + * SummaryBoxRow Component + * + * To handle a layout of multiple SummaryBoxContent component + * + * @param {Object} props - The props for the SummaryBoxRow component. + * @param {string} props.className - Additional CSS classes to apply to the component. + * @param {React.ReactNode} props.children - Optional additional content within the summary box. + * @param props._htmlProps + * @param props._style + * @return {JSX.Element} The SummaryBoxRow component. + */ +export const SummaryBoxRow: React.FC = ({ + className, + children, + _style, + _htmlProps, +}) => { + const { suiInlineClassname } = useStyles(_style, className) + + const classNames = generateCN("sui-summary-box__row", {}, suiInlineClassname) + + return ( +
+ {children} +
+ ) +} diff --git a/packages/ui/summary-box/src/summary-box.types.ts b/packages/ui/summary-box/src/summary-box.types.ts index 4716eacdb..7810b2d82 100644 --- a/packages/ui/summary-box/src/summary-box.types.ts +++ b/packages/ui/summary-box/src/summary-box.types.ts @@ -131,9 +131,55 @@ interface SummaryFooterBodyProps children?: React.ReactNode } +/** + * SummaryBoxContentProps Interface + * + * Represents the props for the SummaryBox component. + */ +interface SummaryBoxContentProps + extends SuiHTMLAttributes>, + SuiStyleType { + /** + * Additional CSS class names for the summary box content + */ + className?: string + /** + * Content to be displayed inside the summary box content + */ + children?: React.ReactNode + /** + * Whether for the content box to have full width or half + */ + span?: "half" | "full" + /** + * Padding size of the Box + */ + padding?: "sm" | "md" | "lg" +} + +/** + * SummaryBoxContentProps Interface + * + * Represents the props for the SummaryBox component. + */ +interface SummaryBoxRowProps + extends SuiHTMLAttributes>, + SuiStyleType { + /** + * Additional CSS class names for the summary box row + */ + className?: string + /** + * Content to be displayed inside the summary box row + */ + children?: React.ReactNode +} + export type { SummaryBoxProps, SummaryBoxBodyProps, SummaryBoxItemProps, SummaryFooterBodyProps, + SummaryBoxContentProps, + SummaryBoxRowProps, } diff --git a/packages/ui/summary-box/stories/summary-box.stories.tsx b/packages/ui/summary-box/stories/summary-box.stories.tsx index 631a127c9..32c2d5a46 100644 --- a/packages/ui/summary-box/stories/summary-box.stories.tsx +++ b/packages/ui/summary-box/stories/summary-box.stories.tsx @@ -16,13 +16,13 @@ import { SummaryBoxBody, SummaryBoxItem, SummaryFooterBody, + SummaryBoxContent, + SummaryBoxRow, } from "../src" import { IconsName } from "@wpmudev/sui-icons" -// Build "SummaryBox" story. -const SummaryBox = ({ ...props }) => { +const SummaryBoxStory = (props: Record) => { const [mode, setMode] = useState("desktop") - return (
@@ -92,9 +92,7 @@ const SummaryBox = ({ ...props }) => { />, ]} > - -

Desktop Site Performance Score

-

Last Checked : May 14, 2023 at 08:24am

+ {props.children} { ) } +// Build "SummaryBox" story. +const SummaryBox = (props: Record) => { + const { layout } = props + + const renderLayout = () => { + if ("basic" === layout) { + return ( + + +

Desktop Site Performance Score

+

Last Checked : May 14, 2023 at 08:24am

+ + ) + } + + if ("stack" === layout) { + return ( + + + +

Desktop Site Performance Score

+

Last Checked : May 14, 2023 at 08:24am

+ + + Last refresh: May 14, 2023 at 08:24 am + + + ) + } + + if ("grid" === layout) { + return ( + + +

Custom Heading

+

Custom Sub Heading

+ + +

Custom Heading

+

Custom Sub Heading

+ + + Last refresh: May 14, 2023 at 08:24 am + + + ) + } + } + + return {renderLayout()} +} + // Set story arguments. SummaryBox.args = { icon: "Performance", title: "Performance Summary", hideMobileIcon: true, + layout: "basic", } // Set controls for story arguments. @@ -149,6 +200,13 @@ SummaryBox.argTypes = { name: "Hide icon on mobile", control: "boolean", }, + layout: { + name: "Layout", + options: ["basic", "stack", "grid"], + control: { + type: "select", + }, + }, } // Configure default options. diff --git a/packages/ui/summary-box/stories/tabs/TabCode.mdx b/packages/ui/summary-box/stories/tabs/TabCode.mdx index d276d8300..e23360756 100644 --- a/packages/ui/summary-box/stories/tabs/TabCode.mdx +++ b/packages/ui/summary-box/stories/tabs/TabCode.mdx @@ -1,3 +1,4 @@ +import { Fragment } from "react" import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSection, CommonPropsNotice } from "@wpmudev/sui-docs" @@ -141,6 +142,63 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec +
+

+ This component represents an content white box and it can be nested under the SummaryFooterBody component or SummaryBoxRow component +

+ + +

+ The size of padding +

+

+ Allowed values + + lg This is the default value} /> + md For slightly smaller padding} /> + +

+ + +

+ When nested under the SummaryBoxRow component it will have 50% by default, to make it take full width use full instead +

+

+ Allowed values + + half This is the default value, component will take 50% width} /> + full For the component to take 100% width} /> + +

+ + +

+ additional className(s) for further styling +

+ + +

+ For nested children elements +

+ +
+ +
+

+ Use this component to create double columns layout using SummaryBoxContent component for child elements +

+ +

+ additional className(s) for further styling +

+ + +

+ For nested children elements +

+ +
+ diff --git a/packages/ui/summary-box/stories/tabs/TabExamples.mdx b/packages/ui/summary-box/stories/tabs/TabExamples.mdx index 8397bc86e..114cc026e 100644 --- a/packages/ui/summary-box/stories/tabs/TabExamples.mdx +++ b/packages/ui/summary-box/stories/tabs/TabExamples.mdx @@ -4,6 +4,8 @@ import { SummaryBoxBody, SummaryBoxItem, SummaryFooterBody, + SummaryBoxContent, + SummaryBoxRow } from "../../src" import { SegmentedControl, @@ -15,156 +17,356 @@ import { Score } from "@wpmudev/sui-score" import dedent from "dedent" -export const sampleCode = dedent` +export const basicCode = dedent` import { SummaryBox, SummaryBoxBody, SummaryBoxItem, SummaryFooterBody } from "@wpmudev/sui-summary-box" +import { SegmentedControl, SegmentedControlButton } from "@wpmudev/sui-segmented-control" import { Button } from "@wpmudev/sui-button" import { Notification } from "@wpmudev/sui-notification" import { Score } from "@wpmudev/sui-score" -export const SuiSummaryBox = () => { - return ( - - , - , - { + return ( + + + + + , +
+ +
+ + } + secondaryActions={ + , + } + > + + + + + <> + } + > + + +

Desktop Site Performance Score

+

Last Checked : May 14, 2023 at 08:24am

+ + + + + Your site performs better than 90 % sites out there. To boost the + performance further, check the Pending Audits + + } + /> + + + ) + } +` -export const versatileCode = dedent` +export const stackCode = dedent` import { SummaryBox, SummaryBoxBody, SummaryBoxItem, SummaryFooterBody } from "@wpmudev/sui-summary-box" import { SegmentedControl, SegmentedControlButton } from "@wpmudev/sui-segmented-control" import { Button } from "@wpmudev/sui-button" import { Notification } from "@wpmudev/sui-notification" import { Score } from "@wpmudev/sui-score" -export const SuiSummaryBox = () => { - return ( - - - - , -
+ export const SuiSummaryBox = () => { + return ( + + + + + , +
+ +
+ + } + secondaryActions={ -
, - ]} - secondaryActions={[ - , - ]} - > - , - , - + + +

Desktop Site Performance Score

+

Last Checked : May 14, 2023 at 08:24am

+ + + Last refresh: May 14, 2023 at 08:24 am + + + + + + Your site performs better than 90 % sites out there. To boost the + performance further, check the Pending Audits + + } + /> + + + ) + } +` + + +export const gridCode = dedent` +import { SummaryBox, SummaryBoxBody, SummaryBoxItem, SummaryFooterBody } from "@wpmudev/sui-summary-box" +import { SegmentedControl, SegmentedControlButton } from "@wpmudev/sui-segmented-control" +import { Button } from "@wpmudev/sui-button" +import { Notification } from "@wpmudev/sui-notification" +import { Score } from "@wpmudev/sui-score" + + export const SuiSummaryBox = () => { + return ( + + + + + , +
+ +
+ + } + secondaryActions={ + , + } + > + + + + + <> + } + > + + +

Custom Heading

+

Custom Sub Heading

+ + +

Custom Heading

+

Custom Sub Heading

+ + + Last refresh: May 14, 2023 at 08:24 am + + + + + + Your site performs better than 90 % sites out there. To boost the + performance further, check the Pending Audits + + } + /> + + + ) + } +` -
-

- This is a basic example of the Summary box component that shows its - structure in a clear way -

+
+

This is an example of the Summary Box with a rich content

+ + + , +
+ +
, + ]} + secondaryActions={[ + , + ]} > { title="Assets Optimization" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry." actionIcon="CheckAlt" + actionTitle="10.33%" + actionState="success" />, ]} > - The body content + + +

Desktop Site Performance Score

+

Last Checked : May 14, 2023 at 08:24am

+ - Footer Content + + + Your site performs better than 90 % sites out there. To boost the + performance further, check the Pending Audits + + } + /> + - {sampleCode} + {basicCode}
-
-

This is an example of the Summary Box with a richer content

+
+

This is an example of stacked layout

{ title="Browser Caching" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry." actionIcon="InfoAlt" - actionIconColor="success" + actionState="green" />, , , ]} > - -

Desktop Site Performance Score

-

Last Checked : May 14, 2023 at 08:24am

+ + + +

Desktop Site Performance Score

+

Last Checked : May 14, 2023 at 08:24am

+ + + Last refresh: May 14, 2023 at 08:24 am + + { - {versatileCode} + {stackCode}
+ + + +
+

This is an example of the grid layout

+ + + + + , +
+ +
, + ]} + secondaryActions={[ + , + ]} + > + , + , + , + ]} + > + + +

Custom Heading

+

Custom Sub Heading

+ + +

Custom Heading

+

Custom Sub Heading

+ + + Last refresh: May 14, 2023 at 08:24 am + + + + + + Your site performs better than 90 % sites out there. To boost the + performance further, check the Pending Audits + + } + /> + + + + {gridCode} +
\ No newline at end of file