New components

.gitignore

@@ -4,4 +4,7 @@ node_modules/
 # Production build output
 /dist
 *.log
-.DS_Store
+.DS_Store
+
+# Static Storybook
+storybook-static/

src/index.js

@@ -4,7 +4,7 @@ import './index.css';
 // UI
 export { default as Link } from './ui/link';
 export { default as Logo } from './ui/logo';
-export { default as Title } from './ui/title';
+//export { default as Title } from './ui/title_old.jsx';
 
 
 // Buttons
@@ -53,6 +53,12 @@ export { default as PopUp } from './ui/pop-up/PopUp';
 // SnackBar
 export { default as SnackBar } from './ui/snackbar/SnackBar';
 
+// Title
+export { default as Title } from './ui/title/Title';
+
+// SubTitle
+export { default as SubTitle } from './ui/subtitle/SubTitle';
+
 // UserMenu
 export { default as UserMenu } from './ui/user-menu/UserMenu';
 

src/ui/icon/Icon.stories.jsx

@@ -46,6 +46,8 @@ export const AllIcons = (args) => (
         <Icon {...args} name="chevron-right" />
         <Icon {...args} name="chevron-double-left" />
         <Icon {...args} name="chevron-double-right" />
+        <Icon {...args} name="exclamation-triangle" />
+        <Icon {...args} name="exclamation-circle" />
     </div>
 );
 

src/ui/subtitle/SubTitle.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+
+const SubTitle = ({
+    subTitle = "sous-titre"
+}) => {
+    return (
+        <p className="font-bold text-3xl md:mb-0 md:mr-10">{subTitle}</p>
+    );
+};
+
+SubTitle.PropTypes = {
+    subTitle: PropTypes.string.isRequired
+};
+
+export default SubTitle;

src/ui/subtitle/SubTitle.stories.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import SubTitle from "./SubTitle";
+
+export default {
+    title: "Components/UI/SubTitle",
+    component: SubTitle,
+    tags: ["autodocs"],
+    parameters: { 
+        layout: "fullscreen" 
+    },
+};
+
+export const Standard = () => (
+    <SubTitle>
+        Mon sous-titre
+    </SubTitle>
+);

src/ui/title/Title.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+
+const Title = ({
+    title = "Mon titre"
+}) => {
+    return (
+        <p className="font-bold text-3xl md:mb-0 md:mr-10">{title}</p>
+    );
+}
+
+Title.PropTypes = {
+    title: PropTypes.string.isRequired
+};
+
+export default Title;

src/ui/title/Title.stories.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Title from "./Title";
+
+export default {
+    title: "Components/UI/Title",
+    component: Title,
+    tags: ["autodocs"],
+    parameters: { 
+        layout: "fullscreen" 
+    },
+};
+
+export const Standard = () => (
+    <Title>
+        Mon titre
+    </Title>
+);