open-index/open-npm huggingface dataset:
npm package: @hsl-fi/button
Description: ``` {   value: string; - required   className: string; - optional   fullWidth: boolean; - optional   href: string; - optional   openInNewWindow: boolean; - optional   size: ButtonSizes; - optional (@hsl-fi/content-delivery-api-types)   variant: ButtonVari
Latest version: 1.2.4

## Properties

```
{
  value: string; - required
  className: string; - optional
  fullWidth: boolean; - optional
  href: string; - optional
  openInNewWindow: boolean; - optional
  size: ButtonSizes; - optional (@hsl-fi/content-delivery-api-types)
  variant: ButtonVariants; - optional (@hsl-fi/content-delivery-api-types)
  disabled: boolean; - optional
  'aria-label': string; - optional
  onClick: (params: any) => void; - optional
  onLinkClick: () => void; - optional
  style: React.CSSProperties; - optional
  type: "button" | "submit" - optional (defaults to "button")
}
```

## Options - ButtonSizes

```
'small' | 'medium' | 'large'
```

## Options - ButtonVariants

```
'white' | 'blue' | 'yellow' | 'grey' | 'black'

```

## Example

```
<Button
  size="large"
  variant="blue"
  value="Button text"
  href="http://example.com"
  onLinkClick={() => {
    // do something before navigating to target, defined in the href-prop
  }}
/>
```
npm package: @hsl-fi/dropdown
Description: ``` {   className: string; - optional   openMenuAriaLabel: string; - required   closeMenuAriaLabel: string; - required   label: string; - optional   ariaLabel: string; - required   options: DropdownOption[]; - required   onChange: (option: DropdownOption)
Latest version: 2.1.2

## Properties - Dropdown

```
{
  className: string; - optional
  openMenuAriaLabel: string; - required
  closeMenuAriaLabel: string; - required
  label: string; - optional
  ariaLabel: string; - required
  options: DropdownOption[]; - required
  onChange: (option: DropdownOption) => void; - optional
  loading: boolean; - optional
  disableTextInput: boolean; - optional
  required: boolean; - optional
  hasError: boolean; - optional
  initialValue: any; - optional
  icon: JSX.Element; - optional
}
```

## Properties - DropdownOption

```
{
  value: string; - required
  text: string; - required
  ticketTypes: TicketType[]; - optional (@hsl-fi/ticket-types)
  selected: boolean; - optional
  icon: JSX.Element; - optional
}
```

## Example

```
<Dropdown
    className="class1 class2"
    label="Label text"
    ariaLabel="aria-label text"
    openMenuAriaLabel="aria-label for menu opening button"
    closeMenuAriaLabel="aria-label for menu closing button"
    options={DropdownOption[]}
    onChange={(option: DropdownOption) => {
        // do something with selected option..
    }}
    required={false}
    hasError={false}
/>
```
npm package: @hsl-fi/modal
Description: ``` import Modal from '@hsl-fi/modal';
Latest version: 0.3.2

# Modal

```
import Modal from '@hsl-fi/modal';

const [isModalOpen, setIsModalOpen] = useState(false);
const handleModalCrossClick = () => setIsModalOpen(false);

<Modal
  appElement="#__next"
  contentLabel="Content label"
  closeButtonLabel="Close"
  isOpen={isModalOpen}
  onCrossClick={handleModalCrossClick}
  // variant?: "large", "small" or "confirmation"
  // shouldCloseOnEsc?: boolean;
  // shouldCloseOnOverlayClick?: boolean;
  // onOpen?: () => void;
  // onClose?: () => void;
>
  <ChildComponent />
</Modal>
```
npm package: @hsl-fi/shared-local-storage
Description: ## 1. Listening: Mount `SharedLocalStorageObserver` in some file that will be mounted on every page
Latest version: 0.4.0

# Shared-local-storage

## 1. Listening: Mount `SharedLocalStorageObserver` in some file that will be mounted on every page

```
import SharedLocalStorageObserver from '@hsl-fi/shared-local-storage';

const keys = ['saved-searches', 'favouriteStore']; // LocalStorage-keys you want to observe
const url = "https://www.hsl.fi/local-storage-emitter"; // Url you want to receive the messages from

<SharedLocalStorageObserver
  keys={['saved-searches', 'favouriteStore']}
  url={url}
/>
```

## 2. Sending: Create `local-storage-emitter`-page with following component:

```
import {useSharedLocalStorageEmitter} from '@hsl-fi/shared-local-storage';

const keys = ['saved-searches', 'favouriteStore'];
const targetOrigin = 'https://www.hsl.fi';

const LocalStorageEmitter = () => {
  useSharedLocalStorageEmitter(keys, targetOrigin);
  return <div aria-hidden="true">LocalStorageEmitter</div>;
};

export default LocalStorageEmitter;
```

## How it works

### Example:

1. User selects a destination from autosuggest-list in HSL.fi

   - HSL.fi:
     - Selected destination is saved to localStorage using `save`-function from `OldSearchesStore`
     - `saved-searches-updated-at`-timestamp is updated
     - `saved-searches`-value is updated

2. User is redirected to Reittiopas

   - HSL.fi/local-storage-emitter (in iframe):
     - Sends a postMessage: current `saved-searches` in HSL.fi
   - Reittiopas:
     - Detects the postMessage using `SharedLocalStorageObserver`
       - `saved-searches` will be replaced with the one from the postMessage, since `saved-searches-updated-at` is greater than the current value

3. User selects a starting point or a destination in the autosuggest-list of the route search in Reittiopas

   - Reittiopas:
     - Selected destination is saved to localStorage using `save`-function from `OldSearchesStore`
     - `saved-searches-updated-at`-timestamp is updated
     - `saved-searches`-value is updated

4. User reloads the Reittiopas page

   - HSL.fi/local-storage-emitter (in iframe):
     - Sends a postMessage: current `saved-searches` in HSL.fi
   - Reittiopas:
     - Detects the postMessage using `SharedLocalStorageObserver`
       - `saved-searches` will NOT be replaced with the one from the postMessage, since `saved-searches-updated-at` is not greater than the current value