diff --git a/package-lock.json b/package-lock.json index f114f32..0e05a30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@sharpen-com/kezuri", - "version": "0.14.1", + "version": "0.14.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@sharpen-com/kezuri", - "version": "0.14.1", + "version": "0.14.2", "license": "MIT", "dependencies": { "@stencil/core": "4.11", diff --git a/package.json b/package.json index 1c5050b..3e47ffd 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/index.html b/src/index.html index 40b5428..dabcce7 100644 --- a/src/index.html +++ b/src/index.html @@ -34,8 +34,8 @@

Sharpen User Experience Prototypes Library

- Enterprise Layout - June 2024 + Enterprise Management + July 2024 1-Device: Milestones diff --git a/src/index.scss b/src/index.scss index 9d660ee..9cb0aa1 100644 --- a/src/index.scss +++ b/src/index.scss @@ -22,4 +22,5 @@ @import "scss/form/form"; @import "scss/collection/collection"; @import "scss/images/images"; -@import "scss/pagination/pagination"; \ No newline at end of file +@import "scss/pagination/pagination"; +@import "scss/tabs/tabs"; \ No newline at end of file diff --git a/src/prototypes/enterprise/district_administrators.html b/src/prototypes/enterprise/district_administrators.html new file mode 100644 index 0000000..6f07a6b --- /dev/null +++ b/src/prototypes/enterprise/district_administrators.html @@ -0,0 +1,109 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + +
+
+ +

+ District › Public Schools of Brookline +

+ + + + +
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Name
shield_personCardigan, Dante + +
shield_personDoverspike, Brady + +
shield_personStafford, Ainsley + +
+ +
+
+ + + diff --git a/src/prototypes/enterprise/district_show.html b/src/prototypes/enterprise/district_show.html new file mode 100644 index 0000000..80b3558 --- /dev/null +++ b/src/prototypes/enterprise/district_show.html @@ -0,0 +1,95 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + +
+
+ +

+ District › Public Schools of Brookline +

+ + + + +
+
+ + +
8
+
+ Schools +
+ + +
+
+ + +
64
+
+ Staff +
+ + +
+
+ + +
371
+
+ Students +
+ + +
+
+ + + Data and analytics here + + +
+
+ + + diff --git a/src/prototypes/enterprise-layout/enterprise-layout.css b/src/prototypes/enterprise/enterprise-layout.css similarity index 56% rename from src/prototypes/enterprise-layout/enterprise-layout.css rename to src/prototypes/enterprise/enterprise-layout.css index 1f915eb..6fe5c59 100644 --- a/src/prototypes/enterprise-layout/enterprise-layout.css +++ b/src/prototypes/enterprise/enterprise-layout.css @@ -11,6 +11,7 @@ html, body, .sharpen-enterprise-container { flex: 1; background-color: white; padding: var(--spacing-lg); + overflow-y: scroll; } .sharpen-enterprise-navigation { @@ -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); @@ -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 { @@ -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); } \ No newline at end of file diff --git a/src/prototypes/enterprise-layout/index.html b/src/prototypes/enterprise/index.html similarity index 57% rename from src/prototypes/enterprise-layout/index.html rename to src/prototypes/enterprise/index.html index 6e8c498..6149a4c 100644 --- a/src/prototypes/enterprise-layout/index.html +++ b/src/prototypes/enterprise/index.html @@ -34,43 +34,19 @@

Enterprise Management

web - District - Details + District web - District - Administrators + District › Administrators web - Users - - - - web - - Users - User Details - - - - web - - Users - Invite New User - - - - web - - Users - Upload CSV - - - - web - - Users - New User Setup + Staff @@ -79,24 +55,6 @@

Enterprise Management

Schools - - web - - Schools - School Details - - - - web - - Schools - School - Classes - - - - web - - Schools - School - Show Class - - web @@ -106,15 +64,16 @@

Enterprise Management

web - Students - Student Details + School › Analytics web - Students - Edit Student + School › Staff + diff --git a/src/prototypes/enterprise/school_class.html b/src/prototypes/enterprise/school_class.html new file mode 100644 index 0000000..5a4c629 --- /dev/null +++ b/src/prototypes/enterprise/school_class.html @@ -0,0 +1,167 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + + + +
+
+ +

