Merge branch 'main' into feat/DSM-800_add-segmentedcontrol-tests

carlsberg · Oct 4, 2023 · 56f1f01 · 56f1f01
2 parents d63c805 + 53c32e4
commit 56f1f01
Show file tree

Hide file tree

Showing 42 changed files with 7,496 additions and 9,550 deletions.
diff --git a/.bitmap b/.bitmap
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ public/bit
 public/bit/*
 **/package-lock.json
 **/install-state.gz
+docs/*
diff --git a/.storybook/importPath.js b/.storybook/importPath.js
@@ -1,4 +1,4 @@
-import { Description, DocsContext, Source } from '@storybook/addon-docs';
+import { DocsContext, Markdown, Source } from '@storybook/addon-docs';
 import React, { useContext, useEffect, useState } from 'react';
 
 export const ImportPath = () => {
@@ -26,25 +26,23 @@ export const ImportPath = () => {
 
   return path && object ? (
     <>
-      <Description>
+      <Markdown>
         Make sure, prior to installing any Malty components, you have [Registered the
         Scope](https://malty.carlsberggroup.com/5715d933c/p/36d196-development/b/7760a0).
-      </Description>
-      <Description>
+      </Markdown>
+      <Markdown>
         To add this package to your project, install it with [Yarn](https://classic.yarnpkg.com/lang/en/docs/install),
         first:
-      </Description>
+      </Markdown>
       <Source language="bash" code={path} dark></Source>
-      <Description>Once you have it installed, feel free to import it anywhere as follows:</Description>
+      <Markdown>Once you have it installed, feel free to import it anywhere as follows:</Markdown>
       <Source language="ts" code={object} dark></Source>
-      <Description>
+      <Markdown>
         After having successfully installed and imported the component into your project, feel free to use it as shown
         below:
-      </Description>
+      </Markdown>
     </>
-  ) : (
-    <></>
-  );
+  ) : null;
 };
 
 export default ImportPath;
diff --git a/.storybook/infoComponent.js b/.storybook/infoComponent.js
@@ -1,10 +1,12 @@
-import { Canvas, Description, DocsContext } from '@storybook/addon-docs';
+import { DocsContext, Markdown } from '@storybook/addon-docs';
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-const StyledCanvas = styled(Canvas)`
+const StyledCanvas = styled.div`
   background-color: #ffe1e1;
-  padding: 0;
+  padding: 15px 20px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
   p.sbdocs.sbdocs-p {
     margin: 0px !important;
   }
@@ -23,14 +25,10 @@ export const InfoComponent = () => {
   }, [context]);
 
   return info ? (
-    <>
-      <StyledCanvas>
-        <Description>{info}</Description>
-      </StyledCanvas>
-    </>
-  ) : (
-    <></>
-  );
+    <StyledCanvas>
+      <Markdown>{info}</Markdown>
+    </StyledCanvas>
+  ) : null;
 };
 
 export default InfoComponent;
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,5 +1,11 @@
-module.exports = {
-  stories: ['../malty/**/**/*.stories.mdx', '../malty/**/**/*.stories.@(js|jsx|ts|tsx)'],
+import { dirname, join } from 'path';
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+export default {
+  stories: ['../malty/!(icons)/!(IconWrapper)/*.stories.@(mdx|js|jsx|ts|tsx)'],
   addons: [
     {
       name: '@storybook/addon-links',
@@ -15,9 +21,6 @@ module.exports = {
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
     }
   },
-  core: {
-    builder: 'webpack5'
-  },
   staticDirs: [{ from: '../public/storybook', to: '/' }],
   previewHead: (head) => `
     ${head}
@@ -29,5 +32,12 @@ module.exports = {
         display: none !important;
       }
     </style>
-  `
+  `,
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
 };
diff --git a/.storybook/maltyTheme.js b/.storybook/maltyTheme.js
@@ -1,39 +1,9 @@
-// .storybook/YourTheme.js
-
 import { create } from '@storybook/theming';
 
 export default create({
   base: 'light',
-
   brandTitle: 'Malty',
   brandUrl: 'https://malty.carlsberggroup.com',
   brandImage: './[email protected]',
-
-  //   colorPrimary: 'hotpink',
-  //   colorSecondary: 'deepskyblue',
-
-  //   UI
-  //   appBg: 'white',
-  //   appContentBg: 'silver',
-  //   appBorderColor: 'grey',
-  //   appBorderRadius: 4,
-
-  //   Typography
-  //   fontBase: '"Open Sans", sans-serif',
-  //   fontCode: 'monospace',
-
-  //   Text colors
-  //   textColor: 'black',
-  //   textInverseColor: 'rgba(255,255,255,0.9)',
-
-  //   Toolbar default and active colors
-  //   barTextColor: 'silver',
-  //   barSelectedColor: 'black',
-  //   barBg: 'hotpink',
-
-  //   Form colors
-  //   inputBg: 'white',
-  //   inputBorder: 'silver',
-  //   inputTextColor: 'black',
   inputBorderRadius: 0
 });
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,14 +1,5 @@
 import { MaltyThemeProvider } from '@carlsberggroup/malty.theme.malty-theme-provider';
-import {
-  ArgsTable,
-  Description,
-  DocsContainer,
-  Primary,
-  PRIMARY_STORY,
-  Stories,
-  Subtitle,
-  Title
-} from '@storybook/addon-docs';
+import { Controls, Description, DocsContainer, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs';
 import React from 'react';
 import styled from 'styled-components';
 import { ImportPath } from './importPath';
@@ -72,7 +63,7 @@ export const parameters = {
           <Primary />
           <StoryToggle />
           <InfoComponent />
-          <ArgsTable story={PRIMARY_STORY} />
+          <Controls />
           <Stories />
         </DocsContainer>
       )) ||
@@ -88,14 +79,13 @@ export const parameters = {
           <DocsContainer {...rest}>
             <Primary />
             <InfoComponent />
-            <ArgsTable story={PRIMARY_STORY} />
+            <Controls />
           </DocsContainer>
         </StyledDocsContainer>
       ))
   },
   controls: {
     matchers: {
-      color: /(background|color)$/i,
       date: /Date$/
     }
   },
@@ -114,13 +104,13 @@ export const globalTypes = {
     description: 'Global theme for components',
     defaultValue: 'global',
     toolbar: {
+      title: 'Theme',
       items: [
         { value: 'global', title: 'Global' },
         { value: 'cadi', title: 'Cadi' },
         { value: 'carlsberg', title: 'Carlsberg' },
         { value: 'lbc', title: 'LBC' }
-      ],
-      title: 'Theme'
+      ]
     }
   }
 };
diff --git a/.storybook/storyToggle.js b/.storybook/storyToggle.js
@@ -1,10 +1,12 @@
-import { Canvas, Description, DocsContext } from '@storybook/addon-docs';
+import { DocsContext, Markdown } from '@storybook/addon-docs';
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-const StyledCanvas = styled(Canvas)`
+const StyledCanvas = styled.div`
   background-color: #fff5e0;
-  padding: 0;
+  padding: 15px 20px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
   p.sbdocs.sbdocs-p {
     margin: 0px !important;
   }
@@ -33,14 +35,10 @@ export const StoryToggle = () => {
   }, [context]);
 
   return copy && variants ? (
-    <>
-      <StyledCanvas>
-        <Description>{copy}</Description>
-      </StyledCanvas>
-    </>
-  ) : (
-    <></>
-  );
+    <StyledCanvas>
+      <Markdown>{copy}</Markdown>
+    </StyledCanvas>
+  ) : null;
 };
 
 export default StoryToggle;
diff --git a/.storybook/themedComponent.js b/.storybook/themedComponent.js
@@ -1,10 +1,12 @@
-import { Canvas, Description, DocsContext } from '@storybook/addon-docs';
+import { DocsContext, Markdown } from '@storybook/addon-docs';
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-const StyledCanvas = styled(Canvas)`
+const StyledCanvas = styled.div`
   background-color: #d5eaff;
-  padding: 0;
+  padding: 15px 20px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
   p.sbdocs.sbdocs-p {
     margin: 0px !important;
   }
@@ -23,18 +25,14 @@ export const ThemedComponent = () => {
   }, [context]);
 
   return themed ? (
-    <>
-      <StyledCanvas>
-        <Description>
-          **This is a themed component:** To see the Theme menu, and be able to change the theme for the
-          _MaltyThemeProvider_, please press the 'T' key on your keyboard, and the toolbar should appear above. For more
-          details, or if this doesn't work, please reach out to the Malty team.
-        </Description>
-      </StyledCanvas>
-    </>
-  ) : (
-    <></>
-  );
+    <StyledCanvas>
+      <Markdown>
+        **This is a themed component:** To see the Theme menu, and be able to change the theme for the
+        _MaltyThemeProvider_, please press the 'T' key on your keyboard, and the toolbar should appear above. For more
+        details, or if this doesn't work, please reach out to the Malty team.
+      </Markdown>
+    </StyledCanvas>
+  ) : null;
 };
 
 export default ThemedComponent;
diff --git a/README.md b/README.md
@@ -114,7 +114,3 @@ export const component = ({ children }: ComponentProps) => {
   const renderComponent = () => <Component>{childen}</Component>;
 };
 ```
-
-## Governance and contribution
-
-To read on this topic, please do so [here](https://carlsberggbs.atlassian.net/l/c/NsExD0AT).
diff --git a/malty/atoms/Card/Card.stories.tsx b/malty/atoms/Card/Card.stories.tsx
@@ -13,7 +13,6 @@ export default {
   parameters: {
     importObject: 'Card',
     importPath: '@carlsberggroup/malty.atoms.Card',
-    backgrounds: { name: 'dark background', value: '#000', default: true },
     variants: ['shadowed', 'landscape', 'selected', 'onclick']
   },
   argTypes: {
@@ -58,7 +57,6 @@ export default {
   }
 };
 
-// eslint-disable-next-line react/function-component-definition
 const Template: Story<CardProps> = (args) => {
   return <CardComponent {...args} />;
 };