@reykjavik/hanna-react 0.10.59 → 0.10.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AccordionList.js +3 -28
- package/ActionCards.js +2 -4
- package/Alert.js +7 -32
- package/ArticleCards.js +2 -4
- package/ArticleCarousel/_ArticleCarouselCard.js +4 -6
- package/ArticleCarousel.js +3 -5
- package/ArticleMeta.js +3 -28
- package/Attention.js +3 -5
- package/BasicTable.js +5 -7
- package/BgBox.js +3 -5
- package/Bling.js +3 -5
- package/BlockBreak.js +2 -4
- package/BlockQuote.js +2 -4
- package/BreadCrumbs.js +2 -4
- package/ButtonBack.js +3 -5
- package/ButtonBar.js +3 -5
- package/ButtonPrimary.js +3 -5
- package/ButtonSecondary.js +3 -5
- package/ButtonTertiary.js +3 -5
- package/CHANGELOG.md +24 -0
- package/Carousel.js +3 -5
- package/CarouselStepper.js +3 -5
- package/CenterColumn.js +3 -5
- package/Checkbox.js +3 -5
- package/CheckboxButtonsGroup.js +4 -6
- package/CheckboxGroup.js +4 -6
- package/CityBlock.js +3 -5
- package/ContactBubble.js +4 -29
- package/ContentArticle.js +8 -10
- package/ContentImage.js +3 -5
- package/Datepicker.js +6 -31
- package/ExtraLinks.js +4 -17
- package/FeatureList.js +3 -5
- package/FieldGroup.js +3 -5
- package/FileInput.d.ts +16 -1
- package/FileInput.js +24 -61
- package/Foonote.js +2 -4
- package/FooterBadges.js +2 -4
- package/FooterInfo.js +3 -5
- package/Footnote.js +2 -4
- package/Form.js +3 -5
- package/FormField.js +3 -28
- package/Gallery/_GalleryItem.js +6 -42
- package/Gallery/_GalleryModal.js +6 -31
- package/Gallery/_GalleryModalContext.js +2 -4
- package/Gallery/_GalleryModalItem.js +4 -17
- package/Gallery.js +6 -31
- package/GridBlocks.js +5 -7
- package/Heading.js +3 -5
- package/HeroBlock.js +5 -7
- package/IframeBlock.d.ts +5 -1
- package/IframeBlock.js +6 -8
- package/Illustration.js +3 -5
- package/ImageCards.js +4 -17
- package/InfoBlock.js +2 -4
- package/InfoHero.js +7 -9
- package/IslandBlock.js +3 -5
- package/IslandPageBlock.js +3 -5
- package/LabeledTextBlock.js +4 -6
- package/Layout.js +4 -6
- package/MainMenu/_Auxiliary.js +2 -4
- package/MainMenu/_PrimaryPanel.js +3 -5
- package/MainMenu.js +5 -30
- package/MiniMetrics.js +4 -6
- package/Modal.js +3 -5
- package/NameCard.js +5 -7
- package/NameCards.js +3 -5
- package/NewsHero.js +6 -8
- package/PageFilter.js +4 -6
- package/PageHeading.js +3 -5
- package/Picture.js +4 -6
- package/ProcessOverview.js +3 -5
- package/PullQuote.js +2 -4
- package/RadioButtonsGroup.js +4 -6
- package/RadioGroup.js +4 -6
- package/RelatedLinks.js +2 -4
- package/RowBlock.js +3 -5
- package/RowBlockColumn.js +3 -5
- package/SearchInput.js +5 -41
- package/SearchResults/_SearchResultsItem.js +3 -5
- package/SearchResults.js +7 -32
- package/SeenEffect.js +3 -16
- package/Selectbox.js +6 -42
- package/ShareButtons.js +2 -24
- package/Sharpie.js +3 -5
- package/SiteSearchAutocomplete.js +5 -41
- package/SiteSearchCurtain.js +3 -28
- package/SiteSearchInput.d.ts +1 -1
- package/SiteSearchInput.js +4 -40
- package/Skeleton.js +4 -6
- package/SubHeading.js +3 -5
- package/Tabs.js +3 -28
- package/TagPill.js +5 -18
- package/TextBlock.js +3 -5
- package/TextButton.js +3 -5
- package/TextInput.js +5 -41
- package/VSpacer.js +3 -5
- package/VerticalTabsTOC.js +3 -28
- package/WizardLayout.js +3 -5
- package/WizardLayoutClose.js +3 -5
- package/WizardStepper.js +3 -5
- package/_abstract/_AbstractCarousel.js +45 -95
- package/_abstract/_Blings.js +3 -5
- package/_abstract/_Block.js +5 -7
- package/_abstract/_Button.js +4 -17
- package/_abstract/_CardList.js +4 -6
- package/_abstract/_Image.js +3 -5
- package/_abstract/_Link.js +2 -4
- package/_abstract/_Quote.js +2 -4
- package/_abstract/_TogglerGroup.js +8 -8
- package/_abstract/_TogglerGroupField.js +6 -19
- package/_abstract/_TogglerInput.js +4 -17
- package/_abstract/breakOnNL.js +2 -4
- package/assets.d.ts +1 -1
- package/package.json +4 -378
- package/utils/env.js +2 -4
- package/utils/seenEffect.d.ts +3 -4
- package/utils/seenEffect.js +20 -19
- package/utils/useScrollbarWidthCSSVar.js +2 -4
- package/utils.js +3 -16
- package/esm/AccordionList.d.ts +0 -17
- package/esm/AccordionList.js +0 -24
- package/esm/ActionCards.d.ts +0 -5
- package/esm/ActionCards.js +0 -9
- package/esm/Alert.d.ts +0 -49
- package/esm/Alert.js +0 -92
- package/esm/ArticleCards.d.ts +0 -6
- package/esm/ArticleCards.js +0 -4
- package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts +0 -27
- package/esm/ArticleCarousel/_ArticleCarouselCard.js +0 -24
- package/esm/ArticleCarousel.d.ts +0 -12
- package/esm/ArticleCarousel.js +0 -8
- package/esm/ArticleMeta.d.ts +0 -10
- package/esm/ArticleMeta.js +0 -19
- package/esm/Attention.d.ts +0 -7
- package/esm/Attention.js +0 -4
- package/esm/BasicTable.d.ts +0 -12
- package/esm/BasicTable.js +0 -29
- package/esm/BgBox.d.ts +0 -8
- package/esm/BgBox.js +0 -9
- package/esm/Bling.d.ts +0 -81
- package/esm/Bling.js +0 -44
- package/esm/BlockBreak.d.ts +0 -2
- package/esm/BlockBreak.js +0 -6
- package/esm/BlockQuote.d.ts +0 -4
- package/esm/BlockQuote.js +0 -4
- package/esm/BreadCrumbs.d.ts +0 -11
- package/esm/BreadCrumbs.js +0 -28
- package/esm/ButtonBack.d.ts +0 -7
- package/esm/ButtonBack.js +0 -4
- package/esm/ButtonBar.d.ts +0 -16
- package/esm/ButtonBar.js +0 -14
- package/esm/ButtonPrimary.d.ts +0 -7
- package/esm/ButtonPrimary.js +0 -4
- package/esm/ButtonSecondary.d.ts +0 -7
- package/esm/ButtonSecondary.js +0 -4
- package/esm/ButtonTertiary.d.ts +0 -12
- package/esm/ButtonTertiary.js +0 -15
- package/esm/Carousel.d.ts +0 -4
- package/esm/Carousel.js +0 -4
- package/esm/CarouselStepper.d.ts +0 -4
- package/esm/CarouselStepper.js +0 -4
- package/esm/CenterColumn.d.ts +0 -7
- package/esm/CenterColumn.js +0 -7
- package/esm/Checkbox.d.ts +0 -4
- package/esm/Checkbox.js +0 -4
- package/esm/CheckboxButtonsGroup.d.ts +0 -11
- package/esm/CheckboxButtonsGroup.js +0 -14
- package/esm/CheckboxGroup.d.ts +0 -9
- package/esm/CheckboxGroup.js +0 -7
- package/esm/CityBlock.d.ts +0 -23
- package/esm/CityBlock.js +0 -18
- package/esm/ContactBubble.d.ts +0 -58
- package/esm/ContactBubble.js +0 -148
- package/esm/ContentArticle.d.ts +0 -15
- package/esm/ContentArticle.js +0 -21
- package/esm/ContentImage.d.ts +0 -8
- package/esm/ContentImage.js +0 -18
- package/esm/Datepicker.d.ts +0 -39
- package/esm/Datepicker.js +0 -63
- package/esm/ExtraLinks.d.ts +0 -18
- package/esm/ExtraLinks.js +0 -34
- package/esm/FeatureList.d.ts +0 -12
- package/esm/FeatureList.js +0 -16
- package/esm/FieldGroup.d.ts +0 -9
- package/esm/FieldGroup.js +0 -9
- package/esm/FileInput.d.ts +0 -17
- package/esm/FileInput.js +0 -154
- package/esm/Foonote.d.ts +0 -12
- package/esm/Foonote.js +0 -7
- package/esm/FooterBadges.d.ts +0 -9
- package/esm/FooterBadges.js +0 -12
- package/esm/FooterInfo.d.ts +0 -18
- package/esm/FooterInfo.js +0 -9
- package/esm/Footnote.d.ts +0 -6
- package/esm/Footnote.js +0 -3
- package/esm/Form.d.ts +0 -7
- package/esm/Form.js +0 -10
- package/esm/FormField.d.ts +0 -65
- package/esm/FormField.js +0 -91
- package/esm/Gallery/_GalleryItem.d.ts +0 -8
- package/esm/Gallery/_GalleryItem.js +0 -30
- package/esm/Gallery/_GalleryModal.d.ts +0 -6
- package/esm/Gallery/_GalleryModal.js +0 -54
- package/esm/Gallery/_GalleryModalContext.d.ts +0 -9
- package/esm/Gallery/_GalleryModalContext.js +0 -3
- package/esm/Gallery/_GalleryModalItem.d.ts +0 -3
- package/esm/Gallery/_GalleryModalItem.js +0 -22
- package/esm/Gallery.d.ts +0 -17
- package/esm/Gallery.js +0 -27
- package/esm/GridBlocks.d.ts +0 -26
- package/esm/GridBlocks.js +0 -24
- package/esm/Heading.d.ts +0 -16
- package/esm/Heading.js +0 -17
- package/esm/HeroBlock.d.ts +0 -19
- package/esm/HeroBlock.js +0 -21
- package/esm/IframeBlock.d.ts +0 -23
- package/esm/IframeBlock.js +0 -26
- package/esm/Illustration.d.ts +0 -13
- package/esm/Illustration.js +0 -8
- package/esm/ImageCards.d.ts +0 -8
- package/esm/ImageCards.js +0 -22
- package/esm/InfoBlock.d.ts +0 -17
- package/esm/InfoBlock.js +0 -13
- package/esm/InfoHero.d.ts +0 -17
- package/esm/InfoHero.js +0 -82
- package/esm/IslandBlock.d.ts +0 -25
- package/esm/IslandBlock.js +0 -16
- package/esm/IslandPageBlock.d.ts +0 -24
- package/esm/IslandPageBlock.js +0 -16
- package/esm/LabeledTextBlock.d.ts +0 -11
- package/esm/LabeledTextBlock.js +0 -14
- package/esm/Layout.d.ts +0 -33
- package/esm/Layout.js +0 -52
- package/esm/MainMenu/_Auxiliary.d.ts +0 -6
- package/esm/MainMenu/_Auxiliary.js +0 -13
- package/esm/MainMenu/_PrimaryPanel.d.ts +0 -13
- package/esm/MainMenu/_PrimaryPanel.js +0 -22
- package/esm/MainMenu.d.ts +0 -48
- package/esm/MainMenu.js +0 -136
- package/esm/MiniMetrics.d.ts +0 -8
- package/esm/MiniMetrics.js +0 -12
- package/esm/Modal.d.ts +0 -10
- package/esm/Modal.js +0 -14
- package/esm/NameCard.d.ts +0 -64
- package/esm/NameCard.js +0 -82
- package/esm/NameCards.d.ts +0 -6
- package/esm/NameCards.js +0 -7
- package/esm/NewsHero.d.ts +0 -14
- package/esm/NewsHero.js +0 -86
- package/esm/PageFilter.d.ts +0 -17
- package/esm/PageFilter.js +0 -15
- package/esm/PageHeading.d.ts +0 -10
- package/esm/PageHeading.js +0 -12
- package/esm/Picture.d.ts +0 -7
- package/esm/Picture.js +0 -8
- package/esm/ProcessOverview.d.ts +0 -13
- package/esm/ProcessOverview.js +0 -17
- package/esm/PullQuote.d.ts +0 -4
- package/esm/PullQuote.js +0 -4
- package/esm/RadioButtonsGroup.d.ts +0 -11
- package/esm/RadioButtonsGroup.js +0 -14
- package/esm/RadioGroup.d.ts +0 -13
- package/esm/RadioGroup.js +0 -7
- package/esm/RelatedLinks.d.ts +0 -20
- package/esm/RelatedLinks.js +0 -26
- package/esm/RowBlock.d.ts +0 -12
- package/esm/RowBlock.js +0 -9
- package/esm/RowBlockColumn.d.ts +0 -8
- package/esm/RowBlockColumn.js +0 -11
- package/esm/SearchInput.d.ts +0 -18
- package/esm/SearchInput.js +0 -33
- package/esm/SearchResults/_SearchResultsItem.d.ts +0 -18
- package/esm/SearchResults/_SearchResultsItem.js +0 -15
- package/esm/SearchResults.d.ts +0 -33
- package/esm/SearchResults.js +0 -109
- package/esm/SeenEffect.d.ts +0 -4
- package/esm/SeenEffect.js +0 -19
- package/esm/Selectbox.d.ts +0 -8
- package/esm/Selectbox.js +0 -46
- package/esm/ShareButtons.d.ts +0 -9
- package/esm/ShareButtons.js +0 -51
- package/esm/Sharpie.d.ts +0 -23
- package/esm/Sharpie.js +0 -22
- package/esm/SiteSearchAutocomplete.d.ts +0 -40
- package/esm/SiteSearchAutocomplete.js +0 -58
- package/esm/SiteSearchCurtain.d.ts +0 -6
- package/esm/SiteSearchCurtain.js +0 -33
- package/esm/SiteSearchInput.d.ts +0 -24
- package/esm/SiteSearchInput.js +0 -40
- package/esm/Skeleton.d.ts +0 -25
- package/esm/Skeleton.js +0 -30
- package/esm/SubHeading.d.ts +0 -10
- package/esm/SubHeading.js +0 -13
- package/esm/Tabs.d.ts +0 -35
- package/esm/Tabs.js +0 -94
- package/esm/TagPill.d.ts +0 -27
- package/esm/TagPill.js +0 -43
- package/esm/TextBlock.d.ts +0 -15
- package/esm/TextBlock.js +0 -15
- package/esm/TextButton.d.ts +0 -9
- package/esm/TextButton.js +0 -9
- package/esm/TextInput.d.ts +0 -16
- package/esm/TextInput.js +0 -35
- package/esm/VSpacer.d.ts +0 -24
- package/esm/VSpacer.js +0 -41
- package/esm/VerticalTabsTOC.d.ts +0 -14
- package/esm/VerticalTabsTOC.js +0 -68
- package/esm/WizardLayout.d.ts +0 -15
- package/esm/WizardLayout.js +0 -30
- package/esm/WizardLayoutClose.d.ts +0 -3
- package/esm/WizardLayoutClose.js +0 -4
- package/esm/WizardStepper.d.ts +0 -36
- package/esm/WizardStepper.js +0 -25
- package/esm/_abstract/_AbstractCarousel.d.ts +0 -25
- package/esm/_abstract/_AbstractCarousel.js +0 -130
- package/esm/_abstract/_Blings.d.ts +0 -11
- package/esm/_abstract/_Blings.js +0 -12
- package/esm/_abstract/_Block.d.ts +0 -22
- package/esm/_abstract/_Block.js +0 -24
- package/esm/_abstract/_Button.d.ts +0 -40
- package/esm/_abstract/_Button.js +0 -47
- package/esm/_abstract/_CardList.d.ts +0 -30
- package/esm/_abstract/_CardList.js +0 -38
- package/esm/_abstract/_Image.d.ts +0 -36
- package/esm/_abstract/_Image.js +0 -27
- package/esm/_abstract/_Link.d.ts +0 -27
- package/esm/_abstract/_Link.js +0 -24
- package/esm/_abstract/_Quote.d.ts +0 -9
- package/esm/_abstract/_Quote.js +0 -8
- package/esm/_abstract/_TogglerGroup.d.ts +0 -31
- package/esm/_abstract/_TogglerGroup.js +0 -29
- package/esm/_abstract/_TogglerGroupField.d.ts +0 -17
- package/esm/_abstract/_TogglerGroupField.js +0 -22
- package/esm/_abstract/_TogglerInput.d.ts +0 -22
- package/esm/_abstract/_TogglerInput.js +0 -33
- package/esm/_abstract/breakOnNL.d.ts +0 -2
- package/esm/_abstract/breakOnNL.js +0 -8
- package/esm/assets.d.ts +0 -42
- package/esm/assets.js +0 -56
- package/esm/constants.d.ts +0 -39
- package/esm/constants.js +0 -22
- package/esm/focus-visible.d.ts +0 -1
- package/esm/focus-visible.js +0 -1
- package/esm/package.json +0 -1
- package/esm/utils/env.d.ts +0 -1
- package/esm/utils/env.js +0 -8
- package/esm/utils/seenEffect.d.ts +0 -28
- package/esm/utils/seenEffect.js +0 -73
- package/esm/utils/useFormatMonitor.d.ts +0 -38
- package/esm/utils/useFormatMonitor.js +0 -41
- package/esm/utils/useGetSVGtext.d.ts +0 -6
- package/esm/utils/useGetSVGtext.js +0 -19
- package/esm/utils/useMenuToggling.d.ts +0 -8
- package/esm/utils/useMenuToggling.js +0 -62
- package/esm/utils/useScrollbarWidthCSSVar.d.ts +0 -1
- package/esm/utils/useScrollbarWidthCSSVar.js +0 -3
- package/esm/utils.d.ts +0 -2
- package/esm/utils.js +0 -2
package/esm/GridBlocks.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import { getEfnistaknUrl } from '@reykjavik/hanna-utils/assets';
|
|
4
|
-
import Image from './_abstract/_Image';
|
|
5
|
-
import { Link } from './_abstract/_Link';
|
|
6
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
7
|
-
import ButtonTertiary from './ButtonTertiary';
|
|
8
|
-
const GridBlocks = (props) => {
|
|
9
|
-
const { blocks, twocol, startSeen } = props;
|
|
10
|
-
const [ref] = useSeenEffect(startSeen);
|
|
11
|
-
return (React.createElement("div", { className: getBemClass('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
|
|
12
|
-
const imageProps = icon ? { src: getEfnistaknUrl(icon) } : image;
|
|
13
|
-
return (React.createElement("div", { key: i, className: "GridBlocks__item" },
|
|
14
|
-
imageProps && React.createElement(Image, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),
|
|
15
|
-
React.createElement("div", { className: "GridBlocks__textwrap" },
|
|
16
|
-
React.createElement("h3", { className: "GridBlocks__item__title" }, href != null ? (React.createElement(Link, { className: "GridBlocks__item__titlelink", href: href }, title)) : (title)),
|
|
17
|
-
React.createElement("div", { className: "GridBlocks__item__summary" }, summary),
|
|
18
|
-
React.createElement("ul", { className: "GridBlocks__links" }, links.map((link, i) => {
|
|
19
|
-
return (React.createElement("li", { key: i, className: "GridBlocks__link" },
|
|
20
|
-
React.createElement(ButtonTertiary, Object.assign({}, link))));
|
|
21
|
-
})))));
|
|
22
|
-
})));
|
|
23
|
-
};
|
|
24
|
-
export default GridBlocks;
|
package/esm/Heading.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ComponentLayoutProps } from './constants';
|
|
3
|
-
declare const sizes: {
|
|
4
|
-
readonly small: "small";
|
|
5
|
-
/** Default value */
|
|
6
|
-
readonly normal: "";
|
|
7
|
-
readonly large: "large";
|
|
8
|
-
};
|
|
9
|
-
declare type HeadingSize = keyof typeof sizes;
|
|
10
|
-
export declare type HeadingProps = {
|
|
11
|
-
Tag?: 'h2' | 'h3';
|
|
12
|
-
size?: HeadingSize;
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
} & ComponentLayoutProps;
|
|
15
|
-
declare const Heading: (props: HeadingProps) => JSX.Element;
|
|
16
|
-
export default Heading;
|
package/esm/Heading.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
const sizes = {
|
|
4
|
-
small: 'small',
|
|
5
|
-
/** Default value */
|
|
6
|
-
normal: '',
|
|
7
|
-
large: 'large',
|
|
8
|
-
};
|
|
9
|
-
const Heading = (props) => {
|
|
10
|
-
const { size = 'normal', Tag = 'h2', align, wide, children } = props;
|
|
11
|
-
return (React.createElement(Tag, { className: getBemClass('Heading', [
|
|
12
|
-
sizes[size],
|
|
13
|
-
align === 'right' && 'align--' + align,
|
|
14
|
-
!align && wide && 'wide',
|
|
15
|
-
]) }, children));
|
|
16
|
-
};
|
|
17
|
-
export default Heading;
|
package/esm/HeroBlock.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Illustration } from '@reykjavik/hanna-utils/assets';
|
|
2
|
-
import { ButtonProps } from './_abstract/_Button';
|
|
3
|
-
import { ImageProps } from './_abstract/_Image';
|
|
4
|
-
import { SeenProp } from './utils/seenEffect';
|
|
5
|
-
declare type HeroBlockImageProps = {
|
|
6
|
-
illustration: Illustration;
|
|
7
|
-
image?: undefined;
|
|
8
|
-
} | {
|
|
9
|
-
image: ImageProps;
|
|
10
|
-
illustration?: undefined;
|
|
11
|
-
};
|
|
12
|
-
export declare type HeroBlockProps = {
|
|
13
|
-
title: string;
|
|
14
|
-
summary: string | JSX.Element;
|
|
15
|
-
primaryButton?: ButtonProps;
|
|
16
|
-
secondaryButton?: ButtonProps;
|
|
17
|
-
} & HeroBlockImageProps & SeenProp;
|
|
18
|
-
declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
|
|
19
|
-
export default HeroBlock;
|
package/esm/HeroBlock.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
|
|
3
|
-
import Image from './_abstract/_Image';
|
|
4
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
5
|
-
import ButtonPrimary from './ButtonPrimary';
|
|
6
|
-
import ButtonTertiary from './ButtonTertiary';
|
|
7
|
-
const HeroBlock = (props) => {
|
|
8
|
-
const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, } = props;
|
|
9
|
-
const hasButtons = Boolean(primaryButton || secondaryButton);
|
|
10
|
-
const imgProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
|
|
11
|
-
const [ref] = useSeenEffect(startSeen);
|
|
12
|
-
return (React.createElement("div", { className: "HeroBlock", ref: ref },
|
|
13
|
-
React.createElement("h1", { className: "HeroBlock__title" }, title),
|
|
14
|
-
React.createElement(Image, Object.assign({ className: "HeroBlock__image" }, imgProps)),
|
|
15
|
-
React.createElement("div", { className: "HeroBlock__summary" }, summary),
|
|
16
|
-
hasButtons && (React.createElement("div", { className: "HeroBlock__buttons" },
|
|
17
|
-
primaryButton && React.createElement(ButtonPrimary, Object.assign({}, primaryButton)),
|
|
18
|
-
' ',
|
|
19
|
-
secondaryButton && React.createElement(ButtonTertiary, Object.assign({}, secondaryButton))))));
|
|
20
|
-
};
|
|
21
|
-
export default HeroBlock;
|
package/esm/IframeBlock.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export declare type IframeBlockProps = {
|
|
2
|
-
src: string;
|
|
3
|
-
framed?: boolean;
|
|
4
|
-
compact?: boolean;
|
|
5
|
-
align?: 'right';
|
|
6
|
-
} & ({
|
|
7
|
-
/** Default: 'auto' ... which initializes "iframe-resizer" script */
|
|
8
|
-
height?: 'auto';
|
|
9
|
-
scrolling?: never;
|
|
10
|
-
} | {
|
|
11
|
-
height: number;
|
|
12
|
-
scrolling?: boolean | 'no' | 'yes';
|
|
13
|
-
});
|
|
14
|
-
/**
|
|
15
|
-
* When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
|
|
16
|
-
*
|
|
17
|
-
* ```js
|
|
18
|
-
* <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
|
|
19
|
-
* <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
|
|
20
|
-
* ```
|
|
21
|
-
*/
|
|
22
|
-
declare const IframeBlock: (props: IframeBlockProps) => JSX.Element;
|
|
23
|
-
export default IframeBlock;
|
package/esm/IframeBlock.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import IframeResizer from 'iframe-resizer-react';
|
|
4
|
-
/**
|
|
5
|
-
* When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
|
|
6
|
-
*
|
|
7
|
-
* ```js
|
|
8
|
-
* <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
|
|
9
|
-
* <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
|
|
10
|
-
* ```
|
|
11
|
-
*/
|
|
12
|
-
const IframeBlock = (props) => {
|
|
13
|
-
const { src, framed, compact, scrolling, height = 'auto', align } = props;
|
|
14
|
-
const className = getBemClass('IframeBlock', [
|
|
15
|
-
framed && 'framed',
|
|
16
|
-
compact && 'compact',
|
|
17
|
-
align === 'right' && 'align--' + align,
|
|
18
|
-
]);
|
|
19
|
-
return height === 'auto' ? (React.createElement(IframeResizer, { className: className, src: src })) : (React.createElement("iframe", { className: className, src: src,
|
|
20
|
-
// hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
|
|
21
|
-
// (Silly hack, don't rely on this)
|
|
22
|
-
height: height < 0 ? undefined : height,
|
|
23
|
-
// allow undefined to suppress scrolling attribute
|
|
24
|
-
scrolling: scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling }));
|
|
25
|
-
};
|
|
26
|
-
export default IframeBlock;
|
package/esm/Illustration.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
|
|
2
|
-
import { ImageProps } from './_abstract/_Image';
|
|
3
|
-
declare type IllustrationProps = {
|
|
4
|
-
children?: undefined;
|
|
5
|
-
} & ({
|
|
6
|
-
type: IllustrationName;
|
|
7
|
-
image?: undefined;
|
|
8
|
-
} | {
|
|
9
|
-
image: ImageProps;
|
|
10
|
-
type?: undefined;
|
|
11
|
-
});
|
|
12
|
-
declare const Illustration: (props: IllustrationProps) => JSX.Element;
|
|
13
|
-
export default Illustration;
|
package/esm/Illustration.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { getIllustrationUrl, } from '@reykjavik/hanna-utils/assets';
|
|
3
|
-
import Image from './_abstract/_Image';
|
|
4
|
-
const Illustration = (props) => {
|
|
5
|
-
const imgProps = props.type ? { src: getIllustrationUrl(props.type) } : props.image;
|
|
6
|
-
return React.createElement(Image, Object.assign({ className: "Illustration" }, imgProps));
|
|
7
|
-
};
|
|
8
|
-
export default Illustration;
|
package/esm/ImageCards.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/_CardList';
|
|
2
|
-
import { SeenProp } from './utils/seenEffect';
|
|
3
|
-
export declare type ImageCardProps = ICP;
|
|
4
|
-
declare type _ImageCardProps = ImageCardListProps & {
|
|
5
|
-
background?: boolean;
|
|
6
|
-
} & SeenProp;
|
|
7
|
-
declare const ImageCards: (props: _ImageCardProps) => JSX.Element;
|
|
8
|
-
export default ImageCards;
|
package/esm/ImageCards.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
14
|
-
import { CardList, } from './_abstract/_CardList';
|
|
15
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
16
|
-
const ImageCards = (props) => {
|
|
17
|
-
const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
|
|
18
|
-
const [ref] = useSeenEffect(startSeen);
|
|
19
|
-
return (React.createElement("div", { className: getBemClass('ImageCards', background && 'background'), ref: ref },
|
|
20
|
-
React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
|
|
21
|
-
};
|
|
22
|
-
export default ImageCards;
|
package/esm/InfoBlock.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { SeenProp } from './utils/seenEffect';
|
|
2
|
-
export declare type InfoBlockProps = {
|
|
3
|
-
title: string;
|
|
4
|
-
subtitle: string | JSX.Element;
|
|
5
|
-
items: Array<string | JSX.Element>;
|
|
6
|
-
} & ({
|
|
7
|
-
attention?: undefined;
|
|
8
|
-
extraInfo?: undefined;
|
|
9
|
-
} | {
|
|
10
|
-
attention: string | JSX.Element;
|
|
11
|
-
extraInfo?: undefined;
|
|
12
|
-
} | {
|
|
13
|
-
extraInfo: string | JSX.Element;
|
|
14
|
-
attention?: undefined;
|
|
15
|
-
}) & SeenProp;
|
|
16
|
-
declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
|
|
17
|
-
export default InfoBlock;
|
package/esm/InfoBlock.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
3
|
-
const InfoBlock = (props) => {
|
|
4
|
-
const { title, subtitle, items, startSeen } = props;
|
|
5
|
-
const [ref] = useSeenEffect(startSeen);
|
|
6
|
-
return (React.createElement("div", { className: "InfoBlock", ref: ref },
|
|
7
|
-
React.createElement("h2", { className: "InfoBlock__title" }, title),
|
|
8
|
-
React.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
|
|
9
|
-
React.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),
|
|
10
|
-
'extraInfo' in props && (React.createElement("div", { className: "InfoBlock__extrainfo" }, props.extraInfo)),
|
|
11
|
-
'attention' in props && (React.createElement("div", { className: "InfoBlock__attention" }, props.attention))));
|
|
12
|
-
};
|
|
13
|
-
export default InfoBlock;
|
package/esm/InfoHero.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ButtonProps } from './_abstract/_Button';
|
|
2
|
-
import { ImageProps } from './_abstract/_Image';
|
|
3
|
-
import { Alignment } from './constants';
|
|
4
|
-
declare type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
|
|
5
|
-
export declare type InfoHeroProps = {
|
|
6
|
-
title: string;
|
|
7
|
-
titleBlurb?: string | JSX.Element;
|
|
8
|
-
/** Inserts `<br/>`s on `\n`. Collapses multiple `\n`s. */
|
|
9
|
-
subTitle?: string;
|
|
10
|
-
blurb?: string | JSX.Element;
|
|
11
|
-
buttons?: Array<ButtonProps>;
|
|
12
|
-
align?: Alignment;
|
|
13
|
-
image?: ImageProps;
|
|
14
|
-
blingType?: BlingOptions;
|
|
15
|
-
};
|
|
16
|
-
declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
|
|
17
|
-
export default InfoHero;
|
package/esm/InfoHero.js
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import Blings from './_abstract/_Blings';
|
|
4
|
-
import Image from './_abstract/_Image';
|
|
5
|
-
import breakOnNL from './_abstract/breakOnNL';
|
|
6
|
-
import ButtonTertiary from './ButtonTertiary';
|
|
7
|
-
import { aligns } from './constants';
|
|
8
|
-
const blingOptions = {
|
|
9
|
-
waves: [
|
|
10
|
-
{
|
|
11
|
-
type: 'waves-medium',
|
|
12
|
-
color: 'primary',
|
|
13
|
-
align: 'left',
|
|
14
|
-
vertical: 'up',
|
|
15
|
-
parent: 'bottom',
|
|
16
|
-
},
|
|
17
|
-
],
|
|
18
|
-
'sunny-waves': [
|
|
19
|
-
{
|
|
20
|
-
type: 'waves-medium',
|
|
21
|
-
align: 'left',
|
|
22
|
-
parent: 'bottom',
|
|
23
|
-
vertical: 'up',
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
type: 'circle-medium',
|
|
27
|
-
color: 'secondary',
|
|
28
|
-
align: 'right-center',
|
|
29
|
-
parent: 'top',
|
|
30
|
-
vertical: 'down-ish',
|
|
31
|
-
},
|
|
32
|
-
],
|
|
33
|
-
triangles: [
|
|
34
|
-
{
|
|
35
|
-
type: 'triangle-large',
|
|
36
|
-
align: 'left-center',
|
|
37
|
-
parent: 'bottom',
|
|
38
|
-
vertical: 'up',
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
type: 'triangle-small',
|
|
42
|
-
color: 'secondary',
|
|
43
|
-
align: 'right',
|
|
44
|
-
parent: 'top-ish',
|
|
45
|
-
vertical: 'down-ish',
|
|
46
|
-
overlay: true,
|
|
47
|
-
},
|
|
48
|
-
],
|
|
49
|
-
circles: [
|
|
50
|
-
{
|
|
51
|
-
type: 'circle-large',
|
|
52
|
-
align: 'left',
|
|
53
|
-
parent: 'top',
|
|
54
|
-
vertical: 'down',
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
type: 'circle-small',
|
|
58
|
-
color: 'secondary',
|
|
59
|
-
align: 'right',
|
|
60
|
-
parent: 'bottom-ish',
|
|
61
|
-
vertical: 'up-ish',
|
|
62
|
-
overlay: true,
|
|
63
|
-
},
|
|
64
|
-
],
|
|
65
|
-
};
|
|
66
|
-
const InfoHero = (props) => {
|
|
67
|
-
const { title, titleBlurb, subTitle, blurb, image, buttons = [], align, blingType, } = props;
|
|
68
|
-
const showButtons = Boolean(buttons.length);
|
|
69
|
-
const alignment = align && aligns[align] ? align : 'right';
|
|
70
|
-
const blings = (blingType && blingOptions[blingType]) ||
|
|
71
|
-
blingOptions.waves; // default to `waves`
|
|
72
|
-
return (React.createElement("div", { className: getBemClass('InfoHero', 'align--' + alignment) },
|
|
73
|
-
React.createElement("div", { className: "InfoHero__content" },
|
|
74
|
-
React.createElement("h1", { className: "InfoHero__title" }, title),
|
|
75
|
-
titleBlurb && React.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),
|
|
76
|
-
subTitle && React.createElement("div", { className: "InfoHero__subtitle" }, breakOnNL(subTitle)),
|
|
77
|
-
blurb && React.createElement("div", { className: "InfoHero__blurb" }, blurb),
|
|
78
|
-
showButtons && (React.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (React.createElement(ButtonTertiary, Object.assign({ key: i }, buttonProps))))))),
|
|
79
|
-
React.createElement(Image, Object.assign({ className: "InfoHero__image", altText: title }, image, { placeholder: true })),
|
|
80
|
-
React.createElement(Blings, { blings: blings, mirror: alignment === 'right' })));
|
|
81
|
-
};
|
|
82
|
-
export default InfoHero;
|
package/esm/IslandBlock.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Formheimur } from '@reykjavik/hanna-utils/assets';
|
|
2
|
-
import { BlockItem } from './_abstract/_Block';
|
|
3
|
-
import { ImageProps } from './_abstract/_Image';
|
|
4
|
-
import { SeenProp } from './utils/seenEffect';
|
|
5
|
-
import { Alignment } from './constants';
|
|
6
|
-
declare type IslandBaseBlockProps = {
|
|
7
|
-
align?: Alignment;
|
|
8
|
-
};
|
|
9
|
-
declare type IslandImageBlock = {
|
|
10
|
-
content: BlockItem;
|
|
11
|
-
} & ({
|
|
12
|
-
shapes: Formheimur;
|
|
13
|
-
image?: undefined;
|
|
14
|
-
} | {
|
|
15
|
-
image: ImageProps;
|
|
16
|
-
shapes?: undefined;
|
|
17
|
-
});
|
|
18
|
-
declare type IslandContentBlocks = {
|
|
19
|
-
content: Array<BlockItem>;
|
|
20
|
-
shapes?: undefined;
|
|
21
|
-
image?: undefined;
|
|
22
|
-
};
|
|
23
|
-
export declare type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & SeenProp;
|
|
24
|
-
declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
|
|
25
|
-
export default IslandBlock;
|
package/esm/IslandBlock.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { getFormheimurUrl } from '@reykjavik/hanna-utils/assets';
|
|
3
|
-
import Block from './_abstract/_Block';
|
|
4
|
-
import { aligns } from './constants';
|
|
5
|
-
const IslandBlock = (props) => {
|
|
6
|
-
const { align, content, shapes, image, startSeen } = props;
|
|
7
|
-
const alignment = align && aligns[align] ? align : 'right';
|
|
8
|
-
const blockProps = Array.isArray(content)
|
|
9
|
-
? { content }
|
|
10
|
-
: {
|
|
11
|
-
content,
|
|
12
|
-
image: shapes ? { src: getFormheimurUrl(shapes), inline: true } : image || {},
|
|
13
|
-
};
|
|
14
|
-
return (React.createElement(Block, Object.assign({ bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
|
|
15
|
-
};
|
|
16
|
-
export default IslandBlock;
|
package/esm/IslandPageBlock.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Illustration } from '@reykjavik/hanna-utils/assets';
|
|
2
|
-
import { BlockItem } from './_abstract/_Block';
|
|
3
|
-
import { ImageProps } from './_abstract/_Image';
|
|
4
|
-
import { SeenProp } from './utils/seenEffect';
|
|
5
|
-
import { Alignment } from './constants';
|
|
6
|
-
declare const backgrounds: {
|
|
7
|
-
none: undefined;
|
|
8
|
-
gray: string;
|
|
9
|
-
secondary: string;
|
|
10
|
-
};
|
|
11
|
-
declare type Background = keyof typeof backgrounds;
|
|
12
|
-
declare type IslandPageImageProps = {
|
|
13
|
-
illustration: Illustration;
|
|
14
|
-
image?: undefined;
|
|
15
|
-
} | {
|
|
16
|
-
illustration?: undefined;
|
|
17
|
-
image: ImageProps;
|
|
18
|
-
};
|
|
19
|
-
export declare type IslandPageBlockProps = BlockItem & IslandPageImageProps & {
|
|
20
|
-
align?: Alignment;
|
|
21
|
-
background?: Background;
|
|
22
|
-
} & SeenProp;
|
|
23
|
-
declare const IslandPageBlock: (props: IslandPageBlockProps) => JSX.Element;
|
|
24
|
-
export default IslandPageBlock;
|
package/esm/IslandPageBlock.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
|
|
3
|
-
import Block from './_abstract/_Block';
|
|
4
|
-
import { aligns } from './constants';
|
|
5
|
-
const backgrounds = {
|
|
6
|
-
none: undefined,
|
|
7
|
-
gray: 'gray',
|
|
8
|
-
secondary: 'secondary',
|
|
9
|
-
};
|
|
10
|
-
const IslandPageBlock = (props) => {
|
|
11
|
-
const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
|
|
12
|
-
const alignment = align && aligns[align] ? align : 'right';
|
|
13
|
-
const bg = backgrounds[background || 'none'];
|
|
14
|
-
return (React.createElement(Block, { bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: getIllustrationUrl(illustration) } : image || {}, startSeen: startSeen }));
|
|
15
|
-
};
|
|
16
|
-
export default IslandPageBlock;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
import { ButtonProps } from './_abstract/_Button';
|
|
3
|
-
import { SeenProp } from './utils/seenEffect';
|
|
4
|
-
export declare type LabeledTextBlockProps = {
|
|
5
|
-
label: string;
|
|
6
|
-
summary: string | ReactElement;
|
|
7
|
-
wide?: boolean;
|
|
8
|
-
buttons?: Array<ButtonProps>;
|
|
9
|
-
} & SeenProp;
|
|
10
|
-
declare const LabeledTextBlock: (props: LabeledTextBlockProps) => JSX.Element;
|
|
11
|
-
export default LabeledTextBlock;
|
package/esm/LabeledTextBlock.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
4
|
-
import ButtonTertiary from './ButtonTertiary';
|
|
5
|
-
const LabeledTextBlock = (props) => {
|
|
6
|
-
const { label, summary, wide, buttons = [], startSeen } = props;
|
|
7
|
-
const [ref] = useSeenEffect(startSeen);
|
|
8
|
-
return (React.createElement("div", { className: getBemClass('LabeledTextBlock', wide && 'wide'), ref: ref },
|
|
9
|
-
React.createElement("h2", { className: "LabeledTextBlock__label" }, label),
|
|
10
|
-
React.createElement("div", { className: "LabeledTextBlock__summary" },
|
|
11
|
-
summary,
|
|
12
|
-
buttons.map((button, i) => (React.createElement(ButtonTertiary, Object.assign({ key: i }, button)))))));
|
|
13
|
-
};
|
|
14
|
-
export default LabeledTextBlock;
|
package/esm/Layout.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { SSRSupport } from '@hugsmidjan/react/hooks';
|
|
3
|
-
import { BemPropsModifier } from '@hugsmidjan/react/types';
|
|
4
|
-
import { HannaColorTheme } from '@reykjavik/hanna-css';
|
|
5
|
-
import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
|
|
6
|
-
export declare type LayoutI18n = {
|
|
7
|
-
lang?: string;
|
|
8
|
-
skipLinkLabel: string;
|
|
9
|
-
closeMenuLabel: string;
|
|
10
|
-
closeMenuLabelLong?: string;
|
|
11
|
-
};
|
|
12
|
-
export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
|
|
13
|
-
declare type LayoutProps = {
|
|
14
|
-
globalAlerts?: ReactNode;
|
|
15
|
-
mainChildren?: ReactNode;
|
|
16
|
-
navChildren?: ReactNode;
|
|
17
|
-
footerChildren?: ReactNode;
|
|
18
|
-
colorTheme?: HannaColorTheme;
|
|
19
|
-
logoLink?: string;
|
|
20
|
-
siteName?: string;
|
|
21
|
-
modifier?: BemPropsModifier['modifier'];
|
|
22
|
-
ssr?: SSRSupport;
|
|
23
|
-
texts?: LayoutI18n;
|
|
24
|
-
lang?: string;
|
|
25
|
-
} & ({
|
|
26
|
-
mainChildren: ReactNode;
|
|
27
|
-
children?: never;
|
|
28
|
-
} | {
|
|
29
|
-
mainChildren?: never;
|
|
30
|
-
children: ReactNode;
|
|
31
|
-
});
|
|
32
|
-
declare const Layout: (props: LayoutProps) => JSX.Element;
|
|
33
|
-
export default Layout;
|
package/esm/Layout.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
|
|
3
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
4
|
-
import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
|
|
5
|
-
import { getTexts } from '@reykjavik/hanna-utils/i18n';
|
|
6
|
-
import Image from './_abstract/_Image';
|
|
7
|
-
import { Link } from './_abstract/_Link';
|
|
8
|
-
import { useMenuToggling } from './utils/useMenuToggling';
|
|
9
|
-
import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
|
|
10
|
-
export const defaultLayoutTexts = {
|
|
11
|
-
is: {
|
|
12
|
-
lang: 'is',
|
|
13
|
-
skipLinkLabel: 'Valmynd',
|
|
14
|
-
closeMenuLabel: 'Loka',
|
|
15
|
-
closeMenuLabelLong: 'Loka valmynd',
|
|
16
|
-
},
|
|
17
|
-
en: {
|
|
18
|
-
lang: 'en',
|
|
19
|
-
skipLinkLabel: 'Skip to navigation',
|
|
20
|
-
closeMenuLabel: 'Close',
|
|
21
|
-
closeMenuLabelLong: 'Close menu',
|
|
22
|
-
},
|
|
23
|
-
};
|
|
24
|
-
const Layout = (props) => {
|
|
25
|
-
useScrollbarWidthCSSVar();
|
|
26
|
-
const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
|
|
27
|
-
const { isMenuActive, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
|
|
28
|
-
const isBrowser = useIsBrowserSide( /* ssr */);
|
|
29
|
-
const txt = getTexts(props, defaultLayoutTexts);
|
|
30
|
-
return (React.createElement("div", { className: getBemClass('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
|
|
31
|
-
globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
|
|
32
|
-
React.createElement("div", { className: "Layout__content" },
|
|
33
|
-
React.createElement("div", { className: "Layout__header", role: "banner" },
|
|
34
|
-
React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
|
|
35
|
-
' ',
|
|
36
|
-
React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg') }),
|
|
37
|
-
' ',
|
|
38
|
-
siteName,
|
|
39
|
-
' '),
|
|
40
|
-
' ',
|
|
41
|
-
navChildren && (React.createElement(Link, { className: "Layout__header__skiplink", href: "#pagenav", onClick: isMenuActive &&
|
|
42
|
-
((e) => {
|
|
43
|
-
e.preventDefault();
|
|
44
|
-
toggleMenu();
|
|
45
|
-
}), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
|
|
46
|
-
React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
|
|
47
|
-
navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", role: "navigation" },
|
|
48
|
-
navChildren,
|
|
49
|
-
isMenuActive && (React.createElement("button", { className: "Layout__nav__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel)))),
|
|
50
|
-
React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
|
|
51
|
-
};
|
|
52
|
-
export default Layout;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { MegaMenuPanel } from '../MainMenu';
|
|
2
|
-
export declare type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
|
|
3
|
-
export declare type AuxiliaryPanelProps = MegaMenuPanel & {
|
|
4
|
-
image?: AuxilaryPanelIllustration;
|
|
5
|
-
};
|
|
6
|
-
export declare const AuxiliaryPanel: (props: AuxiliaryPanelProps) => JSX.Element;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
|
|
3
|
-
import { Link } from '../_abstract/_Link';
|
|
4
|
-
export const AuxiliaryPanel = (props) => {
|
|
5
|
-
const { title, id, items, image } = props;
|
|
6
|
-
const imageUrl = image ? getIllustrationUrl(image) : image;
|
|
7
|
-
return (React.createElement("li", { className: "AuxiliaryPanel", id: id, style: imageUrl
|
|
8
|
-
? { '--menu-auxiliary-image': `url(${imageUrl})` }
|
|
9
|
-
: undefined },
|
|
10
|
-
React.createElement("h3", { className: "AuxiliaryPanel__title" }, title),
|
|
11
|
-
React.createElement("ul", { className: "AuxiliaryPanel__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "AuxiliaryPanel__item", "aria-current": item.current || undefined },
|
|
12
|
-
React.createElement(Link, { className: "AuxiliaryPanel__link", href: item.href, target: item.target, lang: item.lang }, item.label)))))));
|
|
13
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
import { MainMenuI18n, MegaMenuPanel } from '../MainMenu';
|
|
3
|
-
declare type PrimaryPanelProps = {
|
|
4
|
-
setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
|
|
5
|
-
isParent?: boolean;
|
|
6
|
-
isActive?: boolean;
|
|
7
|
-
panel: MegaMenuPanel;
|
|
8
|
-
texts: MainMenuI18n;
|
|
9
|
-
activeRef: RefObject<HTMLLIElement>;
|
|
10
|
-
isBrowser: true | undefined;
|
|
11
|
-
};
|
|
12
|
-
export declare const PrimaryPanel: (props: PrimaryPanelProps) => JSX.Element;
|
|
13
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import { Link } from '../_abstract/_Link';
|
|
4
|
-
export const PrimaryPanel = (props) => {
|
|
5
|
-
const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
|
|
6
|
-
const { items } = panel;
|
|
7
|
-
return (React.createElement("li", { ref: isActive ? props.activeRef : undefined, className: getBemClass('PrimaryPanel', [
|
|
8
|
-
isParent && 'parent',
|
|
9
|
-
isActive && 'active',
|
|
10
|
-
items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
|
|
11
|
-
]), id: panel.id },
|
|
12
|
-
React.createElement("h3", { className: "PrimaryPanel__title" },
|
|
13
|
-
' ',
|
|
14
|
-
isBrowser && !isActive ? (React.createElement("button", { className: "MainMenu__mega__title-toggler", "aria-controls": panel.id, onClick: () => setActivePanel(panel, false), "aria-pressed": isActive, type: "button" }, panel.title)) : (panel.title)),
|
|
15
|
-
React.createElement("ul", { className: "PrimaryPanel__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "PrimaryPanel__item", "aria-current": item.current || undefined },
|
|
16
|
-
React.createElement(Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang },
|
|
17
|
-
React.createElement("span", { className: "PrimaryPanel__linkTitle" }, item.label),
|
|
18
|
-
' ',
|
|
19
|
-
React.createElement("small", { className: "PrimaryPanel__summary" }, item.summary),
|
|
20
|
-
' '))))),
|
|
21
|
-
isBrowser && isActive && (React.createElement("button", { className: "MainMenu__megapanel__backtomenu", "aria-controls": panel.id, "aria-label": texts.backToMenuLong, onClick: () => setActivePanel(undefined), type: "button" }, texts.backToMenu))));
|
|
22
|
-
};
|