chore(project): moved global.scss to ui/core, styles cleanup

Informasjonsforvaltning · Oct 14, 2024 · 87feebb · 87feebb
1 parent a974edb
commit 87feebb
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 59 deletions.
diff --git a/apps/docs/public/content/docs/metadata-quality/metadata-quality.en.mdx b/apps/docs/public/content/docs/metadata-quality/metadata-quality.en.mdx
@@ -17,12 +17,12 @@ description: About assessing metadata quality on data.norge.no and why we do it
 
 Data.norge.no has four levels of metadata quality:
 
-| Level       | Explanation                                                                                                                                              |
-|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **Excellent**  | This is great! 75% or more of the quality criteria are met. The description is informative and provides great value to the user, which should be the goal for all descriptions. |
-| **Good**       | 50-75% of the quality criteria are met.                                                                                                                  |
-| **Sufficient** (should be improved) | Only 25-50% of the quality criteria are met, and the description should definitely be improved.                                                    |
-| **Poor**       | 25% or fewer of the quality criteria are met. The description is incomplete and rarely covers the needed information.                                   |
+| Level                               | Explanation                                                                                                                                                                     |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Excellent**                       | This is great! 75% or more of the quality criteria are met. The description is informative and provides great value to the user, which should be the goal for all descriptions. |
+| **Good**                            | 50-75% of the quality criteria are met.                                                                                                                                         |
+| **Sufficient** (should be improved) | Only 25-50% of the quality criteria are met, and the description should definitely be improved.                                                                                 |
+| **Poor**                            | 25% or fewer of the quality criteria are met. The description is incomplete and rarely covers the needed information.                                                           |
 
 ## Why We Measure Metadata Quality
 

diff --git a/apps/docs/public/content/docs/metadata-quality/metadata-quality.nb.mdx b/apps/docs/public/content/docs/metadata-quality/metadata-quality.nb.mdx
@@ -17,12 +17,12 @@ description: Om vurdering av metadatakvalitet på data.norge.no og hvofor vi gj
 
 Data.norge.no har fire ulike nivåer for metadatakvalitet:
 
-| Nivå       | Begrunnelse                                                                                                                                              |
-|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **Utmerket**   | Dette er bra saker! 75 % eller flere av kvalitetskriteriene er innfridd. Beskrivelsen er informativ og gir stor nytteverdi for brukeren, noe som bør være målet for alle beskrivelser. |
-| **God**        | 50-75 % av kvalitetskriteriene er innfridd.                                                                                                              |
-| **Tilstrekkelig** (bør forbedres) | Bare 25-50 % av kvalitetskriteriene er innfridd, og beskrivelsen bør absolutt forbedres.                                                                   |
-| **Dårlig**     | 25 % eller færre av kvalitetskriteriene er innfridd. Beskrivelsen er mangelfull og dekker sjelden.                                                       |
+| Nivå                              | Begrunnelse                                                                                                                                                                            |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Utmerket**                      | Dette er bra saker! 75 % eller flere av kvalitetskriteriene er innfridd. Beskrivelsen er informativ og gir stor nytteverdi for brukeren, noe som bør være målet for alle beskrivelser. |
+| **God**                           | 50-75 % av kvalitetskriteriene er innfridd.                                                                                                                                            |
+| **Tilstrekkelig** (bør forbedres) | Bare 25-50 % av kvalitetskriteriene er innfridd, og beskrivelsen bør absolutt forbedres.                                                                                               |
+| **Dårlig**                        | 25 % eller færre av kvalitetskriteriene er innfridd. Beskrivelsen er mangelfull og dekker sjelden.                                                                                     |
 
 ## Hvorfor måler vi metadatakvalitet
 

diff --git a/apps/docs/public/content/docs/metadata-quality/metadata-quality.nn.mdx b/apps/docs/public/content/docs/metadata-quality/metadata-quality.nn.mdx
@@ -17,13 +17,12 @@ description: Om vurdering av metadatakvalitet på data.norge.no og kvifor vi gje
 
 Data.norge.no har fire ulike nivå for metadatakvalitet:
 
