@dxc-technology/halstack-react 0.0.0-ecc45e2 → 0.0.0-ede733c

package/sidenav/Sidenav.stories.tsx

@@ -1,8 +1,11 @@
 import React from "react";
 import DxcSidenav from "./Sidenav";
+import DxcSelect from "../select/Select";
+import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Sidenav",
@@ -10,9 +13,26 @@ export default {
 };
 
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
   </svg>
 );
 
@@ -20,11 +40,17 @@ const TitleComponent = () => {
   return <DxcSidenav.Title>Dxc technology</DxcSidenav.Title>;
 };
 
+const opinionatedTheme = {
+  sidenav: {
+    baseColor: "#f2f2f2",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Default sidenav" theme="light" level={4} />
-      <DxcSidenav title={<TitleComponent />}>
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
         <DxcSidenav.Section>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
@@ -41,12 +67,18 @@ export const Chromatic = () => (
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Section Group" icon={iconSVG}>
+          <DxcSidenav.Group
+            collapsable={true}
+            title="Section Group"
+            icon="https://cdn-icons-png.flaticon.com/512/5039/5039041.png"
+          >
             <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
           </DxcSidenav.Group>
-          <DxcSidenav.Link icon={iconSVG}>Single Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Link icon="https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg" newWindow>
+            Single Link
+          </DxcSidenav.Link>
+          <DxcSidenav.Link newWindow>Single Link</DxcSidenav.Link>
           <DxcSidenav.Group collapsable={false} title="Section Group">
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -55,53 +87,78 @@ export const Chromatic = () => (
         </DxcSidenav.Section>
       </DxcSidenav>
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused options sidenav" theme="light" level={4} />
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+        <DxcSidenav.Section>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+            vitae lacinia libero.
+          </p>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link icon="https://cdn-icons-png.flaticon.com/512/5039/5039041.png">Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link selected icon={iconSVG}>
+              Group Link
+            </DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Group collapsable={false} title="Section Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+      </DxcSidenav>
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSidenav title={<TitleComponent />}>
+          <DxcSidenav.Section>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+              vitae lacinia libero.
+            </p>
+          </DxcSidenav.Section>
+          <DxcSidenav.Section>
+            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Group collapsable={false} title="Single Group" icon={iconSVG}>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+          </DxcSidenav.Section>
+          <DxcSidenav.Section>
+            <DxcSidenav.Group collapsable={true} title="Section Group" icon={iconSVG}>
+              <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+            <DxcSidenav.Link icon={iconSVG}>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Group collapsable={false} title="Section Group">
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+          </DxcSidenav.Section>
+        </DxcSidenav>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
-export const FocusedSidenav = () => (
-  <ExampleContainer pseudoState="pseudo-focus">
-    <Title title="Default sidenav" theme="light" level={4} />
-    <DxcSidenav title={<TitleComponent />}>
-      <DxcSidenav.Section>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse vitae
-          lacinia libero.
-        </p>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={false} title="Section Group">
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-    </DxcSidenav>
-  </ExampleContainer>
-);
-
-const CollapsedGroup = () => (
+const CollapsedGroupSidenav = () => (
   <>
     <ExampleContainer>
-      <Title title="Default sidenav" theme="light" level={4} />
-      <DxcSidenav title={<TitleComponent />}>
+      <Title title="Collapsed group with a selected link" theme="light" level={4} />
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group" icon={iconSVG}>
+          <DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -109,11 +166,11 @@ const CollapsedGroup = () => (
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsed Group">
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
           </DxcSidenav.Group>
-          <DxcSidenav.Group collapsable={false} title="Section Group">
+          <DxcSidenav.Group collapsable={true} title="Section Group">
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -124,14 +181,14 @@ const CollapsedGroup = () => (
   </>
 );
 
-const HoverSidenav = () => (
+const HoveredGroupSidenav = () => (
   <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Default sidenav" theme="light" level={4} />
-    <DxcSidenav title={<TitleComponent />}>
+    <Title title="Hover state for groups (selected and not)" theme="light" level={4} />
+    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
       <DxcSidenav.Section>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
           <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -145,36 +202,81 @@ const HoverSidenav = () => (
         </DxcSidenav.Group>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
         </DxcSidenav.Group>
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
+      </DxcSidenav.Section>
+    </DxcSidenav>
+  </ExampleContainer>
+);
 
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+const ActiveGroupSidenav = () => (
+  <ExampleContainer pseudoState="pseudo-active">
+    <Title title="Active state for groups (selected and not)" theme="light" level={4} />
+    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+      <DxcSidenav.Section>
+        <DxcInset space="1rem">
+          <DxcSelect
+            defaultValue="1"
+            options={[
+              { label: "v1.0.0", value: "1" },
+              { label: "v2.0.0", value: "2" },
+              { label: "v3.0.0", value: "3" },
+              { label: "v4.0.0", value: "4" },
+            ]}
+            size="fillParent"
+          />
+        </DxcInset>
+      </DxcSidenav.Section>
+      <DxcSidenav.Section>
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
+          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
         </DxcSidenav.Group>
       </DxcSidenav.Section>
+      <DxcSidenav.Section>
+        <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
+          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+      </DxcSidenav.Section>
     </DxcSidenav>
   </ExampleContainer>
 );
 
-export const CollapseGroup = CollapsedGroup.bind({});
-CollapseGroup.play = async ({ canvasElement }) => {
+export const CollapsableGroup = CollapsedGroupSidenav.bind({});
+CollapsableGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
   collapsableGroups.forEach((group) => {
     userEvent.click(group);
   });
 };
 
-export const CollapseHoverGroup = HoverSidenav.bind({});
-CollapseHoverGroup.play = async ({ canvasElement }) => {
+export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
+CollapsedHoverGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
   collapsableGroups.forEach((group) => {
     userEvent.click(group);
   });
+  await new Promise((resolve) => setTimeout(resolve, 1000));
 };
+
+export const CollapsedActiveGroup = ActiveGroupSidenav.bind({});
+CollapsedActiveGroup.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
+  userEvent.click(collapsableGroups[0]);
+};

package/sidenav/types.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type SidenavPropsType = {
-    /**
-     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
-     */
-    children: React.ReactNode;
     /**
      * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
     title?: React.ReactNode;
+    /**
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
+     */
+    children: React.ReactNode;
 };
 export declare type SidenavTitlePropsType = {
     /**
@@ -23,28 +23,25 @@ export declare type SidenavSectionPropsType = {
     children: React.ReactNode;
 };
 export declare type SidenavGroupPropsType = {
-    /**
-     * The area inside the sidenav group. This area can be used to render sidenav links.
-     */
-    children: React.ReactNode;
     /**
      * The title of the sidenav group.
      */
     title?: string;
     /**
-     * If true the sidenav group title will be considered a button and the group will be collapsable.
+     * If true, the sidenav group will be a button that will allow you to collapse the links contained within it.
+     * In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected.
      */
     collapsable?: boolean;
     /**
      * The icon to be displayed next to the title of the group.
      */
     icon?: string | SVG;
-};
-export declare type SidenavLinkPropsType = {
     /**
-     * Value of the tabindex.
+     * The area inside the sidenav group. This area can be used to render sidenav links.
      */
-    tabIndex?: number;
+    children: React.ReactNode;
+};
+export declare type SidenavLinkPropsType = {
     /**
      * Page to be opened when the user clicks on the link.
      */
@@ -58,16 +55,22 @@ export declare type SidenavLinkPropsType = {
      */
     icon?: string | SVG;
     /**
-     * If true, the link will be marked as selected. This can also affect the group if it is closed to indicate that one of its links is selected.
+     * If true, the link will be marked as selected. Moreover, in that same case,
+     * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
+     * the group title will appear as selected too.
      */
     selected?: boolean;
     /**
-     * The area inside the sidenav link.
+     * This function will be called when the user clicks the link and the event will be passed to this function.
      */
-    children: string;
+    onClick?: ($event: React.MouseEvent<HTMLAnchorElement>) => void;
     /**
-     * This function will be called when the user clicks the link.
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+    /**
+     * The area inside the sidenav link.
      */
-    onClick?: ($event: any) => void;
+    children: React.ReactNode;
 };
 export default SidenavPropsType;

package/slider/Slider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import SliderPropsType from "./types";
-declare const DxcSlider: ({ label, name, defaultValue, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
+declare const DxcSlider: React.ForwardRefExoticComponent<SliderPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcSlider;