Skip to content

Commit

Permalink
Move big sky button from nav-container to filters container (#97165)
Browse files Browse the repository at this point in the history 
* Move big buttons from nav-container to setup-container

* update big sky button layout for the new designs

* send impression event only when button is visible

* adjusted the button size and alignment

* minor improvements

* fix merge conflict issues
  • Loading branch information
@madhusudhand
madhusudhand authored Dec 11, 2024
1 parent e03cc69 commit 287fe55
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 56 deletions.
26 changes: 19 additions & 7 deletions client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,32 @@
$gray-100: #101517;
$gray-60: #50575e;
$design-button-primary-color: rgb(17, 122, 201);
$container-padding-small: 20px;
$container-padding-large: 48px;

.design-setup {
.step-container {
padding-inline-start: 20px;
padding-inline-end: 20px;
padding-inline-start: $container-padding-small;
padding-inline-end: $container-padding-small;
max-width: 1440px;

.step-container__content {
margin-top: 32px;
@include break-small {
padding-inline-start: $container-padding-large;
padding-inline-end: $container-padding-large;
}

@include break-small {
padding-inline-start: 48px;
padding-inline-end: 48px;
.setup-container__big-sky-container {
position: absolute;
top: $container-padding-small;
right: $container-padding-small;

@include break-small {
display: none;
}
}

.step-container__content {
margin-top: 32px;
}
}

Expand Down
69 changes: 32 additions & 37 deletions ...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -926,51 +926,47 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
categorization.selections = [ 'blog' ];
}

const stepContent = (
<UnifiedDesignPicker
designs={ designs }
locale={ locale }
onPreview={ previewDesign }
onChangeVariation={ onChangeVariation }
onViewAllDesigns={ trackAllDesignsView }
heading={ heading }
categorization={ categorization }
isPremiumThemeAvailable={ isPremiumThemeAvailable }
shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
getBadge={ getBadge }
oldHighResImageLoading={ oldHighResImageLoading }
siteActiveTheme={ siteActiveTheme?.[ 0 ]?.stylesheet ?? null }
showActiveThemeBadge={ intent !== 'build' }
isTierFilterEnabled={ isGoalCentricFeature }
isMultiFilterEnabled={ isGoalCentricFeature }
onChangeTier={ handleChangeTier }
/>
);
function onDesignWithAI() {
recordTracksEvent( 'calypso_design_picker_big_sky_button_click', commonFilterProperties );
navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site?.ID }` );
}

const bigSkyButtons = (
const bigSkyButton = isBigSkyEligible && (
<>
{ isBigSkyEligible && (
<Button
onClick={ () => {
navigate(
`/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site.ID }`
);
recordTracksEvent(
'calypso_design_picker_big_sky_button_click',
commonFilterProperties
);
} }
>
{ translate( 'Create yours with AI' ) }
</Button>
) }
<Button onClick={ onDesignWithAI }>{ translate( 'Design with AI' ) }</Button>
<TrackComponentView
eventName="calypso_design_picker_big_sky_button_impression"
eventProperties={ commonFilterProperties }
/>
</>
);

const stepContent = (
<>
<div className="setup-container__big-sky-container">{ bigSkyButton }</div>
<UnifiedDesignPicker
designs={ designs }
locale={ locale }
onDesignWithAI={ onDesignWithAI }
onPreview={ previewDesign }
onChangeVariation={ onChangeVariation }
onViewAllDesigns={ trackAllDesignsView }
heading={ heading }
categorization={ categorization }
isPremiumThemeAvailable={ isPremiumThemeAvailable }
shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
getBadge={ getBadge }
oldHighResImageLoading={ oldHighResImageLoading }
siteActiveTheme={ siteActiveTheme?.[ 0 ]?.stylesheet ?? null }
showActiveThemeBadge={ intent !== 'build' }
isTierFilterEnabled={ isGoalCentricFeature }
isMultiFilterEnabled={ isGoalCentricFeature }
onChangeTier={ handleChangeTier }
isBigSkyEligible={ isBigSkyEligible }
/>
</>
);

return (
<StepContainer
stepName={ STEP_NAME }
Expand All @@ -979,7 +975,6 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
hideFormattedHeader
hideSkip
backLabelText={ translate( 'Back' ) }
customizedActionButtons={ bigSkyButtons }
stepContent={ stepContent }
recordTracksEvent={ recordStepContainerTracksEvent }
goNext={ handleSubmit }
Expand Down
25 changes: 19 additions & 6 deletions packages/design-picker/src/components/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,13 @@
&.grow {
flex-grow: 1;
}

.design-picker__category-group-content {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
}
}

.design-picker__category-group-label {
Expand All @@ -49,16 +56,22 @@
font-weight: 500;
}

.design-picker__tier-filter {
height: 40px; // match button height
margin-bottom: 6px;
}

.design-picker__design-your-own-button {
flex-shrink: 0;
height: 32px;
line-height: 14px;
margin-top: 8px;
margin-bottom: 8px;
margin-bottom: 6px;
}

.design-picker__tier-filter {
height: 48px; // match button height
.design-picker__design-with-ai {
display: none;

@include break-small {
display: block;
}
}

.design-picker__design-your-own-button-without-categories {
Expand Down
34 changes: 28 additions & 6 deletions packages/design-picker/src/components/unified-design-picker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { recordTracksEvent } from '@automattic/calypso-analytics';
import { Button } from '@automattic/components';
import clsx from 'clsx';
import { useTranslate } from 'i18n-calypso';
import { useCallback, useMemo, useRef, useState } from 'react';
Expand Down Expand Up @@ -184,13 +185,14 @@ const DesignPickerFilterGroup: React.FC< DesignPickerFilterGroupProps > = ( {
return (
<div className={ clsx( 'design-picker__category-group', { grow } ) }>
<div className="design-picker__category-group-label">{ title }</div>
{ children }
<div className="design-picker__category-group-content">{ children }</div>
</div>
);
};

interface DesignPickerProps {
locale: string;
onDesignWithAI?: () => void;
onPreview: ( design: Design, variation?: StyleVariation ) => void;
onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
designs: Design[];
Expand All @@ -204,10 +206,12 @@ interface DesignPickerProps {
isTierFilterEnabled?: boolean;
isMultiFilterEnabled?: boolean;
onChangeTier?: ( value: boolean ) => void;
isBigSkyEligible?: boolean;
}

const DesignPicker: React.FC< DesignPickerProps > = ( {
locale,
onDesignWithAI,
onPreview,
onChangeVariation,
designs,
Expand All @@ -221,6 +225,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
isTierFilterEnabled = false,
isMultiFilterEnabled = false,
onChangeTier,
isBigSkyEligible = false,
} ) => {
const filteredDesigns = useFilteredDesigns( designs );
const categoryTypes = useMemo(
Expand Down Expand Up @@ -261,11 +266,22 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
/>
</DesignPickerFilterGroup>
) }
{ isTierFilterEnabled && (
<DesignPickerFilterGroup>
<DesignPickerTierFilter onChange={ onChangeTier } />
</DesignPickerFilterGroup>
) }
<DesignPickerFilterGroup>
{ isTierFilterEnabled && <DesignPickerTierFilter onChange={ onChangeTier } /> }
{ isBigSkyEligible && (
<Button
className={ clsx(
'design-picker__design-your-own-button',
'design-picker__design-with-ai'
) }
onClick={ () => {
onDesignWithAI && onDesignWithAI();
} }
>
{ translate( 'Design with AI' ) }
</Button>
) }
</DesignPickerFilterGroup>
</div>

<div className="design-picker__grid">
Expand Down Expand Up @@ -294,6 +310,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {

export interface UnifiedDesignPickerProps {
locale: string;
onDesignWithAI?: () => void;
onPreview: ( design: Design, variation?: StyleVariation ) => void;
onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
onViewAllDesigns: () => void;
Expand All @@ -309,10 +326,12 @@ export interface UnifiedDesignPickerProps {
isTierFilterEnabled?: boolean;
isMultiFilterEnabled?: boolean;
onChangeTier?: ( value: boolean ) => void;
isBigSkyEligible?: boolean;
}

const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
locale,
onDesignWithAI,
onPreview,
onChangeVariation,
onViewAllDesigns,
Expand All @@ -328,6 +347,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
isTierFilterEnabled = false,
isMultiFilterEnabled = false,
onChangeTier,
isBigSkyEligible = false,
} ) => {
const hasCategories = !! Object.keys( categorization?.categories || {} ).length;

Expand All @@ -351,6 +371,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
<div className="unified-design-picker__designs">
<DesignPicker
locale={ locale }
onDesignWithAI={ onDesignWithAI }
onPreview={ onPreview }
onChangeVariation={ onChangeVariation }
designs={ designs }
Expand All @@ -364,6 +385,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
isTierFilterEnabled={ isTierFilterEnabled }
isMultiFilterEnabled={ isMultiFilterEnabled }
onChangeTier={ onChangeTier }
isBigSkyEligible={ isBigSkyEligible }
/>
{ bottomAnchorContent }
</div>
Expand Down

0 comments on commit 287fe55

Please sign in to comment.