From a6c318cd00ffb2fcf6591db815094ebf6d2e83a7 Mon Sep 17 00:00:00 2001
From: Ricardo Da Silva <88863584+ricardodsb@users.noreply.github.com>
Date: Fri, 11 Feb 2022 16:32:56 +0100
Subject: [PATCH 1/3] first edit primary button

---
 src/common/Tokens.ts                            | 17 ++++++++++++++---
 .../Buttons/Primary/Button.Primary.tsx          |  2 +-
 .../Buttons/Primary/ButtonPrimaryStyled.ts      |  7 ++++++-
 src/sample/SampleView.tsx                       |  6 +++---
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/common/Tokens.ts b/src/common/Tokens.ts
index aa25c5a..efa4b1c 100644
--- a/src/common/Tokens.ts
+++ b/src/common/Tokens.ts
@@ -1,12 +1,14 @@
 export const Tokens = {
   Colors: {
     Buttons: {
-      Primary: "#fff",
+      Primary: "#7F516A",
       Secondary: "#000",
     },
   },
   Borders: {
-    Radius: {},
+    Radius: {
+      PrimaryR: "10px"
+    },
   },
   Constraints: {
     Margin: {
@@ -14,6 +16,15 @@ export const Tokens = {
       Small: "",
       MediumSmall: "",
     },
-    Padding: {},
   },
+  Padding: {
+      PrimaryP: "16px 40px"
+    },
+  Height:{
+      Large:"66px"
+    },
+  Width:{
+      Large:"345px"
+    }
+
 };
diff --git a/src/components/Buttons/Primary/Button.Primary.tsx b/src/components/Buttons/Primary/Button.Primary.tsx
index f254063..219ff14 100644
--- a/src/components/Buttons/Primary/Button.Primary.tsx
+++ b/src/components/Buttons/Primary/Button.Primary.tsx
@@ -13,7 +13,7 @@ type PrimaryButtonProps = PropTypes.InferProps<typeof PrimaryButtonProptypes>;
 
 /**
  * ! Primary button Component
- * * whitehatdevv - 2022/02/09
+ * * ricardodsb, stefaranzazu - 2022/02/11
  * @param props {any}
  */
 const PrimaryButton: React.FC<PrimaryButtonProps> = (props: any) => (
diff --git a/src/components/Buttons/Primary/ButtonPrimaryStyled.ts b/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
index 1777398..302e576 100644
--- a/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
+++ b/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
@@ -5,5 +5,10 @@ import { Tokens } from "../../../common/Tokens";
 export const PrimaryButtonStyled = styled.button`
   border: none;
   background-color: ${Tokens.Colors.Buttons.Primary};
-  color: #000;
+  color: #fff;
+  border-radius: ${Tokens.Borders.Radius.PrimaryR};
+  padding: ${Tokens.Padding.PrimaryP};
+  height: ${Tokens.Height.Large};
+  width: ${Tokens.Width.Large}
+
 `;
diff --git a/src/sample/SampleView.tsx b/src/sample/SampleView.tsx
index 5a51c83..746535e 100644
--- a/src/sample/SampleView.tsx
+++ b/src/sample/SampleView.tsx
@@ -4,16 +4,16 @@ import PrimaryButton from "../components/Buttons/Primary/Button.Primary";
 
 /**
  * ! Sample view project
- * * whitehatdevv - 2022/02/09
+ * * ricardodsb, stefaranzazu - 2022/02/11
  */
 const SampleView: React.FC = () => {
   return (
     <>
       <div className="mt-3">
-        <h1>Buttons component</h1>
+        <h1>Primary Button</h1>
         <div className="mt-3">
           <PrimaryButton
-            title="Contact"
+            title="Aceptar todas las cookies"
             handleClick={() => {
               console.log("He clickado en el botón Contacto");
             }}

From 3a89959665d10a54f73fd024847776f206e0ca1b Mon Sep 17 00:00:00 2001
From: Ricardo Da Silva <88863584+ricardodsb@users.noreply.github.com>
Date: Tue, 15 Feb 2022 19:09:49 +0100
Subject: [PATCH 2/3] primary button styled

---
 src/common/Tokens.ts                          | 35 +++++++++++++------
 .../Buttons/Primary/ButtonPrimaryStyled.ts    | 31 +++++++++++-----
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/common/Tokens.ts b/src/common/Tokens.ts
index efa4b1c..ddd66ba 100644
--- a/src/common/Tokens.ts
+++ b/src/common/Tokens.ts
@@ -1,13 +1,15 @@
 export const Tokens = {
   Colors: {
     Buttons: {
-      Primary: "#7F516A",
-      Secondary: "#000",
+      Primary:"#BF4085",
+      PrimaryPressed:"#CB659C",
+      PrimaryHover:"#A83875",
+      PrimaryDisabled:"#D192B4"
     },
   },
   Borders: {
     Radius: {
-      PrimaryR: "10px"
+      Medium: "10px"
     },
   },
   Constraints: {
@@ -15,16 +17,27 @@ export const Tokens = {
       XSmall: "",
       Small: "",
       MediumSmall: "",
+    }
+  },
+  Text: {
+    Weight: "bold",
+    Size: "20px",
+    Color: {
+      Primary: "#FFFFFF",
+      PrimaryDisabled: "#F7F7FC"
     },
   },
   Padding: {
-      PrimaryP: "16px 40px"
-    },
+    Medium: "16px 40px"
+  },
   Height:{
-      Large:"66px"
-    },
+    Large:"66px"
+  },
   Width:{
-      Large:"345px"
-    }
-
-};
+    Large:"345px"
+  },
+   BoxShadow:{
+    Medium:"0px 4px 4px rgba(0, 0, 0, 0.08), inset 0px 4px 4px rgba(0, 0, 0, 0.16)"
+  },
+ 
+};
\ No newline at end of file
diff --git a/src/components/Buttons/Primary/ButtonPrimaryStyled.ts b/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
index 302e576..1669c99 100644
--- a/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
+++ b/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
@@ -1,14 +1,27 @@
 import styled from "styled-components";
 import { Tokens } from "../../../common/Tokens";
 
