Web: Add calendar icon, export select style, and add type to validati…

…on rule (#30817) (#31036)

* Add calendar icon

* Add another type to valdiation rule

* Export select style

web/packages/design/src/SVGIcon/Calendar.tsx

@@ -0,0 +1,64 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import React from 'react';
+
+import { SVGIcon } from './SVGIcon';
+
+import type { SVGIconProps } from './common';
+
+export function Calendar({ size = 24, fill }: SVGIconProps) {
+  return (
+    <SVGIcon
+      size={size}
+      color={fill}
+      className="icon icon-calendar"
+      viewBox="0 0 24 24"
+    >
+      <path d="M10.1442 10.612C10.3653 10.7487 10.4999 10.9901 10.4999 11.25V17.25C10.4999 17.6642 10.1641 18 9.74992 18C9.33571 18 8.99992 17.6642 8.99992 17.25V12.4635L8.58533 12.6708C8.21485 12.8561 7.76434 12.7059 7.5791 12.3354C7.39386 11.9649 7.54403 11.5144 7.91451 11.3292L9.41451 10.5792C9.647 10.4629 9.92311 10.4754 10.1442 10.612Z" />
+      <path d="M14.0767 12.0227C14.1762 11.9994 14.2794 11.9967 14.38 12.0147C14.4806 12.0327 14.5764 12.0711 14.6616 12.1275C14.7469 12.1839 14.8196 12.2571 14.8755 12.3426C14.9314 12.4282 14.9693 12.5242 14.9867 12.6249C15.0042 12.7256 15.0009 12.8288 14.977 12.9281C14.9531 13.0273 14.9091 13.121 14.8479 13.2027L12.15 16.7996C11.9796 17.0268 11.9521 17.3309 12.0792 17.585C12.2062 17.8391 12.4659 17.9996 12.75 17.9996H15.75C16.1642 17.9996 16.5 17.6638 16.5 17.2496C16.5 16.8354 16.1642 16.4996 15.75 16.4996H14.2501L16.0483 14.1021C16.2321 13.8568 16.3639 13.5765 16.4355 13.2785C16.5071 12.9804 16.517 12.6709 16.4647 12.3688C16.4124 12.0668 16.2989 11.7786 16.1312 11.522C15.9635 11.2654 15.7451 11.0458 15.4895 10.8766C15.2338 10.7074 14.9463 10.5923 14.6446 10.5382C14.3428 10.4841 14.0332 10.4923 13.7348 10.5622C13.4363 10.6321 13.1553 10.7622 12.9089 10.9446C12.6625 11.127 12.456 11.3578 12.3021 11.6229C12.094 11.9811 12.2158 12.4401 12.574 12.6481C12.9321 12.8562 13.3912 12.7344 13.5992 12.3763C13.6505 12.2879 13.7193 12.211 13.8015 12.1502C13.8836 12.0894 13.9773 12.046 14.0767 12.0227Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.25 2.25C17.25 1.83579 16.9142 1.5 16.5 1.5C16.0858 1.5 15.75 1.83579 15.75 2.25V3H8.25V2.25C8.25 1.83579 7.91421 1.5 7.5 1.5C7.08579 1.5 6.75 1.83579 6.75 2.25V3H4.5C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H17.25V2.25ZM19.5 4.5H17.25V5.25C17.25 5.66421 16.9142 6 16.5 6C16.0858 6 15.75 5.66421 15.75 5.25V4.5H8.25V5.25C8.25 5.66421 7.91421 6 7.5 6C7.08579 6 6.75 5.66421 6.75 5.25V4.5H4.5V7.5H19.5V4.5ZM4.5 9H19.5V19.5H4.5V9Z"
+      />
+    </SVGIcon>
+  );
+}

web/packages/design/src/SVGIcon/index.ts

@@ -23,6 +23,7 @@ export { AuditLogIcon } from './AuditLog';
 export { AuthConnectorsIcon } from './AuthConnectors';
 export { AWSIcon } from './AWS';
 export { BrainIcon } from './Brain';
+export { Calendar } from './Calendar';
 export { ChatIcon } from './Chat';
 export { CheckIcon } from './Check';
 export { ChevronDownIcon } from './ChevronDown';

web/packages/shared/components/Select/index.ts

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Select, { SelectAsync } from './Select';
+import Select, { SelectAsync, StyledSelect } from './Select';
 import DarkStyledSelect from './DarkStyledSelect';
 
 export * from './types';
 export default Select;
-export { SelectAsync, DarkStyledSelect };
+export { SelectAsync, DarkStyledSelect, StyledSelect };

web/packages/shared/components/Validation/rules.ts

@@ -20,13 +20,16 @@ limitations under the License.
  * @param message The custom error message to display to users.
  * @param value The value user entered.
  */
-const requiredField = (message: string) => (value: string) => () => {
-  const valid = !(!value || value.length === 0);
-  return {
-    valid,
-    message: !valid ? message : '',
+const requiredField =
+  (message: string) =>
+  <T = string>(value: string | T[]) =>
+  () => {
+    const valid = !(!value || value.length === 0);
+    return {
+      valid,
+      message: !valid ? message : '',
+    };
   };
-};
 
 const requiredToken = (value: string) => () => {
   if (!value || value.length === 0) {