Merge pull request #647 from materializecss/release-2.3.0

Release 2.3.0

Author: wuda-io

.all-contributorsrc

@@ -28,4 +28,6 @@ node_modules/
 # Ignore lock
 yarn.lock
 
-#dist/
+#dist/
+*storybook.log
+storybook-static

.gitattributes

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+const config: StorybookConfig = {
+  stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-themes', '@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/html-vite',
+    options: {}
+  },
+  docs: {
+    //👇 See the table below for the list of supported options
+    defaultName: 'Documentation'
+  }
+};
+export default config;

.gitignore

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api';
+import yourTheme from './my-theme';
+
+addons.setConfig({
+  theme: yourTheme
+});

.storybook/main.ts

@@ -0,0 +1,18 @@
+@import '@fontsource/material-icons';
+
+/* Font source only provides @font-face, so we need this class definition here */
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

.storybook/manager.js

@@ -0,0 +1,9 @@
+import { create } from 'storybook/theming';
+
+export default create({
+  // base: 'light',
+  brandTitle: 'My custom Storybook',
+  brandUrl: 'https://example.com',
+  brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+  brandTarget: '_self'
+});

.storybook/material-icons.css

@@ -0,0 +1,32 @@
+import type { Preview } from '@storybook/html';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import './material-icons.css';
+import '../sass/materialize.scss';
+
+const preview: Preview = {
+  decorators: [
+    // Decorator to be able to switch between light and dark themes
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark'
+      },
+      defaultTheme: 'light',
+      attributeName: 'theme'
+    })
+  ],
+  parameters: {
+    docs: {
+      toc: true // Enables the table of contents in auto generated docs
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;

.storybook/my-theme.js

@@ -62,10 +62,13 @@ Materialize is compatible with:
 - Edge
 
 ## Testing
-We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](CONTRIBUTING.md#jasmine-testing-guide).
+We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](docs/CONTRIBUTING.md#jasmine-testing-guide).
+
+## Quick Testing and Development
+For quick testing install live-server node package globally and run `npm run demo`
 
 ## Contributing
-Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/materializecss/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
+Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/materializecss/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
 
 ## Sponsors
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/materialize#sponsor)]