-| Nivå       | Grunngjeving                                                                                                                                                 |
-|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **Fremifrå**    | Dette er bra saker! 75 % eller fleire av kvalitetskriteria er oppfylte. Skildringa er informativ og gjev stor nytteverdi for brukaren, noko som bør vere målet for alle skildringar. |
-| **God**        | 50-75 % av kvalitetskriteria er oppfylte.                                                                                                                 |
-| **Tilstrekkeleg** (bør forbetrast) | Berre 25-50 % av kvalitetskriteria er oppfylte, og skildringa bør absolutt forbetrast.                                                               |
-| **Dårleg**     | 25 % eller færre av kvalitetskriteria er oppfylte. Skildringa er mangelfull og dekkjer sjeldan det nødvendige.                                             |
-
+| Nivå                               | Grunngjeving                                                                                                                                                                         |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Fremifrå**                       | Dette er bra saker! 75 % eller fleire av kvalitetskriteria er oppfylte. Skildringa er informativ og gjev stor nytteverdi for brukaren, noko som bør vere målet for alle skildringar. |
+| **God**                            | 50-75 % av kvalitetskriteria er oppfylte.                                                                                                                                            |
+| **Tilstrekkeleg** (bør forbetrast) | Berre 25-50 % av kvalitetskriteria er oppfylte, og skildringa bør absolutt forbetrast.                                                                                               |
+| **Dårleg**                         | 25 % eller færre av kvalitetskriteria er oppfylte. Skildringa er mangelfull og dekkjer sjeldan det nødvendige.                                                                       |
 
 ## Kvifor måler vi metadatakvalitet
 

diff --git a/apps/docs/src/app/[lang]/[...slug]/page.tsx b/apps/docs/src/app/[lang]/[...slug]/page.tsx
@@ -98,7 +98,12 @@ export default async function Page({ params }: DocsPageType) {
                     {...props}
                 />
             ),
-            p: (props: React.HTMLAttributes<HTMLParagraphElement>) => <Paragraph size="sm" {...props} />,
+            p: (props: React.HTMLAttributes<HTMLParagraphElement>) => (
+                <Paragraph
+                    size='sm'
+                    {...props}
+                />
+            ),
             Alert: ({ size = 'sm', iconTitle = ' ', ...props }: AlertProps) => (
                 <Alert
                     size={size}
@@ -125,7 +130,12 @@ export default async function Page({ params }: DocsPageType) {
             ),
             Image,
             table: ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (
-                <Table {...(props as any)} size="sm">{children}</Table>
+                <Table
+                    {...(props as any)}
+                    size='sm'
+                >
+                    {children}
+                </Table>
             ),
             thead: ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
                 <TableHead {...props}>{children}</TableHead>

diff --git a/apps/docs/src/app/components/sidebar/index.tsx b/apps/docs/src/app/components/sidebar/index.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { usePathname } from 'next/navigation';
 import cn from 'classnames';
 
-import { Link, Heading, Button } from '@digdir/designsystemet-react';
+import { Heading, Button } from '@digdir/designsystemet-react';
 import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons';
 
 import { type LocaleCodes, type Dictionary } from '@fdk-frontend/dictionaries';
@@ -149,7 +149,7 @@ const Sidebar = ({ dictionary, slug, locale }: SidebarProps) => {
                 level={2}
                 size='xs'
             >
-                <Link href={`/${locale}${nestedData?.[0]?.path}`}>{nestedData?.[0]?.title}</Link>
+                <a href={`/${locale}${nestedData?.[0]?.path}`}>{nestedData?.[0]?.title}</a>
             </Heading>
             <NestedList
                 items={nestedData[0]?.children || []}

diff --git a/apps/docs/src/app/components/sidebar/sidebar.module.scss b/apps/docs/src/app/components/sidebar/sidebar.module.scss
@@ -11,6 +11,10 @@
             &:hover {
                 text-decoration: underline;
             }
+
+            &:focus-visible {
+                @include fds-focus-visible-block();
+            }
         }
     }
 }

diff --git a/libs/ui/src/lib/breadcrumbs/breadcrumbs.module.scss b/libs/ui/src/lib/breadcrumbs/breadcrumbs.module.scss
@@ -1,3 +1,5 @@
+@import '@fdk-frontend/ui/core/mixins';
+
 .container {
     padding: 0 2rem;
 }
