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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/ui/button.d.ts +2 -1
  2. package/dist/ui/button.js +5 -4
  3. package/dist/ui/button.stories.d.ts +28 -10
  4. package/dist/ui/button.stories.js +19 -6
  5. package/dist/ui/form-elements/label.js +3 -3
  6. package/dist/ui/form-elements/segmented-control.d.ts +8 -0
  7. package/dist/ui/form-elements/segmented-control.js +24 -0
  8. package/dist/ui/form-elements/segmented-control.stories.d.ts +13 -0
  9. package/dist/ui/form-elements/segmented-control.stories.js +14 -0
  10. package/dist/ui/index.d.ts +1 -0
  11. package/dist/ui/index.js +1 -0
  12. package/package.json +1 -1
package/dist/ui/button.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { ButtonHTMLAttributes, FunctionComponent } from 'react';
2
2
  import 'styled-jsx';
3
3
  declare type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'color'> & {
4
- appearance?: 'default' | 'primary' | 'danger' | 'green' | 'ghost' | 'borderless';
4
+ appearance?: 'default' | 'primary' | 'danger' | 'green';
5
+ borderless?: boolean;
5
6
  fullWidth?: boolean;
6
7
  };
7
8
  export declare const Button: FunctionComponent<Props>;
package/dist/ui/button.js CHANGED
@@ -10,13 +10,14 @@ export const Button = ({
10
10
  ...props
11
11
  }) => {
12
12
  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
13
- 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({
13
+ 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({
14
14
  button: true,
15
15
  [appearance]: true,
16
+ borderless: props.borderless,
16
17
  'full-width': props.fullWidth
17
18
  }) || "")
18
19
  }), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
19
- id: "3649919407",
20
- 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]
21
- }, `.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;}`));
20
+ id: "2457126629",
21
+ 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]
22
+ }, `.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};}`));
22
23
  };
package/dist/ui/button.stories.d.ts CHANGED
@@ -1,35 +1,53 @@
1
1
  import React from 'react';
2
2
  import { ComponentStory, ComponentMeta } from '@storybook/react';
3
3
  declare const _default: ComponentMeta<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
4
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
4
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
5
+ borderless?: boolean | undefined;
5
6
  fullWidth?: boolean | undefined;
6
7
  }>>;
7
8
  export default _default;
8
9
  export declare const Basic: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
9
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
10
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
11
+ borderless?: boolean | undefined;
10
12
  fullWidth?: boolean | undefined;
11
13
  }>>;
12
14
  export declare const FullWidth: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
13
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
15
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
16
+ borderless?: boolean | undefined;
14
17
  fullWidth?: boolean | undefined;
15
18
  }>>;
16
19
  export declare const Primary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
17
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
20
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
21
+ borderless?: boolean | undefined;
18
22
  fullWidth?: boolean | undefined;
19
23
  }>>;
20
24
  export declare const Danger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
21
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
25
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
26
+ borderless?: boolean | undefined;
22
27
  fullWidth?: boolean | undefined;
23
28
  }>>;
24
29
  export declare const Green: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
25
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
30
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
31
+ borderless?: boolean | undefined;
26
32
  fullWidth?: boolean | undefined;
27
33
  }>>;
28
- export declare const Ghost: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
29
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
34
+ export declare const Borderless: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
35
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
36
+ borderless?: boolean | undefined;
30
37
  fullWidth?: boolean | undefined;
31
38
  }>>;
32
- export declare const Borderless: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
33
- appearance?: "default" | "primary" | "danger" | "green" | "ghost" | "borderless" | undefined;
39
+ export declare const BorderlessPrimary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
40
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
41
+ borderless?: boolean | undefined;
42
+ fullWidth?: boolean | undefined;
43
+ }>>;
44
+ export declare const BorderlessDanger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
45
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
46
+ borderless?: boolean | undefined;
47
+ fullWidth?: boolean | undefined;
48
+ }>>;
49
+ export declare const BorderlessGreen: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
50
+ appearance?: "default" | "primary" | "danger" | "green" | undefined;
51
+ borderless?: boolean | undefined;
34
52
  fullWidth?: boolean | undefined;
35
53
  }>>;
package/dist/ui/button.stories.js CHANGED
@@ -31,13 +31,26 @@ Green.args = {
31
31
  children: 'green',
32
32
  appearance: 'green'
33
33
  };
34
- export const Ghost = Template.bind({});
35
- Ghost.args = {
36
- children: 'ghost',
37
- appearance: 'ghost'
38
- };
39
34
  export const Borderless = Template.bind({});
