Merge branch 'master' into FE-5889

Sage · Jan 23, 2025 · cd22d7d · cd22d7d
2 parents 5750dee + 3e1b872
commit cd22d7d
Show file tree

Hide file tree

Showing 16 changed files with 599 additions and 387 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,24 @@
+### [146.4.7](https://github.com/Sage/carbon/compare/v146.4.6...v146.4.7) (2025-01-22)
+
+
+### Bug Fixes
+
+* **search:** search button has a default aria label ([b4ec216](https://github.com/Sage/carbon/commit/b4ec216541850c27956e284b7ab7abc338ce554e)), closes [#7147](https://github.com/Sage/carbon/issues/7147)
+
+### [146.4.6](https://github.com/Sage/carbon/compare/v146.4.5...v146.4.6) (2025-01-22)
+
+
+### Bug Fixes
+
+* **date-range:** date range axe issue ([790df46](https://github.com/Sage/carbon/commit/790df46388b61cd868c13b6297932dfa26ace894)), closes [#7116](https://github.com/Sage/carbon/issues/7116)
+
+### [146.4.5](https://github.com/Sage/carbon/compare/v146.4.4...v146.4.5) (2025-01-21)
+
+
+### Bug Fixes
+
+* **popover-container:** prevent DatePicker from rendering behind the popover ([59d2f4a](https://github.com/Sage/carbon/commit/59d2f4abb09b7ad303f0b11fe374d78122d1b0ae)), closes [#7137](https://github.com/Sage/carbon/issues/7137)
+
 ### [146.4.4](https://github.com/Sage/carbon/compare/v146.4.3...v146.4.4) (2025-01-17)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "146.4.4",
+  "version": "146.4.7",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { action } from "@storybook/addon-actions";
 import { Accordion, AccordionGroup } from ".";
 import Textbox from "../textbox";
@@ -7,9 +7,12 @@ import MultiActionButton from "../multi-action-button";
 import SplitButton from "../split-button";
 import Button from "../button/button.component";
 
+import { Dl, Dt, Dd } from "../definition-list";
+import Link from "../link/link.component";
+import { Checkbox } from "../checkbox";
+
 export default {
   title: "Accordion/Test",
-  includeStories: ["Default", "Grouped", "AccordionWithMultiAction"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -139,3 +142,209 @@ export const AccordionWithMultiAction = () => {
 
 AccordionWithMultiAction.storyName =
   "Accordion with MultiAction and Split Button";
+
+export const AccordionWithDefinitionList = () => {
+  const [isOpen, setOpen] = useState<boolean>(true);
+  return (
+    <Accordion
+      title="Heading"
+      onChange={() => {
+        setOpen(!isOpen);
+      }}
+      expanded={isOpen}
+    >
+      <Dl>
+        <Dt>Drink</Dt>
+        <Dd>Coffee</Dd>
+        <Dt>Brew Method</Dt>
+        <Dd>Stove Top Moka Pot</Dd>
+        <Dt>Brand of Coffee</Dt>
+        <Dd>Magic Coffee Beans</Dd>
+        <Dt>Website</Dt>
+        <Dd>
+          <Link href="www.sage.com">Magic Coffee Beans Website</Link>
+        </Dd>
+        <Dt>Email</Dt>
+        <Dd>
+          <Link href="[email protected]">[email protected]</Link>
+        </Dd>
+        <Dt mb={0}>Main and Registered Address</Dt>
+        <Dd mb="4px">Magic Coffee Beans,</Dd>
+        <Dd mb="4px">In The Middle of Our Street,</Dd>
+        <Dd mb="4px">Madness,</Dd>
+        <Dd mb="4px">CO4 3VE</Dd>
+        <Dd>
+          <Button
+            buttonType="tertiary"
+            iconType="link"
+            iconPosition="after"
+            href="https://goo.gl/maps/GMReLoBpbn9mdZVZ7"
+          >
+            View in Google Maps
+          </Button>
+        </Dd>
+      </Dl>
+    </Accordion>
+  );
+};
+AccordionWithDefinitionList.storyName = "Accordion With Definition List";
+
+export const AccordionWithValidations = () => {
+  const [validationKey, setValidationKey] = useState<string>("error");
+  const props = useMemo(() => {
+    return {
+      title: "Validation",
+      [validationKey]: `${validationKey}`,
+    };
+  }, [validationKey]);
+
+  return (
+    <AccordionGroup>
+      <Accordion {...props}>
+        <Checkbox
+          label="Error"
+          error
+          onChange={() => setValidationKey("error")}
+          checked={validationKey === "error"}
+          mb={2}
+        />
+        <Checkbox
+          label="Warning"
+          warning
+          onChange={() => setValidationKey("warning")}
+          checked={validationKey === "warning"}
+          mb={2}
+        />
+        <Checkbox
+          label="Info"
+          info
+          onChange={() => setValidationKey("info")}
+          checked={validationKey === "info"}
+          mb={2}
+        />
+      </Accordion>
+    </AccordionGroup>
+  );
+};
+AccordionWithValidations.storyName = "Accordion With Validation";
+AccordionWithValidations.parameters = {
+  chromatic: { disableSnapshot: false },
+};
+
+export const WithBoxComponentAndDifferentPaddings = () => {
+  const [isOpen, setOpen] = useState(true);
+  return (
+    <>
+      <Accordion
+        expanded={isOpen}
+        onChange={() => {
+          setOpen(!isOpen);
+        }}
+        disableContentPadding
+        headerSpacing={{ p: 2 }}
+        title="Accordion controlled"
+      >
+        <Box p={2} pr="21px">
+          <Box bg="gray">
+            This is example content inside of the Box component with gray
+            background
+          </Box>
+          <Box>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in
+            ornare neque. Maecenas pellentesque et erat tincidunt mollis. Etiam
+            diam nisi, elementum efficitur ipsum et, imperdiet iaculis ligula.
+            Cras eget lorem aliquam lorem mollis fringilla a sit amet nisl.
+            Donec semper odio elit, tempus ultrices est molestie id. Ut sit amet
+            sollicitudin ipsum, eu tristique ligula. Praesent velit velit,
+            finibus ut odio sit amet, fringilla iaculis lacus. Aliquam facilisis
+            libero nec ipsum tincidunt imperdiet. Ut commodo mi ac odio blandit,
+            ac molestie ante dapibus. Ut molestie auctor turpis, quis ultrices
+            ante aliquet eu. Aenean et condimentum arcu, non malesuada elit.
+            Cras a magna vestibulum, semper tortor id, molestie eros.
+          </Box>
+        </Box>
+      </Accordion>
+      <Accordion
+        disableContentPadding
+        headerSpacing={{ p: 3 }}
+        title="Accordion with a very long title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in ornare neque. Maecenas pellentesque et erat tincidunt mollis.
+                Etiam diam nisi, elementum efficitur ipsum et, imperdiet iaculis ligula. "
+      >
+        <Box p={3} pr="29px">
+          <Box bg="gray">
+            This is example content inside of the Box component with gray
+            background
+          </Box>
+          <Box>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in
+            ornare neque. Maecenas pellentesque et erat tincidunt mollis. Etiam
+            diam nisi, elementum efficitur ipsum et, imperdiet iaculis ligula.
+            Cras eget lorem aliquam lorem mollis fringilla a sit amet nisl.
+            Donec semper odio elit, tempus ultrices est molestie id. Ut sit amet
+            sollicitudin ipsum, eu tristique ligula. Praesent velit velit,
+            finibus ut odio sit amet, fringilla iaculis lacus. Aliquam facilisis
+            libero nec ipsum tincidunt imperdiet. Ut commodo mi ac odio blandit,
+            ac molestie ante dapibus. Ut molestie auctor turpis, quis ultrices
+            ante aliquet eu. Aenean et condimentum arcu, non malesuada elit.
+            Cras a magna vestibulum, semper tortor id, molestie eros.
+          </Box>
+        </Box>
+      </Accordion>
+      <Accordion
+        disableContentPadding
+        headerSpacing={{ p: 4 }}
+        title="Accordion"
+      >
+        <Box p={4} pr="37px">
+          <Box bg="gray">
+            This is example content inside of the Box component with gray
+            background
+          </Box>
+          <Box>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in
+            ornare neque. Maecenas pellentesque et erat tincidunt mollis. Etiam
+            diam nisi, elementum efficitur ipsum et, imperdiet iaculis ligula.
+            Cras eget lorem aliquam lorem mollis fringilla a sit amet nisl.
+            Donec semper odio elit, tempus ultrices est molestie id. Ut sit amet
+            sollicitudin ipsum, eu tristique ligula. Praesent velit velit,
+            finibus ut odio sit amet, fringilla iaculis lacus. Aliquam facilisis
+            libero nec ipsum tincidunt imperdiet. Ut commodo mi ac odio blandit,
+            ac molestie ante dapibus. Ut molestie auctor turpis, quis ultrices
+            ante aliquet eu. Aenean et condimentum arcu, non malesuada elit.
+            Cras a magna vestibulum, semper tortor id, molestie eros.
+          </Box>
+        </Box>
+      </Accordion>
+      <Accordion
+        disableContentPadding
+        headerSpacing={{ p: 5 }}
+        title="Accordion"
+      >
+        <Box p={5} pr="45px">
+          <Box bg="gray">
+            This is example content inside of the Box component with gray
+            background
+          </Box>
+          <Box>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in
+            ornare neque. Maecenas pellentesque et erat tincidunt mollis. Etiam
+            diam nisi, elementum efficitur ipsum et, imperdiet iaculis ligula.
+            Cras eget lorem aliquam lorem mollis fringilla a sit amet nisl.
+            Donec semper odio elit, tempus ultrices est molestie id. Ut sit amet
+            sollicitudin ipsum, eu tristique ligula. Praesent velit velit,
+            finibus ut odio sit amet, fringilla iaculis lacus. Aliquam facilisis
+            libero nec ipsum tincidunt imperdiet. Ut commodo mi ac odio blandit,
+            ac molestie ante dapibus. Ut molestie auctor turpis, quis ultrices
+            ante aliquet eu. Aenean et condimentum arcu, non malesuada elit.
+            Cras a magna vestibulum, semper tortor id, molestie eros.
+          </Box>
+        </Box>
+      </Accordion>
+    </>
+  );
+};
+WithBoxComponentAndDifferentPaddings.storyName =
+  "With Box Component and Different Padding";
+WithBoxComponentAndDifferentPaddings.parameters = {
+  chromatic: { disableSnapshot: false },
+};