+ Schools › Runkle School › Classes › Grade K - Room 4 +

+ + + + + + + + + + + + + + + + + +
ClassGrade K - Room 4
Staff + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Student NameSharpen Level
faceAbelli, OnniA + + +
faceHouk, RankoA + + +
faceKhachaturian, RufA + + +
+ + + +
+
+ + + diff --git a/src/prototypes/enterprise/school_classes.html b/src/prototypes/enterprise/school_classes.html new file mode 100644 index 0000000..5a9b73d --- /dev/null +++ b/src/prototypes/enterprise/school_classes.html @@ -0,0 +1,180 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + + + +
+
+ +

+ Schools › Runkle School › Classes +

+ +
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStaffStudents
meeting_room + Grade K - Room 4 + +
Mr. Cardigan
+
Mr. Guiste
+ 		+ 8 + + + +
meeting_room + Grade 1 - Room 221 + +
Mrs. Costa
+ 		+ 8 + + + +
meeting_room + Grade 1 - Room 223 + +
Ms. Montana
+ 		+ 8 + + + +
meeting_room + Grade 2 - Room 109 + +
Mrs. Hughes
+
Miss Yancey
+ 		+ 8 + + + +
meeting_room + Grade 2 - Room 111 + +
Mr. Donofrio
+ 		+ 8 + + + +
+ +
+
+ + + diff --git a/src/prototypes/enterprise/school_show.html b/src/prototypes/enterprise/school_show.html new file mode 100644 index 0000000..6eeadf9 --- /dev/null +++ b/src/prototypes/enterprise/school_show.html @@ -0,0 +1,59 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + + + +
+
+ +

+ Schools › Runkle School +

+ + + School-specific data and analytics here + + +
+
+ + + diff --git a/src/prototypes/enterprise/school_show_alt.html b/src/prototypes/enterprise/school_show_alt.html new file mode 100644 index 0000000..6a9495e --- /dev/null +++ b/src/prototypes/enterprise/school_show_alt.html @@ -0,0 +1,85 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + +
+
+ +

+ Schools › Runkle School +

+ + + + + School-specific data and analytics here + + +
+
+ + + diff --git a/src/prototypes/enterprise/school_staff.html b/src/prototypes/enterprise/school_staff.html new file mode 100644 index 0000000..97df677 --- /dev/null +++ b/src/prototypes/enterprise/school_staff.html @@ -0,0 +1,261 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + + + +
+
+ +

+ Schools › Runkle School › Staff +

+ +
+
+
+ +
+
+ +
+
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name / EmailRoleClass / Groups
supervisor_account + Cardigan, Dante +
dcardigan@psob.gov
+ 		+ Staff + +
Grade 1 - Mr. Cardigan
+
1 group
+ 		+ + +
supervisor_account + Doverspike, Brady +
bdoverspike@psob.gov
+ 		+ Staff + +
Grade 2 - Mr. Doverspike
+
1 group
+ 		+ + +
supervisor_account + Kinnaird, Pratap +
kinnaird@psob.gov
+ 		Staff +
Grade 3 - Ms. Kinnaird
+
1 group
+ 		+ + +
supervisor_account + Matveeva, Dixie +
matveeva@psob.gov
+ 		School Admin +
Grade 4 - Ms. Matveeva
+
1 group
+ 		+ + +
supervisor_account + Meaney, Eliav +
meaney@psob.gov
+ 		Staff +
Grade 5 - Mr. Meany
+
1 group
+ 		+ + +
supervisor_account + Notaro, Emrys +
notaro@psob.gov
Staff +
Grade 6 - Mrs. Notaro
+
1 group
+ 		+ + +
supervisor_account + Stafford, Ainsley +
astafford@psob.gov
+ + 		+ Staff + +
Grade 7 - Mrs. Stafford
+
1 group
+ 		+ + +
supervisor_account + Tillens, Leo +
tillens@psob.gov
+ 		Staff +
Grade 8 - Mr. Tillens
+
1 group
+ 		+ + +
+ +
+
+ + + diff --git a/src/prototypes/enterprise/schools.html b/src/prototypes/enterprise/schools.html new file mode 100644 index 0000000..86c7d08 --- /dev/null +++ b/src/prototypes/enterprise/schools.html @@ -0,0 +1,192 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + +
+
+ +

