@miljodirektoratet/md-css 0.0.13 → 0.0.14

package/README.md

@@ -19,4 +19,6 @@ const MyComponent = () => {
 }
 ```
 
-_For React components, see @miljodirektoratet/md-react_
+**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 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": "0.0.13",
+  "version": "0.0.14",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

package/src/accordionitem/README.md

@@ -0,0 +1,32 @@
+# AccordionItem
+
+To use the `AccordionItem` 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
+    class="md-accordion-item [md-accordion-item--expanded, md-accordion-item--secondary, md-accordion-item--disabled]"
+>
+    <button
+        class="md-accordion-item__header [md-accordion-item__header--expanded]"
+        disabled={true/false}
+    >
+        <div class="md-accordion-item__header-left">
+            <div class="md-accordion-item__header-icon">_no content here, this is container for expand/collapse icon, controlled by the css_</div>
+            <div class="md-accordion-item__header-label">LABEL/TITLE</div>
+        </div>
+        <div class="md-accordion-item__header-right">OPTIONAL RIGHT SIDE CONTENT IN HEADER</div>
+    </button>
+
+    <div class="md-accordion-item__content [md-accordion-item__content--expanded]">
+        <div class="md-accordion-item__content-inner">
+            MAIN CONTENT OF ACCORDION GOES HERE
+        </div>
+
+        <button class="md-accordion-item__close-button"></button>
+    </div>
+</div>
+```

package/src/{accordionitem.css → accordionitem/accordionitem.css}

@@ -1,18 +1,18 @@
 .md-accordion-item {
   padding: 1em;
-  background-color: var(--primaryColor20);
-  color: var(--greyColor);
+  background-color: var(--mdPrimaryColor20);
+  color: var(--mdGreyColor);
   font-family: 'Open sans';
   margin-bottom: 1em;
 }
 
 .md-accordion-item:focus-within {
-  outline: 2px solid var(--primaryColor80);
+  outline: 2px solid var(--mdPrimaryColor80);
   outline-offset: -2px;
 }
 
 .md-accordion-item.md-accordion-item--secondary {
-  background-color: var(--secondaryColor60);
+  background-color: var(--mdSecondaryColor60);
 }
 
 /* Header */
@@ -48,7 +48,7 @@
 .md-accordion-item__header .md-accordion-item__header-icon:after {
     content: "";
     position: absolute;
-    background-color: var(--greyColor);
+    background-color: var(--mdGreyColor);
     transition: transform 0.15s ease-out;
 }
 /* Vertical line */
@@ -104,7 +104,7 @@
 }
 
 .md-accordion-item__close-button:focus {
-  outline: 2px solid var(--primaryColor80);
+  outline: 2px solid var(--mdPrimaryColor80);
   outline-offset: 2px;
 }
 
@@ -116,13 +116,13 @@
 /* DISABLED */
 .md-accordion-item--disabled,
 .md-accordion-item--secondary.md-accordion-item--disabled {
-  background-color: var(--greyColor20);
+  background-color: var(--mdGreyColor20);
 }
 .md-accordion-item--disabled .md-accordion-item__header {
-  color: var(--greyColor60);
+  color: var(--mdGreyColor60);
   cursor: default;
 }
 .md-accordion-item--disabled .md-accordion-item__header .md-accordion-item__header-icon:before,
 .md-accordion-item--disabled .md-accordion-item__header .md-accordion-item__header-icon:after {
-  background-color: var(--greyColor60);
+  background-color: var(--mdGreyColor60);
 }

package/src/button/README.md

