Skip to content

A
AmendsenProject
Unverified Commit 3ce62cc3 authored by Marcos Iglesias's avatar Marcos Iglesias Committed by GitHub
Browse files
Options

Completing storybook for Flag component (#622) 

Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>
parent 537c1432
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 13 deletions
amundsen_application/static/js/components/common/Flag/Flag.story.tsx
View file @ 3ce62cc3
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { BadgeStyle } from 'config/config-types';
import StorySection from '../StorySection';
import Flag, { CaseType } from '.'; import Flag, { CaseType } from '.';
export default { const stories = storiesOf('Components/Flags', module);
title: 'Components/Flags',
component: Flag,
};
export const SimpleFlag = () => { stories.add('Flags', () => (
return <Flag caseType={CaseType.LOWER_CASE} text="Test Flag" />; <>
}; <StorySection title="Lower Case Flag">
<Flag caseType={CaseType.LOWER_CASE} text="Test Flag" />
SimpleFlag.story = { </StorySection>
name: 'simple flag', <StorySection title="Upper Case Flag">
}; <Flag caseType={CaseType.UPPER_CASE} text="Test Flag" />
</StorySection>
<StorySection title="Sentence Case Flag">
<Flag caseType={CaseType.SENTENCE_CASE} text="Test Flag" />
</StorySection>
<StorySection title="Default Style Flag">
<Flag
caseType={CaseType.SENTENCE_CASE}
text="Test Flag"
labelStyle={BadgeStyle.DEFAULT}
/>
</StorySection>
<StorySection title="Primary Style Flag">
<Flag
caseType={CaseType.SENTENCE_CASE}
text="Test Flag"
labelStyle={BadgeStyle.PRIMARY}
/>
</StorySection>
<StorySection title="Informational Style Flag">
<Flag
caseType={CaseType.SENTENCE_CASE}
text="Test Flag"
labelStyle={BadgeStyle.INFO}
/>
</StorySection>
<StorySection title="Success Style Flag">
<Flag
caseType={CaseType.SENTENCE_CASE}
text="Test Flag"
labelStyle={BadgeStyle.SUCCESS}
/>
</StorySection>
<StorySection title="Warning Style Flag">
<Flag
caseType={CaseType.SENTENCE_CASE}
text="Test Flag"
labelStyle={BadgeStyle.WARNING}
/>
</StorySection>
<StorySection title="Danger Style Flag">
<Flag
caseType={CaseType.SENTENCE_CASE}
text="Test Flag"
labelStyle={BadgeStyle.DANGER}
/>
</StorySection>
</>
));
amundsen_application/static/js/components/common/Flag/index.tsx
View file @ 3ce62cc3
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
import * as React from 'react'; import * as React from 'react';
// TODO: Use css-modules instead of 'import'
import './styles.scss';
import { BadgeStyle } from 'config/config-types'; import { BadgeStyle } from 'config/config-types';
import './styles.scss';
export enum CaseType { export enum CaseType {
LOWER_CASE = 'lowerCase', LOWER_CASE = 'lowerCase',
SENTENCE_CASE = 'sentenceCase', SENTENCE_CASE = 'sentenceCase',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment