IO-1321: Update documentation (#518)

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **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.
 - **Breaking change:** Create a helper for animations and refactor accordion component accordingly. You need to replace the class 'ods-accordion--animate' with 'ods-animation ods-animation--rotate'.
 - **Breaking change:** Update the size of text in the banner. There are changes on the css classes in the markup of headings and paragrafs that need to be replaced.
+- Changed documentation to reflect new version.
 - **Breaking change:** Moved geoJSON fetching from component to a per-vue-instance setup.
 
 ### Fixed

src/components/map/map.html

@@ -185,7 +185,7 @@ <h2 class="ods-devtools-text-preset-2">Load map later</h2>
           <label class="ods-checkbox__wrapper">
             <input class="ods-checkbox__input" type="checkbox" v-model="loadMap">
             <span class="ods-checkbox__checkmark"></span>
-            <span class="ods-checkbox__text"> Load map </span>
+            <span class="ods-checkbox__text">Load map</span>
           </label>
         </div>
         <ods-map :load-map="loadMap" :state="state" :points="[{ longitude: 10.74981, latitude: 59.913008, popupContent: '<h2>Bob the Builder</h2>' }]" ref="odsMap10" api-key="VW1Tn0fx1t3b6t0CHP6Q" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />

src/general/helpers/code/code.html

@@ -4,7 +4,7 @@ <h2 class="ods-devtools-text-preset-1">Default</h2>
     <p>Default is intended for inline use.</p>
     <div class="ods-devtools-code">
       <div class="ods-devtools-code__box">
-        <code class="ods-code">const element = document.getElementById("my-id");</code>
+        <code class="ods-code ods-code--block">const element = document.getElementById("my-id");</code>
       </div>
     </div>
     <h2 class="ods-devtools-text-preset-1">Block</h2>
@@ -19,10 +19,10 @@ <h2 class="ods-devtools-text-preset-1">Multi line</h2>
     <div class="ods-devtools-code">
       <div class="ods-devtools-code__box">
         <!-- prettier-ignore -->
-        <code class="ods-code ods-code--multi-line">
+        <code class="ods-code ods-code--block ods-code--multi-line">
           const element = document.getElementById("my-id");
           if (element) {
-            doMagic(eement);
+            doMagic(element);
             if (someThing) {
               yayForIndentation();
             }

src/general/helpers/collapsible/collapsible.html

@@ -4,6 +4,13 @@
       <p>The collapsible helper is used to expand/collapse a container.</p>
     </div>
 
+    <div class="ods-grid__column--12">
+      <div class="ods-infobox ods-infobox--yellow">
+        <h2 class="ods-infobox__heading">Important</h2>
+        <p>The collapsible component can be found here: <a href="https://designsystem.oslo.kommune.no/#/components-collapsible">Collapsible component</a></p>
+      </div>
+    </div>
+
     <div class="ods-grid__column--12">
       <h2 class="ods-devtools-text-preset-1">How to use</h2>
       <p>Add the class <code class="ods-code">.ods-collapsible-trigger</code> to the collapsible trigger. The collapsible javascript helper will handle the expansion and collapse of the content for you.

src/getting_started/consume/packages/packages.html

@@ -4,7 +4,7 @@
       <p>If you do not want to bundle and build Oslo Designsystem in your project, you can use an already ready to use package. Each version of Oslo Designsystem is built and available for direct consumption.</p>
       <p>
         <strong>Complete</strong><br />Includes a reset, some basic styles, fonts, icons and everything in General and Components.
-        <code class="ods-code" class="ods-code">https://oslokommune-designsystem.s3.dualstack.eu-central-1.amazonaws.com/1.0.0/ods.css</code>
+        <code class="ods-code" class="ods-code">https://oslokommune-designsystem.s3.dualstack.eu-central-1.amazonaws.com/2.0.0/ods.css</code>
       </p>
       <p>
         <strong>Versions</strong><br />

src/getting_started/contribute/basics/basics.html

@@ -43,11 +43,11 @@ <h3>Technical</h3>
       </p>
       <h4>Developing</h4>
       <p>First and foremost, study the examples provided in "Contribute". Both visually and code. They are created to provide a reference for best practice and is what your code will be checked against in code reviews.</p>
-      <p>As of the 1.0 release of the Designsystem we are using Javascript ES6 (ECMAScript2015) and Vue 2.</p>
-      <p>Please follow the <a href="https://v2.vuejs.org/v2/style-guide/">Vue styleguide</a> to avoid errors, bikeshedding and anti-patterns. The vue devtools are currently not working properly because of iframe.</p>
+      <p>As of the 2.0 release of Oslo Designsystem we are using Javascript ES2023 and Vue 3.</p>
+      <p>Please follow the <a href="https://vuejs.org/guide/introduction.html">Vue documentation</a> to avoid errors, bikeshedding and anti-patterns.</p>
 
       <h4>Styling</h4>
-      <p>The stylguide adheres to CSS 3, and uses SCSS for structure. Do not use SASS.</p>
+      <p>Oslo Designsystem adheres to CSS 3, and uses SCSS for structure. Do not use SASS.</p>
       <p>
         <strong>Spacing</strong><br />
         A root element in a component should never have margin. Spacing between components must be applied in projects / contexts or it will decrease the reusability of the component.<br />