@nd-storybook/storybook 0.3.5 → 0.3.6

package/dist/css/components/portal/dataFrame.css

@@ -1,450 +0,0 @@
-/* DataFrame.css - COMPLETE */
-
-/* Main Container */
-.dataframe {
-    border: var(--border-width-s) solid var(--color-border-accent-gray);
-    padding: var(--spacing-s);
-    margin-bottom: var(--spacing-m);
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-background-default);
-    max-width: 799px;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-@media only screen and (min-width: 799px) {
-    .dataframe {
-        padding: var(--spacing-m);
-    }
-}
-
-/* Header */
-.dataframe__header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-s);
-    align-self: stretch;
-    margin-bottom: var(--spacing-s);
-    flex-wrap: wrap;
-}
-
-.dataframe--collapsible .dataframe__header {
-    cursor: pointer;
-}
-
-.dataframe--collapsible .dataframe__header:hover .dataframe__title {
-    text-decoration: underline;
-    text-underline-offset: 0.3rem;
-    text-decoration-thickness: var(--border-width-s);
-}
-
-/* Title */
-.dataframe__title {
-    margin: var(--spacing-0);
-    color: var(--color-text-default);
-    font-family: var(--mijn-nd-heading-fontFamily);
-    font-size: var(--mijn-nd-heading-fontSize);
-    font-weight: var(--mijn-nd-heading-fontWeight);
-    letter-spacing: var(--mijn-nd-heading-letterSpacing);
-    line-height: var(--mijn-nd-heading-lineHeight);
-}
-
-.dataframe__header-actions {
-    display: flex;
-    gap: var(--spacing-m);
-    align-items: center;
-}
-
-/* Edit Button */
-.dataframe__edit-button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-xs) var(--spacing-s);
-    background-color: var(--color-button-background-pill-default);
-    border: var(--border-width-s) solid var(--color-button-border-pill-default);
-    border-radius: var(--border-radius-pill);
-    color: var(--color-button-text-pill-default);
-    font-family: var(--meta-regular-fontFamily);
-    font-size: var(--meta-regular-fontSize);
-    font-weight: var(--meta-regular-fontWeight);
-    letter-spacing: var(--meta-regular-letterSpacing);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.dataframe__edit-button:hover {
-    background-color: var(--color-button-background-pill-hover);
-    border-color: var(--color-button-border-pill-hover);
-    color: var(--color-button-text-pill-hover);
-}
-
-.dataframe__edit-button svg {
-    width: var(--spacing-s);
-    height: var(--spacing-s);
-    stroke: currentColor;
-}
-
-/* Toggle Button */
-.dataframe__toggle-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--color-icons-gray);
-}
-
-.dataframe__toggle-button svg {
-    width: var(--spacing-m);
-    height: var(--spacing-m);
-}
-
-/* Edit Mode Actions */
-.dataframe__edit-actions {
-    display: flex;
-    gap: var(--spacing-m);
-    align-items: center;
-}
-
-/* Cancel Button */
-.dataframe__cancel-button {
-    background-color: transparent;
-    border: none;
-    color: var(--color-link-text-default-default);
-    font-family: var(--meta-bold-fontFamily);
-    font-size: var(--meta-bold-fontSize);
-    font-weight: var(--meta-bold-fontWeight);
-    letter-spacing: var(--meta-bold-letterSpacing);
-    cursor: pointer;
-    padding: var(--spacing-0);
-}
-
-.dataframe__cancel-button:hover {
-    color: var(--color-link-text-default-hover);
-    text-decoration: underline;
-}
-
-/* Save Button */
-.dataframe__save-button {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-xs) var(--spacing-s);
-    background-color: var(--color-button-background-primary-default);
-    border: var(--border-width-s) solid var(--color-button-background-primary-default);
-    color: var(--color-button-text-primary-default);
-    font-family: var(--meta-bold-fontFamily);
-    font-size: var(--meta-bold-fontSize);
-    font-weight: var(--meta-bold-fontWeight);
-    letter-spacing: var(--meta-bold-letterSpacing);
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-
-.dataframe__save-button:hover:not(:disabled) {
-    background-color: var(--color-button-background-primary-hover);
-    border-color: var(--color-button-background-primary-hover);
-    color: var(--color-button-text-primary-hover);
-}
-
-.dataframe__save-button:disabled {
-    background-color: var(--color-button-background-primary-disabled);
-    border-color: var(--color-button-background-primary-disabled);
-    color: var(--color-button-text-primary-disabled);
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.dataframe__save-button svg {
-    width: var(--spacing-s);
-    height: var(--spacing-s);
-    fill: currentColor;
-}
-
-/* Content Container - View Mode */
-.dataframe__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-    width: 100%;
-}
-
-/* DataFrame Item - View Mode */
-.dataframe-item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xxs);
-}
-
-@media only screen and (min-width: 799px) {
-    .dataframe-item {
-        flex-direction: row;
-        align-items: flex-start;
-        gap: var(--spacing-m);
-    }
-}
-
-/* Labels */
-.dataframe-item__label {
-    font-family: var(--mijn-nd-description-fontFamily);
-    font-size: var(--mijn-nd-description-fontSize);
-    font-weight: var(--mijn-nd-description-fontWeight);
-    letter-spacing: var(--mijn-nd-description-letterSpacing);
-    line-height: var(--mijn-nd-description-lineHeight);
-    color: var(--color-text-default);
-}
-
-@media only screen and (min-width: 799px) {
-    .dataframe-item__label {
-        width: 35%;
-        min-width: 10rem;
-        flex-shrink: 0;
-    }
-}
-
-/* Values */
-.dataframe-item__value {
-    font-family: var(--body-regular-fontFamily);
-    font-size: var(--body-regular-fontSize);
-    font-weight: var(--body-regular-fontWeight);
-    letter-spacing: var(--body-regular-letterSpacing);
-    line-height: var(--body-regular-lineHeight);
-    color: var(--color-text-default);
-    word-break: break-word;
-}
-
-@media only screen and (min-width: 799px) {
-    .dataframe-item__value {
-        flex: 1;
-        min-width: 0;
-    }
-}
-
-/* Multiline values */
-.dataframe-item__value--multiline {
-    white-space: pre-line;
-}
-
-/* Edit Mode Content */
-.dataframe__edit-content {
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: var(--spacing-s);
-    width: 100%;
-}
-
-/* Input Row */
-.dataframe__input-row {
-    display: contents;
-}
-
-/* Input Container */
-.dataframe__input-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    grid-column: span 12;
-}
-
-/* Desktop grid spans */
-@media only screen and (min-width: 799px) {
-    .dataframe__input-container[style*="flex: 1"] {
-        grid-column: span 12;
-    }
-
-    .dataframe__input-container[style*="flex: 0 0 50%"] {
-        grid-column: span 6;
-    }
-
-    .dataframe__input-container[style*="flex: 0 0 33.333%"] {
-        grid-column: span 4;
-    }
-}
-
-/* Input Label */
-.dataframe__input-label {
-    font-family: var(--mijn-nd-description-fontFamily);
-    font-size: var(--mijn-nd-description-fontSize);
-    font-weight: var(--mijn-nd-description-fontWeight);
-    letter-spacing: var(--mijn-nd-description-letterSpacing);
-    line-height: var(--mijn-nd-description-lineHeight);
-    color: var(--color-text-default);
-}
-
-/* Input Fields */
-.dataframe__input {
-    font-family: var(--body-regular-fontFamily);
-    font-size: var(--body-regular-fontSize);
-    font-weight: var(--body-regular-fontWeight);
-    border: var(--border-width-s) solid var(--color-form-border-input-field-default);
-    border-radius: var(--border-radius-0);
-    padding: var(--spacing-xs) var(--spacing-s);
-    background-color: var(--color-form-background-input-field-default);
-    color: var(--color-text-default);
-    line-height: var(--body-regular-lineHeight);
-    min-height: 42px;
-    width: 100%;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-
-.dataframe__input:hover {
-    cursor: text;
-    background-color: var(--color-form-background-input-field-hover);
-    border-color: var(--color-form-border-input-field-hover);
-}
-
-.dataframe__input:focus {
-    outline: none;
-    border-color: var(--color-form-border-input-field-active);
-    background-color: var(--color-form-background-input-field-active);
-}
-
-.dataframe__input:disabled {
-    background-color: var(--color-form-background-input-field-disabled);
-    border-color: var(--color-form-border-input-field-disabled);
-    color: var(--color-text-disabled);
-    cursor: not-allowed;
-}
-
-/* Skeleton Loading */
-.dataframe-item__skeleton-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--spacing-s);
-    row-gap: var(--spacing-xs);
-}
-
-.dataframe-item__skeleton {
-    display: block;
-    background-color: var(--color-background-accent-gray);
-    width: 12rem;
-    height: 22px;
-    position: relative;
-    overflow: hidden;
-}
-
-.dataframe-item__skeleton::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-image: linear-gradient(
-            90deg,
-            var(--color-neutral-white-30) 0,
-            rgba(255, 255, 255, 0.2) 20%,
-            rgba(255, 255, 255, 0.5) 60%,
-            var(--color-neutral-white-30)
-    );
-    animation: shimmer 20s infinite linear;
-}
-
-@keyframes shimmer {
-    0% {
-        background-position: -1000px 0;
-    }
-    100% {
-        background-position: 1000px 0;
-    }
-}
-
-/* Skeleton size variations */
-.dataframe-item__skeleton--sm {
-    width: 4rem;
-}
-
-.dataframe-item__skeleton--md {
-    width: 8rem;
-}
-
-.dataframe-item__skeleton--lg {
-    width: 15rem;
-}
-
-/* Actions Section */
-.dataframe__actions {
-    display: flex;
-    gap: var(--spacing-s);
-    margin-top: var(--spacing-s);
-    flex-direction: column;
-}
-
-@media only screen and (min-width: 799px) {
-    .dataframe__actions {
-        flex-direction: row;
-        margin-top: var(--spacing-m);
-    }
-}
-
-/* Action Buttons */
-.dataframe__action-button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-xs) var(--spacing-s);
-    background-color: var(--color-button-background-pill-default);
-    border: var(--border-width-s) solid var(--color-button-border-pill-default);
-    border-radius: var(--border-radius-pill);
-    color: var(--color-button-text-pill-default);
-    font-family: var(--meta-regular-fontFamily);
-    font-size: var(--meta-regular-fontSize);
-    font-weight: var(--meta-regular-fontWeight);
-    letter-spacing: var(--meta-regular-letterSpacing);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.dataframe__action-button:hover {
-    background-color: var(--color-button-background-pill-hover);
-    border-color: var(--color-button-border-pill-hover);
-    color: var(--color-button-text-pill-hover);
-}
-
-.dataframe__action-button svg {
-    width: var(--spacing-s);
-    height: var(--spacing-s);
-    stroke: currentColor;
-}
-
-/* DataFrames Container */
-.dataframes {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-m);
-    max-width: 799px;
-    width: 100%;
-}
-
-/* Alert inside DataFrame */
-.dataframe .alert {
-    margin-bottom: var(--spacing-m);
-    width: 100%;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .dataframe {
-        background-color: var(--color-background-default);
-        border-color: var(--color-border-accent-gray);
-    }
-
-    .dataframe__input {
-        background-color: var(--color-background-dark);
-        border-color: var(--color-border-accent-gray);
-        color: var(--color-text-inverse);
-    }
-
-    .dataframe-item__skeleton {
-        background-color: var(--color-background-accent-gray);
-    }
-}

