Skip to content

Commit e33d690

Browse files
jabbettjabbett
committed
Merge branch 'release/0.14.2'
2 parents e99d6f6 + 0f4d700 commit e33d690

19 files changed

+1615
-135
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@sharpen-com/kezuri",
33
"description": "The Sharpen Design System",
44
"license": "MIT",
5-
"version": "0.14.1",
5+
"version": "0.14.2",
66
"main": "dist/index.cjs.js",
77
"module": "dist/index.js",
88
"es2015": "dist/esm/index.mjs",

‎src/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ <h1 class="sharpen-heading-2xl">Sharpen User Experience Prototypes Library</h1>
3434
</thead>
3535
<tbody>
3636
<tr>
37-
<td><a href="enterprise-layout/">Enterprise Layout</a></td>
38-
<td>June 2024</td>
37+
<td><a href="enterprise/">Enterprise Management</a></td>
38+
<td>July 2024</td>
3939
</tr>
4040
<tr>
4141
<td><a href="milestones/">1-Device: Milestones</a></td>

‎src/index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@
2222
@import "scss/form/form";
2323
@import "scss/collection/collection";
2424
@import "scss/images/images";
25-
@import "scss/pagination/pagination";
25+
@import "scss/pagination/pagination";
26+
@import "scss/tabs/tabs";

‎src/prototypes/enterprise/district_administrators.html

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr" lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
6+
<title>Sharpen Prototype: Enterprise Layout</title>
7+
<link rel="stylesheet" href="../build/kezuri.css" />
8+
<script type="module" src="../build/kezuri.esm.js"></script>
9+
<script nomodule src="../build/kezuri.js"></script>
10+
11+
<link rel="stylesheet" href="enterprise-layout.css" />
12+
</head>
13+
<body>
14+
15+
<div class="sharpen-enterprise-container">
16+
<div class="sharpen-enterprise-navigation">
17+
<a class="brand" href="#"><img src="../build/assets/images/brand/sharpen_logo_ivory.png" /></a>
18+
19+
<h1 class="district sharpen-heading-sm">Public Schools of Brookline</h1>
20+
21+
<nav class="sharpen-mb-md">
22+
<sharpen-nav-link selected icon="near_me" name="District" href="district_show.html"></sharpen-nav-link>
23+
<sharpen-nav-link icon="supervisor_account" name="Staff" href="staff.html"></sharpen-nav-link>
24+
<sharpen-nav-link icon="face" name="Students" href="students.html"></sharpen-nav-link>
25+
<sharpen-nav-link icon="school" name="Schools" href="schools.html"></sharpen-nav-link>
26+
</nav>
27+
28+
<nav class="support-links">
29+
<sharpen-nav-link icon="account_box" name="Dante Cardigan" href="javascript:void();"></sharpen-nav-link>
30+
<sharpen-nav-link icon="help" name="Support" href="javascript:void();"></sharpen-nav-link>
31+
<sharpen-nav-link icon="logout" name="Log Out" href="javascript:void();"></sharpen-nav-link>
32+
</nav>
33+
34+
</div>
35+
<main>
36+
37+
<h1 class="sharpen-heading-2xl">
38+
District &rsaquo; Public Schools of Brookline
39+
</h1>
40+
41+
42+
<ul class="sharpen-tabs sharpen-mb-lg">
43+
<li class="tab">
44+
<a href="district_show.html"><i class="sharpen-icon">info</i>About</a>
45+
</li>
46+
<li class="tab selected">
47+
<a href="district_administrators.html">
48+
<i class="sharpen-icon">shield_person</i>Administrators
49+
<span class="sharpen-badge">3</span>
50+
</a>
51+
</li>
52+
</ul>
53+
54+
<div class="sharpen-mb-lg">
55+
<div class="sharpen-button-bar">
56+
<form>
57+
<input type="text" class="sharpen-form-control sharpen-form-control--small" placeholder="Search administrators..." />
58+
</form>
59+
<button class="sharpen-button sharpen-button--xsmall sharpen-button--primary">
60+
<i class="sharpen-icon">add</i>
61+
Add administrator
62+
</button>
63+
</div>
64+
</div>
65+
66+
<table class="sharpen-table sharpen-table--icon-start sharpen-table--learners sharpen-table--enclosed sharpen-table-controls-end sharpen-table-hover">
67+
<thead>
68+
<tr>
69+
<th></th>
70+
<th>Name</th>
71+
<th></th>
72+
</tr>
73+
</thead>
74+
<tbody>
75+
<tr>
76+
<td><i class="sharpen-icon">shield_person</i></td>
77+
<td><a href="#">Cardigan, Dante</a></td>
78+
<td>
79+
<button class="sharpen-button sharpen-button--xsmall sharpen-button--danger">
80+
<i class="sharpen-icon">delete</i>
81+
</button>
82+
</td>
83+
</tr>
84+
<tr>
85+
<td><i class="sharpen-icon">shield_person</i></td>
86+
<td><a href="#">Doverspike, Brady</a></td>
87+
<td>
88+
<button class="sharpen-button sharpen-button--xsmall sharpen-button--danger">
89+
<i class="sharpen-icon">delete</i>
90+
</button>
91+
</td>
92+
</tr>
93+
<tr>
94+
<td><i class="sharpen-icon">shield_person</i></td>
95+
<td><a href="#">Stafford, Ainsley</a></td>
96+
<td>
97+
<button class="sharpen-button sharpen-button--xsmall sharpen-button--danger">
98+
<i class="sharpen-icon">delete</i>
99+
</button>
100+
</td>
101+
</tr>
102+
</tbody>
103+
</table>
104+
105+
</main>
106+
</div>
107+
108+
</body>
109+
</html>

