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

package/stack/Stack.stories.tsx

@@ -1,263 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import styled from "styled-components";
-import DxcStack from "./Stack";
-
-export default {
-  title: "Stack",
-  component: DxcStack,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Default" theme="light" level={4} />
-    <Container>
-      <DxcStack>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcStack>
-    </Container>
-    <Title title="Default with divider" theme="light" level={4} />
-    <Container>
-      <DxcStack divider>
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcStack>
-    </Container>
-    <Title title="Alignment with divider" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="end" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Default with one child" theme="light" level={4} />
-    <Container>
-      <DxcStack divider>
-        <Placeholder height="large" width="xlarge" />
-      </DxcStack>
-    </Container>
-    <Title title="Wrap" theme="light" level={4} />
-    <FlexContainer customHeight>
-      <DxcStack wrap>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcStack>
-    </FlexContainer>
-    <Title title="No wrap in a flex container" theme="light" level={4} />
-    <FlexContainer customHeight>
-      <DxcStack>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </FlexContainer>
-    <Title title="No wrap (default)" theme="light" level={4} />
-    <Container customHeight>
-      <DxcStack>
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="small" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = start" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="start">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = end" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="end">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = center" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="center">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = baseline" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="baseline">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX with wrapped items" theme="light" level={4} />
-    <Container customHeight>
-      <DxcStack alignX="center" wrap>
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="small" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.125rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.125rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.25rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.25rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.5rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.75rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.75rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 1rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="1rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 1.5rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="1.5rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 2rem & divider" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="2rem" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 3rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="3rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 4rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="4rem">
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 5rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Reverse" theme="light" level={4} />
-    <Container>
-      <DxcStack reverse>
-        <Placeholder height="small" width="medium">
-          1
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          2
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          3
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          4
-        </Placeholder>
-      </DxcStack>
-    </Container>
-    <Title title="Wrapped and reversed children" theme="light" level={4} />
-    <FlexContainer customHeight>
-      <DxcStack reverse wrap>
-        <Placeholder height="small" width="medium">
-          1
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          2
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          3
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          4
-        </Placeholder>
-      </DxcStack>
-    </FlexContainer>
-  </>
-);
-
-const FlexContainer = styled.div<{ customHeight?: boolean }>`
-  display: flex;
-  ${({ customHeight }) => customHeight && `height: 100px;`};
-  background: #f2eafa;
-`;
-
-const Container = styled.div<{ customHeight?: boolean }>`
-  background: #f2eafa;
-  ${({ customHeight }) => customHeight && `height: 100px;`};
-`;
-
-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" ? "100px" : height === "medium" ? "80px" : "50px"};`};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/stack/types.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Alignment applied to children in the main axis.
-     */
-    alignX?: "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 children.
-     */
-    divider?: boolean;
-    /**
-     * Space applied between each child.
-     */
-    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-    /**
-     * Change the direction of the stack to reverse.
-     */
-    reverse?: boolean;
-    /**
-     * Sets whether the children are forced onto one column or can wrap onto multiple columns.
-     */
-    wrap?: boolean;
-    /**
-     * Custom content inside the stack.
-     */
-    children: React.ReactNode[] | React.ReactNode;
-};
-export default Props;

package/tabs-nav/types.js

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

package/text/Text.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-declare type TextProps = {
-    as?: "p" | "span";
-    children: React.ReactNode;
-};
-declare function Text({ as, children }: TextProps): JSX.Element;
-export default Text;

package/text/Text.js

@@ -1,30 +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;
-
-function Text(_ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "span" : _ref$as,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledText, {
-    as: as
-  }, children);
-}
-
-var StyledText = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  font-family: Open Sans, sans-serif;\n  line-height: 1.5em;\n"])));
-
-var _default = Text;
-exports["default"] = _default;

package/text/Text.stories.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import DxcText from "./Text";
-
-export default {
-  title: "Text",
-  component: DxcText,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Two texts as span" theme="light" level={4} />
-    <DxcText>Text 1.</DxcText>
-    <DxcText>Text 2.</DxcText>
-    <Title title="Two texts as p" theme="light" level={4} />
-    <DxcText as="p">Text 1.</DxcText>
-    <DxcText as="p">Text 2.</DxcText>
-  </>
-);