@miljodirektoratet/md-css 0.0.18 → 0.0.20

package/package.json

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

package/src/colors.css

@@ -16,6 +16,8 @@
 
   --mdTextColor: #222222;
 
+  --mdWarningBackgoundColor: #FCE4CA;
+
   --mdErrorColor: #ca0000;
   --mdErrorColor120: #B7090D;
 

package/src/index.css

@@ -1,6 +1,5 @@
 @import './colors.css';
 @import './button/button.css';
-@import './shortcut.css';
 @import './link/link.css';
 @import './data-grid.css';
 @import './help/help.css';
@@ -11,6 +10,9 @@
 @import './modal/modal.css';
 @import './tile/tile.css';
 @import './tabs/tabs.css';
+@import './loadingSpinner/loadingSpinner.css';
+@import './infoTag/infoTag.css';
+@import './messages/alertMessage.css';
 @import './formElements/input/input.css';
 @import './formElements/checkbox/checkbox.css';
 @import './formElements/checkboxgroup/checkboxgroup.css';

package/src/infoTag/README.md

@@ -0,0 +1,18 @@
+# InfoTags
+
+To use the `InfoTags` 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-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>
+```

package/src/infoTag/infoTag.css

@@ -0,0 +1,41 @@
+.md-info-tag {
+  display: inline-flex;
+  justify-content: flex-start;
+  z-index: 2;
+  background-color: var(--mdPrimaryColor20);
+  color: var(--mdGreyColor);
+  align-items: center;
+  padding: 4px 12px 4px 12px;
+  border-radius: 4px;
+  font-family: 'Open Sans';
+  font-size: .88em;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0em;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.md-info-tag--secondary {
+  background-color: var(--mdSecondaryColor40);
+}
+.md-info-tag--warning {
+  background-color: var(--mdWarningBackgoundColor);
+}
+.md-info-tag--danger {
+  background-color: var(--mdErrorColor);
+  color: #fff;
+}
+
+.md-info-tag__label {
+  display: flex;
+  align-self: flex-start;
+  margin-right: 12px;
+}
+
+.md-info-tag__icon {
+  height: 20px;
+  width: 20px;
+}

package/src/loadingSpinner/loadingSpinner.css

@@ -0,0 +1,3 @@
+.md-loading-spinner {
+  animation: spinAnimation 1s linear infinite;
+}

package/src/messages/README.md

@@ -0,0 +1,38 @@
+# Info box
+
+To use the `InfoBox` 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>
+```
+
+# 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.
+
+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/alertMessage.css

@@ -0,0 +1,53 @@
+/* INFO BOX */
+.md-info-box {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  font-family: 'Open sans';
+  font-size: 1em;
+  padding: 1em;
+  background-color: var(--mdSecondaryColor20);
+  border: 1px dashed var(--mdPrimaryColor);
+  max-width: 634px;
+}
+
+/* ALERT MESSAGE */
+.md-alert-message {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'Open sans';
+  font-size: 1em;
+  max-width: 634px;
+  background-color: var(--mdPrimaryColor10);
+}
+
+.md-alert-message--confirm {
+  background-color: var(--mdPrimaryColor20);
+}
+.md-alert-message--warning {
+  background-color: var(--mdWarningBackgoundColor);
+}
+.md-alert-message--error {
+  background-color: var(--mdErrorColor);
+  color: #fff;
+}
+
+.md-alert-message__content {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  padding: 1em;
+}
+
+.md-alert-message__button {
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  padding: 1em;
+  cursor: pointer;
+}
+
+.md-alert-message--error .md-alert-message__button {
+  color: #fff;
+}

package/src/tabs/tabs.css

@@ -18,6 +18,7 @@
 }
 
 .md-tabs-container ul li .md-tabs-button {
+  font-family: 'Open sans';
   font-size: 1em;
   font-weight: 400;
   padding: 13px 24px 13px 24px;

package/src/tile/tile.css

@@ -40,6 +40,8 @@
 }
 
 .md-tile__content-icon {
+  height: 64px;
+  width: 64px;
   margin-right: 1em;
   color: var(--mdPrimaryColor80);
 }
@@ -132,6 +134,8 @@
   justify-content: center;
   margin-bottom: 1em;
   color: var(--mdPrimaryColor80);
+  width: 128px;
+  height: 128px;
 }
 
 .md-tile-vertical--disabled .md-tile-vertical__content-icon {

package/src/utils.css

@@ -2,3 +2,12 @@
 	from { opacity: 0; }
 	to { opacity: 1; }
 }
+
+@keyframes spinAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/shortcut.css

@@ -1,30 +0,0 @@
-.md-shortcut {
-  background-color: #ebf3f3;
-  border-radius: 2px;
-  color: #222;
-  display: flex;
-  font-family: 'Sofia Pro';
-  font-size: 22px;
-  max-width: 600px;
-  padding: 1.65rem 1.5rem 1.45rem 1.5rem;
-  position: relative;
-  text-decoration: none;
-  transition: background-color 0.3s ease;
-}
-
-.md-shortcut:hover {
-  background-color: #d9e4e4;
-  text-decoration: underline;
-}
-
-.md-shortcut:active {
-  border-bottom: 3px solid var(--mdPrimaryColor);
-}
-
-.icon {
-  height: 10px;
-  width: 16px;
-  position: absolute;
-  right: 30px;
-  top: 26px;
-}