;
+
+export const Default: Story = {
+ args: {
+ text: 'Badge',
+ },
+};
+
+export const WithIcon: Story = {
+ args: {
+ text: 'Featured',
+ icon: 'star',
+ color: 'yellow',
+ },
+};
+
+export const WithAppendedIcon: Story = {
+ args: {
+ text: 'Published',
+ iconAppend: 'check',
+ color: 'green',
+ },
+};
+
+export const Pill: Story = {
+ args: {
+ text: 'Pill Badge',
+ pill: true,
+ color: 'blue',
+ },
+};
+
+export const WithPrepend: Story = {
+ args: {
+ text: 'Items',
+ prepend: '5',
+ color: 'purple',
+ },
+};
+
+export const WithAppend: Story = {
+ args: {
+ text: 'Score',
+ append: '100',
+ color: 'emerald',
+ },
+};
+
+export const Sizes: Story = {
+ render: () => ({
+ components: { Badge },
+ template: `
+
+
+
+
+
+ `,
+ }),
+};
+
+export const Colors: Story = {
+ render: () => ({
+ components: { Badge },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
+export const StatusIndicators: Story = {
+ render: () => ({
+ components: { Badge },
+ template: `
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
diff --git a/resources/js/stories/Button.mdx b/resources/js/stories/Button.mdx
new file mode 100644
index 00000000000..cc29cdeddf8
--- /dev/null
+++ b/resources/js/stories/Button.mdx
@@ -0,0 +1,22 @@
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './Button.stories';
+
+
+
+# Button
+
+Buttons are used to trigger actions. They come in many sizes and flavors.
+
+
+
+## Variants
+
+Use the `variant` prop to change the appearance of the button.
+
+
+
+## Sizes
+
+Use the `size` prop to change the size of the button.
+
+
diff --git a/resources/js/stories/Button.stories.ts b/resources/js/stories/Button.stories.ts
new file mode 100644
index 00000000000..c0874d730a5
--- /dev/null
+++ b/resources/js/stories/Button.stories.ts
@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Button from '@ui/Button/Button.vue';
+
+const meta = {
+ title: 'Components/Button',
+ component: Button,
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['default', 'primary', 'danger', 'filled', 'ghost', 'ghost-pressed', 'subtle', 'pressed'],
+ },
+ size: {
+ control: 'select',
+ options: ['lg', 'base', 'sm', 'xs'],
+ },
+ text: { control: 'text' },
+ icon: { control: 'text' },
+ iconAppend: { control: 'text' },
+ loading: { control: 'boolean' },
+ disabled: { control: 'boolean' },
+ round: { control: 'boolean' },
+ iconOnly: { control: 'boolean' },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ text: 'Button',
+ },
+};
+
+export const Primary: Story = {
+ args: {
+ text: 'Primary Button',
+ variant: 'primary',
+ },
+};
+
+export const Danger: Story = {
+ args: {
+ text: 'Delete',
+ variant: 'danger',
+ },
+};
+
+export const Ghost: Story = {
+ args: {
+ text: 'Ghost Button',
+ variant: 'ghost',
+ },
+};
+
+export const Subtle: Story = {
+ args: {
+ text: 'Subtle Button',
+ variant: 'subtle',
+ },
+};
+
+export const WithIcon: Story = {
+ args: {
+ text: 'Save',
+ icon: 'check',
+ },
+};
+
+export const WithAppendedIcon: Story = {
+ args: {
+ text: 'Continue',
+ iconAppend: 'chevron-right',
+ },
+};
+
+export const IconOnly: Story = {
+ args: {
+ icon: 'settings',
+ iconOnly: true,
+ },
+};
+
+export const Loading: Story = {
+ args: {
+ text: 'Loading',
+ loading: true,
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ text: 'Disabled',
+ disabled: true,
+ },
+};
+
+export const Sizes: Story = {
+ render: () => ({
+ components: { Button },
+ template: `
+
+
+
+
+
+
+ `,
+ }),
+};
+
+export const Variants: Story = {
+ render: () => ({
+ components: { Button },
+ template: `
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
+export const Round: Story = {
+ args: {
+ icon: 'plus',
+ iconOnly: true,
+ round: true,
+ },
+};
+
diff --git a/resources/js/stories/GettingStarted.mdx b/resources/js/stories/GettingStarted.mdx
new file mode 100644
index 00000000000..cb4c16d2431
--- /dev/null
+++ b/resources/js/stories/GettingStarted.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Getting Started
+
+Welcome to the Statamic UI component library. This documentation provides interactive examples and usage guidelines for all available components.
diff --git a/resources/js/stories/Installation.mdx b/resources/js/stories/Installation.mdx
new file mode 100644
index 00000000000..f6201a45d05
--- /dev/null
+++ b/resources/js/stories/Installation.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Installation
+
+This is how you do it.
diff --git a/resources/js/tests/NormalizeInputOptions.test.js b/resources/js/tests/NormalizeInputOptions.test.js
index 553eaf3129c..8997a8b58ef 100644
--- a/resources/js/tests/NormalizeInputOptions.test.js
+++ b/resources/js/tests/NormalizeInputOptions.test.js
@@ -1,18 +1,11 @@
import { it, expect } from 'vitest';
import hasInputOptions from '../components/fieldtypes/HasInputOptions';
+import { setTranslations } from '@/translations/translator.js';
const normalizeInputOptions = hasInputOptions.methods.normalizeInputOptions;
-const config = {
- translations: {
- '*.One': 'Uno',
- },
-};
-
-window.Statamic = {
- $config: {
- get: (key) => config[key],
- },
-};
+setTranslations({
+ '*.One': 'Uno',
+});
it('normalizes input options with simple array', () => {
expect(normalizeInputOptions(['one', 'two'])).toEqual([
diff --git a/resources/js/translations/translator.js b/resources/js/translations/translator.js
index ff9233070c6..616b7391d0e 100644
--- a/resources/js/translations/translator.js
+++ b/resources/js/translations/translator.js
@@ -1,5 +1,16 @@
import selectPluralMessage from './message-selector';
+let translations = {};
+let locale = 'en';
+
+export function setTranslations(newTranslations) {
+ translations = newTranslations;
+}
+
+export function setLocale(newLocale) {
+ locale = newLocale;
+}
+
/**
* Get a translated string
*
@@ -36,7 +47,7 @@ export const translateChoice = function (key, count, replacements) {
// Get the full translation. It will include all the piped plural versions, but with all replacements done.
let message = translate(key, replacements);
- return selectPluralMessage(message, count, Statamic.$config.get('translationLocale'));
+ return selectPluralMessage(message, count, locale);
};
/**
@@ -44,8 +55,6 @@ export const translateChoice = function (key, count, replacements) {
* @param {String} key
*/
const getLine = function (key) {
- const translations = Statamic.$config.get('translations');
-
return (
translations[`*.${key}`] ||
translations[key] ||
diff --git a/resources/svg/vitest.shims.d.ts b/resources/svg/vitest.shims.d.ts
new file mode 100644
index 00000000000..7782f28d389
--- /dev/null
+++ b/resources/svg/vitest.shims.d.ts
@@ -0,0 +1 @@
+///
\ No newline at end of file