@dev-crew-berlin/enter-js-utils 0.9.1 → 0.10.0

package/dist/ui/button.js

@@ -10,14 +10,14 @@ export const Button = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2457126629", [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterError, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, theme.colors.enterGreen, theme.colors.enterGreen]]]) + " " + (classNames({
+    className: _JSXStyle.dynamic([["4253066945", [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterError, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, theme.colors.enterGreen, theme.colors.enterGreen]]]) + " " + (classNames({
       button: true,
       [appearance]: true,
       borderless: props.borderless,
       'full-width': props.fullWidth
     }) || "")
   }), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2457126629",
+    id: "4253066945",
     dynamic: [theme.fonts.secondary, theme.colors.enterBackground, theme.colors.enterDarkGrey, theme.colors.enterGrey, theme.colors.enterError, theme.colors.enterGrey, theme.colors.enterError, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterDarkGrey, theme.colors.enterGreen, 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);}.button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${theme.colors.enterError};border:1px solid ${theme.colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${theme.colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;border:1px solid ${theme.colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${theme.colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${theme.colors.enterGreen};color:white;border:1px solid ${theme.colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${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);}.button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;padding:0;margin:2em 0 1.8em;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${theme.colors.enterError};border:1px solid ${theme.colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${theme.colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;border:1px solid ${theme.colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${theme.colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${theme.colors.enterGreen};color:white;border:1px solid ${theme.colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${theme.colors.enterGreen};}`));
 };

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

@@ -51,3 +51,4 @@ export declare const BorderlessGreen: ComponentStory<React.FunctionComponent<Omi
     borderless?: boolean | undefined;
     fullWidth?: boolean | undefined;
 }>>;
+export declare const OnePrimaryAndTwoBorderless: () => JSX.Element;

package/dist/ui/button.stories.js

@@ -53,4 +53,14 @@ BorderlessGreen.args = {
   children: 'borderless green',
   borderless: true,
   appearance: 'green'
-};
+};
+export const OnePrimaryAndTwoBorderless = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  fullWidth: true,
+  appearance: "primary"
+}, "Primary"), /*#__PURE__*/React.createElement(Button, {
+  fullWidth: true,
+  borderless: true
+}, "1st secondary option"), /*#__PURE__*/React.createElement(Button, {
+  fullWidth: true,
+  borderless: true
+}, "2nd secondary option"));

package/dist/ui/enter-logo.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+declare type Props = {
+    white?: boolean;
+};
+export declare const EnterLogo: FunctionComponent<Props>;
+export {};

package/dist/ui/enter-logo.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { theme } from '../lib';
+export const EnterLogo = props => {
+  const color = props.white ? 'white' : theme.colors.enterRed;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 96 108"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "transparent",
+    d: "M0 23.668C0 10.596 10.594 0 23.669 0h48.662C85.403 0 96 10.602 96 23.668v60.664C96 97.404 85.406 108 72.331 108H0V23.668Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M0 48.884V23.668C0 15.061 4.593 7.527 11.463 3.385l62.592 45.5H0v-.001Zm0 9.095h73.246L34.618 84.187c-2.12 1.437-2.638 4.272-1.159 6.332 1.479 2.059 4.395 2.563 6.514 1.126L90.8 57.16l5.2-3.528v30.7C96 97.404 85.406 108 72.331 108H0V57.979ZM22.471.029C22.868.01 23.267 0 23.669 0h48.662C85.403 0 96 10.602 96 23.668V53.48l-5.076-3.69L22.471.03V.029Z"
+  })));
+};

package/dist/ui/enter-logo.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<{
+    white?: boolean | undefined;
+}>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<{
+    white?: boolean | undefined;
+}>>;
+export declare const White: ComponentStory<React.FunctionComponent<{
+    white?: boolean | undefined;
+}>>;

package/dist/ui/enter-logo.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { EnterLogo } from './enter-logo';
+export default {
+  title: 'Enter Logo',
+  component: EnterLogo
+};
+
+const Template = args => /*#__PURE__*/React.createElement(EnterLogo, args);
+
+export const Basic = Template.bind({});
+Basic.args = {};
+export const White = Template.bind({});
+White.parameters = {
+  backgrounds: {
+    default: 'dark'
+  }
+};
+White.args = {
+  white: true
+};

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

@@ -1,8 +1,8 @@
-import { FunctionComponent } from 'react';
-declare type Props = {
-    segments: string[];
-    activeSegment?: string;
-    onChange: (segment: string) => void;
+import { ReactElement } from 'react';
+declare type Props<Segment extends string> = {
+    segments: Segment[];
+    activeSegment?: Segment;
+    onChange: (segment: Segment) => void;
 };
-export declare const SegmentedControl: FunctionComponent<Props>;
+export declare const SegmentedControl: <Segment extends string>(props: Props<Segment>) => ReactElement;
 export {};

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    segments: string[];
-    activeSegment?: string | undefined;
-    onChange: (segment: string) => void;
-}>>;
+declare const _default: ComponentMeta<(<Segment extends string>(props: {
+    segments: Segment[];
+    activeSegment?: Segment | undefined;
+    onChange: (segment: Segment) => void;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
 export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    segments: string[];
-    activeSegment?: string | undefined;
-    onChange: (segment: string) => void;
-}>>;
+export declare const Basic: ComponentStory<(<Segment extends string>(props: {
+    segments: Segment[];
+    activeSegment?: Segment | undefined;
+    onChange: (segment: Segment) => void;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;

package/dist/ui/index.d.ts

@@ -4,6 +4,7 @@ export { SegmentedControl } from './form-elements/segmented-control';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';
+export { EnterLogo } from './enter-logo';
 export { Fonts } from './fonts';
 export { GuestCard } from './guest-card';
 export { Tag } from './tag';

package/dist/ui/index.js

@@ -4,6 +4,7 @@ export { SegmentedControl } from './form-elements/segmented-control';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';
+export { EnterLogo } from './enter-logo';
 export { Fonts } from './fonts';
 export { GuestCard } from './guest-card';
 export { Tag } from './tag';

package/package.json

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