@dev-crew-berlin/enter-js-utils 0.31.1 → 0.32.0

package/dist/ui/form-elements/search-input.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent, InputHTMLAttributes } from 'react';
+declare type Props = InputHTMLAttributes<HTMLInputElement> & {
+    textColor: string;
+    borderColor: string;
+    placeholder: string;
+};
+export declare const SearchInput: FunctionComponent<Props>;
+export {};

package/dist/ui/form-elements/search-input.js

@@ -0,0 +1,29 @@
+import _JSXStyle from "styled-jsx/style";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useId } from 'react';
+import { theme } from '../../lib';
+import { SearchIcon } from '../icons/search-icon';
+export const SearchInput = ({
+  textColor = theme.colors.enterDarkGrey,
+  borderColor = theme.colors.enterMediumGrey,
+  placeholder = 'Search',
+  ...props
+}) => {
+  const id = useId();
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1366111563", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + 'search-input'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1366111563", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + 'icon'
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    color: textColor
+  })), /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    placeholder: placeholder,
+    id: id,
+    className: _JSXStyle.dynamic([["1366111563", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1366111563",
+    dynamic: [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]
+  }, `.search-input.__jsx-style-dynamic-selector{display:grid;grid-template-areas:'icon-input';-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1.1em;}.icon.__jsx-style-dynamic-selector{grid-area:icon-input;width:12px;height:14px;margin:0 0 0 0.2em;}input.__jsx-style-dynamic-selector{grid-area:icon-input;font-family:${theme.fonts.primary};font-size:1.1em;display:block;width:calc(100% - 20px);padding:0.2em 0 0.2em 20px;border:none;outline:none;background-color:transparent;color:${textColor};border-bottom:1px solid ${borderColor};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;}input.__jsx-style-dynamic-selector:focus{border-color:${theme.colors.enterRed};}`));
+};

package/dist/ui/form-elements/search-input.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    textColor: string;
+    borderColor: string;
+    placeholder: string;
+}>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    textColor: string;
+    borderColor: string;
+    placeholder: string;
+}>>;

package/dist/ui/form-elements/search-input.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchInput } from './search-input';
+import { theme } from '../../lib';
+export default {
+  title: 'Form Elements/SearchInput',
+  component: SearchInput
+};
+
+const Template = args => /*#__PURE__*/React.createElement(SearchInput, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  textColor: theme.colors.enterDarkGrey,
+  borderColor: theme.colors.enterMediumGrey,
+  placeholder: 'Search'
+};

package/dist/ui/icons/{caret.d.ts → caret-icon.d.ts}

@@ -3,5 +3,5 @@ declare type Props = {
     color?: string;
     rotateDeg: number;
 };
-export declare const Caret: FunctionComponent<Props>;
+export declare const CaretIcon: FunctionComponent<Props>;
 export {};

package/dist/ui/icons/{caret.js → caret-icon.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { colors } from '../../lib/theme';
-export const Caret = ({
+export const CaretIcon = ({
   color = colors.enterDarkGrey,
   rotateDeg = 0
 }) => {

package/dist/ui/icons/{caret.stories.js → caret-icon.stories.js}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Caret } from './caret';
+import { CaretIcon } from './caret-icon';
 export default {
   title: 'Icons/Caret',
-  component: Caret
+  component: CaretIcon
 };
 
-const Template = args => /*#__PURE__*/React.createElement(Caret, args);
+const Template = args => /*#__PURE__*/React.createElement(CaretIcon, args);
 
 export const Basic = Template.bind({});
 Basic.args = {};

package/dist/ui/index.d.ts

@@ -1,7 +1,13 @@
 export { Input } from './form-elements/input';
 export { Label } from './form-elements/label';
+export { SearchInput } from './form-elements/search-input';
 export { SegmentedControl } from './form-elements/segmented-control';
+export { AddGuestIcon } from './icons/add-guest-icon';
+export { CaretIcon } from './icons/caret-icon';
+export { FilterIcon } from './icons/filter-icon';
+export { SearchIcon } from './icons/search-icon';
 export { SettingsIcon } from './icons/settings-icon';
+export { SortListIcon } from './icons/sort-list-icon';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CheckinProgressBar } from './checkin-progress-bar';

package/dist/ui/index.js

@@ -1,7 +1,13 @@
 export { Input } from './form-elements/input';
 export { Label } from './form-elements/label';
+export { SearchInput } from './form-elements/search-input';
 export { SegmentedControl } from './form-elements/segmented-control';
+export { AddGuestIcon } from './icons/add-guest-icon';
+export { CaretIcon } from './icons/caret-icon';
+export { FilterIcon } from './icons/filter-icon';
+export { SearchIcon } from './icons/search-icon';
 export { SettingsIcon } from './icons/settings-icon';
+export { SortListIcon } from './icons/sort-list-icon';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CheckinProgressBar } from './checkin-progress-bar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",