feat(BadgeListItem): add size prop (#3797)

* feat(BadgeListItem): add size prop for text size BadgeListItem now accepts size prop for changing the text size. Size can be small (default) or normal. * fixup! feat(BadgeListItem): add size prop for text size
kiwicom · Apr 6, 2023 · 27501b6 · 27501b6
1 parent 0f34767
commit 27501b6
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 20 deletions.
diff --git a/docs/src/__examples__/BadgeList/DEFAULT.tsx b/docs/src/__examples__/BadgeList/DEFAULT.tsx
@@ -20,6 +20,12 @@ export default {
           defaultValue: "neutral",
           options: ["neutral", "info", "success", "warning", "critical"],
         },
+        {
+          name: "size",
+          type: "select",
+          defaultValue: "small",
+          options: ["small", "normal"],
+        },
         { name: "strikeThrough", type: "boolean", defaultValue: false },
       ],
     },

diff --git a/packages/orbit-components/src/BadgeList/BadgeList.stories.tsx b/packages/orbit-components/src/BadgeList/BadgeList.stories.tsx
@@ -5,7 +5,7 @@ import { text, select, boolean } from "@storybook/addon-knobs";
 import * as Icons from "../icons";
 import Tooltip from "../Tooltip";
 import TextLink from "../TextLink";
-import { TYPE_OPTIONS } from "./consts";
+import { SIZE_OPTIONS, TYPE_OPTIONS } from "./consts";
 import Text from "../Text";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
@@ -48,23 +48,50 @@ export const Types = () => {
   );
 };
 
