@navikt/ds-react 0.16.20 → 0.17.0

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 (143) hide show
  1. package/cjs/accordion/Accordion.js +5 -1
  2. package/cjs/accordion/AccordionContent.js +5 -1
  3. package/cjs/accordion/AccordionHeader.js +5 -1
  4. package/cjs/accordion/AccordionItem.js +5 -1
  5. package/cjs/accordion/index.js +5 -1
  6. package/cjs/alert/Alert.js +5 -1
  7. package/cjs/alert/index.js +5 -1
  8. package/cjs/button/Button.js +5 -1
  9. package/cjs/button/index.js +5 -1
  10. package/cjs/card/MicroCard.js +5 -1
  11. package/cjs/card/index.js +5 -1
  12. package/cjs/form/ConfirmationPanel.js +5 -1
  13. package/cjs/form/Fieldset/Fieldset.js +5 -1
  14. package/cjs/form/Select.js +5 -1
  15. package/cjs/form/Switch.js +5 -1
  16. package/cjs/form/TextField.js +5 -1
  17. package/cjs/form/Textarea.js +5 -1
  18. package/cjs/form/checkbox/Checkbox.js +5 -1
  19. package/cjs/form/checkbox/CheckboxGroup.js +5 -1
  20. package/cjs/form/error-summary/ErrorSummary.js +5 -1
  21. package/cjs/form/error-summary/ErrorSummaryItem.js +5 -1
  22. package/cjs/form/error-summary/index.js +5 -1
  23. package/cjs/form/index.js +3 -3
  24. package/cjs/form/radio/Radio.js +5 -1
  25. package/cjs/form/radio/RadioGroup.js +5 -1
  26. package/cjs/form/search/Search.js +102 -0
  27. package/cjs/form/{search-field/SearchFieldButton.js → search/SearchButton.js} +22 -11
  28. package/cjs/form/search/index.js +8 -0
  29. package/cjs/form/search/package.json +6 -0
  30. package/cjs/form/search/useSearch.js +31 -0
  31. package/cjs/grid/Cell.js +5 -1
  32. package/cjs/grid/ContentContainer.js +5 -1
  33. package/cjs/grid/Grid.js +5 -1
  34. package/cjs/grid/index.js +5 -1
  35. package/cjs/guide-panel/Guide.js +5 -1
  36. package/cjs/guide-panel/GuidePanel.js +5 -1
  37. package/cjs/guide-panel/index.js +5 -1
  38. package/cjs/help-text/HelpText.js +5 -1
  39. package/cjs/help-text/index.js +5 -1
  40. package/cjs/index.js +5 -1
  41. package/cjs/link/Link.js +5 -1
  42. package/cjs/link/index.js +5 -1
  43. package/cjs/link-panel/LinkPanel.js +5 -1
  44. package/cjs/link-panel/LinkPanelDescription.js +5 -1
  45. package/cjs/link-panel/LinkPanelTitle.js +5 -1
  46. package/cjs/link-panel/index.js +5 -1
  47. package/cjs/loader/Loader.js +5 -1
  48. package/cjs/loader/index.js +5 -1
  49. package/cjs/menu/Menu.js +5 -1
  50. package/cjs/menu/MenuCollapse.js +5 -1
  51. package/cjs/menu/MenuItem.js +5 -1
  52. package/cjs/modal/Modal.js +5 -1
  53. package/cjs/modal/ModalContent.js +5 -1
  54. package/cjs/modal/index.js +5 -1
  55. package/cjs/page-header/PageHeader.js +5 -1
  56. package/cjs/page-header/index.js +5 -1
  57. package/cjs/pagination/index.js +5 -1
  58. package/cjs/panel/Panel.js +5 -1
  59. package/cjs/panel/index.js +5 -1
  60. package/cjs/popover/Popover.js +5 -1
  61. package/cjs/popover/PopoverContent.js +5 -1
  62. package/cjs/popover/index.js +5 -1
  63. package/cjs/speech-bubble/Bubble.js +5 -1
  64. package/cjs/speech-bubble/SpeechBubble.js +5 -1
  65. package/cjs/speech-bubble/index.js +5 -1
  66. package/cjs/step-indicator/Step.js +5 -1
  67. package/cjs/step-indicator/StepIndicator.js +5 -1
  68. package/cjs/step-indicator/index.js +5 -1
  69. package/cjs/table/Body.js +5 -1
  70. package/cjs/table/ColumnHeader.js +5 -1
  71. package/cjs/table/DataCell.js +5 -1
  72. package/cjs/table/Header.js +5 -1
  73. package/cjs/table/HeaderCell.js +5 -1
  74. package/cjs/table/Row.js +5 -1
  75. package/cjs/table/Table.js +5 -1
  76. package/cjs/table/index.js +5 -1
  77. package/cjs/tag/Tag.js +5 -1
  78. package/cjs/tag/index.js +5 -1
  79. package/cjs/toggle-group/ToggleGroup.js +5 -1
  80. package/cjs/toggle-group/ToggleItem.js +5 -1
  81. package/cjs/typography/BodyLong.js +5 -1
  82. package/cjs/typography/BodyShort.js +5 -1
  83. package/cjs/typography/Detail.js +5 -1
  84. package/cjs/typography/Heading.js +5 -1
  85. package/cjs/typography/Ingress.js +5 -1
  86. package/cjs/typography/Label.js +5 -1
  87. package/cjs/util/index.js +20 -2
  88. package/esm/form/index.d.ts +1 -1
  89. package/esm/form/index.js +1 -1
  90. package/esm/form/index.js.map +1 -1
  91. package/esm/form/search/Search.d.ts +62 -0
  92. package/esm/form/search/Search.js +74 -0
  93. package/esm/form/search/Search.js.map +1 -0
  94. package/esm/form/search/SearchButton.d.ts +11 -0
  95. package/esm/form/search/SearchButton.js +34 -0
  96. package/esm/form/search/SearchButton.js.map +1 -0
  97. package/esm/form/search/index.d.ts +1 -0
  98. package/esm/form/search/index.js +2 -0
  99. package/esm/form/search/index.js.map +1 -0
  100. package/esm/form/search/useSearch.d.ts +10 -0
  101. package/esm/form/search/useSearch.js +25 -0
  102. package/esm/form/search/useSearch.js.map +1 -0
  103. package/esm/help-text/HelpText.js.map +1 -1
  104. package/esm/table/ColumnHeader.js.map +1 -1
  105. package/esm/util/index.d.ts +5 -0
  106. package/esm/util/index.js +13 -0
  107. package/esm/util/index.js.map +1 -1
  108. package/package.json +2 -2
  109. package/src/form/index.ts +1 -1
  110. package/src/form/search/Search.tsx +235 -0
  111. package/src/form/search/SearchButton.tsx +51 -0
  112. package/src/form/search/index.ts +1 -0
  113. package/src/form/search/search.stories.tsx +91 -0
  114. package/src/form/search/useSearch.ts +31 -0
  115. package/src/util/index.ts +33 -0
  116. package/cjs/form/search-field/SearchField.js +0 -69
  117. package/cjs/form/search-field/SearchFieldClearButton.js +0 -50
  118. package/cjs/form/search-field/SearchFieldInput.js +0 -49
  119. package/cjs/form/search-field/index.js +0 -19
  120. package/cjs/form/search-field/package.json +0 -6
  121. package/esm/form/search-field/SearchField.d.ts +0 -36
  122. package/esm/form/search-field/SearchField.js +0 -45
  123. package/esm/form/search-field/SearchField.js.map +0 -1
  124. package/esm/form/search-field/SearchFieldButton.d.ts +0 -17
  125. package/esm/form/search-field/SearchFieldButton.js +0 -27
  126. package/esm/form/search-field/SearchFieldButton.js.map +0 -1
  127. package/esm/form/search-field/SearchFieldClearButton.d.ts +0 -17
  128. package/esm/form/search-field/SearchFieldClearButton.js +0 -27
  129. package/esm/form/search-field/SearchFieldClearButton.js.map +0 -1
  130. package/esm/form/search-field/SearchFieldInput.d.ts +0 -6
  131. package/esm/form/search-field/SearchFieldInput.js +0 -26
  132. package/esm/form/search-field/SearchFieldInput.js.map +0 -1
  133. package/esm/form/search-field/index.d.ts +0 -2
  134. package/esm/form/search-field/index.js +0 -3
  135. package/esm/form/search-field/index.js.map +0 -1
  136. package/src/form/search-field/SearchField.tsx +0 -132
  137. package/src/form/search-field/SearchFieldButton.tsx +0 -47
  138. package/src/form/search-field/SearchFieldClearButton.tsx +0 -49
  139. package/src/form/search-field/SearchFieldInput.tsx +0 -42
  140. package/src/form/search-field/index.ts +0 -2
  141. package/src/form/search-field/stories/search-field-example.tsx +0 -25
  142. package/src/form/search-field/stories/search-field.stories.mdx +0 -156
  143. package/src/form/search-field/stories/search-field.stories.tsx +0 -199
