@nd-storybook/storybook 0.3.0

package/README.md

@@ -0,0 +1,71 @@
+# Company Design System
+
+This repository contains the design system for our company, built with Vue 3, Tailwind CSS, and Storybook.
+
+## Getting Started
+
+### Installation
+
+```bash
+npm install
+```
+
+### Updating tokens
+
+1. Go to the Design system in Figma: https://www.figma.com/design/KBKdkDiytfjb5XDctGX367.
+2. Install the plugin 'Design token manager' from the Figma community.
+3. Open the plugin and click the 'export' button.
+4. Copy the generated JSON to the `/tokens` folder in this project.
+5. Run the `yarn build-tailwind-tokens` command to generate the Tailwind CSS configuration from the tokens.
+
+> Note: this command only needs to be run when the tokens are updated in Figma. No need to call this method every time you run the project, or deploy it.
+
+### Development
+
+To run the development server:
+
+```bash
+npm run serve
+```
+
+To run Storybook:
+
+```bash
+npm run storybook
+```
+
+### Building
+
+To build the library:
+
+```bash
+npm run build
+```
+
+To build Storybook:
+
+```bash
+npm run build-storybook
+```
+
+## Components
+
+The design system includes the following components:
+
+- Button
+- Card
+
+Each component has its own directory with:
+- Vue component file
+- Storybook stories file
+
+## Customization
+
+The design system uses Tailwind CSS for styling. You can customize the design tokens in the `tailwind.config.js` file.
+
+## Adding New Components
+
+1. Create a new directory in `src/components/`
+2. Add your Vue component file
+3. Create a Storybook stories file
+4. Export the component in `src/components/index.js`

package/dist/css/badge.css

@@ -0,0 +1,20 @@
+@layer components {
+
+  .badge-premium {
+    @apply
+      inline-flex
+      items-center
+      gap-x-xs
+      p-s
+      bg-background-accent-pink-subtlest
+      text-meta-regular
+  }
+
+  .badge-premium-small {
+    @apply
+      p-xs
+      gap-x-xs
+      text-meta-regular
+  }
+
+}

package/dist/css/components/modal.css

@@ -0,0 +1,133 @@
+@layer components {
+    /* Modal Overlay */
+    .modal-overlay {
+        @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity duration-300 ease-in-out;
+    }
+
+    /* Modal Panel */
+    .modal-panel {
+        @apply inline-block align-bottom bg-white p-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all duration-300 ease-in-out w-full max-w-sm;
+    }
+
+    /* Modal Dialog */
+    .modal-dialog {
+        @apply inline-block w-full max-w-md overflow-y-auto text-left align-middle transition-all duration-300 ease-in-out transform bg-white shadow-xl rounded-lg font-fira-sans;
+    }
+
+    .modal-dialog-md {
+        @apply w-full max-w-md;
+    }
+
+    .modal-dialog-xl {
+        @apply w-full max-w-xl;
+    }
+
+    .modal-dialog-scrollable {
+        max-height: calc(100vh - 3rem);
+    }
+
+    /* Modal Header */
+    .modal-header {
+        @apply flex flex-col justify-between flex-wrap px-4 py-6 border-b border-gray-200;
+    }
+
+    @screen sm {
+        .modal-header {
+            @apply flex-nowrap px-6;
+        }
+    }
+
+    .modal-dialog h2 {
+        @apply text-lg font-medium text-gray-900;
+    }
+
+    /* Modal Body */
+    .modal-body {
+        @apply p-4;
+    }
+
+    @screen sm {
+        .modal-body {
+            @apply p-6;
+        }
+    }
+
+    /* Modal Footer */
+    .modal-footer {
+        @apply flex-row px-4 py-5 border-t border-gray-200 flex;
+    }
+
+    @screen sm {
+        .modal-footer {
+            @apply p-6;
+        }
+    }
+
+    /* Simplified Modal */
+    .modal-simplified .modal-header {
+        @apply border-b-0;
+    }
+
+    .modal-simplified .modal-body {
+        @apply pt-2 pb-2;
+    }
+
+    .modal-simplified .modal-footer {
+        @apply border-t-0;
+    }
+
+    /* Slideover Modal */
+    .modal-slideover {
+        @apply pointer-events-auto w-screen max-w-md;
+    }
+
+    .modal-slideover-xl {
+        @apply max-w-2xl;
+    }
+
+    .modal-slideover-container {
+        @apply flex h-full flex-col overflow-y-hidden bg-white shadow-xl;
+    }
+
+    /* Close button */
+    .modal-close-button {
+        @apply absolute top-7 right-7;
+    }
+
+    /* Slideover Body */
+    .modal-slideover-body {
+        @apply relative flex-grow;
+    }
+
+    /* Mobile Modal Styles */
+    @media (max-width: 767px) {
+        .modal-dialog:not(.modal-compact) {
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            height: 100vh !important;
+            max-height: 100vh !important;
+            border-radius: 0 !important;
+        }
+
+        .modal-dialog:not(.modal-compact) .modal-container {
+            border-radius: 0 !important;
+            width: 100% !important;
+            height: 100% !important;
+            max-height: 100vh !important;
+            display: flex !important;
+            flex-direction: column !important;
+        }
+
+        .modal-dialog:not(.modal-compact) .modal-body {
+            flex: 1 !important;
+            overflow-y: auto !important;
+        }
+
+        .modal-dialog.modal-compact {
+            width: calc(100% - 2rem) !important;
+            max-width: calc(100% - 2rem) !important;
+            margin: 0 1rem !important;
+        }
+    }
+}

