@uqds/grid-menu 0.0.5-alpha.0

package/README.md

@@ -0,0 +1,28 @@
+# `@uqds/grid-menu`
+
+> Grid menu component
+
+## Usage
+
+### Installation
+
+With Yarn:
+```shell
+yarn add @uqds/grid-menu
+```
+
+With NPM:
+```shell
+npm i @uqds/grid-menu
+```
+
+---
+
+## Dependency graph
+
+```shell
+@uqds/grid-menu
+├─ @uqds/core
+└─ @uqds/icon
+   └─ @uqds/core
+```

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@uqds/grid-menu",
+  "version": "0.0.5-alpha.0",
+  "description": "Grid menu components",
+  "keywords": [
+    "uqds",
+    "uq",
+    "University of Queensland",
+    "design system",
+    "scss",
+    "sass",
+    "css",
+    "grid menu"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "University of Queensland",
+    "email": "webservices@uq.edu.au",
+    "url": "https://uq.edu.au"
+  },
+  "homepage": "https://github.com/uq-its-ss/design-system#readme",
+  "license": "ISC",
+  "main": "lib/grid-menu.js",
+  "directories": {
+    "lib": "src"
+  },
+  "files": [
+    "src/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uq-its-ss/design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/uq-its-ss/design-system/issues"
+  },
+  "dependencies": {
+    "@uqds/core": "^0.0.5-alpha.0",
+    "@uqds/icon": "^0.0.5-alpha.0"
+  },
+  "gitHead": "0d2250c3ff44460d2902ea08102e6423b3fcc3aa"
+}

package/src/scss/_component.scss

@@ -0,0 +1,173 @@
+@use '@uqds/core/src/scss/global' as core;
+@use "@uqds/icon/src/scss/global" as icon-constants;
+@use 'global' as *;
+
+.uq-grid-menu {
+  box-sizing: border-box;
+  display: grid;
+  list-style: none;
+  gap: core.$space-none;
+  margin: 0;
+  padding: 0;
+  align-items: stretch;
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  &__item {
+    margin-bottom: core.$space-none;
+  }
+
+  // Behave as 3 column layout by default.
+  @include grid-menu-3-column;
+  
+  &--2-column {
+    @include grid-menu-2-column;
+  }
+
+  &--3-column {
+    @include grid-menu-3-column;
+  }
+
+  &--4-column {
+    @include grid-menu-4-column;
+  }
+
+  &__link {
+    border-bottom: 1px solid $linked-list-border;
+    color: $linked-list-color;
+    display: block;
+    font-size: 1.375rem;
+    font-weight: 400;
+    line-height: normal;
+    padding: core.$space core.$space-l core.$space core.$space;
+    position: relative;
+    height: 100%;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 1.5rem;
+      top: 1.25rem;
+      width: 2rem;
+      height: 2rem;
+      transition: ease 0.3s;
+      margin-top: -0.2rem;
+    }
+
+    &:hover {
+      background-color: core.$link;
+      color: $linked-list-color-hover;
+      text-decoration: none;
+
+      &::after {
+        content: '';
+        background-image: url(icon-constants.get-icon('standard--arrow-right-1', core.$uq-white));
+        background-repeat: no-repeat;
+        background-size: 1.4rem 1.4rem;
+        right: 0;
+      }
+
+      .uq-grid-menu__link,
+      .uq-grid-menu__title,
+      .uq-grid-menu__description {
+        color: $linked-list-color-hover;
+        text-decoration: none;
+      }
+
+      .uq-grid-menu__icon {
+        &::before {
+          filter: icon-constants.$icon-light-filter;
+        }
+      }
+    }
+  }
+
+  &__title {
+    font-size: 1.375rem;
+    font-weight: 400;
+  }
+
+  &__description {
+    color: $linked-list-desc;
+    display: block;
+    font-size: .8rem;
+    font-weight: 300;
+    line-height: normal;
+    margin-top: core.$space-xs;
+  }
+
+  &__icon {
+    margin-top: -0.3rem;
+    margin-right: core.$space-s;
+    transition: filter 0.2s;
+  }
+
+  // Dark text variant.
+  &--dark-text {
+    .uq-grid-menu__link {
+      color: core.$dark-palette-color;
+    }
+
+    .uq-grid-menu__icon {
+      &::before {
+        filter: icon-constants.$icon-text-filter;
+      }
+    }
+  }
+
+  @media only screen and #{core.$screen-md-up} {
+    gap: core.$space;
+  }
+}
+
+// Palettes applied to section wrapping grid-menu.
+.light-palette {
+  .uq-grid-menu {
+    &__link,
+    &__title,
+    &__description {
+      @extend %light-palette;
+
+      &:hover {
+        background-color: core.$light-palette-link-color;
+        color: core.$link;
+
+        .uq-grid-menu__description {
+          background-color: core.$light-palette-link-color;
+          color: core.$link;
+        }
+      }
+    }
+  }
+}
+
+.dark-palette {
+  .uq-grid-menu {
+    &__link,
+    &__title,
+    &__description {
+      @extend %dark-palette;
+
+      &:hover {
+        background-color: core.$link;
+        color: core.$uq-white;
+
+        .uq-grid-menu__description {
+          background-color: core.$link;
+          color: core.$uq-white;
+        }
+      }
+    }
+  }
+}
+
+// Grid menu inside a section with background image.
+.section--background-image {
+  .uq-grid-menu {
+    &__link {
+      border-color: rgba(core.$uq-white, .4);
+    }
+  }
+}

package/src/scss/_global.scss

@@ -0,0 +1,34 @@
+// Variables, functions, and mixins
+@use '@uqds/core/src/scss/global' as core;
+
+$linked-list-color: core.$link;
+$linked-list-color-hover: core.$uq-white;
+$linked-list-desc: core.$uq-neutral-dark80;
+$linked-list-border: core.$uq-neutral-light60;
+
+// Two column layout.
+@mixin grid-menu-2-column {
+  @media only screen and #{core.$screen-md-up} {
+    grid: auto-flow / repeat(2, 1fr);
+  }
+}
+
+// Three column layout.
+@mixin grid-menu-3-column {
+  @media only screen and #{core.$screen-md-up} {
+    grid: auto-flow / repeat(2, 1fr);
+  }
+  @media only screen and #{core.$screen-xl-up} {
+    grid: auto-flow / repeat(3, 1fr);
+  }
+}
+
+// Four column layout.
+@mixin grid-menu-4-column {
+  @media only screen and #{core.$screen-md-up} {
+    grid: auto-flow / repeat(2, 1fr);
+  }
+  @media only screen and #{core.$screen-xl-up} {
+    grid: auto-flow / repeat(4, 1fr);
+  }
+}