feat: Add small size

stone-payments · Sep 3, 2020 · 5eff2c8 · 5eff2c8
1 parent 5cc1576
commit 5eff2c8
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 5 deletions.
diff --git a/packages/emd-basic-button/README.md b/packages/emd-basic-button/README.md
@@ -50,7 +50,7 @@ Applies the ABC theme to the component. The ABC mode intentionally restricts the
 
 #### `size`
 
-Changes the size of the component when in ABC mode. It can be `large` or `medium`.
+Changes the size of the component when in ABC mode. It can be `large`, `medium` or `small`.
 
 - Type: String
 - Attribute and property

diff --git a/packages/emd-basic-button/public/index.css b/packages/emd-basic-button/public/index.css
@@ -41,7 +41,10 @@ body > emd-button:nth-of-type(2),
 body > emd-button:nth-of-type(3),
 body > emd-button:nth-of-type(4),
 body > emd-button:nth-of-type(5),
-body > emd-button:nth-of-type(6) {
+body > emd-button:nth-of-type(6),
+body > emd-button:nth-of-type(7),
+body > emd-button:nth-of-type(8),
+body > emd-button:nth-of-type(9) {
   width: 300px;
 }
 

diff --git a/packages/emd-basic-button/public/index.html b/packages/emd-basic-button/public/index.html
@@ -17,6 +17,10 @@ <h1>Button&thinsp;—&thinsp;Natural Width</h1>
     <emd-button abc size="medium">Button</emd-button>
     <emd-button href="http://stone.co" target="_blank" abc size="medium">http://stone.co</emd-button>
   </div>
+  <div>
+    <emd-button abc size="small">Button</emd-button>
+    <emd-button href="http://stone.co" target="_blank" abc size="small">http://stone.co</emd-button>
+  </div>
   <div>
     <emd-button abc rank="secondary">Button</emd-button>
     <emd-button href="http://stone.co" target="_blank" abc rank="secondary">http://stone.co</emd-button>
@@ -25,6 +29,10 @@ <h1>Button&thinsp;—&thinsp;Natural Width</h1>
     <emd-button abc size="medium" rank="secondary">Button</emd-button>
     <emd-button href="http://stone.co" target="_blank" abc size="medium" rank="secondary">http://stone.co</emd-button>
   </div>
+  <div>
+    <emd-button abc size="small" rank="secondary">Button</emd-button>
+    <emd-button href="http://stone.co" target="_blank" abc size="small" rank="secondary">http://stone.co</emd-button>
+  </div>
   <div>
     <emd-button abc rank="tertiary">Button</emd-button>
     <emd-button href="http://stone.co" target="_blank" abc rank="tertiary">http://stone.co</emd-button>
@@ -33,30 +41,43 @@ <h1>Button&thinsp;—&thinsp;Natural Width</h1>
     <emd-button abc size="medium" rank="tertiary">Button</emd-button>
     <emd-button href="http://stone.co" target="_blank" abc size="medium" rank="tertiary">http://stone.co</emd-button>
   </div>
+  <div>
+    <emd-button abc size="small" rank="tertiary">Button</emd-button>
+    <emd-button href="http://stone.co" target="_blank" abc size="small" rank="tertiary">http://stone.co</emd-button>
+  </div>
 
   <h1>Button&thinsp;—&thinsp;Elastic Width</h1>
   <emd-button abc>Button</emd-button>
   <emd-button abc size="medium">Button</emd-button>
+  <emd-button abc size="small">Button</emd-button>
   <emd-button abc rank="secondary">Button</emd-button>
   <emd-button abc size="medium" rank="secondary">Button</emd-button>
+  <emd-button abc size="small" rank="secondary">Button</emd-button>
   <emd-button abc rank="tertiary">Button</emd-button>
   <emd-button abc size="medium" rank="tertiary">Button</emd-button>
+  <emd-button abc size="small" rank="tertiary">Button</emd-button>
 
   <h1>Button&thinsp;—&thinsp;Loading</h1>
   <emd-button abc loading>Button</emd-button>
   <emd-button abc size="medium" loading>Button</emd-button>
+  <emd-button abc size="small" loading>Button</emd-button>
   <emd-button abc rank="secondary" loading>Button</emd-button>
   <emd-button abc size="medium" rank="secondary" loading>Button</emd-button>
+  <emd-button abc size="small" rank="secondary" loading>Button</emd-button>
   <emd-button abc rank="tertiary" loading>Button</emd-button>
   <emd-button abc size="medium" rank="tertiary" loading>Button</emd-button>
+  <emd-button abc size="small" rank="tertiary" loading>Button</emd-button>
 
   <h1>Button&thinsp;—&thinsp;Disabled</h1>
   <emd-button abc disabled>Button</emd-button>
   <emd-button abc size="medium" disabled>Button</emd-button>
+  <emd-button abc size="small" disabled>Button</emd-button>
   <emd-button abc rank="secondary" disabled>Button</emd-button>
   <emd-button abc size="medium" rank="secondary" disabled>Button</emd-button>
+  <emd-button abc size="small" rank="secondary" disabled>Button</emd-button>
   <emd-button abc rank="tertiary" disabled>Button</emd-button>
   <emd-button abc size="medium" rank="tertiary" disabled>Button</emd-button>
+  <emd-button abc size="small" rank="tertiary" disabled>Button</emd-button>
 
   <h1>Button&thinsp;—&thinsp;With Icon</h1>
   <div>
@@ -91,6 +112,22 @@ <h1>Button&thinsp;—&thinsp;With Icon</h1>
       Edit
     </emd-button>
   </div>
+  <div>
+    <emd-button abc size="small">
+      <emd-icon slot="icon" icon="edit"></emd-icon>
+      Edit
+    </emd-button>
+    <emd-button abc size="small">
+      Edit
+    </emd-button>
+    <emd-button abc size="small" href="http://stone.co" target="_blank">
+      <emd-icon slot="icon" icon="edit"></emd-icon>
+      Edit
+    </emd-button>
+    <emd-button abc size="small" href="http://stone.co" target="_blank">
+      Edit
+    </emd-button>
+  </div>
   <div>
     <emd-button abc rank="secondary">
       <emd-icon slot="icon" icon="edit"></emd-icon>
@@ -119,7 +156,23 @@ <h1>Button&thinsp;—&thinsp;With Icon</h1>
       <emd-icon slot="icon" icon="edit"></emd-icon>
       Edit
     </emd-button>
-    <emd-button abc rank="secondary" rank="secondary" size="medium" href="http://stone.co" target="_blank">
+    <emd-button abc rank="secondary" size="medium" href="http://stone.co" target="_blank">
+      Edit
+    </emd-button>
+  </div>
+  <div>
+    <emd-button abc rank="secondary" size="small">
+      <emd-icon slot="icon" icon="edit"></emd-icon>
+      Edit
+    </emd-button>
+    <emd-button abc rank="secondary" size="small">
+      Edit
+    </emd-button>
+    <emd-button abc rank="secondary" size="small" href="http://stone.co" target="_blank">
+      <emd-icon slot="icon" icon="edit"></emd-icon>
+      Edit
+    </emd-button>
+    <emd-button abc rank="secondary" size="small" href="http://stone.co" target="_blank">
       Edit
     </emd-button>
   </div>
@@ -155,5 +208,21 @@ <h1>Button&thinsp;—&thinsp;With Icon</h1>
       Edit
     </emd-button>
   </div>
+  <div>
+    <emd-button abc rank="tertiary" size="small">
+      <emd-icon slot="icon" icon="edit"></emd-icon>
+      Edit
+    </emd-button>
+    <emd-button abc rank="tertiary" size="small">
+      Edit
+    </emd-button>
+    <emd-button abc rank="tertiary" size="small" href="http://stone.co" target="_blank">
+      <emd-icon slot="icon" icon="edit"></emd-icon>
+      Edit
+    </emd-button>
+    <emd-button abc rank="tertiary" size="small" href="http://stone.co" target="_blank">
+      Edit
+    </emd-button>
+  </div>
 </body>
 </html>
diff --git a/packages/emd-basic-button/src/component/Button.css b/packages/emd-basic-button/src/component/Button.css
@@ -212,3 +212,13 @@
 :host([abc][size=medium]) .emd-button__loader {
   font-size: 11px;
 }
+
+:host([abc][size=small]) .emd-button__button {
+  font-size: 12px;
+  line-height: 18px;
+  padding: 5px 1.25em;
+}
+
+:host([abc][size=small]) .emd-button__loader {
+  font-size: 8px;
+}
diff --git a/packages/emd-basic-button/src/component/Button.stories.js b/packages/emd-basic-button/src/component/Button.stories.js
@@ -114,7 +114,7 @@ storiesOf('Button', module)
         default: text('Content', 'Click me')
       },
       size: {
-        default: select('Size', ['large', 'medium'], 'large')
+        default: select('Size', ['large', 'medium', 'small'], 'large')
       },
       rank: {
         default: select('Rank', ['primary', 'secondary', 'tertiary'], 'primary')
@@ -168,7 +168,7 @@ storiesOf('Button', module)
         default: text('Content', 'Edit')
       },
       size: {
-        default: select('Size', ['large', 'medium'], 'large')
+        default: select('Size', ['large', 'medium', 'small'], 'large')
       },
       rank: {
         default: select('Rank', ['primary', 'secondary', 'tertiary'], 'primary')