Remove default placeItems value from Flex and add a width prop (#151)

* Remove default placeItems value from Flex and add a width prop

* Fix Link focus style when appearance is "primary-button" or "secondary-button"

* Add margin and width props to Stack

* Add "display: block" to svg icons

* Set vertical-align="top" on icon links

src/components/Flex.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
 import {
   responsiveMarginType,
+  responsiveWidthType,
   responsiveHeightType,
   responsivePropType,
 } from "../hooks/useResponsiveProp";
@@ -19,7 +20,6 @@ const PLACE_ITEMS = FLEX_PLACE_ITEMS;
 
 const DEFAULT_PROPS = {
   direction: "row",
-  placeItems: "top left",
 };
 
 Flex.DIRECTIONS = DIRECTIONS;
@@ -29,9 +29,9 @@ Flex.DEFAULT_PROPS = DEFAULT_PROPS;
 function Flex(_props) {
   const props = { ...DEFAULT_PROPS, ..._props };
   const { children, testId } = props;
-  const childrenArray = React.Children.toArray(children);
   const wrapperCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
     margin: responsiveMargin,
+    width: responsiveSize("width"),
     height: responsiveSize("height"),
   });
   const flexCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
@@ -55,14 +55,15 @@ function Flex(_props) {
           ...flexCSS,
         }}
       >
