@utahdts/utah-design-system 0.10.3 → 1.0.2

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.
Files changed (24) hide show
  1. package/README.md +57 -31
  2. package/css/1-settings/_settings-index.scss +39 -38
  3. package/css/6-components/base-components/containers/_action-card.scss +4 -1
  4. package/css/6-components/base-components/forms/_checkbox.scss +1 -0
  5. package/css/6-components/base-components/forms/_switch.scss +1 -1
  6. package/css/6-components/base-components/navigation/_vertical-menu.scss +1 -1
  7. package/css/6-components/base-components/templates/_on-this-page.scss +3 -0
  8. package/css/6-components/base-components/text/_pre-code.scss +6 -10
  9. package/css/6-components/project-components/_swatch-list.scss +12 -0
  10. package/dist/style.css +107 -110
  11. package/dist/utah-design-system.es.js +2091 -2072
  12. package/dist/utah-design-system.umd.js +2090 -2071
  13. package/index.js +57 -58
  14. package/package.json +14 -15
  15. package/react/components/forms/TextInput.jsx +20 -4
  16. package/react/components/icons/Icons.jsx +5 -2
  17. package/react/components/navigation/LinkCallback.jsx +34 -0
  18. package/react/components/navigation/pagination/Pagination.jsx +1 -1
  19. package/react/hooks/useRememberCursorPosition.js +32 -0
  20. package/react/hooks/useStateEffect.js +1 -0
  21. package/react/hooks/useCurrentMenuItem.js +0 -27
  22. package/react/hooks/usePrepMenuItems.js +0 -24
  23. package/react/util/menuItems/calculateMenuItemsParents.js +0 -54
  24. package/react/util/menuItems/findMenuItemInMenusByPathname.js +0 -29
package/README.md CHANGED
@@ -1,66 +1,92 @@
1
- # utah-design-system
1
+ # Utah Design System Library
2
2
 
