@dev-crew-berlin/enter-js-utils 0.6.3 → 0.7.0

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

@@ -0,0 +1,6 @@
+import { FunctionComponent, InputHTMLAttributes } from 'react';
+declare type Props = InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+};
+export declare const Input: FunctionComponent<Props>;
+export {};

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

@@ -0,0 +1,22 @@
+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 from 'react';
+import { theme } from '../../lib';
+import { Label } from './label';
+export const Input = ({
+  label,
+  ...props
+}) => {
+  const id = props.id ?? label;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    id: id,
+    className: _JSXStyle.dynamic([["3631038054", [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterMediumGrey, theme.colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3631038054",
+    dynamic: [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterMediumGrey, theme.colors.enterRed]
+  }, `input.__jsx-style-dynamic-selector{font-family:${theme.fonts.primary};font-size:1.1em;display:block;width:100%;padding:0.2em 0;margin-bottom:1.1em;border:none;outline:none;background-color:transparent;color:${theme.colors.enterDarkGrey};border-bottom:1px solid ${theme.colors.enterMediumGrey};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/input.stories.d.ts

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Input } from './input';
+export default {
+  title: 'Form Elements/Input',
+  component: Input
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Input, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  type: 'text',
+  label: 'Text input',
+  placeholder: 'Enter text here',
+  value: '',
+  onClick: () => undefined
+};
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+  type: 'number',
+  label: 'Number input',
+  placeholder: 'Enter number here',
+  value: '',
+  onClick: () => undefined
+};
+export const WithValue = Template.bind({});
+WithValue.args = {
+  type: 'text',
+  label: 'Text input',
+  placeholder: 'Enter text here',
+  value: 'Text value',
+  onClick: () => undefined
+};

package/dist/ui/form-elements/label.d.ts

@@ -0,0 +1,4 @@
+import React, { LabelHTMLAttributes } from 'react';
+declare type Props = LabelHTMLAttributes<HTMLLabelElement>;
+export declare const Label: React.FunctionComponent<Props>;
+export {};

package/dist/ui/form-elements/label.js

@@ -0,0 +1,14 @@
+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 from 'react';
+import { theme } from '../../lib';
+export const Label = props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2896178063", [theme.fonts.secondary, theme.colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
+  }), props.children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2896178063",
+    dynamic: [theme.fonts.secondary, theme.colors.enterDarkGrey]
+  }, `label.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};font-weight:400;font-size:0.9em;color:${theme.colors.enterDarkGrey};-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;margin-bottom:0.6em;}`));
+};

package/dist/ui/form-elements/label.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>>;

package/dist/ui/form-elements/label.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Label } from './label';
+export default {
+  title: 'Form Elements/Label',
+  component: Label
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Label, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  children: 'Label text'
+};

package/dist/ui/index.d.ts

@@ -1,3 +1,5 @@
+export { Input } from './form-elements/input';
+export { Label } from './form-elements/label';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';

package/dist/ui/index.js

@@ -1,3 +1,5 @@
+export { Input } from './form-elements/input';
+export { Label } from './form-elements/label';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';

package/dist/ui/tag.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<{
+    children: React.ReactNode;
+}>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<{
+    children: React.ReactNode;
+}>>;

package/dist/ui/tag.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Tag } from './tag';
+export default {
+  title: 'Tag',
+  component: Tag
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Tag, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  children: 'my tag'
+};

package/package.json

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