Dev to main (#8)

* npm update

* upgraded storybook to version 6.1.21 (#6)

Co-authored-by: Alex Guo <[email protected]>

* integrate cognition styling (#7)

* refactored entrance page styling

* versioned

* updated webpack and versioning

Co-authored-by: Alex Guo <[email protected]>

* version bump

Co-authored-by: Alex Guo <[email protected]>

components/package.json

@@ -39,7 +39,7 @@
     "@labkey/eslint-config-base": "0.0.8",
     "@labkey/eslint-config-react": "0.0.8",
     "@storybook/addon-knobs": "6.1.15",
-    "@storybook/react": "6.1.15",
+    "@storybook/react": "^6.1.21",
     "@types/jest": "^26.0.20",
     "@types/react-test-renderer": "^17.0.1",
     "babel-loader": "8.2.2",

theme/_immunespace.fonts.scss

@@ -0,0 +1,6 @@
+/*
+  Typography :: Font Declarations
+================================================== */
+
+// @import url('https://fonts.googleapis.com/css?family=Muli:400,400i,500,700,700i,800');
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

theme/_immunespace.mixins.scss

@@ -0,0 +1,12 @@
+@mixin tablet-up {
+    @media screen and (min-width: 768px) {
+      @content;
+    }
+  }
+
+  @mixin mobile-only {
+    @media screen and (max-width: 767px) {
+      @content;
+    }
+  }
+

theme/_immunespace.responsive.scss

@@ -0,0 +1,49 @@
+// Media Query Generator
+
+@mixin media-query($mq) {
+    $breakpoint-found: false;
+
+    // Loop through the list of breakpoints we’ve provided in our settings file.
+    @each $breakpoint in $breakpoints {
+      // Grab the alias and the condition from their respective locations in
+      // the list.
+      $alias: nth($breakpoint, 1);
+      $condition: nth($breakpoint, 2);
+
+      // If the media query we’ve specified has an alias and a condition...
+      @if $mq == $alias and $condition {
+        // ...tell the mixin that we’ve found it...
+        $breakpoint-found: true;
+
+        // ...and spit it out here.
+        @media #{$condition} {
+          @content;
+        }
+      }
+    }
+
+    // If the user specifies a non-exitent alias, send them a warning.
+    @if $breakpoint-found == false {
+      @warn "Oops! Breakpoint ‘#{$mq}’ does not exist.";
+    }
+  }
+
+  // Add breakpoints
+  $breakpoints: (
+    "mega" "screen and (min-width: 1400px)",
+    "xxl" "screen and (min-width: 1300px)",
+    "xl" "screen and (min-width: 1200px)",
+    "desk" "screen and (min-width: 1024px)",
+    "lg" "screen and (min-width: 920px)",
+    "tab" "screen and (min-width: 768px)",
+    "mobile" "screen and (max-width: 767px)",
+    "video" "screen and (max-height: 900px)",
+    "med" "screen and (min-width: 40em)",
+    "small" "screen and (min-width: 30em)",
+    "tiny" "screen and (max-width: 320px)",
+    "retina"
+      "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)",
+    "ie" "all and(-ms-high-contrast: none), (-ms-high-contrast: active)",
+    "ipad" "screen and (min-device-width : 768px) and (max-device-width : 1024px)"
+  ) !default;
+

theme/_immunespace.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // ImmuneSpace colors
 
 // Main theme colors
@@ -7,9 +8,10 @@ $bright-orange: #ff5b00;
 $white: #FFFFFF;
 $light-gray: #b4bbbf;
 $dark-gray: #1a1a1a;
+$dark-blue: #065c9c;
 
 // Main theme colors
-$highlight-primary: #255c97; // dark blue
+$highlight-primary: $dark-blue; // dark blue
 $highlight-secondary: $bright-orange;
 $primary: $immune-blue;
 $secondary: $pale-blue;
@@ -31,3 +33,46 @@ $pistachio:  #78C646;
 $soft-yellow:  #F4E04E;
 $amber: #D15400;
 $dusty-rose: #CC5874;
+
+
+// Other colors
+$black: #000000;
+$green: #71b300;
+$green-hover: #4c9d45;
+$gray: #344251;
+$light-gray2: #d9e0e2;
+
+
+/* TYPOGRAPHY */
+$muli: "Muli", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$nunito-sans: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serif: "Didot 06 A", "Didot 06 B", "Georgia" Cambria, Times New Roman, Times,
+  serif;
+$serif2: "Didot 06 A", "Didot 06 B", "Georgia", Cambria, Times New Roman, Times,
+  serif;
+$sans-serif: $nunito-sans;
+
+/* TEXT SIZES */
+$size-1: 3rem;
+$size-2: 2.5rem;
+$size-3: 2rem;
+$size-4: 1.5rem;
+$size-5: 1.25rem;
+$size-6: 1rem;
+$size-7: 0.75rem;
+
+/* FONT WEIGHTS */
+$font-weight--light: 300;
+$font-weight--normal: 400;
+$font-weight--medium: 500;
+$font-weight--semibold: 600;
+$font-weight--black: 700;
+$font-weight--bold: 800;
+$font-weight--extrabold: 900;
+
+
+// Data Finder colors
+$pariticipant-color:  $periwinkle; 
+$study-color: $pistachio; 
+$sample-color: $amber; 
+$sample-color-light: color.adjust($sample-color, $lightness: 20%)

theme/_immunespace.typography.scss

@@ -0,0 +1,36 @@
+/*
+  Typography :: Baseline styles */
+
+  @use "./immunespace";
+  p {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+
+  .caps {
+    text-transform: uppercase;
+  }
+
+  a {
+    color: immunespace.$blue;
+    text-decoration: none;
+  }
+
+  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
+    font-family: immunespace.$nunito-sans;
+  }
+
+  h1, .h1 {
+    font-weight: immunespace.$font-weight--black;
+    font-size: 3rem;
+    line-height: 52px;
+  }
+
+  h2, .h2 {
+    font-size: 1.5rem;
+  }
+
+  h3, .h3 {
+    font-size: 1.5rem;
+  }
+

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immunespace/theme",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Theme and styles for ImmuneSpace",
   "files": [
     "dist/"

theme/webpack.config.js

@@ -1,25 +1,41 @@
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require("path");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
     entry: {},
-    mode: 'production',
+    mode: "production",
     plugins: [
         // // add a hash to the filename of our bundles for easy and efficient cache busting.
         // new MiniCssExtractPlugin({
         //     filename: isDevelopment ? '[name].css' : '[name].[hash].css',
         //     chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
         // })
-        
-        // copy over variables and let downstream modules compile 
+
+        // copy over variables and let downstream modules compile
         new CopyWebpackPlugin({
             patterns: [
                 {
                     // copy static scss files into the dist dir to be used by LabKey module apps
-                    from: '_immunespace.scss',
-                    to: ''
-                }
-            ]
+                    from: "_immunespace.scss",
+                    to: "",
+                },
+                {
+                    from: "_immunespace.fonts.scss",
+                    to: "",
+                },
+                {
+                    from: "_immunespace.mixins.scss",
+                    to: "",
+                },
+                {
+                    from: "_immunespace.responsive.scss",
+                    to: "",
+                },
+                {
+                    from: "_immunespace.typography.scss",
+                    to: "",
+                },
+            ],
         }),
-    ]
-};
+    ],
+};