@uqds/card 0.0.8-alpha.0 → 0.0.13-alpha.0

package/README.md

@@ -7,11 +7,13 @@
 ### Installation
 
 With Yarn:
+
 ```shell
 yarn add @uqds/card
 ```
 
 With NPM:
+
 ```shell
 npm i @uqds/card
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/card",
-  "version": "0.0.8-alpha.0",
+  "version": "0.0.13-alpha.0",
   "description": "Card components",
   "keywords": [
     "uqds",
@@ -40,7 +40,7 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^0.0.8-alpha.0"
+    "@uqds/core": "^1.0.0"
   },
-  "gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
+  "gitHead": "07bdc5a8169d386baae8ea4ffa5b4a75fc7e9ebb"
 }

package/src/scss/_component.scss

@@ -1,5 +1,5 @@
-@use '@uqds/core/src/scss/global' as core;
-@use 'global' as *;
+@use "@uqds/core/src/scss/global" as core;
+@use "global" as *;
 
 // Card Default
 .uq-card {
@@ -11,10 +11,10 @@
   border: 1px solid core.$uq-neutral-light60;
   border-radius: core.$space-xs;
   color: core.$uq-neutral-dark60;
-  line-height: core.$space-m; 
+  line-height: core.$space-l;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  
+
   // Link that wraps the whole card
   &__link {
     position: absolute;
@@ -23,13 +23,15 @@
     bottom: 0;
     left: 0;
     text-indent: -1000%;
-    box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$uq-neutral-dark80, 0.05);
-    transition: all ease .25s;
+    box-shadow: 0 core.$space-xs core.$space-xs
+      rgba(core.$uq-neutral-dark80, 0.05);
+    transition: all ease 0.25s;
     z-index: 10;
 
     &:hover,
     &:focus {
-      box-shadow: 0 core.$space-s core.$space rgba(core.$uq-neutral-dark80, 0.15);
+      box-shadow: 0 core.$space-s core.$space-m
+        rgba(core.$uq-neutral-dark80, 0.15);
     }
   }
 
@@ -62,10 +64,10 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-  } 
+  }
   &__content {
     flex-grow: 1;
-    padding: core.$space-m;
+    padding: core.$space-l;
 
     :last-child .uq-card__title {
       margin-bottom: core.$space-none;
@@ -78,14 +80,14 @@
     }
   }
 
-  &__body {     
+  &__body {
     p:last-child {
       margin-bottom: core.$space-none;
     }
   }
 
   &__actions {
-    padding: core.$space-none core.$space-m core.$space-m;
+    padding: core.$space-none core.$space-l core.$space-l;
 
     p:last-child {
       margin-bottom: core.$space-none;
@@ -107,11 +109,11 @@
       color: core.$uq-purple-light;
       text-transform: uppercase;
       margin: core.$space-none core.$space-none core.$space-s;
-  
+
       @media #{core.$screen-md-up} {
         font-size: core.$font-size;
       }
-  
+
       &--grey {
         font-weight: 400;
         color: core.$uq-neutral-dark60;
@@ -127,12 +129,9 @@
 
 /* Additional style rules */
 .uq-grid {
-
-  // On smaller viewports, Story & Event cards when > 3 renders as lists 
+  // On smaller viewports, Story & Event cards when > 3 renders as lists
   @media #{core.$screen-md-down} {
-
     &__col {
-
       // When there are 3 items
       @include with-count(3) {
         @include card-list-style();
@@ -144,17 +143,15 @@
       }
     }
   }
-  
+
   // Full width cards
   &__col--md-8,
   &__col--xl-12 {
-
     .uq-card {
-
       @media #{core.$screen-md-up} {
         flex-direction: row;
       }
-  
+
       &__image-wrapper {
         min-width: 100%;
         overflow: hidden;
@@ -180,10 +177,10 @@
         }
       }
       &__content {
-        padding: core.$space-m;
+        padding: core.$space-l;
 
         @media #{core.$screen-md-up} {
-          padding: core.$space-xxxl core.$space-xxxl core.$space-m;
+          padding: core.$space-xxxxl core.$space-xxxxl core.$space-l;
         }
       }
       &__body {
@@ -191,12 +188,12 @@
           @include truncate-card-1col-body-text;
         }
       }
-      
+
       &__actions {
-        padding: core.$space-none core.$space-m core.$space-m;
+        padding: core.$space-none core.$space-l core.$space-l;
 
         @media #{core.$screen-md-up} {
-          padding: core.$space-none core.$space-xxxl core.$space-xxxl;
+          padding: core.$space-none core.$space-xxxxl core.$space-xxxxl;
         }
       }
     }

package/src/scss/_global.scss

@@ -1,70 +1,69 @@
-@use '@uqds/core/src/scss/global' as core;
+@use "@uqds/core/src/scss/global" as core;
 
 $card-shaded-bg: core.$uq-neutral-light80;
 
 // Truncate card body text
 @mixin truncate-card-1col-body-text {
-    white-space: normal;
-    overflow: hidden;
-    max-height: 75px;
+  white-space: normal;
+  overflow: hidden;
+  max-height: 75px;
 }
 
 // Find number of child items in a parent container and apply style based on it
 @mixin with-count($n) {
-    @if $n == 1 {
-        &:first-child:nth-last-child(1) {
-            @content;
-        }
+  @if $n == 1 {
+    &:first-child:nth-last-child(1) {
+      @content;
     }
-    @else {
-        &:first-child:nth-last-child(#{$n}),
-        &:first-child:nth-last-child(#{$n}) ~ & {
-            @content;
-        }
+  } @else {
+    &:first-child:nth-last-child(#{$n}),
+    &:first-child:nth-last-child(#{$n}) ~ & {
+      @content;
     }
+  }
 }
 
 // Card list styles for story/event cards when more than 2 in the grid on small viewports.
 @mixin card-list-style() {
-    .uq-card {
+  .uq-card {
+    &--story,
+    &--event {
+      flex-direction: row;
+      padding-bottom: 1rem;
+      border: none;
+      border-bottom: 1px solid core.$uq-neutral-light60;
+      box-shadow: 0 core.$space-xs core.$space-xs
+        rgba(core.$uq-neutral-dark80, 0);
 
-        &--story,
-        &--event {
-        
-            flex-direction: row;
-            padding-bottom: 1rem;
-            border: none;
-            border-bottom: 1px solid core.$uq-neutral-light60;
-            box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$uq-neutral-dark80, 0);
+      &:hover,
+      &:focus {
+        box-shadow: 0 core.$space-s core.$space-s
+          rgba(core.$uq-neutral-dark80, 0.1);
+      }
 
-            &:hover,
-            &:focus {
-                box-shadow: 0 core.$space-s core.$space-s rgba(core.$uq-neutral-dark80, 0.1);
-            }
-
-            .uq-card__image__wrapper {
-                min-width: 98px;
-                min-height: 100%;
-            }
-            .uq-card__image {
-                min-height: 100%;
-                padding-bottom: 0%;
-            }
-            .uq-card__content__wrapper {
-                min-width: 50%;
-            }
-            .uq-card__content {
-                padding: core.$space-none core.$space;
-            }
-            .uq-card__title {
-                margin: core.$space-none core.$space-none core.$space-s;
-            }
-            .uq-card__body {
-                display: none;
-            }
-            .uq-card__actions {
-                padding: core.$space-none core.$space core.$space-none;
-            }
-        }
+      .uq-card__image__wrapper {
+        min-width: 98px;
+        min-height: 100%;
+      }
+      .uq-card__image {
+        min-height: 100%;
+        padding-bottom: 0%;
+      }
+      .uq-card__content__wrapper {
+        min-width: 50%;
+      }
+      .uq-card__content {
+        padding: core.$space-none core.$space-m;
+      }
+      .uq-card__title {
+        margin: core.$space-none core.$space-none core.$space-s;
+      }
+      .uq-card__body {
+        display: none;
+      }
+      .uq-card__actions {
+        padding: core.$space-none core.$space-m core.$space-none;
+      }
     }
-}
+  }
+}

package/src/scss/main.scss

@@ -1 +1 @@
-@use 'component';
+@use "component";