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

package/dist/ui/button.d.ts

@@ -1,7 +1,8 @@
 import { ButtonHTMLAttributes, FunctionComponent } from 'react';
 import 'styled-jsx';
 declare type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'color'> & {
-    appearance?: 'default' | 'primary' | 'danger' | 'green';
+    appearance?: 'default' | 'primary' | 'danger' | 'green' | 'ghost' | 'borderless';
+    fullWidth?: boolean;
 };
 export declare const Button: FunctionComponent<Props>;
 export {};

package/dist/ui/button.js

@@ -4,15 +4,19 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import 'styled-jsx';
-import { theme } from '../lib';
+import { theme, classNames } from '../lib';
 export const Button = ({
   appearance = 'default',
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1344288011", [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterBackground, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, theme.colors.enterGreen]]]) + " " + `button ${appearance}`
+    className: _JSXStyle.dynamic([["3649919407", [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterBackground, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, theme.colors.enterGreen, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey]]]) + " " + (classNames({
+      button: true,
+      [appearance]: true,
+      'full-width': props.fullWidth
+    }) || "")
   }), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1344288011",
-    dynamic: [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterBackground, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, theme.colors.enterGreen]
-  }, `.button.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};margin:1em 0;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:2px;background-color:${theme.colors.enterBackground};color:${theme.colors.enterDarkGrey};border:1px solid ${theme.colors.enterGrey};box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24);}.danger.__jsx-style-dynamic-selector{background-color:${theme.colors.enterBackground};color:${theme.colors.enterError};border:1px solid ${theme.colors.enterGrey};}.primary.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;border:1px solid ${theme.colors.enterDarkGrey};}.green.__jsx-style-dynamic-selector{background-color:${theme.colors.enterGreen};color:white;border:1px solid ${theme.colors.enterGreen};}`));
+    id: "3649919407",
+    dynamic: [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterBackground, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, theme.colors.enterGreen, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey]
+  }, `.button.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};margin:1em 0;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:2px;background-color:${theme.colors.enterBackground};color:${theme.colors.enterDarkGrey};border:1px solid ${theme.colors.enterGrey};box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24);}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{background-color:${theme.colors.enterBackground};color:${theme.colors.enterError};border:1px solid ${theme.colors.enterGrey};}.primary.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;border:1px solid ${theme.colors.enterDarkGrey};}.green.__jsx-style-dynamic-selector{background-color:${theme.colors.enterGreen};color:white;border:1px solid ${theme.colors.enterGreen};}.ghost.__jsx-style-dynamic-selector{background-color:transparent;color:${theme.colors.enterDarkGrey};border:1px solid ${theme.colors.enterDarkGrey};box-shadow:none;}.borderless.__jsx-style-dynamic-selector{background-color:transparent;color:${theme.colors.enterDarkGrey};border:0;box-shadow:none;}`));
 };

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

@@ -1,18 +1,35 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
 }>>;
 export default _default;
 export declare const Basic: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
+}>>;
+export declare const FullWidth: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
 }>>;
 export declare const Primary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
 }>>;
 export declare const Danger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
 }>>;
 export declare const Green: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
+}>>;
+export declare const Ghost: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
+}>>;
+export declare const Borderless: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
+    appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
+    fullWidth?: boolean | undefined;
 }>>;

package/dist/ui/button.stories.js

@@ -11,6 +11,11 @@ export const Basic = Template.bind({});
 Basic.args = {
   children: 'default'
 };
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  children: 'full width',
+  fullWidth: true
+};
 export const Primary = Template.bind({});
 Primary.args = {
   children: 'primary',
@@ -25,4 +30,14 @@ export const Green = Template.bind({});
 Green.args = {
   children: 'green',
   appearance: 'green'
+};
+export const Ghost = Template.bind({});
+Ghost.args = {
+  children: 'ghost',
+  appearance: 'ghost'
+};
+export const Borderless = Template.bind({});
+Borderless.args = {
+  children: 'borderless',
+  appearance: 'borderless'
 };

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.2",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",