Merge pull request #2035 from navikt/part-stories

Story ReadMore og config Chromatic

Author: bdahle

.storybook/modes.ts

@@ -0,0 +1,8 @@
+export const allModes = {
+    small: {
+        viewport: 'small',
+    },
+    large: {
+        viewport: 'large',
+    },
+};

.storybook/preview.tsx

@@ -1,9 +1,21 @@
 import type { Preview } from '@storybook/react';
+import { allModes } from '../.storybook/modes';
 import '../src/global.scss';
 
 const preview: Preview = {
     parameters: {
-        layout: 'centered',
+        viewport: {
+            viewports: {
+                small: { name: 'small', styles: { width: '390px', height: '100%' } },
+                large: { name: 'large', styles: { width: '820px', height: '100%' } },
+            },
+        },
+        chromatic: {
+            modes: {
+                small: allModes['small'],
+                large: allModes['large'],
+            },
+        },
     },
     tags: ['autodocs'],
 };

src/components/parts/PartsMapper.tsx

@@ -50,7 +50,7 @@ import { AreapageSituationCardPart } from './areapage-situation-card/AreapageSit
 import { LoggedinCardPart } from './loggedin-card/LoggedinCardPart';
 import { FrontpageContactPart } from './frontpage-contact/FrontpageContactPart';
 import { FormDetailsPart } from './form-details/FormDetailsPart';
-import { ReadMorePart } from './read-more/ReadMorePart';
+import { ReadMorePart } from './readMorePart/ReadMorePart';
 import { AccordionPart } from './accordion/AccordionPart';
 import { RelatedSituationsPart } from './related-situations/RelatedSituationsPart';
 

src/components/parts/read-more/ReadMorePart.module.scss src/components/parts/readMorePart/ReadMorePart.module.scss

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentType } from 'types/component-props/_component-common';
+import { PartType } from 'types/component-props/parts';
+import { ReadMorePart } from './ReadMorePart';
+
+const meta = {
+    component: ReadMorePart,
+    args: { type: ComponentType.Part, descriptor: PartType.ReadMore, path: '' },
+} satisfies Meta<typeof ReadMorePart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        config: {
+            title: 'Read More',
+            html: {
+                processedHtml:
+                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                macros: [],
+            },
+        },
+    },
+};
+
+export const Opened: Story = {
+    args: {
+        config: {
+            ...Default.args.config,
+            isOpen: true,
+        },
+    },
+};

src/components/parts/readMorePart/ReadMorePart.stories.tsx

@@ -15,10 +15,11 @@ import styles from './ReadMorePart.module.scss';
 export type PartConfigReadMore = {
     title: string;
     html: ProcessedHtmlProps;
+    isOpen?: boolean;
 };
 
 export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>) => {
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(config?.isOpen ?? false);
     const divRef = useRef<HTMLDivElement | null>(null);
 
     useShortcuts({

src/components/parts/read-more/ReadMorePart.tsx src/components/parts/readMorePart/ReadMorePart.tsx

@@ -25,7 +25,7 @@ import { PartConfigPayoutDates } from 'components/parts/payout-dates/PayoutDates
 import { PartConfigProductCard } from 'components/parts/product-card/ProductCardPart';
 import { PartConfigProductDetails } from 'components/parts/product-details/ProductDetailsPart';
 import { PartConfigProviderCard } from 'components/parts/provider-card/ProviderCardPart';
-import { PartConfigReadMore } from 'components/parts/read-more/ReadMorePart';
+import { PartConfigReadMore } from 'components/parts/readMorePart/ReadMorePart';
 import { PartConfigRelatedSituations } from 'components/parts/related-situations/RelatedSituationsPart';
 import { PartConfigUserTests } from 'components/parts/user-tests/UserTestsPart';
 import { PartConfigUxSignalsWidget } from 'components/parts/uxsignals-widget/UxSignalsWidgetPart';