Skip to content

Commit

Permalink
Fix style confilict and reduce bundle size (#64)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dej611
dej611 authored Oct 15, 2021
1 parent 7513be2 commit b8d22b5
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 62 deletions.
30 changes: 15 additions & 15 deletions src/modalVariant/ProvidersModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ButtonImage = ({ url, altText }: { url: string; altText: string }) => (
);

function getModalClasses({ type }: ModalState) {
const fadeInLeftClass = `spid-button-fade-in-left`;
const fadeInLeftClass = 'spid-button-fade-in-left';
switch (type) {
case possibleStates.ENTERING.type:
return {
Expand Down Expand Up @@ -101,40 +101,40 @@ export const ProvidersModal = ({
>
<div className={getDefinedClasses(['spid-enter'])}>
<section
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-panel',
'spid-button-panel-select',
panelClasses
])}`}
])}
aria-label={i18n('scegli_provider_SPID')}
tabIndex={0}
>
<header className={getDefinedClasses(['spid-button-header'])}>
<div className={getDefinedClasses(['spid-button-panel-back'])}>
<div
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-logo',
buttonLogoClasses
])}`}
])}
>
<ButtonImage
url={SpidLogoUrl}
altText={i18n('alt_logo_SPID')}
/>
</div>
<div
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-close-button',
'spid-button-fade-out-right',
buttonCloseClasses
])}`}
])}
>
<button
tabIndex={0}
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-panel-close-button',
'spid-button-navigable'
])}`}
])}
aria-label={i18n('naviga_indietro')}
onClick={closeModal}
>
Expand All @@ -148,10 +148,10 @@ export const ProvidersModal = ({
</header>
<div className={getDefinedClasses(['spid-button-panel-content'])}>
<img
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-little-man-icon',
buttonManIconClasses
])}`}
])}
src={SpidLogoAnimationBlackUrl}
alt={i18n('entra_con_SPID')}
/>
Expand All @@ -161,11 +161,11 @@ export const ProvidersModal = ({
])}
>
<h1
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-enter-title-page',
'spid-button-fade-in-bottom',
'spid-button-fade-out-bottom'
])}`}
])}
>
{i18n('scegli_provider_SPID')}
</h1>
Expand Down Expand Up @@ -198,10 +198,10 @@ export const ProvidersModal = ({
return (
<span
key={idp.entityID}
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-idp',
classNames
])}`}
])}
style={style}
>
<SharedProviderButton
Expand Down
3 changes: 3 additions & 0 deletions src/modalVariant/extra.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
img.spid-button-image-fix {
vertical-align: baseline;
}
14 changes: 9 additions & 5 deletions src/modalVariant/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,21 +51,25 @@ const LoginButton = ({
theme === 'negative' ? SpidIcoCircleLbUrl : SpidIcoCircleBbUrl;
return (
<button
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button',
...customStylingClasses,
...wrapperTransitionClasses
])}`}
])}
onClick={() => toggleModal(true)}
>
<span
aria-hidden={!isVisible(modalVisibility)}
className={`${getDefinedClasses([
className={getDefinedClasses([
'spid-button-icon',
...iconButtonClasses
])}`}
])}
>
<img src={buttonImageUrl} alt='Login logo' />
<img
src={buttonImageUrl}
alt='Login logo'
className={getDefinedClasses(['spid-button-image-fix'])}
/>
</span>
<span className={getDefinedClasses(['spid-button-text'])}>
{i18n('entra_con_SPID')}
Expand Down
7 changes: 5 additions & 2 deletions src/modalVariant/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ import {
import { ModalState } from './types';

import styles from './index.module.css';
import extraStyles from './extra.module.css';

// the css module is fake for the modal, so we can just centralize the renaming logic here
export function getDefinedClasses(klasses: (string | undefined)[]) {
return klasses
.map((klass) => (klass && styles[klass]) || emptyClass)
.map(
(klass) => (klass && (styles[klass] || extraStyles[klass])) || emptyClass
)
.join(' ');
}

Expand All @@ -38,7 +41,7 @@ export function computeButtonClasses({
return [
theme,
corners,
size ? `size-${sizeMapping[size] ?? 'large'}` : null,
size ? `size-${sizeMapping[size] || 'large'}` : null,
fluid ? 'fluid' : null
]
.map((type) => (type != null ? `spid-button-${type}` : ''))
Expand Down
80 changes: 40 additions & 40 deletions src/shared/i18n.ts
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
const translations = {
it: {
naviga_indietro: 'Torna indietro',
alt_logo_SPID: 'Logo SPID',
scegli_provider_SPID: 'Scegli il tuo provider SPID',
annulla_accesso: 'Annulla',
non_hai_SPID: 'Non hai SPID?',
cosa_SPID: "Cos'è SPID?",
entra_con_SPID: 'Entra con SPID',
scopri_di_piu: 'Scopri di più.',
accedi_con_idp: 'Accedi a SPID con {0}',
idp_disabled: 'Provider non attivo',
maggiori_info: 'Maggiori info'
naviga_indietro: {
it: 'Torna indietro',
en: 'Go back',
de: 'Gehen Sie zurück'
},
en: {
naviga_indietro: 'Go back',
alt_logo_SPID: 'SPID logo',
scegli_provider_SPID: 'Choose your SPID provider',
annulla_accesso: 'Cancel',
non_hai_SPID: "Don't have SPID?",
cosa_SPID: 'What is SPID?',
entra_con_SPID: 'Sign in with SPID',
scopri_di_piu: 'Learn more.',
accedi_con_idp: 'Access to SPID with {0}',
idp_disabled: 'Provider not enabled',
maggiori_info: 'More info'
alt_logo_SPID: { it: 'Logo SPID', en: 'Logo SPID', de: 'Logo SPID' },
scegli_provider_SPID: {
it: 'Scegli il tuo provider SPID',
en: 'Choose your SPID provider',
de: 'Wähle Ihren SPIDProvider'
},
de: {
naviga_indietro: 'Gehen Sie zurück',
alt_logo_SPID: 'SPID Logo',
scegli_provider_SPID: 'Wähle Ihren SPIDProvider',
annulla_accesso: 'Zurücknehmen',
non_hai_SPID: 'Haben Sie nicht SPID?',
cosa_SPID: 'Was ist SPID?',
entra_con_SPID: 'Loggen Sie mit SPID',
scopri_di_piu: 'Finde mehr heraus.',
accedi_con_idp: 'Zugriff auf SPID mit {0}',
idp_disabled: 'Provider nicht aktiviert',
maggiori_info: 'Mehr info'
}
annulla_accesso: { it: 'Annulla', en: 'Cancel', de: 'Zurücknehmen' },
non_hai_SPID: {
it: 'Non hai SPID?',
en: "Don't have SPID?",
de: 'Haben Sie nicht SPID?'
},
cosa_SPID: { it: "Cos'è SPID?", en: 'What is SPID?', de: 'Was ist SPID?' },
entra_con_SPID: {
it: 'Entra con SPID',
en: 'Sign in with SPID',
de: 'Loggen Sie mit SPID'
},
scopri_di_piu: {
it: 'Scopri di più.',
en: 'Learn more.',
de: 'Finde mehr heraus.'
},
accedi_con_idp: {
it: 'Accedi a SPID con {0}',
en: 'Access to SPID with {0}',
de: 'Zugriff auf SPID mit {0}'
},
idp_disabled: {
it: 'Provider non attivo',
en: 'Provider not enabled',
de: 'Provider nicht aktiviert'
},
maggiori_info: { it: 'Maggiori info', en: 'More info', de: 'Mehr info' }
} as const;

export type languages = keyof typeof translations;
export type labelKeys = keyof typeof translations[languages];
export type labelKeys = keyof typeof translations;
export type languages = keyof typeof translations[labelKeys];

export type TranslateFn = (
labelKey: labelKeys,
Expand All @@ -52,7 +52,7 @@ let currentLang = 'it';
export const getTranslationFn = (language: languages): TranslateFn => {
currentLang = language;
return (labelKey: labelKeys, placeholderValue?: string) => {
const text = translations[currentLang]?.[labelKey];
const text = translations[labelKey] && translations[labelKey][currentLang];
if (!text) {
throw Error(
`labelKey ${labelKey} non presente per la lingua selezionata ${currentLang}`
Expand Down

1 comment on commit b8d22b5

@vercel
Copy link

@vercel vercel bot commented on b8d22b5 Oct 15, 2021

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

Please sign in to comment.