-// * Styled primary button
-export const PrimaryButtonStyled = styled.button`
+// * Styled Primary button
+export const PrimaryButtonStyled = styled.button` 
   border: none;
-  background-color: ${Tokens.Colors.Buttons.Primary};
-  color: #fff;
-  border-radius: ${Tokens.Borders.Radius.PrimaryR};
-  padding: ${Tokens.Padding.PrimaryP};
+  background: ${Tokens.Colors.Buttons.Primary};
+  font-size: ${Tokens.Text.Size};
+  font-weight: ${Tokens.Text.Weight};
+  color: ${Tokens.Text.Color.Primary};
+  padding: ${Tokens.Padding.Medium};
   height: ${Tokens.Height.Large};
-  width: ${Tokens.Width.Large}
-
-`;
+  width: ${Tokens.Width.Large};
+  border-radius: ${Tokens.Borders.Radius.Medium};
+  &:hover{
+      background: ${Tokens.Colors.Buttons.PrimaryHover};
+      color: ${Tokens.Text.Color.Primary};
+      }
+  &:active{
+      background: ${Tokens.Colors.Buttons.PrimaryPressed};
+      color: ${Tokens.Text.Color.Primary};
+      box-shadow: ${Tokens.BoxShadow.Medium};
+    }
+  &:disabled{
+      color: ${Tokens.Text.Color.PrimaryDisabled};
+   }
+`;
\ No newline at end of file

From 377df8a2799a12e9c92167e6420d87ebb77741ad Mon Sep 17 00:00:00 2001
From: Ricardo Da Silva <88863584+ricardodsb@users.noreply.github.com>
Date: Tue, 15 Feb 2022 20:03:58 +0100
Subject: [PATCH 3/3] secondary button styled

---
 src/common/Tokens.ts                          | 10 ++++--
 .../Buttons/Secondary/Button.Secondary.tsx    | 33 +++++++++++++++++++
 .../Secondary/ButtonSecondaryStyled.ts        | 27 +++++++++++++++
 src/sample/SampleView.tsx                     | 10 ++++++
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Buttons/Secondary/Button.Secondary.tsx
 create mode 100644 src/components/Buttons/Secondary/ButtonSecondaryStyled.ts

