WEB-8792 - Implementation of ViewingCard and its various child components

src/components/Button/Button.stories.tsx

@@ -15,6 +15,12 @@ const meta = {
         type: 'select',
       },
     },
+    buttonType: {
+      options: ['primary', 'secondary', 'ghost'],
+      control: {
+        type: 'select',
+      },
+    },
     iconLast: { control: 'boolean' },
   },
 } satisfies Meta<typeof Button>;
@@ -32,7 +38,7 @@ export const ButtonWithIcon = (props: ButtonProps) => (
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Playground = {
   args: {
-    primary: false,
     children: 'Button',
+    buttonType: 'primary',
   },
 };

src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 
 import { CommonProps, px } from '../../utils';
 
-export interface ButtonProps extends CommonProps {
+export interface ButtonProps extends CommonProps, Record<string, unknown> {
   /**
    * Button contents
    */
@@ -14,25 +14,24 @@ export interface ButtonProps extends CommonProps {
   /**
    * Optional click handler
    */
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void | unknown;
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean;
+  buttonType?: 'primary' | 'secondary' | 'ghost';
   /**
    * How large should the button be?
    */
   size?: 'sm' | 'md' | 'lg';
 }
 
-const Button = ({ primary = true, size = 'md', children, iconLast = false, id, ...props }: ButtonProps) => {
+const Button = ({ buttonType = 'primary', size = 'md', children, iconLast = false, id, ...props }: ButtonProps) => {
   return (
     <button
       data-testid={id ? `button-${id}` : `button`}
       id={id}
       type="button"
-      className={classnames(`${px}-button`, `${px}-button--${size}`, {
-        [`${px}-button--secondary`]: !primary,
+      className={classnames(`${px}-button`, `${px}-button--${size}`, `${px}-button--${buttonType}`, {
         [`${px}-button--icon-last`]: iconLast,
       })}
       {...props}

src/components/Button/_button.scss

@@ -33,10 +33,11 @@
     width: 1em;
   }
 
-  &--secondary {
+  &--secondary,
+  &--ghost {
     color: $text-color;
     background-color: transparent;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1px inset;
+    border: 1px solid;
 
     &:hover,
     &:focus {
@@ -52,6 +53,10 @@
     }
   }
 
+  &--ghost {
+    border-color: transparent;
+  }
+
   &.#{$px}-button--icon-last svg {
     margin-inline-end: unset;
     margin-inline-start: 0.5rem;
@@ -74,3 +79,10 @@
     margin: 0;
   }
 }
+
+.#{$px}-button__group {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: center;
+  width: 100%;
+}

src/components/DatePicker/DatePicker.tsx

@@ -3,7 +3,7 @@ import flatpickr from 'flatpickr';
 import l10n from 'flatpickr/dist/l10n/index';
 import classnames from 'classnames';
 
-import { noOP, useNormalizedInputProps } from '../../utils';
+import { noOp, useNormalizedInputProps } from '../../utils';
 import Input, { InputProps } from '../Input/Input';
 
 export interface DatePickerProps extends Omit<InputProps, 'defaultValue'>, Record<string, unknown> {
@@ -136,8 +136,8 @@ const DatePicker = React.forwardRef(
       invalidText,
       labelText,
       locale = 'en',
-      onChange = noOP,
-      onClick = noOP,
+      onChange = noOp,
+      onClick = noOp,
       placeholder,
       readOnly,
       size = 'md',

src/components/Header/Header.tsx

@@ -40,7 +40,7 @@ const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
             <Button size="sm" onClick={onLogin}>
               Log in
             </Button>
-            <Button primary size="sm" onClick={onCreateAccount}>
+            <Button size="sm" onClick={onCreateAccount}>
               Sign up
             </Button>
           </>

src/components/Input/Input.stories.tsx

@@ -137,8 +137,8 @@ RadioInput.args = {
 
 export const CheckboxInput = ({ playgroundWidth, ...args }: StoryProps) => (
   <div style={{ width: playgroundWidth, margin: '1rem' }}>
-    <Input key={args.defaultValue} {...args} id="Input-1" labelText="Label text 1" defaultChecked={true} />
-    <Input key={args.defaultValue} {...args} id="Input-2" labelText="Label text 2" />
+    <Input key={args.defaultValue} {...args} id="Input-1" labelText="Label text 1" defaultChecked={true} value={true} />
+    <Input key={args.defaultValue} {...args} id="Input-2" labelText="Label text 2" value={true} />
   </div>
 );
 

src/components/Input/Input.tsx

@@ -129,8 +129,8 @@ const Input = React.forwardRef(
       [`${px}-input--invalid`]: inputProps.invalid,
       [`${px}-input--warn`]: inputProps.warn,
       [`${className}__wrapper`]: className,
+      [`${px}-input--hidden`]: rest.hidden,
     });
-
     return (
       <div className={wrapperClassnames}>
         <label htmlFor={id} className={classnames(`${px}-input__label`, { [`${px}-input__label--hidden`]: hideLabel })}>
@@ -142,6 +142,7 @@ const Input = React.forwardRef(
           defaultValue={defaultValue}
           disabled={inputProps.disabled}
           id={id}
+          name={rest.name as string}
           onChange={onChange}
           onClick={onClick}
           placeholder={placeholder}

src/components/Input/_input.scss

@@ -8,18 +8,30 @@ $lg: #{$px}-input--lg;
 .#{$px}-input {
   display: flex;
   flex-direction: column;
+  width: 100%;
+
+  &--hidden {
+    @include hidden();
+  }
 
   &__label {
+    color: $keyline-gray;
+    font-size: 0.8125rem;
+    font-weight: 600;
     margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    word-break: break-word;
 
     &--hidden {
       @include hidden();
     }
   }
 
   &__input {
-    accent-color: $pure-black;
-    border: 3px solid currentColor;
+    accent-color: $soft-black;
+    border: 1px solid $keyline-gray;
+    border-radius: 0.1875rem;
+    font-size: 0.8125rem;
     margin-bottom: 0.5rem;
     padding: 0.5rem;
     // width: 100%;
@@ -60,7 +72,7 @@ $lg: #{$px}-input--lg;
     }
 
     .#{$px}-input__label {
-      max-width: 8.75rem;
+      // max-width: 8.75rem;
     }
   }
 

src/components/Toggle/_toggle.scss

@@ -182,4 +182,11 @@ $lg: #{$px}-input--lg;
       padding-top: 3.5rem;
     }
   }
+
+  &:has(.#{$px}-input__input:focus) label:before {
+    outline: 2px solid AccentColor;
+    outline: 2px solid Highlight;
+    outline: 2px solid -webkit-focus-ring-color;
+    outline-offset: 1px;
+  }
 }

src/components/ViewingsList/StatefulViewingsList.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import ViewingsList from './ViewingsList';
+import { ViewingsListCardProps } from './ViewingsListCard';
+import { I18nObject } from './ViewingsList';
+
+export interface StatefulViewingsListProps extends Record<string, unknown> {
+  /**
+   * Existing viewings to populate the list
+   */
+  defaultViewing?: ViewingsListCardProps[];
+  /**
+   * Optional strings to pass for the form and button labels
+   */
+  i18n?: I18nObject;
+  /**
+   * Optional validations script to be ran when Viewing list is updated and saved
+   */
+  validate?: ((e: ViewingsListCardProps) => object | undefined) | (() => object);
+  /**
+   * Method for removing a viewing from the list
+   */
+  onDelete?: (id: string) => void;
+  /**
+   * Method used to persist changes to a particular view
+   */
+  onSave: (
+    e: React.MouseEvent<HTMLElement>,
+    cb: React.Dispatch<React.SetStateAction<ViewingsListCardProps[]>>,
+    validateCb: (e: ViewingsListCardProps) => object | undefined,
+  ) => boolean;
+}
+
+const StatefulViewingsList = ({
+  defaultViewing,
+  i18n,
+  validate = () => undefined,
+  onDelete = () => undefined,
+  onSave,
+  ...props
+}: StatefulViewingsListProps) => {
+  const [viewings, setViewings] = React.useState<ViewingsListCardProps[]>(defaultViewing as ViewingsListCardProps[]);
+  const handleOnDelete = (id: string) => {
+    setViewings((prevViewings) => prevViewings?.filter((el) => el.id !== id));
+    // persist to database
+    onDelete(id);
+  };
+
+  const handleOnAdd = (id: string) => {
+    setViewings((prevViewings) => {
+      if (prevViewings) {
+        return [...prevViewings, { id }];
+      }
+      return [{ id }];
+    });
+  };
+
+  return (
+    <ViewingsList
+      {...props}
+      i18n={i18n}
+      viewings={viewings}
+      onDelete={handleOnDelete}
+      onAdd={handleOnAdd}
+      onSave={(e) => onSave(e, setViewings, validate)}
+    />
+  );
+};
+
+export default StatefulViewingsList;

src/components/ViewingsList/ViewingsList.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta } from '@storybook/react';
+
+import StatefulViewingsList, { StatefulViewingsListProps } from './StatefulViewingsList';
+import { defaultViewing, i18n, handleOnSave, validate } from './utils';
+
+const meta = {
+  title: 'Components/ViewingsList',
+  component: StatefulViewingsList,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultViewing: {
+      control: 'array',
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    onSave: {
+      control: 'action',
+    },
+  },
+} satisfies Meta<typeof StatefulViewingsList>;
+
+export default meta;
+
+export const Playground = (props: StatefulViewingsListProps) => (
+  <StatefulViewingsList {...props} validate={validate} onSave={handleOnSave} />
+);
+
+Playground.args = {
+  cardTitle: 'Viewing Details',
+  id: 'myViewingsListId',
+  title: 'Tour Viewing(s) on Overview Tab',
+};
+
+export const WithViewing = (props: StatefulViewingsListProps) => (
+  <StatefulViewingsList {...props} validate={validate} onSave={handleOnSave} />
+);
+
+WithViewing.args = {
+  cardTitle: 'Viewing Details',
+  defaultViewing,
+  id: 'myViewingsListId',
+  title: 'Tour Viewing(s) on Overview Tab',
+};
+
+export const WithTranslatedStrings = (props: StatefulViewingsListProps) => (
+  <StatefulViewingsList {...props} validate={validate} onSave={handleOnSave} />
+);
+
+WithTranslatedStrings.args = {
+  cardTitle: 'Viewing Details',
+  defaultViewing,
+  id: 'myViewingsListId',
+  i18n,
+  title: 'Tour Viewing(s) on Overview Tab',
+};