Skip to content

Fixes for FeatureCardsContainer component #664

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

Merged
Miexil merged 5 commits into from
May 5, 2026
+33 −35
Merged

Fixes for FeatureCardsContainer component #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6454d45
Updated: FeatureCard - getters as privates
Miexil May 4, 2026
1d511ff
Updated: FeatureCardsContainer - use oop methods - remove dead assert…
Miexil May 4, 2026
452b5c7
Removed: FeatureCardsContainer less - unwanted comments + use prettie…
Miexil May 4, 2026
d33ccd9
Updated: FeatureCardsContainer less - fix positioning to prevent misa…
Miexil May 4, 2026
b9f7b92
Updated: Reddit sans with semibold weight
Miexil May 5, 2026
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
16 changes: 8 additions & 8 deletions addon/components/o-s-s/feature-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,6 @@ export default class OSSFeatureCard extends Component<OSSFeatureCardArgs> {
}
}

get colorVariant(): OSSFeatureCardColorVariant {
return this.args.colorVariant ?? DEFAULT_COLOR_VARIANT;
}

get shadowVariant(): OSSFeatureCardShadowVariant {
return this.args.shadowVariant ?? DEFAULT_SHADOW_VARIANT;
}

get computedClasses(): string {
return [
'oss-feature-card',
Expand All @@ -71,6 +63,14 @@ export default class OSSFeatureCard extends Component<OSSFeatureCardArgs> {
].join(' ');
}

private get colorVariant(): OSSFeatureCardColorVariant {
return this.args.colorVariant ?? DEFAULT_COLOR_VARIANT;
}

private get shadowVariant(): OSSFeatureCardShadowVariant {
return this.args.shadowVariant ?? DEFAULT_SHADOW_VARIANT;
}

get imageAlt(): string {
return this.args.image.alt ?? '';
}
Expand Down
40 changes: 18 additions & 22 deletions addon/components/o-s-s/feature-cards-container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,6 @@ type OSSFeatureCardsContainerArgs = {
cards: OSSFeatureCardArgs[];
};

function isCenterCard(cardsCount: number, index: number): boolean {
return cardsCount === 1 || (cardsCount === 3 && index === 1);
}

function getDefaultCardColorVariant(cardsCount: number, index: number): OSSFeatureCardColorVariant {
if (isCenterCard(cardsCount, index)) return 'violet';

if (cardsCount === 2 || cardsCount === 3) return index === 0 ? 'blue' : 'yellow';

assert('[OSS::FeatureCardsContainer] Internal layout configuration mismatch', false);
Copy link
Copy Markdown
Member Author

@Miexil Miexil May 4, 2026

Choose a reason for hiding this comment

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

Removed assertion here and on line 27 as we already check in the constructor if we have 1,2 or 3 cards. This code is unreachable.

}

function getDefaultCardShadowVariant(cardsCount: number, index: number): OSSFeatureCardShadowVariant {
if (isCenterCard(cardsCount, index)) return 'lg';

if (cardsCount === 2 || cardsCount === 3) return 'sm';

assert('[OSS::FeatureCardsContainer] Internal layout configuration mismatch', false);
}

export default class OSSFeatureCardsContainer extends Component<OSSFeatureCardsContainerArgs> {
constructor(owner: unknown, args: OSSFeatureCardsContainerArgs) {
super(owner, args);
Expand All @@ -43,8 +23,8 @@ export default class OSSFeatureCardsContainer extends Component<OSSFeatureCardsC

return cards.map((card, index) => {
const cardCount = cards.length;
const colorVariant = card.colorVariant ?? getDefaultCardColorVariant(cardCount, index);
const shadowVariant = card.shadowVariant ?? getDefaultCardShadowVariant(cardCount, index);
const colorVariant = card.colorVariant ?? this.getDefaultCardColorVariant(cardCount, index);
const shadowVariant = card.shadowVariant ?? this.getDefaultCardShadowVariant(cardCount, index);

return {
...card,
Expand All @@ -53,4 +33,20 @@ export default class OSSFeatureCardsContainer extends Component<OSSFeatureCardsC
};
});
}

private getDefaultCardShadowVariant(cardsCount: number, index: number): OSSFeatureCardShadowVariant {
if (this.isCenterCard(cardsCount, index)) return 'lg';

return 'sm';
}

private getDefaultCardColorVariant(cardsCount: number, index: number): OSSFeatureCardColorVariant {
if (this.isCenterCard(cardsCount, index)) return 'violet';

return index === 0 ? 'blue' : 'yellow';
}

private isCenterCard(cardsCount: number, index: number): boolean {
return cardsCount === 1 || (cardsCount === 3 && index === 1);
}
}
2 changes: 1 addition & 1 deletion app/styles/deprecated/_fonts.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import url('https://fonts.googleapis.com/css?family=Reddit+Sans:wght@400&family=Open+Sans:400,400i,600,600i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Reddit+Sans:wght@400,600&family=Open+Sans:400,400i,600,600i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
Copy link
Copy Markdown
Member Author

@Miexil Miexil May 5, 2026

Choose a reason for hiding this comment

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

Note for reviewers, this is out of scope, just to help out a Vela teammate in need 😇

Copy link
Copy Markdown
Member

@phndiaye phndiaye May 5, 2026

Choose a reason for hiding this comment

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

❤️

10 changes: 6 additions & 4 deletions app/styles/molecules/feature-cards-container.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,33 @@
&__item {
position: absolute;

// To target child i in a list of n, we can use: :nth-child(i):nth-last-child(n - i + 1)
// Specific 2 cards layout
&:first-child:nth-last-child(2) {
top: var(--side-cards-top);
translate: calc(-1 * var(--two-cards-offset-x));
rotate: calc(-1 * var(--rotation-angle));
}

&:last-child:nth-child(2) {
top: var(--side-cards-top);
translate: var(--two-cards-offset-x);
rotate: var(--rotation-angle);
}

// Specific 3 cards layout
&:first-child:nth-last-child(3) {
top: var(--side-cards-top);
translate: calc(-1 * var(--three-cards-offset-x));
rotate: calc(-1 * var(--rotation-angle));
}

&:nth-child(2):nth-last-child(2) {
top: var(--center-card-top);
z-index: 1;
}

&:last-child:nth-child(3) {
top: var(--side-cards-top);
translate: var(--three-cards-offset-x);
rotate: var(--rotation-angle);
}
}
}
}
Loading