feat(KeyValue): new spacing, direction properties (#3576)

docs/src/__examples__/KeyValue/DEFAULT.tsx

@@ -25,6 +25,28 @@ export default {
           options: ["normal", "large"],
           defaultValue: "normal",
         },
+        {
+          name: "spacing",
+          type: "select",
+          defaultValue: "medium",
+          options: [
+            "none",
+            "XXXSmall",
+            "XXSmall",
+            "XSmall",
+            "small",
+            "medium",
+            "large",
+            "XLarge",
+            "XXLarge",
+          ],
+        },
+        {
+          name: "direction",
+          type: "select",
+          defaultValue: "row",
+          options: ["row", "column"],
+        },
       ],
     },
   ],

packages/orbit-components/src/KeyValue/KeyValue.stories.jsx

@@ -2,14 +2,43 @@
 import * as React from "react";
 import { text, select } from "@storybook/addon-knobs";
 
+import Clock from "../icons/Clock";
+import Stack from "../Stack";
+import { SPACINGS } from "../utils/layout/consts";
+
 import KeyValue from ".";
 
 export const Default = (): React.Node => {
-  const label = text("label", "Key");
-  const value = text("value", "Value");
+  const label = text("label", "Departure");
+  const value = text("value", "Brno ➝ Prague");
+  const size = select("size", ["normal", "large"], "normal");
+  const spacing = select("Spacing", Object.values(SPACINGS), undefined);
+
+  return <KeyValue label={label} value={value} size={size} direction="column" spacing={spacing} />;
+};
+
+export const WithIcon = (): React.Node => {
   const size = select("size", ["normal", "large"], "normal");
+  const spacing = select("Spacing", Object.values(SPACINGS), undefined);
 
-  return <KeyValue label={label} value={value} size={size} />;
+  return (
+    <Stack flex justify="between" align="end">
+      <KeyValue
+        label="Departure"
+        value="Brno ➝ Prague"
+        size={size}
+        direction="column"
+        spacing={spacing}
+      />
+      <KeyValue
+        value="6h 10m"
+        size={size}
+        direction="row"
+        spacing={spacing}
+        icon={<Clock size="small" />}
+      />
+    </Stack>
+  );
 };
 
 export default {

packages/orbit-components/src/KeyValue/README.md

@@ -16,16 +16,33 @@ After adding import into your project you can use it simply like:
 
 Table below contains all types of the props available in `KeyValue` component.
 
-| Name     | Type            | Default    | Description                         |
-| :------- | :-------------- | :--------- | :---------------------------------- |
-| dataTest | `string`        |            | Optional prop for testing purposes. |
-| label    | `string`        |            | Set the first text                  |
-| value    | `string`        |            | Set the second text                 |
-| size     | [`enum`](#enum) | `"normal"` | The size of the `KeyValue`          |
+| Name      | Type                  | Default    | Description                                |
+| :-------- | :-------------------- | :--------- | :----------------------------------------- |
+| dataTest  | `string`              |            | Optional prop for testing purposes.        |
+| label     | `string`              |            | Set the first text                         |
+| value     | `string`              |            | Set the second text                        |
+| size      | [`enum`](#enum)       | `"normal"` | The size of the `KeyValue`                 |
+| icon      |                       |            | The displayed icon between label and value |
+| spacing   | [`spacing`](#spacing) | `"medium"` | The spacing between its children.          |
+| direction | `"row" \| "column"`   | `column`   | The `flex-direction` of the KeyValue.      |
 
 ### size
 
 | size       |
 | :--------- |
 | `"normal"` |
 | `"large"`  |
+
+### spacing
+
+| name         | size on `992px - ∞` |
+| :----------- | :------------------ |
+| `"none"`     | `null`              |
+| `"XXXSmall"` | `2px`               |
+| `"XXSmall"`  | `4px`               |
+| `"XSmall"`   | `8px`               |
+| `"small"`    | `12px`              |
+| `"medium"`   | `16px`              |
+| `"large"`    | `24px`              |
+| `"XLarge"`   | `32px`              |
+| `"XXLarge"`  | `40px`              |

packages/orbit-components/src/KeyValue/index.d.ts

@@ -3,10 +3,14 @@
 import * as React from "react";
 
 import * as Common from "../common/common";
+import { Spacing } from "../Stack";
 
 export interface Props extends Common.Global {
-  readonly label: React.ReactNode;
+  readonly label?: React.ReactNode;
   readonly value: React.ReactNode;
+  readonly icon?: React.ReactNode;
+  readonly direction?: "row" | "column";
+  readonly spacing?: Spacing;
   readonly size?: "normal" | "large";
 }
 

packages/orbit-components/src/KeyValue/index.jsx

@@ -1,23 +1,60 @@
 // @flow
 import * as React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
+import defaultTheme from "../defaultTheme";
+import { SPACINGS } from "../utils/layout/consts";
 import Text from "../Text";
 
 import type { Props } from ".";
 
+const getSpacing = ({ theme }) => ({
+  [SPACINGS.XXXSMALL]: theme.orbit.spaceXXXSmall,
+  [SPACINGS.XXSMALL]: theme.orbit.spaceXXSmall,
+  [SPACINGS.XSMALL]: theme.orbit.spaceXSmall,
+  [SPACINGS.SMALL]: theme.orbit.spaceSmall,
+  [SPACINGS.MEDIUM]: theme.orbit.spaceMedium,
+  [SPACINGS.LARGE]: theme.orbit.spaceLarge,
+  [SPACINGS.XLARGE]: theme.orbit.spaceXLarge,
+  [SPACINGS.XXLARGE]: theme.orbit.spaceXXLarge,
+});
+
+const resolveSpacing = ({ spacing, theme }) => getSpacing({ theme })[spacing];
+
 const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${({ $direction, spacing, theme }) => css`
+    display: flex;
+    flex-direction: ${$direction};
+    align-items: ${$direction !== "column" ? "center" : "flex-start"};
+    gap: ${resolveSpacing({ spacing, theme })};
+  `};
 `;
 
-const KeyValue = ({ dataTest, label, value, size = "normal" }: Props): React.Node => {
+// $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
+StyledWrapper.defaultProps = {
+  theme: defaultTheme,
+};
+
+const KeyValue = ({
+  dataTest,
+  label,
+  value,
+  spacing,
+  icon,
+  size = "normal",
+  direction = "column",
+}: Props): React.Node => {
   return (
-    <StyledWrapper data-test={dataTest}>
-      <Text type="secondary" size={size === "normal" ? "small" : "normal"}>
-        {label}
+    <StyledWrapper data-test={dataTest} $direction={direction} spacing={spacing}>
+      {label && (
+        <Text type="secondary" size={size === "normal" ? "small" : "normal"}>
+          {label}
+        </Text>
+      )}
+      {icon}
+      <Text size={size} weight="bold">
+        {value}
       </Text>
-      <Text size={size}>{value}</Text>
     </StyledWrapper>
   );
 };

packages/orbit-components/src/KeyValue/index.jsx.flow

@@ -2,10 +2,14 @@
 import * as React from "react";
 
 import type { Globals } from "../common/common.js.flow";
+import type { Spacing } from "../Stack";
 
 export type Props = {|
-  +label: React.Node,
+  +label?: React.Node,
   +value: React.Node,
+  +icon?: React.Node,
+  +direction?: "row" | "column",
+  +spacing?: Spacing,
   +size?: "normal" | "large",
   ...Globals,
 |};