@dxc-technology/halstack-react 0.0.0-d2c3c1e → 0.0.0-d2c7176

package/inline/Inline.stories.tsx

@@ -1,220 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import styled from "styled-components";
-import DxcInline from "./Inline";
-
-export default {
-  title: "Inline",
-  component: DxcInline,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Default" theme="light" level={4} />
-    <Container>
-      <DxcInline>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Default with divider" theme="light" level={4} />
-    <Container>
-      <DxcInline divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="medium" width="small" />
-      </DxcInline>
-    </Container>
-    <Title title="Default with one child" theme="light" level={4} />
-    <Container>
-      <DxcInline>
-        <Placeholder height="large" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Wrap" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = end" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="end">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = center" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="center">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = baseline" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="baseline">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = stretch" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="stretch">
-        <Placeholder width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = end" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="end">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = center" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="center">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = baseline" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="baseline">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = stretch" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="stretch">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.125rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.125rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.25rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.25rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.5rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.75rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.75rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 1rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="1rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 1.5rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="1.5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 2rem and divider" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="2rem" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Reverse" theme="light" level={4} />
-    <Container>
-      <DxcInline reverse>
-        <Placeholder height="small" width="small">
-          1
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          2
-        </Placeholder>
-        <Placeholder height="large" width="large">
-          3
-        </Placeholder>
-        <Placeholder height="small" width="large">
-          4
-        </Placeholder>
-      </DxcInline>
-    </Container>
-  </>
-);
-
-const Container = styled.div<{ customWidth?: boolean }>`
-  background: #f2eafa;
-  ${({ customWidth }) => (customWidth ? `width: 300px;` : "")};
-`;
-
-type PlaceholderProps = {
-  width?: "large" | "medium" | "small" | "auto";
-  height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div<PlaceholderProps>`
-  ${({ width }) => (width ? `width: ${width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};` : "")};
-  ${({ height }) =>
-    height ? `height: ${height === "large" ? "150px" : height === "medium" ? "100px" : "50px"};` : ""};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/inline/types.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Align children in the main axis.
-     */
-    alignX?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Align children in the cross axis.
-     */
-    alignY?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Set the component to a different HTML tag.
-     */
-    as?: React.ElementType;
-    /**
-     * Add a divider between columns.
-     */
-    divider?: boolean;
-    /**
-     * Spacing between columns.
-     */
-    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem";
-    /**
-     * Change the flex-direction of the column to reverse.
-     */
-    reverse?: boolean;
-    /**
-     * Single column.
-     */
-    children: React.ReactElement<React.ReactNode>[] | React.ReactElement<React.ReactNode>;
-};
-export default Props;

package/inline/types.js

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

package/inset/Inset.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import InsetPropsType from "./types";
-export default function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: InsetPropsType): JSX.Element;

package/inset/Inset.js

@@ -1,51 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = Inset;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-function Inset(_ref) {
-  var space = _ref.space,
-      horizontal = _ref.horizontal,
-      vertical = _ref.vertical,
-      top = _ref.top,
-      right = _ref.right,
-      bottom = _ref.bottom,
-      left = _ref.left,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledInset, {
-    space: space,
-    horizontal: horizontal,
-    vertical: vertical,
-    top: top,
-    right: right,
-    bottom: bottom,
-    left: left
-  }, children);
-}
-
-function getSpacingValue(spacingName) {
-  return spacingName ? spacingName : "0rem";
-}
-
-var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {
-  var space = _ref2.space,
-      horizontal = _ref2.horizontal,
-      vertical = _ref2.vertical,
-      top = _ref2.top,
-      right = _ref2.right,
-      bottom = _ref2.bottom,
-      left = _ref2.left;
-  return "\n  padding: ".concat(getSpacingValue(top || vertical || space), " ").concat(getSpacingValue(right || horizontal || space), "\n    ").concat(getSpacingValue(bottom || vertical || space), " ").concat(getSpacingValue(left || horizontal || space), ";\n");
-});

package/inset/Inset.stories.tsx

@@ -1,229 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import styled from "styled-components";
-import DxcStack from "./../stack/Stack";
-import DxcInset from "./Inset";
-
-export default {
-  title: "Inset",
-  component: DxcInset,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Default" level={4} />
-    <Container>
-      <DxcInset>
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = none" level={4} />
-    <Container>
-      <DxcInset space="0rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxxsmall" level={4} />
-    <Container>
-      <DxcInset space="0.125rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxsmall" level={4} />
-    <Container>
-      <DxcInset space="0.25rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xsmall" level={4} />
-    <Container>
-      <DxcInset space="0.5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = small" level={4} />
-    <Container>
-      <DxcInset space="1rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = medium" level={4} />
-    <Container>
-      <DxcInset space="1.5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = large" level={4} />
-    <Container>
-      <DxcInset space="2rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xlarge" level={4} />
-    <Container>
-      <DxcInset space="3rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxlarge" level={4} />
-    <Container>
-      <DxcInset space="4rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxxlarge" level={4} />
-    <Container>
-      <DxcInset space="5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = none" level={4} />
-    <Container>
-      <DxcInset horizontal="0rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxxsmall" level={4} />
-    <Container>
-      <DxcInset horizontal="0.125rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxsmall" level={4} />
-    <Container>
-      <DxcInset horizontal="0.25rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xsmall" level={4} />
-    <Container>
-      <DxcInset horizontal="0.5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = small" level={4} />
-    <Container>
-      <DxcInset horizontal="1rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = medium" level={4} />
-    <Container>
-      <DxcInset horizontal="1.5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = large" level={4} />
-    <Container>
-      <DxcInset horizontal="2rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xlarge" level={4} />
-    <Container>
-      <DxcInset horizontal="3rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxlarge" level={4} />
-    <Container>
-      <DxcInset horizontal="4rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxxlarge" level={4} />
-    <Container>
-      <DxcInset horizontal="5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = none" level={4} />
-    <Container>
-      <DxcInset vertical="0rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxxsmall" level={4} />
-    <Container>
-      <DxcInset vertical="0.125rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxsmall" level={4} />
-    <Container>
-      <DxcInset vertical="0.25rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xsmall" level={4} />
-    <Container>
-      <DxcInset vertical="0.5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = small" level={4} />
-    <Container>
-      <DxcInset vertical="1rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = medium" level={4} />
-    <Container>
-      <DxcInset vertical="1.5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = large" level={4} />
-    <Container>
-      <DxcInset vertical="2rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xlarge" level={4} />
-    <Container>
-      <DxcInset vertical="3rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxlarge" level={4} />
-    <Container>
-      <DxcInset vertical="4rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxxlarge" level={4} />
-    <Container>
-      <DxcInset vertical="5rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} />
-    <Container>
-      <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="Inside a stack" level={4} />
-    <Container>
-      <DxcStack gutter="medium" divider>
-        <Placeholder></Placeholder>
-        <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
-          <Placeholder></Placeholder>
-        </DxcInset>
-        <Placeholder></Placeholder>
-      </DxcStack>
-    </Container>
-  </>
-);
-
-const Container = styled.div`
-  background: #f2eafa;
-  margin: 2.5rem;
-`;
-
-const Placeholder = styled.div`
-  min-height: 40px;
-  min-width: 120px;
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/inset/types.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-declare type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-declare type Props = {
-    /**
-     * Applies the spacing scale to all sides.
-     */
-    space?: Spacing;
-    /**
-     * Applies the spacing scale to the left and right sides.
-     */
-    horizontal?: Spacing;
-    /**
-     * Applies the spacing scale to the top and bottom sides.
-     */
-    vertical?: Spacing;
-    /**
-     * Applies the spacing scale to the top side.
-     */
-    top?: Spacing;
-    /**
-     * Applies the spacing scale to the right side.
-     */
-    right?: Spacing;
-    /**
-     * Applies the spacing scale to the bottom side.
-     */
-    bottom?: Spacing;
-    /**
-     * Applies the spacing scale to the left side.
-     */
-    left?: Spacing;
-    /**
-     * Custom content inside the inset.
-     */
-    children: React.ReactNode;
-};
-export default Props;

package/inset/types.js

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

package/layout/ApplicationLayout.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import AppLayoutPropsType, { AppLayoutSidenavPropsType, AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
-declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, children }: AppLayoutPropsType): JSX.Element;
-    Header: ({ children }: AppLayoutHeaderPropsType) => JSX.Element;
-    Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ children }: AppLayoutFooterPropsType) => JSX.Element;
-    SideNav: ({ ...childProps }: AppLayoutSidenavPropsType) => JSX.Element;
-    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
-};
-export default DxcApplicationLayout;