+export const Sizes = () => (
+  <BadgeList>
+    <BadgeListItem icon={<Icons.AlertCircle />} size="small">
+      Size small
+    </BadgeListItem>
+    <BadgeListItem icon={<Icons.BaggageCabin />} size="normal">
+      Size normal
+    </BadgeListItem>
+  </BadgeList>
+);
+
 export const Playground = () => {
   const dataTest = text("dataTest", "test");
   const type = select("type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.NEUTRAL);
+  const size = select("size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.SMALL);
   const strikeThrough = boolean("strikeThrough", false);
 
   return (
     <BadgeList dataTest={dataTest}>
-      <BadgeListItem icon={<Icons.AlertCircle />} type={type} strikeThrough={strikeThrough}>
+      <BadgeListItem
+        icon={<Icons.AlertCircle />}
+        type={type}
+        strikeThrough={strikeThrough}
+        size={size}
+      >
         You&apos;re departing from a different place
       </BadgeListItem>
-      <BadgeListItem icon={<Icons.SelfTransfer />} type={type} strikeThrough={strikeThrough}>
+      <BadgeListItem
+        icon={<Icons.SelfTransfer />}
+        type={type}
+        strikeThrough={strikeThrough}
+        size={size}
+      >
         <Tooltip content="Additional information">
           <Text>Self transfer at Vienna</Text>
         </Tooltip>{" "}
         is your responsibility
       </BadgeListItem>
-      <BadgeListItem icon={<Icons.KiwicomGuarantee />} type={type} strikeThrough={strikeThrough}>
+      <BadgeListItem
+        icon={<Icons.KiwicomGuarantee />}
+        type={type}
+        strikeThrough={strikeThrough}
+        size={size}
+      >
         <TextLink onClick={action("link clicked")} type="secondary">
           Transfer protected
         </TextLink>{" "}

diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.js.flow b/packages/orbit-components/src/BadgeList/BadgeListItem/index.js.flow
@@ -5,12 +5,14 @@ import type { StyledComponent } from "styled-components";
 import type { Globals } from "../../common/common.js.flow";
 
 export type Type = "neutral" | "info" | "success" | "warning" | "critical";
+export type Size = "small" | "normal";
 
 export type Props = {|
   +children: React.Node,
   +icon: React.Element<any>,
   +strikeThrough?: boolean,
   +type?: Type,
+  +size?: Size,
   ...Globals,
 |};
 

diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx b/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 
 import Text, { StyledText } from "../../Text";
-import { TYPE_OPTIONS } from "../consts";
+import { TYPE_OPTIONS, SIZE_OPTIONS } from "../consts";
 import defaultTheme from "../../defaultTheme";
 import { ICON_COLORS } from "../../Icon/consts";
 import { StyledTooltipChildren } from "../../primitives/TooltipPrimitive";
@@ -52,8 +52,8 @@ export const StyledVerticalBadge = styled.div<{ $type?: Props["type"] }>`
     justify-content: center;
     margin-${right}: ${theme.orbit.spaceXSmall};
     flex-shrink: 0;
-    height: ${theme.orbit.heightIconMedium};
-    width: ${theme.orbit.widthIconMedium};
+    height: ${theme.orbit.heightIconLarge};
+    width: ${theme.orbit.widthIconLarge};
     border-radius: ${theme.orbit.borderRadiusCircle};
     svg {
       height: ${theme.orbit.heightIconSmall};
@@ -70,11 +70,6 @@ export const StyledBadgeContent = styled.div`
   ${({ theme }) => css`
     display: inline-flex;
     align-items: center;
-    &,
-    ${StyledText} {
-      font-size: ${theme.orbit.fontSizeTextSmall};
-      line-height: ${theme.orbit.lineHeightTextSmall};
-    }
 
     ${StyledTooltipChildren} ${StyledText} {
       font-weight: ${theme.orbit.fontWeightMedium};
@@ -90,6 +85,7 @@ const BadgeListItem = ({
   icon,
   strikeThrough,
   type = TYPE_OPTIONS.NEUTRAL,
+  size = SIZE_OPTIONS.SMALL,
   dataTest,
   children,
 }: Props) => {
@@ -102,7 +98,7 @@ const BadgeListItem = ({
           })}
       </StyledVerticalBadge>
       <StyledBadgeContent>
-        <Text type="secondary" size="small" as="span" strikeThrough={strikeThrough}>
+        <Text type="secondary" size={size} as="span" strikeThrough={strikeThrough}>
           {children}
         </Text>
       </StyledBadgeContent>

diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/types.d.ts b/packages/orbit-components/src/BadgeList/BadgeListItem/types.d.ts
@@ -5,9 +5,12 @@ import type * as React from "react";
 import type * as Common from "../../common/types";
 
 export type Type = "neutral" | "info" | "success" | "warning" | "critical";
+export type Size = "small" | "normal";
+
 export interface Props extends Common.Globals {
   readonly children: React.ReactNode;
   readonly type?: Type;
+  readonly size?: Size;
   readonly strikeThrough?: boolean;
   readonly icon: React.ReactNode;
 }
diff --git a/packages/orbit-components/src/BadgeList/README.md b/packages/orbit-components/src/BadgeList/README.md
@@ -31,14 +31,15 @@ Table below contains all types of the props available in BadgeList component.
 | children      | `React.Node`    |             | The content of the BadgeListItem.    |
 | icon          | `React.Node`    |             | The displayed icon on the left.      |
 | type          | [`enum`](#enum) | `"neutral"` | The color type of the BadgeListItem. |
+| size          | [`enum`](#enum) | `"small"`   | The text size of the BadgeListItem.  |
 | strikeThrough | `boolean`       | `false`     | Whether the text is striked through. |
 
 ### enum
 
-| type         |
-| :----------- |
-| `"neutral"`  |
-| `"info"`     |
-| `"success"`  |
-| `"warning"`  |
-| `"critical"` |
+| type         | size       |
+| :----------- | ---------- |
+| `"neutral"`  | `"small"`  |
+| `"info"`     | `"normal"` |
+| `"success"`  |            |
+| `"warning"`  |            |
+| `"critical"` |            |
diff --git a/packages/orbit-components/src/BadgeList/consts.ts b/packages/orbit-components/src/BadgeList/consts.ts
@@ -5,3 +5,8 @@ export enum TYPE_OPTIONS {
   WARNING = "warning",
   CRITICAL = "critical",
 }
+
+export enum SIZE_OPTIONS {
+  SMALL = "small",
+  NORMAL = "normal",
+}