@dxc-technology/halstack-react 0.0.0-f2bad31 → 0.0.0-f2ee373

package/grid/Grid.js

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
-var DxcGrid = function DxcGrid(props) {
-  return /*#__PURE__*/_react["default"].createElement(Grid, props);
-};
-var Grid = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n      \n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_ref) {
-  var templateColumns = _ref.templateColumns;
-  return templateColumns && "grid-template-columns: ".concat(templateColumns.join(" "), ";");
-}, function (_ref2) {
-  var templateRows = _ref2.templateRows;
-  return templateRows && "grid-template-rows: ".concat(templateRows.join(" "), ";");
-}, function (_ref3) {
-  var templateAreas = _ref3.templateAreas;
-  return templateAreas && "grid-template-areas: ".concat(templateAreas.map(function (row) {
-    return "\"".concat(row, "\"");
-  }).join(" "), ";");
-}, function (_ref4) {
-  var autoColumns = _ref4.autoColumns;
-  return autoColumns && "grid-auto-columns: ".concat(autoColumns, ";");
-}, function (_ref5) {
-  var autoRows = _ref5.autoRows;
-  return autoRows && "grid-auto-rows: ".concat(autoRows, ";");
-}, function (_ref6) {
-  var autoFlow = _ref6.autoFlow;
-  return autoFlow && "grid-auto-flow: ".concat(autoFlow, ";");
-}, function (_ref7) {
-  var _gap$rowGap, _gap$columnGap;
-  var gap = _ref7.gap;
-  return gap != null && (typeof gap === "string" ? "gap: ".concat(gap, ";") : "row-gap: ".concat((_gap$rowGap = gap.rowGap) !== null && _gap$rowGap !== void 0 ? _gap$rowGap : "", "; column-gap: ").concat((_gap$columnGap = gap.columnGap) !== null && _gap$columnGap !== void 0 ? _gap$columnGap : "", ";"));
-}, function (_ref8) {
-  var _placeItems$alignItem, _placeItems$justifyIt;
-  var placeItems = _ref8.placeItems;
-  return placeItems && (typeof placeItems === "string" ? "place-items: ".concat(placeItems) : "align-items: ".concat((_placeItems$alignItem = placeItems.alignItems) !== null && _placeItems$alignItem !== void 0 ? _placeItems$alignItem : "", "; justify-items: ").concat((_placeItems$justifyIt = placeItems.justifyItems) !== null && _placeItems$justifyIt !== void 0 ? _placeItems$justifyIt : "", ";"));
-}, function (_ref9) {
-  var _placeContent$alignCo, _placeContent$justify;
-  var placeContent = _ref9.placeContent;
-  return placeContent && (typeof placeContent === "string" ? "place-content: ".concat(placeContent) : "align-content: ".concat((_placeContent$alignCo = placeContent.alignContent) !== null && _placeContent$alignCo !== void 0 ? _placeContent$alignCo : "", "; justify-content: ").concat((_placeContent$justify = placeContent.justifyContent) !== null && _placeContent$justify !== void 0 ? _placeContent$justify : "", ";"));
-}, function (_ref10) {
-  var areaName = _ref10.areaName;
-  return areaName && "grid-area: ".concat(areaName, ";");
-}, function (_ref11) {
-  var column = _ref11.column;
-  return column && "grid-column: ".concat(typeof column === "string" || typeof column === "number" ? column : "".concat(column.start, " / ").concat(column.end, ";"), ";");
-}, function (_ref12) {
-  var row = _ref12.row;
-  return row && "grid-row: ".concat(typeof row === "string" || typeof row === "number" ? row : "".concat(row.start, " / ").concat(row.end, ";"), ";");
-}, function (_ref13) {
-  var _placeSelf$alignSelf, _placeSelf$justifySel;
-  var placeSelf = _ref13.placeSelf;
-  return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf = placeSelf.alignSelf) !== null && _placeSelf$alignSelf !== void 0 ? _placeSelf$alignSelf : "", "; justify-self: ").concat((_placeSelf$justifySel = placeSelf.justifySelf) !== null && _placeSelf$justifySel !== void 0 ? _placeSelf$justifySel : "", ";"));
-});
-var GridItem = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_ref14) {
-  var areaName = _ref14.areaName;
-  return areaName && "grid-area: ".concat(areaName, ";");
-}, function (_ref15) {
-  var column = _ref15.column;
-  return column && "grid-column: ".concat(typeof column === "string" || typeof column === "number" ? column : "".concat(column.start, " / ").concat(column.end, ";"), ";");
-}, function (_ref16) {
-  var row = _ref16.row;
-  return row && "grid-row: ".concat(typeof row === "string" || typeof row === "number" ? row : "".concat(row.start, " / ").concat(row.end, ";"), ";");
-}, function (_ref17) {
-  var _placeSelf$alignSelf2, _placeSelf$justifySel2;
-  var placeSelf = _ref17.placeSelf;
-  return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf2 = placeSelf.alignSelf) !== null && _placeSelf$alignSelf2 !== void 0 ? _placeSelf$alignSelf2 : "", "; justify-self: ").concat((_placeSelf$justifySel2 = placeSelf.justifySelf) !== null && _placeSelf$justifySel2 !== void 0 ? _placeSelf$justifySel2 : "", ";"));
-});
-DxcGrid.Item = GridItem;
-var _default = exports["default"] = DxcGrid;

package/grid/Grid.stories.tsx

@@ -1,219 +0,0 @@
-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

@@ -1,115 +0,0 @@
-/// <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

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

package/header/Header.accessibility.test.js

@@ -1,84 +0,0 @@
-"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,8 +0,0 @@
-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;