Merge pull request #64 from nih-sparc/add-missing-style-classes

Add missing style classes
nih-sparc · Dec 26, 2021 · 0dcfdbb · 0dcfdbb
2 parents 589d7d6 + 4a1a8d1
commit 0dcfdbb
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nih-sparc/sparc-design-system-components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/src/assets/_base.scss b/src/assets/_base.scss
@@ -1,95 +1,209 @@
 @import './_variables';
 
 body {
-  background-color: #F7FAFF;
-  font-family: $font-family;
-  line-height: 1.5rem;
-  margin: 0;
+  font-family:$font-family;
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$grey;
+  margin:0;
 }
 
-h1 {
-  font-size: 2em;
-  margin: 0;
-  line-height: 2.75rem;
-  padding: 0;
+.heading1 {
+  font-size:2em;
+  font-weight:500;
+  line-height:2.75rem;
+  color:$grey;
 }
 
-h2 {
-  font-size: 1.5em;
-  line-height: 2.25rem;
-  margin: 0 0 1rem;
-  padding: 0;
+.heading2 {
+  font-size:1.5em;
+  font-weight:500;
+  line-height:2.25rem;
+  color:$grey;
 }
 
-h3, h4 {
-  font-size: 1em;
-  line-height: 1.875rem;
-  margin: 0 0 0.5rem;
-  padding: 0;
+.heading3 {
+  font-size:1em;
+  font-weight:500;
+  line-height:1.875rem;
+  color:$grey;
 }
 
-h5, h6 {
-  font-size: 1em;
-  font-weight: normal;
-  line-height: 1.75rem;
-  margin: 0 0 0.5rem;
-  padding: 0;
+.nav1 {
+  font-size:1em;
+  font-weight:500;
+  line-height:2rem;
+  color:$darkBlue;
 }
 
-a {
-  color: $app-primary-color;
-  &:not(.underline) {
-    text-decoration: none;
-  }
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
+.nav2 {
+  font-size:.875em;
+  font-weight:500;
+  line-height:2rem;
+  color:$darkBlue;
 }
 
-p {
-  margin: 0 0 1rem;
+.nav3 {
+  font-size:.875em;
+  font-weight:500;
+  line-height:16px;
+  color:$darkBlue;
 }
 
-hr {
-  margin: 0 0 1rem;
+.nav4 {
+  font-size:.875em;
+  font-weight:500;
+  line-height:1rem;
+  color:$darkBlue;
 }
 
-input {
-  color: $input-text;
-  font-family: $font-family;
-  font-size: inherit;
+.nav5 {
+  font-size:.75em;;
+  font-weight:400;
+  line-height:1.5rem;
+  color:$cochlear;
 }
 
-.btn-link {
-  display: inline-block;
-  text-decoration: none;;
+.nav6 {
+  font-size:.75em;;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$darkBlue;
 }
 
-.nav1 {
-  font-size:16px;
-  line-height:32px;
+.body1 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$grey;
+}
+
+.body2 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$cochlear;
+}
+
+.body4 {
+  font-size:.875em;
+  line-height:1.25rem;
+  font-weight:400;
+  color:$lightGrey;
+}
+
+.label1 {
+  font-size:.875em;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$grey;
+}
+
+.label2 {
+  font-size:.875em;
+  line-height:1.5rem;
   font-weight:500;
-  color: $darkBlue;
+  color:$grey;
 }
 
-.nav2 {
-  font-size:14px;
-  line-height:32px;
+.label3 {
+  font-size:.875em;
+  line-height:1.5rem;
   font-weight:500;
-  color: $darkBlue;
+  color:$darkBlue;
 }
 
-.nav5 {
-  font-size:12px;
-  line-height:24px;
+.label4 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:600;
+  color:$grey;
+}
+
+.tab1 {
+  font-size:1.125em;;
+  line-height:1.5rem;
+  font-weight:500;
+  color:$purple;
+}
+
+.tab2 {
+  font-size:1.125em;;
+  line-height:1.5rem;
   font-weight:400;
-  color: $cochlear;
+  color:$grey;
 }
 
-.nav6 {
-  font-size:12px;
-  line-height:24px;
+.tab3 {
+  font-size:1.125em;;
+  line-height:1.5rem;
+  font-weight:500;
+  color:$cochlear;
+  background-color:$darkBlue;
+}
+
+.tab4 {
+  font-size:1.125em;;
+  line-height:1.5rem;
   font-weight:400;
-  color: $darkBlue;
+  color:$cochlear;
+  background-color:$darkBlue;
+}
+
+.tab5 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:500;
+  color:$purple;
+}
+
+.link1 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:500;
+  color:$purple;
+}
+
+.link1:hover {
+  text-decoration:underline;
+}
+
+.highlighted {
+  background-color:#D8D8D8;
+}
+
+.link2 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$purple;
+}
+
+.link2:hover {
+  text-decoration:underline;
+}
+
+.link3 {
+  font-size:1em;
+  line-height:1.5rem;
+  font-weight:400;
+  color:$grey;
+}
+
+.link3:hover {
+  text-decoration:underline;
+}
+
+.link4 {
+  font-size:1.5em;
+  line-height:2rem;
+  font-weight:400;
+  color:$cochlear;
+  text-decoration:underline;
+}
+
+.link4:hover {
+  color:$lineColor1;
+  text-decoration:underline;
 }
diff --git a/src/assets/components/_table.scss b/src/assets/components/_table.scss
@@ -18,6 +18,9 @@
     padding-right: 1rem;
     word-break: normal
   }
+  a {
+    color: $purple;
+  }
 }
 
 .table-wrap {

diff --git a/src/components/DropdownMultiselect/src/DropdownLabel.vue b/src/components/DropdownMultiselect/src/DropdownLabel.vue
@@ -98,6 +98,7 @@ h2 {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0;
+  margin-top: 0;
   padding: 0.5rem 1rem;
   font-weight: 500;
   align-items: center;

diff --git a/src/components/ListCard/src/ListCardItem.vue b/src/components/ListCard/src/ListCardItem.vue
@@ -9,7 +9,7 @@
       </el-col>
       <el-col :xs="image === undefined ? 24 : 20" :sm="image === undefined ? 24 : 21" :md="image === undefined ? 24 : 22" :lg="image === undefined ? 24 : 22">
         <div class="list-card-content">
-          <h3>
+          <h3 class="mt-0">
             <a
               :href="url"
               :target="openInNewTab ? '_self' : '_blank'"

diff --git a/src/components/MultiSelect/src/MultiSelect.vue b/src/components/MultiSelect/src/MultiSelect.vue
@@ -344,11 +344,11 @@ export default {
   color: $mediumGrey;
   position: absolute;
   z-index: 1;
-  padding-left: .938rem;
-  padding-top: .3rem;
+  padding-left: 1rem;
+  padding-top: .5rem;
   margin-bottom: 0;
   margin-right: 2rem;
-  min-width: 8.48rem;
+  white-space: nowrap;
   pointer-events: none;
   display: inline-block;
   svg {
@@ -358,6 +358,7 @@ export default {
   h3 {
     display: inline-block;
     font-size: 1.25em;
+    margin: 0;
     font-weight: normal;
   }
 }

diff --git a/src/stories/largeModal/largeModal.stories.js b/src/stories/largeModal/largeModal.stories.js
@@ -20,7 +20,7 @@ export const Primary = () => {
           @close-download-dialog="dialogVisible = false"
         >
           <div class="content" slot="optionalContent">
-            <h1>Direct download</h1>
+            <h1 class="mt-0">Direct download</h1>
             <div>
               <p>You can download the raw files and metadata directly to your computer as a zip archive free of charge.</p>
               <p class="download-container__download-dataset-size">
@@ -30,7 +30,7 @@ export const Primary = () => {
             </div>
           </div>
           <div class="content" slot="mainContent">
-            <h1>Download from AWS</h1>
+            <h1 class="mt-0">Download from AWS</h1>
             <p>
               Raw files and metadata are stored in an AWS S3 Requester Pays bucket.
               You can learn more about downloading data from AWS on our