Release/1.9.0

.circleci/config.yml

@@ -224,6 +224,9 @@ jobs:
       - run:
           name: Build React Components
           command: yarn --cwd packages/react-component-library build
+      - run:
+          name: Build site
+          command: yarn --cwd packages/docs-site build
       - run:
           name: Jest
           environment:

lerna.json

@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.8.0",
+  "version": "1.9.0",
   "npmClient": "yarn"
 }

package.json

@@ -23,7 +23,8 @@
   },
   "resolutions": {
     "**/**/handlebars": "^4.5.3",
-    "**/**/mem": "^4.0.0"
+    "**/**/mem": "^4.0.0",
+    "**/**/terser-webpack-plugin": "^1.4.2"
   },
   "prettier": {
     "bracketSpacing": true,

packages/css-framework/index.scss

@@ -90,6 +90,7 @@ $__states: null;
 
 // Objects
 @import "src/objects/divider";
+@import "src/objects/floating-box";
 @import "src/objects/hyperlink";
 @import "src/objects/media";
 @import "src/objects/wrapper";

packages/css-framework/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@royalnavy/css-framework",
   "description": "Foundational CSS Framework for Royal Navy components and applications.",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
     "*.@(scss)": "stylelint"
   },
   "devDependencies": {
-    "lint-staged": "^9.4.3",
+    "lint-staged": "^9.5.0",
     "sass": "^1.23.7",
     "stylelint": "^11.1.1",
     "stylelint-junit-formatter": "^0.2.2"

packages/css-framework/src/components/_popover.scss

@@ -1,228 +1,10 @@
-$lightBackground: color(neutral, white);
-$lightBorder: color(neutral, 100);
-$darkBackground: color(neutral, 700);
-$darkBorder: color(neutral, 700);
-$borderThick: 2px;
-$inner: 8px;
-$outer: $inner + 1;
-$offset: $outer + $borderThick;
-
-.rn-popover__content {
-  @include z-index(modal);
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: color(neutral, white);
-  height: 100vh;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.rn-popover__footer {
-  padding: spacing(3);
-  margin: 0;
-  border-top: 1px solid color(neutral, 100);
-  background-color: color(neutral, 000);
-  text-align: right;
-}
-
-a.rn-popover__footer-link {
-  text-decoration: none;
-  color: color(neutral, 300);
-  font-size: font-size(xs);
-  cursor: pointer;
-}
-
-
-@include breakpoint("s") {
-  .rn-popover {
-    position: absolute;
-  }
-
-  .rn-popover__content {
-    position: relative;
-    top: auto;
-    left: auto;
-    height: auto;
-    width: auto;
-    padding: 0;
-    border-radius: 5px;
-  }
-
-  .rn-popover--light .rn-popover__content {
-    background: $lightBackground;
-    border: $lightBorder solid $borderThick;
-  }
-
-  .rn-popover--dark .rn-popover__content {
-    background: $darkBackground;
-    border: $darkBorder solid $borderThick;
-    color: color(neutral, white);
-  }
-
-  .rn-popover__content:before {
-    border-style: solid;
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0;
-    z-index: 0;
-  }
-
-  .rn-popover__content:after {
-    border-style: solid;
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0;
-    z-index: 1;
-  }
-
-  .rn-popover--top_left .rn-popover__content:before,
-  .rn-popover--top_right .rn-popover__content:before {
-    border-width: 0 $outer $outer;
-    margin-left: -$outer;
-    top: -$offset;
-  }
-  .rn-popover--top_left.rn-popover--light .rn-popover__content:before,
-  .rn-popover--top_right.rn-popover--light .rn-popover__content:before {
-    border-color: $lightBorder transparent;
-  }
-  .rn-popover--top_left.rn-popover--dark .rn-popover__content:before,
-  .rn-popover--top_right.rn-popover--dark .rn-popover__content:before {
-    border-color: $darkBorder transparent;
-  }
-  .rn-popover--top_left .rn-popover__content:after,
-  .rn-popover--top_right .rn-popover__content:after {
-    border-width: 0 $inner $inner;
-    margin-left: -$inner;
-    top: -$inner;
-  }
-  .rn-popover--top_left.rn-popover--light .rn-popover__content:after,
-  .rn-popover--top_right.rn-popover--light .rn-popover__content:after {
-    border-color: $lightBackground transparent;
-  }
-  .rn-popover--top_left.rn-popover--dark .rn-popover__content:after,
-  .rn-popover--top_right.rn-popover--dark .rn-popover__content:after {
-    border-color: $darkBackground transparent;
-  }
-
-
-  .rn-popover--right_top .rn-popover__content:before,
-  .rn-popover--right_bottom .rn-popover__content:before {
-    border-width: $outer 0 $outer $outer;
-    right: -$offset;
-    margin-top: -$outer;
-  }
-  .rn-popover--right_top.rn-popover--light .rn-popover__content:before,
-  .rn-popover--right_bottom.rn-popover--light .rn-popover__content:before {
-    border-color: transparent $lightBorder;
-  }
-  .rn-popover--right_top.rn-popover--dark .rn-popover__content:before,
-  .rn-popover--right_bottom.rn-popover--dark .rn-popover__content:before {
-    border-color: transparent $darkBorder;
-  }
-  .rn-popover--right_top .rn-popover__content:after,
-  .rn-popover--right_bottom .rn-popover__content:after {
-    border-width: $inner 0 $inner $inner;
-    right: -$inner;
-    margin-top: -$inner;
-
-  }
-  .rn-popover--right_top.rn-popover--light .rn-popover__content:after,
-  .rn-popover--right_bottom.rn-popover--light .rn-popover__content:after {
-    border-color: transparent $lightBackground;
-  }
-  .rn-popover--right_top.rn-popover--dark .rn-popover__content:after,
-  .rn-popover--right_bottom.rn-popover--dark .rn-popover__content:after {
-    border-color: transparent $darkBackground;
-  }
-
-
-  .rn-popover--bottom_right .rn-popover__content:before,
-  .rn-popover--bottom_left .rn-popover__content:before {
-    border-width: $inner $inner 0;
-    bottom: -$inner - $borderThick;
-    margin-left: -$outer;
-  }
-  .rn-popover--bottom_right.rn-popover--light .rn-popover__content:before,
-  .rn-popover--bottom_left.rn-popover--light .rn-popover__content:before {
-    border-color: $lightBorder transparent;
-  }
-  .rn-popover--bottom_right.rn-popover--dark .rn-popover__content:before,
-  .rn-popover--bottom_left.rn-popover--dark .rn-popover__content:before {
-    border-color: $darkBorder transparent;
-  }
-  .rn-popover--bottom_right .rn-popover__content:after,
-  .rn-popover--bottom_left .rn-popover__content:after {
-    border-width: $inner $inner 0;
-    bottom: -$inner;
-    margin-left: -$outer;
-  }
-  .rn-popover--bottom_right.rn-popover--light .rn-popover__content:after,
-  .rn-popover--bottom_left.rn-popover--light .rn-popover__content:after {
-    border-color: $lightBackground transparent;
-  }
-  .rn-popover--bottom_right.rn-popover--dark .rn-popover__content:after,
-  .rn-popover--bottom_left.rn-popover--dark .rn-popover__content:after {
-    border-color: $darkBackground transparent;
-  }
-
-
-  .rn-popover--left_bottom .rn-popover__content:before,
-  .rn-popover--left_top .rn-popover__content:before {
-    border-width: $outer $outer $outer 0;
-    left: -$offset;
-    margin-top: -$outer;
-  }
-  .rn-popover--left_bottom.rn-popover--light .rn-popover__content:before,
-  .rn-popover--left_top.rn-popover--light .rn-popover__content:before {
-    border-color: transparent $lightBorder;
-  }
-  .rn-popover--left_bottom.rn-popover--dark .rn-popover__content:before,
-  .rn-popover--left_top.rn-popover--dark .rn-popover__content:before {
-    border-color: transparent $darkBorder;
-  }
-  .rn-popover--left_bottom .rn-popover__content:after,
-  .rn-popover--left_top .rn-popover__content:after {
-    border-width: $inner $inner $inner 0;
-    left: -$inner;
-    margin-top: -$inner;
-  }
-  .rn-popover--left_bottom.rn-popover--light .rn-popover__content:after,
-  .rn-popover--left_top.rn-popover--light .rn-popover__content:after {
-    border-color: transparent $lightBackground;
-  }
-  .rn-popover--left_bottom.rn-popover--dark .rn-popover__content:after,
-  .rn-popover--left_top.rn-popover--dark .rn-popover__content:after {
-    border-color: transparent $darkBackground;
-  }
-
-
-  .rn-popover--left_bottom .rn-popover__content:before,
-  .rn-popover--left_bottom .rn-popover__content:after,
-  .rn-popover--right_bottom .rn-popover__content:before,
-  .rn-popover--right_bottom .rn-popover__content:after {
-    top: 80%;
-  }
-
-  .rn-popover--left_top .rn-popover__content:before,
-  .rn-popover--left_top .rn-popover__content:after,
-  .rn-popover--right_top .rn-popover__content:before,
-  .rn-popover--right_top .rn-popover__content:after {
-    top: 20%;
-  }
-  .rn-popover--top_left .rn-popover__content:before,
-  .rn-popover--top_left .rn-popover__content:after,
-  .rn-popover--bottom_left .rn-popover__content:before,
-  .rn-popover--bottom_left .rn-popover__content:after {
-    left: 10%;
-  }
-  .rn-popover--top_right .rn-popover__content:before,
-  .rn-popover--top_right .rn-popover__content:after,
-  .rn-popover--bottom_right .rn-popover__content:before,
-  .rn-popover--bottom_right .rn-popover__content:after {
-    left: 90%;
+.rn-popover {
+  pointer-events: none;
+  opacity: 0;
+  transition: linear opacity 0.3s;
+
+  &.is-visible {
+    pointer-events: all;
+    opacity: 1;
   }
 }