@@ -1,199 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Meta } from "@storybook/react/types-6-0";
3
- import { Close, Search } from "@navikt/ds-icons";
4
- import { SearchField } from "../index";
5
- import { Fieldset } from "../..";
6
- export default {
7
- title: "ds-react/form/search-field",
8
- component: SearchField,
9
- } as Meta;
10
-
11
- export const All = () => {
12
- const [show, setShow] = useState(false);
13
- return (
14
- <>
15
- <h1>SearchField</h1>
16
- <SearchField
17
- label="Mollit eiusmod"
18
- description={<div>Ea cupidatat eu sunt commodo</div>}
19
- >
20
- <SearchField.Input />
21
- <SearchField.Button>
22
- <Search /> Søk
23
- </SearchField.Button>
24
- </SearchField>
25
- <SearchField
26
- label="Mollit eiusmod"
27
- description="Ea cupidatat eu sunt commodo"
28
- >
29
- <SearchField.Button>
30
- <Search /> Søk
31
- </SearchField.Button>
32
- <SearchField.Input />
33
- </SearchField>
34
-
35
- <h1>SearchField w clearsearch</h1>
36
- <SearchField
37
- label="Mollit eiusmod"
38
- description="Ea cupidatat eu sunt commodo"
39
- >
40
- <SearchField.Input />
41
- <SearchField.Clear>
42
- <Close />
43
- </SearchField.Clear>
44
- <SearchField.Button onClick={() => setShow(!show)}>
45
- <Search /> Søk
46
- </SearchField.Button>
47
- </SearchField>
48
- <SearchField
49
- label="Mollit eiusmod"
50
- description="Ea cupidatat eu sunt commodo"
51
- >
52
- <SearchField.Button>
53
- <Search /> Søk
54
- </SearchField.Button>
55
- <SearchField.Clear>
56
- <Close /> Tøm
57
- </SearchField.Clear>
58
- <SearchField.Input />
59
- </SearchField>
60
-
61
- <h2>Hidelabel</h2>
62
- <SearchField
63
- label="Mollit eiusmod"
64
- description="Ea cupidatat eu sunt commodo"
65
- hideLabel
66
- >
67
- <SearchField.Button>
68
- <Search /> Søk
69
- </SearchField.Button>
70
- <SearchField.Input />
71
- </SearchField>
72
-
73
- <h2>SearchField small</h2>
74
- <SearchField
75
- label="Mollit eiusmod"
76
- description="Ea cupidatat eu sunt commodo"
77
- size="small"
78
- >
79
- <SearchField.Button>
80
- <Search />
81
- <span className="navds-sr-only">Søk</span>
82
- </SearchField.Button>
83
- <SearchField.Input />
84
- </SearchField>
85
-
86
- <SearchField
87
- label="Mollit eiusmod"
88
- description="Ea cupidatat eu sunt commodo"
89
- size="small"
90
- >
91
- <SearchField.Input />
92
- <SearchField.Button>
93
- <Search />
94
- <span className="navds-sr-only">Søk</span>
95
- </SearchField.Button>
96
- </SearchField>
97
- <SearchField
98
- label="Mollit eiusmod"
99
- description="Ea cupidatat eu sunt commodo"
100
- size="small"
101
- >
102
- <SearchField.Button>
103
- <Search />
104
- <span className="navds-sr-only">Søk</span>
105
- </SearchField.Button>
106
- <SearchField.Clear>
107
- <Close /> Tøm
108
- </SearchField.Clear>
109
- <SearchField.Input />
110
- </SearchField>
111
-
112
- <SearchField
113
- label="Mollit eiusmod"
114
- description="Ea cupidatat eu sunt commodo"
115
- size="small"
116
- >
117
- <SearchField.Input />
118
- <SearchField.Clear>
119
- <Close /> Tøm
120
- </SearchField.Clear>
121
- <SearchField.Button>
122
- <Search />
123
- <span className="navds-sr-only">Søk</span>
124
- </SearchField.Button>
125
- </SearchField>
126
-
127
- <h2>SearchField w error</h2>
128
- <SearchField
129
- label="Mollit eiusmod"
130
- description="Ea cupidatat eu sunt commodo"
131
- error="Errormsg"
132
- >
133
- <SearchField.Input />
134
- <SearchField.Button>
135
- <Search /> Søk
136
- </SearchField.Button>
137
- </SearchField>
138
- <SearchField
139
- label="Mollit eiusmod"
140
- description="Ea cupidatat eu sunt commodo"
141
- error="Errormsg"
142
- >
143
- <SearchField.Button>
144
- <Search /> Søk
145
- </SearchField.Button>
146
- <SearchField.Input />
147
- </SearchField>
148
-
149
- <h2>SearchField in Fieldset</h2>
150
- <Fieldset legend="Filter" error="Fieldset-error-msg">
151
- <SearchField
152
- label="Mollit eiusmod"
153
- description="Ea cupidatat eu sunt commodo"
154
- error="Errormsg"
155
- hideLabel
156
- >
157
- <SearchField.Input />
158
- <SearchField.Button>
159
- <Search /> Søk
160
- </SearchField.Button>
161
- </SearchField>
162
- <SearchField
163
- label="Mollit eiusmod"
164
- description="Ea cupidatat eu sunt commodo"
165
- hideLabel
166
- >
167
- <SearchField.Button>
168
- <Search /> Søk
169
- </SearchField.Button>
170
- <SearchField.Input />
171
- </SearchField>
172
- </Fieldset>
173
-
174
- <h2>Disabled </h2>
175
- <SearchField
176
- disabled
177
- label="Mollit eiusmod"
178
- description="Ea cupidatat eu sunt commodo"
179
- >
180
- <SearchField.Input />
181
- <SearchField.Button>
182
- <Search /> Søk
183
- </SearchField.Button>
184
- </SearchField>
185
- <Fieldset legend="Filter" disabled>
186
- <SearchField
187
- label="Mollit eiusmod"
188
- description="Ea cupidatat eu sunt commodo"
189
- error="Errormsg"
190
- >
191
- <SearchField.Input />
192
- <SearchField.Button>
193
- <Search /> Søk
194
- </SearchField.Button>
195
- </SearchField>
196
- </Fieldset>
197
- </>
198
- );
199
- };