Skip to content

Commit

Permalink
update big sky button layout for the new designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@madhusudhand
madhusudhand committed Dec 9, 2024
1 parent 32f6004 commit 30a3ba0
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 25 deletions.
4 changes: 4 additions & 0 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 @@ -24,6 +24,10 @@ $container-padding-large: 48px;
position: absolute;
top: $container-padding-small;
right: $container-padding-small;

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

.step-container__content {
Expand Down
50 changes: 31 additions & 19 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 @@ -949,33 +949,44 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
// selected_filters: ??,
// {filter} ??
};
const bigSkyButtons = isBigSkyEligible && (
<Button
onClick={ () => {
navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site.ID }` );
recordTracksEvent(
'calypso_design_picker_big_sky_button_click',
bigSkyButtonEventProperties
);
} }
>
{ translate( 'Create yours with AI' ) }
</Button>

function onDesignWithAI() {
recordTracksEvent( 'calypso_design_picker_big_sky_button_click', bigSkyButtonEventProperties );
navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site?.ID }` );
}

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

const stepContent = (
<>
<div className="setup-container__big-sky-container">
{ bigSkyButtons }
<TrackComponentView
eventName="calypso_design_picker_big_sky_button_impression"
eventProperties={ bigSkyButtonEventProperties }
/>
</div>
<div className="setup-container__big-sky-container">{ bigSkyButtons }</div>
<UnifiedDesignPicker
designs={ designs }
locale={ locale }
onDesignYourOwn={ designYourOwn }
onDesignWithAI={ onDesignWithAI }
onClickDesignYourOwnTopButton={ clickDesignYourOwnTopButton }
onPreview={ previewDesign }
onChangeVariation={ onChangeVariation }
Expand All @@ -991,6 +1002,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
showActiveThemeBadge={ intent !== 'build' }
isTierFilterEnabled={ isGoalCentricFeature }
isMultiFilterEnabled={ isGoalCentricFeature }
isBigSkyEligible={ isBigSkyEligible }
/>
</>
);
Expand Down
14 changes: 14 additions & 0 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,12 @@
&.grow {
flex-grow: 1;
}

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

.design-picker__category-group-label {
Expand All @@ -55,6 +61,14 @@
line-height: 14px;
margin-top: 8px;
margin-bottom: 8px;

&.design-picker__design-with-ai {
display: none;

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

.design-picker__tier-filter {
Expand Down
47 changes: 41 additions & 6 deletions packages/design-picker/src/components/unified-design-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,14 +187,15 @@ 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;
onDesignYourOwn: ( design: Design ) => void;
onDesignWithAI?: () => void;
onClickDesignYourOwnTopButton: ( design: Design ) => void;
onPreview: ( design: Design, variation?: StyleVariation ) => void;
onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
Expand All @@ -209,11 +210,13 @@ interface DesignPickerProps {
showActiveThemeBadge?: boolean;
isTierFilterEnabled?: boolean;
isMultiFilterEnabled?: boolean;
isBigSkyEligible?: boolean;
}

const DesignPicker: React.FC< DesignPickerProps > = ( {
locale,
onDesignYourOwn,
onDesignWithAI,
onClickDesignYourOwnTopButton,
onPreview,
onChangeVariation,
Expand All @@ -228,6 +231,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
showActiveThemeBadge = false,
isTierFilterEnabled = false,
isMultiFilterEnabled = false,
isBigSkyEligible = false,
} ) => {
const hasCategories = !! Object.keys( categorization?.categories || {} ).length;
const filteredDesigns = useFilteredDesigns( designs, categorization );
Expand Down Expand Up @@ -286,11 +290,36 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
</Button>
</DesignPickerFilterGroup>
) }
{ isTierFilterEnabled && (
<DesignPickerFilterGroup>
<DesignPickerTierFilter />
</DesignPickerFilterGroup>
) }
<DesignPickerFilterGroup>
{ isTierFilterEnabled && <DesignPickerTierFilter /> }
{ assemblerCtaData.shouldGoToAssemblerStep && isSiteAssemblerEnabled && (
<Button
className={ clsx( 'design-picker__design-your-own-button', {
'design-picker__design-your-own-button-without-categories': ! hasCategories,
} ) }
onClick={ () => onClickDesignYourOwnTopButton( getAssemblerDesign() ) }
>
{ assemblerCtaData.title }
</Button>
) }
{ isBigSkyEligible && (
<Button
className={ clsx(
'design-picker__design-your-own-button',
'design-picker__design-with-ai'
) }
onClick={ () => {
// recordTracksEvent(
// 'calypso_design_picker_big_sky_button_click',
// bigSkyButtonEventProperties
// );
onDesignWithAI && onDesignWithAI();
} }
>
{ translate( 'Design with AI' ) }
</Button>
) }
</DesignPickerFilterGroup>
</div>

<div className="design-picker__grid">
Expand Down Expand Up @@ -323,6 +352,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
export interface UnifiedDesignPickerProps {
locale: string;
onDesignYourOwn: ( design: Design ) => void;
onDesignWithAI?: () => void;
onClickDesignYourOwnTopButton: ( design: Design ) => void;
onPreview: ( design: Design, variation?: StyleVariation ) => void;
onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
Expand All @@ -339,11 +369,13 @@ export interface UnifiedDesignPickerProps {
showActiveThemeBadge?: boolean;
isTierFilterEnabled?: boolean;
isMultiFilterEnabled?: boolean;
isBigSkyEligible?: boolean;
}

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

Expand All @@ -384,6 +417,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
<DesignPicker
locale={ locale }
onDesignYourOwn={ onDesignYourOwn }
onDesignWithAI={ onDesignWithAI }
onClickDesignYourOwnTopButton={ onClickDesignYourOwnTopButton }
onPreview={ onPreview }
onChangeVariation={ onChangeVariation }
Expand All @@ -398,6 +432,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
showActiveThemeBadge={ showActiveThemeBadge }
isTierFilterEnabled={ isTierFilterEnabled }
isMultiFilterEnabled={ isMultiFilterEnabled }
isBigSkyEligible={ isBigSkyEligible }
/>
{ bottomAnchorContent }
</div>
Expand Down

0 comments on commit 30a3ba0

Please sign in to comment.