Merge pull request #1962 from navikt/splitt-alternative-audience

Splitt alternative audience

Author: bdahle

src/components/_common/alternativeAudience/AlternativeAudience.tsx

@@ -3,8 +3,6 @@ import { BodyLong } from '@navikt/ds-react';
 import {
     AlternativeAudience as AlternativeAudienceType,
     Audience,
-    AudienceOptions,
-    getAudience,
 } from 'types/component-props/_mixins';
 import { usePageContentProps } from 'store/pageContext';
 import { Language, translator } from 'translations';
@@ -71,50 +69,11 @@ export const AlternativeAudience = () => {
     const { showProductName } = config;
     const { alternativeAudience } = data;
 
-    const getAudienceLabel = translator('audience', language);
-    const getProviderAudienceLabel = translator('providerAudience', language);
     const getStringPart = translator('stringParts', language);
     const getRelatedString = translator('related', language);
 
-    const getProviderTypes = (audience: AudienceOptions) => {
-        if (audience._selected !== Audience.PROVIDER) {
-            return [];
-        }
-        return audience[audience._selected].provider_audience;
-    };
-
-    const buildAudienceAffirmation = (addPeriod: boolean) => {
-        const { audience: currentAudience } = data;
-        const currentAudienceKey = getAudience(currentAudience);
-
-        if (!currentAudience || !currentAudienceKey || currentAudienceKey === 'person') {
-            return '';
-        }
-
-        const currentAudienceLabel = getAudienceLabel(currentAudienceKey);
-        const providerTypes = getProviderTypes(currentAudience) || [];
-        const providerTypesString = joinWithConjunction(
-            providerTypes.map((type) => getProviderAudienceLabel(type)),
-            language
-        );
-
-        const forString = `${getStringPart('for').charAt(0).toUpperCase()}${getStringPart(
-            'for'
-        ).slice(1)}`;
-
-        return `${forString} ${providerTypesString || currentAudienceLabel}${
-            addPeriod ? '.' : ''
-        } `;
-    };
-
     if (!alternativeAudience) {
-        return (
-            <div className={style.alternativeAudience}>
-                <BodyLong size="small" className={style.text}>
-                    {buildAudienceAffirmation(false)}
-                </BodyLong>
-            </div>
-        );
+        return null;
     }
 
     const productName =
@@ -124,7 +83,6 @@ export const AlternativeAudience = () => {
     return (
         <div className={style.alternativeAudience}>
             <BodyLong size="small" className={style.text}>
-                {buildAudienceAffirmation(true)}
                 {getRelatedString('relatedAudience').replace('{name}', productName)}{' '}
                 {audienceLinks.map((link, index) => (
                     <Fragment key={index}>

src/components/_common/headers/general-page-header/GeneralPageHeader.module.scss

@@ -41,6 +41,7 @@
         margin-top: var(--a-spacing-3);
         font-variant: all-small-caps;
         color: var(--a-text-subtle);
+        white-space: pre-wrap;
     }
 
     .ingress:global(.navds-body-long) {

src/components/_common/headers/general-page-header/GeneralPageHeader.tsx

@@ -1,11 +1,12 @@
-import { BodyLong, BodyShort, Heading } from '@navikt/ds-react';
+import { BodyLong, Heading } from '@navikt/ds-react';
 import {
     PagePropsForPageHeader,
     getContentTagline,
 } from 'components/_common/headers/sharedHeaderUtils';
 import { Illustration } from 'components/_common/illustration/Illustration';
 import { ContentProps, ContentType } from 'types/content-props/_content-common';
 import { classNames } from 'utils/classnames';
+import { GeneralPageHeaderTagLine } from './GeneralPageHeaderTagLine';
 
 import style from './GeneralPageHeader.module.scss';
 
@@ -26,11 +27,7 @@ export const GeneralPageHeader = (props: Props) => {
     return (
         <div className={style.generalPageHeader}>
             <Illustration illustration={illustration} className={style.illustration} />
-            {tagLine && (
-                <BodyShort className={style.tagline} size="small">
-                    {tagLine}
-                </BodyShort>
-            )}
+            {tagLine && <GeneralPageHeaderTagLine tagLine={tagLine} />}
             <Heading
                 level="1"
                 size="xlarge"

src/components/_common/headers/general-page-header/GeneralPageHeaderTagLine.tsx

@@ -0,0 +1,56 @@
+import { BodyShort } from '@navikt/ds-react';
+import { usePageContentProps } from 'store/pageContext';
+import { translator } from 'translations';
+import { ProductPageProps } from 'types/content-props/dynamic-page-props';
+import { Audience, AudienceOptions, getAudience } from 'types/component-props/_mixins';
+import { joinWithConjunction } from 'utils/string';
+
+import style from './GeneralPageHeader.module.scss';
+
+type Props = {
+    tagLine: string;
+};
+
+export const GeneralPageHeaderTagLine = (props: Props) => {
+    const { data, language } = usePageContentProps<ProductPageProps>();
+
+    const getAudienceLabel = translator('audience', language);
+    const getProviderAudienceLabel = translator('providerAudience', language);
+    const getStringPart = translator('stringParts', language);
+
+    const getProviderTypes = (audience: AudienceOptions) => {
+        if (audience._selected !== Audience.PROVIDER) {
+            return [];
+        }
+        return audience[audience._selected].provider_audience;
+    };
+
+    const buildAudienceAffirmation = () => {
+        const { audience: currentAudience } = data;
+        const currentAudienceKey = getAudience(currentAudience);
+
+        if (!currentAudience || !currentAudienceKey || currentAudienceKey === 'person') {
+            return '';
+        }
+
+        const currentAudienceLabel = getAudienceLabel(currentAudienceKey);
+        const providerTypes = getProviderTypes(currentAudience) || [];
+        const providerTypesString = joinWithConjunction(
+            providerTypes.map((type) => getProviderAudienceLabel(type)),
+            language
+        );
+
+        const forString = `${getStringPart('for').charAt(0).toUpperCase()}${getStringPart(
+            'for'
+        ).slice(1)}`;
+
+        return `  —  ${forString} ${providerTypesString || currentAudienceLabel}`;
+    };
+
+    return (
+        <BodyShort className={style.tagline} size="small">
+            {props.tagLine}
+            {buildAudienceAffirmation()}
+        </BodyShort>
+    );
+};

src/translations/nn.ts

@@ -152,13 +152,13 @@ export const translationsBundleNn: PartialTranslations = {
     },
     situations: {
         person: 'Dette kan du ha rett til',
-        employer: 'For arbeidsgjevarar',
+        employer: 'Kva arbeidsgjevarar må vita',
         provider: 'For samarbeidspartnarar',
     },
     guides: {
         person: 'Slik gjer du det',
-        employer: 'For arbeidsgjevarar',
-        provider: 'For samarbeidspartnarar',
+        employer: 'Slik gjer du det',
+        provider: 'Slik gjer du det',
     },
     publishingCalendar: {
         event: 'Hending',