@kaizen/components 3.3.14 → 3.3.15
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.
- package/dist/cjs/src/TextArea/TextArea.module.css.cjs +9 -9
- package/dist/esm/src/TextArea/TextArea.module.css.mjs +9 -9
- package/dist/styles.css +1 -1
- package/package.json +13 -13
- package/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx +0 -11
- package/src/TextArea/TextArea.module.css +1 -0
- package/src/TextArea/_docs/TextArea.stickersheet.stories.tsx +14 -5
- package/src/TextAreaField/_docs/TextAreaField.stickersheet.stories.tsx +8 -0
- package/src/TitleBlock/_docs/TitleBlock.stories.tsx +0 -14
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var modules_f168227d = {
|
|
4
|
-
"wrapper": "
|
|
5
|
-
"wrapperAutogrow": "
|
|
6
|
-
"textarea": "
|
|
7
|
-
"textareaAutogrow": "
|
|
8
|
-
"default": "
|
|
9
|
-
"error": "
|
|
10
|
-
"caution": "
|
|
11
|
-
"disabled": "
|
|
12
|
-
"reversed": "
|
|
4
|
+
"wrapper": "TextArea_module_wrapper__36440826",
|
|
5
|
+
"wrapperAutogrow": "TextArea_module_wrapperAutogrow__36440826",
|
|
6
|
+
"textarea": "TextArea_module_textarea__36440826",
|
|
7
|
+
"textareaAutogrow": "TextArea_module_textareaAutogrow__36440826",
|
|
8
|
+
"default": "TextArea_module_default__36440826",
|
|
9
|
+
"error": "TextArea_module_error__36440826",
|
|
10
|
+
"caution": "TextArea_module_caution__36440826",
|
|
11
|
+
"disabled": "TextArea_module_disabled__36440826",
|
|
12
|
+
"reversed": "TextArea_module_reversed__36440826"
|
|
13
13
|
};
|
|
14
14
|
module.exports = modules_f168227d;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
var modules_f168227d = {
|
|
2
|
-
"wrapper": "
|
|
3
|
-
"wrapperAutogrow": "
|
|
4
|
-
"textarea": "
|
|
5
|
-
"textareaAutogrow": "
|
|
6
|
-
"default": "
|
|
7
|
-
"error": "
|
|
8
|
-
"caution": "
|
|
9
|
-
"disabled": "
|
|
10
|
-
"reversed": "
|
|
2
|
+
"wrapper": "TextArea_module_wrapper__36440826",
|
|
3
|
+
"wrapperAutogrow": "TextArea_module_wrapperAutogrow__36440826",
|
|
4
|
+
"textarea": "TextArea_module_textarea__36440826",
|
|
5
|
+
"textareaAutogrow": "TextArea_module_textareaAutogrow__36440826",
|
|
6
|
+
"default": "TextArea_module_default__36440826",
|
|
7
|
+
"error": "TextArea_module_error__36440826",
|
|
8
|
+
"caution": "TextArea_module_caution__36440826",
|
|
9
|
+
"disabled": "TextArea_module_disabled__36440826",
|
|
10
|
+
"reversed": "TextArea_module_reversed__36440826"
|
|
11
11
|
};
|
|
12
12
|
export { modules_f168227d as default };
|
package/dist/styles.css
CHANGED
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
@layer kz-components{.Tab_module_tab__ce4d43df{display:inline-flex;align-items:center;border:2px solid transparent;border-bottom:0;border-top-left-radius:var(--border-borderless-border-radius);border-top-right-radius:var(--border-borderless-border-radius);background:transparent;white-space:nowrap;text-decoration:none;padding:var(--spacing-md) var(--spacing-md);margin:0;font-family:var(--typography-heading-4-font-family);font-size:var(--typography-heading-4-font-size);font-weight:var(--typography-heading-4-font-weight);line-height:var(--typography-heading-4-line-height);letter-spacing:var(--typography-heading-4-letter-spacing);color:var(--color-purple-800);cursor:default;&:focus{outline:none}&:focus-visible{color:var(--color-blue-500);border-color:var(--color-blue-500)}&[data-disabled]{opacity:.3}&:not(:first-child){margin-inline-start:var(--spacing-xs)}&:not([data-disabled]):hover{background:var(--color-blue-200);color:var(--color-blue-500)}&:not([data-disabled]):active{background:var(--color-blue-100)}}.Tab_module_tab__ce4d43df[data-selected]{position:relative;color:var(--color-blue-500);&:before{content:"";display:block;border-top-left-radius:5px;border-top-right-radius:5px;background-color:currentcolor;height:5px;width:100%;position:absolute;left:0;right:0;bottom:0}}.Tab_module_badge__ce4d43df{margin-inline-start:var(--spacing-sm);display:inline-flex;align-items:center}@media (forced-colors:active){.Tab_module_tab__ce4d43df{border:2px solid transparent;&:focus-visible:after{content:"";position:absolute;background:transparent;border-radius:var(--border-focus-ring-border-radius);border-width:var(--border-focus-ring-border-width);border-style:var(--border-focus-ring-border-style);border-color:transparent;inset:-2px}}.Tab_module_tab__ce4d43df[data-selected]:before{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:2px solid transparent}}}
|
|
150
150
|
@layer kz-components{.TabList_module_container__7ce81ce7{position:relative}.TabList_module_tabList__7ce81ce7{border-bottom:1px solid var(--color-gray-300);padding:var(--spacing-6) 0 0;width:100%;height:100%;overflow-x:scroll;white-space:nowrap;scrollbar-width:none;scroll-behavior:smooth}.TabList_module_noPadding__7ce81ce7{padding:0}.TabList_module_leftArrow__7ce81ce7,.TabList_module_rightArrow__7ce81ce7{--icon-size:24;display:flex;align-items:center;justify-content:center;position:absolute;z-index:1030;background:var(--color-white);inset-block:0 1px;width:48px;cursor:default;user-select:none}.TabList_module_leftArrow__7ce81ce7{left:0}.TabList_module_leftArrow__7ce81ce7,.TabList_module_leftArrow__7ce81ce7:hover{border-right:1px solid var(--color-gray-300)}.TabList_module_rightArrow__7ce81ce7{right:0}.TabList_module_rightArrow__7ce81ce7,.TabList_module_rightArrow__7ce81ce7:hover{border-left:1px solid var(--color-gray-300)}.TabList_module_leftArrow__7ce81ce7:hover,.TabList_module_rightArrow__7ce81ce7:hover{background:var(--color-blue-200);color:var(--color-blue-500)}.TabList_module_leftArrow__7ce81ce7:active,.TabList_module_rightArrow__7ce81ce7:active{background:var(--color-blue-100);color:var(--color-blue-500)}}
|
|
151
151
|
@layer kz-components{.TabPanel_module_tabPanel__931e68c3{border:2px solid transparent;&:focus{outline:none}&:focus-visible{border-color:var(--color-blue-500);border-radius:var(--border-focus-ring-border-radius)}}}
|
|
152
|
-
@layer kz-components{.
|
|
152
|
+
@layer kz-components{.TextArea_module_wrapper__36440826{font-family:var(--typography-paragraph-body-font-family);font-size:var(--typography-paragraph-body-font-size);font-weight:var(--typography-paragraph-body-font-weight);line-height:var(--typography-paragraph-body-line-height);letter-spacing:var(--typography-paragraph-body-letter-spacing);color:var(--color-purple-800-rgb)}.TextArea_module_wrapperAutogrow__36440826{display:grid}.TextArea_module_wrapperAutogrow__36440826:after{content:attr(data-value) " ";white-space:pre-wrap;visibility:hidden}.TextArea_module_textarea__36440826,.TextArea_module_wrapperAutogrow__36440826:after{border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);border-radius:var(--border-solid-border-radius);padding:var(--spacing-sm);box-sizing:border-box;width:100%;font:inherit;overflow-wrap:anywhere}.TextArea_module_textareaAutogrow__36440826,.TextArea_module_wrapperAutogrow__36440826:after{grid-area:2/1}.TextArea_module_textarea__36440826{display:block;border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);border-radius:var(--border-solid-border-radius);padding:var(--spacing-sm);resize:vertical;&:focus{outline:var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);outline-offset:1px}&:disabled{border-color:rgb(var(--color-gray-500-rgb),.3);resize:none}}.TextArea_module_textareaAutogrow__36440826{overflow:hidden}.TextArea_module_default__36440826{&:not(.TextArea_module_error__36440826,.TextArea_module_caution__36440826){&:disabled{border-color:rgb(var(--color-gray-500-rgb),.3)}}&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){background-color:var(--color-gray-200);border-color:var(--color-gray-600)}&.TextArea_module_error__36440826{border-color:var(--color-red-500);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-red-500)}}&.TextArea_module_caution__36440826{border-color:var(--color-yellow-600);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-yellow-600)}}&.TextArea_module_disabled__36440826{background-color:var(--color-white);border-color:rgb(var(--color-gray-500-rgb),.3);color:rgb(var(--color-purple-800-rgb),.3)}}.TextArea_module_reversed__36440826{border-color:rgb(var(--color-white-rgb),.65);background:transparent;color:var(--color-white);&:focus{outline-color:var(--color-blue-300)}&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){background:rgb(var(--color-white-rgb),.1);border-color:var(--color-white)}&.TextArea_module_error__36440826{border-color:var(--color-red-300);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-red-300)}}&.TextArea_module_caution__36440826{border-color:var(--color-yellow-400);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-yellow-400)}}&.TextArea_module_disabled__36440826{background:transparent;border-color:rgb(var(--color-white-rgb),.3);color:rgb(var(--color-white-rgb),.3)}}}
|
|
153
153
|
@layer kz-components{.TextAreaField_module_message__095b2956.TextAreaField_module_disabled__095b2956{opacity:.3}.TextAreaField_module_textareaLabel__095b2956{margin-bottom:var(--spacing-xs,.375rem)}.TextAreaField_module_textareaLabelProminent__095b2956{margin-bottom:0}}
|
|
154
154
|
@layer kz-components{.GenericTile_module_root__8e7442cc{perspective:800px}.GenericTile_module_tile__8e7442cc{position:relative;width:330px;height:370px;transition:transform var(--animation-duration-slow,.4s) var(--animation-easing-function-ease-in-out,cubic-bezier(.455,.03,.515,.955));transform-style:preserve-3d;box-shadow:var(--shadow-small-box-shadow);border-radius:7px;background-color:var(--color-white);[data-tile-grid] &{width:auto}@media (width <= 767px){width:100%;min-width:226px;max-width:370px}@media (width <= 480px){max-width:100%}}.GenericTile_module_titleMeta__8e7442cc{padding-top:var(--spacing-4)}.GenericTile_module_face__8e7442cc{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;backface-visibility:hidden;border:var(--border-width-1) solid var(--generic-tile-border-color);border-radius:var(--border-solid-border-radius);background-color:var(--generic-tile-background-color);*{backface-visibility:hidden}}.GenericTile_module_faceFront__8e7442cc{justify-content:space-between;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-md)}.GenericTile_module_faceBack__8e7442cc{--generic-tile-border-color:var(--color-blue-400);--generic-tile-background-color:var(--color-blue-100);padding-top:var(--spacing-xl);transform:rotateY(180deg)}.GenericTile_module_default__8e7442cc{--generic-tile-border-color:var(--color-gray-500);--generic-tile-background-color:var(--color-white)}.GenericTile_module_expertAdvice__8e7442cc{--generic-tile-border-color:var(--color-purple-400);--generic-tile-background-color:var(--color-purple-100)}.GenericTile_module_isFlipped__8e7442cc{transform:rotateY(179deg)}.GenericTile_module_title__8e7442cc{text-align:center;padding-bottom:var(--spacing-sm);backface-visibility:hidden}.GenericTile_module_actions__8e7442cc{display:flex}.GenericTile_module_informationBtn__8e7442cc{inset-block-start:0;inset-inline-end:0;position:absolute;color:rgb(var(--color-purple-800-rgb),.5)}.GenericTile_module_information__8e7442cc{display:flex;padding-bottom:var(--spacing-md);padding-right:var(--spacing-md);padding-left:var(--spacing-md);flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;height:100%;text-align:left;border-radius:0 0 7px 7px}.GenericTile_module_footer__8e7442cc{display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-sm);height:var(--spacing-xl)}}
|
|
155
155
|
@layer kz-components{.MultiActionTile_module_actions__7f3718a6{display:flex}.MultiActionTile_module_secondaryAction__7f3718a6{margin-inline-end:var(--spacing-8)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/components",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.15",
|
|
4
4
|
"description": "Kaizen component library",
|
|
5
5
|
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
|
|
6
6
|
"homepage": "https://cultureamp.design",
|
|
@@ -106,13 +106,13 @@
|
|
|
106
106
|
"prosemirror-history": "^1.5.0",
|
|
107
107
|
"prosemirror-inputrules": "^1.5.1",
|
|
108
108
|
"prosemirror-keymap": "^1.2.3",
|
|
109
|
-
"prosemirror-model": "^1.25.
|
|
110
|
-
"prosemirror-schema-basic": "^1.2.
|
|
109
|
+
"prosemirror-model": "^1.25.12",
|
|
110
|
+
"prosemirror-schema-basic": "^1.2.5",
|
|
111
111
|
"prosemirror-schema-list": "^1.5.1",
|
|
112
112
|
"prosemirror-state": "^1.4.4",
|
|
113
|
-
"prosemirror-transform": "^1.12.
|
|
113
|
+
"prosemirror-transform": "^1.12.2",
|
|
114
114
|
"prosemirror-utils": "^1.2.2",
|
|
115
|
-
"prosemirror-view": "^1.42.
|
|
115
|
+
"prosemirror-view": "^1.42.6",
|
|
116
116
|
"react-animate-height": "^3.2.4",
|
|
117
117
|
"react-aria": "^3.41.1",
|
|
118
118
|
"react-aria-components": "^1.10.1",
|
|
@@ -130,16 +130,16 @@
|
|
|
130
130
|
},
|
|
131
131
|
"devDependencies": {
|
|
132
132
|
"@cultureamp/frontend-apis": "13.3.0",
|
|
133
|
-
"@cultureamp/i18n-react-intl": "^4.6.
|
|
133
|
+
"@cultureamp/i18n-react-intl": "^4.6.5",
|
|
134
134
|
"@cultureamp/package-bundler": "^4.1.1",
|
|
135
135
|
"@svgr/rollup": "^8.1.0",
|
|
136
|
-
"@testing-library/dom": "^10.4.
|
|
136
|
+
"@testing-library/dom": "^10.4.2",
|
|
137
137
|
"@types/jest-axe": "^3.5.9",
|
|
138
138
|
"@types/lodash.debounce": "^4.0.9",
|
|
139
139
|
"@types/react-highlight": "^0.12.8",
|
|
140
140
|
"@types/react-textfit": "^1.1.4",
|
|
141
141
|
"@types/uuid": "^11.0.0",
|
|
142
|
-
"autoprefixer": "^10.
|
|
142
|
+
"autoprefixer": "^10.6.1",
|
|
143
143
|
"concat-cli": "^4.0.0",
|
|
144
144
|
"cssnano": "^7.1.9",
|
|
145
145
|
"identity-obj-proxy": "^3.0.0",
|
|
@@ -149,21 +149,21 @@
|
|
|
149
149
|
"postcss": "^8.5.28",
|
|
150
150
|
"postcss-cli": "^11.0.1",
|
|
151
151
|
"postcss-import": "^16.2.0",
|
|
152
|
-
"postcss-preset-env": "^11.5.
|
|
152
|
+
"postcss-preset-env": "^11.5.4",
|
|
153
153
|
"postcss-scss": "^4.0.9",
|
|
154
154
|
"query-string": "^9.5.1",
|
|
155
155
|
"react": "19.2.8",
|
|
156
156
|
"react-dom": "19.2.8",
|
|
157
157
|
"react-highlight": "^0.15.0",
|
|
158
|
-
"react-intl": "^10.2.
|
|
159
|
-
"rollup": "^4.63.
|
|
158
|
+
"react-intl": "^10.2.2",
|
|
159
|
+
"rollup": "^4.63.5",
|
|
160
160
|
"sass": "1.79.6",
|
|
161
161
|
"serialize-query-params": "^2.0.4",
|
|
162
162
|
"svgo": "^4.1.0",
|
|
163
163
|
"ts-patch": "^3.3.0",
|
|
164
164
|
"tslib": "^2.8.1",
|
|
165
|
-
"tsx": "^4.23.
|
|
166
|
-
"@kaizen/design-tokens": "11.0.
|
|
165
|
+
"tsx": "^4.23.15",
|
|
166
|
+
"@kaizen/design-tokens": "11.0.19"
|
|
167
167
|
},
|
|
168
168
|
"devDependenciesComments": {
|
|
169
169
|
"sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
|
|
@@ -10,17 +10,6 @@ const IS_CHROMATIC = isChromatic()
|
|
|
10
10
|
export default {
|
|
11
11
|
title: 'Components/Filter Base',
|
|
12
12
|
parameters: {
|
|
13
|
-
a11y: {
|
|
14
|
-
config: {
|
|
15
|
-
rules: [
|
|
16
|
-
{
|
|
17
|
-
// FIXME: dialog element should have an accessible name
|
|
18
|
-
id: 'aria-dialog-name',
|
|
19
|
-
enabled: false,
|
|
20
|
-
},
|
|
21
|
-
],
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
13
|
chromatic: { disable: false },
|
|
25
14
|
controls: { disable: true },
|
|
26
15
|
},
|
|
@@ -40,11 +40,20 @@ const StickerSheetTemplate: StickerSheetStory = {
|
|
|
40
40
|
</StickerSheet.Row>
|
|
41
41
|
</StickerSheet>
|
|
42
42
|
<StickerSheet title="Autogrow">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
<StickerSheet.Row header="Wraps on whitespace (container 320px)">
|
|
44
|
+
<div style={{ maxWidth: '320px', border: '1px dashed currentcolor' }}>
|
|
45
|
+
<TextArea
|
|
46
|
+
rows={1}
|
|
47
|
+
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis nisi sit amet consectetur ultricies. Vestibulum porta arcu vitae erat egestas pulvinar."
|
|
48
|
+
autogrow
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
51
|
+
</StickerSheet.Row>
|
|
52
|
+
<StickerSheet.Row header="Long unbroken word (container 320px)">
|
|
53
|
+
<div style={{ maxWidth: '320px', border: '1px dashed currentcolor' }}>
|
|
54
|
+
<TextArea rows={1} value={'A'.repeat(100)} autogrow />
|
|
55
|
+
</div>
|
|
56
|
+
</StickerSheet.Row>
|
|
48
57
|
</StickerSheet>
|
|
49
58
|
</>
|
|
50
59
|
),
|
|
@@ -57,6 +57,14 @@ const StickerSheetTemplate: StickerSheetStory = {
|
|
|
57
57
|
</StickerSheet.Row>
|
|
58
58
|
))}
|
|
59
59
|
</StickerSheet>
|
|
60
|
+
|
|
61
|
+
<StickerSheet title="Autogrow" isReversed={isReversed}>
|
|
62
|
+
<StickerSheet.Row header="Long unbroken word (container 320px)">
|
|
63
|
+
<div style={{ width: '320px', border: '1px dashed currentcolor' }}>
|
|
64
|
+
<TextAreaField {...defaultProps} autogrow rows={1} value={'A'.repeat(150)} />
|
|
65
|
+
</div>
|
|
66
|
+
</StickerSheet.Row>
|
|
67
|
+
</StickerSheet>
|
|
60
68
|
</>
|
|
61
69
|
)
|
|
62
70
|
},
|
|
@@ -553,20 +553,6 @@ export const StickerSheetBreadcrumbs: Story = {
|
|
|
553
553
|
'#Breadcrumbs-focus-example [class^="TitleBlock-TitleBlock-module__breadcrumb"]',
|
|
554
554
|
],
|
|
555
555
|
},
|
|
556
|
-
a11y: {
|
|
557
|
-
config: {
|
|
558
|
-
rules: [
|
|
559
|
-
{
|
|
560
|
-
id: 'color-contrast', // false positive from animate in on the breadcrumbs
|
|
561
|
-
enabled: false,
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
id: 'landmark-unique', // false positive from having multiple TitleBlocks on a page
|
|
565
|
-
enabled: false,
|
|
566
|
-
},
|
|
567
|
-
],
|
|
568
|
-
},
|
|
569
|
-
},
|
|
570
556
|
},
|
|
571
557
|
render: (args) => (
|
|
572
558
|
<StickerSheet>
|