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

package/image/Image.stories.tsx

@@ -1,129 +0,0 @@
-import React from "react";
-import DxcImage from "./Image";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DxcFlex from "../flex/Flex";
-import DxcInset from "../inset/Inset";
-import DxcParagraph from "../paragraph/Paragraph";
-
-export default {
-  title: "Image",
-  component: DxcImage,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Image component" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Simple image" theme="light" level={4} />
-      <DxcImage
-        alt="Example image"
-        width="100%"
-        src="https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg"
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Image with text" theme="light" level={4} />
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
-        arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
-        lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
-        porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
-        morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
-        ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
-        metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
-        volutpat id lorem.
-      </DxcParagraph>
-      <DxcInset top="2rem" bottom="2rem">
-        <DxcImage
-          alt="Ratatouille is a great movie"
-          caption="Ratatouille with a smile on his face."
-          src="https://hips.hearstapps.com/es.h-cdn.co/fotoes/images/cinefilia/por-que-ratatouille-nos-sigue-enamorando-10-anos-despues/136444706-1-esl-ES/Por-que-Ratatouille-nos-sigue-enamorando-10-anos-despues.jpg"
-        />
-      </DxcInset>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
-        arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
-        lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
-        porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
-        morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
-        ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
-        metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
-        volutpat id lorem.
-      </DxcParagraph>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Example image" theme="light" level={4} />
-      <DxcFlex gap="1rem">
-        <DxcImage
-          alt="Camera pic"
-          caption="Picture of a camera and the sunset."
-          width="500px"
-          src="https://assets.entrepreneur.com/content/3x2/2000/20191009140007-GettyImages-1053962188.jpeg"
-        />
-        <DxcParagraph>
-          Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
-          arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
-          lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh
-          tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue
-          diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo
-          nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit
-          augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
-          Commodo sagittis volutpat id lorem. Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis
-          volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor.
-          Lectus eget cursus ut ac pharetra lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus
-          vitae vitae aenean arcu. Nibh tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh
-          est sed. Netus venenatis congue diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu
-          nec fringilla enim purus ut justo nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper
-          nullam sit sagittis hendrerit augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed
-          enim in sed vel nec ut vitae. Commodo sagittis volutpat id lorem.
-        </DxcParagraph>
-      </DxcFlex>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Object position" theme="light" level={4} />
-      <DxcImage
-        alt="Moon pic"
-        caption="Picture of the moon."
-        width="250px"
-        src="https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg"
-        objectPosition="right top"
-        objectFit="none"
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Object fit: contain" theme="light" level={4} />
-      <div style={{ display: "flex", width: "fit-content", border: "1px solid #000", padding: "0.5rem" }}>
-        <DxcImage
-          alt="Dog pic"
-          src="https://cc-prod.scene7.com/is/image/CCProdAuthor/What-is-Stock-Photography_P1_mobile?$pjpeg$&jpegSize=200&wid=720"
-          width="200px"
-          height="200px"
-          objectFit="contain"
-          caption="Pretty dog."
-        />
-      </div>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Object fit: cover" theme="light" level={4} />
-      <div style={{ width: "75%", height: "300px" }}>
-        <DxcImage
-          alt="Spaceship pic"
-          src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
-          objectFit="cover"
-          width="50%"
-          height="100%"
-          objectPosition="0px 0px"
-        />
-        <DxcImage
-          alt="Spaceship pic"
-          src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
-          objectFit="cover"
-          width="50%"
-          height="100%"
-          objectPosition="0px 0px"
-        />
-      </div>
-    </ExampleContainer>
-  </>
-);

package/image/types.d.ts

@@ -1,72 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    /**
-     * Alternative text description displayed when the specified image is not loaded.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
-     * See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
-     */
-    alt: string;
-    /**
-     * Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
-     * which is required regardless of the presence of the caption or not.
-     */
-    caption?: string;
-    /**
-     * If true, the image will be loaded only when it is visible on the screen (lazy loading).
-     * Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
-     */
-    lazyLoading?: boolean;
-    /**
-     * URL of the image. This prop is required and must be valid.
-     */
-    src: string;
-    /**
-     * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
-     */
-    srcSet?: string;
-    /**
-     * One or more strings separated by commas, indicating a set of source sizes.
-     * If the srcSet attribute is absent or contains no values with a width descriptor,
-     * then this attribute has no effect.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
-     */
-    sizes?: string;
-    /**
-     * Sets the rendered width of the image.
-     */
-    width?: string;
-    /**
-     * Sets the rendered height of the image.
-     */
-    height?: string;
-    /**
-     * Sets the object-fit CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
-     */
-    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
-    /**
-     * Sets the object-position CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
-     */
-    objectPosition?: string;
-    /**
-     * This function will be called when the image is loaded.
-     */
-    onLoad?: React.ReactEventHandler<HTMLImageElement>;
-    /**
-     * This function will be called when the image fails to load.
-     */
-    onError?: React.ReactEventHandler<HTMLImageElement>;
-};
-export type CaptionWrapperProps = {
-    condition: boolean;
-    wrapper: (children: React.ReactNode) => JSX.Element;
-    children: React.ReactNode;
-};
-export default Props;

package/image/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,43 +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,230 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import styled from "styled-components";
-import DxcFlex from "./../flex/Flex";
-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 flex column" level={4} />
-    <Container>
-      <DxcFlex direction="column" gap="1rem">
-        <Placeholder></Placeholder>
-        <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
-          <Placeholder></Placeholder>
-        </DxcInset>
-        <Placeholder></Placeholder>
-      </DxcFlex>
-    </Container>
-  </>
-);
-
-const Container = styled.div`
-  background: #f2eafa;
-  margin: 2.5rem;
-`;
-
-const Placeholder = styled.div`
-  min-height: 40px;
-  min-width: 120px;
-  border: 1px solid #a46ede;
-  border-radius: 0.5rem;
-  background-color: #e5d5f6;
-`;

package/inset/types.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-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,20 +0,0 @@
-import React from "react";
-import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types";
-declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
-    Header: {
-        ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: import("../header/types").default): JSX.Element;
-        Dropdown: (props: import("../dropdown/types").default) => React.JSX.Element;
-    };
-    Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: import("../footer/types").default) => JSX.Element;
-    SideNav: {
-        ({ title, children }: import("../sidenav/types").default): JSX.Element;
-        Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;
-        Group: ({ title, collapsable, icon, children }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
-        Link: React.ForwardRefExoticComponent<import("../sidenav/types").SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
-        Title: ({ children }: import("../sidenav/types").SidenavTitlePropsType) => JSX.Element;
-    };
-    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
-};
-export default DxcApplicationLayout;