40
35
  Borderless.args = {
41
36
  children: 'borderless',
42
- appearance: 'borderless'
37
+ borderless: true
38
+ };
39
+ export const BorderlessPrimary = Template.bind({});
40
+ BorderlessPrimary.args = {
41
+ children: 'borderless primaray',
42
+ borderless: true,
43
+ appearance: 'primary'
44
+ };
45
+ export const BorderlessDanger = Template.bind({});
46
+ BorderlessDanger.args = {
47
+ children: 'borderless danger',
48
+ borderless: true,
49
+ appearance: 'danger'
50
+ };
51
+ export const BorderlessGreen = Template.bind({});
52
+ BorderlessGreen.args = {
53
+ children: 'borderless green',
54
+ borderless: true,
55
+ appearance: 'green'
43
56
  };
package/dist/ui/form-elements/label.js CHANGED
@@ -6,9 +6,9 @@ import React from 'react';
6
6
  import { theme } from '../../lib';
7
7
  export const Label = props => {
8
8
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", _extends({}, props, {
9
- className: _JSXStyle.dynamic([["2896178063", [theme.fonts.secondary, theme.colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
9
+ className: _JSXStyle.dynamic([["1848048607", [theme.fonts.secondary, theme.colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
10
10
  }), props.children), /*#__PURE__*/React.createElement(_JSXStyle, {
11
- id: "2896178063",
11
+ id: "1848048607",
12
12
  dynamic: [theme.fonts.secondary, theme.colors.enterDarkGrey]
13
- }, `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;}`));
13
+ }, `label.__jsx-style-dynamic-selector{display:block;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;}`));
14
14
  };
package/dist/ui/form-elements/segmented-control.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FunctionComponent } from 'react';
2
+ declare type Props = {
3
+ segments: string[];
4
+ activeSegment?: string;
5
+ onChange: (segment: string) => void;
6
+ };
7
+ export declare const SegmentedControl: FunctionComponent<Props>;
8
+ export {};
package/dist/ui/form-elements/segmented-control.js ADDED
@@ -0,0 +1,24 @@
1
+ import _JSXStyle from "styled-jsx/style";
2
+ import React from 'react';
3
+ import { theme } from '../../lib';
4
+ export const SegmentedControl = props => {
5
+ const name = props.segments.join('');
6
+ return /*#__PURE__*/React.createElement("div", {
7
+ className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segmented-controll'
8
+ }, props.segments.map(segment => /*#__PURE__*/React.createElement("div", {
9
+ className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segment'
10
+ }, /*#__PURE__*/React.createElement("input", {
11
+ type: "radio",
12
+ id: segment,
13
+ name: name,
14
+ checked: segment === props.activeSegment,
15
+ onChange: () => props.onChange(segment),
16
+ className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
17
+ }), /*#__PURE__*/React.createElement("label", {
18
+ htmlFor: segment,
19
+ className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
20
+ }, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
21
+ id: "235524868",
22
+ dynamic: [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]
23
+ }, `.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;}`));
24
+ };
package/dist/ui/form-elements/segmented-control.stories.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
3
+ declare const _default: ComponentMeta<React.FunctionComponent<{
4
+ segments: string[];
5
+ activeSegment?: string | undefined;
6
+ onChange: (segment: string) => void;
7
+ }>>;
8
+ export default _default;
9
+ export declare const Basic: ComponentStory<React.FunctionComponent<{
10
+ segments: string[];
11
+ activeSegment?: string | undefined;
12
+ onChange: (segment: string) => void;
13
+ }>>;
package/dist/ui/form-elements/segmented-control.stories.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { SegmentedControl } from './segmented-control';
3
+ export default {
4
+ title: 'Form Elements/Segmented Control',
5
+ component: SegmentedControl
6
+ };
7
+
8
+ const Template = args => /*#__PURE__*/React.createElement(SegmentedControl, args);
9
+
10
+ export const Basic = Template.bind({});
11
+ Basic.args = {
12
+ segments: ['One', 'Two', 'Three'],
13
+ activeSegment: 'One'
14
+ };
package/dist/ui/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { Input } from './form-elements/input';
2
2
  export { Label } from './form-elements/label';
3
+ export { SegmentedControl } from './form-elements/segmented-control';
3
4
  export { Button } from './button';
4
5
  export { CheckinCountIndicator } from './checkin-count-indicator';
5
6
  export { CompanionInfo } from './companion-info';
package/dist/ui/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export { Input } from './form-elements/input';
2
2
  export { Label } from './form-elements/label';
3
+ export { SegmentedControl } from './form-elements/segmented-control';
3
4
  export { Button } from './button';
4
5
  export { CheckinCountIndicator } from './checkin-count-indicator';
5
6
  export { CompanionInfo } from './companion-info';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-crew-berlin/enter-js-utils",
3
- "version": "0.7.2",
3
+ "version": "0.9.1",
4
4
  "description": "utils such as vaildation and other helpers to work with data from the enter app",
5
5
  "files": [
6
6
  "dist",