m1000/keycloakify-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show how to import custom fonts in Storybook

Browse Source
This commit is contained in:
Joseph Garrone 2023-11-02 21:27:34 +01:00
parent 23a71f8fa0
commit bb019e66fb
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/keycloak-theme/login/Template.tsx
View File

@ -50,8 +50,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
return (
<div className={getClassName("kcLoginClass")}>
<div id="kc-header" className={getClassName("kcHeaderClass")}>
<div id="kc-header-wrapper" className={getClassName("kcHeaderWrapperClass")}>
{msg("loginTitleHtml", realm.displayNameHtml)}
<div
id="kc-header-wrapper"
className={getClassName("kcHeaderWrapperClass")}
style={{ "fontFamily": '"Work Sans"' }}
>
{msg("loginTitleHtml", realm.displayNameHtml)}!!!
</div>
</div>

8
src/keycloak-theme/login/createPageStory.tsx
View File

@ -15,7 +15,13 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
storyPartialKcContext: params.kcContext
});
return <KcApp kcContext={kcContext} />;
return (
<>
{/* If you import custom fonts in your index.html you have to import them in storybook as well*/}
<link rel="stylesheet" type="text/css" href="fonts/WorkSans/font.css" />
<KcApp kcContext={kcContext} />
</>
);
}