Merge pull request #520 from storyblok/develop

Release Max Newman

.eslintrc.js

@@ -60,7 +60,7 @@ module.exports = {
     {
       files: ['src/**/*.ts'],
       rules: {
-        '@typescript-eslint/explicit-function-return-type': 'error',
+        '@typescript-eslint/explicit-function-return-type': 'warn',
       },
     },
   ],

.storybook/main.js

@@ -1,18 +1,17 @@
-import { dirname, join } from "path";
+import { dirname, join } from 'path'
 const config = {
   framework: {
-    name: getAbsolutePath("@storybook/vue3-vite"),
+    name: getAbsolutePath('@storybook/vue3-vite'),
   },
   staticDirs: ['../public'],
   stories: [
     '../stories/**/*.stories.@(ts|js|mdx)',
     '../src/**/*.stories.@(ts|js|mdx)',
   ],
   addons: [
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath("@storybook/addon-storysource"),
-    getAbsolutePath("@storybook/addon-mdx-gfm")
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-storysource'),
   ],
   docs: {
     autodocs: true,
@@ -23,5 +22,5 @@ const config = {
 export default config
 
 function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')))
 }

package.json

@@ -1,6 +1,9 @@
 {
   "name": "@storyblok/design-system",
   "version": "3.9.0",
+  "main": "dist/storyblok-design-system.js",
+  "module": "dist/storyblok-design-system.mjs",
+  "umd": "dist/storyblok-design-system.umd.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/storyblok/storyblok-design-system.git"
@@ -19,8 +22,6 @@
     "prepare": "is-ci || husky install",
     "pre-commit": "lint-staged"
   },
-  "main": "dist/storyblok-design-system.js",
-  "module": "dist/storyblok-design-system.mjs",
   "types": "dist/src/main.d.ts",
   "files": [
     "dist",
@@ -37,46 +38,45 @@
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.5",
-    "@babel/eslint-parser": "^7.23.3",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-decorators": "^7.22.15",
     "@babel/plugin-proposal-export-default-from": "^7.18.10",
     "@ronilaukkarinen/stylelint-a11y": "^1.2.7",
     "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
     "@storybook/addon-storysource": "^7.6.10",
     "@storybook/addon-viewport": "^7.6.10",
     "@storybook/addons": "^7.6.10",
     "@storybook/theming": "^7.6.10",
     "@storybook/vue3": "^7.6.10",
     "@storybook/vue3-vite": "^7.6.10",
     "@testing-library/vue": "^7.0.0",
-    "@types/jsdom": "^21.1.5",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@types/jsdom": "^21.1.6",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/tsconfig": "^0.4.0",
+    "@vue/test-utils": "^2.4.4",
+    "@vue/tsconfig": "^0.5.1",
     "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
     "babel-preset-vue": "^2.0.2",
     "chromatic": "^6.18.2",
     "colord": "^2.9.3",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-plugin-vitest": "^0.3.10",
-    "eslint-plugin-vue": "^9.19.2",
-    "eslint-plugin-vuejs-accessibility": "^2.2.0",
+    "eslint-plugin-vitest": "^0.3.22",
+    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vuejs-accessibility": "^2.2.1",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "jest-transform-stub": "^2.0.0",
@@ -97,13 +97,13 @@
     "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-order": "^6.0.3",
     "typescript": "^5.2.2",
-    "vite": "^4.5.2",
+    "vite": "^5.1.3",
     "vite-plugin-dts": "^3.7.2",
-    "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.33.0",
-    "vue": "^3.3.8",
-    "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^1.8.22"
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^1.3.0",
+    "vue": "^3.4.19",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^1.8.27"
   },
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": [

src/assets/styles/_border.scss

@@ -1,7 +1,9 @@
-$base-border: 1px solid $border-gray-light;
+@use './colors' as colors;
+
+$base-border: 1px solid colors.$border-gray-light;
 
 // Box-shadow
-$box-shadow-default: 0 2px 17px 3px $shadow-dark-blue-transparent;
+$box-shadow-default: 0 2px 17px 3px colors.$shadow-dark-blue-transparent;
 
 // Border radius
 $base-border-radius: 8px;

src/assets/styles/_sizes.scss

@@ -8,6 +8,7 @@ $icon-extra-large-size: 4.8rem;
 $sb-avatar-small: 26px;
 $sb-avatar-normal: 32px;
 $sb-avatar-large: 46px;
+$s-0: 0;
 $s-1: 4px;
 $s-2: 8px;
 $s-3: 12px;
@@ -17,6 +18,7 @@ $s-6: 32px;
 $s-7: 40px;
 $s-8: 48px;
 $sizes: (
+  '0': $s-0,
   '1': $s-1,
   '2': $s-2,
   '3': $s-3,

src/components/Accordion/Accordion.stories.ts

@@ -1,6 +1,10 @@
 import Accordion from './index'
 
-export default {
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+
+type Story = StoryObj<typeof Accordion>
+
+const meta: Meta<typeof Accordion> = {
   title: 'Basic/SbAccordion',
   component: Accordion,
   args: {
@@ -13,85 +17,93 @@ export default {
     noPadding: false,
     contentInfoSlot: '<i>4 items</i>',
   },
-}
+  render: (args: Args) => ({
+    components: { Accordion },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div>
+        <Accordion
+          v-bind="args"
+          style="max-width: 300px"
+        >
+          <h2>Some text</h2>
+          <p>Some more text</p>
 
-const Template = (args) => ({
-  components: { Accordion },
-  setup() {
-    return { args }
-  },
-  template: `
-    <div>
-      <Accordion
-        v-bind="args"
-        style="max-width: 300px"
-      >
-        <h2>Some text</h2>
-        <p>Some more text</p>
-
-        <template #contentInfo>
-          <span v-html="args.contentInfoSlot" />
-        </template>
-      </Accordion>
-
-      <Accordion
-        v-bind="args"
-        style="max-width: 300px"
-      >
-        <h2>Some text</h2>
-        <p>Some more text</p>
-
-        <template #contentInfo>
-          <span v-html="args.contentInfoSlot" />
-        </template>
-      </Accordion>
-
-      <Accordion
+          <template #contentInfo>
+            <span v-html="args.contentInfoSlot" />
+          </template>
+        </Accordion>
+
+        <Accordion
           v-bind="args"
           style="max-width: 300px"
-      >
-        <h2>Some text</h2>
-        <p>Some more text</p>
-
-        <template #contentInfo>
-          <span v-html="args.contentInfoSlot" />
-        </template>
-      </Accordion>
-    </div>
-  `,
-})
-
-export const Default = Template.bind({})
-Default.args = { title: 'Hello World' }
-
-export const WithIcon = Template.bind({})
-WithIcon.args = {
-  title: 'Hello World with Icon',
-  icon: 'trash-2',
-  iconDescription: 'Delete',
+        >
+          <h2>Some text</h2>
+          <p>Some more text</p>
+
+          <template #contentInfo>
+            <span v-html="args.contentInfoSlot" />
+          </template>
+        </Accordion>
+
+        <Accordion
+            v-bind="args"
+            style="max-width: 300px"
+        >
+          <h2>Some text</h2>
+          <p>Some more text</p>
+
+          <template #contentInfo>
+            <span v-html="args.contentInfoSlot" />
+          </template>
+        </Accordion>
+      </div>
+    `,
+  }),
 }
 
-export const isOpen = Template.bind({})
-isOpen.args = {
-  isOpen: true,
+export default meta
+
+export const Default: Story = {
+  args: { title: 'Hello World' },
 }
 
-export const noHighlight = Template.bind({})
-noHighlight.args = {
-  noHighlight: true,
+export const WithIcon: Story = {
+  args: {
+    title: 'Hello World with Icon',
+    icon: 'trash-2',
+    iconDescription: 'Delete',
+  },
 }
 
-export const noBorder = Template.bind({})
-noBorder.args = {
-  noBorder: true,
+export const isOpen: Story = {
+  args: {
+    isOpen: true,
+  },
 }
 
-export const noPadding = Template.bind({})
-noPadding.args = {
-  noPadding: true,
+export const noHighlight: Story = {
+  args: {
+    noHighlight: true,
+  },
+}
+
+export const noBorder: Story = {
+  args: {
+    noBorder: true,
+  },
 }
 
-export const contentInfo = Template.bind({})
-contentInfo.args = {
-  contentInfoSlot: '',
+export const noPadding: Story = {
+  args: {
+    noPadding: true,
+  },
+}
+
+export const contentInfo: Story = {
+  args: {
+    contentInfoSlot: '',
+  },
 }