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 status lamp [DES-5591] (pr2) #2250

Merged
merged 1 commit into from
Jun 5, 2024
Merged

Add status lamp [DES-5591] (pr2) #2250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 13 additions & 2 deletions packages/odyssey-react-mui/src/Status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const statusSeverityValues = [
"success",
"warning",
] as const;
export const statusVariantValues = ["lamp", "pill"] as const;

export type StatusProps = {
/**
Expand All @@ -33,9 +34,19 @@ export type StatusProps = {
* Determine the color and icon of the Status
*/
severity: (typeof statusSeverityValues)[number];
/**
* The style of the Status indicator
*/
variant?: (typeof statusVariantValues)[number];
} & Pick<HtmlProps, "testId" | "translate">;

const Status = ({ label, severity, testId, translate }: StatusProps) => {
const Status = ({
label,
severity,
testId,
translate,
variant = "pill",
}: StatusProps) => {
const muiProps = useMuiProps();

return (
Expand All @@ -45,7 +56,7 @@ const Status = ({ label, severity, testId, translate }: StatusProps) => {
data-se={testId}
label={label}
translate={translate}
variant="pill"
variant={variant}
/>
);
};
Expand Down
38 changes: 38 additions & 0 deletions packages/odyssey-react-mui/src/theme/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -979,6 +979,44 @@ export const components = ({
marginInlineEnd: odysseyTokens.Spacing1,
},

...(ownerState.variant === "lamp" && {
paddingBlock: 0,
paddingInline: 0,
borderRadius: 0,
border: 0,
backgroundColor: "transparent",
color: odysseyTokens.TypographyColorBody,

"&::before": {
content: "''",
width: odysseyTokens.Spacing2,
height: odysseyTokens.Spacing2,
marginInlineEnd: odysseyTokens.Spacing2,
borderRadius: "100%",
backgroundColor: odysseyTokens.HueNeutral600,
},

[`&.${chipClasses.colorError}`]: {
"&::before": {
border: 0,
backgroundColor: odysseyTokens.PaletteDangerMain,
},
},

[`&.${chipClasses.colorSuccess}`]: {
"&::before": {
border: 0,
backgroundColor: odysseyTokens.PaletteSuccessMain,
},
},

[`&.${chipClasses.colorWarning}`]: {
"&::before": {
border: 0,
backgroundColor: odysseyTokens.HueYellow200,
},
},
}),
...(ownerState.variant === "pill" && {
paddingBlock: odysseyTokens.Spacing1,
paddingInline: odysseyTokens.Spacing2,
Expand Down
52 changes: 49 additions & 3 deletions packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
Status,
StatusProps,
statusSeverityValues,
statusVariantValues,
} from "@okta/odyssey-react-mui";
import { MuiThemeDecorator } from "../../../../.storybook/components";

Expand Down Expand Up @@ -48,6 +49,20 @@ const storybookMeta: Meta<StatusProps> = {
value: "radio",
},
},
variant: {
control: "radio",
options: statusVariantValues,
description:
"Whether the Status is displayed uncontained (`lamp`) or contained (`pill`)",
table: {
type: {
summary: statusVariantValues.join(" | "),
},
defaultValue: {
summary: "pill",
},
},
},
},
args: {
label: "Warp drive in standby",
Expand All @@ -59,13 +74,13 @@ const storybookMeta: Meta<StatusProps> = {

export default storybookMeta;

export const Default: StoryObj<StatusProps> = {
export const DefaultPill: StoryObj<StatusProps> = {
args: {
label: "Warp drive in standby",
},
};

export const Error: StoryObj<StatusProps> = {
export const ErrorPill: StoryObj<StatusProps> = {
args: {
label: "Warp drive unstable",
severity: "error",
Expand All @@ -86,9 +101,40 @@ export const Success: StoryObj<StatusProps> = {
},
};

export const Warning: StoryObj<StatusProps> = {
export const WarningPill: StoryObj<StatusProps> = {
args: {
label: "Warp fuel low",
severity: "warning",
},
};

export const DefaultLamp: StoryObj<StatusProps> = {
args: {
label: "Warp drive in standby",
variant: "lamp",
},
};

export const ErrorLamp: StoryObj<StatusProps> = {
args: {
label: "Warp drive unstable",
severity: "error",
variant: "lamp",
},
};

export const SuccessLamp: StoryObj<StatusProps> = {
args: {
label: "Warp drive online",
severity: "success",
variant: "lamp",
},
};

export const WarningLamp: StoryObj<StatusProps> = {
args: {
label: "Warp fuel low",
severity: "warning",
variant: "lamp",
},
};
Loading