@@ -0,0 +1,15 @@
+# Button
+
+To use the `Button` 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
+<button className="md-button [md-button--small, md-button--secondary, md-button--danger]">
+    <div className="md-button__leftIcon">{leftIcon}</div>
+    BUTTON TEXT
+    <div className="md-button__rightIcon">{rightIcon}</div>
+</button>
+```

package/src/button/button.css

@@ -0,0 +1,101 @@
+.md-button {
+  align-items: center;
+  background-color: var(--mdPrimaryColor);
+  border: 2px solid var(--mdPrimaryColor);
+  color: #ffffff;
+  display: flex;
+  font-weight: 400;
+  font-family: 'Open sans';
+  font-size: 1rem;
+  outline: 2px solid var(--mdPrimaryColor);
+  padding: .65rem 1.5rem;
+}
+
+.md-button--small {
+  padding: .4rem .8rem;
+  border-radius: .43rem;
+}
+
+.md-button__leftIcon {
+  height: 16px;
+  width: 16px;
+  position: relative;
+  right: 8px;
+  top: 0;
+}
+
+.md-button__rightIcon {
+  height: 16px;
+  width: 16px;
+  position: relative;
+  left: 8px;
+  top: 0;
+}
+
+.md-button:focus {
+  background-color: var(--mdPrimaryColor80);
+  border-color: var(--mdPrimaryColor80);
+  outline: 2px solid var(--mdPrimaryColor80);
+  outline-offset: 2px;
+}
+
+.md-button:hover {
+  cursor: pointer;
+  background-color: var(--mdPrimaryColor120);
+  border-color: var(--mdPrimaryColor120);
+  outline: 2px solid var(--mdPrimaryColor120);
+}
+
+.md-button[disabled],
+.md-button:disabled {
+  background-color: var(--mdGreyColor20);
+  border: 2px solid var(--mdGreyColor20);
+  color: var(--mdGreyColor60);
+  cursor: not-allowed;
+  outline: 2px solid var(--mdGreyColor20);
+}
+
+.md-button--secondary {
+  background-color: #ffffff;
+  border: 2px solid var(--mdPrimaryColor20);
+  color: var(--mdPrimaryColor);
+}
+
+.md-button--secondary:hover:enabled {
+  background-color: #ccdfde;
+}
+
+.md-button--secondary:focus:enabled {
+  /* background-color: #ccdfde; */
+  background-color: #ffffff;
+  outline: 2px solid var(--mdPrimaryColor80);
+  border-color: var(--mdPrimaryColor80);
+}
+
+.md-button--secondary:disabled {
+  background-color: #fff;
+  border: 2px solid var(--mdGreyColor20);
+  color: var(--mdGreyColor20);
+}
+
+.md-button--secondary > .md-button__rightIcon {
+  color: var(--mdPrimaryColor);
+}
+
+.md-button--danger {
+  border: 2px solid var(--mdErrorColor);
+  background-color: var(--mdErrorColor);
+  outline: 2px solid var(--mdErrorColor);
+}
+
+.md-button--danger:focus:enabled {
+  background-color: var(--mdErrorColor);
+  border-color: var(--mdErrorColor);
+  outline: 2px solid var(--mdErrorColor);
+}
+
+.md-button--danger:hover:enabled {
+  background-color: var(--mdErrorColor120);
+  border-color: var(--mdErrorColor120);
+  outline: 2px solid var(--mdErrorColor120);
+}

package/src/chips/README.md

@@ -0,0 +1,23 @@
+# Chips
+
+To use the `Chips` 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
+<button
+    className="md-chip [md-chip--active, md-chip--disabled, md-chip--solid]"
+>
+    <div className="md-chip__left-icon">
+        {leftIcon}
+    </div>
+
+    <div className="md-chip__label">{label}</div>
+
+    <div className="md-chip__right-icon">
+        {rightIcon}
+    </div>
+</button>
+```

package/src/{chips.css → chips/chips.css}

@@ -2,9 +2,9 @@
   display: flex;
   align-items: center;
   background-color: #fff;
-  border: 1px solid var(--primaryColor);
+  border: 1px solid var(--mdPrimaryColor);
   border-radius: 10em;
-  color: var(--primaryColor);
+  color: var(--mdPrimaryColor);
   font-weight: 400;
   font-family: 'Open sans';
   font-size: 1rem;
@@ -14,19 +14,31 @@
   text-align: left;
 }
 
+.md-chip.md-chip--solid:not(.md-chip--disabled) {
+  background-color: var(--mdPrimaryColor);
+  color: #fff;
+}
+.md-chip.md-chip--solid:not(.md-chip--disabled):hover {
+  background-color: var(--mdPrimaryColor120);
+  color: #fff;
+}
+.md-chip.md-chip--solid:not(.md-chip--disabled):focus {
+  outline-offset: 2px;
+}
+
 .md-chip:not(.md-chip--disabled):hover {
-  background-color: var(--primaryColor20);
+  background-color: var(--mdPrimaryColor20);
 }
 
 .md-chip:not(.md-chip--disabled):focus {
-  outline: 2px solid var(--primaryColor);
+  outline: 2px solid var(--mdPrimaryColor);
   outline-offset: -2px;
 }
 
 .md-chip--disabled {
-  background-color: var(--greyColor20);
-  color: var(--greyColor60);
-  border: 1px solid var(--greyColor60);
+  background-color: var(--mdGreyColor20);
+  color: var(--mdGreyColor60);
+  border: 1px solid var(--mdGreyColor60);
   cursor: default;
 }
 
@@ -35,7 +47,7 @@
 }
 
 .md-chip:not(.md-chip--disabled).md-chip--active {
-  background-color: var(--primaryColor);
+  background-color: var(--mdPrimaryColor);
   color: #fff;
 }
 

package/src/colors.css

