@linzjs/lui 15.0.2-0 → 15.0.4

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 (19) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/assets/icons/arrow_drop_right.svg +5 -0
  3. package/dist/assets/icons/control_point.svg +8 -8
  4. package/dist/assets/icons/copy.svg +5 -0
  5. package/dist/assets/icons/link.svg +5 -0
  6. package/dist/assets/icons/menu.svg +5 -0
  7. package/dist/assets/icons/more_vert.svg +5 -0
  8. package/dist/assets/icons/{order_histroy.svg → order_history.svg} +0 -0
  9. package/dist/assets/icons/unlink.svg +5 -0
  10. package/dist/assets/icons/zoom_centre.svg +5 -0
  11. package/dist/assets/svg-content.tsx +58 -9
  12. package/dist/index.js +13536 -12572
  13. package/dist/index.js.map +1 -1
  14. package/dist/lui.css +178 -100
  15. package/dist/lui.css.map +1 -1
  16. package/dist/lui.esm.js +13539 -12575
  17. package/dist/lui.esm.js.map +1 -1
  18. package/dist/scss/Global/GenericElements/Typography.scss +104 -17
  19. package/package.json +10 -10
package/dist/scss/Global/GenericElements/Typography.scss CHANGED
@@ -8,8 +8,7 @@
8
8
  // Global Typography styling //
9
9
  ////////////////////////////////////////
10
10
 
11
- // If you're looking for where we introduce fonts into our project, we actually use @fontsource in our local apps.
12
- // This is due to our build system for an NPM module not allowing us to maintain relative paths :(
11
+ // If you're looking for where we introduce fonts into our project, you're looking for `fonts.scss`
13
12
 
14
13
  ////////////////////////////////////////////
15
14
  // Base definition of our global settings //
