@miljodirektoratet/md-css 4.1.0 → 4.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

package/src/button/README.md

@@ -8,13 +8,13 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <button
-  className="md-button [md-button--small, md-button--secondary, md-button--tertiary, md-button--danger, md-button--column]"
+  class="md-button [md-button--small, md-button--secondary, md-button--tertiary, md-button--danger, md-button--column]"
 >
-  <div className="md-button__topIcon">{topIcon}</div>
-  <div className="md-button__content">
-    <div className="md-button__leftIcon">{leftIcon}</div>
+  <div class="md-button__topIcon">{topIcon}</div>
+  <div class="md-button__content">
+    <div class="md-button__leftIcon">{leftIcon}</div>
     BUTTON TEXT
-    <div className="md-button__rightIcon">{rightIcon}</div>
+    <div class="md-button__rightIcon">{rightIcon}</div>
   </div>
 </button>
 ```

package/src/chips/README.md

@@ -7,11 +7,11 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<button className="md-chip [md-chip--active, md-chip--disabled, md-chip--solid]">
-  <div className="md-chip__left-icon">{leftIcon}</div>
+<button class="md-chip [md-chip--active, md-chip--disabled, md-chip--solid]">
+  <div class="md-chip__left-icon">{leftIcon}</div>
 
-  <div className="md-chip__label">{label}</div>
+  <div class="md-chip__label">{label}</div>
 
-  <div className="md-chip__right-icon">{rightIcon}</div>
+  <div class="md-chip__right-icon">{rightIcon}</div>
 </button>
 ```

package/src/filelist/README.md

@@ -18,8 +18,10 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
     </div>
 
     <div class="md-filelist__file-actions">
-      <MdIconButton className="md-icon-button md-icon-button--plain">{downloadIcon}</MdIconButton>
-      <MdIconButton className="md-icon-button md-icon-button--plain">{deleteIcon}</MdIconButton>
+      <!-- Use html/css from MdIconButton for this button -->
+      <MdIconButton class="md-icon-button md-icon-button--plain">{downloadIcon}</MdIconButton>
+      <!-- Use html/css from MdIconButton for this button -->
+      <MdIconButton class="md-icon-button md-icon-button--plain">{deleteIcon}</MdIconButton>
     </div>
   </div>
 

package/src/formElements/autocomplete/README.md

@@ -7,52 +7,54 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-autocomplete [md-autocomplete--open, md-autocomplete--disabled, md-autocomplete--medium, md-autocomplete--small, md-autocomplete--error]">
-    <div className="md-autocomplete__label">
+<div class="md-autocomplete [md-autocomplete--open, md-autocomplete--disabled, md-autocomplete--medium, md-autocomplete--small, md-autocomplete--error]">
+    <div class="md-autocomplete__label">
         <div>{label}</div>
-        <div className="md-autocomplete__help-button">
+        <div class="md-autocomplete__help-button">
             {button to trigger help text}
         </div>
     </div>
 
-    <div className="md-autocomplete__help-text [md-autocomplete__help-text--open]">
+    <div class="md-autocomplete__help-text [md-autocomplete__help-text--open]">
         {helpText}
     </div>
 
     <MdClickOutsideWrapper> <- optional wrapper to close autocomplete box when clicking outside
         <!-- Optional prefix-icon -->
-        <div className="md-autocomplete__input__prefix [md-autocomplete__input__prefix--disabled]">
+        <div class="md-autocomplete__input__prefix [md-autocomplete__input__prefix--disabled]">
             {prefixIcon}
         </div>
 
         <input
             id=""
-            className="md-autocomplete__input [md-autocomplete__input--open, md-autocomplete__input--error, md-autocomplete__input--has-prefix]"
+            class="md-autocomplete__input [md-autocomplete__input--open, md-autocomplete__input--error, md-autocomplete__input--has-prefix]"
             value={value}
             ...
         />
 
-        <div className="md-autocomplete__input-icon">
-            <MdChevronIcon />
+        <div class="md-autocomplete__input-icon">
+            <!-- use MdIconChevronForward or icon from Material Symbols here -->
+            <MdIconChevronForward />
         </div>
 
