@dev-crew-berlin/enter-js-utils 0.7.1 → 0.8.1

package/dist/ui/button.js

@@ -10,13 +10,13 @@ export const Button = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    className: _JSXStyle.dynamic([["426689610", [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({
+    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: "426689610",
+    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{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;}`));
+  }, `.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/form-elements/segmented-control.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+declare type Props = {
+    segments: string[];
+    activeSegment?: string;
+};
+export declare const SegmentedControl: 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 SegmentedControl = 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 { SegmentedControl } from './segmented-control';
+export default {
+  title: 'Form Elements/Segmented Control',
+  component: SegmentedControl
+};
+
+const Template = args => /*#__PURE__*/React.createElement(SegmentedControl, 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 { SegmentedControl } 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 { SegmentedControl } 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.1",
+  "version": "0.8.1",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",