-        {childrenArray}
+        {children}
       </div>
     </div>
   );
 }
 
 Flex.propTypes = {
   ...responsiveMarginType,
+  ...responsiveWidthType,
   ...responsiveHeightType,
   ...responsivePropType("direction", PropTypes.oneOf(DIRECTIONS)),
   ...responsivePropType("placeItems", PropTypes.oneOf(PLACE_ITEMS)),

src/components/Flex.test.js

@@ -4,6 +4,14 @@ import "@testing-library/jest-dom/extend-expect";
 import Flex from "./Flex";
 
 describe("Flex", () => {
+  it("with width", () => {
+    const { container } = render(<Flex width="320">Content goes here</Flex>);
+
+    expect(container.firstChild).toHaveStyle({
+      width: "320px",
+    });
+  });
+
   it("with height", () => {
     const { container } = render(<Flex height="100%">Content goes here</Flex>);
 

src/components/Footer.js

@@ -50,11 +50,9 @@ function HeaderSocial({ children, testId }) {
         <Text margin="0" margin-sm="0 4 0 0">
           <strong>Connect with us</strong>
         </Text>
-        <Container margin="0 0 0 auto" margin-sm="0">
-          <Stack direction="horizontal" gap="3">
-            {children}
-          </Stack>
-        </Container>
+        <Stack direction="horizontal" gap="3" margin="0 0 0 auto" margin-sm="0">
+          {children}
+        </Stack>
       </Flex>
     </Container>
   );

src/components/Stack.js

@@ -2,17 +2,23 @@ import React from "react";
 import PropTypes from "prop-types";
 import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
 import useResponsiveProp, {
+  responsiveMarginType,
+  responsiveWidthType,
   responsivePropType,
 } from "../hooks/useResponsiveProp";
+import {
+  responsiveMargin,
+  responsiveSize,
+  getGapValues,
+  mergeResponsiveCSS,
+} from "../utils/css";
 import { mergeProps } from "../utils/component";
-import { getGapValues } from "../utils/css";
 
 const DIRECTIONS = ["vertical", "horizontal"];
 const ALIGNMENTS = ["left", "center", "right"];
 
 const DEFAULT_PROPS = {
   direction: "vertical",
-  align: "left",
   gap: "0",
 };
 
@@ -21,10 +27,20 @@ Stack.ALIGNMENTS = ALIGNMENTS;
 Stack.DEFAULT_PROPS = DEFAULT_PROPS;
 
 function Stack(props) {
-  const mergedProps = mergeProps(props, DEFAULT_PROPS);
+  const mergedProps = mergeProps(
+    props,
+    DEFAULT_PROPS,
+    {},
+    {
+      direction: (direction) => DIRECTIONS.includes(direction),
+      align: (align) => ALIGNMENTS.includes(align),
+    }
+  );
   const { children, testId } = mergedProps;
   const direction = useResponsiveProp(mergedProps, "direction");
   const flexWrapperCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
+    margin: responsiveMargin,
+    width: responsiveSize("width"),
     gap: ({ gap }, theme) => {
       const gapValues = getGapValues(gap, theme);
 
@@ -35,12 +51,18 @@ function Stack(props) {
       const { rowGap } = gapValues;
 
       return {
-        marginTop: `-${parseInt(rowGap, 10) + 1}px`,
+        "::before": {
+          marginTop: `-${parseInt(rowGap, 10) + 1}px`,
+        },
       };
     },
   });
   const flexCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
     align: ({ direction, align }) => {
+      if (!align) {
+        return {};
+      }
+
       return {
         [direction === "horizontal" ? "justifyContent" : "alignItems"]:
           align === "center"
@@ -83,14 +105,16 @@ function Stack(props) {
 
   return (
     <div
-      css={{
-        paddingTop: "1px",
-        "::before": {
-          content: '""',
-          display: "block",
-          ...flexWrapperCSS,
+      css={mergeResponsiveCSS(
+        {
+          paddingTop: "1px",
+          "::before": {
+            content: '""',
+            display: "block",
+          },
         },
-      }}
+        flexWrapperCSS
+      )}
       data-testid={testId}
     >
       <div
@@ -104,13 +128,7 @@ function Stack(props) {
         {React.Children.toArray(children)
           .filter((child) => child != null)
           .map((child, index) => (
-            <div
-              css={{
-                display: "inline-flex",
-                ...childCSS,
-              }}
-              key={index}
-            >
+            <div css={childCSS} key={index}>
               {child}
             </div>
           ))}
@@ -120,6 +138,8 @@ function Stack(props) {
 }
 
 Stack.propTypes = {
+  ...responsiveMarginType,
+  ...responsiveWidthType,
   ...responsivePropType("direction", PropTypes.oneOf(DIRECTIONS)),
   ...responsivePropType("align", PropTypes.oneOf(ALIGNMENTS)),
   ...responsivePropType(

src/components/Stack.test.js

@@ -4,6 +4,32 @@ import { Stack, Text } from ".";
 import { render } from "../utils/test";
 
 describe("Stack", () => {
+  it("with margin", () => {
+    const { container } = render(
+      <Stack margin="4 8">
+        <Text>Hello</Text>
+        <Text>World</Text>
+      </Stack>
+    );
+
+    expect(container.firstChild).toHaveStyle({
+      margin: "16px 32px",
+    });
+  });
+
+  it("with width", () => {
+    const { container } = render(
+      <Stack width="320">
+        <Text>Hello</Text>
+        <Text>World</Text>
+      </Stack>
+    );
+
+    expect(container.firstChild).toHaveStyle({
+      width: "320px",
+    });
+  });
+
   it("with testId", () => {
     const { container } = render(
       <Stack testId="my-stack">

src/hooks/useResponsivePropsCSS.test.js

@@ -356,10 +356,9 @@ describe("useResponsivePropsCSS", () => {
     );
 
     expect(result.current).toStrictEqual({
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
       "@media (min-width: 375px)": {
         alignItems: "flex-end",
+        justifyContent: "flex-start",
       },
       "@media (min-width: 576px)": {
         alignItems: "center",

src/icons/arrow-back.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function ArrowBack({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/arrow-forward.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function ArrowForward({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/assistance.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Assistance({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/birthday.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Birthday({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/blocking.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Blocking({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/calculator.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Calculator({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/chevron-down.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function ChevronDown({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/chevron-left.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function ChevronLeft({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/chevron-right.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function ChevronRight({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/chevron-up.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function ChevronUp({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/comparison.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Comparison({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/critical.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Critical({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/cross-small.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function CrossSmall({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/cross.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Cross({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/devices.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Devices({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"

src/icons/download.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 function Download({ size, primaryColor, testId }) {
   return (
     <svg
+      css={{
+        display: "block",
+      }}
       width={size}
       height={size}
       viewBox="0 0 32 32"