-        <div className="md-autocomplete__dropdown">
+        <div class="md-autocomplete__dropdown">
             <button
                 tabIndex={open ? 0: -1}
-                className="md-autocomplete__dropdown-item [md-autocomplete__dropdown-item--selected]"
+                class="md-autocomplete__dropdown-item [md-autocomplete__dropdown-item--selected]"
                 onClick={function to handle select|deselect option}
             >
-            <div className="md-autocomplete__dropdown-item-text">{option.text}</div>
+            <div class="md-autocomplete__dropdown-item-text">{option.text}</div>
 
             {if seleceted option
-                <div className="md-autocomplete__dropdown-item-clear" title="Klikk for å fjerne valg">
-                    <MdXIcon />
+                <div class="md-autocomplete__dropdown-item-clear" title="Klikk for å fjerne valg">
+                    <!-- use MdIconClose or icon from Material Symbols here -->
+                    <MdIconClose />
                 </div>
             }
 
             </button>
         </div>
     </MdClickOutsideWrapper>
-    <div className="md-autocomplete__error">{errorText}</div>
+    <div class="md-autocomplete__error">{errorText}</div>
 </div>
 ```

package/src/formElements/autocomplete/autocomplete.css

@@ -107,7 +107,6 @@
   display: flex;
   width: 1rem;
   height: 1rem;
-  rotate: 90deg;
   color: var(--mdGreyColor);
   z-index: 0;
 }

package/src/formElements/checkbox/README.md

@@ -7,17 +7,17 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-checkbox [md-checkbox--disabled]">
+<div class="md-checkbox [md-checkbox--disabled]">
   <input
-    className="md-checkbox__input"
+    class="md-checkbox__input"
     checked="{true|false}"
     type="checkbox"
     value="{value}"
     disabled="{disabled}"
     {...otherProps}
   />
-  <label className="md-checkbox__label">
-    <span className="md-checkbox__labelText">{label}</span>
+  <label class="md-checkbox__label">
+    <span class="md-checkbox__labelText">{label}</span>
   </label>
 </div>
 ```

package/src/formElements/input/README.md

@@ -7,45 +7,47 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-input__outer-wrapper">
-  <div className="md-input__label">
+<div class="md-input__outer-wrapper">
+  <div class="md-input__label">
     <label> {label} </label>
 
     <!-- Optional button for handling help text -->
-    <div className="md-input__help-button">
+    <div class="md-input__help-button">
       <MdHelpButton />
     </div>
     }
   </div>
 
   <!-- Optional container for displaying helpt text -->
-  <div className="md-input__help-text [md-input__help-text--open]">
+  <div class="md-input__help-text [md-input__help-text--open]">
+    <!-- See MdHelpText html/css for this -->
     <MdHelpText>{ helpText }</MdHelpText>
   </div>
 
-  <div className="md-input__wrapper [md-input__wrapper--small]">
+  <div class="md-input__wrapper [md-input__wrapper--small]">
     <!-- Optional prefix-icon -->
-    <div className="md-input__prefix [md-input__prefix--disabled]">{prefixIcon}</div>
+    <div class="md-input__prefix [md-input__prefix--disabled]">{prefixIcon}</div>
 
     <input
       id=""
-      className="md-input [md-input--small, md-input--disabled, md-input--readonly, md-input--error, md-input--has-suffix, md-input--has-prefix]"
+      class="md-input [md-input--small, md-input--disabled, md-input--readonly, md-input--error, md-input--has-suffix, md-input--has-prefix]"
       value="{value}"
       ...
     />
 
     <!-- Optional container for suffix -->
-    <div className="md-input__suffix">
-      <div className="md-input__suffix-content">{suffix}</div>
+    <div class="md-input__suffix">
+      <div class="md-input__suffix-content">{suffix}</div>
 
-      <div className="md-input__error-icon">
-        <MdWarningIcon />
+      <div class="md-input__error-icon">
+        <!-- Use MdIconWarning or icon from Material Symbols here -->
+        <MdIconWarning />
         <!-- Warning icon -->
       </div>
     </div>
   </div>
 
   <!-- Optional container for error text -->
