Skip to content

Commit f834572

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1102 from dxc-technology/marcialfps-component-status
Add component status to all components
2 parents 6fe7c8c + 56a2c9b commit f834572

38 files changed

+167
-86
lines changed

‎website/screens/common/ComponentHeading.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { DxcHeading, DxcRow } from "@dxc-technology/halstack-react";
2+
import React from "react";
3+
import styled from "styled-components";
4+
5+
type ComponentHeadingProps = {
6+
name: string;
7+
status: "Ready" | "Deprecated" | "Experimental";
8+
};
9+
10+
const ComponentHeading = ({ name, status }: ComponentHeadingProps) => {
11+
return (
12+
<DxcRow align="center" gutter="medium">
13+
<DxcHeading level={1} text={name} weight="bold" />
14+
<StatusTag status={status}>{status}</StatusTag>
15+
</DxcRow>
16+
);
17+
};
18+
19+
type StatusTagProps = { status: "Ready" | "Deprecated" | "Experimental" };
20+
21+
const StatusTag = styled.div<StatusTagProps>`
22+
box-sizing: border-box;
23+
height: 24px;
24+
border: 1px solid
25+
${(props) =>
26+
props.status === "Ready"
27+
? "#24A148"
28+
: props.status === "Deprecated"
29+
? "#C59F07"
30+
: props.status === "Experimental"
31+
? "#5F249F"
32+
: ""};
33+
border-radius: 0.5rem;
34+
padding: 4px 8px;
35+
font-size: 0.75rem;
36+
font-weight: 600;
37+
line-height: 1.125em;
38+
color: ${(props) =>
39+
props.status === "Ready"
40+
? "#135325"
41+
: props.status === "Deprecated"
42+
? "#624F04"
43+
: props.status === "Experimental"
44+
? "#321353"
45+
: ""};
46+
background-color: ${(props) =>
47+
props.status === "Ready"
48+
? "#F7FDF9"
49+
: props.status === "Deprecated"
50+
? "#FFFDF5"
51+
: props.status === "Experimental"
52+
? "#FAF7FD"
53+
: ""}; ;
54+
`;
55+
56+
export default ComponentHeading;

‎website/screens/components/accordion/AccordionPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import TabsPageHeading from "@/common/TabsPageLayout";
33
import PageHeading from "@/common/PageHeading";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const AccordionPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const AccordionPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Accordion" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Accordion" status="Ready" />
1718
<DxcText as="p">
1819
Accordions are used to group similar content and hide or show it
1920
depending on user needs or preferences. Accordions give users more

‎website/screens/components/alert/AlertPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const AlertPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const AlertPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Alert" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Alert" status="Ready" />
1718
<DxcText as="p">
1819
Alert messages are meant to provide contextual feedback about
1920
important changes in the interface.

‎website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const ApplicationLayoutPageHeading = ({
67
children,
@@ -19,11 +20,7 @@ const ApplicationLayoutPageHeading = ({
1920
<DxcStack gutter="xlarge">
2021
<PageHeading>
2122
<DxcStack gutter="large">
22-
<DxcHeading
23-
level={1}
24-
text="Application layout"
25-
weight="bold"
26-
></DxcHeading>
23+
<ComponentHeading name="Application layout" status="Ready" />
2724
<DxcText>
2825
The application layout provides a base UI wrapper for any
2926
application built with Halstack.

‎website/screens/components/box/BoxPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Box" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Box" status="Ready" />
1718
<DxcText as="p">
1819
There are different ways to organise the content on the webpage to
1920
facilitate the user according to his nature of interaction with the

‎website/screens/components/button/ButtonPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const ButtonPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const ButtonPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Button" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Button" status="Ready" />
1718
<DxcText as="p">
1819
Buttons are basic interface elements that initialize an action or
1920
function when the user interacts with them. The appearance of the

‎website/screens/components/card/CardPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const CardPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const CardPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Card" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Card" status="Ready" />
1718
<DxcText as="p">
1819
Cards are a container of information, actions and data with a
1920
hierarchy to make easy scanning the content. A card can be defined

‎website/screens/components/checkbox/CheckboxPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const CheckboxPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const CheckboxPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Checkbox" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Checkbox" status="Ready" />
1718
<DxcText as="p">
1819
Checkboxes are inputs that offer to the user the possibility to
1920
select one or more options from a range of attributes.

‎website/screens/components/chip/ChipPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const ChipPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const ChipPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Chip" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Chip" status="Ready" />
1718
<DxcText as="p">
1819
Chips are elements that represent status, complementary information,
1920
or association between elements.

‎website/screens/components/date-input/DateInputPageLayout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { DxcHeading, DxcText, DxcStack } from "@dxc-technology/halstack-react";
1+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
45

56
const DateInputPageHeading = ({ children }: { children: React.ReactNode }) => {
67
const tabs = [
@@ -13,7 +14,7 @@ const DateInputPageHeading = ({ children }: { children: React.ReactNode }) => {
1314
<DxcStack gutter="xlarge">
1415
<PageHeading>
1516
<DxcStack gutter="large">
16-
<DxcHeading level={1} text="Date Input" weight="bold"></DxcHeading>
17+
<ComponentHeading name="Date Input" status="Ready" />
1718
<DxcText as="p">
1819
A date input is a user interface element where the user can type or
1920
select a date in a predefined format.

0 commit comments

Comments
 (0)