Text: Add Uppercase component ✨ (#1062)

Text: Add Uppercase component ✨
cozy · Jun 25, 2019 · ba84205 · ba84205
2 parents 95c93b3 + 3163d84
commit ba84205
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 2 deletions.
diff --git a/react/Text/Readme.md b/react/Text/Readme.md
@@ -38,6 +38,14 @@ const { Bold } = require('./index');
 <Bold>This a bold text</Bold>
 ```
 
+#### Uppercase test
+
+```
+const { Uppercase } = require('./index');
+
+<Uppercase>This is an uppercase text</Uppercase>
+```
+
 #### Note text
 
 ```

diff --git a/react/Text/index.jsx b/react/Text/index.jsx
@@ -36,6 +36,9 @@ export const SubTitle = ({ className, ...restProps }) => (
 export const Bold = ({ className, ...restProps }) => (
   <BaseText className={cx(styles['u-title-h4'], className)} {...restProps} />
 )
+export const Uppercase = ({ className, ...restProps }) => (
+  <BaseText className={cx(styles['u-uppercase'], className)} {...restProps} />
+)
 export const Caption = ({ className, ...restProps }) => (
   <BaseText className={cx(styles['u-caption'], className)} {...restProps} />
 )
@@ -66,6 +69,9 @@ Bold.propTypes = {
 Caption.propTypes = {
   ...commonProps
 }
+Uppercase.propTypes = {
+  ...commonProps
+}
 
 // Default Props
 const commonDefaultProps = {
@@ -92,4 +98,8 @@ Caption.defaultProps = {
   ...commonDefaultProps
 }
 
+Uppercase.defaultProps = {
+  ...commonDefaultProps
+}
+
 export default Text
diff --git a/react/Text/styles.styl b/react/Text/styles.styl
@@ -15,6 +15,8 @@
 .u-text
     @extend $text
 
+.u-uppercase
+    @extend $uppercase
+
 .u-caption
     @extend $caption
-
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -3651,6 +3651,12 @@ exports[`Text should render examples: Text 5`] = `
 `;
 
 exports[`Text should render examples: Text 6`] = `
+"<div>
+  <div class=\\"styles__u-uppercase___aobU-\\">This is an uppercase text</div>
+</div>"
+`;
+
+exports[`Text should render examples: Text 7`] = `
 "<div>
   <div class=\\"styles__u-caption___1VRxy\\">This a note text</div>
 </div>"

diff --git a/react/index.js b/react/index.js
@@ -59,7 +59,8 @@ export {
   Title,
   SubTitle,
   Bold,
-  Caption
+  Caption,
+  Upppercase
 } from './Text'
 export { default as Empty } from './Empty'
 export { default as ContextHeader } from './ContextHeader'

diff --git a/stylus/generic/typography.styl b/stylus/generic/typography.styl
@@ -53,6 +53,9 @@ $caption
     line-height 1.2
     color var(--coolGrey)
 
+$uppercase
+    text-transform uppercase
+
 /*------------------------------------*\
   Link
 \*------------------------------------*/