-  <div className="md-input__error">{errorText}</div>
+  <div class="md-input__error">{errorText}</div>
 </div>
 ```

package/src/formElements/multiautocomplete/README.md

@@ -7,68 +7,49 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-multiautocomplete [md-multiautocomplete--open, md-multiautocomplete--disabled, md-multiautocomplete--medium, md-multiautocomplete--small, md-multiautocomplete--error]">
-    <div className="md-multiautocomplete__label">
-        <div>{label}</div>
-        <div className="md-multiautocomplete__help-button">
-            {button to trigger help text}
-        </div>
+<div
+  class="md-multiautocomplete [md-multiautocomplete--open, md-multiautocomplete--disabled, md-multiautocomplete--medium, md-multiautocomplete--small, md-multiautocomplete--error]"
+>
+  <div class="md-multiautocomplete__label">
+    <div>{label}</div>
+    <div class="md-multiautocomplete__help-button">{button to trigger help text}</div>
+  </div>
+
+  <div class="md-multiautocomplete__help-text [md-multiautocomplete__help-text--open]">{helpText}</div>
+
+  <MdClickOutsideWrapper>
+    <- optional wrapper to close multiautocomplete box when clicking outside
+    <!-- Optional prefix-icon -->
+    <div class="md-multiautocomplete__input__prefix [md-multiautocomplete__input__prefix--disabled]">{prefixIcon}</div>
+
+    <input
+      id=""
+      class="md-multiautocomplete__input [md-multiautocomplete__input--open, md-multiautocomplete__input--error, md-multiautocomplete__input--has-prefix]"
+      value="{value}"
+      ...
+    />
+
+    {number of selected items > 1 && !open &&
+    <div class="md-multiautocomplete__button-hasmultiple">+{selected.length - 1}</div>
+    }
+    <div class="md-multiautocomplete__input-icon">
+      <!-- use MdIconChevronForward or icon from Material Symbols here -->
+      <MdIconChevronForward />
     </div>
 
-    <div className="md-multiautocomplete__help-text [md-multiautocomplete__help-text--open]">
-        {helpText}
+    <div class="md-multiautocomplete__dropdown [md-multiautocomplete__dropdown--open]">
+      <div class="md-multiautocomplete__dropdown-item [md-multiautocomplete__dropdown-item--selected]">
+        {IMPORTANT! see MdCheckbox styles for description for the individual checkboxes}
+        <MdCheckbox ... />
+        ...
+      </div>
     </div>
+  </MdClickOutsideWrapper>
 
-    <MdClickOutsideWrapper> <- optional wrapper to close multiautocomplete box when clicking outside
-        <!-- Optional prefix-icon -->
-        <div className="md-multiautocomplete__input__prefix [md-multiautocomplete__input__prefix--disabled]">
-            {prefixIcon}
-        </div>
+  <div class="md-multiautocomplete__error">{errorText}</div>
 
-        <input
-            id=""
-            className="md-multiautocomplete__input [md-multiautocomplete__input--open, md-multiautocomplete__input--error, md-multiautocomplete__input--has-prefix]"
-            value={value}
-            ...
-        />
-
-        {number of selected items > 1 && !open &&
-        <div className="md-multiautocomplete__button-hasmultiple">+{selected.length - 1}</div>
-        }
-        <div className="md-multiautocomplete__input-icon">
-            <MdChevronIcon />
-        </div>
-
-        <div className="md-multiautocomplete__dropdown [md-multiautocomplete__dropdown--open]">
-            <div className="md-multiautocomplete__dropdown-item [md-multiautocomplete__dropdown-item--selected]">
-                {IMPORTANT! see MdCheckbox styles for description for the individual checkboxes}
-                <MdCheckbox
-                label="{option.text}"
-                tabIndex="{open"
-                ?
-                0
-                :
-                -1}
-                checked="{true|false}"
-                value="{option.value}"
-                id="id-for-checkbox"
-                disabled="{true|false}"
-                data-value="{option.value}"
-                data-text="{option.text}"
-                onChange="{function"
-                for
-                change
-                handling}
-                />
-                ... ...
-            </div>
-        </div>
-    </MdClickOutsideWrapper>
-    
-    <div className="md-multiautocomplete__error">{errorText}</div>
-
-    <div className="md-multiautocomplete__chips">
-        To show input chips for selected options, see doc for MdInputChip. These can be listed here.
-    </div>
+  <div class="md-multiautocomplete__chips">
+    To show input chips for selected options, see doc for MdInputChip. These can be listed here.
+  </div>
 </div>
 ```