package/dist/css/components/portal/description-list.css

@@ -1,37 +0,0 @@
-@layer components {
-  .description-list-container {
-    @apply flex flex-col w-full mb-4 border border-gray-200 p-5 bg-white shadow-sm font-fira-sans;
-  }
-
-  .description-list-header {
-    @apply flex justify-between items-center mb-5;
-  }
-
-  .description-list-title {
-    @apply text-heading-2;
-  }
-
-  .description-list-actions {
-    @apply flex gap-2;
-  }
-
-  .description-list {
-    @apply grid w-full gap-y-4 gap-x-4 grid-cols-1 md:grid-cols-3 md:w-1/2;
-  }
-
-  .description-list-item {
-    @apply contents; /* Use 'contents' to keep dt and dd in the parent grid */
-  }
-
-  .description-list-term {
-    @apply text-lg text-gray-500 font-light md:col-span-1;
-  }
-
-  .description-list-description {
-    @apply text-lg leading-snug text-gray-900 m-0 md:col-span-2;
-  }
-
-  .description-list-footer {
-    @apply mt-5 pt-4 pb-2 border-t border-gray-200 text-sm font-normal leading-snug text-gray-500;
-  }
-}

package/dist/css/components/portal/menuItem.css

@@ -1,93 +0,0 @@
-/* Menu Item Component Styles - Using Design System Tokens */
-
-.menu-item {
-    position: relative;
-    padding: 0;
-    background: transparent;
-    border: none;
-    text-decoration: none;
-    min-width: fit-content;
-}
-
-/* Text styling - inherits from text-menu-menu-primary utility class */
-.menu-item span {
-    /* Typography is applied via text-menu-menu-primary class which includes:
-       - font-family: Fira Sans
-       - font-size: 22px
-       - font-weight: 400
-       - line-height: 140%
-       - letter-spacing: 0
-       - font-variant: all-small-caps
-    */
-    color: var(--color-text-default);
-    display: block;
-    white-space: nowrap;
-}
-
-/* Underline element */
-.menu-item__underline {
-    height: var(--border-width-s); /* Using your border-width-medium token (2px) */
-    width: 100%;
-    margin-top: var(--spacing-xxs);
-    background-color: transparent;
-    transition: background-color 200ms ease-in-out;
-}
-
-/* States */
-.menu-item[data-state="default"] .menu-item__underline {
-    background-color: transparent;
-}
-
-.menu-item[data-state="hover"] .menu-item__underline,
-.menu-item:hover .menu-item__underline {
-    background-color: var(--color-border-accent-gray);
-}
-
-.menu-item[data-state="active"] .menu-item__underline,
-.menu-item.active .menu-item__underline {
-    background-color: var(--color-border-brand);
-}
-
-/* Focus styles for accessibility */
-.menu-item:focus {
-    outline: 2px solid var(--color-border-brand);
-    outline-offset: 4px;
-}
-
-.menu-item:focus:not(:focus-visible) {
-    outline: none;
-}
-
-/* Container styles */
-.menu-items {
-    display: flex;
-    align-items: flex-start;
-}
-
-/* Horizontal menu layout */
-.menu-items.horizontal {
-    flex-direction: row;
-    gap: var(--spacing-l); /* Using your spacing-l token (40px) */
-}
-
-/* Vertical menu layout */
-.menu-items.vertical {
-    flex-direction: column;
-    gap: var(--spacing-xs); /* Using your spacing-xs token (8px) */
-}
-
-.menu-items.vertical .menu-item {
-    width: 100%;
-    text-align: left;
-}
-
-.menu-items.vertical .menu-item span {
-    text-align: left;
-}
-
-/* Responsive behavior */
-@media (max-width: 768px) {
-    .menu-items.horizontal {
-        gap: var(--spacing-m); /* Smaller gap on mobile */
-    }
-}

