@dxc-technology/halstack-react 0.0.0-fcf16fe → 0.0.0-fd5a25e

package/inline/Inline.stories.tsx

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

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

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

package/inset/Inset.d.ts

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

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

@@ -0,0 +1,229 @@
+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;
+`;