dso-toolkit 81.1.0 → 83.0.0

package/src/components/accordion/accordion.scss

@@ -1,400 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/colors";
-@use "../../variables/typography";
-@use "../../components/link";
-@use "../../components/accordion";
-
-@use "../../di";
-
-@use "accordion-theme-compact";
-@use "accordion-theme-conclusion";
-@use "accordion-theme-default";
-
-.dso-accordion {
-  margin-block-end: units.$block-spacing-xlarge;
-
-  // dit is een nested accordion.
-  .dso-accordion {
-    margin-block-end: 0;
-  }
-
-  .dso-section-body {
-    border-block-start: 0;
-    margin-block-start: accordion.$border-radius * -1;
-    padding-block: units.$u2 + accordion.$border-radius units.$u2;
-    padding-inline: units.$u2;
-
-    > *:first-child:not(.dso-info) {
-      margin-block-start: 0;
-    }
-
-    > *:last-child:not(.dso-info) {
-      margin-block-end: 0;
-    }
-
-    .dso-rich-content + .dso-accordion,
-    .dso-accordion + .dso-rich-content {
-      margin-block-start: units.$u2;
-    }
-  }
-
-  &.dso-accordion-reverse-align {
-    .dso-section-handle {
-      a,
-      button {
-        padding-inline-start: units.$u2;
-        padding-inline-end: units.$u6;
-
-        &::before {
-          inset-inline: auto 0;
-        }
-
-        .dso-icon {
-          display: block;
-          float: inline-start;
-          font-weight: 400;
-          margin-inline-start: 0;
-          margin-inline-end: units.$u1;
-          padding-inline-start: 0;
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  &:not(.dso-accordion-compact):not(.dso-accordion-conclusion):not(.dso-accordion-compact-black) {
-    &,
-    .dso-nested-accordion .dso-accordion {
-      @include accordion-theme-default.default();
-    }
-  }
-
-  &.dso-accordion-conclusion {
-    &,
-    .dso-nested-accordion .dso-accordion {
-      @include accordion-theme-conclusion.conclusion();
-    }
-  }
-
-  &:not(.dso-accordion-compact):not(.dso-accordion-compact-black).dso-accordion-reverse-align .dso-section-handle {
-    a::before,
-    button::before {
-      inset-inline-end: units.$u2;
-    }
-  }
-
-  &.dso-accordion-compact,
-  &.dso-accordion-compact-black {
-    &,
-    .dso-nested-accordion .dso-accordion {
-      @include accordion-theme-compact.compact();
-    }
-
-    .dso-accordion-wijzigactie-voegtoe {
-      background-color: colors.$lime-20;
-
-      .dso-section-body {
-        background-color: colors.$lime-20;
-      }
-    }
-
-    .dso-accordion-wijzigactie-verwijder {
-      text-decoration: line-through;
-      background-color: colors.$rood-20;
-
-      .dso-section-body {
-        text-decoration: line-through;
-        background-color: colors.$rood-20;
-      }
-    }
-  }
-
-  &.dso-accordion-compact-black {
-    .dso-accordion-section {
-      .dso-section-handle {
-        a,
-        a:hover,
-        button,
-        button:hover {
-          color: accordion.$compact-black-color;
-          &::before {
-            @include di.base("chevron-right-zwart", accordion.$chevron-icon-size);
-          }
-        }
-      }
-      &.dso-open:not(.dso-nested-accordion) {
-        .dso-section-handle {
-          a,
-          a:hover,
-          button,
-          button:hover {
-            color: accordion.$compact-black-color;
-            &::before {
-              @include di.base("chevron-down-zwart", accordion.$chevron-icon-size);
-            }
-          }
-        }
-      }
-      &.dso-accordion-section-activate {
-        .dso-section-handle {
-          display: flex;
-        }
-
-        dso-slide-toggle {
-          margin-block-start: accordion.$block-padding - accordion.$compact-border-width;
-          margin-inline: units.$u1;
-
-          button.dso-slider {
-            padding-inline-start: 0;
-          }
-
-          button.dso-slider,
-          button.dso-slider:hover {
-            &::before,
-            &::after {
-              content: none;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.dso-accordion-compact-black.dso-accordion-reverse-align {
-    .dso-accordion-section:not(.dso-open) {
-      .dso-section-handle {
-        a,
-        a:hover,
-        button,
-        button:hover {
-          &::before {
-            @include di.base("chevron-down-zwart", accordion.$chevron-icon-size);
-          }
-        }
-      }
-    }
-    .dso-accordion-section {
-      &.dso-open:not(.dso-nested-accordion) {
-        .dso-section-handle {
-          a,
-          a:hover,
-          button,
-          button:hover {
-            &::before {
-              @include di.base("chevron-up-zwart", accordion.$chevron-icon-size);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .dso-section-body dl:last-child {
-    margin-block-end: 0;
-  }
-}
-
-// Section
-.dso-section-handle {
-  font-weight: 600;
-  position: relative;
-
-  a {
-    @include link.clean();
-  }
-
-  a,
-  button {
-    align-items: flex-start;
-    background-color: transparent;
-    border: 0;
-    display: flex;
-    padding-block: accordion.$block-padding;
-    padding-inline: accordion.$chevron-inline-start-offset accordion.$inline-padding;
-    text-align: start;
-    inline-size: 100%;
-    overflow-wrap: anywhere;
-
-    &::before {
-      content: "";
-      display: inline-block;
-      inset-inline-start: units.$u2;
-      position: absolute;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      inset-inline-end: units.$u2;
-      inset-block-start: (accordion.$handle-block-size - accordion.$state-icon-size) * 0.5;
-    }
-
-    .dso-section-handle-addons {
-      margin-inline-start: auto;
-      text-align: end;
-
-      .dso-status,
-      .dso-icon {
-        font-weight: 400;
-        font-size: typography.$font-size-small;
-        margin-inline-start: units.$u2;
-      }
-
-      dso-attachments-counter,
-      .dso-attachments {
-        margin-inline-start: units.$u2;
-      }
-
-      .dso-attachments {
-        &::after {
-          @include di.base("paperclip-grijs", accordion.$chevron-icon-size);
-        }
-      }
-    }
-
-    > .dso-label {
-      padding-inline-start: units.$u1;
-      word-break: normal;
-
-      & + .dso-icon,
-      & + .dso-attachments,
-      & + .dso-status {
-        margin-inline-start: 0;
-      }
-    }
-  }
-}
-
-// Create space between sections of the default accordion
-// ------------------------------------------------------
-:where(.dso-accordion-section) {
-  & + & {
-    margin-block-start: units.$u1 * 0.5;
-  }
-}
-
-// exceptions to the rule ^^:
-:where(.dso-accordion-compact, .dso-accordion-compact-black) {
-  + :where(.dso-accordion-section) {
-    margin-block-start: 0;
-  }
-}
-
-.dso-accordion-section {
-  .dso-section-handle,
-  > h1.dso-section-handle,
-  > h2.dso-section-handle,
-  > h3.dso-section-handle,
-  > h4.dso-section-handle,
-  > h5.dso-section-handle {
-    font-size: 1em;
-    line-height: accordion.$handle-line-height;
-    margin: 0;
-
-    a:active {
-      text-decoration: none;
-    }
-  }
-
-  &.dso-success,
-  &.dso-error,
-  &.dso-danger,
-  &.dso-warning,
-  &.dso-info {
-    > .dso-section-handle {
-      a,
-      button {
-        padding-inline-end: units.$u7;
-      }
-    }
-  }
-
-  &.dso-success {
-    > .dso-section-handle {
-      a::after,
-      button::after {
-        @include di.base("status-success", accordion.$chevron-icon-size);
-      }
-    }
-  }
-
-  &.dso-error {
-    > .dso-section-handle {
-      a::after,
-      button::after {
-        @include di.base("status-error", accordion.$chevron-icon-size);
-      }
-    }
-  }
-
-  &.dso-danger {
-    > .dso-section-handle {
-      a::after,
-      button::after {
-        @include di.base("status-danger", accordion.$chevron-icon-size);
-      }
-    }
-  }
-
-  &.dso-warning {
-    > .dso-section-handle {
-      a::after,
-      button::after {
-        @include di.base("status-warning", accordion.$chevron-icon-size);
-      }
-    }
-  }
-
-  &.dso-info {
-    > .dso-section-handle {
-      a::after,
-      button::after {
-        @include di.base("status-info", accordion.$chevron-icon-size);
-      }
-    }
-  }
-
-  &.dso-open {
-    &.dso-nested-accordion {
-      border-radius: 0 0 accordion.$border-radius accordion.$border-radius;
-
-      > .dso-section-body {
-        padding-block: (units.$u2 + accordion.$border-radius - 1) units.$u2; // corrections for missing borders in nested accordion
-        padding-inline: (units.$u2 + 1); // corrections for missing borders in nested accordion
-      }
-
-      .dso-accordion-section .dso-section-body {
-        background-color: colors.$wit;
-      }
-    }
-  }
-
-  &:not(.dso-open) {
-    .dso-section-body {
-      display: none;
-    }
-  }
-}
-
-// Web component
-dso-accordion-section {
-  > *:first-child:not(.dso-info) {
-    margin-block-start: 0;
-  }
-
-  > *:last-child:not(.dso-info) {
-    margin-block-end: 0;
-  }
-
-  &.dso-accordion-compact:last-child,
-  &.dso-accordion-compact-black:last-child {
-    border-block-end: 1px solid accordion.$compact-border-color;
-  }
-}
-
-dso-accordion {
-  .dso-rich-content + dso-accordion,
-  dso-accordion + .dso-rich-content {
-    margin-block-start: units.$u2;
-  }
-}

package/src/components/accordion/accordion.variables.scss

@@ -1,35 +0,0 @@
-@use "../../variables/colors";
-@use "../../variables/units";
-
-$default-border-color: colors.$mauve;
-$default-color: colors.$mauve;
-$default-nested-handle-bgcolor: colors.$mauve;
-$default-nested-body-bgcolor: colors.$grijs-10;
-
-$conclusion-bgcolor: colors.$grijs-5;
-$conclusion-hover-bgcolor: colors.$grijs-10;
-$conclusion-border-color: colors.$grijs-5;
-$conclusion-color: colors.$zwart;
-$conclusion-nested-handle-bgcolor: $conclusion-bgcolor;
-$conclusion-nested-body-bgcolor: colors.$wit;
-
-$compact-color: colors.$grasgroen;
-$compact-border-color: colors.$grijs-20;
-$compact-border-width: 1px;
-
-$compact-black-color: colors.$zwart;
-
-$neutral-color: colors.$zwart;
-$neutral-border-color: colors.$bosgroen;
-
-$border-radius: units.$u1 * 0.5;
-$inline-padding: units.$u2;
-$block-padding: units.$u1 * 1.5;
-$chevron-icon-size: units.$u3;
-$chevron-space: units.$u3;
-$chevron-inline-start-offset: $chevron-icon-size + $chevron-space;
-$handle-line-height: 1.375em;
-$handle-block-size: units.$u6;
-$state-icon-size: units.$u3;
-
-$slide-toggle-inline-size: units.$u5;

package/src/components/accordion/readme.md

@@ -1,33 +0,0 @@
-# `.dso-accordion`
-
-Varianten:
-
-- `.dso-accordion.dso-accordion-compact`
-- `.dso-accordion.dso-accordion-conclusion`
-
-## Instructies voor afnemers
-
-Een accordion (`.dso-accordion`) bestaat uit secties (`.dso-accordion-section`). Een sectie heeft een handle (`.dso-section-handle`) en body (`.dso-section-body`).
-
-Een accordion section in de state "open" moet een `.dso-open` class op `.dso-accordion-section` krijgen. Dit zorgt voor het "chevron-up"-icoon. Ook als het `.dso-accordion-section` element niet in het DOM staat, moet een open accordion altijd `.dso-open` krijgen.
-
-Er zijn 4 modifiers: `.dso-succes`, `.dso-warning`, `.dso-info` en `.dso-error` die op de `.dso-accordion-section` kunnen.
-
-Het is mogelijk om een accordion in een accordion te plaatsen. Er moet dan wel `.dso-nested-accordion` op de `.dso-accordion-section` worden gezet.
-
-Voegt u via een modifier een statusicoon toe aan de uitklapbare knop (`.dso-succes`, `.dso-warning`, `.dso-info` of `.dso-error`)? Let dan op de volgende dingen:
-
-- Beschrijf de betekenis van het statusicoon in de context van de accordion met een .sr-only span. Plaats deze in de tekst van de knop.
-- Voorbeeldtekst voor `.dso-succes`: "Informatie bouwwerkzaamheden `<span class="sr-only">(afgerond)</span>`"
-
-## Gedrag en toegankelijkheid
-
-Let bij implementatie van het accordion op het volgende:
-
-- Gebruik voor de uitklapbare knoppen `<button>` als de locatie van de gebruiker ongewijzigd blijft. Als er genavigeerd wordt, gebruik dan een `<a>`.
-- Geef deze knoppen een heading op het juiste niveau.
-  - Meestal is dat 1 niveau onder het niveau van de heading die boven het accordion staat. Stel dat het accordion direct onder de paginatitel staat (dat is een `<h1>`). Dan krijgt de knop `<h2>`.
-  - In een genest accordion heeft de geneste knop een heading van 1 niveau onder de heading van de bovenliggende knop. Stel dat de bovenliggende knop een `<h2>` heeft. Dan krijgt de geneste knop een `<h3>`.
-- Geef de knoppen het aria-expanded attribuut. Screenreaders hebben dit attribuut nodig om te bepalen of een knop is ingeklapt of uitgeklapt.
-- Zorg daarnaast dat scripting de modifier `.dso-open` meegeeft (zie HTML) aan het bovenliggende element van een uitgeklapte knop. De scripting moet de modifier weer weghalen bij het inklappen. Daarmee zorg je dat het verschil tussen een ingeklapte knop en een uitgeklapte knop goed zichtbaar is.
-- Zorg dat de scripting het attribuut `aria-expanded="true"` zet bij het uitklappen en op `"false"` bij het inklappen.

package/src/components/card/_index.scss

@@ -1 +0,0 @@
-@forward "card.variables";

package/src/components/card/card.scss

@@ -1,126 +0,0 @@
-@use "../../variables/colors";
-@use "../../variables/media-query-breakpoints";
-@use "../../variables/units";
-
-@use "card.variables" as card-variables;
-
-@use "../button";
-
-.dso-card {
-  &:has(.dso-card-heading a:is(:hover, :focus-visible)) {
-    background-color: colors.$grijs-5;
-
-    .dso-card-heading a:hover {
-      color: card-variables.$heading-anchor-hover-color;
-      text-decoration: underline;
-    }
-  }
-
-  &.dso-is-selectable {
-    .dso-card-container {
-      display: grid;
-      grid-template-columns: 1fr minmax(0, 100%);
-
-      .dso-card-heading,
-      .dso-card-content {
-        grid-column: 2 /-1;
-      }
-    }
-  }
-
-  .dso-rich-content.dso-rich-content {
-    :first-child {
-      margin-block-start: 0;
-    }
-
-    :last-child {
-      margin-block-end: 0;
-    }
-  }
-
-  .dso-selectable {
-    label {
-      font-size: 0;
-    }
-  }
-
-  .dso-card-container {
-    padding-block: units.$u2;
-    padding-inline: units.$u2;
-    inline-size: 100%;
-
-    &.dso-card-active {
-      background-color: card-variables.$background-color-active;
-    }
-
-    .dso-card-selectable {
-      grid-row: span 2;
-    }
-  }
-
-  .dso-card-heading {
-    align-items: center;
-    display: flex;
-    margin-block-end: units.$u1;
-
-    h2:first-child,
-    h3:first-child,
-    h4:first-child,
-    h5:first-child {
-      align-items: center;
-      display: flex;
-      font-size: 1.125em;
-      margin-block-end: 0;
-      margin-block-start: 0;
-
-      span {
-        margin-inline-end: units.$u1 * 0.5;
-
-        + dso-icon {
-          flex-shrink: 0;
-          position: relative;
-        }
-      }
-    }
-
-    a {
-      text-decoration: none;
-
-      &,
-      &#{button.$not-dso-buttons}:visited,
-      &:active,
-      &:focus-visible {
-        color: card-variables.$heading-anchor-color;
-      }
-    }
-
-    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {
-      flex-wrap: wrap;
-    }
-  }
-
-  .dso-card-interactions {
-    display: flex;
-    justify-content: space-between;
-    margin-inline-start: auto;
-
-    .dso-card-interaction {
-      align-items: center;
-      display: flex;
-      text-align: center;
-
-      p {
-        margin-block-end: 0;
-      }
-    }
-
-    .dso-info-button {
-      margin: 0;
-    }
-
-    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {
-      flex-basis: 100%;
-      margin-block-start: units.$u2;
-    }
-  }
-}

package/src/components/card/card.variables.scss

@@ -1,7 +0,0 @@
-@use "../../variables/colors";
-
-$background-color-hover: colors.$grijs-5;
-$background-color-active: colors.$grijs-10;
-
-$heading-anchor-color: colors.$bosgroen;
-$heading-anchor-hover-color: colors.$bosgroen;

package/src/components/document-list/document-list.scss

@@ -1,97 +0,0 @@
-@use "../../utilities";
-@use "../../variables/units";
-@use "../../variables/colors";
-@use "../list";
-
-@use "../grid/grid.variables" as css-grid-variables;
-
-.dso-document-list {
-  @include list.unstyled();
-  margin-block: 0;
-  margin-inline: css-grid-variables.$grid-gutter-width * -0.5;
-}
-
-.dso-document-list-item {
-  display: flex;
-  flex-direction: column;
-
-  &.dso-document-list-item-sticky {
-    .dso-document-list-item-heading {
-      padding-block: css-grid-variables.$grid-gutter-width * 0.25;
-      padding-inline: css-grid-variables.$grid-gutter-width * 0.5;
-
-      h2 {
-        font-size: 1.25rem;
-        line-height: 1.2;
-      }
-
-      .dso-document-list-item-container {
-        display: none;
-      }
-    }
-  }
-
-  .dso-document-list-item-heading {
-    background-color: colors.$grijs-5;
-    color: colors.$zwart;
-    padding: #{css-grid-variables.$grid-gutter-width * 0.5};
-    inline-size: 100%;
-
-    a {
-      color: colors.$zwart;
-    }
-
-    > :first-child {
-      margin: 0;
-    }
-
-    .dso-document-list-item-container {
-      position: relative;
-    }
-
-    .dso-document-list-item-type,
-    .dso-document-list-item-owner {
-      margin-block: 0 units.$u1;
-      margin-inline: 0;
-      display: inline-block;
-    }
-
-    .dso-document-list-item-status {
-      dso-badge,
-      .dso-badge {
-        margin-inline-end: units.$u1;
-      }
-    }
-  }
-
-  .dso-document-list-item-content {
-    padding: #{css-grid-variables.$grid-gutter-width * 0.5};
-  }
-}
-
-.dso-document-list-item-open-document {
-  float: inline-end;
-}
-
-dso-responsive-element[small] > .dso-document-list {
-  .dso-document-list-item-container {
-    @include utilities.clearfix();
-  }
-
-  .dso-document-list-item-status {
-    margin-block: 0 units.$u1;
-    margin-inline: 0;
-  }
-}
-
-dso-responsive-element:not([small]) > .dso-document-list {
-  .dso-document-list-item {
-    &-type {
-      margin-inline-end: units.$u1;
-    }
-
-    &-status {
-      margin: 0;
-    }
-  }
-}

package/src/components/document-list/readme.md

@@ -1 +0,0 @@
-# `.dso-document-list`

package/src/components/progress-bar/_index.scss

@@ -1,2 +0,0 @@
-@forward "progress-bar.mixins";
-@forward "progress-bar.variables";