@miljodirektoratet/md-css 1.0.3 → 1.0.4

package/README.md

@@ -21,6 +21,6 @@ const MyComponent = () => {
 
 **For more documentation, please refer to the [Storybook](https://miljodir.github.io/md-components/)**
 
-**For HTML structure for each component, see the README.md for each css-file, located in /src. This must be followed if stylesheets are used as standalone, without React components.**
+**For HTML structure for each component, see the README.md for each css-file, located in /src, or the `Docs`-section in the [Storybook](https://miljodir.github.io/md-components/) for each component. This must be followed if stylesheets are used as standalone, without React components.**
 
 _For React components, see [@miljodirektoratet/md-react](https://www.npmjs.com/package/@miljodirektoratet/md-react)_

package/package.json

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

package/src/accordionitem/README.md

@@ -1,6 +1,6 @@
-# AccordionItem
+# Structure
 
-To use the `AccordionItem` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `AccordionItem` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/button/README.md

@@ -1,6 +1,6 @@
-# Button
+# Structure
 
-To use the `Button` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Button` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/chips/README.md

@@ -1,6 +1,6 @@
-# Chips
+# Structure
 
-To use the `Chips` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Chips` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/filelist/README.md

@@ -1,6 +1,6 @@
-# FileList
+# Structure
 
-To use the `FileList` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `FileList` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/checkbox/README.md

@@ -1,6 +1,6 @@
-# Checkbox
+# Structure
 
-To use the `Checkbox` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Checkbox` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/checkboxgroup/README.md

@@ -1,6 +1,6 @@
-# CheckboxGroup
+# Structure
 
-To use the `CheckboxGroup` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `CheckboxGroup` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/fileupload/README.md

@@ -1,6 +1,6 @@
-# FileUpload
+# Structure
 
-To use the `FileUpload` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `FileUpload` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/input/README.md

@@ -1,6 +1,6 @@
-# Input
+# Structure
 
-To use the `Input` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Input` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/multiselect/README.md

@@ -1,6 +1,6 @@
-# Multiselect
+# Structure
 
-To use the `Multiselect` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Multiselect` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/radiogroup/README.md

@@ -0,0 +1,50 @@
+# Structure
+
+To use the `RadioGroup` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+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>{label}</div>
+
+        <div className="md-multiselect__help-button">
+            <MdHelpButton/> <- see MdHelpButton styles
+        </div>
+    </div>
+
+    <div className="md-multiselect__help-text [md-multiselect__help-text--open]">
+        <MdHelpText>{ helpText }</MdHelpText> <- see MdHelpText styles
+    </div>
+
+    <div className="md-radiogroup__options [md-radiogroup__options--vertical]">
+        <label className="md-radiogroup-option">
+            <span className="md-radiogroup-option__check-area" id="">
+                <!-- if selected option -->
+                <span className="md-radiogroup-option__selected-dot" ></span>
+            </span>
+            <input
+                id=""
+                type="radio"
+                value="some value"
+                checked={true/false}
+                onChange={handleChange}
+                disabled={true/false}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+            />
+            <span className="md-radiogroup-option__text">
+                {option.text}
+            </span>
+        </label>
+        ...
+        ...
+    </div>
+
+    <!-- if error -->
+    <div className="md-radiogroup__error">{error}</div>
+</div>
+```

package/src/formElements/select/README.md

@@ -1,6 +1,6 @@
-# Select
+# Structure
 
-To use the `Select` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Select` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/formElements/textarea/README.md

@@ -1,6 +1,6 @@
-# Textarea
+# Structure
 
-To use the `Textarea` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Textarea` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 
@@ -16,7 +16,6 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
         <div className="md-textarea__help-button">
             {button to trigger help text}
         </div>
-    }
     </div>
 
     <div className="md-textarea__help-text [md-textarea__help-text--open]">

package/src/help/README.md

@@ -1,6 +1,6 @@
-# Help
+# Structure
 
-To use the `Help` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Help` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/index.css

@@ -18,7 +18,7 @@
 @import './formElements/checkboxgroup/checkboxgroup.css';
 @import './formElements/textarea/textarea.css';
 @import './formElements/select/select.css';
-@import './formElements/radiogroup.css';
+@import './formElements/radiogroup/radiogroup.css';
 @import './formElements/multiselect/multiselect.css';
 @import './formElements/fileupload/fileupload.css';
 @import './utils.css';

package/src/infoTag/README.md

@@ -1,6 +1,6 @@
-# InfoTags
+# Structure
 
-To use the `InfoTags` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `InfoTags` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/link/README.md

@@ -1,6 +1,6 @@
-# Link
+# Structure
 
-To use the `Link` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Link` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/messages/AlertMessage.md

@@ -0,0 +1,23 @@
+# Structure
+
+To use the `AlertMessage` css as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
+
+```html
+<div className="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error]">
+    <div className="md-alert-message__content">
+        {Icon width="20" height="20"}
+        {label}
+    </div>
+
+    <button
+        className="md-alert-message__button"
+        onClick={handleClick}
+    >
+        {Icon width="16" height="16"}
+    </button>
+</div>
+```

package/src/messages/InfoBox.md

@@ -0,0 +1,14 @@
+# Structure
+
+To use the `InfoBox` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
+
+```html
+<div className="md-info-box">
+    {Icon width="20" height="20"}
+    {label}
+</div>
+```

package/src/messages/README.md

@@ -1,6 +1,6 @@
-# Info box
+# Structure
 
-To use the `InfoBox` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `InfoBox` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 
@@ -13,8 +13,6 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 </div>
 ```
 
-# Alert message
-
 To use the `AlertMessage` css as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.

package/src/modal/README.md

@@ -1,6 +1,6 @@
-# Modal
+# Structure
 
-To use the `Modal` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Modal` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/tabs/README.md

@@ -1,6 +1,6 @@
-# Tabs
+# Structure
 
-To use the `Tabs` css as a standalone, without the accompanying React component, please use the following HTML structure. The styling for this component applies to the tab-buttons, content and what to show is up to you.
+To use the `Tabs` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure. The styling for this component applies to the tab-buttons, content and what to show is up to you.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/tile/README.md

@@ -1,6 +1,6 @@
-# Tiles
+# Structure
 
-To use the `Tile` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Tile` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 

package/src/toggle/README.md

@@ -1,6 +1,6 @@
-# Toggle
+# Structure
 
-To use the `Toggle` css as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `Toggle` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.