@uqds/card 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/css/main.css

@@ -1 +1 @@
-:root{--card-title-font-size: 24px}@media(max-width: 37.4375rem){:root{--card-title-font-size: 22px}}.uq-card,.uq-story-card{position:relative;display:flex;flex-direction:column;border-radius:4px;border:1px solid #dcdcdd;background:#fff}.uq-card:has(a:focus-visible),.uq-story-card:has(a:focus-visible){outline:4px solid #0d6dcd;outline-offset:-1px}.uq-card:hover,.uq-story-card:hover{background:#f3f3f4}.uq-card:hover .uq-card__content::after,.uq-story-card:hover .uq-card__content::after{left:8px}.uq-card__content{flex:1;display:flex;flex-direction:column;padding:1.5rem}.uq-card__content::after{content:"";height:24px;width:24px;margin-top:auto;padding-top:1.5rem;position:relative;box-sizing:content-box;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 12h15M14 18l6-6-6-6' stroke='%2351247a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-position:right bottom;background-size:24px;background-repeat:no-repeat;transition:left 200ms ease-in-out;left:0}.uq-story-card__title,.uq-card__title{margin:0;color:#19151c;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:var(--card-title-font-size)}.uq-story-card__title a,.uq-card__title a{color:#19151c}.uq-story-card__title a::after,.uq-card__title a::after{content:"";position:absolute;inset:0}.uq-story-card__title a:focus,.uq-card__title a:focus{outline:none}.uq-card__description,.uq-story-card__description{margin-top:.5rem}.uq-card__image,.uq-story-card__image{aspect-ratio:1.5/1;position:relative;flex-shrink:0}.uq-card__image img,.uq-story-card__image img,.uq-card__image picture,.uq-story-card__image picture{width:100%;height:100%;inset:0;position:absolute;object-fit:cover}.uq-card__icon{margin-bottom:.5rem}.uq-card__icon .uq-icon::before{height:56px;width:56px}.uq-card--text .uq-card__image,.uq-card--text .uq-story-card__image,.uq-card--text .uq-card__icon{display:none}.uq-card--image .uq-card__icon{display:none}.uq-card--icon .uq-card__image,.uq-card--icon .uq-story-card__image,.uq-card--icon-nav .uq-card__image,.uq-card--icon-nav .uq-story-card__image{display:none}@media(max-width: 37.4375rem){.uq-card--icon-nav .uq-card__content{display:flex;align-items:center;flex-direction:row}.uq-card--icon-nav .uq-card__content::after{padding-top:0;margin-top:0;margin-left:auto}.uq-card--icon-nav .uq-card__description,.uq-card--icon-nav .uq-story-card__description{display:none}.uq-card--icon-nav .uq-card__icon{margin:0 1rem 0 0}.uq-card--icon-nav .uq-card__icon .uq-icon::before{height:40px;width:40px}}@media(max-width: 37.4375rem){.uq-story-card{border-radius:0;border-inline-width:0;border-top-width:0;display:flex;flex-direction:row-reverse;align-items:center;gap:1rem;padding-bottom:1rem;background-color:rgba(0,0,0,0)}.uq-story-card:hover{background-color:rgba(0,0,0,0)}}.uq-story-card__content{flex:1;position:relative;display:flex;flex-direction:column;padding:1.5rem}@media(max-width: 37.4375rem){.uq-story-card__content{padding:0}}@media(max-width: 37.4375rem){.uq-story-card__title{-webkit-line-clamp:3}}@media(max-width: 37.4375rem){.uq-story-card__description{display:none}}.uq-story-card__top-label{margin-bottom:.25rem;color:#757377;font-weight:500}@media(max-width: 37.4375rem){.uq-story-card__top-label{margin-bottom:0}}.uq-story-card__bottom-label{padding-top:1.5rem;margin-top:auto}@media(max-width: 37.4375rem){.uq-story-card__bottom-label{margin-top:.5rem}}@media(max-width: 37.4375rem){.uq-story-card__image{width:120px;height:100px;aspect-ratio:unset;flex-shrink:0}}.uq-story-card--event .uq-story-card__top-label{color:#51247a}.uq-story-card--event .uq-story-card__description,.uq-story-card--story .uq-story-card__description{display:none}
+:root{--card-title-font-size: 24px}@media(max-width: 37.4375rem){:root{--card-title-font-size: 22px}}.uq-card,.uq-story-card{position:relative;display:flex;flex-direction:column;border-radius:4px;border:1px solid #dcdcdd;background:#fff}.uq-card:has(a:focus-visible),.uq-story-card:has(a:focus-visible){outline:4px solid #0d6dcd;outline-offset:-1px}.uq-card:hover,.uq-story-card:hover{background:#f3f3f4}.uq-card:hover .uq-card__content::after,.uq-story-card:hover .uq-card__content::after{left:8px}.uq-card__content{flex:1;display:flex;flex-direction:column;padding:1.5rem}.uq-card__content::after{content:"";height:24px;width:24px;margin-top:auto;padding-top:1.5rem;position:relative;box-sizing:content-box;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 12h15M14 18l6-6-6-6' stroke='%2351247a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-position:right bottom;background-size:24px;background-repeat:no-repeat;transition:left 200ms ease-in-out;left:0}.uq-story-card__title,.uq-card__title{margin:0;color:#19151c;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:var(--card-title-font-size)}.uq-story-card__title a,.uq-card__title a{color:#19151c}.uq-story-card__title a::after,.uq-card__title a::after{content:"";position:absolute;inset:0}.uq-story-card__title a:focus,.uq-card__title a:focus{outline:none}.uq-story-card__title a:hover,.uq-card__title a:hover{background-color:rgba(0,0,0,0)}.uq-card__description,.uq-story-card__description{margin-top:.5rem}.uq-card__image,.uq-story-card__image{aspect-ratio:1.5/1;position:relative;flex-shrink:0}.uq-card__image img,.uq-story-card__image img,.uq-card__image picture,.uq-story-card__image picture{width:100%;height:100%;inset:0;position:absolute;object-fit:cover}.uq-card__icon{margin-bottom:.5rem}.uq-card__icon .uq-icon::before{height:56px;width:56px}.uq-card--text .uq-card__image,.uq-card--text .uq-story-card__image,.uq-card--text .uq-card__icon{display:none}.uq-card--image .uq-card__icon{display:none}.uq-card--icon .uq-card__image,.uq-card--icon .uq-story-card__image,.uq-card--icon-nav .uq-card__image,.uq-card--icon-nav .uq-story-card__image{display:none}@media(max-width: 37.4375rem){.uq-card--icon-nav .uq-card__content{display:flex;align-items:center;flex-direction:row}.uq-card--icon-nav .uq-card__content::after{padding-top:0;margin-top:0;margin-left:auto}.uq-card--icon-nav .uq-card__description,.uq-card--icon-nav .uq-story-card__description{display:none}.uq-card--icon-nav .uq-card__icon{margin:0 1rem 0 0}.uq-card--icon-nav .uq-card__icon .uq-icon::before{height:40px;width:40px}}@media(max-width: 37.4375rem){.uq-story-card{border-radius:0;border-inline-width:0;border-top-width:0;display:flex;flex-direction:row-reverse;align-items:center;gap:1rem;padding-bottom:1rem;background-color:rgba(0,0,0,0)}.uq-story-card:hover{background-color:rgba(0,0,0,0)}}.uq-story-card__content{flex:1;position:relative;display:flex;flex-direction:column;padding:1.5rem}@media(max-width: 37.4375rem){.uq-story-card__content{padding:0}}@media(max-width: 37.4375rem){.uq-story-card__title{-webkit-line-clamp:3}}@media(max-width: 37.4375rem){.uq-story-card__description{display:none}}.uq-story-card__top-label{margin-bottom:.25rem;color:#757377;font-weight:500}@media(max-width: 37.4375rem){.uq-story-card__top-label{margin-bottom:0}}.uq-story-card__bottom-label{padding-top:1.5rem;margin-top:auto}@media(max-width: 37.4375rem){.uq-story-card__bottom-label{margin-top:.5rem}}@media(max-width: 37.4375rem){.uq-story-card__image{width:120px;height:100px;aspect-ratio:unset;flex-shrink:0}}.uq-story-card--event .uq-story-card__top-label{color:#51247a}.uq-story-card--event .uq-story-card__description,.uq-story-card--story .uq-story-card__description{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/card",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Card components",
   "keywords": [
     "uqds",
@@ -40,8 +40,8 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^1.2.0-alpha.0",
-    "@uqds/icon": "^0.0.15-alpha.4"
+    "@uqds/core": "^1.2.0-alpha.1",
+    "@uqds/icon": "^0.0.15-alpha.5"
   },
-  "gitHead": "0a1a6e48689f330d9cb6ac9d0d47b8f8a4edf2ff"
+  "gitHead": "3b41c2842c6e11853d433f37392e5dae72566555"
 }

package/src/scss/_card.scss

@@ -71,6 +71,10 @@
     &:focus {
       outline: none;
     }
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 }
 

