add altStyle to Badge (#352)

* add altStyle to Badge * add fixed port and tidy storybook and CSS * 3.3.3 * modified yellow text colour of alt badge --------- Co-authored-by: Duncan Fermor <[email protected]> Co-authored-by: Adam Bottega <[email protected]>
orchestrated-io · Jan 30, 2025 · d6ec235 · d6ec235
1 parent 41c8b47
commit d6ec235
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 71 deletions.
diff --git a/lib/components/Badge/Badge.mdx b/lib/components/Badge/Badge.mdx
@@ -6,7 +6,7 @@ import * as stories from "./Badge.stories";
 
 # Badge
 
-[Default badge](#default-badge) | [Colour variants](#colour-variants) | [Properties](#properties)
+[Default badge](#default-badge) | [Colour variants](#colour-variants) | [Alt style](#alt-style) | [Properties](#properties)
 
 Badges should be used for things like status, indicators, or other additional information that you want to highlight but not make interactive/clickable.
 
@@ -20,7 +20,14 @@ Without specifying a variant colour, the default badge will just take a grey col
 
 The variants can be used on light or dark backgrounds
 
-<Canvas of={stories.colourVariants} />
+<Canvas of={stories.ColourVariants} />
+
+## Alt style
+
+This example is showing the alternate style for Badges
+
+<Canvas of={stories.altStyleColourVariants} />
+
 
 ## Properties
 

diff --git a/lib/components/Badge/Badge.stories.js b/lib/components/Badge/Badge.stories.js
@@ -12,36 +12,72 @@ export default {
 export const defaultBadge = () => <Badge>Default</Badge>;
 defaultBadge.storyName = "Default";
 
-export const colourVariants = () => (
+// eslint-disable-next-line react/prop-types
+export const ColourVariants = ({ altStyle = false } = {}) => (
   <>
     <Box p="r">
       <Flex flexWrap="wrap">
         <Spacer m="1">
-          <Badge>Default</Badge>
-          <Badge variant="success">Success</Badge>
-          <Badge variant="warning">Warning</Badge>
-          <Badge variant="danger">Danger</Badge>
-          <Badge variant="primaryLight">Low priority</Badge>
-          <Badge variant="primary">Medium priority</Badge>
-          <Badge variant="primaryDark">High priority</Badge>
-          <Badge variant="secondary">Secondary</Badge>
-        </Spacer>
-      </Flex>
-    </Box>
-    <Box p="r" bg="greyDarkest">
-      <Flex flexWrap="wrap">
-        <Spacer m="1">
-          <Badge>Default</Badge>
-          <Badge variant="success">Success</Badge>
-          <Badge variant="warning">Warning</Badge>
-          <Badge variant="danger">Danger</Badge>
-          <Badge variant="primaryLight">Low priority</Badge>
-          <Badge variant="primary">Medium priority</Badge>
-          <Badge variant="primaryDark">High priority</Badge>
-          <Badge variant="secondary">Secondary</Badge>
+          <Badge altStyle={altStyle}>Default</Badge>
+          <Badge altStyle={altStyle} variant="success">
+            Success
+          </Badge>
+          <Badge altStyle={altStyle} variant="warning">
+            Warning
+          </Badge>
+          <Badge altStyle={altStyle} variant="danger">
+            Danger
+          </Badge>
+          <Badge altStyle={altStyle} variant="primaryLight">
+            Low priority
+          </Badge>
+          <Badge altStyle={altStyle} variant="primary">
+            Medium priority
+          </Badge>
+          <Badge altStyle={altStyle} variant="primaryDark">
+            High priority
+          </Badge>
+          <Badge altStyle={altStyle} variant="secondary">
+            Secondary
+          </Badge>
         </Spacer>
       </Flex>
     </Box>
+    {!altStyle && (
+      <Box p="r" bg="greyDarkest">
+        <Flex flexWrap="wrap">
+          <Spacer m="1">
+            <Badge altStyle={altStyle}>Default</Badge>
+            <Badge altStyle={altStyle} variant="success">
+              Success
+            </Badge>
+            <Badge altStyle={altStyle} variant="warning">
+              Warning
+            </Badge>
+            <Badge altStyle={altStyle} variant="danger">
+              Danger
+            </Badge>
+            <Badge altStyle={altStyle} variant="primaryLight">
+              Low priority
+            </Badge>
+            <Badge altStyle={altStyle} variant="primary">
+              Medium priority
+            </Badge>
+            <Badge altStyle={altStyle} variant="primaryDark">
+              High priority
+            </Badge>
+            <Badge altStyle={altStyle} variant="secondary">
+              Secondary
+            </Badge>
+          </Spacer>
+        </Flex>
+      </Box>
+    )}
   </>
 );
-colourVariants.storyName = "Colour variants";
+
+// eslint-disable-next-line react/no-unknown-property
+export const altStyleColourVariants = () => <ColourVariants altStyle={true} />;
+altStyleColourVariants.storyName = "Alt style colour variants";
+
+ColourVariants.storyName = "Colour variants";
diff --git a/lib/components/Badge/index.js b/lib/components/Badge/index.js
@@ -27,52 +27,91 @@ const Item = styled("span")
       borderRadius: 1,
       color: themeGet("colors.greyDarkest")(props),
       bg: themeGet("colors.greyLighter")(props),
-      whiteSpace: props.noWrap ? "nowrap" : "normal"
+      whiteSpace: props.noWrap ? "nowrap" : "normal",
+      ...(props.altStyle
+        ? {
+            bg: themeGet("colors.white")(props),
+            p: "1px"
+          }
+        : {})
     }),
-  (props) =>
-    variant({
-      variants: {
-        default: {},
-        success: {
-          color: themeGet("colors.successDarkest")(props),
-          bg: themeGet("colors.successLightest")(props)
-        },
-        successPending: {
-          color: themeGet("colors.successDark")(props),
-          bg: themeGet("colors.successEvenLighter")(props)
-        },
-        warning: {
-          color: themeGet("colors.warningDarkest")(props),
-          bg: themeGet("colors.warningLighter")(props)
-        },
-        danger: {
-          color: themeGet("colors.dangerDarkest")(props),
-          bg: themeGet("colors.dangerLightest")(props)
-        },
-        primaryLight: {
-          color: themeGet("colors.primaryDarker")(props),
-          bg: themeGet("colors.primaryLightest")(props)
-        },
-        primary: {
-          color: themeGet("colors.primaryDarkest")(props),
-          bg: themeGet("colors.primaryLighter")(props)
-        },
-        primaryDark: {
-          color: themeGet("colors.primaryDarkest")(props),
-          bg: themeGet("colors.primaryLight")(props)
-        },
-        secondary: {
-          color: themeGet("colors.secondaryDarkest")(props),
-          bg: themeGet("colors.secondaryEvenLighter")(props)
+  (props) => {
+    if (props.altStyle) {
+      return variant({
+        variants: {
+          default: {},
+          success: {
+            color: themeGet("colors.success")(props)
+          },
+          successPending: {
+            color: themeGet("colors.success")(props)
+          },
+          warning: {
+            color: themeGet("colors.warningDark")(props)
+          },
+          danger: {
+            color: themeGet("colors.danger")(props)
+          },
+          primaryLight: {
+            color: themeGet("colors.primaryLight")(props)
+          },
+          primary: {
+            color: themeGet("colors.primary")(props)
+          },
+          primaryDark: {
+            color: themeGet("colors.primaryDark")(props)
+          },
+          secondary: {
+            color: themeGet("colors.secondary")(props)
+          }
         }
-      }
-    }),
+      });
+    } else {
+      return variant({
+        variants: {
+          default: {},
+          success: {
+            color: themeGet("colors.successDarkest")(props),
+            bg: themeGet("colors.successLightest")(props)
+          },
+          successPending: {
+            color: themeGet("colors.successDark")(props),
+            bg: themeGet("colors.successEvenLighter")(props)
+          },
+          warning: {
+            color: themeGet("colors.warningDarkest")(props),
+            bg: themeGet("colors.warningLighter")(props)
+          },
+          danger: {
+            color: themeGet("colors.dangerDarkest")(props),
+            bg: themeGet("colors.dangerLightest")(props)
+          },
+          primaryLight: {
+            color: themeGet("colors.primaryDarker")(props),
+            bg: themeGet("colors.primaryLightest")(props)
+          },
+          primary: {
+            color: themeGet("colors.primaryDarkest")(props),
+            bg: themeGet("colors.primaryLighter")(props)
+          },
+          primaryDark: {
+            color: themeGet("colors.primaryDarkest")(props),
+            bg: themeGet("colors.primaryLight")(props)
+          },
+          secondary: {
+            color: themeGet("colors.secondaryDarkest")(props),
+            bg: themeGet("colors.secondaryEvenLighter")(props)
+          }
+        }
+      });
+    }
+  },
   BadgeStyles
 );
 
-export default function Badge({ noWrap, children, theme, ...props }) {
+export default function Badge({ noWrap, children, theme, altStyle, ...props }) {
   const component = (
-    <Item noWrap={noWrap} {...props}>
+    <Item noWrap={noWrap} altStyle={altStyle} {...props}>
       {children}
     </Item>
   );
@@ -99,5 +138,7 @@ Badge.propTypes = {
   /** The label text on the badge is passed as a child element. */
   children: PropTypes.node,
   /** Specifies the system theme. */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Specifies use the alternative style */
+  altStyle: PropTypes.bool
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "engines": {
     "node": "20.12.2"
   },
@@ -36,7 +36,7 @@
     "module": "BABEL_ENV=es babel lib -d es",
     "deploy-stack": "serverless deploy",
     "deploy-client": "serverless client deploy  --no-confirm",
-    "storybook": "storybook dev",
+    "storybook": "storybook dev -p 1337",
     "build-storybook": "storybook build -o .build_storybook",
     "deploy-storybook": "storybook-to-ghpages",
     "playroom": "playroom start",