From e91c0ac3fcde98b4c23f99bab0eefa9ba7bf8446 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Wed, 22 Sep 2021 18:28:05 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Update=20bluelib=20and=20add=20`Det?= =?UTF-8?q?ails`=20element?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/bluelib | 2 +- src/components/common/Content.tsx | 15 +++++++++ src/components/common/Details.stories.jsx | 25 +++++++++++++++ src/components/common/Details.tsx | 37 +++++++++++++++++++++++ src/components/common/DetailsContent.tsx | 18 +++++++++++ src/components/common/DetailsSummary.tsx | 18 +++++++++++ 6 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 src/components/common/Content.tsx create mode 100644 src/components/common/Details.stories.jsx create mode 100644 src/components/common/Details.tsx create mode 100644 src/components/common/DetailsContent.tsx create mode 100644 src/components/common/DetailsSummary.tsx diff --git a/src/bluelib b/src/bluelib index ee3213e..5878b6d 160000 --- a/src/bluelib +++ b/src/bluelib @@ -1 +1 @@ -Subproject commit ee3213e7c3853777af7052295b4d425746860ba5 +Subproject commit 5878b6d9b3fa5e2578aadde8afad309211f0b224 diff --git a/src/components/common/Content.tsx b/src/components/common/Content.tsx new file mode 100644 index 0000000..df421d5 --- /dev/null +++ b/src/components/common/Content.tsx @@ -0,0 +1,15 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" + + +interface ContentProps { + +} + + +export function Content({}: ContentProps): JSX.Element { + return ( + <> + + ) +} diff --git a/src/components/common/Details.stories.jsx b/src/components/common/Details.stories.jsx new file mode 100644 index 0000000..544227a --- /dev/null +++ b/src/components/common/Details.stories.jsx @@ -0,0 +1,25 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Decorators from "../../utils/Decorators" +import { Details as DetailsComponent } from "./Details" +import { DetailsSummary } from "./DetailsSummary" + + +export default { + component: DetailsComponent, + title: "Common/Details", + decorators: [Decorators.Bluelib], +} + + +export const Details = props => ( + + + The Tragedy + + + Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It’s not a story the Jedi would tell you. It’s a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so wise he could use the Force to influence the midichlorians to create life… He had such a knowledge of the dark side that he could even keep the ones he cared about from dying. The dark side of the Force is a pathway to many abilities some consider to be unnatural. He became so powerful… the only thing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his sleep. Ironic. He could save others from death, but not himself. + + +) +Details.args = {} \ No newline at end of file diff --git a/src/components/common/Details.tsx b/src/components/common/Details.tsx new file mode 100644 index 0000000..07f6552 --- /dev/null +++ b/src/components/common/Details.tsx @@ -0,0 +1,37 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Types from "../../types" +import {BaseElement} from "../BaseElement" +import mergeClassNames from "classnames" +import {DetailsSummary} from "./DetailsSummary"; +import {DetailsContent} from "./DetailsContent"; + + +export interface DetailsProps extends Types.BluelibHTMLProps {} + + +export function Details({children, disabled, onClick, ...props}: DetailsProps): JSX.Element { + props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "details") + + const onClickWrapper = + React.useCallback( + event => { + if(disabled) { + event.preventDefault() + } + else if(onClick) { + onClick(event) + } + }, + [disabled, onClick] + ) + + return ( + + {children} + + ) +} + +Details.Summary = DetailsSummary +Details.Content = DetailsContent diff --git a/src/components/common/DetailsContent.tsx b/src/components/common/DetailsContent.tsx new file mode 100644 index 0000000..9c94c7e --- /dev/null +++ b/src/components/common/DetailsContent.tsx @@ -0,0 +1,18 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Types from "../../types"; +import {BaseElement} from "../BaseElement"; +import {DetailsProps} from "./Details"; +import mergeClassNames from "classnames" + + +export interface DetailsContentProps extends Types.BluelibHTMLProps {} + + +export function DetailsContent({...props}: DetailsContentProps): JSX.Element { + props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "details-content") + + return ( + + ) +} diff --git a/src/components/common/DetailsSummary.tsx b/src/components/common/DetailsSummary.tsx new file mode 100644 index 0000000..c1f0b51 --- /dev/null +++ b/src/components/common/DetailsSummary.tsx @@ -0,0 +1,18 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import * as Types from "../../types"; +import {BaseElement} from "../BaseElement"; +import {DetailsProps} from "./Details"; +import mergeClassNames from "classnames" + + +export interface DetailsSummaryProps extends Types.BluelibHTMLProps {} + + +export function DetailsSummary({...props}: DetailsSummaryProps): JSX.Element { + props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "details-summary") + + return ( + + ) +}