fix(Pills): integrate flexbox and export PillsGroup

kaminskypavel · Aug 26, 2020 · 43a9c82 · 43a9c82
1 parent 5d91821
commit 43a9c82
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/components/Pill/Pill.stories.tsx b/src/components/Pill/Pill.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Pill from ".";
+import Pill, {PillsGroup} from ".";
 
 export default {
   title: "Components/Pill",
@@ -12,11 +12,11 @@ export default {
 const Template: any = (args: any) => <Pill {...args} />;
 
 export const GroupOfPills = () => (
-  <div>
+  <PillsGroup>
     <Pill label="Days" active />
     <Pill label="Weeks" />
     <Pill label="Months" />
-  </div>
+  </PillsGroup>
 );
 
 export const ActivePill = Template.bind({});

diff --git a/src/components/Pill/index.tsx b/src/components/Pill/index.tsx
@@ -9,23 +9,29 @@ type Props = {
   label: string;
 };
 
+export const PillsGroup = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const InnerText = styled.span`
-  //font-family: "Roboto", helvetica, arial, sans-serif;
-  //font-weight: 300;
-  //line-height: 1.5;
   font-family: "Roboto", helvetica, arial, sans-serif;
   font-weight: 400;
   line-height: 19.5px;
   font-size: 13px;
 `;
 
-const PillComponent = styled.a<Pick<Props, "disabled" | "active">>`
+const PillComponent = styled.div<Pick<Props, "disabled" | "active">>`
   border: none;
   cursor: pointer;
   padding: 5px 16px 5px 16px;
   margin: 0 2px;
   text-decoration: none;
   border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   background-color: ${({active, disabled}) => {
     if (disabled) {
@@ -56,9 +62,11 @@ const Pill: React.FunctionComponent<Props> = ({
   disabled = false,
   active = false
 }) => (
-  <PillComponent active={active} disabled={disabled} onClick={onClick}>
-    <InnerText>{label}</InnerText>
-  </PillComponent>
+  <PillsGroup>
+    <PillComponent active={active} disabled={disabled} onClick={onClick}>
+      <InnerText>{label}</InnerText>
+    </PillComponent>
+  </PillsGroup>
 );
 
 export default Pill;
diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,6 @@
 import AttentionBox from "./components/AttentionBox";
 import Badge from "./components/Badge";
 import Button from "./components/Button";
-import Pill from "./components/Pill";
+import Pill, {PillsGroup} from "./components/Pill";
 
-export {Badge, Button, AttentionBox, Pill};
+export {Badge, Button, AttentionBox, Pill, PillsGroup};