@@ -11,6 +13,12 @@
 
     a {
         color: var(--color-link);
+        border-bottom: 3px solid transparent;
+
+        &:focus-visible {
+            color: black;
+            border-bottom: 3px solid black;
+        }
     }
 
     @media (max-width: 865px) {

diff --git a/libs/ui/src/lib/core/fds-overrides.scss b/libs/ui/src/lib/core/fds-overrides.scss
@@ -1,36 +1,27 @@
 * {
     font-family: inherit;
-    // font-size: inherit;
 }
 
 .fds-heading {
-	// &--lg {
-	// 	font-size:2.25rem;
-	// 	line-height:1.3em;
-	// }
-	// &--md {
-	// 	font-size:1.875rem;
-	// 	line-height:1.3em;
-	// }
-	// &--sm {
-	// 	font-size: 1.5rem;
-	// 	line-height: 1.3em;
-	// }
-	// &--xs {
-	// 	font-size: 1.3125rem;
-	// 	line-height: 1.3em;
-	// }
     &--xxs {
         font-size: 1.1rem;
         font-weight: 600;
         line-height: 1.3em;
     }
 }
 
-// .fds-ingress {
-//     font-size: 1.1em;
-//     line-height: 1.5em;
-// }
+.fds-ingress {
+    font-size: 1.1rem;
+    line-height: 1.5em;
+}
+
+.fds-link {
+    &:visited {
+        &:not(:focus-visible) {
+            color: var(--color-link);
+        }
+    }
+}
 
 .fds-btn {
     &.fds-link {
@@ -58,6 +49,6 @@
 .fds-link,
 .fds-btn {
     svg {
-        font-size:1.3rem;
+        font-size: 1.3rem;
     }
 }
diff --git a/libs/ui/src/lib/layout-root/global.scss → libs/ui/src/lib/core/global.scss b/libs/ui/src/lib/layout-root/global.scss → libs/ui/src/lib/core/global.scss
@@ -1,12 +1,14 @@
 /* Define layers in specific order */
 @layer reset, fds;
 
-@import url('reset.css');
-@import url('@digdir/designsystemet-theme');
-@import url('@digdir/designsystemet-css');
+// This must be imported before designsystem styles below
+@import './reset.css';
 
-@import '@fdk-frontend/ui/core/mixins';
-@import '@fdk-frontend/ui/core/fds-overrides';
+@import '@digdir/designsystemet-theme';
+@import '@digdir/designsystemet-css';
+
+@import './mixins';
+@import './fds-overrides';
 
 /* Small devices such as large phones (640px and up) */
 
@@ -51,4 +53,4 @@ html {
     @media (max-width: 650px) {
         font-size: 14px;
     }
-}
+}
diff --git a/libs/ui/src/lib/layout-root/reset.css → libs/ui/src/lib/core/reset.css b/libs/ui/src/lib/layout-root/reset.css → libs/ui/src/lib/core/reset.css
diff --git a/libs/ui/src/lib/footer/footer.module.scss b/libs/ui/src/lib/footer/footer.module.scss
@@ -19,7 +19,7 @@
             color: white;
         }
 
-        a {
+        :global(.fds-link) {
             color: var(--fds-semantic-border-action-first-subtle);
 
             svg {

diff --git a/libs/ui/src/lib/language-switcher/index.tsx b/libs/ui/src/lib/language-switcher/index.tsx
@@ -25,20 +25,20 @@ const LanguageSwitcher = ({ inverted }: LanguageSwitcherProps) => {
     };
 
     return (
-        <nav aria-label="Select language">
+        <nav aria-label='Select language'>
             <ToggleGroup
                 className={cn(styles.languageSwitcher, { [styles.inverted]: inverted })}
                 defaultValue={defaultCode}
                 size='sm'
                 onChange={(code) => onLanguageSelect(code as LocaleCodes)}
-                name="Select language"
+                name='Select language'
             >
                 {i18n.locales.map((locale) => (
                     <ToggleGroup.Item
                         value={locale.code}
                         key={locale.code}
                     >
-                        <span aria-hidden="true">{locale.flag}</span> {locale.name}
+                        <span aria-hidden='true'>{locale.flag}</span> {locale.name}
                     </ToggleGroup.Item>
                 ))}
             </ToggleGroup>

diff --git a/libs/ui/src/lib/layout-root/index.tsx b/libs/ui/src/lib/layout-root/index.tsx
@@ -1,6 +1,6 @@
 import 'server-only';
 
-import './global.scss';
+import '../core/global.scss';
 
 import { PropsWithChildren } from 'react';
 import { getDictionary, i18n, type Locale } from '@fdk-frontend/dictionaries';

diff --git a/libs/ui/src/lib/layouts/feedback-layout/index.tsx b/libs/ui/src/lib/layouts/feedback-layout/index.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 
-import { Heading, Paragraph, Link } from '@digdir/designsystemet-react';
+import { Heading, Link } from '@digdir/designsystemet-react';
 import { ExternalLinkIcon } from '@navikt/aksel-icons';
 
 import { type Dictionary, interpolate } from '@fdk-frontend/dictionaries';
@@ -31,7 +31,7 @@ const FeedbackLayout = async ({
                     >
                         {dictionary.feedbackBanner.heading}
                     </Heading>
-                    <Paragraph>
+                    <div>
                         {interpolate(dictionary.feedbackBanner.text, {
                             contactLink: (
                                 <Link href={`${baseUri}/contact`}>{dictionary.feedbackBanner.contactLinkText}</Link>
@@ -43,7 +43,7 @@ const FeedbackLayout = async ({
                                 </Link>
                             ),
                         })}
-                    </Paragraph>
+                    </div>
                 </div>
             </div>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ @@
                 color: white;
             }
-            a {
+            :global(.fds-link) {
                 color: var(--fds-semantic-border-action-first-subtle);
                 svg {
@@ Expand Down @@