@dev-crew-berlin/enter-js-utils 0.72.0 → 0.80.0

package/dist/models/field.d.ts

@@ -5,6 +5,9 @@ export declare type StaticField = components['schemas']['StaticField-Output'] &
 export declare type TextField = components['schemas']['TextField-Output'] & {
     group: string;
 };
+export declare type LongtextField = components['schemas']['LongtextField-Output'] & {
+    group: string;
+};
 export declare type EmailField = components['schemas']['EmailField-Output'] & {
     group: string;
 };
@@ -23,6 +26,12 @@ export declare type RadioField = components['schemas']['RadioButtonGroupField-Ou
 export declare type SelectField = components['schemas']['DropdownField-Output'] & {
     group: string;
 };
+export declare type CodeField = components['schemas']['CodeField-Output'] & {
+    group: string;
+};
+export declare type DateField = components['schemas']['DateField-Output'] & {
+    group: string;
+};
 export declare type Field = components['schemas']['FieldGroup-Output']['questions'][number] & {
     group: string;
 };

package/dist/models/index.d.ts

@@ -1,5 +1,8 @@
 export { Attendee } from './attendee';
 export type { AttendeeJSON } from './attendee';
+export { Branch } from './branch';
+export type { BranchJSON } from './branch';
+export type { CheckinCounter } from './checkin-counter';
 export type { CheckinCounts } from './checkin-counts';
 export { Checkin } from './checkin';
 export { Rsvp } from './rsvp';

package/dist/models/index.js

@@ -1,4 +1,5 @@
 export { Attendee } from './attendee';
+export { Branch } from './branch';
 export { Checkin } from './checkin';
 export { Rsvp } from './rsvp';
 export { Checkins } from './checkins';

package/dist/models/instance.d.ts

@@ -1,11 +1,12 @@
 import { components } from '../generated/api-schema';
 import { Attendee } from './attendee';
+import { Branch } from './branch';
 export declare type InstanceJSON = components['schemas']['PublicInstance'];
 export declare class Instance {
     name: string;
     title: string;
     description: string;
-    checkinTags: string[];
+    branches: Map<string, Branch>;
     hasTumbnail: boolean;
     frontend: {
         domain: string;

package/dist/models/instance.js

@@ -1,9 +1,10 @@
+import { Branch } from './branch';
 export class Instance {
   constructor(json) {
     this.name = json.name;
     this.title = json.title;
     this.description = json.description;
-    this.checkinTags = json.checkins;
+    this.branches = new Map(Object.entries(json.branches).map(([branchName, branchJSON]) => [branchName, new Branch(branchJSON)]));
     this.hasTumbnail = json.thumbnail;
     this.frontend = json.frontend;
     this.registration = {
@@ -18,11 +19,13 @@ export class Instance {
     this.tagColors = json.tagColors;
   }
   toJSON() {
+    // convert each branch to its json representation
+    const branches = Object.fromEntries(new Map(Object.entries(this.branches).map(([branchName, branch]) => [branchName, branch.toJSON()])));
     return {
       name: this.name,
       title: this.title,
       description: this.description,
-      checkins: this.checkinTags,
+      branches: branches,
       thumbnail: this.hasTumbnail,
       frontend: this.frontend,
       registration: {
@@ -64,7 +67,7 @@ export class Instance {
       // just use the first value we can find
       return Object.values(guest.userdata).slice(0, 1).join('');
     }
-    return this.guestNameFields.map(fieldKey => guest.userdata[fieldKey] ?? '').join(' ');
+    return this.guestNameFields.map(fieldKey => guest.userdata.get(fieldKey) ?? '').join(' ');
   }
   getTagColor(tag) {
     return this.tagColors[tag] ?? undefined;

package/dist/models/rsvp.d.ts

@@ -5,9 +5,10 @@ export declare class Rsvp {
     tieBreaker: string;
     time: Date | null;
     personCount: number;
+    checkinCounters: Set<string>;
     constructor(args: RsvpJSONInput | number);
-    static confirm(personCount?: number): Rsvp;
-    static decline(): Rsvp;
+    static confirming(personCount?: number): Rsvp;
+    static declining(): Rsvp;
     get confirmed(): boolean;
     toJSON(): RsvpJSON;
 }

package/dist/models/rsvp.js

@@ -5,19 +5,21 @@ export class Rsvp {
       this.tieBreaker = uuidv4();
       this.time = new Date();
       this.personCount = args;
+      this.checkinCounters = new Set(['main']);
       return;
     }
     this.tieBreaker = args.tieBreaker ?? uuidv4();
     this.time = args.time ? new Date(args.time) : null;
     this.personCount = args.personCount;
+    this.checkinCounters = new Set(args.checkinCounters ?? ['main']);
   }
-  static confirm(personCount = 1) {
+  static confirming(personCount = 1) {
     if (personCount < 1) {
-      throw new Error('negative person count is not a positive response');
+      throw new Error('zero or negative person count is not a positive response');
     }
     return new Rsvp(personCount);
   }
-  static decline() {
+  static declining() {
     return new Rsvp(0);
   }
   get confirmed() {
@@ -28,7 +30,8 @@ export class Rsvp {
       tieBreaker: this.tieBreaker,
       time: this.time ? this.time.toISOString() : null,
       personCount: this.personCount,
-      confirmed: this.confirmed
+      confirmed: this.confirmed,
+      checkinCounters: Array.from(this.checkinCounters)
     };
   }
 }

package/dist/ui/button.js

@@ -1,8 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import 'styled-jsx';
-import { theme, classNames } from '../lib';
+import { classNames } from '../lib/class-names';
+import { colors, fonts } from '../lib/theme';
 export const Button = ({
   appearance = 'default',
   borderless,
@@ -10,13 +11,13 @@ export const Button = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1553186505", [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([["4186526764", [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]]]) + " " + (classNames({
       [appearance]: true,
       'full-width': fullWidth,
       borderless
     }) || "")
   }), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1553186505",
-    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 0.8em;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.__jsx-style-dynamic-selector:disabled{opacity:0.5;cursor:not-allowed;}button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;margin:0.2em 0;}.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};}`));
+    id: "4186526764",
+    dynamic: [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]
+  }, `button.__jsx-style-dynamic-selector{font-family:${fonts.secondary};margin:1em 0 0.8em;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:${colors.enterBackground};color:${colors.enterDarkGrey};border:1px solid ${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.__jsx-style-dynamic-selector:disabled{opacity:0.5;cursor:not-allowed;}button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;margin:0.2em 0;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${colors.enterError};border:1px solid ${colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;border:1px solid ${colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};color:white;border:1px solid ${colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${colors.enterGreen};}`));
 };

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

@@ -1,59 +1,16 @@
-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;
-    borderless?: boolean | 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;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const FullWidth: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const Primary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const Danger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const Green: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const Borderless: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const BorderlessPrimary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const BorderlessDanger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const BorderlessGreen: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const Disabled: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
-    appearance?: "default" | "primary" | "danger" | "green" | undefined;
-    borderless?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}>>;
-export declare const OnePrimaryAndTwoBorderless: () => React.JSX.Element;
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+declare type Story = StoryObj<typeof Button>;
+export declare const Basic: Story;
+export declare const FullWidth: Story;
+export declare const Primary: Story;
+export declare const Danger: Story;
+export declare const Green: Story;
+export declare const Borderless: Story;
+export declare const BorderlessPrimary: Story;
+export declare const BorderlessDanger: Story;
+export declare const BorderlessGreen: Story;
+export declare const Disabled: Story;
+export declare const OnePrimaryAndTwoBorderless: Story;

package/dist/ui/button.stories.js

@@ -1,69 +1,81 @@
 import React from 'react';
 import { Button } from './button';
-export default {
+const meta = {
   title: 'Button',
   component: Button
 };
-const Template = args => /*#__PURE__*/React.createElement(Button, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  children: 'default'
+export default meta;
+export const Basic = {
+  args: {
+    children: 'default'
+  }
 };
-export const FullWidth = Template.bind({});
-FullWidth.args = {
-  children: 'full width',
-  fullWidth: true
+export const FullWidth = {
+  args: {
+    children: 'full width',
+    fullWidth: true
+  }
 };
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'primary',
-  appearance: 'primary'
+export const Primary = {
+  args: {
+    children: 'primary',
+    appearance: 'primary'
+  }
 };
-export const Danger = Template.bind({});
-Danger.args = {
-  children: 'danger',
-  appearance: 'danger'
+export const Danger = {
+  args: {
+    children: 'danger',
+    appearance: 'danger'
+  }
 };
-export const Green = Template.bind({});
-Green.args = {
-  children: 'green',
-  appearance: 'green'
+export const Green = {
+  args: {
+    children: 'green',
+    appearance: 'green'
+  }
 };
-export const Borderless = Template.bind({});
-Borderless.args = {
-  children: 'borderless',
-  borderless: true
+export const Borderless = {
+  args: {
+    children: 'borderless',
+    borderless: true
+  }
 };
-export const BorderlessPrimary = Template.bind({});
-BorderlessPrimary.args = {
-  children: 'borderless primaray',
-  borderless: true,
-  appearance: 'primary'
+export const BorderlessPrimary = {
+  args: {
+    children: 'borderless primaray',
+    borderless: true,
+    appearance: 'primary'
+  }
 };
-export const BorderlessDanger = Template.bind({});
-BorderlessDanger.args = {
-  children: 'borderless danger',
-  borderless: true,
-  appearance: 'danger'
+export const BorderlessDanger = {
+  args: {
+    children: 'borderless danger',
+    borderless: true,
+    appearance: 'danger'
+  }
 };
-export const BorderlessGreen = Template.bind({});
-BorderlessGreen.args = {
-  children: 'borderless green',
-  borderless: true,
-  appearance: 'green'
+export const BorderlessGreen = {
+  args: {
+    children: 'borderless green',
+    borderless: true,
+    appearance: 'green'
+  }
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-  children: 'default',
-  disabled: true
+export const Disabled = {
+  args: {
+    children: 'default',
+    disabled: true
+  }
 };
-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"));
+export const OnePrimaryAndTwoBorderless = {
+  render: () => /*#__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/checkin-count-indicator.stories.d.ts

@@ -1,84 +1,14 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Checkin } from './checkin-count-indicator';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export default _default;
-export declare const SingleResponse: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const Decline: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const NoResponse: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const MultipleResponses: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const CheckinAndResponse: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const MultipleCheckinsAndResponse: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const CheckinsWithDecline: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const CheckinWithoutResponse: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
-export declare const MultipleCheckins: ComponentStory<React.FunctionComponent<{
-    checkins: Checkin[];
-    response: "positive-response";
-    rsvpCount: number;
-} | {
-    checkins: Checkin[];
-    response: "no-response" | "negative-response";
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckinCountIndicator } from './checkin-count-indicator';
+declare const meta: Meta<typeof CheckinCountIndicator>;
+export default meta;
+declare type Story = StoryObj<typeof CheckinCountIndicator>;
+export declare const SingleResponse: Story;
+export declare const Decline: Story;
+export declare const NoResponse: Story;
+export declare const MultipleResponses: Story;
+export declare const CheckinAndResponse: Story;
+export declare const MultipleCheckinsAndResponse: Story;
+export declare const CheckinsWithDecline: Story;
+export declare const CheckinWithoutResponse: Story;
+export declare const MultipleCheckins: Story;

package/dist/ui/checkin-count-indicator.stories.js

@@ -1,60 +1,68 @@
-import React from 'react';
 import { CheckinCountIndicator } from './checkin-count-indicator';
-export default {
+const meta = {
   title: 'Checkin-Count Indicator',
   component: CheckinCountIndicator
 };
+export default meta;
 const exampleCheckin = {
   time: new Date('2022-01-01')
 };
-const Template = args => /*#__PURE__*/React.createElement(CheckinCountIndicator, args);
-export const SingleResponse = Template.bind({});
-SingleResponse.args = {
-  checkins: [],
-  response: 'positive-response',
-  rsvpCount: 1
-};
-export const Decline = Template.bind({});
-Decline.args = {
-  checkins: [],
-  response: 'negative-response'
-};
-export const NoResponse = Template.bind({});
-NoResponse.args = {
-  checkins: [],
-  response: 'no-response'
-};
-export const MultipleResponses = Template.bind({});
-MultipleResponses.args = {
-  checkins: [],
-  response: 'positive-response',
-  rsvpCount: 16
-};
-export const CheckinAndResponse = Template.bind({});
-CheckinAndResponse.args = {
-  checkins: [exampleCheckin],
-  response: 'positive-response',
-  rsvpCount: 1
-};
-export const MultipleCheckinsAndResponse = Template.bind({});
-MultipleCheckinsAndResponse.args = {
-  checkins: [exampleCheckin, exampleCheckin],
-  response: 'positive-response',
-  rsvpCount: 1
-};
-export const CheckinsWithDecline = Template.bind({});
-CheckinsWithDecline.args = {
-  checkins: [exampleCheckin],
-  response: 'negative-response'
-};
-export const CheckinWithoutResponse = Template.bind({});
-CheckinWithoutResponse.args = {
-  checkins: [exampleCheckin],
-  response: 'no-response'
-};
-export const MultipleCheckins = Template.bind({});
-MultipleCheckins.args = {
-  checkins: [exampleCheckin, exampleCheckin, exampleCheckin, exampleCheckin],
-  response: 'positive-response',
-  rsvpCount: 2
+export const SingleResponse = {
+  args: {
+    checkins: [],
+    response: 'positive-response',
+    rsvpCount: 1
+  }
+};
+export const Decline = {
+  args: {
+    checkins: [],
+    response: 'negative-response'
+  }
+};
+export const NoResponse = {
+  args: {
+    checkins: [],
+    response: 'no-response'
+  }
+};
+export const MultipleResponses = {
+  args: {
+    checkins: [],
+    response: 'positive-response',
+    rsvpCount: 16
+  }
+};
+export const CheckinAndResponse = {
+  args: {
+    checkins: [exampleCheckin],
+    response: 'positive-response',
+    rsvpCount: 1
+  }
+};
+export const MultipleCheckinsAndResponse = {
+  args: {
+    checkins: [exampleCheckin, exampleCheckin],
+    response: 'positive-response',
+    rsvpCount: 1
+  }
+};
+export const CheckinsWithDecline = {
+  args: {
+    checkins: [exampleCheckin],
+    response: 'negative-response'
+  }
+};
+export const CheckinWithoutResponse = {
+  args: {
+    checkins: [exampleCheckin],
+    response: 'no-response'
+  }
+};
+export const MultipleCheckins = {
+  args: {
+    checkins: [exampleCheckin, exampleCheckin, exampleCheckin, exampleCheckin],
+    response: 'positive-response',
+    rsvpCount: 2
+  }
 };