@uqds/pane 0.0.5-alpha.0

package/README.md

@@ -0,0 +1,26 @@
+# `@uqds/pane`
+
+> Pane component
+
+## Usage
+
+### Installation
+
+With Yarn:
+```shell
+yarn add @uqds/pane
+```
+
+With NPM:
+```shell
+npm i @uqds/pane
+```
+
+---
+
+## Dependency graph
+
+```shell
+@uqds/pane
+└─ @uqds/core
+```

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@uqds/pane",
+  "version": "0.0.5-alpha.0",
+  "description": "Pane component",
+  "keywords": [
+    "uqds",
+    "uq",
+    "University of Queensland",
+    "design system",
+    "scss",
+    "sass",
+    "css",
+    "pane"
+  ],
+  "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",
+  "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"
+  },
+  "gitHead": "0d2250c3ff44460d2902ea08102e6423b3fcc3aa"
+}

package/src/scss/_component.scss

@@ -0,0 +1,134 @@
+@use '@uqds/core/src/scss/global' as core;
+@use 'global' as *;
+
+// Panes: Blocks of colour with padding around content.
+//
+// Variants:
+// .uq-pane--shaded - Adds grey background.
+// .uq-pane--white - Adds white background.
+// .uq-pane--outline - Adds thin border on all sides.
+// .uq-pane--ruled - Adds thin top and bottom border.
+// .uq-pane--vertical-spacing - Adds top and bottom margin to offset panes inline with other content.
+// .uq-pane--dark-tint - Adds semi-transparent black background.
+// .uq-pane--has-footer - Minor adjustments to markup allow a shaded footer to be added within pane.
+//
+// .uq-pane-grid--shaded - Adds grey background to all child panes.
+// .uq-pane-grid--white - Adds white background to all child panes.
+// .uq-pane-grid--outline - Adds thin border on all sides to all child panes.
+// .uq-pane-grid--ruled - Adds thin top and bottom border to all child panes.
+// .uq-pane-grid--vertical-spacing - Adds top and bottom margin to all child panes to offset panes inline with other content.
+// .uq-pane-grid--dark-tint - Adds semi-transparent black background  to all child panes.
+
+%pane,
+.uq-pane {
+  padding: core.$space-m; //1.8rem;
+  margin-bottom: core.$space-m; //1.5rem;
+
+  &--shaded {
+    @include pane-shaded;
+  }
+
+  &--white {
+    @include pane-white;
+  }
+
+  &--outline {
+    @include pane-outline;
+  }
+
+  &--ruled {
+    @include pane-ruled;
+  }
+
+  &--vertical-spacing {
+    @include pane-vertical-spacing;
+  }
+
+  &--dark-tint {
+    @include pane-dark-tint;
+  }
+
+  &--has-footer {
+    @include pane-has-footer;
+    &.uq-pane--shaded {
+      .uq-pane__footer {
+        background-color: darken($pane-shaded-bg, 5%);
+      }
+    }
+
+    &.uq-pane--dark-tint {
+      .uq-pane__footer {
+        background-color: core.$uq-black;
+        background-color: rgba(core.$uq-black, 0.3);
+      }
+    }
+  }
+
+  &__title {
+    color: $pane-title-color;
+    font-size: 1.275rem;
+    font-weight: 400;
+
+    // Used for no title pane style
+    &--hidden {
+      display: none;
+    }
+  }
+
+  // if sub-title exists reduce margin to pull it close to title
+  &__title + &__sub-title {
+    margin-top: -(core.$space);
+  }
+}
+
+// Pane grid
+.uq-pane-grid {
+  &.uq-grid {
+    grid-gap: 0;
+  }
+
+  &--shaded {
+    .uq-pane {
+      @include pane-shaded;
+    }
+
+    .uq-pane__footer {
+      background-color: darken($pane-shaded-bg, 5%);
+    }
+  }
+
+  &--white {
+    .uq-pane {
+      @include pane-white;
+    }
+  }
+
+  &--outline {
+    .uq-pane {
+      @include pane-outline;
+    }
+  }
+
+  &--ruled {
+    .uq-pane {
+      @include pane-ruled;
+    }
+  }
+
+  &--vertical-spacing {
+    .uq-pane {
+      @include pane-vertical-spacing;
+    }
+  }
+
+  &--dark-tint {
+    .uq-pane {
+      @include pane-dark-tint;
+    }
+
+    .uq-pane__footer {
+      background-color: core.$uq-black;
+      background-color: rgba(core.$uq-black, .3);
+    }
+  }
+}

package/src/scss/_global.scss

@@ -0,0 +1,51 @@
+@use '@uqds/core/src/scss/_global' as core;
+
+$pane-border: core.$uq-neutral-light60; //eee;
+$pane-shaded-bg: core.$uq-neutral-light80; //f5f5f5;
+$pane-title-color: core.$uq-purple;
+
+@mixin pane-shaded {
+    background: $pane-shaded-bg;
+  }
+  
+  @mixin pane-white {
+    background: core.$uq-white;
+  }
+  
+  @mixin pane-outline {
+    border: 2px solid $pane-border;
+  }
+  
+  @mixin pane-ruled {
+    border-bottom: 2px solid $pane-border;
+    border-top: 2px solid $pane-border;
+  }
+  
+  @mixin pane-vertical-spacing {
+    margin: core.$space-l core.$space-none;
+  }
+  
+  @mixin pane-dark-tint {
+    @extend %light-palette;
+    background-color: core.$uq-black;
+    background-color: rgba(core.$uq-black, .65);
+  
+    .uq-pane__title {
+        @extend %light-palette;
+    }
+  }
+  
+  @mixin pane-has-footer {
+    padding: core.$space-none;
+  
+    .uq-pane {
+        &__content {
+            padding: core.$space-m core.$space-m core.$space core.$space-m; //1.8rem 1.8rem 1rem 1.8rem
+        }
+  
+        &__footer {
+            background-color: $pane-shaded-bg;
+            padding: core.$space-m; //1.8rem;
+        }
+    }
+  }