package/src/formElements/multiautocomplete/multiautocomplete.css

@@ -107,7 +107,6 @@
   display: flex;
   width: 1rem;
   height: 1rem;
-  rotate: 90deg;
   color: var(--mdGreyColor);
   z-index: 0;
 }

package/src/formElements/multiselect/README.md

@@ -8,39 +8,40 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <div
-  className="md-select [md-multiselect--open, md-multiselect--disabled, md-multiselect--error, md-multiselect--medium, md-multiselect--small]"
+  class="md-select [md-multiselect--open, md-multiselect--disabled, md-multiselect--error, md-multiselect--medium, md-multiselect--small]"
 >
-  <div className="md-multiselect__label">
+  <div class="md-multiselect__label">
     <div>{label}</div>
 
-    <div className="md-multiselect__help-button"><MdHelpButton /> <- see MdHelpButton styles</div>
+    <div class="md-multiselect__help-button"><MdHelpButton /> <- see MdHelpButton styles</div>
   </div>
 
-  <div className="md-multiselect__help-text [md-multiselect__help-text--open]">
+  <div class="md-multiselect__help-text [md-multiselect__help-text--open]">
     <MdHelpText>{ helpText }</MdHelpText> <- see MdHelpText styles
   </div>
 
   <MdClickOutsideWrapper>
     <- optional wrapper to close selectbox when clicking outside
     <button
-      className="md-multiselect__button [md-multiselect__button--open]"
+      class="md-multiselect__button [md-multiselect__button--open]"
       tabindex="{0}"
       onClick="{function"
       to
       toggle
       expand|collapse}
     >
-      <div className="md-multiselect__button-text">{displayValue}</div>
+      <div class="md-multiselect__button-text">{displayValue}</div>
       {number of selected items > 1 && !open &&
-      <div className="md-multiselect__button-hasmultiple">+{selected.length - 1}</div>
+      <div class="md-multiselect__button-hasmultiple">+{selected.length - 1}</div>
       }
-      <div className="md-multiselect__button-icon">
-        <MdChevronIcon />
+      <div class="md-multiselect__button-icon">
+        <!-- use MdIconChevronForward or icon from Material Symbols here -->
+        <MdIconChevronForward />
       </div>
     </button>
 
-    <div className="md-multiselect__dropdown [md-multiselect__dropdown--open]">
-      <div className="md-multiselect__dropdown-item [md-multiselect__dropdown-item--selected]">
+    <div class="md-multiselect__dropdown [md-multiselect__dropdown--open]">
+      <div class="md-multiselect__dropdown-item [md-multiselect__dropdown-item--selected]">
         {IMPORTANT! see MdCheckbox styles for description for the individual checkboxes}
         <MdCheckbox
           label="{option.text}"
@@ -65,9 +66,9 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
     </div>
   </MdClickOutsideWrapper>
 
-  <div className="md-multiselect__error">{errorText}</div>
+  <div class="md-multiselect__error">{errorText}</div>
 
-  <div className="md-multiselect__chips">
+  <div class="md-multiselect__chips">
     To show input chips for selected options, see doc for MdInputChip. These can be listed here.
   </div>
   }

package/src/formElements/radiobutton/README.md

@@ -7,9 +7,9 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-radiobutton [md-checkbox--disabled]">
-  <span className="md-radiobutton__check-area">
-    <span className="md-radiobutton__selected-dot" />
+<div class="md-radiobutton [md-checkbox--disabled]">
+  <span class="md-radiobutton__check-area">
+    <span class="md-radiobutton__selected-dot" />
   </span>
   <input
     id="{radioGroupId}"

package/src/formElements/radiogroup/README.md

@@ -7,22 +7,22 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-radiogroup [md-radiogroup--disabled]">
-  <div className="md-radiogroup__label">
+<div class="md-radiogroup [md-radiogroup--disabled]">
+  <div class="md-radiogroup__label">
     <div>{label}</div>
 
