@datametria/vue-components/src/stories/Variants.stories.js

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

import DatametriaButton from '../components/DatametriaButton.vue'
import DatametriaAlert from '../components/DatametriaAlert.vue'
import DatametriaBadge from '../components/DatametriaBadge.vue'
import DatametriaChip from '../components/DatametriaChip.vue'
import DatametriaToast from '../components/DatametriaToast.vue'
import DatametriaNavbar from '../components/DatametriaNavbar.vue'

export default {
  title: 'Design System/Variants',
  parameters: {
    docs: {
      description: {
        component: 'Showcase of all component variants with primary variant standardization'
      }
    }
  }
}

export const AllVariants = () => ({
  components: {
    DatametriaButton,
    DatametriaAlert,
    DatametriaBadge,
    DatametriaChip,
    DatametriaToast,
    DatametriaNavbar
  },
  template: `
    <div style="padding: 2rem; space-y: 2rem;">
      <section>
        <h2>Button Variants</h2>
        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
          <DatametriaButton variant="primary">Primary</DatametriaButton>
          <DatametriaButton variant="secondary">Secondary</DatametriaButton>
          <DatametriaButton variant="outline">Outline</DatametriaButton>
          <DatametriaButton variant="ghost">Ghost</DatametriaButton>
        </div>
      </section>

      <section>
        <h2>Alert Variants</h2>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
          <DatametriaAlert variant="primary" message="Primary alert message" />
          <DatametriaAlert variant="success" message="Success alert message" />
          <DatametriaAlert variant="error" message="Error alert message" />
          <DatametriaAlert variant="warning" message="Warning alert message" />
          <DatametriaAlert variant="info" message="Info alert message" />
        </div>
      </section>

      <section>
        <h2>Badge Variants</h2>
        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
          <DatametriaBadge variant="primary" label="Primary" />
          <DatametriaBadge variant="secondary" label="Secondary" />
          <DatametriaBadge variant="success" label="Success" />
          <DatametriaBadge variant="error" label="Error" />
          <DatametriaBadge variant="warning" label="Warning" />
          <DatametriaBadge variant="info" label="Info" />
        </div>
      </section>

      <section>
        <h2>Chip Variants</h2>
        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
          <DatametriaChip variant="primary" label="Primary" />
          <DatametriaChip variant="secondary" label="Secondary" />
          <DatametriaChip variant="success" label="Success" />
          <DatametriaChip variant="error" label="Error" />
          <DatametriaChip variant="warning" label="Warning" />
        </div>
      </section>

      <section>
        <h2>Toast Variants</h2>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
          <DatametriaToast variant="primary" message="Primary toast" :model-value="true" />
          <DatametriaToast variant="success" message="Success toast" :model-value="true" />
          <DatametriaToast variant="error" message="Error toast" :model-value="true" />
          <DatametriaToast variant="warning" message="Warning toast" :model-value="true" />
          <DatametriaToast variant="info" message="Info toast" :model-value="true" />
        </div>
      </section>

      <section>
        <h2>Navbar Variants</h2>
        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
          <DatametriaNavbar variant="primary" brand="Primary Navbar" />
          <DatametriaNavbar variant="light" brand="Light Navbar" />
          <DatametriaNavbar variant="dark" brand="Dark Navbar" />
          <DatametriaNavbar variant="transparent" brand="Transparent Navbar" />
        </div>
      </section>
    </div>
  `
})