Skip to content

Commit

Permalink
Merge branch 'release/0.14.2'
Browse files Browse the repository at this point in the history
  • Loading branch information
jabbett committed Aug 9, 2024
2 parents e99d6f6 + 0f4d700 commit e33d690
Show file tree
Hide file tree
Showing 19 changed files with 1,615 additions and 135 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@sharpen-com/kezuri",
"description": "The Sharpen Design System",
"license": "MIT",
"version": "0.14.1",
"version": "0.14.2",
"main": "dist/index.cjs.js",
"module": "dist/index.js",
"es2015": "dist/esm/index.mjs",
Expand Down
4 changes: 2 additions & 2 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ <h1 class="sharpen-heading-2xl">Sharpen User Experience Prototypes Library</h1>
</thead>
<tbody>
<tr>
<td><a href="enterprise-layout/">Enterprise Layout</a></td>
<td>June 2024</td>
<td><a href="enterprise/">Enterprise Management</a></td>
<td>July 2024</td>
</tr>
<tr>
<td><a href="milestones/">1-Device: Milestones</a></td>
Expand Down
3 changes: 2 additions & 1 deletion src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@
@import "scss/form/form";
@import "scss/collection/collection";
@import "scss/images/images";
@import "scss/pagination/pagination";
@import "scss/pagination/pagination";
@import "scss/tabs/tabs";
109 changes: 109 additions & 0 deletions src/prototypes/enterprise/district_administrators.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Enterprise Layout</title>
<link rel="stylesheet" href="../build/kezuri.css" />
<script type="module" src="../build/kezuri.esm.js"></script>
<script nomodule src="../build/kezuri.js"></script>

<link rel="stylesheet" href="enterprise-layout.css" />
</head>
<body>

<div class="sharpen-enterprise-container">
<div class="sharpen-enterprise-navigation">
<a class="brand" href="#"><img src="../build/assets/images/brand/sharpen_logo_ivory.png" /></a>

<h1 class="district sharpen-heading-sm">Public Schools of Brookline</h1>

<nav class="sharpen-mb-md">
<sharpen-nav-link selected icon="near_me" name="District" href="district_show.html"></sharpen-nav-link>
<sharpen-nav-link icon="supervisor_account" name="Staff" href="staff.html"></sharpen-nav-link>
<sharpen-nav-link icon="face" name="Students" href="students.html"></sharpen-nav-link>
<sharpen-nav-link icon="school" name="Schools" href="schools.html"></sharpen-nav-link>
</nav>

<nav class="support-links">
<sharpen-nav-link icon="account_box" name="Dante Cardigan" href="javascript:void();"></sharpen-nav-link>
<sharpen-nav-link icon="help" name="Support" href="javascript:void();"></sharpen-nav-link>
<sharpen-nav-link icon="logout" name="Log Out" href="javascript:void();"></sharpen-nav-link>
</nav>

</div>
<main>

<h1 class="sharpen-heading-2xl">
District &rsaquo; Public Schools of Brookline
</h1>


<ul class="sharpen-tabs sharpen-mb-lg">
<li class="tab">
<a href="district_show.html"><i class="sharpen-icon">info</i>About</a>
</li>
<li class="tab selected">
<a href="district_administrators.html">
<i class="sharpen-icon">shield_person</i>Administrators
<span class="sharpen-badge">3</span>
</a>
</li>
</ul>

<div class="sharpen-mb-lg">
<div class="sharpen-button-bar">
<form>
<input type="text" class="sharpen-form-control sharpen-form-control--small" placeholder="Search administrators..." />
</form>
<button class="sharpen-button sharpen-button--xsmall sharpen-button--primary">
<i class="sharpen-icon">add</i>
Add administrator
</button>
</div>
</div>

<table class="sharpen-table sharpen-table--icon-start sharpen-table--learners sharpen-table--enclosed sharpen-table-controls-end sharpen-table-hover">
<thead>
<tr>
<th></th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="sharpen-icon">shield_person</i></td>
<td><a href="#">Cardigan, Dante</a></td>
<td>
<button class="sharpen-button sharpen-button--xsmall sharpen-button--danger">
<i class="sharpen-icon">delete</i>
</button>
</td>
</tr>
<tr>
<td><i class="sharpen-icon">shield_person</i></td>
<td><a href="#">Doverspike, Brady</a></td>
<td>
<button class="sharpen-button sharpen-button--xsmall sharpen-button--danger">
<i class="sharpen-icon">delete</i>
</button>
</td>
</tr>
<tr>
<td><i class="sharpen-icon">shield_person</i></td>
<td><a href="#">Stafford, Ainsley</a></td>
<td>
<button class="sharpen-button sharpen-button--xsmall sharpen-button--danger">
<i class="sharpen-icon">delete</i>
</button>
</td>
</tr>
</tbody>
</table>

</main>
</div>

</body>
</html>
95 changes: 95 additions & 0 deletions src/prototypes/enterprise/district_show.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Enterprise Layout</title>
<link rel="stylesheet" href="../build/kezuri.css" />
<script type="module" src="../build/kezuri.esm.js"></script>
<script nomodule src="../build/kezuri.js"></script>

<link rel="stylesheet" href="enterprise-layout.css" />
</head>
<body>

<div class="sharpen-enterprise-container">
<div class="sharpen-enterprise-navigation">
<a class="brand" href="#"><img src="../build/assets/images/brand/sharpen_logo_ivory.png" /></a>

