Skip to content

Commit

Permalink
Merge pull request #599 from LifeSG/migrate-components-label-popover-…
Browse files Browse the repository at this point in the history 
…modal-markup

Migrate components label popover modal markup
  • Loading branch information
@qroll
qroll authored Oct 27, 2024
2 parents d1d2dbe + 6c54c01 commit f5f5a53
Show file tree
Hide file tree
Showing 23 changed files with 289 additions and 310 deletions.
60 changes: 29 additions & 31 deletions src/alert/alert.style.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ChevronDownIcon } from "@lifesg/react-icons";
import styled, { css } from "styled-components";
import { V2_Color } from "../v2_color/color";
import { applyHtmlContentStyle } from "../shared/html-content/html-content";
import { V2_Text, V2_TextStyleHelper } from "../v2_text";
import { AlertSizeType, AlertType } from "./types";
import { Colour, Font } from "../theme";
import { Typography } from "../typography";

// =============================================================================
// STYLE INTERFACES, transient props are denoted with $
Expand Down Expand Up @@ -35,28 +35,28 @@ export const Wrapper = styled.div<StyleProps>`
let borderColor: string;
switch (props.$type) {
case "error":
backgroundColor = V2_Color.Validation.Red.Background(props);
borderColor = V2_Color.Validation.Red.Border(props);
backgroundColor = Colour["bg-error"](props);
borderColor = Colour["border-error"](props);
break;
case "success":
backgroundColor = V2_Color.Validation.Green.Background(props);
borderColor = V2_Color.Validation.Green.Border(props);
backgroundColor = Colour["bg-success"](props);
borderColor = Colour["border-success"](props);
break;
case "warning":
backgroundColor = V2_Color.Validation.Orange.Background(props);
borderColor = V2_Color.Validation.Orange.Border(props);
backgroundColor = Colour["bg-warning"](props);
borderColor = Colour["border-warning"](props);
break;
case "info":
backgroundColor = V2_Color.Validation.Blue.Background(props);
borderColor = V2_Color.Validation.Blue.Border(props);
backgroundColor = Colour["bg-info"](props);
borderColor = Colour["border-info"](props);
break;
case "description":
backgroundColor = V2_Color.Neutral[7](props);
borderColor = V2_Color.Neutral[4](props);
backgroundColor = Colour["bg-strong"](props);
borderColor = Colour["border-strong"](props);
break;
default:
backgroundColor = V2_Color.Validation.Orange.Background(props);
borderColor = V2_Color.Validation.Orange.Border(props);
backgroundColor = Colour["bg-warning"](props);
borderColor = Colour["border-warning"](props);
break;
}
Expand All @@ -66,12 +66,12 @@ export const Wrapper = styled.div<StyleProps>`
`;
}}
color: ${V2_Color.Neutral[1]};
color: ${Colour.text};
${(props) => {
if (props.$sizeType === "small") {
return applyHtmlContentStyle({ textSize: "H6" });
return applyHtmlContentStyle({ textSize: "body-sm" });
}
return applyHtmlContentStyle({ textSize: "BodySmall" });
return applyHtmlContentStyle({ textSize: "body-md" });
}}
`;

Expand All @@ -92,22 +92,22 @@ export const AlertIconWrapper = styled.div<StyleProps>`
const iconSize = props.$sizeType === "small" ? "1.25rem" : "1.5rem";
switch (props.$type) {
case "error":
iconColor = V2_Color.Validation.Red.Icon(props);
iconColor = Colour["icon-error"](props);
break;
case "success":
iconColor = V2_Color.Validation.Green.Icon(props);
iconColor = Colour["icon-success"](props);
break;
case "warning":
iconColor = V2_Color.Validation.Orange.Icon(props);
iconColor = Colour["icon-warning"](props);
break;
case "info":
iconColor = V2_Color.Validation.Blue.Icon(props);
iconColor = Colour["icon-info"](props);
break;
case "description":
iconColor = V2_Color.Neutral[4](props);
iconColor = Colour["icon-subtle"](props);
break;
default:
iconColor = V2_Color.Validation.Orange.Icon(props);
iconColor = Colour["icon-warning"](props);
break;
}
Expand All @@ -121,30 +121,28 @@ export const AlertIconWrapper = styled.div<StyleProps>`
}}
`;

export const ActionLinkText = styled(V2_Text.Hyperlink.Small)<StyleProps>`
export const ActionLinkText = styled(Typography.LinkSM)<StyleProps>`
${(props) => {
if (props.$sizeType === "small")
return css`
${V2_TextStyleHelper.getTextStyle("H6", "semibold")}
${Font["body-sm-semibold"]}
margin-top: 0.25rem;
`;
else {
return css`
${V2_TextStyleHelper.getTextStyle("H5", "semibold")}
${Font["body-md-semibold"]}
margin-top: 0.5rem;
`;
}
}}
display: flex;
align-items: center;
align-self: flex-start;
color: ${V2_Color.Primary};
svg {
height: 1rem;
width: 1rem;
margin-left: 0.25rem;
color: ${V2_Color.Primary};
}
`;

