@nd-storybook/storybook 0.3.0

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

@@ -0,0 +1,450 @@
+/* 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

@@ -0,0 +1,37 @@
+@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

@@ -0,0 +1,93 @@
+/* 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

@@ -0,0 +1,86 @@
+/* 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

@@ -0,0 +1,45 @@
+@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];
+    }
+}