📝 Added/Improved Storybook

.storybook/main.js

@@ -3,14 +3,9 @@ module.exports = {
     '../src/intro.stories.mdx',
     '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
   ],
-  addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-mdx-gfm',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   typescript: {
-    reactDocgen: 'none',
+    reactDocgen: 'react-docgen-typescript',
   },
   build: {
     sourcemap: false,
@@ -22,4 +17,5 @@ module.exports = {
   docs: {
     autodocs: true,
   },
+  staticDirs: ['../static'],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-components",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -19,7 +19,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "start": "NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006 -s public",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--openssl-legacy-provider --max-old-space-size=2048' storybook build",
     "setup": "yarn",
     "pretty": "prettier --check ./src",
@@ -73,14 +73,14 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.1",
-    "@storybook/addon-actions": "^7.0.22",
-    "@storybook/addon-docs": "^7.0.22",
-    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addons": "^7.0.22",
-    "@storybook/node-logger": "^7.0.22",
-    "@storybook/react": "^7.0.22",
-    "@storybook/react-vite": "^7.0.22",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addons": "^7.1.0",
+    "@storybook/node-logger": "^7.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-vite": "^7.1.0",
     "@tanstack/react-query": "^4.29.14",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -103,12 +103,12 @@
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "@vitejs/plugin-react": "^4.0.1",
-    "@vitest/coverage-c8": "^0.32.2",
+    "@vitest/coverage-v8": "^0.33.0",
     "eslint": "^8.43.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest-styled-components": "^7.1.1",
     "jsdom": "^22.1.0",
     "ora": "^6.3.1",
@@ -120,7 +120,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^3.25.1",
     "rollup-plugin-delete": "^2.0.0",
-    "storybook": "^7.0.22",
+    "storybook": "^7.1.0",
     "storybook-addon-react-router-v6": "^1.0.2",
     "styled-components": "^5.3.11",
     "typescript": "^5.1.3",

src/components/DataDisplay/InfoElement.stories.tsx

@@ -19,3 +19,6 @@ const Template: StoryFn<InfoElementProps> = (args) => <InfoElement {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {};
+
+export const WithCopyTextTrue = Template.bind({});
+WithCopyTextTrue.args = { copyableContent: true, copyBackground: '#ffffff' };

src/components/DataDisplay/InfoElement.tsx

@@ -9,12 +9,12 @@ export interface InfoElementProps {
   content: ReactElement | string;
   capitalizeContent?: boolean;
   copyableContent?: boolean;
-  copyIconRightPos?: string;
+  copyBackground?: string;
 }
 
 const InfoElement = forwardRef<HTMLDivElement, InfoElementProps>(
   (
-    { title, content, copyableContent, capitalizeContent, copyIconRightPos },
+    { title, content, copyableContent, capitalizeContent, copyBackground },
     ref
   ) => {
     const contentElement =
@@ -28,7 +28,7 @@ const InfoElement = forwardRef<HTMLDivElement, InfoElementProps>(
         </Typography>
         {typeof content === 'string' ? (
           copyableContent ? (
-            <CopyText iconRightPos={copyIconRightPos} textToCopy={content}>
+            <CopyText hoverBackground={copyBackground} textToCopy={content}>
               <Typography variant="h6">{contentElement}</Typography>
             </CopyText>
           ) : (

src/components/DataDisplay/OptionalTooltip.stories.tsx

@@ -9,6 +9,14 @@ export default {
   component: OptionalTooltip,
   argTypes: { title: { control: 'text' } },
   args: { title: 'Optional tooltip title' },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'This component enables us to show a tooltip optionally, so if the title is either null or empty it hides the tooltip',
+      },
+    },
+  },
 } as Meta;
 
 export const Primary: StoryFn = (args) => (

src/components/DataDisplay/ProfileAvatar.stories.tsx

@@ -34,3 +34,9 @@ export const Primary: StoryFn = (args) => {
     />
   );
 };
+
+export const WithoutImage: StoryFn = (args) => {
+  return (
+    <ProfileAvatar size={args.size} name={args.name} disabled={args.disabled} />
+  );
+};

src/components/DataDisplay/ProfileAvatar.test.tsx

@@ -147,5 +147,5 @@ test('Name parser works as expected when given name with 1 word', () => {
 
   const initials = nameToInitials(firstName);
 
-  expect(initials).toBe(firstName[0] + '.');
+  expect(initials).toBe(firstName[0]);
 });

src/components/DataDisplay/ProfileAvatar.tsx

@@ -28,7 +28,7 @@ export function nameToInitials(name: string) {
   };
 
   if (splitNames.length === 1 && splitNames[0] !== '') {
-    return splitNames[0].charAt(0) + '.';
+    return splitNames[0].charAt(0);
   }
 
   if (lastNameCommaFirstName) {

src/components/DataDisplay/Tutorial/Tutorial.stories.tsx

@@ -2,15 +2,15 @@ import { Typography } from '@equinor/eds-core-react';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { TutorialStepsProvider } from '../../../providers';
-import Tutorial, { IStep, TutorialProps } from './Tutorial';
+import Tutorial, { Step, TutorialProps } from './Tutorial';
 import TutorialStoryComponent from './TutorialStoryComponent';
 
 export default {
   title: 'DataDisplay/Tutorial',
   component: Tutorial,
 } as Meta;
 
-const steps: IStep[] = [
+const steps: Step[] = [
   {
     key: 'step-one',
     title: 'Field',

src/components/DataDisplay/Tutorial/Tutorial.test.tsx

@@ -2,9 +2,9 @@ import { faker } from '@faker-js/faker';
 
 import TutorialStepsProvider from '../../../providers/TutorialStepsProvider';
 import { render, screen, userEvent } from '../../../tests/test-utils';
-import Tutorial, { IStep, TutorialProps } from './Tutorial';
+import Tutorial, { Step, TutorialProps } from './Tutorial';
 
-function fakeStep(): IStep {
+function fakeStep(): Step {
   return {
     key: faker.string.uuid(),
     title: faker.animal.dog(),
@@ -14,7 +14,7 @@ function fakeStep(): IStep {
 }
 
 function fakeProps(withImage = false): TutorialProps {
-  const steps: IStep[] = [];
+  const steps: Step[] = [];
   for (let i = 0; i < faker.number.int({ min: 2, max: 10 }); i++) {
     steps.push(fakeStep());
   }

src/components/DataDisplay/Tutorial/Tutorial.tsx

@@ -4,15 +4,15 @@ import { useTutorialSteps } from '../../../providers/TutorialStepsProvider';
 import TutorialStart from './TutorialStart';
 import TutorialSteps from './TutorialSteps';
 
-export interface IStep {
+export interface Step {
   key: string;
   title: string;
   body: ReactElement;
   button: string;
 }
 
 export type TutorialProps = {
-  steps: IStep[];
+  steps: Step[];
   tutorialTitle: string;
   imageSource?: string;
   tutorialIntro: string;

src/components/DataDisplay/Tutorial/TutorialSteps.tsx

@@ -5,15 +5,15 @@ import { Button, Dialog as EDSDialog } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
 
 import { useTutorialSteps } from '../../../providers/TutorialStepsProvider';
-import { IStep } from './Tutorial';
+import { Step } from './Tutorial';
 
 import styled, { keyframes } from 'styled-components';
 const { colors, spacings } = tokens;
 
 type TutorialStepsProps = {
   show: boolean;
   onClose: () => void;
-  steps: IStep[];
+  steps: Step[];
 };
 
 const spawn = keyframes`

src/components/Feedback/AnimatedCheckmark.stories.tsx

@@ -1,10 +1,48 @@
+import { useState } from 'react';
+
+import { Button } from '@equinor/eds-core-react';
 import { StoryFn } from '@storybook/react';
 
 import AnimatedCheckmark from './AnimatedCheckmark';
 
+import styled from 'styled-components';
+
 export default {
   title: 'Feedback/AnimatedCheckmark',
   component: AnimatedCheckmark,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Renders an AnimatedCheckMark on initial render, to re-run the animation the component needs to be re-rendered',
+      },
+    },
+  },
 };
 
-export const Primary: StoryFn = () => <AnimatedCheckmark />;
+const Container = styled.div`
+  display: grid;
+  grid-template-rows: 170px auto;
+  > button {
+    grid-row: 2;
+    width: fit-content;
+  }
+`;
+
+export const Primary: StoryFn = () => {
+  const [show, setShow] = useState(true);
+
+  const handleRerun = () => {
+    setShow(false);
+    setTimeout(() => {
+      setShow(true);
+    }, 100);
+  };
+
+  return (
+    <Container>
+      {show && <AnimatedCheckmark />}
+      <Button onClick={handleRerun}>Re-run animation</Button>
+    </Container>
+  );
+};

src/components/Feedback/ConfirmationPopup.stories.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { Button } from '@equinor/eds-core-react';
 import { StoryFn } from '@storybook/react';
 
@@ -7,7 +9,6 @@ export default {
   title: 'Feedback/ConfirmationPopup',
   component: ConfirmationPopup,
   argTypes: {
-    show: { control: 'boolean' },
     title: {
       control: 'text',
     },
@@ -18,26 +19,41 @@ export default {
       action: 'Ran onClose',
     },
     actions: {
-      control: 'array',
+      description: 'Array with buttons',
     },
     width: {
       control: 'text',
     },
   },
   args: {
-    show: true,
     title: 'This is the title',
     body: 'This is the body',
-    actions: [
-      <Button key="A1" variant="ghost" color="secondary">
-        Cancel
-      </Button>,
-      <Button key="A2">Action</Button>,
-    ],
     width: '400px',
   },
 };
 
 export const Primary: StoryFn<ConfirmationPopupProps> = (args) => {
-  return <ConfirmationPopup {...args} />;
+  const [show, setShow] = useState(false);
+
+  const handleOpen = () => setShow(true);
+  const handleOnClose = () => setShow(false);
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open confirmation popup</Button>
+      <ConfirmationPopup
+        {...args}
+        show={show}
+        onClose={handleOnClose}
+        actions={[
+          <Button key="cancel" variant="ghost" onClick={handleOnClose}>
+            Cancel
+          </Button>,
+          <Button key="continue " onClick={handleOnClose}>
+            Continue
+          </Button>,
+        ]}
+      />
+    </>
+  );
 };

src/components/Feedback/ConfirmationPopup.tsx

@@ -73,8 +73,8 @@ const ConfirmationPopup = forwardRef<HTMLDivElement, ConfirmationPopupProps>(
         <StyledDialog ref={ref} open={show} style={{ width }}>
           <DialogHeader data-testid="dialog-header">
             {title}
-            <Button variant="ghost_icon">
-              <Icon data={close} onClick={onClose} />
+            <Button variant="ghost_icon" onClick={onClose}>
+              <Icon data={close} />
             </Button>
           </DialogHeader>
           <Dialog.CustomContent>

src/components/Feedback/FullPageSpinner.stories.tsx

@@ -15,16 +15,18 @@ export default {
   args: {
     variant: undefined,
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
 } as Meta;
 
 const Container = styled.div`
-  width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
 
   & > div {
     width: 100%;
     height: 100%;
-    position: none;
   }
 `;