Modal component

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 - Added Accessibility tab to storybook
+- Added [Modal](https://nulogy.design/components/modal/) component
 
 ### Changed
 

components/package.json

@@ -81,6 +81,7 @@
     "@storybook/theming": "^5.0.11",
     "downshift": "3.2.2",
     "polished": "3.0.0",
+    "react-modal": "^3.8.2",
     "react-popper": "^1.3.3",
     "styled-components": "^4.1.3",
     "styled-system": "^3.2.1",

components/src/Button/Button.story.js

@@ -8,21 +8,21 @@ storiesOf("Buttons", module)
   .add("DangerButton", () => <DangerButton>Delete project</DangerButton>)
   .add("QuietButton", () => <QuietButton>Create project</QuietButton>)
   .add("With a selected size", () => (
-    <React.Fragment>
+    <>
       <Button size="small">Create project</Button>
       <Button size="medium">Create project</Button>
       <Button size="large">Create project</Button>
-    </React.Fragment>
+    </>
   ))
   .add("With a selected Icon", () => (
-    <React.Fragment>
+    <>
       <Button icon="add" iconSide="left">
         Create project
       </Button>
       <Button icon="add" iconSide="right">
         Create project
       </Button>
-    </React.Fragment>
+    </>
   ))
   .add("Set to full width", () => <PrimaryButton fullWidth>Create project</PrimaryButton>)
   .add("Set to disabled", () => <PrimaryButton disabled>Create project</PrimaryButton>)

components/src/Button/CloseButton.js

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+import { Icon } from "../Icon";
+import theme from "../theme";
+
+const WrapperButton = styled.button(({ disabled }) => ({
+  background: "transparent",
+  border: "none",
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  padding: 0,
+  color: theme.colors.black,
+  cursor: disabled ? "arrow" : "pointer",
+
+  [`${Icon}`]: {
+    borderRadius: theme.radii.circle,
+    transition: ".2s"
+  },
+  "&:hover": {
+    [`${Icon}`]: {
+      backgroundColor: theme.colors.lightGrey
+    }
+  },
+  "&:active": {
+    [`${Icon}`]: {
+      transform: "scale(0.875)",
+      transition: ".2s ease-in"
+    }
+  },
+  "&:disabled": {
+    opacity: ".5",
+    "&:hover, &:active": {
+      [`${Icon}`]: {
+        background: "none",
+        transform: "none"
+      }
+    }
+  },
+  "&:focus": {
+    outline: "none",
+    [`${Icon}`]: {
+      boxShadow: theme.shadows.focus
+    }
+  }
+}));
+
+const BaseCloseButton = React.forwardRef(({ ...props }, ref) => (
+  <WrapperButton aria-label="close" ref={ref} label="close" {...props}>
+    <Icon size={theme.space.x4} icon="close" p="half" />
+  </WrapperButton>
+));
+
+const CloseButton = styled(BaseCloseButton)({});
+
+export default CloseButton;

components/src/Button/IconicButton.story.js

@@ -8,14 +8,14 @@ storiesOf("IconicButton", module)
     <IconicButton icon="user">I am an Iconic Button with a really really really long label</IconicButton>
   ))
   .add("set to disabled", () => (
-    <React.Fragment>
+    <>
       <IconicButton icon="cancel" disabled>
         Cancel
       </IconicButton>
       <IconicButton icon="lock" disabled>
         Lock
       </IconicButton>
-    </React.Fragment>
+    </>
   ))
   .add("with a hidden label", () => (
     <IconicButton ml="x6" labelHidden icon="user">

components/src/Button/index.js

@@ -3,3 +3,4 @@ export { default as PrimaryButton } from "./PrimaryButton";
 export { default as DangerButton } from "./DangerButton";
 export { default as QuietButton } from "./QuietButton";
 export { default as IconicButton } from "./IconicButton";
+export { default as CloseButton } from "./CloseButton";

components/src/ButtonSet/ButtonSet.js

@@ -0,0 +1,52 @@
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import theme from "../theme";
+
+const alignments = {
+  left: "flex-start",
+  spaced: "space-between",
+  right: "flex-end"
+};
+
+const buttonSpacings = {
+  left: {
+    "button:not(:last-child)": {
+      marginRight: theme.space.x1
+    }
+  },
+  spaced: {
+    "button:not(:last-child)": {
+      marginRight: theme.space.x1
+    }
+  },
+  right: {
+    "button:not(:first-child)": {
+      marginLeft: theme.space.x1
+    }
+  }
+};
+
+const getAlignment = alignment => alignments[alignment] || alignments.right;
+
+const getButtonSpacing = alignment => buttonSpacings[alignment] || buttonSpacings.right;
+
+const ButtonSet = styled.div(({ alignment }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  marginBottom: `-${theme.space.x1}`,
+  justifyContent: getAlignment(alignment),
+  button: {
+    marginBottom: theme.space.x1
+  },
+  ...getButtonSpacing(alignment)
+}));
+
+ButtonSet.propTypes = {
+  alignment: PropTypes.oneOf(["left", "spaced", "right"])
+};
+
+ButtonSet.defaultProps = {
+  alignment: "right"
+};
+
+export default ButtonSet;

components/src/ButtonSet/ButtonSet.story.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Box, ButtonSet, Button, PrimaryButton, DangerButton, QuietButton, IconicButton } from "../index";
+
+storiesOf("ButtonSet", module)
+  .add("ButtonSet", () => (
+    <Box bg="whiteGrey" p="x2" width="500px">
+      <ButtonSet>
+        <Button>Button</Button>
+        <Button>Button</Button>
+        <PrimaryButton>Button</PrimaryButton>
+      </ButtonSet>
+    </Box>
+  ))
+  .add("with alignment left", () => (
+    <Box bg="whiteGrey" p="x2" width="500px">
+      <ButtonSet alignment="left">
+        <PrimaryButton>Button</PrimaryButton>
+        <Button>Button</Button>
+        <Button>Button</Button>
+      </ButtonSet>
+    </Box>
+  ))
+  .add("with alignment spaced", () => (
+    <Box bg="whiteGrey" p="x2" width="500px">
+      <ButtonSet alignment="spaced">
+        <Button>Button</Button>
+        <PrimaryButton>Button</PrimaryButton>
+      </ButtonSet>
+    </Box>
+  ))
+  .add("more button types", () => (
+    <Box bg="whiteGrey" p="x2" width="600px">
+      <ButtonSet>
+        <Button>Button</Button>
+        <PrimaryButton>Button</PrimaryButton>
+        <DangerButton>Button</DangerButton>
+        <QuietButton>Button</QuietButton>
+        <IconicButton icon="menu" />
+        <IconicButton icon="menu">Button</IconicButton>
+      </ButtonSet>
+    </Box>
+  ))
+  .add(
+    "wrapping buttons",
+    () => (
+      <>
+        <Box bg="whiteGrey" p="x2">
+          <ButtonSet>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+          </ButtonSet>
+        </Box>
+        <Box bg="whiteGrey" p="x2" mt="x2">
+          <ButtonSet alignment="left">
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+            <Button>Button</Button>
+          </ButtonSet>
+        </Box>
+      </>
+    ),
+    { viewport: { defaultViewport: "extraSmall" } }
+  );

