Unverified Commit 3d2c6b1e authored by Tamika Tannis's avatar Tamika Tannis Committed by GitHub

Make Flag text sentence case by default (#33)

* Per design, flag text should be sentence case

* Add support to customize the case style.
parent ddfcaeb6
...@@ -3,20 +3,41 @@ import * as React from 'react'; ...@@ -3,20 +3,41 @@ import * as React from 'react';
// TODO: Use css-modules instead of 'import' // TODO: Use css-modules instead of 'import'
import './styles.scss'; import './styles.scss';
enum CaseType {
LOWER_CASE = 'lowerCase',
SENTENCE_CASE = 'sentenceCase',
UPPER_CASE = 'upperCase',
}
interface FlagProps { interface FlagProps {
caseType?: string | null;
text: string; text: string;
labelStyle?: string; labelStyle?: string;
} }
const Flag: React.SFC<FlagProps> = ({ text, labelStyle }) => { function convertText(str: string, caseType: string): string {
switch (caseType) {
case CaseType.LOWER_CASE:
return str.toLowerCase();
case CaseType.SENTENCE_CASE:
return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`;
case CaseType.UPPER_CASE:
return str.toUpperCase();
default:
return str;
}
}
const Flag: React.SFC<FlagProps> = ({ caseType, text, labelStyle }) => {
// TODO: After upgrading to Bootstrap 4, this component should leverage badges // TODO: After upgrading to Bootstrap 4, this component should leverage badges
// https://getbootstrap.com/docs/4.1/components/badge/ // https://getbootstrap.com/docs/4.1/components/badge/
return ( return (
<span className={`flag label ${labelStyle}`}>{text.toUpperCase()}</span> <span className={`flag label ${labelStyle}`}>{convertText(text, caseType)}</span>
); );
}; };
Flag.defaultProps = { Flag.defaultProps = {
caseType: null,
text: '', text: '',
labelStyle: 'label-default', labelStyle: 'label-default',
}; };
......
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