playbook_ui 14.4.0.pre.alpha.PBNTR490multilevelselect3832 → 14.4.0.pre.alpha.PBNTR534filtermaxwidth3903

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
  3. data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
  4. data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
  5. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  6. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
  7. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
  14. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -1
  16. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -0
  17. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
  18. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  19. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  20. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
  21. data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
  22. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +59 -0
  23. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  24. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
  26. data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
  27. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_select/select.rb +4 -0
  29. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  30. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
  31. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
  32. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
  33. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
  34. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  36. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  39. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
  40. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +123 -0
  41. data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
  42. data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
  43. data/dist/chunks/_typeahead-C7ICra83.js +22 -0
  44. data/dist/chunks/_weekday_stacked-DwrIhNbf.js +45 -0
  45. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  46. data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
  47. data/dist/chunks/vendor.js +1 -1
  48. data/dist/playbook-doc.js +1 -1
  49. data/dist/playbook-rails-react-bindings.js +1 -1
  50. data/dist/playbook-rails.js +1 -1
  51. data/dist/playbook.css +1 -1
  52. data/lib/playbook/version.rb +1 -1
  53. metadata +11 -6
  54. data/dist/chunks/_typeahead-BErpxkBz.js +0 -22
  55. data/dist/chunks/_weekday_stacked-CGwn8Bd7.js +0 -45
  56. data/dist/chunks/lib-D2U4I1U6.js +0 -16
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
+ import { getAllIcons } from "../../utilities/icons/allicons"
4
+
3
5
  import Flex from '../../pb_flex/_flex'
4
6
  import PbReactPopover from '../../pb_popover/_popover'
5
7
  import Button from '../../pb_button/_button'
@@ -65,6 +67,7 @@ const toolbarDropdownItems = [
65
67
  },
66
68
  ]
67
69
 
70
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
68
71
 
