Skip to content

Commit a93c0e0

Browse files
author
Enrique Moreno
committed
Merge branch 'master' of github.com:dxc-technology/halstack-react into Mil4n0r/tokens-contextual-menu
2 parents f2f1794 + bf55972 commit a93c0e0

File tree

88 files changed

+2793
-4966
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+2793
-4966
lines changed

‎apps/website/pages/components/button/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import ButtonPageLayout from "screens/components/button/ButtonPageLayout";
4+
import ButtonCodePage from "screens/components/button/code/ButtonCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Button Code — Halstack Design System</title>
10+
</Head>
11+
<ButtonCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <ButtonPageLayout>{page}</ButtonPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/button/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import ButtonPageLayout from "screens/components/button/ButtonPageLayout";
4-
import ButtonCodePage from "screens/components/button/code/ButtonCodePage";
4+
import ButtonOverviewPage from "screens/components/button/overview/ButtonOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Button — Halstack Design System</title>
11-
</Head>
12-
<ButtonCodePage></ButtonCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Button — Halstack Design System</title>
10+
</Head>
11+
<ButtonOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <ButtonPageLayout>{page}</ButtonPageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <ButtonPageLayout>{page}</ButtonPageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/button/specifications.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/pages/components/button/usage.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/common/QuickNavContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => {
2929
return linksList;
3030
};
3131

32-
const DxcQuickNavContainer = ({ title, sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
32+
const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
3333
<MainContainer>
3434
<DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
3535
{sections.map((section) => (

‎apps/website/screens/common/example/Example.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,18 @@ type ExamplePropTypes = {
4646
};
4747
};
4848

49-
const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes): JSX.Element => {
49+
const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
5050
const toast = useToast();
5151
const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
52+
const [liveCode, setLiveCode] = useState(example.code);
5253

5354
const handleCodeOnClick = () => {
5455
changeIsCodeVisible(!isCodeVisible);
5556
};
5657

5758
const handleCopy = () => {
5859
navigator.clipboard
59-
.writeText(example.code)
60+
.writeText(liveCode)
6061
.then(() => {
6162
toast.success({ message: "Code copied to the clipboard." });
6263
})
@@ -67,7 +68,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
6768

6869
return (
6970
<DxcFlex direction="column" gap="0.75rem">
70-
<LiveProvider code={example.code} scope={example.scope} theme={theme}>
71+
<LiveProvider code={liveCode} scope={example.scope} theme={theme}>
7172
<StyledPreview>
7273
<LivePreview />
7374
<StyledError>
@@ -87,7 +88,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
8788
)}
8889
{isCodeVisible && (
8990
<StyledEditor>
90-
<LiveEditor />
91+
<LiveEditor code={liveCode} onChange={setLiveCode} />
9192
</StyledEditor>
9293
)}
9394
</LiveProvider>

‎apps/website/screens/common/themes/advanced-theme.json‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,43 @@
22
"accordion": {
33
"backgroundColor": "#ffffff",
44
"hoverBackgroundColor": "#f2eafa",
5+
"focusBackgroundColor": "transparent",
6+
"activeBackgroundColor": "#f2eafa",
57
"arrowColor": "#5f249f",
68
"disabledArrowColor": "#999999",
9+
"subLabelFontFamily": "Open Sans, sans-serif",
10+
"subLabelFontSize": "0.75rem",
11+
"subLabelFontWeight": "400",
12+
"subLabelFontStyle": "normal",
13+
"subLabelFontColor": "#666666",
14+
"disabledSubLabelFontColor": "#999999",
715
"assistiveTextFontFamily": "Open Sans, sans-serif",
8-
"assistiveTextFontSize": "1rem",
9-
"assistiveTextFontWeight": "300",
10-
"assistiveTextFontStyle": "italic",
11-
"assistiveTextLetterSpacing": "0.025em",
16+
"assistiveTextFontSize": "0.75rem",
17+
"assistiveTextFontWeight": "400",
18+
"assistiveTextFontStyle": "normal",
1219
"assistiveTextFontColor": "#666666",
1320
"disabledAssistiveTextFontColor": "#999999",
14-
"assistiveTextMinWidth": "100px",
15-
"assistiveTextPaddingRight": "1.5rem",
16-
"assistiveTextPaddingLeft": "0rem",
1721
"titleLabelFontFamily": "Open Sans, sans-serif",
1822
"titleLabelFontSize": "1rem",
1923
"titleLabelFontWeight": "400",
2024
"titleLabelFontStyle": "normal",
21-
"titleLabelFontColor": "#000000",
25+
"titleLabelFontColor": "#333333",
2226
"disabledTitleLabelFontColor": "#999999",
23-
"titleLabelPaddingTop": "0rem",
24-
"titleLabelPaddingBottom": "0rem",
25-
"titleLabelPaddingLeft": "0rem",
26-
"titleLabelPaddingRight": "1rem",
2727
"focusBorderColor": "#0095ff",
2828
"focusBorderStyle": "solid",
2929
"focusBorderThickness": "2px",
3030
"borderRadius": "4px",
3131
"boxShadowOffsetX": "0px",
32-
"boxShadowOffsetY": "6px",
33-
"boxShadowBlur": "10px",
32+
"boxShadowOffsetY": "12px",
33+
"boxShadowBlur": "12px",
34+
"boxShadowSpread": "0px",
3435
"boxShadowColor": "#0000001a",
3536
"iconColor": "#5f249f",
3637
"disabledIconColor": "#999999",
3738
"iconSize": "24px",
38-
"iconMarginLeft": "0rem",
39-
"iconMarginRight": "0.75rem",
40-
"accordionGroupSeparatorBorderColor": "#0000001a",
41-
"accordionGroupSeparatorBorderThickness": "1px",
42-
"accordionGroupSeparatorBorderRadius": "0px",
43-
"accordionGroupSeparatorBorderStyle": "solid"
39+
"accordionSeparatorBorderColor": "#e6e6e6",
40+
"accordionSeparatorBorderThickness": "1px",
41+
"accordionSeparatorBorderStyle": "solid"
4442
},
4543
"alert": {
4644
"overlayColor": "#000000b3",

‎apps/website/screens/common/themes/opinionated-theme.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"accordion": {
33
"accentColor": "#5f249f",
4-
"titleFontColor": "#000000",
4+
"titleFontColor": "#333333",
5+
"subLabelFontColor": "#666666",
56
"assistiveTextFontColor": "#666666"
67
},
78
"button": {

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ const AccordionPageHeading = ({ children }: { children: ReactNode }) => {
1717
<DxcFlex direction="column" gap="2rem">
1818
<ComponentHeading name="Accordion" />
1919
<DxcParagraph>
20-
Accordions are used to group similar content and hide or show it depending on user needs or preferences.
21-
Accordions give users more granular control over the interface and help digest content in stages, rather
22-
than all at once.
20+
The accordion component is a vertical stack of interactive headers used to group related content into
21+
collapsible sections, allowing users to expand or hide content based on their needs or preferences. It
22+
enhances the user experience by organizing information into smaller, digestible chunks, helping reduce
23+
cognitive load and save screen space.
2324
</DxcParagraph>
2425
<TabsPageHeading tabs={tabs}></TabsPageHeading>
2526
</DxcFlex>

0 commit comments

Comments
 (0)