@@ -1,32 +1,28 @@
 :root {
-  --primaryColor: #005e5d;
-  --primaryColor120: #005251;
-  --primaryColor80: #337E7D;
-  --primaryColor20: #CCDFDE;
-  --primaryColor10: #E5EEEE;
+  --mdPrimaryColor: #005e5d;
+  --mdPrimaryColor120: #005251;
+  --mdPrimaryColor80: #337E7D;
+  --mdPrimaryColor20: #CCDFDE;
+  --mdPrimaryColor10: #E5EEEE;
 
-  --lightPrimaryColor: #40c1ac;
-  --darkPrimaryColor: #005251;
+  --mdLightPrimaryColor: #40c1ac;
+  --mdDarkPrimaryColor: #005251;
 
-  --secondaryColor: #ECE7D2;
-  --secondaryVariantColor: #F3F0E4;
-  --secondaryColor80: #EFEBDB;
-  --secondaryColor60: #F3F0E4;
-  --secondaryColor40: #F7F5ED;
-  --secondaryColor20: #FBFAF6;
+  --mdSecondaryColor: #ECE7D2;
+  --mdSecondaryColor80: #EFEBDB;
+  --mdSecondaryColor60: #F3F0E4;
+  --mdSecondaryColor40: #F7F5ED;
+  --mdSecondaryColor20: #FBFAF6;
 
-  --textColor: #222222;
+  --mdTextColor: #222222;
 
-  --outlineColor: #00615c;
-  --outlineColor2: #009b96;
+  --mdErrorColor: #ca0000;
+  --mdErrorColor120: #B7090D;
 
-  --errorColor: #ca0000;
-  --errorColor120: #B7090D;
-
-  --greyColor: #222222;
-  --greyColor10: #E8E8E8;
-  --greyColor20: #D2D2D2;
-  --greyColor40: #A6A6A6;
-  --greyColor60: #808080;
-  --greyColor80: #4E4E4E;
+  --mdGreyColor: #222222;
+  --mdGreyColor10: #E8E8E8;
+  --mdGreyColor20: #D2D2D2;
+  --mdGreyColor40: #A6A6A6;
+  --mdGreyColor60: #808080;
+  --mdGreyColor80: #4E4E4E;
 }

package/src/filelist/README.md

@@ -0,0 +1,47 @@
+# FileList
+
+To use the `FileList` 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 class="md-filelist">
+    <div
+        class="md-filelist__file"
+    >
+        <div class="md-filelist__file-label">
+            <div class="md-filelist__file-icon">
+                {fileIcon}
+            </div>
+            <div>
+                <div>{file.name}</div>
+                <div class="md-filelist__file-size">{file.size}</div>
+            </div>
+        </div>
+
+        <div class="md-filelist__file-actions">
+            <button
+                class="md-filelist__file-actions-button md-filelist__file-download"
+            >
+                {downloadIcon}
+            </button>
+
+            <button
+                class="md-filelist__file-actions-button md-filelist__file-delete"
+            >
+                {deleteIcon}
+            </button>
+        }
+        </div>
+    </div>
+
+    <!-- Repeat for each file in list -->
+    <div
+        class="md-filelist__file"
+    >
+        ...
+    </div>
+</div>
+```

package/src/{filelist.css → filelist/filelist.css}

@@ -7,7 +7,7 @@
 .md-filelist__file {
   display: flex;
   justify-content: space-between;
-  border: 1px solid var(--primaryColor);
+  border: 1px solid var(--mdPrimaryColor);
   padding: .8em 1.1em;
   font-family: 'Open sans';
   background-color: #fff;
@@ -15,7 +15,7 @@
 }
 
 .md-filelist__file:hover {
-  background-color: var(--primaryColor20);
+  background-color: var(--mdPrimaryColor20);
   transition: background .2s linear;
 }
 

package/src/formElements/checkbox/README.md

@@ -0,0 +1,23 @@
+# Checkbox
+
+To use the `Checkbox` 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-checkbox [md-checkbox--disabled]">
+    <input
+        className="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>
+</div>
+```

package/src/formElements/{checkbox.css → checkbox/checkbox.css}