-    <div className="md-radiogroup_help-button"><MdHelpButton /> <- see MdHelpButton styles</div>
+    <div class="md-radiogroup_help-button"><MdHelpButton /> <- see MdHelpButton styles</div>
   </div>
 
-  <div className="md-radiogroup_help-text [md-radiogroup_help-text--open]">
+  <div class="md-radiogroup_help-text [md-radiogroup_help-text--open]">
     <MdHelpText>{ helpText }</MdHelpText> <- see MdHelpText styles
   </div>
 
-  <div className="md-radiogroup__options [md-radiogroup__options--vertical]">
-      <MdRadioButton/> <- see MdRadioButton styles
+  <div class="md-radiogroup__options [md-radiogroup__options--vertical]">
+    <MdRadioButton /> <- see MdRadioButton styles
   </div>
 
   <!-- if error -->
-  <div className="md-radiogroup__error">{error}</div>
+  <div class="md-radiogroup__error">{error}</div>
 </div>
 ```

package/src/formElements/select/README.md

@@ -7,47 +7,49 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-select [md-select--open, md-select--disabled, md-select--medium, md-select--small]">
-    <div className="md-select__label">
+<div class="md-select [md-select--open, md-select--disabled, md-select--medium, md-select--small]">
+    <div class="md-select__label">
         <div>{label}</div>
-        <div className="md-select__help-button">
+        <div class="md-select__help-button">
             {button to trigger help text}
         </div>
     </div>
 
-    <div className="md-select__help-text [md-select__help-text--open]">
+    <div class="md-select__help-text [md-select__help-text--open]">
         {helpText}
     </div>
 
     <MdClickOutsideWrapper> <- optional wrapper to close selectbox when clicking outside
         <button
-            className="md-select__button [md-select__button--open]"
+            class="md-select__button [md-select__button--open]"
             tabIndex={0}
             onClick={function to toggle expand|collapse}
         >
-            <div className="md-select__button-text">{displayValue}</div>
-            <div className="md-select__button-icon">
-                <MdChevronIcon />
+            <div class="md-select__button-text">{displayValue}</div>
+            <div class="md-select__button-icon">
+                <!-- Use MdIconChevronForward or icon from Material Symbols here -->
+                <MdIconChevronForwward />
             </div>
         </button>
 
-        <div className="md-select__dropdown">
+        <div class="md-select__dropdown">
             <button
                 tabIndex={open ? 0: -1}
-                className="md-select__dropdown-item [md-select__dropdown-item--selected]"
+                class="md-select__dropdown-item [md-select__dropdown-item--selected]"
                 onClick={function to handle select|deselect option}
             >
-            <div className="md-select__dropdown-item-text">{option.text}</div>
+            <div class="md-select__dropdown-item-text">{option.text}</div>
 
             {if seleceted option
-                <div className="md-select__dropdown-item-clear" title="Klikk for å fjerne valg">
-                    <MdXIcon />
+                <div class="md-select__dropdown-item-clear" title="Klikk for å fjerne valg">
+                    <!-- Use MdIconClose or icon from Material Symbols here -->
+                    <MdIconClose />
                 </div>
             }
 
             </button>
         </div>
     </MdClickOutsideWrapper>
-    <div className="md-select__error">{errorText}</div>
+    <div class="md-select__error">{errorText}</div>
 </div>
 ```

package/src/formElements/textarea/README.md

@@ -7,21 +7,21 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-textarea__outer-wrapper">
-  <div className="md-textarea__label">
+<div class="md-textarea__outer-wrapper">
+  <div class="md-textarea__label">
     <label htmlFor="id-for-text-area"> {label} </label>
 
-    <div className="md-textarea__help-button">{button to trigger help text}</div>
+    <div class="md-textarea__help-button">{button to trigger help text}</div>
   </div>
 
-  <div className="md-textarea__help-text [md-textarea__help-text--open]">{helpText}</div>
+  <div class="md-textarea__help-text [md-textarea__help-text--open]">{helpText}</div>
 