@@ -76,6 +75,13 @@ hr {
76
75
  // Adjust naming of these as you see fit
77
76
  // It is suggested to have something that describes the utility that the font is being used for – here we're assuming heading font and body font are discrete use-cases
78
77
 
78
+ // =====================
79
+ // Typography variables
80
+ // =====================
81
+
82
+ // Adjust naming of these as you see fit
83
+ // It is suggested to have something that describes the utility that the font is being used for – here we're assuming heading font and body font are discrete use-cases
84
+
79
85
  // =====================
80
86
  // Headings
81
87
  // =====================
@@ -109,8 +115,7 @@ h6,
109
115
  h1,
110
116
  .h1 {
111
117
  @include fonts.font-light();
112
- @include fluidType--size(34px, 44px, $breakpoint-sm, $breakpoint-xl);
113
- @include fluidType--lineHeight(44px, 52px, $breakpoint-sm, $breakpoint-xl);
118
+ font-size: rem(44px);
114
119
 
115
120
  & + p {
116
121
  margin-top: spacing.$unit-sm; //32px
@@ -120,8 +125,7 @@ h1,
120
125
  h2,
121
126
  .h2 {
122
127
  @include fonts.font-light();
123
- @include fluidType--size(28px, 32px, $breakpoint-sm, $breakpoint-xl);
124
- @include fluidType--lineHeight(36px, 40px, $breakpoint-sm, $breakpoint-xl);
128
+ font-size: rem(32px);
125
129
  margin-top: spacing.$unit-xl; // 96px
126
130
 
127
131
  & + p {
@@ -132,9 +136,7 @@ h2,
132
136
  h3,
133
137
  .h3 {
134
138
  @include fonts.font-regular();
135
- @include fluidType--size(24px, 24px, $breakpoint-sm, $breakpoint-xl);
136
- @include fluidType--lineHeight(32px, 32px, $breakpoint-sm, $breakpoint-xl);
137
- letter-spacing: 0.2px;
139
+ font-size: rem(26px);
138
140
  margin-top: spacing.$unit-lg; // 64px
139
141
 
140
142
  & + p {
@@ -145,9 +147,7 @@ h3,
145
147
  h4,
146
148
  .h4 {
147
149
  @include fonts.font-regular();
148
- @include fluidType--size(20px, 20px, $breakpoint-sm, $breakpoint-xl);
149
- @include fluidType--lineHeight(24px, 24px, $breakpoint-sm, $breakpoint-xl);
150
- letter-spacing: 0.2px;
150
+ font-size: rem(22px);
151
151
  margin-top: spacing.$unit-lg; // 64px
152
152
 
153
153
  & + p {
@@ -158,16 +158,13 @@ h4,
158
158
  h5,
159
159
  .h5 {
160
160
  @include fonts.font-semibold();
161
- @include fluidType--size(16px, 16px, $breakpoint-sm, $breakpoint-xl);
162
- @include fluidType--lineHeight(24px, 22px, $breakpoint-sm, $breakpoint-xl);
161
+ font-size: rem(18px);
163
162
  }
164
163
 
165
164
  h6,
166
165
  .h6 {
167
166
  @include fonts.font-semibold();
168
- @include fluidType--size(14px, 14px, $breakpoint-sm, $breakpoint-xl);
169
- @include fluidType--lineHeight(18px, 18px, $breakpoint-sm, $breakpoint-xl);
170
- letter-spacing: 0.2px;
167
+ font-size: rem(16px);
171
168
  }
172
169
 
173
170
  // =====================
@@ -187,3 +184,93 @@ p.lui-small {
187
184
  line-height: rem(20px);
188
185
  margin-top: spacing.$unit-lg; //64px
189
186
  }
187
+
188
+ // ====================================================================================
189
+ // Headings 22/02/2022 – these are the next iteration of typographic updates
190
+ // These will replace the type above and the picket fence will be removed
191
+ // To view the changes in your app, add the class LuiBeta-fonts220222
192
+ // ====================================================================================
193
+
194
+ .LuiBeta-fonts220222 {
195
+ h1,
196
+ .h1 {
197
+ @include fonts.font-light();
198
+ @include fluidType--size(34px, 44px, $breakpoint-sm, $breakpoint-xl);
199
+ @include fluidType--lineHeight(44px, 52px, $breakpoint-sm, $breakpoint-xl);
200
+
201
+ & + p {
202
+ margin-top: spacing.$unit-sm; //32px
203
+ }
204
+ }
205
+
206
+ h2,
207
+ .h2 {
208
+ @include fonts.font-light();
209
+ @include fluidType--size(28px, 32px, $breakpoint-sm, $breakpoint-xl);
210
+ @include fluidType--lineHeight(36px, 40px, $breakpoint-sm, $breakpoint-xl);
211
+ margin-top: spacing.$unit-xl; // 96px
212
+
213
+ & + p {
214
+ margin-top: spacing.$unit-sm; // 32px
215
+ }
216
+ }
217
+
218
+ h3,
219
+ .h3 {
220
+ @include fonts.font-regular();
221
+ @include fluidType--size(24px, 24px, $breakpoint-sm, $breakpoint-xl);
222
+ @include fluidType--lineHeight(32px, 32px, $breakpoint-sm, $breakpoint-xl);
223
+ letter-spacing: 0.2px;
224
+ margin-top: spacing.$unit-lg; // 64px
225
+
226
+ & + p {
227
+ margin-top: spacing.$unit-sm; // 32px
228
+ }
229
+ }
230
+
231
+ h4,
232
+ .h4 {
233
+ @include fonts.font-regular();
234
+ @include fluidType--size(20px, 20px, $breakpoint-sm, $breakpoint-xl);
235
+ @include fluidType--lineHeight(24px, 24px, $breakpoint-sm, $breakpoint-xl);
236
+ letter-spacing: 0.2px;
237
+ margin-top: spacing.$unit-lg; // 64px
238
+
239
+ & + p {
240
+ margin-top: spacing.$unit-sm; // 32px
241
+ }
242
+ }
243
+
244
+ h5,
245
+ .h5 {
246
+ @include fonts.font-semibold();
247
+ @include fluidType--size(16px, 16px, $breakpoint-sm, $breakpoint-xl);
248
+ @include fluidType--lineHeight(24px, 22px, $breakpoint-sm, $breakpoint-xl);
249
+ }
250
+
251
+ h6,
252
+ .h6 {
253
+ @include fonts.font-semibold();
254
+ @include fluidType--size(14px, 14px, $breakpoint-sm, $breakpoint-xl);
255
+ @include fluidType--lineHeight(18px, 18px, $breakpoint-sm, $breakpoint-xl);
256
+ letter-spacing: 0.2px;
257
+ }
258
+
259
+ // =====================
260
+ // Body
261
+ // =====================
262
+
263
+ p,
264
+ .p {
265
+ @include fonts.font-light();
266
+ font-size: rem(16px);
267
+ margin-top: spacing.$unit-lg; //64px
268
+ }
269
+
270
+ p.lui-small {
271
+ @include fonts.font-light();
272
+ font-size: rem(13px);
273
+ line-height: rem(20px);
274
+ margin-top: spacing.$unit-lg; //64px
275
+ }
276
+ }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "15.0.2-0",
2
+ "version": "15.0.4",
3
3
  "license": "MIT",
4
4
  "repository": {
5
5
  "type": "git",
@@ -73,18 +73,18 @@
73
73
  "devDependencies": {
74
74
  "@geometricpanda/storybook-addon-badges": "^0.2.1",
75
75
  "@linzjs/style": "^3.6.0",
76
- "@rollup/plugin-commonjs": "^17.1.0",
76
+ "@rollup/plugin-commonjs": "^21.0.2",
77
77
  "@rollup/plugin-json": "^4.1.0",
78
78
  "@rollup/plugin-node-resolve": "^11.2.1",
79
79
  "@semantic-release/changelog": "^5.0.1",
80
80
  "@semantic-release/git": "^9.0.0",
81
- "@size-limit/preset-small-lib": "^4.7.0",
81
+ "@size-limit/preset-small-lib": "^7.0.8",
82
82
  "@storybook/addon-a11y": "^6.3.12",
83
83
  "@storybook/addon-docs": "^6.3.12",
84
84
  "@storybook/addon-essentials": "^6.3.12",
85
85
  "@storybook/addon-info": "^5.3.21",
86
86
  "@storybook/addon-links": "^6.3.12",
87
- "@storybook/addon-storysource": "6.3.12",
87
+ "@storybook/addon-storysource": "6.4.19",
88
88
  "@storybook/addons": "^6.3.12",
89
89
  "@storybook/preset-scss": "^1.0.3",
90
90
  "@storybook/react": "^6.3.12",
@@ -118,8 +118,8 @@
118
118
  "msw": "^0.22.2",
119
119
  "npm-run-all": "^4.1.5",
120
120
  "pretty-quick": "^3.1.1",
121
- "react": "^16.8.3",
122
- "react-dom": "^16.8.3",
121
+ "react": "^17.0.2",
122
+ "react-dom": "^17.0.2",
123
123
  "react-helmet": "^6.1.0",
124
124
  "react-is": "^17.0.1",
125
125
  "rollup": "^2.56.3",
@@ -131,11 +131,11 @@
131
131
  "sass": "^1.43.4",
132
132
  "sass-loader": "^8.0.2",
133
133
  "semantic-release": "^17.4.2",
134
- "size-limit": "^4.7.0",
134
+ "size-limit": "^7.0.8",
135
135
  "style-loader": "^1.3.0",
136
- "stylelint-config-standard": "^22.0.0",
136
+ "stylelint-config-standard": "^25.0.0",
137
137
  "stylelint-scss": "^3.20.1",
138
- "stylelint-suitcss": "^4.0.0",
138
+ "stylelint-suitcss": "^5.0.0",
139
139
  "typescript": "^3.9.7",
140
140
  "whatwg-fetch": "^3.4.1",
141
141
  "yup": "^0.29.0"
@@ -150,7 +150,7 @@
150
150
  "react-modal": "^3.11.2",
151
151
  "react-query": "2.26.3",
152
152
  "react-select": "^5.1.0",
153
- "resolve-url-loader": "^3.1.2",
153
+ "resolve-url-loader": "^5.0.0",
154
154
  "svgstore": "^3.0.0-2",
155
155
  "tippy.js": "^6.3.1",
156
156
  "uuid": "^8.3.2"