Merge pull request #387 from kiwicom/update/add-circled-button

UPDATE: Add circled to Button, ButtonLink
kiwicom · Sep 26, 2018 · b0e2182 · b0e2182
2 parents bd1b8ee + 7a94447
commit b0e2182
Show file tree

Hide file tree

Showing 10 changed files with 789 additions and 2 deletions.
diff --git a/src/Button/Button.stories.js b/src/Button/Button.stories.js
@@ -208,6 +208,37 @@ storiesOf("Button", module)
       ],
     };
   })
+  .addWithChapters("Circled button", () => {
+    const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.NORMAL);
+    const type = select(
+      "Type",
+      [TYPE_OPTIONS.PRIMARY, TYPE_OPTIONS.SECONDARY],
+      TYPE_OPTIONS.PRIMARY,
+    );
+    const IconLeft = getIcon(getIcons("iconLeft", "Airplane"));
+
+    return {
+      info:
+        "Button can be also rendered in circled shape, but only when it does have iconLeft and not have children.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <Button
+                  onClick={action("clicked")}
+                  size={size}
+                  type={type}
+                  iconLeft={IconLeft && <IconLeft />}
+                  circled
+                />
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
   .addWithChapters("Destructive buttons", () => {
     const title = text("Title", "Destructive button");
     const bordered = boolean("Bordered", false);
@@ -281,6 +312,7 @@ storiesOf("Button", module)
     const size = select("Size", Object.values(SIZE_OPTIONS), "normal");
     const width = number("Width", 0);
     const bordered = boolean("Bordered", false);
+    const circled = boolean("Circled", false);
     const loading = boolean("Loading", false);
     const dataTest = text("dataTest", "test");
     const IconLeft = getIcon(getIcons("iconLeft", "Airplane"));
@@ -300,6 +332,7 @@ storiesOf("Button", module)
                   href={href}
                   external={external}
                   disabled={disabled}
+                  circled={circled}
                   block={block}
                   bordered={bordered}
                   loading={loading}

diff --git a/src/Button/README.md b/src/Button/README.md
@@ -14,6 +14,7 @@ Table below contains all types of the props available in Button component.
 | :------------ | :---------------------| :-------------- | :------------------------------- |
 | block         | `boolean`             | `false`         | If `true`, the Button will grow up to the full width of its container.
 | bordered      | `boolean`             | `false`         | If `true`, the Button will have a lighter version, with border and light background.
+| circled       | `boolean`             | `false`         | If `true`, the Button will have circular shape.
 | children      | `React.Node`          |                 | The content of the Button. [See Functional specs](#functional-specs)
 | **component** | `string \| React.Node`| `"button"`      | The component used for the root node. Either a string to use a DOM element or a component.
 | dataTest      | `string`              |                 | Optional prop for testing purposes.