-  <div className="md-textarea__wrapper">
-    <textarea id="id-for-text-area" className="md-textarea [md-textarea--disabled, md-textarea--readonly,
+  <div class="md-textarea__wrapper">
+    <textarea id="id-for-text-area" class="md-textarea [md-textarea--disabled, md-textarea--readonly,
     md-textarea--error]" value={value} rows={number} placeholder="Placeholder text" disabled={true requires class
     'md-textarea--disabled'} readOnly={true requires class 'md-textarea--readonly'} ... />
   </div>
 
-  <div className="md-textarea__error">{errorText}</div>
+  <div class="md-textarea__error">{errorText}</div>
 </div>
 ```

package/src/iconButton/README.md

@@ -7,9 +7,7 @@ Class names and elements in brackets [] are optional-/togglable-/decorator- or s
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<button className="md-icon-button [md-icon-button--border, md-icon-button--plain]">
-  <div className="md-icon-button__icon">
-    ICON
-  </div>
+<button class="md-icon-button [md-icon-button--border, md-icon-button--plain]">
+  <div class="md-icon-button__icon">ICON</div>
 </button>
 ```

package/src/infoTag/README.md

@@ -7,8 +7,8 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-info-tag [md-info-tag--secondary, md-info-tag--warning, md-info-tag--danger]">
-  <div className="md-info-tag__label">{label}</div>
-  <div className="md-info-tag__icon">{icon}</div>
+<div class="md-info-tag [md-info-tag--secondary, md-info-tag--warning, md-info-tag--danger]">
+  <div class="md-info-tag__label">{label}</div>
+  <div class="md-info-tag__icon">{icon}</div>
 </div>
 ```

package/src/link/README.md

@@ -7,5 +7,5 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<a className="md-link"> {text} </a>
+<a class="md-link"> {text} </a>
 ```

package/src/messages/AlertMessage.md

@@ -8,15 +8,17 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <div
-  className="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error, md-alert-message--fullWidth]"
+  class="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error, md-alert-message--fullWidth]"
 >
-  <div className="md-alert-message__content">
-    <Icon className="md-alert-message__icon" width="20" height="20" />
+  <div class="md-alert-message__content">
+    <!-- Use MdIconWarning or warning icon from Material Symbols here -->
+    <Icon class="md-alert-message__icon" width="20" height="20" />
     {label}
   </div>
 
-  <MdIconButton className="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">
-   {icon}
+  <!-- Use html/css from MdIconButton for this button -->
+  <MdIconButton class="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">
+    {icon}
   </MdIconButton>
 </div>
 ```

package/src/messages/InfoBox.md

@@ -7,5 +7,5 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-info-box [md-info-box--fullWidth]">{Icon width="20" height="20"} {label}</div>
+<div class="md-info-box [md-info-box--fullWidth]">{Icon width="20" height="20"} {label}</div>
 ```

package/src/messages/README.md

@@ -7,7 +7,7 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div className="md-info-box [md-info-box--fullWidth]">{Icon width="20" height="20"} {label}</div>
+<div class="md-info-box [md-info-box--fullWidth]">{Icon width="20" height="20"} {label}</div>
 ```
 
 To use the `AlertMessage` css as a standalone, without the accompanying React component, please use the following HTML structure.
@@ -18,10 +18,13 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <div
-  className="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error, md-alert-message--fullWidth]"
+  class="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error, md-alert-message--fullWidth]"
 >
-  <div className="md-alert-message__content">{Icon width="20" height="20"} {label}</div>
+  <div class="md-alert-message__content">{Icon width="20" height="20"} {label}</div>
 
-  <MdIconButton className="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">{icon}</MdIconButton>
+  <!-- Use html/css from MdIconButton for this button -->
+  <MdIconButton class="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}"
+    >{icon}</MdIconButton
+  >
 </div>
 ```

package/src/modal/README.md

@@ -18,9 +18,11 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
       <MdClickOutsideWrapper class="md-modal__inner-wrapper">
         <div class="md-modal__header">
           <div>{heading}</div>
+
+          <!-- Use html/css from MdIconButton for this button -->
           <MdIconButton class="md-modal__close-button md-icon-button md-icon-button--plain">
-            <MdXIcon className="md-icon-button__icon"/>
-            <!-- Icon for close-button, use the react icon from Miljødir, or you own -->
+            <!-- Use MdIconClose or icon from Material Symbols here -->
+            <MdIconClose class="md-icon-button__icon" />
           </MdIconButton>
         </div>
         <div class="md-modal__content-inner">MODAL CONTENT GOES HERE</div>

package/src/tile/README.md

@@ -9,17 +9,22 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 ## Tile horizontal
 
 ```html
-<a className="md-tile [md-tile--secondary, md-tile--small, md-tile--medium, md-tile--fullWidth]" href="{href}" onClick="{handleClick}">
-  <div className="md-tile__content">
-    <div className="md-tile__content-icon">{icon}</div>
-    <div className="md-tile__content-text">
-      <div className="md-tile__content-heading">{heading}</div>
-      <div className="md-tile__content-description">{description}</div>
+<a
+  class="md-tile [md-tile--secondary, md-tile--small, md-tile--medium, md-tile--fullWidth]"
+  href="{href}"
+  onClick="{handleClick}"
+>
+  <div class="md-tile__content">
+    <div class="md-tile__content-icon">{icon}</div>
+    <div class="md-tile__content-text">
+      <div class="md-tile__content-heading">{heading}</div>
+      <div class="md-tile__content-description">{description}</div>
     </div>
   </div>
 
-  <div className="md-tile__arrow">
-    <MdChevronIcon height="{25}" />
+  <div class="md-tile__arrow">
+    <!-- Can be replaced with chevron down icon from Material Symbols -->
+    <MdIconChevronForward height="{25}" />
   </div>
 </a>
 ```
@@ -28,15 +33,15 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <a
-  className="md-tile-vertical [md-tile-vertical--secondary, md-tile-vertical--small, md-tile-vertical--large]"
+  class="md-tile-vertical [md-tile-vertical--secondary, md-tile-vertical--small, md-tile-vertical--large]"
   href="{href}"
   onClick="{handleClick}"
 >
-  <div className="md-tile-vertical__content">
-    <div className="md-tile-vertical__content-icon">{icon}</div>
-    <div className="md-tile-vertical__content-text">
-      <div className="md-tile-vertical__content-heading">{heading}</div>
-      <div className="md-tile-vertical__content-description">{description}</div>
+  <div class="md-tile-vertical__content">
+    <div class="md-tile-vertical__content-icon">{icon}</div>
+    <div class="md-tile-vertical__content-text">
+      <div class="md-tile-vertical__content-heading">{heading}</div>
+      <div class="md-tile-vertical__content-description">{description}</div>
     </div>
   </div>
 </a>

package/src/toggle/README.md

@@ -8,15 +8,15 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <div>
-  <div className="md-toggle__wrapper">
-    <input className="md-toggle__checkbox" type="checkbox" checked="{true|false}" onChange="{}" />
-    <label className="md-toggle__label-wrapper [md-toggle__label-wrapper--disabled]">
-      <div className="md-toggle__label-text">{label}</div>
-      <div className="md-toggle__label [md-toggle__label--checked, md-toggle__label--disabled]">
-        <span className="md-toggle__button" />
+  <div class="md-toggle__wrapper">
+    <input class="md-toggle__checkbox" type="checkbox" checked="{true|false}" onChange="{}" />
+    <label class="md-toggle__label-wrapper [md-toggle__label-wrapper--disabled]">
+      <div class="md-toggle__label-text">{label}</div>
+      <div class="md-toggle__label [md-toggle__label--checked, md-toggle__label--disabled]">
+        <span class="md-toggle__button" />
       </div>
     </label>
   </div>
-  <div className="md-toggle__error">{errorText}</div>
+  <div class="md-toggle__error">{errorText}</div>
 </div>
 ```

package/src/tooltip/README.md

@@ -8,9 +8,9 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <div>
-  <div className="md-tooltip__child">{children}</div>
+  <div class="md-tooltip__child">{children}</div>
   <div
-    className="md-tooltip [md-tooltip--show,
+    class="md-tooltip [md-tooltip--show,
                           md-tooltip--bottom,
                           md-tooltip--top,
                           md-tooltip--right,