Skip to content

Commit

Permalink
Merge branch 'release/hermod-14' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
kasperg committed May 14, 2024
2 parents bb61928 + 1737eab commit dbc6110
Show file tree
Hide file tree
Showing 9 changed files with 68 additions and 79 deletions.
16 changes: 8 additions & 8 deletions src/stories/Blocks/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,12 @@ export const Header = (props: HeaderProps) => {
<>
<header className="header">
<div className="header__logo-desktop">
<a className="header__logo-desktop-link" href="/">
<Logo
fallback={false}
libraryName="Hjørring"
altText="PromoTitle image of libary"
/>
</a>
<Logo
hasImage
libraryName="Hjørring"
libraryPlace="Bibliotekerne"
altText="PromoTitle image of libary"
/>
</div>

<div className="header__menu">
Expand All @@ -71,8 +70,9 @@ export const Header = (props: HeaderProps) => {
</Pagefold>
<div className="header__menu-navigation-logo">
<Logo
fallback
hasImage
libraryName="Lyngby-Taarbæk"
libraryPlace="Bibliotekerne"
altText="PromoTitle image of libary"
/>
</div>
Expand Down
9 changes: 0 additions & 9 deletions src/stories/Blocks/header/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,6 @@
border-right: 1px solid $color__global-tertiary-1;
}

.header__logo-desktop-link {
text-decoration: none;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.header__menu {
display: grid;
grid-template-rows: 1fr 1fr;
Expand Down
4 changes: 1 addition & 3 deletions src/stories/Library/content-list-item/ContentListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ export const ContentListItem: React.FC<ContentListItemProps> = ({
)}
<div className="content-list-item__date">{date}</div>
<h2 className="content-list-item__title">{title}</h2>
<div className="content-list-item__description">
<p>{description}</p>
</div>
<div className="content-list-item__description">{description}</div>
<div className="content-list-item__content-bottom-container">
<p className="content-list-item__location">{location}</p>
</div>
Expand Down
11 changes: 3 additions & 8 deletions src/stories/Library/content-list-item/content-list-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,7 @@ $_stacked-reduce-width: 20px;
.content-list-item__description {
grid-area: description;
margin-bottom: $s-lg;
p {
@include text-ellipsis-truncation(3);
}
@include text-ellipsis-truncation(3);
}

.content-list-item__content-bottom-container {
Expand Down Expand Up @@ -211,12 +209,9 @@ $_stacked-reduce-width: 20px;
}

.content-list-item__description {
margin-bottom: unset;
margin-bottom: auto;
grid-area: description;

p {
@include text-ellipsis-truncation(2);
}
@include text-ellipsis-truncation(2);
}

.content-list-item__content-right-container {
Expand Down
7 changes: 6 additions & 1 deletion src/stories/Library/footer-widgets/FooterWidgets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ const FooterWidgets: FC<FooterWidgetsType> = ({ footerLanguages }) => {
ariaLabel="dropdown"
arrowIcon="triangles"
/>
<Logo fallback={false} libraryName="" altText="logo" />
<Logo
hasImage
libraryName="Hjørring"
libraryPlace="Bibliotekerne"
altText="logo"
/>
</div>
);
};
Expand Down
28 changes: 11 additions & 17 deletions src/stories/Library/logo/Logo.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
import { ComponentStory } from "@storybook/react";
import { withDesign } from "storybook-addon-designs";
import Logo, { LogoProps } from "./Logo";

export default {
title: "Library / Logo",
component: Logo,
decorators: [withDesign],
argTypes: {
libraryName: {
defaultValue: "Hjørring",
},
altText: {
defaultValue: "Logo",
},
},
parameters: {
design: {
type: "figma",
Expand All @@ -27,14 +17,18 @@ const Template: ComponentStory<typeof Logo> = (args: LogoProps) => (
<Logo {...args} />
);

export const Default = Template.bind({});
Default.args = {
fallback: false,
altText: "logo",
export const LogoWithImage = Template.bind({});
LogoWithImage.args = {
hasImage: true,
libraryName: "Hjørring",
libraryPlace: "Bibliotekerne",
altText: "Logo",
};

export const LogoFallback = Template.bind({});
LogoFallback.args = {
fallback: true,
export const LogoWithoutImage = Template.bind({});
LogoWithoutImage.args = {
hasImage: false,
libraryName: "Hjørring",
libraryPlace: "Bibliotekerne",
altText: "Logo",
};
31 changes: 18 additions & 13 deletions src/stories/Library/logo/Logo.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
import "../../../styles/css/base.css";
import clsx from "clsx";
import logo from "./logo.png";

export type LogoProps = {
fallback: boolean;
hasImage: boolean;
libraryName: string;
libraryPlace?: string;
altText: string;
};

const Logo = (props: LogoProps) => {
const { fallback, libraryName, altText } = props;

return fallback ? (
<div className="logo-fallback">
<p className="logo-fallback__text-name">{libraryName}</p>
<p className="logo-fallback__text-libraries">Bibliotekerne</p>
</div>
) : (
<div>
<img className="logo" src={logo} alt={altText} />
</div>
const Logo = ({ hasImage, libraryName, libraryPlace, altText }: LogoProps) => {
return (
<a href="/" className="logo" aria-label="Gå til forsiden">
<figure className="logo__content">
{hasImage && <img src={logo} alt={altText} />}
<div
className={clsx("logo__description", {
"logo__description--has-image": hasImage,
})}
>
<p className="logo__library-name">{libraryName}</p>
{libraryPlace && <p>{libraryPlace}</p>}
</div>
</figure>
</a>
);
};

Expand Down
27 changes: 18 additions & 9 deletions src/stories/Library/logo/logo.scss
Original file line number Diff line number Diff line change
@@ -1,30 +1,39 @@
.logo {
text-decoration: none;
height: 100%;
width: auto;
display: flex;
align-items: center;
justify-content: center;

img {
display: none;

height: 100px;
width: auto;

@include media-query__small {
display: block;
}
}
}

.logo-fallback {
.logo__description {
@include typography($typo__body-small);
}

.logo-fallback__text-name {
.logo__library-name {
font-weight: 700;
}

.logo-fallback__text-libraries {
font-weight: 300;
.logo__description--has-image {
@include media-query__small {
display: none;
}
}

.logo-fallback--has-image {
@include media-query__small {
.has-burger-menu .header__menu-navigation-mobile .logo {
img {
display: none;
}
.logo__description--has-image {
display: block;
}
}
14 changes: 3 additions & 11 deletions src/stories/Library/rich-text/rich-text.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ $_max-width-rich-text: $block-max-width__small;
ol > li,
ul > li {
$_dash-width: 21px;
$_dash-width--wide: 33px;

position: relative;
padding-left: $_dash-width + $s-md;
Expand All @@ -39,19 +38,11 @@ $_max-width-rich-text: $block-max-width__small;
width: $_dash-width;
text-align: center;
}

@include media-query__medium {
padding-left: $_dash-width--wide + $s-lg;

&::before {
width: $_dash-width--wide;
}
}
}

ul > li::before {
content: "";
height: 1px;
height: 2px;
background-color: $color__global-black;
}

Expand All @@ -68,8 +59,9 @@ $_max-width-rich-text: $block-max-width__small;
)
);

top: 0;
font-weight: normal;
line-height: 0;
line-height: normal;
counter-increment: list;
content: counter(list) ".";
}
Expand Down

0 comments on commit dbc6110

Please sign in to comment.