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

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