SearchField.stories.tsx 1.82 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

Andrey Azov's avatar
Andrey Azov committed
17 18
import React, { useState } from 'react';

19 20
import SearchField from 'src/shared/components/search-field/SearchField';
import QuestionButton from 'src/shared/components/question-button/QuestionButton';
21
import { CircleLoader } from 'src/shared/components/loader';
Andrey Azov's avatar
Andrey Azov committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35

import styles from './SearchField.stories.scss';

const Wrapper = (props: any) => {
  const [value, setValue] = useState('');
  const { searchField: SearchField, ...otherProps } = props;

  return (
    <div className={styles.searchFieldWrapper}>
      <SearchField value={value} onChange={setValue} {...otherProps} />
    </div>
  );
};

Andrey Azov's avatar
Andrey Azov committed
36
export const DefaultSearchFieldStory = () => (
37 38 39 40 41 42 43
  <>
    <Wrapper
      searchField={SearchField}
      className={styles.searchField}
      rightCorner={<QuestionButton helpText="This is a hint" />}
    />
  </>
Andrey Azov's avatar
Andrey Azov committed
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
);

DefaultSearchFieldStory.storyName = 'default';

export const SearchFieldWithLoaderStory = () => (
  <Wrapper
    searchField={SearchField}
    className={styles.searchField}
    rightCorner={<CircleLoader className={styles.circleLoader} />}
  />
);

SearchFieldWithLoaderStory.storyName = 'with loader';

export default {
  title: 'Components/Shared Components/SearchField'
};