Merge pull request #725 from gympass/refactor/change-button-component

🚀 Feat: change button component
gympass · Jan 26, 2024 · 4043de6 · 4043de6
2 parents 7a0f507 + 4e8ef4d
commit 4043de6
Show file tree

Hide file tree

Showing 14 changed files with 762 additions and 85 deletions.
diff --git a/packages/doc/content/components/components/button/default-web.mdx b/packages/doc/content/components/components/button/default-web.mdx
@@ -5,20 +5,27 @@ You can use all differente compounds like `<Button.Outline />` and `<Button.Text
 
 ### Usage
 
-#### Default
+#### Small
+
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
+  <Button small>Find an activity</Button>
+</Box>
+```
+
+#### Primary
 
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
   <Button>Find an activity</Button>
-  <Button secondary>Find an activity</Button>
 </Box>
 ```
 
-#### Inverted
+#### Full
+
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
-  <Button inverted>Find an activity</Button>
-  <Button secondary inverted>Find an activity</Button>
+  <Button full>Find an activity</Button>
 </Box>
 ```
 
@@ -37,9 +44,7 @@ You can use all differente compounds like `<Button.Outline />` and `<Button.Text
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
   <Button icon={Booking}>Find an activity</Button>
-  <Button icon={Booking} secondary>
-    Find an activity
-  </Button>
+  <Button icon={Booking} inverted>Find an activity</Button>
 </Box>
 ```
 
@@ -59,15 +64,27 @@ render(() => {
 
       <Box display="flex" gap="medium">
         <Button isLoading={loading}>Find an activity</Button>
-        <Button icon={Booking} inverted isLoading={loading}>Find an activity</Button>
-        <Button icon={Booking} secondary isLoading={loading}>Find an activity</Button>
-        <Button secondary inverted isLoading={loading}>Find an activity</Button>
+        <Button icon={Booking} isLoading={loading}>Find an activity</Button>
       </Box>
     </Box>
   );
 });
 ```
 
+#### Inverted
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%" bg="stamina" padding="medium">
+  <Button inverted>Find an activity</Button>
+</Box>
+```
+
+#### Disabled
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
+  <Button disabled>Find an activity</Button>
+</Box>
+```
+
 ### Props
 
 <PropsTable component="Button" platform="web" />
diff --git a/packages/doc/content/components/components/button/link-web.mdx b/packages/doc/content/components/components/button/link-web.mdx
@@ -1,8 +1,15 @@
-### Usage
+### Primary
 
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
   <Button.Link>Find an activity</Button.Link>
+</Box>
+```
+
+### Secondary
+
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
   <Button.Link secondary>Find an activity</Button.Link>
 </Box>
 ```
@@ -21,15 +28,23 @@
 
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
-  <Button.Link href="http://www.gympass.com" icon={Booking} target="blank">
-    Find an activity (external link)
+  <Button.Link icon={Booking}>
+    Find an activity
   </Button.Link>
-  <Button.Link secondary href="http://www.gympass.com" icon={Booking} target="blank">
-    Find an activity (external link)
+  <Button.Link secondary icon={Booking}>
+    Find an activity
   </Button.Link>
 </Box>
 ```
 
+### Disabled
+
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
+  <Button.Link disabled>Find an activity</Button.Link>
+</Box>
+```
+
 ### Props
 
 <PropsTable component="Button.Link" platform="web" />
diff --git a/packages/doc/content/components/components/button/text-web.mdx b/packages/doc/content/components/components/button/text-web.mdx
@@ -1,15 +1,15 @@
-### Reference
+#### Primary
 
-Gympass `<Button />` component implements all our design guidelines such as default spacings, borders and color pallete tokens.
-You can use all differente compounds like `<Button.Outline />` and `<Button />` combining with their props such as `small` or `inverted` so the button become the desired variation.
-
-### Usage
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
+  <Button.Text>Find an activity</Button.Text>
+</Box>
+```
 
-#### Default
+#### Secondary
 
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
-  <Button.Text>Find an activity</Button.Text>
   <Button.Text secondary>Find an activity</Button.Text>
 </Box>
 ```
@@ -35,6 +35,22 @@ You can use all differente compounds like `<Button.Outline />` and `<Button />`
 </Box>
 ```
 
+#### Inverted
+
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%" bg="stamina" padding="medium">
+  <Button.Text inverted>Find an activity</Button.Text>
+</Box>
+```
+
+#### Disabled
+
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
+  <Button.Text disabled>Find an activity</Button.Text>
+</Box>
+```
+
 ### Props
 
 <PropsTable component="Button" platform="web" />
diff --git a/packages/labnative/pages/Button.jsx b/packages/labnative/pages/Button.jsx
@@ -33,87 +33,59 @@ const ButtonPage = () => (
       alignItems: 'center',
     }}
   >
-    <Wrapper style={{ height: 360 }}>
-      <DocTitle>Icon Buttons</DocTitle>
-      <Button.Icon icon={Booking} />
-      <Button.Icon icon={Edit} small />
-
-      <Button.Icon icon={Add} secondary />
-      <Button.Icon icon={Check} secondary small />
-
-      <Button.Icon icon={ChevronLeft} inverted small />
-      <Button.Icon icon={Close} disabled small />
-    </Wrapper>
-
-    <Wrapper style={{ height: 360 }}>
-      <DocTitle>Small Buttons</DocTitle>
-      <Button small>Primary contained</Button>
-      <Button icon={Booking} small>
-        Contained with Icon
-      </Button>
-      <Button.Text small>Text</Button.Text>
-      <Button.Text icon={Booking} small>
-        Text with icon
-      </Button.Text>
-      <Button small secondary>
-        Secondary contained
-      </Button>
-      <Button icon={Booking} small secondary>
-        Secondary contained with Icon
-      </Button>
-      <Button.Text small secondary>
-        Secondary text
-      </Button.Text>
-      <Button.Text icon={Booking} small secondary>
-        Secondary text with icon
-      </Button.Text>
-    </Wrapper>
-
     <Wrapper style={{ height: 550 }}>
-      <DocTitle>Contained Buttons</DocTitle>
-      <Button>Contained</Button>
-      <Button icon={Booking}>With Icon</Button>
+      <DocTitle>Button</DocTitle>
+      <Button small>Small</Button>
+      <Button>Primary</Button>
+      <Button full>Full</Button>
+      <Button icon={Booking}>Primary with Icon</Button>
       <Button inverted>Inverted</Button>
-      <Button icon={Booking} inverted>
-        Inverted with Icon
+      <Button inverted icon={Booking}>
+        Inverted With Icon
       </Button>
       <Button disabled>Disabled</Button>
-      <Button secondary>Secondary contained</Button>
-      <Button icon={Booking} secondary>
-        Secondary with icon
-      </Button>
-      <Button inverted secondary>
-        Secondary inverted
-      </Button>
-      <Button icon={Booking} inverted secondary>
-        Secondary inverted with icon
+      <Button disabled icon={Booking}>
+        Disabled With Icon
       </Button>
     </Wrapper>
 
-    <Wrapper style={{ height: 180 }}>
+    <Wrapper style={{ height: 550 }}>
+      <DocTitle>Icon Buttons</DocTitle>
+      <Button.Icon icon={Booking} />
+      <Button.Icon icon={Edit} secondary />
+
+      <Button.Icon icon={Add} small />
+      <Button.Icon icon={Check} secondary small />
+
+      <Button.Icon icon={ChevronLeft} inverted />
+      <Button.Icon icon={Close} disabled />
+    </Wrapper>
+
+    <Wrapper style={{ height: 280 }}>
       <DocTitle>Link Buttons</DocTitle>
-      <Button.Link>Link</Button.Link>
+      <Button.Link>Primary Link</Button.Link>
       <Button.Link secondary>Secondary Link</Button.Link>
-      <Button.Link disabled>Disabled</Button.Link>
+      <Button.Link disabled>Disabled Link</Button.Link>
     </Wrapper>
 
     <Wrapper>
       <DocTitle>Text Buttons</DocTitle>
 
-      <Button.Text>Text</Button.Text>
-      <Button.Text icon={Booking}>With Icon</Button.Text>
+      <Button.Text small>Small</Button.Text>
+      <Button.Text>Primary</Button.Text>
+      <Button.Text icon={Booking}>Primary with Icon</Button.Text>
       <Button.Text secondary>Secondary</Button.Text>
       <Button.Text icon={Booking} secondary>
         Secondary with Icon
       </Button.Text>
-      <Button.Text inverted>Inverted</Button.Text>
-      <Button.Text icon={Booking} inverted>
-        Inverted with Icon
-      </Button.Text>
       <Button.Text disabled>Disabled</Button.Text>
       <Button.Text icon={Booking} disabled>
         Disabled with Icon
       </Button.Text>
+      <Button.Text inverted>Inverted</Button.Text>
+      <Button.Text icon={Booking} inverted>
+        Inverted with Icon
+      </Button.Text>
     </Wrapper>
   </ScrollView>
 );

diff --git a/packages/yoga/src/Banner/native/__snapshots__/Banner.test.jsx.snap b/packages/yoga/src/Banner/native/__snapshots__/Banner.test.jsx.snap
@@ -184,6 +184,9 @@ exports[`<Banner /> should match snapshot with button 1`] = `
                 "fontSize": 14,
                 "fontWeight": "500",
                 "textAlign": "center",
+                "textDecorationColor": "#231B22",
+                "textDecorationLine": "underline",
+                "textDecorationStyle": "solid",
               },
             ]
           }
@@ -668,6 +671,9 @@ exports[`<Banner /> should match snapshot with two action buttons 1`] = `
                 "fontSize": 14,
                 "fontWeight": "500",
                 "textAlign": "center",
+                "textDecorationColor": "#231B22",
+                "textDecorationLine": "underline",
+                "textDecorationStyle": "solid",
               },
             ]
           }
@@ -733,6 +739,9 @@ exports[`<Banner /> should match snapshot with two action buttons 1`] = `
                 "fontSize": 14,
                 "fontWeight": "500",
                 "textAlign": "center",
+                "textDecorationColor": "#231B22",
+                "textDecorationLine": "underline",
+                "textDecorationStyle": "solid",
               },
             ]
           }