@ndla/ui 50.8.0 → 50.8.2

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
 
-import { fonts, spacing } from '@ndla/core';
+import { fonts, spacing } from "@ndla/core";
 
-import ContentTypeBadge from '../../ContentTypeBadge';
-import resourceTypeColor from '../../utils/resourceTypeColor';
-import { SearchItemType } from '../SearchItem';
-import { ContentType } from '../SearchTypeResult';
+import ContentTypeBadge from "../../ContentTypeBadge";
+import resourceTypeColor from "../../utils/resourceTypeColor";
+import { SearchItemType } from "../SearchItem";
+import { ContentType } from "../SearchTypeResult";
 
 interface ItemTypeProps {
   contentType?: ContentType;
@@ -53,7 +53,7 @@ const ContentTypeWrapper = styled.div<ItemTypeProps>`
   display: flex;
   align-items: center;
   padding: 0 ${spacing.normal};
-  ${fonts.sizes('12px', '16px')};
+  ${fonts.sizes("12px", "16px")};
   font-weight: ${fonts.weight.semibold};
 `;
 
@@ -64,7 +64,7 @@ const ContentTypeIcon = styled.span<ItemTypeProps>`
   margin-left: ${spacing.small};
   justify-content: center;
   ::before {
-    content: '';
+    content: "";
     position: absolute;
     height: 23px;
     width: 78px;
@@ -93,8 +93,8 @@ const Wrapper = styled.header`
 `;
 
 interface Props {
-  labels: SearchItemType['item']['labels'];
-  img?: SearchItemType['item']['img'] | null;
+  labels: SearchItemType["item"]["labels"];
+  img?: SearchItemType["item"]["img"] | null;
   type?: ContentType;
 }
 
@@ -118,7 +118,7 @@ const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
           <>
             {labels.map((label) => (
               <Fragment key={label}>
-                {' '}
+                {" "}
                 <>&#8226;</> {label}
               </Fragment>
             ))}

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -6,21 +6,21 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors, fonts, spacing } from "@ndla/core";
 
-import ContentTypeBadge from '../../ContentTypeBadge';
-import { SearchItemType } from '../SearchItem';
-import { ContentType } from '../SearchTypeResult';
+import ContentTypeBadge from "../../ContentTypeBadge";
+import { SearchItemType } from "../SearchItem";
+import { ContentType } from "../SearchTypeResult";
 
 const Wrapper = styled.header`
   padding: ${spacing.small} ${spacing.normal} 0;
 `;
 
 const Label = styled.div`
-  ${fonts.sizes('12px', '16px')};
+  ${fonts.sizes("12px", "16px")};
   font-weight: ${fonts.weight.semibold};
   height: 26px;
   display: flex;
@@ -59,7 +59,7 @@ const TopicHeaderImage = styled.img`
 
 interface Props {
   children: ReactNode;
-  image?: SearchItemType['item']['img'] | null;
+  image?: SearchItemType["item"]["img"] | null;
   type?: ContentType;
 }
 

package/src/SearchTypeResult/components/SubjectFilters.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { Plus as PlusIcon } from '@ndla/icons/action';
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { Plus as PlusIcon } from "@ndla/icons/action";
 
-import { Modal, ModalTrigger } from '@ndla/modal';
-import { FilterProps } from '../ActiveFilterContent';
-import ActiveFilters from '../ActiveFilters';
-import PopupFilter, { PopupFilterProps } from '../PopupFilter';
+import { Modal, ModalTrigger } from "@ndla/modal";
+import { FilterProps } from "../ActiveFilterContent";
+import ActiveFilters from "../ActiveFilters";
+import PopupFilter, { PopupFilterProps } from "../PopupFilter";
 
 const FilterButtonText = styled.span`
   display: inline-block;
@@ -23,12 +23,12 @@ const FilterButtonText = styled.span`
   margin-right: 10px;
 `;
 
-type ProgrammeProps = PopupFilterProps['programmes'] & {
+type ProgrammeProps = PopupFilterProps["programmes"] & {
   values: string[];
   onProgrammeValuesChange: (values: string[]) => void;
 };
 
-type SubjectCategoriesProps = PopupFilterProps['subjectCategories'] & {
+type SubjectCategoriesProps = PopupFilterProps["subjectCategories"] & {
   values: string[];
   onSubjectValuesChange: (values: string[]) => void;
 };
@@ -105,7 +105,7 @@ const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilte
   const OpenModalButton = () => (
     <ModalTrigger>
       <ButtonV2 type="button" size="normal" colorTheme="greyLighter" shape="pill">
-        <FilterButtonText>{t('searchPage.searchFilterMessages.noValuesButtonText')}</FilterButtonText>
+        <FilterButtonText>{t("searchPage.searchFilterMessages.noValuesButtonText")}</FilterButtonText>
         <PlusIcon />
       </ButtonV2>
     </ModalTrigger>

package/src/SearchTypeResult/index.ts

@@ -6,14 +6,14 @@
  *
  */
 
-import SearchFieldHeader from './SearchFieldHeader';
-import SearchFilterContent from './SearchFilterContent';
-import SearchHeader from './SearchHeader';
-import SearchNotionsResult from './SearchNotionsResult';
-import SearchSubjectResult from './SearchSubjectResult';
-import SearchTypeResult from './SearchTypeResult';
+import SearchFieldHeader from "./SearchFieldHeader";
+import SearchFilterContent from "./SearchFilterContent";
+import SearchHeader from "./SearchHeader";
+import SearchNotionsResult from "./SearchNotionsResult";
+import SearchSubjectResult from "./SearchSubjectResult";
+import SearchTypeResult from "./SearchTypeResult";
 
-export type { ContentType } from './SearchTypeResult';
+export type { ContentType } from "./SearchTypeResult";
 
 export {
   SearchTypeResult,

package/src/SnackBar/DefaultSnackbar.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { breakpoints, colors, fonts, misc, mq, shadows, spacing } from '@ndla/core';
-import { Cross } from '@ndla/icons/action';
-import { Snack, useSnack } from './SnackbarProvider';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
+import { breakpoints, colors, fonts, misc, mq, shadows, spacing } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
+import { Snack, useSnack } from "./SnackbarProvider";
 
 const DefaultSnackContainer = styled.div`
   display: flex;
@@ -49,7 +49,7 @@ const DefaultSnack = (snack: Snack) => {
             variant="outline"
             colorTheme="greyLighter"
             onClick={() => closeSnack(snack)}
-            aria-label={t('snackbar.close')}
+            aria-label={t("snackbar.close")}
           >
             <Cross />
           </IconButtonV2>

package/src/SnackBar/Snack.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { ButtonV2 } from '@ndla/button';
-import { PersonOutlined } from '@ndla/icons/common';
-import { Snack, SnackbarProvider, useSnack } from '.';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { ButtonV2 } from "@ndla/button";
+import { PersonOutlined } from "@ndla/icons/common";
+import { Snack, SnackbarProvider, useSnack } from ".";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const SnackComponent = ({ ...args }: Snack) => {
   const { addSnack } = useSnack();
@@ -26,8 +26,8 @@ const SnackComponent = ({ ...args }: Snack) => {
 };
 
 export default {
-  title: 'Components/Snack',
-  tags: ['autodocs'],
+  title: "Components/Snack",
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -36,14 +36,23 @@ export default {
     content: <span>This is a snack</span>,
     duration: 5000,
     render: undefined,
-    id: 'default',
+    id: "default",
     icon: undefined,
     closable: true,
   },
   argTypes: {
-    content: { control: false, description: 'Any JSX component, but usually a span-like element' },
-    render: { control: false, description: 'Replaces the entire snack with a custom render' },
-    icon: { control: false, description: 'An additional icon to be shown on the left-hand side of the snack' },
+    content: {
+      control: false,
+      description: "Any JSX component, but usually a span-like element",
+    },
+    render: {
+      control: false,
+      description: "Replaces the entire snack with a custom render",
+    },
+    icon: {
+      control: false,
+      description: "An additional icon to be shown on the left-hand side of the snack",
+    },
   },
   decorators: [
     (Story) => (
@@ -60,7 +69,14 @@ export const Default: StoryObj<Snack> = {};
 const CustomSnack = (snack: Snack) => {
   const { closeSnack } = useSnack();
   return (
-    <div style={{ backgroundColor: 'gray', zIndex: 1000, display: 'flex', pointerEvents: 'all' }}>
+    <div
+      style={{
+        backgroundColor: "gray",
+        zIndex: 1000,
+        display: "flex",
+        pointerEvents: "all",
+      }}
+    >
       <p>Custom render!</p>
       <ButtonV2 onClick={() => closeSnack(snack)}>Close</ButtonV2>
     </div>
@@ -69,7 +85,7 @@ const CustomSnack = (snack: Snack) => {
 
 export const WithCustomRender: StoryObj<Snack> = {
   args: {
-    id: 'customRender',
+    id: "customRender",
     content: undefined,
     duration: 2000000,
     render: (id) => <CustomSnack id={id} />,
@@ -78,14 +94,14 @@ export const WithCustomRender: StoryObj<Snack> = {
 
 export const NotClosable: StoryObj<Snack> = {
   args: {
-    id: 'nonClosable',
+    id: "nonClosable",
     closable: false,
   },
 };
 
 export const WithIcon: StoryObj<Snack> = {
   args: {
-    id: 'customIcon',
+    id: "customIcon",
     icon: <PersonOutlined />,
   },
 };

package/src/SnackBar/SnackbarProvider.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from 'react';
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
-import DefaultSnack from './DefaultSnackbar';
+import { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from "react";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
+import DefaultSnack from "./DefaultSnackbar";
 
 export interface Snack {
   content?: ReactNode;
@@ -33,7 +33,7 @@ const SnackbarContext = createContext<SnackContext | undefined>(undefined);
 export const useSnack = () => {
   const context = useContext(SnackbarContext);
   if (!context) {
-    throw new Error('useSnack can only be used within a SnackbarProvider!');
+    throw new Error("useSnack can only be used within a SnackbarProvider!");
   }
 
   return context;
@@ -82,13 +82,13 @@ interface BaseSnackContainerProps {
 }
 
 const snackbarInAnimation = keyframes({
-  '0%': { transform: `translateY(${spacing.medium})`, opacity: 0 },
-  '100%': { opacity: 1 },
+  "0%": { transform: `translateY(${spacing.medium})`, opacity: 0 },
+  "100%": { opacity: 1 },
 });
 
 const snackbarOutAnimation = keyframes({
-  '0%': { opacity: 1 },
-  '100%': { transform: `translateY(${spacing.medium})`, opacity: 0 },
+  "0%": { opacity: 1 },
+  "100%": { transform: `translateY(${spacing.medium})`, opacity: 0 },
 });
 
 const BaseSnackContainer = styled.li<BaseSnackContainerProps>`

package/src/SnackBar/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-export type { Snack, SnackContext } from './SnackbarProvider';
-export { SnackbarProvider, useSnack, BaseSnack } from './SnackbarProvider';
-export { default as DefaultSnackbar } from './DefaultSnackbar';
+export type { Snack, SnackContext } from "./SnackbarProvider";
+export { SnackbarProvider, useSnack, BaseSnack } from "./SnackbarProvider";
+export { default as DefaultSnackbar } from "./DefaultSnackbar";

package/src/Subject/SubjectBanner.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { breakpoints, mq } from '@ndla/core';
+import styled from "@emotion/styled";
+import { breakpoints, mq } from "@ndla/core";
 
 type BannerProps = {
   image: string;

package/src/Subject/SubjectHeader.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, fonts, mq, spacing, breakpoints } from '@ndla/core';
-import OneColumn from '../Layout/OneColumn';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, fonts, mq, spacing, breakpoints } from "@ndla/core";
+import OneColumn from "../Layout/OneColumn";
 
-type Types = 'mobile' | 'tablet' | 'desktop' | 'wide';
+type Types = "mobile" | "tablet" | "desktop" | "wide";
 
 interface Props {
   images: {
@@ -67,7 +67,7 @@ const StyledBackground = styled.div<StyledBackgroundProps>`
 `;
 
 const StyledHeading = styled.h1`
-  ${fonts.sizes('24px', '28px')};
+  ${fonts.sizes("24px", "28px")};
   color: ${colors.white};
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   margin: ${spacing.medium} 0 ${spacing.normal} 0;
@@ -76,12 +76,12 @@ const StyledHeading = styled.h1`
 
   ${mq.range({ from: breakpoints.tablet })} {
     margin: 0;
-    ${fonts.sizes('40px', '40px')};
+    ${fonts.sizes("40px", "40px")};
     padding: 0 0 0 ${spacing.xlarge};
   }
   ${mq.range({ from: breakpoints.desktop })} {
     margin: 0;
-    ${fonts.sizes('52px', '52px')};
+    ${fonts.sizes("52px", "52px")};
     padding: 0 0 0 ${spacing.xlarge};
   }
 `;

package/src/Subject/index.ts

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as SubjectHeader } from './SubjectHeader';
-export { default as SubjectBanner } from './SubjectBanner';
+export { default as SubjectHeader } from "./SubjectHeader";
+export { default as SubjectBanner } from "./SubjectBanner";

package/src/Table/Table.stories.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import Table from './Table';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryFn } from "@storybook/react";
+import Table from "./Table";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Tabeller skal brukes til å presentere data (tabulære data), ikke til utforming. Det anbefales å holde tabellene så enkle som mulig. Ved mer kompleksitet kan data heller deles opp i flere tabeller.
@@ -26,15 +26,15 @@ import { defaultParameters } from '../../../../stories/defaults';
 
 const meta: Meta = {
   component: Table,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div style={{ padding: '24px' }}>
+      <div style={{ padding: "24px" }}>
         <Story />
       </div>
     ),
   ],
-  title: 'Base styles/Tables',
+  title: "Base styles/Tables",
   parameters: defaultParameters,
 };
 
@@ -170,7 +170,7 @@ export const WithFormatting: StoryFn = () => (
         <th>Prefiks</th>
         <th>Symbol</th>
         <th>Namn</th>
-        <th style={{ textAlign: 'right' }}>Eksempel</th>
+        <th style={{ textAlign: "right" }}>Eksempel</th>
       </tr>
     </thead>
     <tbody>
@@ -181,7 +181,7 @@ export const WithFormatting: StoryFn = () => (
         <td>peta</td>
         <td>P</td>
         <td>billiard</td>
-        <td style={{ textAlign: 'right' }}>1000000000000000</td>
+        <td style={{ textAlign: "right" }}>1000000000000000</td>
       </tr>
       <tr>
         <td>
@@ -190,7 +190,7 @@ export const WithFormatting: StoryFn = () => (
         <td>tera</td>
         <td>T</td>
         <td>billion</td>
-        <td style={{ textAlign: 'right' }}>1000000000000</td>
+        <td style={{ textAlign: "right" }}>1000000000000</td>
       </tr>
       <tr>
         <td>
@@ -199,7 +199,7 @@ export const WithFormatting: StoryFn = () => (
         <td>giga</td>
         <td>G</td>
         <td>milliard</td>
-        <td style={{ textAlign: 'right' }}>1000000000</td>
+        <td style={{ textAlign: "right" }}>1000000000</td>
       </tr>
       <tr>
         <td>
@@ -208,7 +208,7 @@ export const WithFormatting: StoryFn = () => (
         <td>mega</td>
         <td>M</td>
         <td>million</td>
-        <td style={{ textAlign: 'right' }}>1000000</td>
+        <td style={{ textAlign: "right" }}>1000000</td>
       </tr>
       <tr>
         <td>
@@ -217,7 +217,7 @@ export const WithFormatting: StoryFn = () => (
         <td>kilo</td>
         <td>k</td>
         <td>tusen</td>
-        <td style={{ textAlign: 'right' }}>1000</td>
+        <td style={{ textAlign: "right" }}>1000</td>
       </tr>
       <tr>
         <td>
@@ -226,7 +226,7 @@ export const WithFormatting: StoryFn = () => (
         <td>hekto</td>
         <td>h</td>
         <td>hundre</td>
-        <td style={{ textAlign: 'right' }}>100</td>
+        <td style={{ textAlign: "right" }}>100</td>
       </tr>
       <tr>
         <td>
@@ -235,7 +235,7 @@ export const WithFormatting: StoryFn = () => (
         <td>deka</td>
         <td>da</td>
         <td>ti</td>
-        <td style={{ textAlign: 'right' }}>10</td>
+        <td style={{ textAlign: "right" }}>10</td>
       </tr>
       <tr>
         <td>
@@ -244,7 +244,7 @@ export const WithFormatting: StoryFn = () => (
         <td>desi</td>
         <td>d</td>
         <td>tidel</td>
-        <td style={{ textAlign: 'right' }}>0,1</td>
+        <td style={{ textAlign: "right" }}>0,1</td>
       </tr>
       <tr>
         <td>
@@ -261,7 +261,7 @@ export const WithFormatting: StoryFn = () => (
         <td>
           <strong>hundredel</strong>
         </td>
-        <td style={{ textAlign: 'right' }}>
+        <td style={{ textAlign: "right" }}>
           <strong>0,01</strong>
         </td>
       </tr>
@@ -272,7 +272,7 @@ export const WithFormatting: StoryFn = () => (
         <td>milli</td>
         <td>m</td>
         <td>tusendel</td>
-        <td style={{ textAlign: 'right' }}>0,001</td>
+        <td style={{ textAlign: "right" }}>0,001</td>
       </tr>
       <tr>
         <td>
@@ -281,7 +281,7 @@ export const WithFormatting: StoryFn = () => (
         <td>mikro</td>
         <td />
         <td>milliondel</td>
-        <td style={{ textAlign: 'right' }}>0,000001</td>
+        <td style={{ textAlign: "right" }}>0,000001</td>
       </tr>
       <tr>
         <td>
@@ -290,7 +290,7 @@ export const WithFormatting: StoryFn = () => (
         <td>nano</td>
         <td>n</td>
         <td>milliarddel</td>
-        <td style={{ textAlign: 'right' }}>
+        <td style={{ textAlign: "right" }}>
           <p>0,000000001</p>
         </td>
       </tr>
@@ -505,13 +505,13 @@ export const WithPicture: StoryFn = () => (
     <thead>
       <tr>
         <th />
-        <th style={{ textAlign: 'center' }} scope="col">
+        <th style={{ textAlign: "center" }} scope="col">
           Fly
         </th>
-        <th style={{ textAlign: 'center' }} scope="col">
+        <th style={{ textAlign: "center" }} scope="col">
           Buss
         </th>
-        <th style={{ textAlign: 'center' }} scope="col">
+        <th style={{ textAlign: "center" }} scope="col">
           Sykkel
         </th>
       </tr>
@@ -540,24 +540,24 @@ export const WithPicture: StoryFn = () => (
       </tr>
       <tr>
         <th scope="row">Symbol</th>
-        <td style={{ textAlign: 'center' }}>
-          <svg style={{ width: '24px', height: '24px' }} viewBox="0 0 24 24">
+        <td style={{ textAlign: "center" }}>
+          <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
             <path
               fill="#6F6F6F"
               d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"
             />
           </svg>
         </td>
-        <td style={{ textAlign: 'center' }}>
-          <svg style={{ width: '24px', height: '24px' }} viewBox="0 0 24 24">
+        <td style={{ textAlign: "center" }}>
+          <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
             <path
               fill="#6F6F6F"
               d="M18,11H6V6H18M16.5,17A1.5,1.5 0 0,1 15,15.5A1.5,1.5 0 0,1 16.5,14A1.5,1.5 0 0,1 18,15.5A1.5,1.5 0 0,1 16.5,17M7.5,17A1.5,1.5 0 0,1 6,15.5A1.5,1.5 0 0,1 7.5,14A1.5,1.5 0 0,1 9,15.5A1.5,1.5 0 0,1 7.5,17M4,16C4,16.88 4.39,17.67 5,18.22V20A1,1 0 0,0 6,21H7A1,1 0 0,0 8,20V19H16V20A1,1 0 0,0 17,21H18A1,1 0 0,0 19,20V18.22C19.61,17.67 20,16.88 20,16V6C20,2.5 16.42,2 12,2C7.58,2 4,2.5 4,6V16Z"
             />
           </svg>
         </td>
-        <td style={{ textAlign: 'center' }}>
-          <svg style={{ width: '24px', height: '24px' }} viewBox="0 0 24 24">
+        <td style={{ textAlign: "center" }}>
+          <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
             <path
               fill="#6F6F6F"
               d="M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z"
@@ -567,9 +567,9 @@ export const WithPicture: StoryFn = () => (
       </tr>
       <tr>
         <th scope="row">Ord</th>
-        <td style={{ textAlign: 'center' }}>Fly</td>
-        <td style={{ textAlign: 'center' }}>Buss</td>
-        <td style={{ textAlign: 'center' }}>Sykkel</td>
+        <td style={{ textAlign: "center" }}>Fly</td>
+        <td style={{ textAlign: "center" }}>Buss</td>
+        <td style={{ textAlign: "center" }}>Sykkel</td>
       </tr>
     </tbody>
   </Table>
@@ -669,9 +669,9 @@ export const WithColumnWidth: StoryFn = () => (
   <Table>
     <thead>
       <tr>
-        <th style={{ width: '33.333%' }}>Fremragende</th>
-        <th style={{ width: '33.333%' }}>Kompetent</th>
-        <th style={{ width: '33.333%' }}>På vei</th>
+        <th style={{ width: "33.333%" }}>Fremragende</th>
+        <th style={{ width: "33.333%" }}>Kompetent</th>
+        <th style={{ width: "33.333%" }}>På vei</th>
       </tr>
     </thead>
     <tbody>