From 6bb2a4262c45152aab85dcad6187cc9626f146cd Mon Sep 17 00:00:00 2001 From: Natalia Date: Wed, 10 May 2023 11:34:08 +0200 Subject: [PATCH 1/2] Add Accordion styleOverride and Story --- .changeset/pretty-owls-pay.md | 5 +++ .../Accordion/Accordion.stories.mdx | 22 +++++++++++ .../Accordion/Accordion.stories.tsx | 31 +++++++++++++++ .../src/componentsTheme/MuiAccordion.ts | 39 +++++++++++++++++++ .../src/componentsTheme/getComponentsTheme.ts | 2 + 5 files changed, 99 insertions(+) create mode 100644 .changeset/pretty-owls-pay.md create mode 100644 packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.mdx create mode 100644 packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.tsx create mode 100644 packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts diff --git a/.changeset/pretty-owls-pay.md b/.changeset/pretty-owls-pay.md new file mode 100644 index 0000000000..da9957323e --- /dev/null +++ b/.changeset/pretty-owls-pay.md @@ -0,0 +1,5 @@ +--- +"@comet/admin-theme": patch +--- + +Add Accordion styleOverride and Story diff --git a/packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.mdx b/packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.mdx new file mode 100644 index 0000000000..1aa4e11cb2 --- /dev/null +++ b/packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.mdx @@ -0,0 +1,22 @@ +import { Canvas, Meta, Source, Story } from "@storybook/addon-docs"; + +import dedent from "ts-dedent"; + + + +# Accordion + +> Accordion allows user to show or hide content sections. +> +> \- [MUI Docs](https://mui.com/material-ui/react-accordion/) +The Comet Admin `Accordion` extends [Material UI's `Accordion`](https://mui.com/material-ui/react-accordion) by adding a custom style. + +#### Props + +The Accordion component accepts all props from the Material UI Accordion component. + +#### Example + + + + \ No newline at end of file diff --git a/packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.tsx b/packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.tsx new file mode 100644 index 0000000000..c7969b56a7 --- /dev/null +++ b/packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.tsx @@ -0,0 +1,31 @@ +import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp"; +import { Accordion, AccordionDetails, AccordionSummary, Grid, Typography } from "@mui/material"; +import { storiesOf } from "@storybook/react"; +import * as React from "react"; + +storiesOf("stories/components/Accordion", module).add("BasicAccordion", () => { + return ( + + }> + + + + This is a basic accordion + + + Support Text + + + + End Adornment + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + ); +}); diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts b/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts new file mode 100644 index 0000000000..a4bf5fdace --- /dev/null +++ b/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts @@ -0,0 +1,39 @@ +import { accordionDetailsClasses, accordionSummaryClasses } from "@mui/material"; + +import { mergeOverrideStyles } from "../utils/mergeOverrideStyles"; +import { GetMuiComponentTheme } from "./getComponentsTheme"; + +export const getMuiAccordion: GetMuiComponentTheme<"MuiAccordion"> = (component, { palette }) => ({ + ...component, + defaultProps: { + square: true, + disableGutters: true, + elevation: 0, + ...component?.defaultProps, + }, + styleOverrides: mergeOverrideStyles<"MuiAccordion">(component?.styleOverrides, { + root: { + border: `solid ${palette.divider}`, + "&:not(:last-child)": { + marginBottom: "20px", + }, + "&:before": { + display: "none", + }, + [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: { + transform: "rotate(90deg)", + }, + [`& .${accordionSummaryClasses.root}`]: { + display: "flex", + flexDirection: "row-reverse", + padding: "20px", + gap: "20px", + height: "86px", + }, + [`& .${accordionDetailsClasses.root}`]: { + borderTop: `solid ${palette.divider}`, + padding: "40px", + }, + }, + }), +}); diff --git a/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts b/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts index 39d3f7b7bd..6faa218ad4 100644 --- a/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts +++ b/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts @@ -5,6 +5,7 @@ import { Shadows } from "@mui/material/styles/shadows"; import { ZIndex } from "@mui/material/styles/zIndex"; import { Spacing } from "@mui/system"; +import { getMuiAccordion } from "./MuiAccordion"; import { getMuiAppBar } from "./MuiAppBar"; import { getMuiAutocomplete } from "./MuiAutocomplete"; import { getMuiButton } from "./MuiButton"; @@ -56,6 +57,7 @@ export type GetMuiComponentTheme ({ ...components, + MuiAccordion: getMuiAccordion(components.MuiAccordion, themeData), MuiAppBar: getMuiAppBar(components.MuiAppBar, themeData), MuiAutocomplete: getMuiAutocomplete(components.MuiAutocomplete, themeData), MuiButton: getMuiButton(components.MuiButton, themeData), From fc9bdd861337c601fffb2ef7031b6b1266855eae Mon Sep 17 00:00:00 2001 From: Natalia Date: Fri, 12 May 2023 12:01:05 +0200 Subject: [PATCH 2/2] Remove fixed height value --- packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts b/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts index a4bf5fdace..485279da65 100644 --- a/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts +++ b/packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts @@ -28,7 +28,6 @@ export const getMuiAccordion: GetMuiComponentTheme<"MuiAccordion"> = (component, flexDirection: "row-reverse", padding: "20px", gap: "20px", - height: "86px", }, [`& .${accordionDetailsClasses.root}`]: { borderTop: `solid ${palette.divider}`,