Skip to content

Commit

Permalink
merge new menu and fix chanelog
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonaashl
jonaashl committed Apr 17, 2024
2 parents c656d7c + bdfb212 commit 4c6a5ea
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 99 deletions.
20 changes: 4 additions & 16 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Changed font-weight in video heading and refactored to correct scss setup.
- Changed stylelint rules to exclude no-longhand-properties.
- Updated package version for stylelint.
- Changed accordion heading to be inside ods-accordion
- **Breaking change:** Updated checkbox and radio component according to adjustments from design (Figma), both now have label options, correct spacing and correct font size and weight. Also changed naming of modifiers to be more consistent with other components.

### Fixed

- Fixed spacing around links and buttons in portrait card on all breakpoints.
- Fixed links on portrait cards to improve screen reader capabilities.
- Fixed spacing around links and buttons in portrait card on all breakpoints.
- Fixed spacing and some other design adjustments on menu component.
- Fixed an issue where long links would not break properly.

### Removed

- Removed twitter icon.

### Changed

- Changed accordion heading to be inside ods-accordion

### Fixed

### Changed

### Fixed

- Fixed an issue where long links would not break properly.

### Changed

- **Breaking change:** Updated checkbox and radio component according to adjustments from design (Figma), both now have label options, correct spacing and correct font size and weight. Also changed naming of modifiers to be more consistent with other components.

## [1.1.0] - 16.02.2024

### Added
Expand Down
92 changes: 57 additions & 35 deletions src/components/menu/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,21 +154,21 @@ <h2 class="ods-navbar-menu__heading">Dette satser vi på</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)"
><div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Byutvikling</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)"
><div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Miljø og klima</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)"
><div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Slik bygger vi Oslo</span>
Expand All @@ -186,21 +186,21 @@ <h2 class="ods-navbar-menu__heading">Politikk og innsyn</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-4">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Politikk</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-4">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Valg</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Innsyn</span>
Expand All @@ -218,21 +218,21 @@ <h2 class="ods-navbar-menu__heading">Finn fram i kommunen</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Bydeler</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Etater, foretak og ombud</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Rådhuset</span>
Expand All @@ -250,21 +250,21 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Tilskudd, legater og stipend</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Utmerkelser og priser</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Flyktninger og inkludering</span>
Expand All @@ -275,24 +275,34 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
</div>
</div>
</div>
<div class="ods-grid ods-navbar-menu__footer">
<div class="ods-navbar-menu__footer ods-grid">
<div class="ods-grid__column--12 ods-grid__column--10-breakpoint-medium">
<ul class="ods-navbar-menu__footer-list ods-navbar-menu__footer-list--miscellaneous ods-block ods-flex-breakpoint-medium">
<li class="ods-padding-right-13-breakpoint-medium">
<li class="ods-padding-right-6-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Kontakt </span>
</div>
</a>
</li>
<li class="ods-padding-right-13-breakpoint-medium">
<li class="ods-padding-right-6-breakpoint-medium ods-none ods-block-breakpoint-medium">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">|</span>
</div>
</li>
<li class="ods-padding-right-6-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Jobb i Oslo kommune </span>
</div>
</a>
</li>
<li class="ods-padding-right-13-breakpoint-medium">
<li class="ods-padding-right-6-breakpoint-medium ods-none ods-block-breakpoint-medium">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">|</span>
</div>
</li>
<li class="ods-padding-right-6-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">English </span>
Expand All @@ -302,7 +312,7 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
</ul>
</div>
<div class="ods-grid__column--12 ods-grid__column--2-breakpoint-medium">
<ul class="ods-navbar-menu__footer-list ods-navbar-menu__footer-list--media">
<ul class="ods-flex ods-flex-justify-content-flex-end ods-navbar-menu__footer-list ods-navbar-menu__footer-list--media">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
Expand All @@ -329,14 +339,16 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>

<!-- Developer mode -->
<div class="ods-devtools-devmode">
<div class="ods-grid ods-grid--gap ods-grid--gutter ods-margin-bottom-8">
<div class="ods-grid ods-grid--gap ods-grid--gutter-breakpoint-medium ods-margin-bottom-8">
<div class="ods-grid__column--12">
<button class="ods-button-menu" aria-expanded="false" aria-controls="ods-menu-2">
<span class="ods-button-menu__text">Menu</span>
<span class="ods-button-menu__icon"></span>
</button>
<button class="ods-button" id="ods-menu-2-open">Open</button>
<button class="ods-button" id="ods-menu-2-close">Close</button>
</div>
<div class="ods-grid__column--12">
<div id="ods-menu-2" class="ods-navbar-menu">
<div class="ods-navbar-menu__services ods-grid">
<div class="ods-grid__column--12">
Expand Down Expand Up @@ -478,21 +490,21 @@ <h2 class="ods-navbar-menu__heading">Dette satser vi på</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)"
><div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Byutvikling</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)"
><div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Miljø og klima</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)"
><div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Slik bygger vi Oslo</span>
Expand All @@ -510,21 +522,21 @@ <h2 class="ods-navbar-menu__heading">Politikk og innsyn</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Politikk</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Valg</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Innsyn</span>
Expand All @@ -542,21 +554,21 @@ <h2 class="ods-navbar-menu__heading">Finn fram i kommunen</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Bydeler</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Etater, foretak og ombud</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Rådhuset</span>
Expand All @@ -574,21 +586,21 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
</button>
<div class="ods-navbar-menu__list-animate">
<ul>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Tilskudd, legater og stipend</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li class="ods-margin-bottom-2-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Utmerkelser og priser</span>
</div>
</a>
</li>
<li class="ods-margin-bottom-8-breakpoint-medium">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Flyktninger og inkludering</span>
Expand All @@ -602,21 +614,31 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
<div class="ods-navbar-menu__footer ods-grid">
<div class="ods-grid__column--12 ods-grid__column--10-breakpoint-medium">
<ul class="ods-navbar-menu__footer-list ods-navbar-menu__footer-list--miscellaneous ods-block ods-flex-breakpoint-medium">
<li class="ods-padding-right-13-breakpoint-medium">
<li class="ods-padding-right-6-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Kontakt </span>
</div>
</a>
</li>
<li class="ods-padding-right-13-breakpoint-medium">
<li class="ods-padding-right-6-breakpoint-medium ods-none ods-block-breakpoint-medium">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">|</span>
</div>
</li>
<li class="ods-padding-right-6-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">Jobb i Oslo kommune </span>
</div>
</a>
</li>
<li class="ods-padding-right-13-breakpoint-medium">
<li class="ods-padding-right-6-breakpoint-medium ods-none ods-block-breakpoint-medium">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">|</span>
</div>
</li>
<li class="ods-padding-right-6-breakpoint-medium">
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-navbar-menu__link-text">English </span>
Expand All @@ -626,8 +648,8 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
</ul>
</div>
<div class="ods-grid__column--12 ods-grid__column--2-breakpoint-medium">
<ul class="ods-flex ods-flex-justify-content-flex-end ods-navbar-menu__footer-list ods-navbar-menu__footer-list--media">
<li class="ods-padding-left-13-breakpoint-medium">
<ul class="ods-flex ods-flex-justify-content-flex-end-breakpoint-medium ods-navbar-menu__footer-list ods-navbar-menu__footer-list--media">
<li>
<a class="ods-navbar-menu__link" href="javascript:void(0)">
<div class="ods-navbar-menu__link-content">
<span class="ods-icon ods-icon--facebook" aria-label="Facebook"></span>
Expand Down
Loading

0 comments on commit 4c6a5ea

Please sign in to comment.