@dxc-technology/halstack-react 0.0.0-8710cb0 → 0.0.0-87842b8

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.accessibility.test.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Header = _interopRequireDefault(require("./Header.tsx"));
+var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _Link = _interopRequireDefault(require("../link/Link.tsx"));
+var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  viewBox: "0 0 24 24",
+  height: "24",
+  width: "24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+}));
+var iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
+var options = [{
+  value: "1",
+  label: "Amazon",
+  icon: iconUrl
+}, {
+  value: "2",
+  label: "Ebay",
+  icon: iconUrl
+}, {
+  value: "3",
+  label: "Wallapop",
+  icon: iconSVG
+}, {
+  value: "4",
+  label: "Aliexpress",
+  icon: iconSVG
+}];
+describe("Header component accessibility tests", function () {
+  beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation(function () {
+        return {
+          matches: false
+        };
+      })
+    });
+  });
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+            content: /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+              alignItems: "center",
+              gap: "4rem"
+            }, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link 1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link 2"), /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link 3"), /*#__PURE__*/_react["default"].createElement(_Header["default"].Dropdown, {
+              options: options,
+              label: "dropdown-test",
+              icon: iconSVG,
+              iconPosition: "after",
+              margin: "medium",
+              size: "medium",
+              optionsIconPosition: "after"
+            })),
+            margin: "medium",
+            underlined: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/header/Header.d.ts

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