-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add TypeScript packages * add tsconfig.json * update storybook/main.js * add preset-typescript to babelrc * add build-ts script * update tsconfig.json * add dummy TestPill component * Fixes up TS config (#993) * convert EmptyState to TS and remove demo TestPill * update EmptyStateProps * use relative import for Heading and Text in EmptyState * add react/jsx-filename-extension to .eslintrc * remove test copy * trailing comma * bring types/react-dom version down to ^16 --------- Co-authored-by: Kyle Shike <kyleshike@gmail.com>
- Loading branch information
1 parent
64633a7
commit 5ab953d
Showing
18 changed files
with
453 additions
and
225 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { faPlus } from '@fortawesome/pro-regular-svg-icons'; | ||
|
|
||
| import Button from 'src/Button'; | ||
|
|
||
| import EmptyState from './EmptyState'; | ||
|
|
||
| const meta: Meta<typeof EmptyState> = { | ||
| component: EmptyState, | ||
| title: 'Components/EmptyState', | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof EmptyState>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| subtitle: 'Launch your first project to start conducting research!', | ||
| title: 'You have no projects', | ||
| } | ||
| }; | ||
|
|
||
| export const PrimaryAction: Story = { | ||
| args: { | ||
| primaryAction: <Button leadingIcon={faPlus} variant="primary">New project</Button>, | ||
| subtitle: 'Launch your first project to start conducting research! Source from a pool of 2.4 million participants to reach nearly any target audience.', | ||
| title: 'You have no projects', | ||
| } | ||
| }; | ||
|
|
||
| export const FullWidth: Story = { | ||
| args: { | ||
| fullWidth: true, | ||
| primaryAction: <Button leadingIcon={faPlus} variant="primary">New project</Button>, | ||
| subtitle: 'Launch your first project to start conducting research! Source from a pool of 2.4 million participants to reach nearly any target audience.', | ||
| title: 'You have no projects', | ||
| } | ||
| }; | ||
|
|
||
| export const MarginTop: Story = { | ||
| args: { | ||
| marginTop: 'sm', | ||
| subtitle: 'Add a new participant segment above', | ||
| title: 'No segments created', | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { ReactNode } from 'react'; | ||
|
|
||
| import classNames from 'classnames'; | ||
|
|
||
| import { Heading } from '../Heading'; | ||
| import { Text } from '../Text'; | ||
|
|
||
| import './EmptyState.scss'; | ||
|
|
||
| export interface EmptyStateProps { | ||
| className?: string; | ||
| fullWidth?: boolean; | ||
| marginTop?: 'sm' | 'md' | 'lg' | 'none'; | ||
| primaryAction?: ReactNode; | ||
| subtitle?: string | ReactNode; | ||
| title?: ReactNode; | ||
| } | ||
|
|
||
| const EmptyState = ({ | ||
| className, | ||
| fullWidth = false, | ||
| marginTop = 'sm', | ||
| primaryAction, | ||
| subtitle, | ||
| title, | ||
| }: EmptyStateProps) => ( | ||
| <div className={classNames( | ||
| className, | ||
| 'EmptyState', | ||
| marginTop && `EmptyState--margin-top--${marginTop}`, | ||
| )} | ||
| > | ||
| <div className={classNames( | ||
| 'EmptyState__content', | ||
| fullWidth && 'EmptyState--full-width', | ||
| )} | ||
| > | ||
| {title && ( | ||
| <Heading className="EmptyState__title" level={4} size="lg" textAlign="center">{title}</Heading> | ||
| )} | ||
|
|
||
| {subtitle && ( | ||
| <Text className="EmptyState__subtitle" textAlign="center">{subtitle}</Text> | ||
| )} | ||
|
|
||
| {primaryAction && ( | ||
| <div className="EmptyState__actions"> | ||
| <div className="EmptyState__actions__primary-action"> | ||
| {primaryAction} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default EmptyState; |
File renamed without changes.
Oops, something went wrong.