<h1 class="district sharpen-heading-sm">Public Schools of Brookline</h1>

<nav class="sharpen-mb-md">
<sharpen-nav-link selected icon="near_me" name="District" href="district_show.html"></sharpen-nav-link>
<sharpen-nav-link icon="supervisor_account" name="Staff" href="staff.html"></sharpen-nav-link>
<sharpen-nav-link icon="face" name="Students" href="students.html"></sharpen-nav-link>
<sharpen-nav-link icon="school" name="Schools" href="schools.html"></sharpen-nav-link>
</nav>

<nav class="support-links">
<sharpen-nav-link icon="account_box" name="Dante Cardigan" href="javascript:void();"></sharpen-nav-link>
<sharpen-nav-link icon="help" name="Support" href="javascript:void();"></sharpen-nav-link>
<sharpen-nav-link icon="logout" name="Log Out" href="javascript:void();"></sharpen-nav-link>
</nav>

</div>
<main>

<h1 class="sharpen-heading-2xl">
District &rsaquo; Public Schools of Brookline
</h1>


<ul class="sharpen-tabs sharpen-mb-lg">
<li class="tab selected">
<a href="district_show.html"><i class="sharpen-icon">info</i>About</a>
</li>
<li class="tab">
<a href="district_administrators.html">
<i class="sharpen-icon">shield_person</i>Administrators
<span class="sharpen-badge">3</span>
</a>
</li>
</ul>

<div class="row sharpen-mb-lg">
<div class="col-md-4">
<sharpen-card border="gray" padding="medium">
<sharpen-simple-metric>
<div slot="metric" class="sharpen-text--center sharpen-text-4xl sharpen-text--color-pine">8</div>
<div slot="content">
<strong>Schools</strong>
</div>
</sharpen-simple-metric>
</sharpen-card>
</div>
<div class="col-md-4">
<sharpen-card border="gray" padding="medium">
<sharpen-simple-metric>
<div slot="metric" class="sharpen-text--center sharpen-text-4xl sharpen-text--color-pine">64</div>
<div slot="content">
<strong>Staff</strong>
</div>
</sharpen-simple-metric>
</sharpen-card>
</div>
<div class="col-md-4">
<sharpen-card border="gray" padding="medium">
<sharpen-simple-metric>
<div slot="metric" class="sharpen-text--center sharpen-text-4xl sharpen-text--color-pine">371</div>
<div slot="content">
<strong>Students</strong>
</div>
</sharpen-simple-metric>
</sharpen-card>
</div>
</div>

<sharpen-empty>
Data and analytics here
</sharpen-empty>

</main>
</div>

</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ html, body, .sharpen-enterprise-container {
flex: 1;
background-color: white;
padding: var(--spacing-lg);
overflow-y: scroll;
}

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

.sharpen-enterprise-navigation .school {
color: white;
font-size: var(--font-size-xs);
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
}

.sharpen-enterprise-navigation .brand {
display: block;
margin-bottom: var(--spacing-md);
Expand All @@ -48,21 +56,30 @@ html, body, .sharpen-enterprise-container {
color: var(--color-sunrise);
}

.sharpen-enterprise-navigation sharpen-nav-link[selected] a {
font-weight: 600;
text-decoration: none;
}

.sharpen-enterprise-navigation sharpen-nav-link .sharpen-icon {
margin-right: 0.25em;
vertical-align: -4pt;
}

.sharpen-enterprise-navigation .support-links {
.sharpen-enterprise-navigation .support-links,
.sharpen-enterprise-navigation .school-links {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px dotted white;

}

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

.sharpen-enterprise-navigation .support-links sharpen-nav-link a {
color: var(--color-mint);
.sharpen-enterprise-navigation .school-links sharpen-nav-link:first-child a {
font-weight: 800;
text-decoration: none;
}

.sharpen-button-bar {
Expand All @@ -74,48 +91,29 @@ html, body, .sharpen-enterprise-container {
flex: 1;
}





/*
** TABS
*/

.sharpen-tabs {
list-style-type: none;
display: flex;
gap: var(--spacing-xs);
border-bottom: 1px solid var(--color-gray-2);
margin-bottom: var(--spacing-md);
}

.sharpen-tabs .tab {
border: 1px solid var(--color-gray-3);
border-bottom: transparent;
border-top-left-radius: var(--border-radius-sm);
border-top-right-radius: var(--border-radius-sm);
margin-bottom: -1px;
}

.sharpen-tabs .tab.selected {
border: 1px solid var(--color-gray-2);
border-bottom-color: white;
.sharpen-table--horizontal tr > :first-child {
width: 8rem;
text-align: right;
padding-right: var(--spacing-lg);
}

.sharpen-tabs .tab.selected > a {
color: #333;
font-weight: 600;
.sharpen-table--horizontal th, .sharpen-table--horizontal td {
vertical-align: top;
}

.sharpen-tabs .tab > a {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
text-decoration: none;
}
/*
** BADGE
*/

.sharpen-tabs .tab > a .sharpen-icon {
vertical-align: -6px;
margin-right: 0.25em;
margin-left: -3px;
.sharpen-badge {
/* background-color: var(--color-gray-4);*/
color: var(--color-pine);
background-color: var(--color-mint);
font-size: 85%;
display: inline-block;
border-radius: 0.5em;
padding: 0 0.5em;
height: 1.5em;
vertical-align: 1px;
margin-left: var(--spacing-xs);
}
Loading

0 comments on commit e33d690

Please sign in to comment.