+ Schools +

+ +
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStaffClassesStudents
schoolBaker School83246 + + +
schoolDriscoll School83246 + + +
schoolHayes School83246 + + +
schoolLawrence School83246 + + +
schoolLincoln School83246 + + +
schoolPierce School83246 + + +
schoolRidley School83246 + + +
schoolRunkle School83246 + + +
+ +
+
+ + + diff --git a/src/prototypes/enterprise/staff.html b/src/prototypes/enterprise/staff.html new file mode 100644 index 0000000..28a2f6b --- /dev/null +++ b/src/prototypes/enterprise/staff.html @@ -0,0 +1,292 @@ + + + + + + Sharpen Prototype: Enterprise Layout + + + + + + + + +
+
+ + +

Public Schools of Brookline

+ + + + + +
+
+ +

+ Staff +

+ +
+
+
+ +
+
+ +
+
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name / EmailRoleSchool
supervisor_account + Cardigan, Dante +
dcardigan@psob.gov
+ 		+ District Admin + + + +
supervisor_account + Doverspike, Brady +
bdoverspike@psob.gov
+ 		+ District Admin + + + +
supervisor_account + Kinnaird, Pratap +
kinnaird@psob.gov
+ 		StaffRunkle School + + +
supervisor_account + Matveeva, Dixie +
matveeva@psob.gov
+ 		School AdminLincoln School + + +
supervisor_account + Meaney, Eliav +
meaney@psob.gov
+ 		StaffRidley School + + +
supervisor_account + Notaro, Emrys +
notaro@psob.gov
StaffDriscoll School + + +
supervisor_account + Stafford, Ainsley +
astafford@psob.gov
+ + 		+ District Admin + + + +
supervisor_account + Tillens, Leo +
tillens@psob.gov
+ 		StaffPierce School + + +
supervisor_account + Wieczorek, Balthasar +
wieczorek@psob.gov
+ 		StaffLawrence School + + +
supervisor_account + Zeng, Cosima +
zeng@psob.gov
+ 		StaffRunkley School + + +
+ + + +
+
+ + + diff --git a/src/prototypes/enterprise-layout/students.html b/src/prototypes/enterprise/students.html similarity index 70% rename from src/prototypes/enterprise-layout/students.html rename to src/prototypes/enterprise/students.html index 4f8e04b..447be35 100644 --- a/src/prototypes/enterprise-layout/students.html +++ b/src/prototypes/enterprise/students.html @@ -9,9 +9,6 @@ - @@ -22,10 +19,10 @@

Public Schools of Brookline

diff --git a/src/scss/tabs/tabs.scss b/src/scss/tabs/tabs.scss new file mode 100644 index 0000000..5bd0425 --- /dev/null +++ b/src/scss/tabs/tabs.scss @@ -0,0 +1,47 @@ +// + + +.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); + + .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; + + > a { + display: block; + padding: var(--spacing-sm) var(--spacing-md); + text-decoration: none; + + .sharpen-icon { + vertical-align: -6px; + margin-right: 0.25em; + margin-left: -3px; + } + } + + &.selected { + border: 1px solid var(--color-gray-2); + border-bottom-color: white; + + > a { + color: #333; + font-weight: 600; + } + } + } +} diff --git a/src/scss/tabs/tabs.stories.ts b/src/scss/tabs/tabs.stories.ts new file mode 100644 index 0000000..a37cc91 --- /dev/null +++ b/src/scss/tabs/tabs.stories.ts @@ -0,0 +1,29 @@ +/** + * **Tabs** are a horizontal navigation component reminiscent of manila + * folders. Use them for linking to a set of related interface panels. + */ +export default { + title: 'Molecules/Tabs', + tags: ['autodocs'], + render: () => ``, +}; + +export const WithIcons = {}; + +export const TextOnly = { + render: () => `` +} \ No newline at end of file diff --git a/src/welcome.mdx b/src/welcome.mdx index 503193b..9ce930d 100644 --- a/src/welcome.mdx +++ b/src/welcome.mdx @@ -23,6 +23,10 @@ For more background on this methodology, see [Atomic Design](https://atomicdesig # What's new +## 0.14.2 + +- New `sharpen-tabs` component + ## 0.14.0 - New `sharpen-journey` component for describing curriculum levels and learner progress