Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

product dropdown improvements #122

Merged
merged 2 commits into from
Nov 21, 2024
Merged

product dropdown improvements #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8a9989
product dropdown improvements
jsladerman Nov 20, 2024
f78596b
add cookiebot shrinkage
jsladerman Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/components/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const ProductLink = forwardRef(
<MainLinkBase
ref={ref}
as={Link}
css={{ width: 440 }}
{...props}
>
<div className="h-[40px] w-[40px] rounded-medium border border-grey-750 bg-fill-two p-[10px]">
Expand All @@ -53,13 +54,13 @@ export const ProductLink = forwardRef(
<div>
<ResponsiveText
as="p"
textStyles={{ '': 'mBody2Bold' }}
textStyles={{ '': 'mComponentLink' }}
>
{itemConfig?.title}
</ResponsiveText>
<ResponsiveText
as="p"
textStyles={{ '': 'mBody2' }}
textStyles={{ '': 'mComponentText' }}
style={{ color: theme.colors['text-light'] }}
>
{itemConfig?.description}
Expand Down Expand Up @@ -163,6 +164,7 @@ export const MainLinkBase = styled.a.withConfig({
alignItems: 'center',
gap: theme.spacing.xsmall,
cursor: 'pointer',
padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px `,
...(isSelected
? {
color: theme.colors.text,
Expand Down Expand Up @@ -190,7 +192,6 @@ export const MainLinkBase = styled.a.withConfig({
'.hover-arrow': {
opacity: '0',
},
padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px `,
}))

export const SecondaryLink = styled.a(({ theme }) => ({
Expand Down
11 changes: 8 additions & 3 deletions src/components/menu/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,13 +202,13 @@ function MenuDropdown<T extends object>({
$kind={kind}
className={
kind === 'product'
? 'flex flex-col items-center gap-large lg:flex-row'
? 'flex flex-col items-center gap-large min-[1352px]:flex-row'
: ''
}
Comment on lines +205 to 207
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Custom breakpoint min-[1352px] deviates from the design system

The codebase has a well-defined breakpoint system in src/breakpoints.ts with standardized values:

  • lg: 1000px
  • xl: 1280px
  • xxl: 1440px

The custom breakpoint min-[1352px] falls between xl and xxl breakpoints and doesn't align with the design system. Consider using either xl (1280px) or xxl (1440px) for better consistency.

🔗 Analysis chain

Verify the custom breakpoint value consistency

The change from lg:flex-row to min-[1352px]:flex-row introduces a specific pixel breakpoint. Ensure this breakpoint (1352px) aligns with the design system's breakpoint standards.

Let me gather more specific information about the breakpoints defined in the system.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other instances of this breakpoint to verify consistency
rg --type tsx --type ts "1352px|min-\[1352px\]"

# Look for any breakpoint definitions in theme files
fd -e ts -e tsx -e js theme | xargs rg "breakpoint"

Length of output: 5144

Script:

#!/bin/bash
# Check the breakpoints.ts file content to understand the defined breakpoints
cat src/breakpoints.ts

# Check the theme configuration
cat tailwind.config.ts

Length of output: 3548

>
{kind === 'product' && (
<PlatformOverviewLinkSC
className="w-[356px]"
className="max-h-[120px] min-w-full min-[1352px]:max-h-none min-[1352px]:min-w-[320px]"
as={Link}
href="/product"
onClick={props.onClose}
Expand All @@ -221,7 +221,11 @@ function MenuDropdown<T extends object>({
{kind === 'product' && (
<MenuCategoryLabel>Product features</MenuCategoryLabel>
)}
<ul className={kind === 'product' ? 'grid grid-cols-2' : ''}>
<ul
className={
kind === 'product' ? 'grid grid-cols-2 gap-x-medium' : ''
}
>
{[...state.collection].map((item) => (
<ItemRenderer
key={item.key}
Expand Down Expand Up @@ -301,6 +305,7 @@ function SolutionNavDropdown<T extends object>({
const DropdownCardSC = styled.div<{ $kind: string }>(({ theme, $kind }) => ({
overflowX: 'hidden',
overflowY: 'auto',
width: 'max-content',
padding:
$kind === 'product' ? theme.spacing.xlarge : `${theme.spacing.xsmall}px 0`,
boxShadow: theme.boxShadows.moderate,
Expand Down
45 changes: 18 additions & 27 deletions src/generated/graphqlDirectus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4926,6 +4926,8 @@ export type Card = {
heading: Scalars['String']['output'];
id: Scalars['ID']['output'];
image?: Maybe<Directus_Files>;
/** unique name to identify this card */
name?: Maybe<Scalars['String']['output']>;
url?: Maybe<Scalars['String']['output']>;
user_created?: Maybe<Directus_Users>;
user_updated?: Maybe<Directus_Users>;
Expand Down Expand Up @@ -4983,6 +4985,8 @@ export type Card_Aggregated_Count = {
heading?: Maybe<Scalars['Int']['output']>;
id?: Maybe<Scalars['Int']['output']>;
image?: Maybe<Scalars['Int']['output']>;
/** unique name to identify this card */
name?: Maybe<Scalars['Int']['output']>;
url?: Maybe<Scalars['Int']['output']>;
user_created?: Maybe<Scalars['Int']['output']>;
user_updated?: Maybe<Scalars['Int']['output']>;
Expand All @@ -5004,6 +5008,7 @@ export type Card_Filter = {
heading?: InputMaybe<String_Filter_Operators>;
id?: InputMaybe<Number_Filter_Operators>;
image?: InputMaybe<Directus_Files_Filter>;
name?: InputMaybe<String_Filter_Operators>;
url?: InputMaybe<String_Filter_Operators>;
user_created?: InputMaybe<Directus_Users_Filter>;
user_updated?: InputMaybe<Directus_Users_Filter>;
Expand Down Expand Up @@ -5942,6 +5947,8 @@ export type Create_Card_Input = {
heading: Scalars['String']['input'];
id?: InputMaybe<Scalars['ID']['input']>;
image?: InputMaybe<Create_Directus_Files_Input>;
/** unique name to identify this card */
name?: InputMaybe<Scalars['String']['input']>;
url?: InputMaybe<Scalars['String']['input']>;
user_created?: InputMaybe<Create_Directus_Users_Input>;
user_updated?: InputMaybe<Create_Directus_Users_Input>;
Expand Down Expand Up @@ -6071,6 +6078,8 @@ export type Create_Custom_Component_Input = {
date_updated?: InputMaybe<Scalars['Date']['input']>;
id?: InputMaybe<Scalars['ID']['input']>;
item?: InputMaybe<Array<InputMaybe<Create_Custom_Component_Item_Input>>>;
/** unique name to identify this component */
name?: InputMaybe<Scalars['String']['input']>;
spacing_bottom?: InputMaybe<Scalars['String']['input']>;
spacing_top?: InputMaybe<Scalars['String']['input']>;
theme?: InputMaybe<Scalars['String']['input']>;
Expand Down Expand Up @@ -6405,10 +6414,7 @@ export type Create_Product_Pages_Input = {
dropdown_description?: InputMaybe<Scalars['String']['input']>;
dropdown_icon?: InputMaybe<Scalars['String']['input']>;
dropdown_title?: InputMaybe<Scalars['String']['input']>;
features?: InputMaybe<Array<InputMaybe<Create_Product_Features_Input>>>;
id?: InputMaybe<Scalars['ID']['input']>;
page_subtitle?: InputMaybe<Scalars['String']['input']>;
page_title?: InputMaybe<Scalars['String']['input']>;
slug: Scalars['String']['input'];
status?: InputMaybe<Scalars['String']['input']>;
};
Expand Down Expand Up @@ -6680,6 +6686,8 @@ export type Custom_Component = {
id: Scalars['ID']['output'];
item?: Maybe<Array<Maybe<Custom_Component_Item>>>;
item_func?: Maybe<Count_Functions>;
/** unique name to identify this component */
name?: Maybe<Scalars['String']['output']>;
spacing_bottom?: Maybe<Scalars['String']['output']>;
spacing_top?: Maybe<Scalars['String']['output']>;
theme?: Maybe<Scalars['String']['output']>;
Expand Down Expand Up @@ -6737,6 +6745,8 @@ export type Custom_Component_Aggregated_Count = {
date_updated?: Maybe<Scalars['Int']['output']>;
id?: Maybe<Scalars['Int']['output']>;
item?: Maybe<Scalars['Int']['output']>;
/** unique name to identify this component */
name?: Maybe<Scalars['Int']['output']>;
spacing_bottom?: Maybe<Scalars['Int']['output']>;
spacing_top?: Maybe<Scalars['Int']['output']>;
theme?: Maybe<Scalars['Int']['output']>;
Expand All @@ -6759,6 +6769,7 @@ export type Custom_Component_Filter = {
id?: InputMaybe<Number_Filter_Operators>;
item?: InputMaybe<Custom_Component_Item_Filter>;
item_func?: InputMaybe<Count_Function_Filter_Operators>;
name?: InputMaybe<String_Filter_Operators>;
spacing_bottom?: InputMaybe<String_Filter_Operators>;
spacing_top?: InputMaybe<String_Filter_Operators>;
theme?: InputMaybe<String_Filter_Operators>;
Expand Down Expand Up @@ -8974,11 +8985,7 @@ export type Product_Pages = {
dropdown_description?: Maybe<Scalars['String']['output']>;
dropdown_icon?: Maybe<Scalars['String']['output']>;
dropdown_title?: Maybe<Scalars['String']['output']>;
features?: Maybe<Array<Maybe<Product_Features>>>;
features_func?: Maybe<Count_Functions>;
id: Scalars['ID']['output'];
page_subtitle?: Maybe<Scalars['String']['output']>;
page_title?: Maybe<Scalars['String']['output']>;
slug: Scalars['String']['output'];
status?: Maybe<Scalars['String']['output']>;
};
Expand All @@ -8993,16 +9000,6 @@ export type Product_PagesCustom_ComponentsArgs = {
sort?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
};


export type Product_PagesFeaturesArgs = {
filter?: InputMaybe<Product_Features_Filter>;
limit?: InputMaybe<Scalars['Int']['input']>;
offset?: InputMaybe<Scalars['Int']['input']>;
page?: InputMaybe<Scalars['Int']['input']>;
search?: InputMaybe<Scalars['String']['input']>;
sort?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
};

export type Product_Pages_Aggregated = {
__typename?: 'product_pages_aggregated';
avg?: Maybe<Product_Pages_Aggregated_Fields>;
Expand All @@ -9023,10 +9020,7 @@ export type Product_Pages_Aggregated_Count = {
dropdown_description?: Maybe<Scalars['Int']['output']>;
dropdown_icon?: Maybe<Scalars['Int']['output']>;
dropdown_title?: Maybe<Scalars['Int']['output']>;
features?: Maybe<Scalars['Int']['output']>;
id?: Maybe<Scalars['Int']['output']>;
page_subtitle?: Maybe<Scalars['Int']['output']>;
page_title?: Maybe<Scalars['Int']['output']>;
slug?: Maybe<Scalars['Int']['output']>;
status?: Maybe<Scalars['Int']['output']>;
};
Expand Down Expand Up @@ -9107,11 +9101,7 @@ export type Product_Pages_Filter = {
dropdown_description?: InputMaybe<String_Filter_Operators>;
dropdown_icon?: InputMaybe<String_Filter_Operators>;
dropdown_title?: InputMaybe<String_Filter_Operators>;
features?: InputMaybe<Product_Features_Filter>;
features_func?: InputMaybe<Count_Function_Filter_Operators>;
id?: InputMaybe<Number_Filter_Operators>;
page_subtitle?: InputMaybe<String_Filter_Operators>;
page_title?: InputMaybe<String_Filter_Operators>;
slug?: InputMaybe<String_Filter_Operators>;
status?: InputMaybe<String_Filter_Operators>;
};
Expand Down Expand Up @@ -10462,6 +10452,8 @@ export type Update_Card_Input = {
heading?: InputMaybe<Scalars['String']['input']>;
id?: InputMaybe<Scalars['ID']['input']>;
image?: InputMaybe<Update_Directus_Files_Input>;
/** unique name to identify this card */
name?: InputMaybe<Scalars['String']['input']>;
url?: InputMaybe<Scalars['String']['input']>;
user_created?: InputMaybe<Update_Directus_Users_Input>;
user_updated?: InputMaybe<Update_Directus_Users_Input>;
Expand Down Expand Up @@ -10591,6 +10583,8 @@ export type Update_Custom_Component_Input = {
date_updated?: InputMaybe<Scalars['Date']['input']>;
id?: InputMaybe<Scalars['ID']['input']>;
item?: InputMaybe<Array<InputMaybe<Update_Custom_Component_Item_Input>>>;
/** unique name to identify this component */
name?: InputMaybe<Scalars['String']['input']>;
spacing_bottom?: InputMaybe<Scalars['String']['input']>;
spacing_top?: InputMaybe<Scalars['String']['input']>;
theme?: InputMaybe<Scalars['String']['input']>;
Expand Down Expand Up @@ -10935,10 +10929,7 @@ export type Update_Product_Pages_Input = {
dropdown_description?: InputMaybe<Scalars['String']['input']>;
dropdown_icon?: InputMaybe<Scalars['String']['input']>;
dropdown_title?: InputMaybe<Scalars['String']['input']>;
features?: InputMaybe<Array<InputMaybe<Update_Product_Features_Input>>>;
id?: InputMaybe<Scalars['ID']['input']>;
page_subtitle?: InputMaybe<Scalars['String']['input']>;
page_title?: InputMaybe<Scalars['String']['input']>;
slug?: InputMaybe<Scalars['String']['input']>;
status?: InputMaybe<Scalars['String']['input']>;
};
Expand Down
8 changes: 8 additions & 0 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@ body,
#__next {
min-height: 100vh;
}

/* Cookiebot overrides */
@media (max-width: 1280px) {
body > #CybotCookiebotDialog {
transform: scale(0.8) translate(-60%, -45%) !important;
}
}

/* stylelint-enable */

*,
Expand Down
Loading