Merged in feat/profile-consent-feature-branch (pull request #2900)
feat(LOY-268): Feature branch for profiling consent work * feat: Add feature branch for profile and consent work * Merged in feat/LOY-268-profile-consent-banner-comp (pull request #2908) Feat/LOY-358 profile consent banner component * feat: Add feature branch for profile and consent work * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component Approved-by: Chuma Mcphoy (We Ahead) * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): minor fixes * fix(LOY-347): replace old spa icon * fix(LOY-347): re-add env vars * fix(LOY-347): File renaming and cleanup * chore(LOY-347): Update readme * fix(LOY-347): use correct space var * fix(LOY-347): Add TODO comment for adding link to accordion Approved-by: Matilda Landström * Merged in fix/LOY-386-profiling-consent-modal-contentstack (pull request #2930) Fix(LOY-386): profiling consent modal contentstack * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): minor fixes * fix(LOY-347): replace old spa icon * fix(LOY-347): re-add env vars * fix(LOY-347): File renaming and cleanup * fix(LOY-386): Use contentstack content for profile consent modal * fix(LOY-386): beneift cards schema transform * chore(LOY-386): remove usememo * fix(LOY-386): fix modalcontent check * fix(LOY-386): remove uneeded vars Approved-by: Matilda Landström * Merged in feat/LOY-412-profiling-consent-in-signup (pull request #2976) Feat(LOY-412): profiling consent in signup * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Ico… * Merged in fix/lokalise-ids (pull request #3013) fix: add ids to translations in Profiling Consent * fix: add ids to translations Approved-by: Erik Tiekstra Approved-by: Chuma Mcphoy (We Ahead) * Merged in LOY-436-my-pages-profiling-consent (pull request #3011) LOY-436: Profiling Consent on My Profile, no api Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-418-profiling-consent-ui-text-update (pull request #3080) Feat/LOY-418: Profiling consent ui and text update * chore(LOY-418): update /consent buttons * chore(LOY-418): update legal texts Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-268-profiling-consent-api (pull request #3088) Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-413-Signup-API-Profiling-Consent (pull request #3105) Feat/LOY-413 Signup API Profiling Consent * feat(LOY-413): signup profiling consent * chore(LOY-413): remove todo * fix(LOY-413): only pass in profilingConsent if true * fix(LOY-413): proper spread of profilingConsent in signup input Approved-by: Christel Westerberg * Merged in fix/LOY-413-use-v2-for-signup-call (pull request #3112) fix(LOY-413): use v2 endpoint for profile POST in signup * fix(LOY-413): use v2 endpoint for profile POST in signup Approved-by: Erik Tiekstra * Merged in feat/LOY-268-profiling-consent-improvements (pull request #3094) Feat/LOY-268: Profiling consent improvements * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): min… * Merged in fix/update-graphql (pull request #3130) fix: update graphql * fix: update graphql Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-414-prof-consent-tracking (pull request #3127) Feat/LOY-414 profile consent tracking + credit card ui update * chore(LOY-414): create track link function * chore(LOY-414): add cta tracking * chore(LOY-414): add profileConsent to userInfo datalayer * chore(LOY-414): update credit card ui * chore(LOY-414): update tracking specs * chore(LOY-414): add pageView tracking to modal Approved-by: Chuma Mcphoy (We Ahead) * fix: remove old flag * Merged in fix/LOY-268-prof-consent-button-fix (pull request #3162) fix(LOY-268): add button as link * fix(LOY-268): add button as link Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
|
||||
import { cx } from 'class-variance-authority'
|
||||
import { Label, Radio, RadioGroup, Text } from 'react-aria-components'
|
||||
|
||||
import { Divider } from '../../Divider'
|
||||
import { Typography } from '../../Typography'
|
||||
|
||||
import styles from './radioButtonsGroup.module.css'
|
||||
interface Option {
|
||||
value: string
|
||||
title: string
|
||||
text: string
|
||||
}
|
||||
interface RadioButtonsGroupProps {
|
||||
options: Option[]
|
||||
onChange: (value: string) => void
|
||||
ariaLabel: string
|
||||
defaultOption?: Option
|
||||
}
|
||||
export function RadioButtonsGroup({
|
||||
options,
|
||||
onChange,
|
||||
ariaLabel,
|
||||
defaultOption,
|
||||
}: RadioButtonsGroupProps) {
|
||||
return (
|
||||
<RadioGroup
|
||||
className={styles.radioButtons}
|
||||
onChange={onChange}
|
||||
aria-label={ariaLabel}
|
||||
defaultValue={defaultOption?.value}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<Radio
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ isFocusVisible, isSelected, isHovered, isDisabled }) =>
|
||||
cx(styles.option, {
|
||||
[styles.focused]: isFocusVisible,
|
||||
[styles.selected]: isSelected,
|
||||
[styles.hovered]: isHovered,
|
||||
[styles.disabled]: isDisabled,
|
||||
})
|
||||
}
|
||||
>
|
||||
{({ isSelected, isDisabled }) => (
|
||||
<div className={styles.card}>
|
||||
<span className={styles.titleContainer}>
|
||||
<span
|
||||
className={cx(styles.radio, {
|
||||
[styles.selected]: isSelected,
|
||||
[styles.disabled]: isDisabled,
|
||||
})}
|
||||
aria-hidden
|
||||
/>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<Label>{option.title}</Label>
|
||||
</Typography>
|
||||
</span>
|
||||
<span className={styles.bottom}>
|
||||
<Divider />
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<Text slot="description">{option.text}</Text>
|
||||
</Typography>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Radio>
|
||||
))}
|
||||
</RadioGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
.radioButtons {
|
||||
display: flex;
|
||||
gap: var(--Space-x2);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.option {
|
||||
position: relative;
|
||||
background: var(--Surface-Primary-Default);
|
||||
padding: var(--Space-x15) var(--Space-x2);
|
||||
outline: 1px solid var(--Border-Interactive-Default);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--Space-x2);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.option.hovered {
|
||||
background:
|
||||
linear-gradient(
|
||||
0deg,
|
||||
var(--Surface-Primary-Hover, rgba(31, 28, 27, 0.05)) 0%,
|
||||
var(--Surface-Primary-Hover, rgba(31, 28, 27, 0.05)) 100%
|
||||
),
|
||||
var(--Surface-Primary-Default);
|
||||
}
|
||||
|
||||
.option.focused {
|
||||
outline: 2px solid var(--UI-Input-Controls-Border-Focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.option.disabled {
|
||||
outline: 1px solid var(--Border-Interactive-Disabled);
|
||||
background:
|
||||
linear-gradient(
|
||||
0deg,
|
||||
var(--Surface-UI-Fill-Disabled, rgba(31, 28, 27, 0.1)) 0%,
|
||||
var(--Surface-UI-Fill-Disabled, rgba(31, 28, 27, 0.1)) 100%
|
||||
),
|
||||
var(--Surface-Primary-Default, #fff);
|
||||
color: var(--Text-Interactive-Disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.option.selected {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.option.selected:not(.disabled) {
|
||||
outline: 2px solid var(--Border-Interactive-Active);
|
||||
background: var(--Surface-Primary-Default);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--Border-Interactive-Default);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: var(--Surface-UI-Fill-Default);
|
||||
background: var(--Surface-UI-Fill-Default);
|
||||
}
|
||||
|
||||
.radio.selected {
|
||||
border: 8px solid var(--Surface-UI-Fill-Active);
|
||||
}
|
||||
|
||||
.radio.disabled {
|
||||
background-color: var(--Surface-UI-Fill-Disabled);
|
||||
}
|
||||
|
||||
.titleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x15);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: grid;
|
||||
gap: var(--Space-x1);
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.selected .bottom {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.disabled:not(.selected) .bottom {
|
||||
color: var(--Text-Interactive-Disabled);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.radioButtons {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user