package/dist/css/components/portal/navigationCard.css

@@ -1,86 +0,0 @@
-/* Navigation Cards Component Styles - Using Only Design System Tokens */
-
-.navigation-cards {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: var(--spacing-m); /* 16px based on your tokens */
-    gap: var(--spacing-m);
-}
-
-@media (min-width: 768px) {
-    .navigation-cards {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-.navigation-card {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-m); /* Space between icon and content */
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing-l);
-    padding-top: 29px;
-    padding-bottom: 29px;
-
-    /* Using your border tokens */
-    border-width: var(--border-width-s);
-    border-style: solid;
-    border-color: var(--color-border-accent-gray-subtle);
-    background-color: var(--color-background-default);
-
-    /* Transition */
-    transition: border-color 200ms ease-in-out;
-    text-decoration: none;
-    display: flex; /* Ensure it's a flex container */
-}
-
-.navigation-card:hover {
-    border-color: var(--color-border-brand);
-}
-
-.navigation-card__icon {
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-    color: var(--color-icons-default);
-}
-
-.navigation-card__content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    min-width: 0;
-    flex: 1;
-    gap: var(--spacing-xs); /* Space between title and description */
-}
-
-.navigation-card__title {
-    /* Using MijnND heading tokens */
-    font-family: var(--mijn-nd-heading-fontFamily);
-    font-size: var(--mijn-nd-heading-fontSize);
-    font-weight: var(--mijn-nd-heading-fontWeight);
-    line-height: var(--mijn-nd-heading-lineHeight);
-    letter-spacing: var(--mijn-nd-heading-letterSpacing);
-    text-decoration: none;
-    color: var(--color-text-default);
-    margin: 0;
-}
-
-.navigation-card:hover .navigation-card__title {
-    text-decoration: underline;
-    text-underline-offset: 25%;
-}
-
-.navigation-card__description {
-    /* Using MijnND description tokens */
-    font-family: var(--mijn-nd-description-fontFamily);
-    font-size: var(--mijn-nd-description-fontSize);
-    font-weight: var(--mijn-nd-description-fontWeight);
-    line-height: var(--mijn-nd-description-lineHeight);
-    letter-spacing: var(--mijn-nd-description-letterSpacing);
-    text-decoration: none;
-    color: var(--color-text-default);
-    margin: 0;
-}

