Skip to content

feat: hideStep på nve-step som gjør at man kan skjule et steg #523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Citaborg wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: hideStep på nve-step som gjør at man kan skjule et steg #523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
421bbcb
doc(nve-stepper): lagt til dokumentasjon og eksempel på bruk av hideStep
Citaborg May 23, 2025
897bd95
feat(hideStep): hideStep for nve-step som gjør at vi kan skjule steg
Citaborg May 23, 2025
d0848b2
doc(hideStep): tatt ut debug-kode
Citaborg May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 190 additions & 1 deletion doc-site/components/nve-stepper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ layout: component

### Standard med og uten knapper

Bruk `hideStepButtons` for å skjule knappene i desktop-versjon. Hvis du skjuler knappene, må du implementere dine egne knapper og du bruker metodene `nextStep` og `prevStep` for å håndtere logikken.
Bruk `hideStepButtons` for å skjule knappene i desktop-versjon. Hvis du skjuler knappene, må du implementere dine egne knapper og du bruker metodene `nextStep` og `prevStep` for å håndtere logikken. Du kan også bruke `hideStep` på individuelle steg i `steps`-arrayet for å skjule spesifikke steg - navigasjon vil automatisk hoppe over de skjulte stegene.

I siste trinn erstattes neste knapp med en klarknapp, som standard er teksten "Sende", men du kan endre teksten gjennom egenskapen `endButtonText`. Du må bruke metoden `finishSteps` for du spesifiserer hva som skal skje på den siste knappen.

Expand Down Expand Up @@ -206,6 +206,25 @@ Bruk `hideMobileStepButtons` for å skjule knappene i mobil-versjon.

</CodeExamplePreview>

### Skjule bestemte steg

Bruk `hideStep`-propertyen på individuelle steg for å skjule dem fra visningen. Stepper-komponenten vil automatisk hoppe over skjulte steg ved navigasjon.

<CodeExamplePreview>

```html
<nve-stepper
steps='
[
{"title":"Steg 1","description":"Dette steget er synlig","state":1,"isSelected":true,"readyForEntrance":true},
{"title":"Steg 2","description":"Dette steget er skjult","state":0,"isSelected":false,"readyForEntrance":true,"hideStep":true},
{"title":"Steg 3","description":"Dette steget er synlig","state":0,"isSelected":false,"readyForEntrance":true}]'
>
</nve-stepper>
```

</CodeExamplePreview>

## Vue eksempler

