diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f9b8fb05..d1703337 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -36,7 +36,7 @@ module.exports = {
},
env: {
- 'vitest-globals': true,
+ 'vitest-globals/env': true,
},
parserOptions: {
diff --git a/.storybook/main.js b/.storybook/main.js
index 16ef994f..8e3f29af 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,3 @@
-const path = require('node:path');
-
export default {
stories: [
'../components/src/**/*.stories.@(js|jsx|ts|tsx|vue)',
@@ -12,56 +10,22 @@ export default {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
- '@storybook/addon-designs',
- 'storybook-vue-addon',
- 'storybook-addon-vue-mdx',
+ { name: '@storybook/addon-designs', options: { renderTarget: 'tab' } },
],
framework: {
- name: '@storybook/vue3-webpack5',
- options: {},
+ name: '@storybook/vue3-vite',
+ options: {
+ builder: {
+ viteConfigPath: './components/vite.config.js',
+ },
+ },
},
features: {
interactionsDebugger: true,
},
- webpackFinal: async (config) => {
- config.module.rules.push({
- test: /\.svg/,
- type: 'asset/source',
- loader: 'svgo-loader',
- options: {
- configFile: require.resolve('../components/svgo.config.js'),
- },
- });
-
- // Find Vue webpack rule and update its options to work with custom elements
- const vueRule = config.module.rules.find((rule) => rule.test?.toString() === '/\\.vue$/');
- vueRule.options = {
- ...vueRule.options,
- customElement: true,
- compilerOptions: {
- isCustomElement: (tag) => tag.startsWith('ui-'),
- },
- };
-
- config.module.rules.push({
- test: /\.styl(us)$/,
- use: ['vue-style-loader', 'css-loader', 'stylus-loader'],
- });
-
- config.resolve.alias = {
- vue: path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
- '~core': path.resolve(__dirname, '../components/src/core'),
- '~widgets': path.resolve(__dirname, '../components/src/widgets'),
- '~constants': path.resolve(__dirname, '../components/src/constants'),
- '~composables': path.resolve(__dirname, '../components/src/composables'),
- };
-
- return config;
- },
-
docs: {
autodocs: true,
},
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 775b192b..ab99e9bd 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,5 +1,4 @@
-import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
+import { addons } from '@storybook/manager-api';
import cloudBlueTheme from './CloudBlueTheme';
addons.setConfig({
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 42895047..5a9cd6c7 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,7 @@
import './global-styles.css';
+import './stories.css';
export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
diff --git a/.storybook/stories.css b/.storybook/stories.css
new file mode 100644
index 00000000..f5466d2e
--- /dev/null
+++ b/.storybook/stories.css
@@ -0,0 +1,17 @@
+.sb-all-icons {
+ margin-top: 24px;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.sb-icon-wrapper {
+ width: calc(33% - 10px);
+ margin-bottom: 20px;
+ margin-right: 10px;
+ display: flex;
+ align-items: center;
+}
+.sb-icon {
+ margin-right: 4px;
+}
diff --git a/components/src/composables/validation.spec.js b/components/src/composables/validation.spec.js
index 82ca67d1..16132626 100644
--- a/components/src/composables/validation.spec.js
+++ b/components/src/composables/validation.spec.js
@@ -11,7 +11,7 @@ describe('validation composables', () => {
beforeEach(() => {
model = ref('');
- rule = jest.fn().mockReturnValue(true);
+ rule = vi.fn().mockReturnValue(true);
rules = [rule];
});
diff --git a/components/src/stories/Button.mdx b/components/src/stories/Button.mdx
deleted file mode 100644
index cee3d3d1..00000000
--- a/components/src/stories/Button.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Meta, ArgsTable } from '@storybook/blocks';
-import { Figma } from '@storybook/addon-designs/blocks';
-
-
-
-# Button Design Specification
-
-
-
diff --git a/components/src/stories/Button.stories.js b/components/src/stories/Button.stories.js
index 3563ad4e..ac942448 100644
--- a/components/src/stories/Button.stories.js
+++ b/components/src/stories/Button.stories.js
@@ -47,6 +47,10 @@ export default {
component: Button,
parameters: {
layout: 'centered',
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/iWvG1cSD2xzbGS2KAB1DgV/Connect-UI-Guides-%26-Specs?type=design&node-id=1-4009&mode=design&t=5CPLKuHbPQnKMEJh-0',
+ },
},
argTypes: {
mode: { control: 'radio', options: ['solid', 'flat', 'outlined'] },
diff --git a/components/src/stories/Card.mdx b/components/src/stories/Card.mdx
deleted file mode 100644
index b3b70ea6..00000000
--- a/components/src/stories/Card.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Meta, ArgsTable } from '@storybook/blocks';
-import { Figma } from '@storybook/addon-designs/blocks';
-
-
-
-# Card Design Specification
-
-
-
diff --git a/components/src/stories/Card.stories.js b/components/src/stories/Card.stories.js
index 478daf61..73922a93 100644
--- a/components/src/stories/Card.stories.js
+++ b/components/src/stories/Card.stories.js
@@ -8,6 +8,10 @@ export default {
component: cCard,
parameters: {
layout: 'centered',
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/iWvG1cSD2xzbGS2KAB1DgV/Connect-UI-Guides-%26-Specs?node-id=1%3A5688&t=a9arRvCkF2acPp5E-1',
+ },
},
};
diff --git a/components/src/stories/Icon.stories.js b/components/src/stories/Icon.stories.js
index 7849f169..1d97dfcd 100644
--- a/components/src/stories/Icon.stories.js
+++ b/components/src/stories/Icon.stories.js
@@ -1,7 +1,12 @@
import Icon from '~widgets/icon/widget.vue';
import registerWidget from '~core/registerWidget';
-import * as icons from '@cloudblueconnect/material-svg';
+import * as iconsAnimated from '@cloudblueconnect/material-svg/animated';
+import * as iconsBaseline from '@cloudblueconnect/material-svg/baseline';
+import * as iconsOutline from '@cloudblueconnect/material-svg/outline';
+import * as iconsRound from '@cloudblueconnect/material-svg/round';
+import * as iconsSharp from '@cloudblueconnect/material-svg/sharp';
+import * as iconsTwotone from '@cloudblueconnect/material-svg/twotone';
registerWidget('ui-icon', Icon);
@@ -13,7 +18,7 @@ export default {
},
argTypes: {
iconName: {
- options: Object.keys(icons),
+ options: Object.keys(iconsBaseline),
control: {
type: 'select',
},
@@ -34,3 +39,147 @@ export const Component = {
color: '#757575',
},
};
+
+export const Animated = {
+ name: 'All animated',
+ render: () => ({
+ setup() {
+ return {};
+ },
+ template:
+ '' +
+ Object.keys(iconsAnimated)
+ .map(
+ (icon) =>
+ `
${icon}
`,
+ )
+ .join('') +
+ '
' +
+ Object.keys(iconsBaseline)
+ .map(
+ (icon) =>
+ `
${icon}
`,
+ )
+ .join('') +
+ '
' +
+ Object.keys(iconsOutline)
+ .map(
+ (icon) =>
+ `
${icon}
`,
+ )
+ .join('') +
+ '
' +
+ Object.keys(iconsRound)
+ .map(
+ (icon) =>
+ `
${icon}
`,
+ )
+ .join('') +
+ '
' +
+ Object.keys(iconsSharp)
+ .map(
+ (icon) =>
+ `
${icon}
`,
+ )
+ .join('') +
+ '
' +
+ Object.keys(iconsTwotone)
+ .map(
+ (icon) =>
+ `
${icon}
`,
+ )
+ .join('') +
+ '
-{Object.keys(icons).map(icon => (
{icon}
))}
-
-{Object.keys(icons).map(icon => (
{icon}
))}
-
-{Object.keys(icons).map(icon => (
{icon}
))}
-
-{Object.keys(icons).map(icon => (
{icon}
))}
-
-{Object.keys(icons).map(icon => (
{icon}
))}
-
-{Object.keys(icons).map(icon => (
{icon}
))}
-