69
72
  const handleTogglePopover = () => {
70
73
  setShowPopover(!showPopover)
@@ -92,8 +95,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
92
95
  <Flex className={showPopover ? "fa-flip-vertical" : ""}
93
96
  display="inline_flex"
94
97
  >
95
- <Icon fixedWidth
96
- icon="angle-down"
98
+ <Icon
99
+ className="svg-inline--fa"
100
+ customIcon={angleDown}
101
+ fixedWidth
97
102
  margin-left="xs"
98
103
  />
99
104
  </Flex>
@@ -125,8 +130,10 @@ const popoverReference = (
125
130
  <Flex className={showPopover ? "fa-flip-vertical" : ""}
126
131
  display="inline_flex"
127
132
  >
128
- <Icon fixedWidth
129
- icon="angle-down"
133
+ <Icon
134
+ className="svg-inline--fa"
135
+ customIcon={angleDown}
136
+ fixedWidth
130
137
  margin-left="xs"
131
138
  />
132
139
  </Flex>
@@ -169,4 +176,4 @@ const popoverReference = (
169
176
  )
170
177
  }
171
178
 
172
- export default ToolbarDropdown
179
+ export default ToolbarDropdown
@@ -4,6 +4,7 @@ import classnames from 'classnames'
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
6
6
  import type { InputCallback } from '../types'
7
+ import { getAllIcons } from "../utilities/icons/allicons"
7
8
 
8
9
  import Body from '../pb_body/_body'
9
10
  import Caption from '../pb_caption/_caption'
@@ -90,6 +91,8 @@ const Select = ({
90
91
  compactClass
91
92
  );
92
93
 
94
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
95
+
93
96
  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
94
97
  const selectBody =(() =>{
95
98
  if (children) return children
@@ -134,9 +137,9 @@ const Select = ({
134
137
  {selectBody}
135
138
  { multiple !== true ?
136
139
  <Icon
137
- className="pb_select_kit_caret"
140
+ className="pb_select_kit_caret svg-inline--fa"
141
+ customIcon={angleDown}
138
142
  fixedWidth
139
- icon="angle-down"
140
143
  />
141
144
  :
142
145
  null
@@ -26,7 +26,7 @@
26
26
  <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
27
27
  <% end %>
28
28
  <% if object.multiple != true %>
29
- <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
29
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
30
30
  <% end %>
31
31
  </label>
32
32
  <% end %>
@@ -84,6 +84,10 @@ module Playbook
84
84
  end
85
85
  end
86
86
 
87
+ def angle_down_path
88
+ "app/pb_kits/playbook/utilities/icons/angle-down.svg"
89
+ end
90
+
87
91
  private
88
92
 
89
93
  def error_class
@@ -45,7 +45,6 @@
45
45
  }
46
46
  }
47
47
  .text_input_wrapper {
48
- margin-bottom: 1rem;
49
48
  input::placeholder,
50
49
  .text_input .placeholder {
51
50
  @include pb_body_light_dark;
@@ -68,7 +68,6 @@
68
68
  opacity: 0;
69
69
  }
70
70
  [class^=pb_list_kit] {
71
- margin-top: -$space-sm;
72
71
  li {
73
72
  transition: background-color .25s ease-in-out;
74
73
  }
@@ -109,6 +109,20 @@ test('should pass className prop', () => {
109
109
  expect(kit).toHaveClass(className)
110
110
  })
111
111
 
112
+ test('typeahead textinput has mb_sm class by default', () => {
113
+ render(
114
+ <Typeahead
115
+ data={{ testid: 'default-mb-test' }}
116
+ options={options}
117
+ />
118
+ )
119
+
120
+ const kit = screen.getByTestId('default-mb-test')
121
+ expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
122
+ const textInput = kit.querySelector(".pb_text_input_kit")
123
+ expect(textInput).toHaveClass("mb_none")
124
+ })
125
+
112
126
  test('typeahead with colored pills', () => {
113
127
  render(
114
128
  <Typeahead
@@ -45,6 +45,7 @@ type TypeaheadProps = {
45
45
  getOptionLabel?: string | (() => any),
46
46
  getOptionValue?: string | (() => any),
47
47
  name?: string,
48
+ marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
48
49
  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
49
50
  } & GlobalProps
50
51
 
@@ -78,6 +79,7 @@ const Typeahead = ({
78
79
  htmlOptions = {},
79
80
  id,
80
81
  loadOptions = noop,
82
+ marginBottom = "sm",
81
83
  pillColor,
82
84
  ...props
83
85
  }: TypeaheadProps) => {
@@ -138,6 +140,7 @@ const Typeahead = ({
138
140
  const htmlProps = buildHtmlProps(htmlOptions)
139
141
  const classes = classnames(
140
142
  'pb_typeahead_kit react-select',
143
+ `mb_${marginBottom}`,
141
144
  globalProps(props),
142
145
  className
143
146
  )
@@ -11,14 +11,15 @@ type Props = {
11
11
  const TypeaheadControl = (props: Props) => (
12
12
  <div className="pb_typeahead_wrapper">
13
13
  <TextInput
14
- dark={props.selectProps.dark}
15
- error={props.selectProps.error}
16
- label={props.selectProps.label}
14
+ dark={props.selectProps.dark}
15
+ error={props.selectProps.error}
16
+ label={props.selectProps.label}
17
+ marginBottom="none"
17
18
  >
18
19
  <Flex>
19
20
  <components.Control
20
- className="text_input"
21
- {...props}
21
+ className="text_input"
22
+ {...props}
22
23
  />
23
24
  </Flex>
24
25
  </TextInput>
@@ -0,0 +1,88 @@
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-default",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "None",
15
+ name: :foo,
16
+ is_multi: false,
17
+ margin_bottom: "none",
18
+ })
19
+ %>
20
+ <%= pb_rails("typeahead", props: {
21
+ id: "typeahead-default",
22
+ placeholder: "All Colors",
23
+ options: options,
24
+ label: "XXS",
25
+ name: :foo,
26
+ is_multi: false,
27
+ margin_bottom: "xxs",
28
+ })
29
+ %>
30
+ <%= pb_rails("typeahead", props: {
31
+ id: "typeahead-default",
32
+ placeholder: "All Colors",
33
+ options: options,
34
+ label: "XS",
35
+ name: :foo,
36
+ is_multi: false,
37
+ margin_bottom: "xs",
38
+ })
39
+ %>
40
+ <%= pb_rails("typeahead", props: {
41
+ id: "typeahead-default",
42
+ placeholder: "All Colors",
43
+ options: options,
44
+ label: "Default - SM",
45
+ name: :foo,
46
+ is_multi: false,
47
+ })
48
+ %>
49
+ <%= pb_rails("typeahead", props: {
50
+ id: "typeahead-default",
51
+ placeholder: "All Colors",
52
+ options: options,
53
+ label: "MD",
54
+ name: :foo,
55
+ is_multi: false,
56
+ margin_bottom: "md",
57
+ })
58
+ %>
59
+ <%= pb_rails("typeahead", props: {
60
+ id: "typeahead-default",
61
+ placeholder: "All Colors",
62
+ options: options,
63
+ label: "LG",
64
+ name: :foo,
65
+ is_multi: false,
66
+ margin_bottom: "lg",
67
+ })
68
+ %>
69
+ <%= pb_rails("typeahead", props: {
70
+ id: "typeahead-default",
71
+ placeholder: "All Colors",
72
+ options: options,
73
+ label: "XL",
74
+ name: :foo,
75
+ is_multi: false,
76
+ margin_bottom: "xl",
77
+ })
78
+ %>
79
+
80
+ <%= javascript_tag defer: "defer" do %>
81
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
82
+ console.log('Single Option selected')
83
+ console.dir(event.detail)
84
+ })
85
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
86
+ console.log('All options cleared')
87
+ })
88
+ <% end %>
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const options = [
6
+ { label: 'Orange', value: '#FFA500' },
7
+ { label: 'Red', value: '#FF0000' },
8
+ { label: 'Green', value: '#00FF00' },
9
+ { label: 'Blue', value: '#0000FF' },
10
+ ]
11
+
12
+ const TypeaheadMarginBottom = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ label="None"
17
+ marginBottom="none"
18
+ options={options}
19
+ {...props}
20
+ />
21
+ <Typeahead
22
+ label="XXS"
23
+ marginBottom="xxs"
24
+ options={options}
25
+ {...props}
26
+ />
27
+ <Typeahead
28
+ label="XS"
29
+ marginBottom="xs"
30
+ options={options}
31
+ {...props}
32
+ />
33
+ <Typeahead
34
+ label="Default - SM"
35
+ options={options}
36
+ {...props}
37
+ />
38
+ <Typeahead
39
+ label="MD"
40
+ marginBottom="md"
41
+ options={options}
42
+ {...props}
43
+ />
44
+ <Typeahead
45
+ label="LG"
46
+ marginBottom="lg"
47
+ options={options}
48
+ {...props}
49
+ />
50
+ <Typeahead
51
+ label="XL"
52
+ marginBottom="xl"
53
+ options={options}
54
+ {...props}
55
+ />
56
+ </>
57
+ )
58
+ }
59
+
60
+ export default TypeaheadMarginBottom
@@ -9,6 +9,7 @@ examples:
9
9
  - typeahead_inline: Inline
10
10
  - typeahead_multi_kit: Multi Kit Options
11
11
  - typeahead_error_state: Error State
12
+ - typeahead_margin_bottom: Margin Bottom
12
13
  - typeahead_with_pills_color: With Pills (Custom Color)
13
14
 
14
15
  react:
@@ -24,4 +25,5 @@ examples:
24
25
  - typeahead_async_createable: Createable (+ Async Data)
25
26
  - typeahead_error_state: Error State
26
27
  - typeahead_custom_menu_list: Custom MenuList
28
+ - typeahead_margin_bottom: Margin Bottom
27
29
  - typeahead_with_pills_color: With Pills (Custom Color)
@@ -10,4 +10,5 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
10
10
  export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
11
11
  export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
12
12
  export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
13
+ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
13
14
  export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
@@ -20,7 +20,8 @@
20
20
  label: object.label,
21
21
  name: object.name,
22
22
  value: object.value,
23
- placeholder: object.placeholder
23
+ placeholder: object.placeholder,
24
+ margin_bottom: "none",
24
25
  }) %>
25
26
  <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
26
27
  <% end %>
@@ -34,12 +34,16 @@ module Playbook
34
34
  prop :search_term_minimum_length, default: 3
35
35
  prop :search_debounce_timeout, default: 250
36
36
  prop :value
37
+ prop :margin_bottom, type: Playbook::Props::Enum,
38
+ values: %w[none xxs xs sm md lg xl],
39
+ default: "sm"
37
40
  prop :pill_color, type: Playbook::Props::Enum,
38
41
  values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
39
42
  default: "primary"
40
43
 
41
44
  def classname
42
- generate_classname("pb_typeahead_kit")
45
+ default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
46
+ generate_classname("pb_typeahead_kit") + default_margin_bottom
43
47
  end
44
48
 
45
49
  def inline_class
@@ -69,6 +73,7 @@ module Playbook
69
73
  inline: inline,
70
74
  isMulti: is_multi,
71
75
  label: label,
76
+ marginBottom: margin_bottom,
72
77
  multiKit: multi_kit,
73
78
  name: name,
74
79
  options: options,
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import ReactDOMServer from 'react-dom/server';
2
3
 
3
4
  const spinner = (
4
5
  <svg
@@ -43,6 +44,109 @@ const times = (
43
44
  </svg>
44
45
  )
45
46
 
47
+ const shieldCheck = (
48
+ <svg
49
+ fill="none"
50
+ height="25"
51
+ viewBox="0 0 30 25"
52
+ width="30"
53
+ xmlns="http://www.w3.org/2000/svg"
54
+ >
55
+ <g clipPath="url(#clip0_3501_2627)">
56
+ <path
57
+ d="M23.613 6.22616C19.2319 5.05738 16.2038 3.57683 14.9994 2.93168C13.795 3.57684 10.7668 5.05738 6.38579 6.22616C6.49648 10.1825 7.36742 13.3152 8.82039 15.769C10.2812 18.2361 12.3678 20.0807 14.9994 21.3944C17.6301 20.0812 19.7161 18.2374 21.1769 15.7716C22.6308 13.3174 23.5022 10.1839 23.613 6.22616ZM14.2526 0.775118C14.7176 0.512911 15.2824 0.51361 15.7463 0.775204C16.4986 1.19938 19.7418 2.92765 24.7399 4.19445C25.4023 4.36236 25.8799 4.96401 25.8736 5.66282C25.8329 10.1987 24.8831 13.9298 23.1127 16.9184C21.3379 19.9142 18.7794 22.0943 15.64 23.5849C15.235 23.7772 14.7638 23.7773 14.3587 23.5849C11.2184 22.0938 8.65916 19.9128 6.88434 16.9154C5.11385 13.9254 4.16463 10.1924 4.12506 5.65388C4.11862 4.91506 4.64477 4.35024 5.26787 4.19218C10.2611 2.92549 13.5011 1.19889 14.2526 0.775118ZM11.685 11.1425C11.2467 10.7022 10.5344 10.7006 10.094 11.139C9.65373 11.5774 9.65215 12.2897 10.0905 12.73L12.7278 15.379C13.3123 15.9661 14.2621 15.9682 14.8491 15.3837L19.8781 10.377C20.3184 9.93866 20.32 9.22635 19.8816 8.78604C19.4432 8.34573 18.7309 8.34415 18.2906 8.78251L13.7932 13.26L11.685 11.1425Z"
58
+ fill="#242B42"
59
+ />
60
+ </g>
61
+ <defs>
62
+ <clipPath id="clip0_3501_2627">
63
+ <rect
64
+ fill="white"
65
+ height="24"
66
+ transform="translate(0 0.142883)"
67
+ width="30"
68
+ />
69
+ </clipPath>
70
+ </defs>
71
+ </svg>
72
+ )
73
+
74
+ const eye = (
75
+ <svg
76
+ fill="none"
77
+ height="1.5em"
78
+ viewBox="0 0 30 24"
79
+ width="1.5em"
80
+ xmlns="http://www.w3.org/2000/svg"
81
+ >
82
+ <path
83
+ clipRule="evenodd"
84
+ d="M15.063 1.393c-4.268 0-7.06 1.76-9.073 3.89C5.002 6.33 4.206 7.46 3.522 8.475l-.395.589c-.526.787-.97 1.454-1.424 1.994a1.521 1.521 0 00-.045 1.902c.303.396.634.893 1.005 1.45 2.092 3.136 5.466 8.197 12.4 8.197 7.192 0 10.277-4.932 12.237-8.066.385-.615.727-1.161 1.047-1.587a1.524 1.524 0 00-.049-1.895c-.459-.548-.906-1.23-1.436-2.037l-.001-.001-.354-.539c-.672-1.014-1.453-2.145-2.425-3.192-1.984-2.135-4.75-3.897-9.02-3.897zM4.703 13.376c-.313-.46-.616-.906-.917-1.323a35.29 35.29 0 001.245-1.788l.357-.533c.67-.995 1.383-1.998 2.238-2.904C9.3 5.056 11.53 3.643 15.063 3.643c3.53 0 5.728 1.41 7.37 3.178.84.905 1.538 1.907 2.197 2.903l.324.492v.001c.417.635.837 1.276 1.265 1.84a43.715 43.715 0 00-1.021 1.551c-1.99 3.115-4.311 6.749-10.135 6.749-5.613 0-8.22-3.833-10.36-6.981zm10.35 2.638a3.946 3.946 0 10-.243-7.885c.168.23.243.602.243 1.204a3.187 3.187 0 01-3.188 3.188 3.83 3.83 0 01-.739-.056 3.947 3.947 0 003.927 3.549zm0 2.25a6.196 6.196 0 100-12.393 6.196 6.196 0 000 12.393z"
85
+ fill="#242B42"
86
+ />
87
+ </svg>
88
+ )
89
+
90
+ const envelope = (
91
+ <svg
92
+ fill="none"
93
+ height="1.5em"
94
+ viewBox="0 0 30 25"
95
+ width="1.5em"
96
+ xmlns="http://www.w3.org/2000/svg"
97
+ >
98
+ <path
99
+ d="M5.625 6.286c0-.207.168-.375.375-.375h18c.207 0 .375.168.375.375v1.636L15 13.95 5.625 7.922V6.286zm-2.25 2.232V18.286A2.625 2.625 0 006 20.91h18a2.625 2.625 0 002.625-2.625V8.553 6.286A2.625 2.625 0 0024 3.66H6a2.625 2.625 0 00-2.625 2.625v2.232zm21 2.079v7.689a.375.375 0 01-.375.375H6a.375.375 0 01-.375-.375v-7.69l8.564 5.508a1.5 1.5 0 001.622 0l8.564-5.507z"
100
+ fill="#242B42"
101
+ />
102
+ </svg>
103
+ )
104
+
105
+ const arrowUpShortWide = (
106
+ <svg
107
+ fill="none"
108
+ height="1.5em"
109
+ viewBox="0 0 30 25"
110
+ width="1.5em"
111
+ xmlns="http://www.w3.org/2000/svg"
112
+ >
113
+ <path
114
+ d="M3.44 8.724a1.125 1.125 0 11-1.59-1.59l4.235-4.236a1.5 1.5 0 012.12 0l4.236 4.235a1.125 1.125 0 01-1.591 1.591l-2.58-2.58V21.43a1.125 1.125 0 01-2.25 0V6.145l-2.58 2.58zM14.25 20.68c0-.622.504-1.125 1.125-1.125h12a1.125 1.125 0 110 2.25h-12a1.125 1.125 0 01-1.125-1.125zm1.125-6.63a1.125 1.125 0 000 2.25h9a1.125 1.125 0 100-2.25h-9zm-1.125-4.37c0-.622.504-1.125 1.125-1.125h6a1.125 1.125 0 110 2.25h-6a1.125 1.125 0 01-1.125-1.125zm1.125-6.625a1.125 1.125 0 000 2.25h3a1.125 1.125 0 100-2.25h-3z"
115
+ fill="#242B42"
116
+ />
117
+ </svg>
118
+ )
119
+
120
+ const arrowDownShortWide = (
121
+ <svg
122
+ fill="none"
123
+ height="1.5em"
124
+ viewBox="0 0 30 25"
125
+ width="1.5em"
126
+ xmlns="http://www.w3.org/2000/svg"
127
+ >
128
+ <path
129
+ d="M8.27 3.857a1.125 1.125 0 00-2.25 0v15.284l-2.58-2.58a1.125 1.125 0 10-1.59 1.592l4.235 4.235a1.5 1.5 0 002.12 0l4.236-4.235a1.125 1.125 0 10-1.591-1.591l-2.58 2.58V3.856zm5.98 17.25c0-.621.504-1.125 1.125-1.125h12a1.125 1.125 0 110 2.25h-12a1.125 1.125 0 01-1.125-1.125zm1.125-6.63a1.125 1.125 0 000 2.25h8.25a1.125 1.125 0 100-2.25h-8.25zm-1.125-4.37c0-.621.504-1.125 1.125-1.125h5.25a1.125 1.125 0 110 2.25h-5.25a1.125 1.125 0 01-1.125-1.125zm1.125-6.625a1.125 1.125 0 000 2.25h1.5a1.125 1.125 0 100-2.25h-1.5z"
130
+ fill="#242B42"
131
+ />
132
+ </svg>
133
+ )
134
+
135
+ const angleDown = (
136
+ <svg
137
+ fill="none"
138
+ height="1.5em"
139
+ viewBox="0 0 30 24"
140
+ width="1.5em"
141
+ xmlns="http://www.w3.org/2000/svg"
142
+ >
143
+ <path
144
+ d="M6.543 7.69a1.125 1.125 0 011.59.034L15 14.884l6.866-7.16A1.125 1.125 0 1123.49 9.28l-7.407 7.725a1.5 1.5 0 01-2.166 0L6.51 9.281a1.125 1.125 0 01.033-1.59z"
145
+ fill="#242B42"
146
+ />
147
+ </svg>
148
+ )
149
+
46
150
  export const getAllIcons = () => {
47
151
 
48
152
  return {
@@ -54,6 +158,25 @@ export const getAllIcons = () => {
54
158
  },
55
159
  times: {
56
160
  icon: times
161
+ },
162
+ shieldCheck: {
163
+ icon: shieldCheck
164
+ },
165
+ eye: {
166
+ icon: eye
167
+ },
168
+ envelope: {
169
+ icon: envelope
170
+ },
171
+ arrowUpShortWide: {
172
+ icon: arrowUpShortWide
173
+ },
174
+ arrowDownShortWide: {
175
+ icon: arrowDownShortWide
176
+ },
177
+ angleDown: {
178
+ icon: angleDown,
179
+ string: ReactDOMServer.renderToStaticMarkup(angleDown)
57
180
  }
58
181
  }
59
182
  }
@@ -0,0 +1,3 @@
1
+ <svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.54314 7.6905C6.9916 7.26047 7.70376 7.27541 8.13379 7.72387L15 14.8844L21.8662 7.72387C22.2962 7.27541 23.0084 7.26047 23.4568 7.6905C23.9053 8.12053 23.9202 8.83268 23.4902 9.28114L16.0827 17.0062C15.4922 17.6219 14.5078 17.6219 13.9173 17.0062L6.50977 9.28114C6.07975 8.83268 6.09469 8.12053 6.54314 7.6905Z" fill="black"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.62488 6.28574C5.62488 6.07863 5.79277 5.91074 5.99988 5.91074H23.9999C24.207 5.91074 24.3749 6.07863 24.3749 6.28574V7.92165L14.9999 13.9502L5.62488 7.92163V6.28574ZM3.37488 8.5181C3.37472 8.52916 3.37472 8.54021 3.37488 8.55126V18.2857C3.37488 19.7355 4.55013 20.9107 5.99988 20.9107H23.9999C25.4496 20.9107 26.6249 19.7355 26.6249 18.2857V8.55315C26.6251 8.54084 26.6251 8.52853 26.6249 8.51621V6.28574C26.6249 4.83599 25.4496 3.66074 23.9999 3.66074H5.99988C4.55013 3.66074 3.37488 4.83599 3.37488 6.28574V8.5181ZM24.3749 10.5967V18.2857C24.3749 18.4928 24.207 18.6607 23.9999 18.6607H5.99988C5.79277 18.6607 5.62488 18.4928 5.62488 18.2857V10.5967L14.1886 16.1036C14.6828 16.4214 15.317 16.4214 15.8112 16.1036L24.3749 10.5967Z" fill="black"/>
3
+ </svg>