Expand Down Expand Up @@ -182,11 +180,11 @@ export const ShowMoreButton = styled.button<StyleProps>`
${(props) => {
if (props.$sizeType === "small")
return css`
${V2_TextStyleHelper.getTextStyle("H6", "semibold")}
${Font["body-sm-semibold"]}
`;
else {
return css`
${V2_TextStyleHelper.getTextStyle("H5", "semibold")}
${Font["body-md-semibold"]}
`;
}
}}
Expand All @@ -202,7 +200,7 @@ export const ShowMoreButton = styled.button<StyleProps>`
border: none;
background: transparent;
color: ${V2_Color.Primary};
color: ${Colour["text-primary"]};
`;

export const ChevronIcon = styled(ChevronDownIcon)<ShowMoreIconStyleProps>`
Expand Down
34 changes: 16 additions & 18 deletions src/file-upload/file-upload.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import styled from "styled-components";
import { Alert } from "../alert";
import { Button } from "../button";
import { V2_Color } from "../v2_color";
import { V2_MediaQuery } from "../v2_media";
import { applyHtmlContentStyle } from "../shared/html-content/html-content";
import { V2_Text, V2_TextStyleHelper } from "../v2_text";
import { Colour, Font, MediaQuery } from "../theme";
import { Typography } from "../typography";

// =============================================================================
// STYLING
Expand All @@ -13,25 +12,23 @@ export const TextContainer = styled.div`
display: flex;
flex-direction: column;
margin-bottom: 2rem;
gap: 0.5rem;
`;

export const Title = styled(V2_Text.H4)`
margin-bottom: 0.5rem;
`;
export const Title = styled(Typography.BodyBL)``;

export const TitleContainer = styled.div`
color: ${V2_Color.Neutral[1]};
${applyHtmlContentStyle({ textSize: "Body" })}
color: ${Colour.text};
${applyHtmlContentStyle({ textSize: "body-baseline" })}
`;

export const Description = styled(V2_Text.BodySmall)`
margin-bottom: 0;
color: ${V2_Color.Neutral[3]};
export const Description = styled(Typography.BodyMD)`
color: ${Colour["text-subtler"]};
`;

export const DescriptionContainer = styled.div`
color: ${V2_Color.Neutral[3]};
${applyHtmlContentStyle({ textSize: "BodySmall" })}
color: ${Colour.text};
${applyHtmlContentStyle({ textSize: "body-md" })}
`;

export const WarningAlert = styled(Alert)`
Expand All @@ -44,25 +41,26 @@ export const UploadButtonContainer = styled.div`
flex-direction: column;
align-items: flex-end;
${V2_MediaQuery.MaxWidth.mobileL} {
${MediaQuery.MaxWidth.sm} {
align-items: flex-start;
}
`;

export const UploadButton = styled(Button.Small)`
width: 10rem;
${V2_MediaQuery.MaxWidth.mobileL} {
${MediaQuery.MaxWidth.sm} {
width: 100%;
}
`;