package/src/scss/_component.scss

@@ -0,0 +1,225 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "global" as *;
+
+// Card Default
+.uq-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: core.$font-body;
+  font-size: core.$font-size-m;
+  font-weight: core.$font-weight-normal;
+  line-height: core.$line-height;
+  height: 100%;
+  background-color: core.$white;
+  border: 1px solid core.$grey-200;
+  border-radius: core.$space-xs;
+  color: core.$grey-900;
+  line-height: core.$space-l;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  // Link that wraps the whole card
+  &__link {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-indent: -1000%;
+    box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$grey-900, 0.05);
+    transition: all ease 0.25s;
+    z-index: 10;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      box-shadow: 0 core.$space-s core.$space-m rgba(core.$grey-900, 0.15);
+    }
+  }
+
+  &__image-wrapper {
+    max-height: 190px;
+    overflow: hidden;
+
+    @media #{core.$screen-md-up} {
+      max-height: 15rem;
+    }
+  }
+  &__image {
+    position: relative;
+    padding-bottom: 70%;
+    overflow: hidden;
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      transform: translate(-50%, -50%);
+      -o-object-fit: cover;
+      object-fit: cover;
+      z-index: 0;
+    }
+  }
+
+  &__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+  &__content {
+    flex-grow: 1;
+    padding: core.$space-l;
+
+    :last-child .uq-card__title {
+      margin-bottom: core.$space-none;
+    }
+  }
+
+  &__header {
+    :last-child {
+      margin: core.$space-none core.$space-none core.$space-s;
+    }
+  }
+
+  &__body {
+    p {
+      margin-top: 0;
+    }
+    p:last-child {
+      margin-bottom: core.$space-none;
+    }
+  }
+
+  &__actions {
+    padding: core.$space-none core.$space-l core.$space-l;
+
+    p:last-child {
+      margin-bottom: core.$space-none;
+    }
+  }
+
+  &__title {
+    font-size: core.$font-size-xl;
+    color: core.$grey-900;
+    margin: core.$space-none core.$space-none core.$space-s;
+
+    @media #{core.$screen-md-up} {
+      font-size: core.$font-size-xxl;
+    }
+
+    &-super {
+      font-size: core.$font-size-s;
+      font-weight: 500;
+      color: core.$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-m;
+      }
+
+      &--grey {
+        font-weight: 400;
+        color: core.$grey-800;
+      }
+    }
+  }
+
+  // Shaded
+  &--shaded {
+    background-color: core.$grey-50;
+  }
+}
+
+/* Additional style rules */
+.uq-grid {
+  // 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();
+      }
+
+      // When there are 4 items
+      @include with-count(4) {
+        @include card-list-style();
+      }
+    }
+  }
+
+  // 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;
+
+        @media #{core.$screen-md-up} {
+          min-width: 50%;
+          max-height: 100%;
+        }
+      }
+      &__image {
+        padding-bottom: 70%;
+
+        @media #{core.$screen-md-up} {
+          min-height: 100%;
+          padding-bottom: 0%;
+        }
+      }
+      &__content-wrapper {
+        min-width: 100%;
+
+        @media #{core.$screen-md-up} {
+          min-width: 50%;
+        }
+      }
+      &__content {
+        padding: core.$space-l;
+
+        @media #{core.$screen-md-up} {
+          padding: core.$space-xxxxl core.$space-xxxxl core.$space-l;
+        }
+      }
+      &__body {
+        p {
+          @include truncate-card-1col-body-text;
+        }
+      }
+
+      &__actions {
+        padding: core.$space-none core.$space-l core.$space-l;
+
+        @media #{core.$screen-md-up} {
+          padding: core.$space-none core.$space-xxxxl core.$space-xxxxl;
+        }
+      }
+    }
+  }
+}
+
+// Set height of card to not equalise
+.height-non-equalised .uq-card {
+  height: auto;
+}
+
+// This should be replaced with a component specfic class or removed and documented as a body package dependancy for usage with cards.
+.text--link {
+  color: core.$purple-500;
+  text-decoration: none;
+  transition: 0.2s color;
+
+  &:hover {
+    background-color: core.$purple-500;
+    color: core.$white;
+    text-decoration: underline;
+  }
+}