components/src/ButtonSet/index.js

@@ -0,0 +1 @@
+export { default as ButtonSet } from "./ButtonSet";

components/src/Icon/Icon.js

@@ -9,11 +9,11 @@ const iconNames = Object.keys(icons);
 
 /* eslint-disable react/no-array-index-key */
 const getPathElements = icon => (
-  <React.Fragment>
+  <>
     {icon.path.map((path, index) => (
       <path key={index} d={path} />
     ))}
-  </React.Fragment>
+  </>
 );
 /* eslint-enable react/no-array-index-key */
 

components/src/Icon/Icon.story.js

@@ -22,17 +22,17 @@ IconCode.propTypes = {
 
 storiesOf("Icon", module)
   .add("Icon", () => (
-    <React.Fragment>
+    <>
       {iconNames.map(iconName => (
         <Flex my="x2" key={iconName}>
           <Icon mr="20px" icon={iconName} />
           <IconCode icon={iconName} />
         </Flex>
       ))}
-    </React.Fragment>
+    </>
   ))
   .add("InlineIcon", () => (
-    <React.Fragment>
+    <>
       {[1, 2, 3, 4].map(size => (
         <p style={{ fontSize: `${size}em` }} key={size}>
           @{size}em: &nbsp;
@@ -41,10 +41,10 @@ storiesOf("Icon", module)
           ))}
         </p>
       ))}
-    </React.Fragment>
+    </>
   ))
   .add("With a color", () => (
-    <React.Fragment>
+    <>
       {[theme.colors.red, theme.colors.yellow, theme.colors.green, theme.colors.blue, theme.colors.blackBlue].map(
         color => (
           <Box key={color}>
@@ -54,18 +54,18 @@ storiesOf("Icon", module)
           </Box>
         )
       )}
-    </React.Fragment>
+    </>
   ))
   .add("With a size", () => (
-    <React.Fragment>
+    <>
       {[theme.space.x1, theme.space.x2, theme.space.x3].map(size => (
         <Box key={size}>
           {iconSubset.map(iconName => (
             <Icon icon={iconName} size={size} key={iconName} />
           ))}
         </Box>
       ))}
-    </React.Fragment>
+    </>
   ))
   .add("With added margin", () => (
     <Box m="x3">
@@ -93,7 +93,7 @@ storiesOf("Icon", module)
     </Box>
   ))
   .add("With accessibility title", () => (
-    <React.Fragment>
+    <>
       <Flex p="x2">
         <Icon icon="user" title="User account" />
         {" This has a title attribute so it will be read by assistive devices."}
@@ -102,5 +102,5 @@ storiesOf("Icon", module)
         <Icon icon="user" />
         {" This doesn't have a title attribute, so it has aria-hidden set true instead."}
       </Flex>
-    </React.Fragment>
+    </>
   ));