From 0b420aaecdba3e0255e8cca3a007fec42687eb76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Fri, 28 Apr 2023 09:16:25 +0200
Subject: [PATCH 1/7] First version of the Grid documentation
---
website/pages/components/grid/index.tsx | 21 ++
website/screens/common/pagesList.ts | 1 +
.../components/grid/GridPageLayout.tsx | 32 ++
.../components/grid/code/GridCodePage.tsx | 311 ++++++++++++++++++
4 files changed, 365 insertions(+)
create mode 100644 website/pages/components/grid/index.tsx
create mode 100644 website/screens/components/grid/GridPageLayout.tsx
create mode 100644 website/screens/components/grid/code/GridCodePage.tsx
diff --git a/website/pages/components/grid/index.tsx b/website/pages/components/grid/index.tsx
new file mode 100644
index 000000000..469b50723
--- /dev/null
+++ b/website/pages/components/grid/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import GridPageLayout from "../../../screens/components/grid/GridPageLayout";
+import GridCodePage from "../../../screens/components/grid/code/GridCodePage";
+
+const Index = () => {
+ return (
+ <>
+
+
+
+ Name |
+ Default |
+ Description
+
+
+ autoColumns: string |
+
+ 'auto'
+ |
+
+ Sets the grid-auto-columns CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+ autoRows: string |
+
+ 'auto'
+ |
+
+ Sets the grid-auto-rows CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+
+ gap: '0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem'
+ | '2rem' | '3rem' | '4rem' | '5rem' | Gap
+ |
+
+ '0rem'
+ |
+
+ Sets the gap CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+
+ placeContent: 'normal' | 'start' | 'end' | 'center' | 'stretch' |
+ 'space-between' | 'space-around' | 'space-evenly' | 'baseline' |
+ object
+ |
+
+ 'normal'
+ |
+
+ Sets the place-content CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+
+ placeItems: 'normal' | 'start' | 'end' | 'center' | 'stretch' |
+ 'baseline' | object
+ |
+
+ 'normal'
+ |
+
+ Sets the place-items CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+ templateAreas: string[] |
+ |
+
+ Sets the grid-template-areas CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+ templateColumns: string[] |
+ |
+
+ Sets the grid-template-columns CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+ templateRows: string[] |
+ |
+
+ Sets the grid-template-rows CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+
+ as: keyof HTMLElementTagNameMap |
+
+ 'div'
+ |
+ Sets the a custom HTML tag. |
+
+
+ children: node |
+ |
+ Custom content inside the grid container. |
+
+
+ ),
+ },
+ {
+ title: "DxcGrid.GridItem",
+ content: (
+ <>
+
autoRows: string |
From 6b652a9d25a54da40a34d991e91ffa0230bfd363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 3 May 2023 16:02:44 +0200
Subject: [PATCH 5/7] Using the same Placeholder in all layout components
---
lib/src/bleed/Bleed.stories.tsx | 1 +
lib/src/flex/Flex.stories.tsx | 43 ++++++++-----------
lib/src/inset/Inset.stories.tsx | 1 +
.../code/examples => common}/Placeholder.tsx | 13 ++++--
.../bleed/code/examples/Placeholder.tsx | 33 --------------
.../bleed/code/examples/basicUsage.ts | 8 ++--
.../bleed/code/examples/customSides.ts | 8 ++--
.../flex/code/examples/Placeholder.tsx | 33 --------------
.../flex/code/examples/directionAlignment.ts | 10 ++---
.../flex/code/examples/gapOrderGrow.ts | 14 +++---
.../components/grid/GridPageLayout.tsx | 8 ++--
.../components/grid/code/examples/basic.tsx | 2 +-
.../components/grid/code/examples/layout.tsx | 2 +-
.../inset/code/examples/Placeholder.tsx | 33 --------------
.../inset/code/examples/basicUsage.ts | 8 ++--
.../inset/code/examples/customSides.ts | 8 ++--
16 files changed, 65 insertions(+), 160 deletions(-)
rename website/screens/{components/grid/code/examples => common}/Placeholder.tsx (56%)
delete mode 100644 website/screens/components/bleed/code/examples/Placeholder.tsx
delete mode 100644 website/screens/components/flex/code/examples/Placeholder.tsx
delete mode 100644 website/screens/components/inset/code/examples/Placeholder.tsx
diff --git a/lib/src/bleed/Bleed.stories.tsx b/lib/src/bleed/Bleed.stories.tsx
index ef51d5245..a953f163e 100644
--- a/lib/src/bleed/Bleed.stories.tsx
+++ b/lib/src/bleed/Bleed.stories.tsx
@@ -337,5 +337,6 @@ const Placeholder = styled.div`
min-height: 40px;
min-width: 120px;
border: 1px solid #a46ede;
+ border-radius: 0.5rem;
background-color: #e5d5f6;
`;
diff --git a/lib/src/flex/Flex.stories.tsx b/lib/src/flex/Flex.stories.tsx
index ef9d4ce99..c8b17401d 100644
--- a/lib/src/flex/Flex.stories.tsx
+++ b/lib/src/flex/Flex.stories.tsx
@@ -14,19 +14,19 @@ export const Chromatic = () => (
-
+
-
-
+
+
-
+
-
+
@@ -37,13 +37,13 @@ export const Chromatic = () => (
-
+
-
+
-
+
@@ -51,16 +51,16 @@ export const Chromatic = () => (
- order 3, grow 1, align self end
+ order 3, grow 1, align self end
- order -1, grow 4
+ order -1, grow 4
- order 5, grow 1
+ order 5, grow 1
- order 2. grow 2
+ order 2. grow 2
@@ -68,13 +68,13 @@ export const Chromatic = () => (
- shrink 4
+ shrink 4
- shrink 2
+ shrink 2
- shrink 1
+ shrink 1
@@ -88,16 +88,11 @@ const Container = styled.div<{ height?: string }>`
${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
`;
-const Placeholder = styled.div<{ width?: string }>`
+const Placeholder = styled.div<{ minWidth?: string, width?: string }>`
height: 40px;
- min-width: ${({ width }) => width || "200px"};
- border: 1px solid #a46ede;
- background-color: #e5d5f6;
-`;
-
-const PlaceholderGrowAndShrink = styled.div`
- height: 40px;
- width: 100%;
+ min-width: ${({ minWidth }) => minWidth || "200px"};
+ width: ${({ width }) => width};
border: 1px solid #a46ede;
+ border-radius: 0.5rem;
background-color: #e5d5f6;
`;
diff --git a/lib/src/inset/Inset.stories.tsx b/lib/src/inset/Inset.stories.tsx
index 546bf7260..670eae650 100644
--- a/lib/src/inset/Inset.stories.tsx
+++ b/lib/src/inset/Inset.stories.tsx
@@ -225,5 +225,6 @@ const Placeholder = styled.div`
min-height: 40px;
min-width: 120px;
border: 1px solid #a46ede;
+ border-radius: 0.5rem;
background-color: #e5d5f6;
`;
diff --git a/website/screens/components/grid/code/examples/Placeholder.tsx b/website/screens/common/Placeholder.tsx
similarity index 56%
rename from website/screens/components/grid/code/examples/Placeholder.tsx
rename to website/screens/common/Placeholder.tsx
index 40acf9aa1..a6a201d4d 100644
--- a/website/screens/components/grid/code/examples/Placeholder.tsx
+++ b/website/screens/common/Placeholder.tsx
@@ -1,7 +1,12 @@
import styled from "styled-components";
-const ColoredContainer = styled.div<{ color?: string; width?: string; height?: string }>`
+/**
+ * Styled component used in the examples of the layout components:
+ * Bleed, Flex, Grid and Inset
+ */
+const Placeholder = styled.div<{ color?: string; width?: string; height?: string }>`
box-sizing: border-box;
+ text-align: center;
${({ width }) => width && `width: ${width}`};
${({ height }) => height && `height: ${height}`};
padding: 1rem;
@@ -9,9 +14,9 @@ const ColoredContainer = styled.div<{ color?: string; width?: string; height?: s
border-radius: 0.5rem;
background-color: ${({ color }) => color ?? "#e5d5f6"};
font-family: Open Sans, sans-serif;
- font-size: 1.5rem;
+ font-size: 1.125rem;
font-weight: bold;
- color: #a46ede;
+ color: #7D2FD0;
`;
-export default ColoredContainer;
\ No newline at end of file
+export default Placeholder;
\ No newline at end of file
diff --git a/website/screens/components/bleed/code/examples/Placeholder.tsx b/website/screens/components/bleed/code/examples/Placeholder.tsx
deleted file mode 100644
index 058b3f347..000000000
--- a/website/screens/components/bleed/code/examples/Placeholder.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from "styled-components";
-
-type PlaceholderProps = {
- width: "large" | "medium" | "small" | "auto";
- height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div`
- width: ${({ width }) =>
- width === "large"
- ? "150px"
- : width === "medium"
- ? "120px"
- : width === "small"
- ? "100px"
- : "100%"};
- ${({ height }) =>
- height
- ? `height: ${
- height === "large"
- ? "50px"
- : height === "medium"
- ? "20px"
- : height === "small"
- ? "10px"
- : "100%"
- };`
- : ""};
- border: 1px solid #a46ede;
- background-color: #e5d5f6;
-`;
-
-export default Placeholder;
diff --git a/website/screens/components/bleed/code/examples/basicUsage.ts b/website/screens/components/bleed/code/examples/basicUsage.ts
index 215a2a617..921900ac2 100644
--- a/website/screens/components/bleed/code/examples/basicUsage.ts
+++ b/website/screens/components/bleed/code/examples/basicUsage.ts
@@ -1,15 +1,15 @@
import { DxcBleed, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
-
+
-
+
);
diff --git a/website/screens/components/bleed/code/examples/customSides.ts b/website/screens/components/bleed/code/examples/customSides.ts
index 8b825fcf7..aeabadfbc 100644
--- a/website/screens/components/bleed/code/examples/customSides.ts
+++ b/website/screens/components/bleed/code/examples/customSides.ts
@@ -1,15 +1,15 @@
import { DxcBleed, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
-
+
-
+
);
diff --git a/website/screens/components/flex/code/examples/Placeholder.tsx b/website/screens/components/flex/code/examples/Placeholder.tsx
deleted file mode 100644
index 058b3f347..000000000
--- a/website/screens/components/flex/code/examples/Placeholder.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from "styled-components";
-
-type PlaceholderProps = {
- width: "large" | "medium" | "small" | "auto";
- height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div`
- width: ${({ width }) =>
- width === "large"
- ? "150px"
- : width === "medium"
- ? "120px"
- : width === "small"
- ? "100px"
- : "100%"};
- ${({ height }) =>
- height
- ? `height: ${
- height === "large"
- ? "50px"
- : height === "medium"
- ? "20px"
- : height === "small"
- ? "10px"
- : "100%"
- };`
- : ""};
- border: 1px solid #a46ede;
- background-color: #e5d5f6;
-`;
-
-export default Placeholder;
diff --git a/website/screens/components/flex/code/examples/directionAlignment.ts b/website/screens/components/flex/code/examples/directionAlignment.ts
index 4f996a159..c81fef8f0 100644
--- a/website/screens/components/flex/code/examples/directionAlignment.ts
+++ b/website/screens/components/flex/code/examples/directionAlignment.ts
@@ -1,16 +1,16 @@
import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
-
+
+
-
-
+
+
);
diff --git a/website/screens/components/flex/code/examples/gapOrderGrow.ts b/website/screens/components/flex/code/examples/gapOrderGrow.ts
index ee99441ac..9ff679dcc 100644
--- a/website/screens/components/flex/code/examples/gapOrderGrow.ts
+++ b/website/screens/components/flex/code/examples/gapOrderGrow.ts
@@ -1,24 +1,24 @@
import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
- 3
+ 3
- 2
+ 2
- 1
+ 1
- 5
+ 5
- 4
+ 4
diff --git a/website/screens/components/grid/GridPageLayout.tsx b/website/screens/components/grid/GridPageLayout.tsx
index 0a20e3687..68bd179d0 100644
--- a/website/screens/components/grid/GridPageLayout.tsx
+++ b/website/screens/components/grid/GridPageLayout.tsx
@@ -12,14 +12,16 @@ const GridPageHeading = ({ children }: { children: React.ReactNode }) => {
- Grid allows users to build{" "}
+ Grid allows users to build applications based on{" "}
CSS Grid Layout
- {" "}
- based layouts.
+
+ . It is a technical component that abstracts users from
+ working directly with CSS Grid properties and allows them to write
+ more consistent and semantic layouts.
diff --git a/website/screens/components/grid/code/examples/basic.tsx b/website/screens/components/grid/code/examples/basic.tsx
index a96bef85b..e7acc8793 100644
--- a/website/screens/components/grid/code/examples/basic.tsx
+++ b/website/screens/components/grid/code/examples/basic.tsx
@@ -1,5 +1,5 @@
import { DxcInset, DxcGrid } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
diff --git a/website/screens/components/grid/code/examples/layout.tsx b/website/screens/components/grid/code/examples/layout.tsx
index 0c43a83ae..baf4eb9d4 100644
--- a/website/screens/components/grid/code/examples/layout.tsx
+++ b/website/screens/components/grid/code/examples/layout.tsx
@@ -1,5 +1,5 @@
import { DxcInset, DxcGrid } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
diff --git a/website/screens/components/inset/code/examples/Placeholder.tsx b/website/screens/components/inset/code/examples/Placeholder.tsx
deleted file mode 100644
index 058b3f347..000000000
--- a/website/screens/components/inset/code/examples/Placeholder.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from "styled-components";
-
-type PlaceholderProps = {
- width: "large" | "medium" | "small" | "auto";
- height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div`
- width: ${({ width }) =>
- width === "large"
- ? "150px"
- : width === "medium"
- ? "120px"
- : width === "small"
- ? "100px"
- : "100%"};
- ${({ height }) =>
- height
- ? `height: ${
- height === "large"
- ? "50px"
- : height === "medium"
- ? "20px"
- : height === "small"
- ? "10px"
- : "100%"
- };`
- : ""};
- border: 1px solid #a46ede;
- background-color: #e5d5f6;
-`;
-
-export default Placeholder;
diff --git a/website/screens/components/inset/code/examples/basicUsage.ts b/website/screens/components/inset/code/examples/basicUsage.ts
index 0d72ddd21..7ceb8e705 100644
--- a/website/screens/components/inset/code/examples/basicUsage.ts
+++ b/website/screens/components/inset/code/examples/basicUsage.ts
@@ -1,15 +1,15 @@
import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
-
+
-
+
);
diff --git a/website/screens/components/inset/code/examples/customSides.ts b/website/screens/components/inset/code/examples/customSides.ts
index 3e49a3527..8c5a252f9 100644
--- a/website/screens/components/inset/code/examples/customSides.ts
+++ b/website/screens/components/inset/code/examples/customSides.ts
@@ -1,15 +1,15 @@
import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "./Placeholder";
+import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
-
+
-
+
);
From ce84e372d0a352abb1646ca191a375fc02996581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 3 May 2023 16:08:59 +0200
Subject: [PATCH 6/7] More updates based on feedback
---
website/screens/components/flex/code/FlexCodePage.tsx | 2 +-
website/screens/components/grid/code/GridCodePage.tsx | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/website/screens/components/flex/code/FlexCodePage.tsx b/website/screens/components/flex/code/FlexCodePage.tsx
index 869b0e44b..b43beedf8 100644
--- a/website/screens/components/flex/code/FlexCodePage.tsx
+++ b/website/screens/components/flex/code/FlexCodePage.tsx
@@ -133,7 +133,7 @@ const sections = [
|