‎src/prototypes/enterprise/district_show.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr" lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
6+
<title>Sharpen Prototype: Enterprise Layout</title>
7+
<link rel="stylesheet" href="../build/kezuri.css" />
8+
<script type="module" src="../build/kezuri.esm.js"></script>
9+
<script nomodule src="../build/kezuri.js"></script>
10+
11+
<link rel="stylesheet" href="enterprise-layout.css" />
12+
</head>
13+
<body>
14+
15+
<div class="sharpen-enterprise-container">
16+
<div class="sharpen-enterprise-navigation">
17+
<a class="brand" href="#"><img src="../build/assets/images/brand/sharpen_logo_ivory.png" /></a>
18+
19+
<h1 class="district sharpen-heading-sm">Public Schools of Brookline</h1>
20+
21+
<nav class="sharpen-mb-md">
22+
<sharpen-nav-link selected icon="near_me" name="District" href="district_show.html"></sharpen-nav-link>
23+
<sharpen-nav-link icon="supervisor_account" name="Staff" href="staff.html"></sharpen-nav-link>
24+
<sharpen-nav-link icon="face" name="Students" href="students.html"></sharpen-nav-link>
25+
<sharpen-nav-link icon="school" name="Schools" href="schools.html"></sharpen-nav-link>
26+
</nav>
27+
28+
<nav class="support-links">
29+
<sharpen-nav-link icon="account_box" name="Dante Cardigan" href="javascript:void();"></sharpen-nav-link>
30+
<sharpen-nav-link icon="help" name="Support" href="javascript:void();"></sharpen-nav-link>
31+
<sharpen-nav-link icon="logout" name="Log Out" href="javascript:void();"></sharpen-nav-link>
32+
</nav>
33+
34+
</div>
35+
<main>
36+
37+
<h1 class="sharpen-heading-2xl">
38+
District &rsaquo; Public Schools of Brookline
39+
</h1>
40+
41+
42+
<ul class="sharpen-tabs sharpen-mb-lg">
43+
<li class="tab selected">
44+
<a href="district_show.html"><i class="sharpen-icon">info</i>About</a>
45+
</li>
46+
<li class="tab">
47+
<a href="district_administrators.html">
48+
<i class="sharpen-icon">shield_person</i>Administrators
49+
<span class="sharpen-badge">3</span>
50+
</a>
51+
</li>
52+
</ul>
53+
54+
<div class="row sharpen-mb-lg">
55+
<div class="col-md-4">
56+
<sharpen-card border="gray" padding="medium">
57+
<sharpen-simple-metric>
58+
<div slot="metric" class="sharpen-text--center sharpen-text-4xl sharpen-text--color-pine">8</div>
59+
<div slot="content">
60+
<strong>Schools</strong>
61+
</div>
62+
</sharpen-simple-metric>
63+
</sharpen-card>
64+
</div>
65+
<div class="col-md-4">
66+
<sharpen-card border="gray" padding="medium">
67+
<sharpen-simple-metric>
68+
<div slot="metric" class="sharpen-text--center sharpen-text-4xl sharpen-text--color-pine">64</div>
69+
<div slot="content">
70+
<strong>Staff</strong>
71+
</div>
72+
</sharpen-simple-metric>
73+
</sharpen-card>
74+
</div>
75+
<div class="col-md-4">
76+
<sharpen-card border="gray" padding="medium">
77+
<sharpen-simple-metric>
78+
<div slot="metric" class="sharpen-text--center sharpen-text-4xl sharpen-text--color-pine">371</div>
79+
<div slot="content">
80+
<strong>Students</strong>
81+
</div>
82+
</sharpen-simple-metric>
83+
</sharpen-card>
84+
</div>
85+
</div>
86+
87+
<sharpen-empty>
88+
Data and analytics here
89+
</sharpen-empty>
90+
91+
</main>
92+
</div>
93+
94+
</body>
95+
</html>

