@dxc-technology/halstack-react 0.0.0-dcd93c4 → 0.0.0-dd6acd7

package/inline/Inline.stories.tsx

@@ -1,319 +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="One child larger (width) than the container" theme="light" level={4} />
-    <FlexContainer customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="xlarge" />
-      </DxcInline>
-    </FlexContainer>
-    <Title title="One child larger (min-width) than the container" theme="light" level={4} />
-    <FlexContainer customWidth customHeight>
-      <DxcInline>
-        <MinSizePlaceholder height="medium" />
-      </DxcInline>
-    </FlexContainer>
-    <Title title="Wrap" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline wrap>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Nowrap in a non-flex container" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="large" />
-        <Placeholder height="small" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Nowrap in a flex container" theme="light" level={4} />
-    <FlexContainer customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="large" />
-        <Placeholder height="small" width="medium" />
-      </DxcInline>
-    </FlexContainer>
-    <Title title="AlignY = start" 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="AlignY = end with divider" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="end" 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="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 with wrapped items" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline alignY="end" wrap>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-      </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="AlignX = start" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="start">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = end with divider" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="end" divider>
-        <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 with wrapped items" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline alignX="center" wrap>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="large" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="large" width="medium" />
-      </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="Gutter = 3rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="3rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 4rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="4rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 5rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-      </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>
-    <Title title="Wrapped and reversed children" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline reverse wrap>
-        <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 FlexContainer = styled.div<{ customWidth?: boolean, customHeight?: boolean }>`
-  display: flex;
-  ${({ customWidth }) => customWidth && `width: 200px;`};
-  ${({ customHeight }) => customHeight && `height: 200px;`};
-  background: #f2eafa;
-`;
-
-const Container = styled.div<{ customWidth?: boolean }>`
-  background: #f2eafa;
-  ${({ customWidth }) => customWidth && `width: 300px;`};
-`;
-
-type PlaceholderProps = {
-  width?: "xlarge" | "large" | "medium" | "small" | "auto";
-  height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div<PlaceholderProps>`
-  ${({ width }) =>
-    width &&
-    `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
-  ${({ height }) => height && `height: ${height === "large" ? "150px" : height === "medium" ? "100px" : "50px"};`};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;
-
-const MinSizePlaceholder = styled.div<PlaceholderProps>`
-  min-width: 300px;
-  ${({ height }) => height && `height: ${height === "large" ? "150px" : height === "medium" ? "100px" : "50px"};`};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/inline/types.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Sets whether the children are forced onto one line or can wrap onto multiple lines.
-     */
-    wrap?: boolean;
-    /**
-     * Alignment applied to children in the main axis.
-     */
-    alignX?: "start" | "end" | "center";
-    /**
-     * Alignment applied to children in the cross axis.
-     */
-    alignY?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Specifies the HTML tag or component that is rendered as the wrapper element.
-     */
-    as?: React.ElementType;
-    /**
-     * If true, a divider is shown between each child.
-     */
-    divider?: boolean;
-    /**
-     * Space applied between each child.
-     */
-    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-    /**
-     * If true, it changes the direction of the inline to reverse.
-     */
-    reverse?: boolean;
-    /**
-     * Custom content inside the stack.
-     */
-    children: React.ReactNode[] | 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="0.75rem" 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;
-`;