package/dist/css/components/portal/accordion.css

@@ -0,0 +1,39 @@
+/* Accordion.css - COMPLETE */
+.accordion {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 799px;
+}
+
+.accordion__title {
+    margin-bottom: var(--spacing-m);
+    font-family: var(--heading-2-fontFamily);
+    font-size: var(--heading-2-fontSize);
+    font-weight: var(--heading-2-fontWeight);
+    line-height: var(--heading-2-lineHeight);
+    color: var(--color-text-default);
+}
+
+.accordion__items {
+    display: flex;
+    flex-direction: column;
+}
+
+.accordion__item-wrapper {
+    margin: 0;
+}
+
+.accordion__item-wrapper + .accordion__item-wrapper {
+    margin-top: var(--spacing-s);
+}
+
+/* FAQ-specific styling */
+.faq {
+    width: 100%;
+    max-width: 799px;
+}
+
+.faq .accordion {
+    width: 100%;
+}

package/dist/css/components/portal/accordionItem.css

@@ -0,0 +1,102 @@
+/* AccordionItem.css - COMPLETE */
+.accordion-item {
+    border: var(--border-width-s) solid var(--color-border-accent-gray);
+    background: var(--color-background-default);
+    width: 100%;
+    display: block;
+    transition: border-color 0.2s ease;
+}
+
+.accordion-item--open {
+    border-color: var(--color-border-brand);
+}
+
+.accordion-item__button {
+    padding: var(--spacing-xs) var(--spacing-s);
+    width: 100%;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    outline: none;
+}
+
+.accordion-item__button:focus-visible {
+    outline: none;
+}
+
+.accordion-item:has(.accordion-item__button:focus-visible):not(.accordion-item--open) {
+    border-color: var(--color-border-brand);
+}
+
+.accordion-item__button:hover .accordion-item__question {
+    text-decoration: underline;
+    text-underline-offset: 25%;
+}
+
+.accordion-item__question {
+    flex: 1;
+    display: block;
+    font-family: var(--body-bold-fontFamily);
+    font-size: var(--body-bold-fontSize);
+    font-weight: var(--body-bold-fontWeight);
+    line-height: var(--body-bold-lineHeight);
+    color: var(--color-text-default);
+}
+
+/* Large variant */
+.accordion-item__question--large {
+    font-family: var(--heading-2-fontFamily);
+    font-size: var(--heading-2-fontSize);
+    font-weight: var(--heading-2-fontWeight);
+    line-height: var(--heading-2-lineHeight);
+}
+
+.accordion-item__icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.accordion-item--open .accordion-item__icon {
+    transform: rotate(180deg);
+}
+
+.accordion-item__answer {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: max-height 0.3s ease,
+    opacity 0.3s ease,
+    transform 0.3s ease,
+    padding 0.3s ease;
+    padding: 0 var(--spacing-s);
+    width: 100%;
+    display: block;
+}
+
+.accordion-item__answer--open {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs);
+}
+
+.accordion-item__content {
+    margin-top: var(--spacing-xs);
+    margin-bottom: 0;
+    display: block;
+    font-family: var(--body-light-fontFamily);
+    font-size: var(--body-light-fontSize);
+    font-weight: var(--body-light-fontWeight);
+    line-height: var(--body-light-lineHeight);
+    color: var(--color-text-default);
+}

package/dist/css/components/portal/alert.css

@@ -0,0 +1,71 @@
+/* Alert.css - COMPLETE */
+.alert {
+    padding: var(--spacing-s) var(--spacing-m);
+    display: flex;
+    width: 100%;
+    gap: var(--spacing-xs);
+    font-family: var(--body-light-fontFamily);
+    font-size: var(--body-light-fontSize);
+    font-weight: var(--body-light-fontWeight);
+    color: var(--color-text-default);
+    border-radius: var(--border-radius-0);
+    box-sizing: border-box;
+    min-height: 48px;
+    align-items: flex-start;
+}
+
+.alert--dark {
+    background: var(--color-neutral-100);
+}
+
+.alert--danger {
+    background: var(--color-background-accent-pink-subtlest);
+    border: 1px solid var(--color-text-warning);
+}
+
+.alert--info {
+    background: var(--color-background-default);
+    border: 1px solid var(--color-neutral-400);
+}
+
+.alert--success {
+    background: var(--color-background-brand-subtlest);
+}
+
+.alert--warning {
+    background: var(--color-background-default);
+    border: 2px solid var(--color-text-warning);
+}
+
+/* Icon adjustments */
+.alert svg {
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+/* Icon colors */
+.alert__icon--dark {
+    color: var(--color-blue-400);
+}
+
+.alert__icon--danger {
+    color: var(--color-text-warning);
+}
+
+.alert__icon--info {
+    color: var(--color-blue-400);
+}
+
+.alert__icon--success {
+    color: var(--color-text-brand);
+}
+
+.alert__icon--warning {
+    color: var(--color-icons-warning);
+}
+
+/* Alert text content */
+.alert span {
+    flex: 1;
+    line-height: 1.5;
+}