3
- A collection of styles and react components designed to make it quick and simple for developers to create web experiences using the Utah Design System.
3
+ [![See it on NPM!](https://img.shields.io/npm/v/@utahdts/utah-design-system.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@utahdts/utah-design-system)
4
+ [![GitHub](https://img.shields.io/badge/GitHub-Utah_Design_System-ad360d?style=for-the-badge)](https://github.com/utahdts/utah-design-system)
5
+ [![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://github.com/utahdts/utah-design-system/raw/main/LICENSE)
6
+ [![ARB Approved](https://img.shields.io/badge/Utah_ARB-Approved-2e7114?style=for-the-badge)](https://dts.utah.gov/standards/architecture-review-board)
7
+
8
+ The library is a collection of css styles and components designed to make it quick and simple for developers to create web experiences using the Utah Design System.
9
+ Goes hand in hand with the [Design System Header](https://github.com/utahdts/utah-design-system/tree/main/examples/utah-header) and Footer.
4
10
 
5
11
  ## What's included
6
12
 
7
13
  - Compiled CSS
8
14
  - SASS CSS
9
- - React components
15
+ - React Components <br>
16
+ (The React components are not a primary resource. Utilize the guidelines and css resources to create your own components for other libraries.)<br>
17
+ - Other libraries will be added as they are created. (See [Contributing](#contributing) below)
18
+
19
+ ## Getting Started
20
+
21
+ - Visit the [![Getting Started](https://img.shields.io/badge/Getting%20Started-blue)](https://designsystem.utah.gov/resources/gettingStarted) page to begin using the Utah Header and Design System.
10
22
 
11
23
  ## Documentation
12
24
 
13
- Please see the [documentation site](https://designsystem.utah.gov/) for all information related to the Utah Design System.
25
+ - [![Design System Website](https://img.shields.io/badge/Design%20System%20Website-blue)](https://designsystem.utah.gov)
26
+ - [![Getting Started](https://img.shields.io/badge/Getting%20Started-blue)](https://designsystem.utah.gov/resources/gettingStarted)
27
+ - [![Utah Header Options](https://img.shields.io/badge/Utah_Header_Options-blue)](https://designsystem.utah.gov/library/patterns/utahHeader)
14
28
 
15
- ## Install
29
+ ## NPM
16
30
 
17
- [![See it on NPM!](https://img.shields.io/npm/v/@utahdts/utah-design-system.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@utahdts/utah-design-system)
18
- [![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://github.com/utahdts/utah-design-system/raw/dev/LICENSE)
19
- [![issues](https://img.shields.io/github/issues-raw/utahdts/utah-design-system?style=for-the-badge)](https://github.com/utahdts/utah-design-system/issues)
31
+ The Utah Header and Design System Library are published to NPM here:
32
+ - [![Utah Design System Library](https://img.shields.io/badge/NPM-Utah_Design_System_Library-blue)](https://www.npmjs.com/package/%40utahdts/utah-design-system)
33
+
34
+ ## Install
20
35
 
21
36
  ```bash
22
- $ npm i @utahdts/utah-design-system
37
+ npm i @utahdts/utah-design-system
23
38
  ```
24
39
 
25
- ### Using the React components
40
+ ### Example Using SCSS source in a javascript import
26
41
 
27
42
  ```JavaScript
28
- // compiled
29
- import { DocumentationTemplate, LandingTemplate } from '@utahdts/utah-design-system';
30
-
31
- // uncompiled style
32
- import { OnThisPage } from '@utahdts/utah-design-systemOnThisPage';
33
- import { VerticalMenu } from '@utahdts/utah-design-system';
34
- import { useCurrentMenuItem } from '@utahdts/utah-design-system';
35
-
36
43
  //import all scss
37
44
  import '@utahdts/utah-design-system/css/index.scss';
38
45
  ```
39
46
 
40
- ### Using the files in Sass
47
+ ### Using the SCSS source in a Sass file
41
48
 
42
49
  In most cases you can simply import the Sass file as illustrated below:
43
50
 
44
51
  ```scss
45
- @import "~@utahdts/utah-design-system/css/6-components/base-components/buttons/button.scss";
52
+ @use "~@utahdts/utah-design-system/css/index.scss";
46
53
  ```
47
54
 
48
55
  ## Pre-processed bundled resource
49
56
 
50
- At a limited scale, some files have been pre-processed to CSS so that it can be delivered via CDN and used in environments where this rendered resource is required.
57
+ The CSS files have been pre-processed and can be delivered via the `unpkg CDN` (Content Delivery Network).
51
58
 
59
+ Unpkg syntax:
52
60
  ```
53
- unpkg.com/:package@:version/:file
54
- unpkg.com/@utahdts/utah-design-system@0.0.2/css/build/utah-design-system.css
61
+ https://unpkg.com/:package@:version/:file
55
62
  ```
56
63
 
57
- | resource | CDN URL |
58
- |-------------------------|-----------------------------------------------------------------------------------------|
59
- | index.scss<br>(All CSS) | https://unpkg.com/@utahdts/utah-design-system@:version/css/build/utah-design-system.css |
64
+ Example using version:
65
+ ```
66
+ https://unpkg.com/@utahdts/utah-design-system@1.0.1/dist/style.css
67
+ ```
68
+
69
+ Example using latest:
70
+ ```
71
+ https://unpkg.com/@utahdts/utah-design-system@latest/dist/style.css
72
+ ```
73
+
74
+ ## Contributing
75
+ The Utah Design System website is built using React, however we want to expand it to other technologies such as Angular, Vue.js, etc.
76
+ If you want to contribute or have any feedback, we'd love to hear from you! Please [contact us](https://designsystem.utah.gov/resources/gettingStarted).
77
+
78
+ ### Design System GitHub
79
+
80
+ - [Utah Design System](https://github.com/utahdts/utah-design-system/tree/main/)
81
+
82
+ ## Utah Design System Monorepo
83
+
84
+ This repo consists of the following:
85
+ - [![Utah Header (SCSS / Javascript)](https://img.shields.io/badge/GitHub-Utah_Header-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/%40utahdts/utah-design-system-header) ![README](https://img.shields.io/badge/README-gray)
86
+ - [![Design System Library (SCSS / React)](https://img.shields.io/badge/GitHub-Design_System_Library-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/%40utahdts/utah-design-system) ![README](https://img.shields.io/badge/README-gray)
87
+ - [![Examples](https://img.shields.io/badge/GitHub-Examples-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/examples) ![README](https://img.shields.io/badge/README-gray)
88
+ - [![Design System Website (SCSS / React)](https://img.shields.io/badge/GitHub-Design_System_Website-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/utah-design-system-website) ![README](https://img.shields.io/badge/README-gray)
60
89
 
61
- ### Site Map
90
+ ## License
62
91
 
63
- - [Home](https://utahdts.github.io/utah-design-system/)
64
- - Library
65
- - [Header](https://utahdts.github.io/utah-design-system/utah-header/)
66
- - [Documentation and Examples](../website/README.md)
92
+ [STATE OF UTAH: MEMORANDUM OF AGREEMENT TO TRANSFER SOFTWARE](https://github.com/utahdts/utah-design-system/tree/main/LICENSE)
package/css/1-settings/_settings-index.scss CHANGED
@@ -20,8 +20,8 @@ variables and settings
20
20
  /* color */
21
21
  /* ######## Pick these colors to match your desired style ######## */
22
22
  --primary-color: #{color-swatches.$red-rock-05};
23
- --primary-color-dark: #{color-swatches.$red-rock-01};;
24
- --primary-color-light: #{color-swatches.$red-rock-17};;
23
+ --primary-color-dark: #{color-swatches.$red-rock-01};
24
+ --primary-color-light: #{color-swatches.$red-rock-17};
25
25
  --gray-on-primary-color: #474747;
26
26
 
27
27
  --secondary-color: #{color-swatches.$celadon-blue-05};
@@ -106,51 +106,52 @@ variables and settings
106
106
  --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
107
107
  --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
108
108
 
109
- }
110
109
 
111
- /* color utility classes */
112
- .primary-color-background { background-color: var(--primary-color); }
113
- .primary-color-dark-background { background-color: var(--primary-color-dark); }
114
- .primary-color-light-background { background-color: var(--primary-color-light); }
115
- .gray-on-primary-background { background-color: var(--gray-on-primary-color); }
110
+ /* color utility classes */
111
+ .primary-color-background { background-color: var(--primary-color); }
112
+ .primary-color-dark-background { background-color: var(--primary-color-dark); }
113
+ .primary-color-light-background { background-color: var(--primary-color-light); }
114
+ .gray-on-primary-background { background-color: var(--gray-on-primary-color); }
116
115
 
117
- .primary-color { color: var(--primary-color); }
118
- .primary-color-border { border-color: var(--primary-color); }
116
+ .primary-color { color: var(--primary-color); }
117
+ .primary-color-border { border-color: var(--primary-color); }
119
118
 
120
- .secondary-color-background { background-color: var(--secondary-color); }
121
- .secondary-color-dark-background { background-color: var(--secondary-color-dark); }
122
- .secondary-color-light-background { background-color: var(--secondary-color-light); }
123
- .gray-on-secondary-background { background-color: var(--gray-on-secondary-color); }
119
+ .secondary-color-background { background-color: var(--secondary-color); }
120
+ .secondary-color-dark-background { background-color: var(--secondary-color-dark); }
121
+ .secondary-color-light-background { background-color: var(--secondary-color-light); }
122
+ .gray-on-secondary-background { background-color: var(--gray-on-secondary-color); }
124
123
 
125
- .secondary-color { color: var(--secondary-color) }
126
- .secondary-color-border { border-color: var(--secondary-color) }
124
+ .secondary-color { color: var(--secondary-color) }
125
+ .secondary-color-border { border-color: var(--secondary-color) }
127
126
 
128
- .accent-color-background { background-color: var(--accent-color); }
129
- .accent-color-dark-background { background-color: var(--accent-color-dark); }
130
- .accent-color-light-background { background-color: var(--accent-color-light); }
131
- .gray-on-accent-background { background-color: var(--gray-on-accent-color); }
127
+ .accent-color-background { background-color: var(--accent-color); }
128
+ .accent-color-dark-background { background-color: var(--accent-color-dark); }
129
+ .accent-color-light-background { background-color: var(--accent-color-light); }
130
+ .gray-on-accent-background { background-color: var(--gray-on-accent-color); }
132
131
 
133
- .accent-color { color: var(--accent-color) }
134
- .accent-color-border { border-color: var(--accent-color) }
132
+ .accent-color { color: var(--accent-color) }
133
+ .accent-color-border { border-color: var(--accent-color) }
135
134
 
136
- .gray-color-background { background-color: var(--gray-color); }
137
- .gray-color-light-background { background-color: var(--gray-light-color) }
135
+ .gray-color-background { background-color: var(--gray-color); }
136
+ .gray-color-light-background { background-color: var(--gray-light-color) }
138
137
 
139
- .white-color { color: white; }
138
+ .white-color { color: white; }
140
139
 
141
- .background-frosted-dark {
142
- background: rgba(0,0,0,0.6);
143
- backdrop-filter: blur(16px) brightness(1.5);
144
- -webkit-backdrop-filter: blur(16px) brightness(1.5);
145
- }
140
+ .background-frosted-dark {
141
+ background: rgba(0,0,0,0.6);
142
+ backdrop-filter: blur(16px) brightness(1.5);
143
+ -webkit-backdrop-filter: blur(16px) brightness(1.5);
144
+ }
146
145
 
147
- .background-frosted-light {
148
- background: rgba(255,255,255,0.1);
149
- backdrop-filter: blur(16px);
150
- -webkit-backdrop-filter: blur(16px);
151
- }
146
+ .background-frosted-light {
147
+ background: rgba(255,255,255,0.1);
148
+ backdrop-filter: blur(16px);
149
+ -webkit-backdrop-filter: blur(16px);
150
+ }
152
151
 
153
- .backdrop-dark {
154
- background: rgba(0,0,0,0.6);
155
- backdrop-filter: blur(6px) brightness(60%);
152
+ .backdrop-dark {
153
+ background: rgba(0,0,0,0.6);
154
+ backdrop-filter: blur(6px) brightness(60%);
155
+ }
156
156
  }
157
+
package/css/6-components/base-components/containers/_action-card.scss CHANGED
@@ -10,13 +10,16 @@
10
10
  padding: var(--spacing);
11
11
  text-decoration: none;
12
12
  color: var(--gray-color);
13
- transition: all 200ms ease-in-out;
13
+ transition: all 200ms ease-in-out, outline-offset 0ms ease;
14
14
  box-sizing: border-box;
15
15
  &:hover {
16
16
  box-shadow: none;
17
17
  background: var(--gray-color);
18
18
  color: white;
19
19
  }
20
+ &:focus-visible {
21
+ outline-offset: var(--spacing-2xs);
22
+ }
20
23
  &--primary-color {
21
24
  border: 2px solid var(--primary-color);
22
25
  color: var(--primary-color);
package/css/6-components/base-components/forms/_checkbox.scss CHANGED
@@ -11,6 +11,7 @@
11
11
  background-color: white;
12
12
  box-sizing: border-box;
13
13
  appearance: none;
14
+ flex-shrink: 0;
14
15
 
15
16
  &::after {
16
17
  content: '';
package/css/6-components/base-components/forms/_switch.scss CHANGED
@@ -175,7 +175,7 @@
175
175
 
176
176
  .switch-old::after {
177
177
  top: 4px;
178
- background-color: #fff;
178
+ background-color: #ffffff;
179
179
  border-radius: 50%;
180
180
  width: 14px;
181
181
  height: 14px;
package/css/6-components/base-components/navigation/_vertical-menu.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  box-sizing: border-box;
21
21
  color: var(--gray-color);
22
22
  display: flex;
23
- font-size: var(--font-size-2xs);
23
+ font-size: var(--font-size-xs);
24
24
  justify-content: flex-start;
25
25
  line-height: 1.7;
26
26
  margin: var(--spacing-2xs) 0;
package/css/6-components/base-components/templates/_on-this-page.scss CHANGED
@@ -3,6 +3,9 @@
3
3
  #{class-vars.$base-class} {
4
4
  .on-this-page {
5
5
  font-size: var(--font-size-xs);
6
+ min-height: 100%;
7
+ overflow-y: scroll;
8
+ overflow-x: clip;
6
9
  &__header {
7
10
  font-size: var(--font-size);
8
11
  font-weight: bold;
package/css/6-components/base-components/text/_pre-code.scss CHANGED
@@ -6,6 +6,12 @@
6
6
  &__wrapper {
7
7
  position: relative;
8
8
  width: 100%;
9
+ .copy-button .icon-button--borderless {
10
+ background: var(--gray-light-color);
11
+ &:hover {
12
+ background: white;
13
+ }
14
+ }
9
15
  }
10
16
  }
11
17
 
@@ -39,14 +45,4 @@
39
45
  overflow: scroll;
40
46
  }
41
47
  }
42
- .pre-code {
43
- &__wrapper {
44
- .copy-button .icon-button--borderless {
45
- background: var(--gray-light-color);
46
- &:hover {
47
- background: white;
48
- }
49
- }
50
- }
51
- }
52
48
  }
package/css/6-components/project-components/_swatch-list.scss CHANGED
@@ -37,5 +37,17 @@
37
37
  min-height: auto;
38
38
  padding: 0;
39
39
  }
40
+ .selected button {
41
+ border-radius: var(--radius-circle) !important;
42
+ box-shadow: 0 1px 6px rgba($color: black, $alpha: 0.7);
43
+ }
44
+ button .utds-icon-before-check{
45
+ &.is-dark {
46
+ color: white;
47
+ }
48
+ &.is-light {
49
+ color: black;
50
+ }
51
+ }
40
52
  }
41
53
  }