@dxc-technology/halstack-react 0.0.0-227874a → 0.0.0-2289057

package/grid/Grid.stories.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import styled from "styled-components";
+import DxcGrid from "./Grid";
+import DxcInset from "../inset/Inset";
+
+export default {
+  title: "Grid",
+  component: DxcGrid,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <ExampleContainer>
+      <DxcGrid>
+        <ColoredContainer />
+        <ColoredContainer />
+        <ColoredContainer />
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Place items" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateRows={["200px"]} placeItems="center">
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+      <DxcGrid placeItems={{ justifyItems: "end" }}>
+        <ColoredContainer />
+        <ColoredContainer />
+        <ColoredContainer />
+      </DxcGrid>
+      <DxcGrid templateRows={["repeat(3, 100px)"]} placeItems={{ alignItems: "end", justifyItems: "center" }}>
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Place content" level={4} />
+    <Container height="200px">
+      <DxcGrid placeContent="center">
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Container height="200px">
+      <DxcGrid placeContent={{ alignContent: "center" }}>
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Container height="200px">
+      <DxcGrid placeContent={{ alignContent: "center", justifyContent: "end" }}>
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Title title="Place self" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateRows={["repeat(3, 100px)"]}>
+        <DxcGrid.Item placeSelf="center">
+          <ColoredContainer height="50px" width="50px" />
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "end" }}>
+          <ColoredContainer height="40px" width="40px" />
+          <ColoredContainer height="30px" width="30px" />
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
+          <ColoredContainer height="50px" width="50px" />
+        </DxcGrid.Item>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Halstack layout using template areas" level={4} />
+    <ExampleContainer>
+      <DxcGrid
+        templateColumns={["repeat(4, 1fr)"]}
+        templateRows={["40px", "200px", "60px"]}
+        templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]}
+        gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
+      >
+        <DxcGrid.Item areaName="header" as="header">
+          <ColoredContainer height="100%" />
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="main" as="main">
+          <ColoredContainer height="100%" />
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="sidenav" as="nav">
+          <ColoredContainer height="100%" />
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="footer" as="footer">
+          <ColoredContainer height="100%" />
+        </DxcGrid.Item>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Template rows and columns with flexible sizes" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["1fr", "1fr", "1fr"]} templateRows={["1fr", "3fr", "1fr"]} gap="0.5rem">
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
+          <ColoredContainer color="yellow" height="100%">
+            Header
+          </ColoredContainer>
+        </DxcGrid.Item>
+        <DxcGrid.Item column={1}>
+          <ColoredContainer color="lightcyan" height="100%">
+            Sidenav
+          </ColoredContainer>
+        </DxcGrid.Item>
+        <DxcGrid
+          column={{ start: 2, end: -1 }}
+          templateRows={["repeat(4, 1fr)"]}
+          templateColumns={["repeat(2, 1fr)"]}
+          gap="1rem"
+        >
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+        </DxcGrid>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
+          <ColoredContainer color="black" height="100%">
+            Footer
+          </ColoredContainer>
+        </DxcGrid.Item>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Overlapping" level={4} />
+    <DxcInset bottom="2rem">
+      <ExampleContainer>
+        <DxcGrid templateRows={["50px", "50px"]}>
+          <ColoredContainer color="yellow" height="100px">
+            1
+          </ColoredContainer>
+          <ColoredContainer color="transparent" height="100px">
+            2
+          </ColoredContainer>
+        </DxcGrid>
+      </ExampleContainer>
+    </DxcInset>
+    <Title title="Implicit rows and columns" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["50px"]} templateRows={["50px", "50px"]} autoRows="50px" autoColumns="50px">
+        <DxcGrid.Item>
+          <ColoredContainer height="50px">1</ColoredContainer>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={2}>
+          <ColoredContainer height="50px">3</ColoredContainer>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={6} column={1}>
+          <ColoredContainer height="50px">5</ColoredContainer>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={3}>
+          <ColoredContainer height="50px">4</ColoredContainer>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
+          <ColoredContainer height="50px">2</ColoredContainer>
+        </DxcGrid.Item>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Autoflow 'row' (default)" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="row" autoColumns="1fr">
+        <DxcGrid.Item row={{ start: 1, end: "span 2" }} column={1}>
+          <ColoredContainer height="100%">1</ColoredContainer>
+        </DxcGrid.Item>
+        <ColoredContainer color="lightyellow">2</ColoredContainer>
+        <ColoredContainer color="lightcyan">3</ColoredContainer>
+        <ColoredContainer color="lightgreen">4</ColoredContainer>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
+          <ColoredContainer color="lightpink" height="100%">
+            5
+          </ColoredContainer>
+        </DxcGrid.Item>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Autoflow 'column'" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="column" autoColumns="1fr">
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={1}>
+          <ColoredContainer height="100%">1</ColoredContainer>
+        </DxcGrid.Item>
+        <ColoredContainer color="lightyellow">2</ColoredContainer>
+        <ColoredContainer color="lightcyan">3</ColoredContainer>
+        <ColoredContainer color="lightgreen">4</ColoredContainer>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
+          <ColoredContainer color="lightpink" height="100%">
+            5
+          </ColoredContainer>
+        </DxcGrid.Item>
+      </DxcGrid>
+    </ExampleContainer>
+  </>
+);
+
+const Container = styled.div<{ height?: string }>`
+  display: grid;
+  overflow: auto;
+  margin: 2.5rem;
+  ${({ height }) => height && `height: ${height}`};
+`;
+
+const ColoredContainer = styled.div<{ color?: string; width?: string; height?: string }>`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ color }) => color ?? "#e5d5f6"};
+  padding: 1rem;
+  border: 1px solid #a46ede;
+  border-radius: 0.5rem;
+  font-family: Open Sans, sans-serif;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #a46ede;
+
+  ${({ width }) => width && `width: ${width}`};
+  ${({ height }) => height && `height: ${height}`};
+`;

