Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add altStyle to Badge #352

Merged
merged 4 commits into from
Jan 30, 2025
Merged

add altStyle to Badge #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb9cad1
add altStyle to Badge
Jan 30, 2025
78190cc
add fixed port and tidy storybook and CSS
Jan 30, 2025
c760821
3.3.3
Jan 30, 2025
affc0fe
modified yellow text colour of alt badge
abottega Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions lib/components/Badge/Badge.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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

Expand Down
84 changes: 60 additions & 24 deletions lib/components/Badge/Badge.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
123 changes: 82 additions & 41 deletions lib/components/Badge/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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
};
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "orcs-design-system",
"version": "3.3.2",
"version": "3.3.3",
"engines": {
"node": "20.12.2"
},
Expand Down Expand Up @@ -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",
Expand Down
Loading