@uqds/profile 1.0.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -0
- package/dist/css/main.css +1 -0
- package/package.json +51 -0
- package/src/scss/_component.scss +68 -0
- package/src/scss/_global.scss +3 -0
- package/src/scss/main.scss +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# `@uqds/profile`
|
|
2
|
+
|
|
3
|
+
> Profile component
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
With Yarn:
|
|
10
|
+
|
|
11
|
+
```shell
|
|
12
|
+
yarn add @uqds/profile
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
With NPM:
|
|
16
|
+
|
|
17
|
+
```shell
|
|
18
|
+
npm i @uqds/profile
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Dependency graph
|
|
24
|
+
|
|
25
|
+
```shell
|
|
26
|
+
@uqds/profile
|
|
27
|
+
└─ @uqds/core
|
|
28
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.uq-profile{display:flex;flex-direction:row;gap:1.5rem}.uq-profile__content{flex-grow:1;display:flex;flex-direction:column;gap:1rem}.uq-profile__content :first-child{margin-top:0}.uq-profile__content :last-child{margin-bottom:0}.uq-profile__title{font-size:1.5rem;font-weight:500;margin:0}.uq-profile__image{order:-1}.uq-staff-listing{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2rem}.generic-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(317px, 1fr));gap:1.5rem}@media(min-width: 64rem){.generic-grid{gap:2rem}}.generic-grid--2x{grid-template-columns:repeat(auto-fit, minmax(317px, 1fr 1fr))}@media(min-width: 666px){.generic-grid--2x{grid-template-columns:1fr 1fr}}.generic-grid>*{min-width:317px}
|
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uqds/profile",
|
|
3
|
+
"version": "1.0.1-alpha.0",
|
|
4
|
+
"description": "The profile component package",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"uqds",
|
|
7
|
+
"uq",
|
|
8
|
+
"University of Queensland",
|
|
9
|
+
"design system",
|
|
10
|
+
"scss",
|
|
11
|
+
"sass",
|
|
12
|
+
"css",
|
|
13
|
+
"profile"
|
|
14
|
+
],
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"access": "public"
|
|
17
|
+
},
|
|
18
|
+
"author": {
|
|
19
|
+
"name": "University of Queensland",
|
|
20
|
+
"email": "webservices@uq.edu.au",
|
|
21
|
+
"url": "https://uq.edu.au"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/uq-its-ss/design-system#readme",
|
|
24
|
+
"license": "ISC",
|
|
25
|
+
"directories": {
|
|
26
|
+
"lib": "src"
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"src/*",
|
|
30
|
+
"dist/*"
|
|
31
|
+
],
|
|
32
|
+
"exports": {
|
|
33
|
+
"./src/scss/*": "./src/scss/*"
|
|
34
|
+
},
|
|
35
|
+
"style": "dist/css/main.css",
|
|
36
|
+
"scripts": {
|
|
37
|
+
"prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
|
|
38
|
+
},
|
|
39
|
+
"repository": {
|
|
40
|
+
"type": "git",
|
|
41
|
+
"url": "git+https://github.com/uq-its-ss/design-system.git"
|
|
42
|
+
},
|
|
43
|
+
"bugs": {
|
|
44
|
+
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@uqds/avatar": "^1.0.1-alpha.0",
|
|
48
|
+
"@uqds/core": "^5.0.0"
|
|
49
|
+
},
|
|
50
|
+
"gitHead": "742d0d4b3712bfc839aca8cc3d5e11ea0deef78b"
|
|
51
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
@use "@uqds/core/src/scss/global" as core;
|
|
2
|
+
@use "global" as *;
|
|
3
|
+
|
|
4
|
+
.uq-profile {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: row;
|
|
7
|
+
gap: core.$space-l;
|
|
8
|
+
}
|
|
9
|
+
.uq-profile__content {
|
|
10
|
+
flex-grow: 1;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: core.$space-m;
|
|
14
|
+
|
|
15
|
+
:first-child {
|
|
16
|
+
margin-top: core.$space-none;
|
|
17
|
+
}
|
|
18
|
+
:last-child {
|
|
19
|
+
margin-bottom: core.$space-none;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
.uq-profile__title {
|
|
23
|
+
font-size: core.$font-size-xxl;
|
|
24
|
+
font-weight: core.$font-weight-medium;
|
|
25
|
+
margin: core.$space-none;
|
|
26
|
+
}
|
|
27
|
+
.uq-profile__image {
|
|
28
|
+
order: -1;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.uq-staff-listing {
|
|
32
|
+
list-style: none;
|
|
33
|
+
padding: 0;
|
|
34
|
+
margin: 0;
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
gap: 2rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.generic-grid {
|
|
41
|
+
/* 1. Establish the container as a CSS Grid */
|
|
42
|
+
display: grid;
|
|
43
|
+
|
|
44
|
+
/* 2. Define the minimum width for each column and the auto-responsive behavior */
|
|
45
|
+
grid-template-columns: repeat(auto-fit, minmax(317px, 1fr));
|
|
46
|
+
|
|
47
|
+
/* Optional: Add spacing between grid items */
|
|
48
|
+
gap: core.$space-l;
|
|
49
|
+
}
|
|
50
|
+
@media #{core.$screen-lg-up} {
|
|
51
|
+
.generic-grid {
|
|
52
|
+
gap: core.$space-xl;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
.generic-grid--2x {
|
|
56
|
+
grid-template-columns: repeat(auto-fit, minmax(317px, 1fr 1fr));
|
|
57
|
+
}
|
|
58
|
+
@media (min-width: 666px) {
|
|
59
|
+
.generic-grid--2x {
|
|
60
|
+
/* Explicitly set to 2 columns when there's enough room */
|
|
61
|
+
grid-template-columns: 1fr 1fr;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.generic-grid > * {
|
|
66
|
+
/* Ensure the item doesn't shrink smaller than the min width (317px) defined in the grid-template-columns */
|
|
67
|
+
min-width: 317px;
|
|
68
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@use "component";
|