@@ -18,7 +18,7 @@
 
 .md-checkbox__label::before {
   background-color: #ffffff;
-  border: 1px solid var(--greyColor60);
+  border: 1px solid var(--mdGreyColor60);
   content: '';
   cursor: pointer;
   height: 20px;
@@ -28,11 +28,11 @@
 
 .md-checkbox:focus-within .md-checkbox__label::before,
 .md-checkbox:hover .md-checkbox__label::before {
-  background-color: var(--primaryColor20);
+  background-color: var(--mdPrimaryColor20);
 }
 
 .md-checkbox:focus-within .md-checkbox__label {
-  outline: 2px solid var(--primaryColor);
+  outline: 2px solid var(--mdPrimaryColor);
   outline-offset: 2px;
 }
 
@@ -51,8 +51,8 @@
 .md-checkbox--disabled .md-checkbox__label::before,
 .md-checkbox--disabled:focus-within .md-checkbox__label::before,
 .md-checkbox--disabled:hover .md-checkbox__label::before {
-  background-color: var(--greyColor20);
-  border-color: var(--greyColor80);
+  background-color: var(--mdGreyColor20);
+  border-color: var(--mdGreyColor80);
   cursor: default;
 }
 

package/src/formElements/checkboxgroup/README.md

@@ -0,0 +1,34 @@
+# CheckboxGroup
+
+To use the `CheckboxGroup` 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 class="md-checkboxgroup [md-checkboxgroup--disabled]">
+    <div class="md-checkboxgroup__label">
+        <div>{label}</div>
+
+        <!-- Optional button for handling help text -->
+        <MdHelpButton />
+    </div>
+
+    <!-- Optional container for displaying helpt text -->
+    <div class="md-checkboxgroup__help-text [md-checkboxgroup__help-text--open]">
+        <MdHelpText>{helpText}</MdHelpText>
+    </div>
+
+    <div class="md-checkboxgroup__options [md-checkboxgroup__options--vertical]">
+        <!-- Here we use the designsystem react components for checkbox, see structure for these separately -->
+        <MdCheckbox />
+        <MdCheckbox />
+        <MdCheckbox />
+        ...
+    ))}
+    </div>
+
+    <div class="md-radiogroup__error">{error}</div>
+</div>
+```

package/src/formElements/{checkboxgroup.css → checkboxgroup/checkboxgroup.css}

@@ -37,6 +37,6 @@
 }
 
 .md-checkboxgroup__error {
-  color: var(--errorColor);
+  color: var(--mdErrorColor);
   font-size: .88em;
 }

package/src/formElements/fileupload/README.md

@@ -0,0 +1,52 @@
+# FileUpload
+
+To use the `FileUpload` 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 class="md-fileupload">
+    <div
+        class="md-fileupload__droparea"
+        onDragEnter={}
+        onDragLeave={}
+        onDragEnd={}
+        onDragOver={}
+        onDrop={}
+    >
+        <div class="md-fileupload__droparea-icon">
+            <MdUploadIcon /> <!-- Icon for upload -->
+        </div>
+
+        <div class="md-fileupload__droparea-content">
+            Dropp en fil eller <button onClick={}>velg fra denne maskinen</button>
+        </div>
+
+        <input
+            ref={inputRef}
+            type="file"
+            multiple
+            class="md-fileupload__input"
+            onChange={}
+        />
+
+        <!-- List files, for this we use the filelist-component, see separate structure for this -->
+        <div class="md-fileupload__files-wrapper">
+            <MdFileList/>
+        </div>
+    }
+    </div>
+
+    <div class="md-fileupload__actions">
+        <!-- Buttons for upload/done and cancel -->
+        <MdButton>
+            {cancelButtonText}
+        </MdButton>
+        <MdButton>
+            {uploadButtonText}
+        </MdButton>
+    </div>
+</div>
+```

package/src/formElements/{fileupload.css → fileupload/fileupload.css}

@@ -7,14 +7,14 @@
   flex-direction: column;
   align-items: center;
   padding: 2em;
-  border: 1px dashed var(--greyColor80);
+  border: 1px dashed var(--mdGreyColor80);
   margin-bottom: 4em;
   background-color: #fff;
   transition: background .2s linear;
 }
 
 .md-fileupload__droparea.md-fileupload__droparea--active {
-  background-color: var(--greyColor20);
+  background-color: var(--mdGreyColor20);
   transition: background .2s linear;
 }
 
@@ -38,7 +38,7 @@
   background: none;
   border: 0;
   font-size: 16px;
-  color: var(--primaryColor);
+  color: var(--mdPrimaryColor);
   text-decoration: underline;
   padding: 0;
   margin: 0;

package/src/formElements/input/README.md

@@ -0,0 +1,56 @@
+# Input
+
+To use the `Input` 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-input__outer-wrapper">
+    <div className="md-input__label">
+        <label>
+            {label}
+        </label>
+
+        <!-- Optional button for handling help text -->
+        <div className="md-input__help-button">
+            <MdHelpButton/>
+        </div>
+    }
+    </div>
+
+    <!-- Optional container for displaying helpt text -->
+    <div className="md-input__help-text [md-input__help-text--open]">
+        <MdHelpText>{ helpText }</MdHelpText>
+    </div>
+
+    <div className="md-input__wrapper [md-input__wrapper--small]">
+        <!-- Optional prefix-icon -->
+        <div className="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]"
+            value={value}
+            ...
+        />
+
+        <!-- Optional container for suffix -->
+        <div className="md-input__suffix">
+            <div className="md-input__suffix-content">
+                {suffix}
+            </div>
+
+            <div className="md-input__error-icon">
+                <MdWarningIcon /> <!-- Warning icon -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Optional container for error text -->
+    <div className="md-input__error">{errorText}</div>
+</div>
+```