‎src/prototypes/enterprise-layout/enterprise-layout.css renamed to ‎src/prototypes/enterprise/enterprise-layout.css

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ html, body, .sharpen-enterprise-container {
1111
flex: 1;
1212
background-color: white;
1313
padding: var(--spacing-lg);
14+
overflow-y: scroll;
1415
}
1516

1617
.sharpen-enterprise-navigation {
@@ -27,6 +28,13 @@ html, body, .sharpen-enterprise-container {
2728
border-bottom: 1px dotted white;
2829
}
2930

31+
.sharpen-enterprise-navigation .school {
32+
color: white;
33+
font-size: var(--font-size-xs);
34+
margin-bottom: var(--spacing-sm);
35+
text-transform: uppercase;
36+
}
37+
3038
.sharpen-enterprise-navigation .brand {
3139
display: block;
3240
margin-bottom: var(--spacing-md);
@@ -48,21 +56,30 @@ html, body, .sharpen-enterprise-container {
4856
color: var(--color-sunrise);
4957
}
5058

59+
.sharpen-enterprise-navigation sharpen-nav-link[selected] a {
60+
font-weight: 600;
61+
text-decoration: none;
62+
}
63+
5164
.sharpen-enterprise-navigation sharpen-nav-link .sharpen-icon {
5265
margin-right: 0.25em;
5366
vertical-align: -4pt;
5467
}
5568

56-
.sharpen-enterprise-navigation .support-links {
69+
.sharpen-enterprise-navigation .support-links,
70+
.sharpen-enterprise-navigation .school-links {
5771
margin-top: var(--spacing-md);
5872
padding-top: var(--spacing-md);
5973
border-top: 1px dotted white;
6074

6175
}
6276

77+
.sharpen-enterprise-navigation .school-links sharpen-nav-link a { color: var(--color-white); }
78+
.sharpen-enterprise-navigation .support-links sharpen-nav-link a { color: var(--color-mint); }
6379

64-
.sharpen-enterprise-navigation .support-links sharpen-nav-link a {
65-
color: var(--color-mint);
80+
.sharpen-enterprise-navigation .school-links sharpen-nav-link:first-child a {
81+
font-weight: 800;
82+
text-decoration: none;
6683
}
6784

6885
.sharpen-button-bar {
@@ -74,48 +91,29 @@ html, body, .sharpen-enterprise-container {
7491
flex: 1;
7592
}
7693

77-
78-
79-
80-
81-
/*
82-
** TABS
83-
*/
84-
85-
.sharpen-tabs {
86-
list-style-type: none;
87-
display: flex;
88-
gap: var(--spacing-xs);
89-
border-bottom: 1px solid var(--color-gray-2);
90-
margin-bottom: var(--spacing-md);
91-
}
92-
93-
.sharpen-tabs .tab {
94-
border: 1px solid var(--color-gray-3);
95-
border-bottom: transparent;
96-
border-top-left-radius: var(--border-radius-sm);
97-
border-top-right-radius: var(--border-radius-sm);
98-
margin-bottom: -1px;
99-
}
100-
101-
.sharpen-tabs .tab.selected {
102-
border: 1px solid var(--color-gray-2);
103-
border-bottom-color: white;
94+
.sharpen-table--horizontal tr > :first-child {
95+
width: 8rem;
96+
text-align: right;
97+
padding-right: var(--spacing-lg);
10498
}
10599

106-
.sharpen-tabs .tab.selected > a {
107-
color: #333;
108-
font-weight: 600;
100+
.sharpen-table--horizontal th, .sharpen-table--horizontal td {
101+
vertical-align: top;
109102
}
110103

111-
.sharpen-tabs .tab > a {
112-
display: block;
113-
padding: var(--spacing-sm) var(--spacing-md);
114-
text-decoration: none;
115-
}
104+
/*
105+
** BADGE
106+
*/
116107

117-
.sharpen-tabs .tab > a .sharpen-icon {
118-
vertical-align: -6px;
119-
margin-right: 0.25em;
120-
margin-left: -3px;
108+
.sharpen-badge {
109+
/* background-color: var(--color-gray-4);*/
110+
color: var(--color-pine);
111+
background-color: var(--color-mint);
112+
font-size: 85%;
113+
display: inline-block;
114+
border-radius: 0.5em;
115+
padding: 0 0.5em;
116+
height: 1.5em;
117+
vertical-align: 1px;
118+
margin-left: var(--spacing-xs);
121119
}

0 commit comments

Comments
 (0)