diff --git a/src/common/Tokens.ts b/src/common/Tokens.ts
index ddd66ba..9c666e9 100644
--- a/src/common/Tokens.ts
+++ b/src/common/Tokens.ts
@@ -4,7 +4,11 @@ export const Tokens = {
       Primary:"#BF4085",
       PrimaryPressed:"#CB659C",
       PrimaryHover:"#A83875",
-      PrimaryDisabled:"#D192B4"
+      PrimaryDisabled:"#D192B4",
+      Secondary:"#F1DEE8",
+      SecondaryPressed:"#EBCBDD",
+      SecondaryHover:"#EBCBDD",
+      SecondaryDisabled:"#F4E7EE"
     },
   },
   Borders: {
@@ -24,7 +28,9 @@ export const Tokens = {
     Size: "20px",
     Color: {
       Primary: "#FFFFFF",
-      PrimaryDisabled: "#F7F7FC"
+      PrimaryDisabled: "#F7F7FC",
+      Secondary: "#732650;",
+      SecondaryDisabled: "#C5ABB9"
     },
   },
   Padding: {
diff --git a/src/components/Buttons/Secondary/Button.Secondary.tsx b/src/components/Buttons/Secondary/Button.Secondary.tsx
new file mode 100644
index 0000000..8faf168
--- /dev/null
+++ b/src/components/Buttons/Secondary/Button.Secondary.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import * as PropTypes from "prop-types";
+import { SecondaryButtonStyled } from "./ButtonSecondaryStyled";
+
+// * Define proptypes
+const SecondaryButtonProptypes = {
+  title: PropTypes.string.isRequired,
+  handleClick: PropTypes.func.isRequired,
+};
+
+// * Define typealias for proptypes
+type SecondaryButtonProps = PropTypes.InferProps<typeof SecondaryButtonProptypes>;
+
+/**
+ * ! Secondary button Component
+ * * ricardodsb, stefaranzazu - 2022/02/11
+ * @param props {any}
+ */
+const SecondaryButton: React.FC<SecondaryButtonProps> = (props: any) => (
+  <SecondaryButtonStyled
+    type="button"
+    role="button"
+    onClick={() => props.handleClick()}
+  >
+    {props.title}
+  </SecondaryButtonStyled>
+);
+
+// * Define proptypes
+SecondaryButton.propTypes = SecondaryButtonProptypes;
+
+// * Export component
+export default SecondaryButton;
\ No newline at end of file
diff --git a/src/components/Buttons/Secondary/ButtonSecondaryStyled.ts b/src/components/Buttons/Secondary/ButtonSecondaryStyled.ts
new file mode 100644
index 0000000..3f95466
--- /dev/null
+++ b/src/components/Buttons/Secondary/ButtonSecondaryStyled.ts
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { Tokens } from "../../../common/Tokens";
+
+// * Styled Secondary button
+export const SecondaryButtonStyled = styled.button` 
+  border: none;
+  background: ${Tokens.Colors.Buttons.Secondary};
+  font-size: ${Tokens.Text.Size};
+  font-weight: ${Tokens.Text.Weight};
+  color: ${Tokens.Text.Color.Secondary};
+  padding: ${Tokens.Padding.Medium};
+  height: ${Tokens.Height.Large};
+  width: ${Tokens.Width.Large};
+  border-radius: ${Tokens.Borders.Radius.Medium};
+  &:hover{
+      background: ${Tokens.Colors.Buttons.SecondaryHover};
+      color: ${Tokens.Text.Color.Secondary};
+      }
+  &:active{
+      background: ${Tokens.Colors.Buttons.SecondaryPressed};
+      color: ${Tokens.Text.Color.Secondary};
+      box-shadow: ${Tokens.BoxShadow.Medium};
+    }
+  &:disabled{
+      color: ${Tokens.Text.Color.SecondaryDisabled};
+   }
+`;
\ No newline at end of file
diff --git a/src/sample/SampleView.tsx b/src/sample/SampleView.tsx
index 746535e..b80ba99 100644
--- a/src/sample/SampleView.tsx
+++ b/src/sample/SampleView.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import "./SampleStyle.css";
 import PrimaryButton from "../components/Buttons/Primary/Button.Primary";
+import SecondaryButton from "../components/Buttons/Secondary/Button.Secondary";
 
 /**
  * ! Sample view project
@@ -20,6 +21,15 @@ const SampleView: React.FC = () => {
           />
         </div>
       </div>
+      <div className="mt-3">
+        <h1>Secondary Button </h1>
+        <div>
+        <SecondaryButton title="Comment" handleClick={()=>
+            console.log("He clicado en el botton Contacto")
+        }>
+        </SecondaryButton>
+        </div>
+    </div>
     </>
   );
 };