Her er eksempler på hvordan du bruker Nve-Stepper i Vue:
Expand Down Expand Up @@ -776,3 +795,173 @@ const handlePrevStep = () => {
```

</SandboxPreview>

### Skjul bestemte steg i Vue
Copy link
Contributor

@gruble gruble Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selv om jeg klikker på "Skul steg 2", vises steget fortsatt i PR-bygget.
Er det brukerfeil, feil i koden eller noe annet?

Copy link
Contributor

@lisamarimyreneNVE lisamarimyreneNVE Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For meg vises ikke steg 2 i den automatiske genererte preview'en, altså den har "hideStep":true og er da skjult. Kan du se igjen om det fortsatt gjelder for deg?

Copy link
Contributor

@malingranlynve malingranlynve Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeg ser også fortsatt steg 2 selvom jeg har klikket på "Skjul steget" i CodeSandboxen. Det fungerer veldig fint i eksempelet under Skjule bestemte steg, men ikke under Vue eksempler > Skjul bestemte steg i Vue. Fungerer det også der for deg @lisamarimyreneNVE?

Copy link
Contributor Author

@Citaborg Citaborg Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeg fikk samme problem når det kjørte under vue. Har forsøkt diverse varianter uten å få det til å fungere.
I prosjektet ble det "løst" ved å bytte/endre hele komponenten når man endret innholdet.


Du kan kontrollere visningen av bestemte steg ved å bruke `hideStep`-propertyen. Dette eksempelet viser hvordan du kan dynamisk vise eller skjule steg i en Vue-applikasjon:

```vue
<template>
<div>
<nve-button @click="toggleStepVisibility">{{ showAllSteps ? 'Skjul steg 2' : 'Vis alle steg' }}</nve-button>
<nve-stepper ref="stepper" :steps="steps"></nve-stepper>
</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

import 'nve-designsystem/components/nve-stepper/nve-stepper.component';
import 'nve-designsystem/components/nve-button/nve-button.component';

import { StepProps } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
import { StepState } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
import { INveStepper } from 'nve-designsystem/components/nve-stepper/nve-stepper.component';

const showAllSteps = ref(true);
const stepper = ref<HTMLElement | null>(null);

const steps = ref<StepProps[]>([
{
title: 'Steg 1',
description: 'Første steg',
state: StepState.Active,
isSelected: true,
readyForEntrance: true,
},
{
title: 'Steg 2',
description: 'Andre steg',
state: StepState.NotStarted,
isSelected: false,
readyForEntrance: true,
hideStep: false, // Steg er synlig som standard
},
{
title: 'Steg 3',
description: 'Tredje steg',
state: StepState.NotStarted,
isSelected: false,
readyForEntrance: true,
},
]);

const toggleStepVisibility = () => {
showAllSteps.value = !showAllSteps.value;

// For å sikre at endringer i hideStep blir oppdaget av Lit-komponenten,
// må vi lage en helt ny kopi av steps-arrayet
steps.value = steps.value.map((step, index) => {
if (index === 1) {
return {
...step,
hideStep: !showAllSteps.value,
};
}
return step;
});

// Gi beskjed til stepper at den skal oppdatere seg
if (stepper.value) {
(stepper.value as unknown as INveStepper).reRender();
}
};

onMounted(() => {
// Initialiser stepper
if (stepper.value) {
const nveStepper = stepper.value as unknown as INveStepper;
}
});
</script>
```

Når du endrer `hideStep`-egenskapen på et steg, bør du kalle `reRender()`-metoden for å sikre at stepper-komponenten oppdaterer visningen. Stepper-komponenten vil automatisk håndtere navigasjon og hoppe over skjulte steg.

<SandboxPreview>

```
<template>
<div>
<nve-button @click="toggleStepVisibility">{{ showAllSteps ? 'Skjul steg 2' : 'Vis alle steg' }}</nve-button>
<nve-stepper ref="stepper" :steps="steps"></nve-stepper>
</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

import 'nve-designsystem/components/nve-stepper/nve-stepper.component';
import 'nve-designsystem/components/nve-button/nve-button.component';

import { StepProps } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
import { StepState } from 'nve-designsystem/components/nve-stepper/nve-step/nve-step.component.js';
import { INveStepper } from 'nve-designsystem/components/nve-stepper/nve-stepper.component';

const showAllSteps = ref(true);
const stepper = ref<HTMLElement | null>(null);

const steps = ref<StepProps[]>([
{
title: 'Steg 1',
description: 'Første steg',
state: StepState.Active,
isSelected: true,
readyForEntrance: true,
},
{
title: 'Steg 2',
description: 'Andre steg',
state: StepState.NotStarted,
isSelected: false,
readyForEntrance: true,
hideStep: false, // Steg er synlig som standard
},
{
title: 'Steg 3',
description: 'Tredje steg',
state: StepState.NotStarted,
isSelected: false,
readyForEntrance: true,
},
]);

const toggleStepVisibility = () => {
showAllSteps.value = !showAllSteps.value;

// For å sikre at hideStep-endringer oppdages må vi gjøre en mer
// omfattende endring av steps-arrayet enn bare å endre enkeltegenskaper
const hideSecondStep = !showAllSteps.value;

// Lag et helt nytt array med oppdaterte verdier
// Dette sikrer at Lit oppfatter endringen som en faktisk endring av data
const updatedSteps: StepProps[] = [
{ ...steps.value[0] }, // Første steg - uendret
{
...steps.value[1],
hideStep: hideSecondStep,
}, // Andre steg - oppdatert
{ ...steps.value[2] } // Tredje steg - uendret
];

// Sett det nye arrayet som steps.value
steps.value = updatedSteps;

// Fortell Lit-komponenten at den må oppdatere seg
if (stepper.value) {
(stepper.value as unknown as INveStepper).reRender();
}
};

onMounted(() => {
// Initialiser stepper
if (stepper.value) {
const nveStepper = stepper.value as unknown as INveStepper;
}
});

</script>

```

</SandboxPreview>
20 changes: 13 additions & 7 deletions src/components/nve-stepper/nve-step/nve-step.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export interface StepProps {
readyForEntrance: boolean;
orientation?: string;
hideStateText?: boolean;
hideDescriptions?: boolean;
hideDescription?: boolean;
hideStep?: boolean;
}

/** Komponent for et enkelt steg i en stepper */
Expand Down Expand Up @@ -73,7 +74,11 @@ export default class NveStep extends LitElement {

/** Angir om beskrivelser skal skjules */
@property({ type: Boolean })
hideDescriptions: boolean = false;
hideDescription: boolean = false;

/** Angir omhele steget skal skjules */
@property({ type: Boolean })
hideStep?: boolean = false;

/** Brukes for å justere høyden for den vertikale skilleveggen blir så høy som nær Step har en description. */
@query('.step-description')
Expand Down Expand Up @@ -204,7 +209,7 @@ export default class NveStep extends LitElement {
private renderDescription(): TemplateResult | string {
if (!this.isDescriptionValid(this.description)) {
// Return an empty div with min-height to maintain spacing when no description
return html`<div class="step-description empty-description ${this.orientation === 'vertical' ? 'step-description-max-width-vertical' : 'step-description-max-width-horizontal'}"></div>`;
return html`<div class="step-description step-description-empty ${this.orientation === 'vertical' ? 'step-description-max-width-vertical' : 'step-description-max-width-horizontal'}"></div>`;
}
return html`<div class="step-description ${this.orientation === 'vertical' ? 'step-description-max-width-vertical' : 'step-description-max-width-horizontal'}">${this.description}</div>`;
}
Expand Down Expand Up @@ -232,7 +237,8 @@ export default class NveStep extends LitElement {
}

private renderVerticalStep(): TemplateResult {
return html`
return this.hideStep === true ? html`` :
html`
<div class="vertical-container">
<div class="step-figure-vertical">
<div
Expand All @@ -248,15 +254,15 @@ export default class NveStep extends LitElement {
${this.hideStateText ? '' : this.getStateText(this.state)}
</div>
<div>
${this.hideDescriptions ? '' : this.renderDescription()}
${this.hideDescription ? '' : this.renderDescription()}
</div>
</div>
</div>
`;
}

render(): TemplateResult {
return this.isOrientationVertical() ? this.renderVerticalStep() : html`
return this.isOrientationVertical() ? this.renderVerticalStep() : this.hideStep === true ? html`` : html`
<div class="step-figure">
<span
class=" ${this.getIconClass(this.state)}"
Expand All @@ -270,7 +276,7 @@ export default class NveStep extends LitElement {
<div class="step-state ${this.getStateColorClass(this.state)}">
${this.hideStateText ? '' : this.getStateText(this.state)}
</div>
${this.hideDescriptions ? '' : this.renderDescription()}
${this.hideDescription ? '' : this.renderDescription()}
</div>
`;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/nve-stepper/nve-step/nve-step.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default css`
padding-top: 0.625rem; /*10px; */
}

.empty-description {
.step-description-empty {
min-height: 1rem; /* Set a minimum height for empty descriptions */
padding-top: 0.625rem; /* Match the padding of regular descriptions */
}
Expand Down
Loading
Loading