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

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/segmented-control.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+declare type Props = {
+    segments: string[];
+    activeSegment?: string;
+};
+export declare const SegmentedConrol: FunctionComponent<Props>;
+export {};

package/dist/ui/form-elements/segmented-control.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "styled-jsx/style";
+import React from 'react';
+import { theme } from '../../lib';
+export const SegmentedConrol = props => {
+  const name = props.segments.join('');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segmented-controll'
+  }, props.segments.map(segment => /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segment'
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    id: segment,
+    name: name,
+    checked: segment === props.activeSegment,
+    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: segment,
+    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
+  }, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "235524868",
+    dynamic: [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]
+  }, `.segmented-controll.__jsx-style-dynamic-selector{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:2px;}.segment.__jsx-style-dynamic-selector{position:relative;}.segment.__jsx-style-dynamic-selector:first-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:first-child input.__jsx-style-dynamic-selector{border-radius:2px 0 0 2px;}.segment.__jsx-style-dynamic-selector:last-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:last-child input.__jsx-style-dynamic-selector{border-radius:0 2px 2px 0;}label.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};text-transform:uppercase;font-size:0.9em;-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;padding:0.7em 0.5em;text-align:center;background-color:${theme.colors.enterLightGrey};box-sizing:border-box;display:block;width:100%;height:100%;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;cursor:pointer;}label.__jsx-style-dynamic-selector:hover{background-color:${theme.colors.enterMediumGrey};color:white;}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;}input.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;width:100%;height:100%;background-color:transparent;pointer-events:none;}`));
+};

package/dist/ui/form-elements/segmented-control.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<{
+    segments: string[];
+    activeSegment?: string | undefined;
+}>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<{
+    segments: string[];
+    activeSegment?: string | undefined;
+}>>;

package/dist/ui/form-elements/segmented-control.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SegmentedConrol } from './segmented-control';
+export default {
+  title: 'Form Elements/Segmented Conrol',
+  component: SegmentedConrol
+};
+
+const Template = args => /*#__PURE__*/React.createElement(SegmentedConrol, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  segments: ['One', 'Two', 'Three'],
+  activeSegment: 'One'
+};

package/dist/ui/index.d.ts

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

package/dist/ui/index.js

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

package/package.json

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