@wix/design-system/dist/docs/components/CalendarPanelFooterExamples.md

@wix/design-system

## Feature Examples


### Actions
- description: Define labels for main actions with `primaryActionLabel` and `secondaryActionLabel` props.
        Both submit and discard actions are mandatory and cannot be removed.
- example: 
```jsx 
<CalendarPanelFooter
  primaryActionLabel="Apply"
  secondaryActionLabel="Cancel"
/>;
```

### Disabled Action
- description: Disable primary action interactions with `primaryActionDisabled` prop.
        Use it to restrict users from submitting invalid selections.
- example: 
```jsx 
<CalendarPanelFooter
  primaryActionDisabled
  primaryActionLabel="Apply"
  secondaryActionLabel="Cancel"
/>;
```

### Selected Days
- description: Display a selected date or a date range using `selectedDays` prop.
        Use it to inform users about active selection before submission.
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <CalendarPanelFooter
    primaryActionLabel="Apply"
    secondaryActionLabel="Cancel"
    dateToString={date => date.toLocaleDateString('en-US')}
    selectedDays={new Date()}
  />
  <CalendarPanelFooter
    primaryActionLabel="Apply"
    secondaryActionLabel="Cancel"
    dateToString={date => date.toLocaleDateString('en-US')}
    selectedDays={{
      from: new Date(),
      to: new Date(Date.now() + 7 * 1000 * 60 * 60 * 24),
    }}
  />
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### Calendar Panel
- description: Use calendar panel footer as a fundamental part of `<CalendarPanel/>` that requires user confirmation in order to submit and save a selection. 
- example: 
```jsx 
() => {
  const [selectedValue, setSelectedValue] = React.useState(new Date());
  const today = new Date();

  const getDateDaysAgo = days =>
    new Date(Date.now() - days * 1000 * 60 * 60 * 24);

  const presets = [
    {
      id: 0,
      selectedDays: getDateDaysAgo(1),
      value: 'Yesterday',
    },
    {
      id: 1,
      selectedDays: today,
      value: 'Today',
    },
    {
      id: 2,
      selectedDays: {
        from: getDateDaysAgo(7),
        to: today,
      },
      value: 'Last 7 Days',
    },
    {
      id: 3,
      selectedDays: {
        from: getDateDaysAgo(30),
        to: today,
      },
      value: 'Last 30 Days',
    },
    {
      id: 4,
      selectedDays: {
        from: getDateDaysAgo(90),
        to: today,
      },
      value: 'Last 90 Days',
    },
  ];
  return (
    <CalendarPanel
      presets={presets}
      onChange={value => setSelectedValue(value)}
      value={selectedValue}
      footer={() => (
        <CalendarPanelFooter
          primaryActionLabel="Submit"
          secondaryActionLabel="Cancel"
          selectedDays={selectedValue}
          dateToString={date => date.toLocaleDateString('en-US')}
        />
      )}
      autoFocus={false}
    />
  );
};
```