export const UploadButtonLabel = styled.label`
${V2_TextStyleHelper.getTextStyle("BodySmall", "semibold")}
color: ${V2_Color.Neutral[3]};
${Font["body-md-semibold"]}
color: ${Colour["text-subtler"]};
margin-top: 0.5rem;
width: 10rem;
text-align: center;
${V2_MediaQuery.MaxWidth.mobileL} {
${MediaQuery.MaxWidth.sm} {
display: none;
visibility: hidden;
}
Expand Down
4 changes: 2 additions & 2 deletions src/file-upload/file-upload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const FileUpload = ({
}

if (typeof title === "string") {
return <Title weight="regular">{title}</Title>;
return <Title>{title}</Title>;
}

return <TitleContainer>{title}</TitleContainer>;
Expand All @@ -113,7 +113,7 @@ export const FileUpload = ({
}

if (typeof description === "string") {
return <Description weight="regular">{description}</Description>;
return <Description>{description}</Description>;
}

return <DescriptionContainer>{description}</DescriptionContainer>;
Expand Down
42 changes: 11 additions & 31 deletions src/form/form-label.style.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,28 @@
import styled from "styled-components";
import { V2_Color } from "../v2_color";
import { V2_Text, V2_TextStyleHelper } from "../v2_text";
import { applyHtmlContentStyle } from "../shared/html-content/html-content";
import { Colour, FontSpec } from "../theme";
import { Typography } from "../typography";

// =============================================================================
// STYLING
// =============================================================================
export const Label = styled.label`
${V2_TextStyleHelper.getTextStyle("H5", "semibold")}
color: ${V2_Color.Neutral[2]};
color: ${Colour["text-subtle"]};
margin-bottom: 0.5rem;
display: inline-block;
a,
span,
p {
${V2_TextStyleHelper.getTextStyle("H5", "semibold")}
}
a {
color: ${V2_Color.Primary};
text-decoration: none;
:hover,
:active,
:focus {
color: ${V2_Color.Secondary};
svg {
color: ${V2_Color.Secondary};
}
}
}
${applyHtmlContentStyle({ textSize: "body-md" })}
font-weight: ${FontSpec["weight-semibold"]};
`;

export const ErrorMessage = styled(V2_Text.H6)`
color: ${V2_Color.Validation.Red.Text};
// check input
export const ErrorMessage = styled(Typography.BodySM)`
color: ${Colour["text-error"]};
margin-top: 0.5rem;
margin-bottom: 0;
outline: none;
`;

export const Subtitle = styled(V2_Text.BodySmall)`
&& {
color: ${V2_Color.Neutral[3]};
${V2_TextStyleHelper.getFontFamily("BodySmall", "regular")}
}
export const Subtitle = styled(Typography.BodySM)`
color: ${Colour["text-subtler"]};
`;
4 changes: 2 additions & 2 deletions src/form/form-label.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { V2_TextProps } from "../v2_text";
import { TypographyProps } from "../typography/types";
import { PopoverAddon } from "./form-label-addon";
import { ErrorMessage, Label, Subtitle } from "./form-label.style";
import { FormLabelProps } from "./types";
Expand Down Expand Up @@ -41,6 +41,6 @@ export const FormLabel = ({
);
};

export const FormErrorMessage = (props: V2_TextProps): JSX.Element => {
export const FormErrorMessage = (props: TypographyProps): JSX.Element => {
return <ErrorMessage weight="semibold" {...props} />;
};
4 changes: 2 additions & 2 deletions src/form/form-wrapper.style.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled, { css } from "styled-components";
import { V2_Layout } from "../v2_layout";
import { Layout } from "../layout";

const commonStyles = css`
display: flex;
Expand All @@ -14,6 +14,6 @@ export const Container = styled.div`
${commonStyles}
`;

export const ColDivContainer = styled(V2_Layout.ColDiv)`
export const ColDivContainer = styled(Layout.ColDiv)`
${commonStyles}
`;
8 changes: 3 additions & 5 deletions src/markup/markup.style.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import styled, { css } from "styled-components";
import {
HtmlContentStyleOptions,
applyHtmlContentStyle,
} from "../shared/html-content/html-content";
import { applyHtmlContentStyle } from "../shared/html-content/html-content";
import { TypographySizeType } from "../theme/font/types";

// =============================================================================
// STYLE INTERFACES
// =============================================================================
interface ContainerStyleProps {
$textSize?: HtmlContentStyleOptions["textSize"] | undefined;
$textSize?: TypographySizeType | undefined;
$textColor?: string | ((props: unknown) => string) | undefined;
}

Expand Down
4 changes: 2 additions & 2 deletions src/markup/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { V2_TextSizeType } from "../v2_text";
import { TypographySizeType } from "../theme/font/types";

export interface MarkupProps extends React.HTMLAttributes<HTMLDivElement> {
/** The default font size. If not specified, inherited from the parent */
baseTextSize?: V2_TextSizeType | undefined;
baseTextSize?: TypographySizeType | undefined;
/** The default font color. If not specified, inherited from the parent */
baseTextColor?: string | ((props: unknown) => string) | undefined;
/**
Expand Down
Loading

0 comments on commit f5f5a53

Please sign in to comment.