package/dist/css/components/portal/portal-navigation.css

@@ -1,45 +0,0 @@
-@layer components {
-    .portal-nav {
-        @apply flex flex-row gap-10 font-gulliver text-xl;
-    }
-
-    .portal-nav a {
-        @apply no-underline text-black hover:underline dark:text-white;
-    }
-
-    .portal-nav a .icon {
-        @apply hidden;
-    }
-
-    .portal-nav a.is-active {
-        @apply font-bold underline text-blue-400 underline-offset-[0.3rem] decoration-[0.05rem];
-    }
-
-    .portal-nav-mobile {
-        @apply flex-col gap-0;
-    }
-
-    .portal-nav-mobile li {
-        @apply w-full flex border-b border-black dark:border-white;
-    }
-
-    .portal-nav-mobile li a {
-        @apply flex flex-row justify-between items-center w-full pt-5 pb-5;
-    }
-
-    .portal-nav-mobile li:first-child a {
-        @apply pt-0;
-    }
-
-    .portal-nav-mobile li a .icon {
-        @apply flex;
-    }
-
-    .portal-nav-mobile-header {
-        @apply flex flex-row items-center gap-2;
-    }
-
-    .portal-nav-mobile-title {
-        @apply font-sans text-xl font-bold underline text-blue-400 underline-offset-[0.3rem] decoration-[0.05rem];
-    }
-}