package/grid/types.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+type Gap = {
+    rowGap: Spaces;
+    columnGap?: Spaces;
+} | {
+    rowGap?: Spaces;
+    columnGap: Spaces;
+} | Spaces;
+type GridCell = {
+    start: number | string;
+    end: number | string;
+};
+type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
+type PlaceContentValues = "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline";
+type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
+type PlaceObject<Type, Suffix extends string> = {
+    [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
+};
+type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
+    justify?: PlaceValues;
+    align: PlaceValues;
+}, Element> | PlaceObject<{
+    justify: PlaceValues;
+    align?: PlaceValues;
+}, Element> | PlaceValues;
+export type GridItemProps = {
+    /**
+     * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
+     */
+    areaName?: string;
+    /**
+     * Sets the grid-column CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+     */
+    column?: number | string | GridCell;
+    /**
+     * Sets the grid-row CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+    row?: number | string | GridCell;
+    /**
+     * Sets the place-self CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
+     */
+    placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
+    /**
+     * Sets a custom HTML tag.
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Custom content inside the grid container.
+     */
+    children: React.ReactNode;
+};
+type Props = GridItemProps & {
+    /**
+     * Sets the grid-auto-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+     */
+    autoColumns?: string;
+    /**
+     * Sets the grid-auto-flow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+     */
+    autoFlow?: "row" | "column" | "row dense" | "column dense";
+    /**
+     * Sets the grid-auto-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+     */
+    autoRows?: string;
+    /**
+     * Sets the gap CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     */
+    gap?: Spaces | Gap;
+    /**
+     * Sets the place-content CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
+     */
+    placeContent?: PlaceGeneric<PlaceContentValues, "content">;
+    /**
+     * Sets the place-items CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
+     */
+    placeItems?: PlaceGeneric<PlaceItemsValues, "items">;
+    /**
+     * Sets the grid-template-areas CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+     */
+    templateAreas?: string[];
+    /**
+     * Sets the grid-template-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+     */
+    templateColumns?: string[];
+    /**
+     * Sets the grid-template-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+     */
+    templateRows?: string[];
+};
+export default Props;

package/grid/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/header/Header.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import DxcDropdown from "../dropdown/Dropdown";
+import HeaderPropsType from "./types";
+declare const DxcHeader: {
+    ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: HeaderPropsType): JSX.Element;
+    Dropdown: (props: React.ComponentProps<typeof DxcDropdown>) => React.JSX.Element;
+};
+export default DxcHeader;