Release/0.8

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.storybook/capgeminiTheme.js

@@ -11,7 +11,6 @@ export default create({
   appContentBg: 'white',
   appBorderColor: '#2b0a3d',
   appBorderRadius: 4,
-
   // Text colors
   textColor: '#0070ad',
   fontWeight: 'bold',

.storybook/main.js

@@ -1,14 +1,28 @@
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  stories: ['../stories/**/*.stories.@(mdx)'],
+process.env.DESIGN_TOKEN_GLOB = "**/tokens.css";
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     'storybook-css-modules-preset',
     '@storybook/addon-a11y',
+    {
+        name: "storybook-design-token",
+        options: {
+          preserveCSSVars: false
+        },
+      docs: {
+        autodocs: "tag",
+      },
+    },
+    '@storybook/addon-mdx-gfm'
   ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
 };
+
+export default config;

.storybook/manager-head.html

@@ -1,2 +1,15 @@
-<link rel="shortcut icon" href="https://www.capgemini.com/wp-content/themes/capgemini-komposite/assets/images/favicon.ico">
-<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">
+<link rel="shortcut icon"
+  href="https://www.capgemini.com/wp-content/themes/capgemini-komposite/assets/images/favicon.ico">
+<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">
+<!-- TODO-DS: we'll remove this one when we'll decide to release the design tokens-->
+<script defer>
+  if (location.hostname !== 'localhost') {
+    const $hideDesignSystemFromSidebar = document.createElement('style');
+    $hideDesignSystemFromSidebar.innerText = `
+      button[data-item-id*="design-system"] {
+        display: none !important;
+      }
+    `;
+    document.head.appendChild($hideDesignSystemFromSidebar);
+  }
+</script>

.storybook/preview.js

@@ -1,9 +1,148 @@
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
-import '../stories/govUkStyle.css';
+import '../stories/govUkStyleOfficial.css';
+import '../stories/liveEdit/style.css';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks';
+
 export const parameters = {
   options: {
     storySort: {
-      order: ['DCXLibrary', ['Introduction','Utils', 'Form', 'CopyToClipboard', 'Details', 'Tabs', 'Table', 'Changelog']]
+      order: [
+        'DCXLibrary',
+        [
+          'Introduction',
+          'Utils',
+          'Form',
+          [
+            'Autocomplete',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Button',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'CharacterCount',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Checkbox',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'CheckboxGroup',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'RadioGroup',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Input',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'InputMasked',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Select',
+            [
+              'Documentation',
+              'Live',
+              'Without style',
+              'Class based',
+              'Design system',
+              [
+                'Playground',
+                'Default',
+                'Accessible',
+                'Dark',
+                'Material',
+                'Floating',
+              ],
+            ],
+            'MultiSelect',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Date',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'MultiUpload',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Progress',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Range',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Toggle',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Tooltip',
+            ['Documentation', 'Live', 'Class based'],
+          ],
+          'Breadcrumb',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'CopyToClipboard',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Details',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Tabs',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Table',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Typography',
+          [
+            'Abbreviate',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Blockquote',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Heading',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Paragraph',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Blockquote',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'CodeSnippet',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Label',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Link',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'InsertText',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'KeyboardInput',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Highlight',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'List',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+          ],
+          'Changelog',
+        ],
+      ],
     },
   },
-};
+  //with this custom configuration we removed the <Controls/> (the properties table) from the page. By default it sits between Primary and Stories
+  docs: {
+    page: () => (
+      <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Primary />
+        <Stories includePrimary={false} />
+      </>
+    ),
+  },
+};
+
+//It will allow to refresh the iframe all the time you move from one story to another - https://github.com/storybookjs/storybook/issues/16016
+let storyId;
+let storyTitle;
+export const decorators = [
+  (storyFn, context) => {
+    console.log('context.title:', context.title);
+    console.log('storyTitle:', storyTitle);
+    if (storyTitle && context.title !== storyTitle) {
+      document.location.reload();
+      console.log('first');
+    } else if (
+      storyId &&
+      context.id !== storyId &&
+      context.title !== storyTitle
+    ) {
+      document.location.reload();
+      console.log('second');
+    }
+    storyId = context.id;
+    storyTitle = context.title;
+    return storyFn();
+  },
+];

.vscode/settings.json

@@ -1,7 +1,14 @@
 {
-    "window.zoomLevel": 0,
-    "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "editor.formatOnSave": true
+  "window.zoomLevel": 0,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "stylelint.validate": [
+    "css",
+    "scss"
+  ],
+  "files.associations": {
+    "*.css": "postcss"
+  }
 }

CHANGELOG.md

@@ -1,3 +1,40 @@
+## 0.8.0 (15/09/2023)
+
+<a name="0.8.0"></a>
+
+[Autocomplete - changing defaultValue prop has no affect](https://github.com/Capgemini/dcx-react-library/issues/455)
+[Autocomplete - doesn't auto scroll for filtered list on keydown](https://github.com/Capgemini/dcx-react-library/issues/470)
+[Button - add new properties](https://github.com/Capgemini/dcx-react-library/issues/466)
+[Tabs - non-js compliant](https://github.com/Capgemini/dcx-react-library/issues/283)
+
+**New components**
+[Code Snippet](https://github.com/Capgemini/dcx-react-library/issues/500)
+[Breadcrumbs](https://github.com/Capgemini/dcx-react-library/issues/415)
+[Preformatted Text](https://github.com/Capgemini/dcx-react-library/issues/503)
+[Abbreviate](https://github.com/Capgemini/dcx-react-library/issues/497)
+[Highlight](https://github.com/Capgemini/dcx-react-library/issues/498)
+[List item](https://github.com/Capgemini/dcx-react-library/issues/453)
+[Blockquote](https://github.com/Capgemini/dcx-react-library/issues/499)
+[Keyboard Shortcut](https://github.com/Capgemini/dcx-react-library/issues/501)
+[Paragraph](https://github.com/Capgemini/dcx-react-library/issues/455)
+[Insert Text](https://github.com/Capgemini/dcx-react-library/issues/452)
+[Link](https://github.com/Capgemini/dcx-react-library/issues/467)
+[Label](https://github.com/Capgemini/dcx-react-library/issues/466)
+[Heading](https://github.com/Capgemini/dcx-react-library/issues/450)
+
+**Documentation**
+[clientOnly](https://github.com/Capgemini/dcx-react-library/issues/459)
+[Storybook - v7](https://github.com/Capgemini/dcx-react-library/issues/473)
+
+**Design system - not publicly available yet... stay tuned ;)**
+[Button](https://github.com/Capgemini/dcx-react-library/issues/468)
+[Select](https://github.com/Capgemini/dcx-react-library/issues/469)
+[List Item](https://github.com/Capgemini/dcx-react-library/issues/487)
+[Heading](https://github.com/Capgemini/dcx-react-library/issues/484)
+[Insert Text](https://github.com/Capgemini/dcx-react-library/issues/486)
+[Paragraph](https://github.com/Capgemini/dcx-react-library/issues/488)
+[Label](https://github.com/Capgemini/dcx-react-library/issues/485)
+
 ## 0.7.0 (27/03/2023)
 
 <a name="0.7.0"></a>

CONTRIBUTING.md

@@ -70,6 +70,7 @@ To create a new component the following must be satisfied before adding
 4. create the test under `__tests__` within the component-name folder
 5. create or edit a demo in the `example/src`
 6. create or edit the story in the `stories`
+7. in case you create a new component update the `./storybook/preview,js` file adding your component (follow the style of the other items already present)
 
 Example folder structure with component `SnackBar`: