Adds circle buttons to React

AgnosticUI · Sep 21, 2020 · bb04dd6 · bb04dd6
1 parent ac0accb
commit bb04dd6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 0 deletions.
diff --git a/agnosticui-react/src/__snapshots__/storybook.test.js.snap b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
@@ -55,6 +55,18 @@ Array [
   >
     Go
   </button>,
+  <button
+    className="btn circle"
+    type="button"
+  >
+    Go
+  </button>,
+  <button
+    className="btn bordered circle"
+    type="button"
+  >
+    Go
+  </button>,
   <button
     className="btn block"
     type="button"
@@ -467,6 +479,18 @@ Array [
   >
     Go
   </button>,
+  <button
+    className="btn primary circle"
+    type="button"
+  >
+    Go
+  </button>,
+  <button
+    className="btn primary bordered circle"
+    type="button"
+  >
+    Go
+  </button>,
   <button
     className="btn primary block"
     type="button"
@@ -514,6 +538,18 @@ Array [
   >
     Go
   </button>,
+  <button
+    className="btn secondary circle"
+    type="button"
+  >
+    Go
+  </button>,
+  <button
+    className="btn secondary bordered circle"
+    type="button"
+  >
+    Go
+  </button>,
   <button
     className="btn secondary block"
     type="button"

diff --git a/agnosticui-react/src/stories/Button.js b/agnosticui-react/src/stories/Button.js
@@ -9,6 +9,7 @@ const Button = ({
   isSkinned,
   isBordered,
   isRounded,
+  isCircle,
   isDisabled,
   isRaised,
   isBlock,
@@ -26,6 +27,7 @@ const Button = ({
     size ? styles[`${size}`] : "",
     isBordered ? styles.bordered : "",
     isRounded ? styles.rounded : "",
+    isCircle ? styles.circle : "",
     isDisabled ? styles.disabled : "",
     isRaised ? styles.raised : "",
     isBlock ? styles.block : "",
@@ -54,6 +56,7 @@ Button.propTypes = {
   isDisabled: PropTypes.bool,
   isRaised: PropTypes.bool,
   isBlock: PropTypes.bool,
+  isCircle: PropTypes.bool,
   isRounded: PropTypes.bool,
 }
 
@@ -69,6 +72,7 @@ Button.defaultProps = {
   isDisabled: false,
   isRaised: false,
   isBlock: false,
+  isCircle: false,
   isRounded: false,
 }
 

diff --git a/agnosticui-react/src/stories/Button.stories.js b/agnosticui-react/src/stories/Button.stories.js
@@ -12,6 +12,8 @@ export const Primary = () => (
     <Button mode="primary" isRounded>Go</Button>
     <Button mode="primary" isBordered isRounded>Go</Button>
     <Button mode="primary" isRaised isRounded>Go</Button>
+    <Button mode="primary" isCircle>Go</Button>
+    <Button mode="primary" isCircle isBordered>Go</Button>
     <Button mode="primary" isBlock>Go</Button>
     <Button mode="primary" isBordered isBlock>Go</Button>
   </>
@@ -24,6 +26,8 @@ export const Secondary = () => (
     <Button mode="secondary" isRounded>Go</Button>
     <Button mode="secondary" isBordered isRounded>Go</Button>
     <Button mode="secondary" isRaised isRounded>Go</Button>
+    <Button mode="secondary" isCircle>Go</Button>
+    <Button mode="secondary" isCircle isBordered>Go</Button>
     <Button mode="secondary" isBlock>Go</Button>
     <Button mode="secondary" isBordered isBlock>Go</Button>
   </>
@@ -36,6 +40,8 @@ export const Default = () => (
     <Button isRounded>Go</Button>
     <Button isBordered isRounded>Go</Button>
     <Button isRaised isRounded>Go</Button>
+    <Button isCircle>Go</Button>
+    <Button isCircle isBordered>Go</Button>
     <Button isBlock>Go</Button>
     <Button isBordered isBlock>Go</Button>
   </>

diff --git a/agnosticui-react/src/stories/button.module.css b/agnosticui-react/src/stories/button.module.css
@@ -21,6 +21,9 @@
 .raised {
   composes: btn-raised from './button.css';
 }
+.circle {
+  composes: btn-circle from './button.css';
+}
 .rounded {
   composes: btn-rounded from './button.css';
 }