Merge pull request #23 from sillsdev/additional_component_slot_story

add prop for an additional component on the right side, storybook (#23)
sillsdev · Oct 18, 2024 · 41c7587 · 41c7587
2 parents 3c1ce1a + 9ac9e0e
commit 41c7587
Show file tree

Hide file tree

Showing 7 changed files with 489 additions and 89 deletions.
diff --git a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx
@@ -50,6 +50,7 @@ export const LanguageChooser: React.FunctionComponent<{
   ) => ILanguage[];
   initialState: IOrthography;
   onClose: (languageSelection: IOrthography | undefined) => void;
+  rightPanelComponent?: React.ReactNode;
 }> = (props) => {
   const lp: ILanguageChooser = useLanguageChooser(props.searchResultModifier);
 
@@ -329,95 +330,100 @@ export const LanguageChooser: React.FunctionComponent<{
               flex-shrink: 0;
               display: flex;
               flex-direction: column;
-              justify-content: flex-end;
+              justify-content: space-between;
               background-color: white;
               padding: 10px 15px 10px 20px;
             `}
           >
-            {lp.selectedLanguage && (
-              <div id="right-pane-language-details=section">
-                <FormFieldLabel
-                  htmlFor="language-name-bar"
-                  label="Display this language this way"
-                />
-                <OutlinedInput
-                  type="text"
-                  inputProps={{
-                    spellCheck: false,
-                  }}
+            <div id="right-panel-component-container">
+              {props.rightPanelComponent}
+            </div>
+            <div id="right-pane-language-chooser-section">
+              {lp.selectedLanguage && (
+                <div id="right-pane-language-details=section">
+                  <FormFieldLabel
+                    htmlFor="language-name-bar"
+                    label="Display this language this way"
+                  />
+                  <OutlinedInput
+                    type="text"
+                    inputProps={{
+                      spellCheck: false,
+                    }}
+                    css={css`
+                      background-color: white;
+                      margin-right: 16px;
+                      margin-bottom: 10px;
+                      font-size: 1.625rem; // 26px
+                      font-weight: 700;
+                    `}
+                    id="language-name-bar"
+                    size="small"
+                    fullWidth
+                    value={lp.customizableLanguageDetails.displayName}
+                    onChange={(e) => {
+                      lp.saveLanguageDetails(
+                        {
+                          ...lp.customizableLanguageDetails,
+                          displayName: e.target.value,
+                        },
+                        lp.selectedScript
+                      );
+                    }}
+                  />
+                  <Typography
+                    variant="body2"
+                    css={css`
+                      color: ${COLORS.greys[3]};
+                    `}
+                  >
+                    {currentTagPreview}
+                  </Typography>
+                </div>
+              )}
+
+              <div
+                id="buttons-container"
+                css={css`
+                  width: 100%;
+                  display: flex;
+                  justify-content: flex-end;
+                  padding-top: 15px;
+                  padding-bottom: 5px;
+                `}
+              >
+                <Button
                   css={css`
-                    background-color: white;
-                    margin-right: 16px;
-                    margin-bottom: 10px;
-                    font-size: 1.625rem; // 26px
-                    font-weight: 700;
+                    margin-left: auto;
+                    margin-right: 10px;
+                    min-width: 100px;
                   `}
-                  id="language-name-bar"
-                  size="small"
-                  fullWidth
-                  value={lp.customizableLanguageDetails.displayName}
-                  onChange={(e) => {
-                    lp.saveLanguageDetails(
-                      {
-                        ...lp.customizableLanguageDetails,
-                        displayName: e.target.value,
-                      },
-                      lp.selectedScript
-                    );
-                  }}
-                />
-                <Typography
-                  variant="body2"
+                  variant="contained"
+                  color="primary"
+                  disabled={!lp.isReadyToSubmit}
+                  onClick={() =>
+                    props.onClose(
+                      deepStripDemarcation({
+                        language: lp.selectedLanguage,
+                        script: lp.selectedScript,
+                        customDetails: lp.customizableLanguageDetails,
+                      }) as IOrthography
+                    )
+                  }
+                >
+                  OK
+                </Button>
+                <Button
                   css={css`
-                    color: ${COLORS.greys[3]};
+                    min-width: 100px;
                   `}
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => props.onClose(undefined)}
                 >
-                  {currentTagPreview}
-                </Typography>
+                  Cancel
+                </Button>
               </div>
-            )}
-
-            <div
-              id="buttons-container"
-              css={css`
-                width: 100%;
-                display: flex;
-                justify-content: flex-end;
-                padding-top: 15px;
-                padding-bottom: 5px;
-              `}
-            >
-              <Button
-                css={css`
-                  margin-left: auto;
-                  margin-right: 10px;
-                  min-width: 100px;
-                `}
-                variant="contained"
-                color="primary"
-                disabled={!lp.isReadyToSubmit}
-                onClick={() =>
-                  props.onClose(
-                    deepStripDemarcation({
-                      language: lp.selectedLanguage,
-                      script: lp.selectedScript,
-                      customDetails: lp.customizableLanguageDetails,
-                    }) as IOrthography
-                  )
-                }
-              >
-                OK
-              </Button>
-              <Button
-                css={css`
-                  min-width: 100px;
-                `}
-                variant="outlined"
-                color="primary"
-                onClick={() => props.onClose(undefined)}
-              >
-                Cancel
-              </Button>
             </div>
           </div>
         </div>

diff --git a/...ge-chooser-react-mui/src/Demo.stories.tsx → ...eact-mui/src/demos/DialogDemo.stories.tsx b/...ge-chooser-react-mui/src/Demo.stories.tsx → ...eact-mui/src/demos/DialogDemo.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import Demo from "./Demo";
+import DialogDemo from "./DialogDemo";
 
-const meta: Meta<typeof Demo> = {
-  component: Demo,
+const meta: Meta<typeof DialogDemo> = {
+  component: DialogDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof Demo>;
+type Story = StoryObj<typeof DialogDemo>;
 
 export const Primary: Story = {
   args: {
@@ -20,6 +20,13 @@ export const ReopenWithLanguageInformation: Story = {
   },
 };
 
+export const AdditionalRightPanelComponent: Story = {
+  args: {
+    alreadyFilled: false,
+    demoRightPanelComponent: true,
+  },
+};
+
 export const InASmallDialog: Story = {
   args: {
     alreadyFilled: false,

diff --git a/...t/language-chooser-react-mui/src/Demo.tsx → ...hooser-react-mui/src/demos/DialogDemo.tsx b/...t/language-chooser-react-mui/src/Demo.tsx → ...hooser-react-mui/src/demos/DialogDemo.tsx
@@ -7,12 +7,14 @@ import {
 } from "@ethnolib/find-language";
 import { Button, Card, Dialog, Typography } from "@mui/material";
 import { IOrthography } from "@ethnolib/language-chooser-react-hook";
-import "./styles.css";
-import { LanguageChooser } from "./LanguageChooser";
+import "../styles.css";
+import { LanguageChooser } from "../LanguageChooser";
 import React from "react";
+import { DummyRightPanelComponent } from "./DummyRightPanelComponent";
 
-export const Demo: React.FunctionComponent<{
+export const DialogDemo: React.FunctionComponent<{
   alreadyFilled?: boolean;
+  demoRightPanelComponent?: boolean;
   dialogHeight?: string;
   dialogWidth?: string;
 }> = (props) => {
@@ -187,11 +189,16 @@ export const Demo: React.FunctionComponent<{
             searchResultModifier={defaultSearchResultModifier}
             initialState={selectedValue}
             onClose={handleClose}
+            rightPanelComponent={
+              props.demoRightPanelComponent ? (
+                <DummyRightPanelComponent />
+              ) : undefined
+            }
           />
         </Dialog>
       </div>
     </div>
   );
 };
 
-export default Demo;
+export default DialogDemo;
diff --git a/.../language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx b/.../language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx
@@ -0,0 +1,84 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { OptionCard } from "../OptionCard";
+import { Typography } from "@mui/material";
+
+// Just a quick dummy to demonstrate the right panel slot
+export const DummyRightPanelComponent: React.FunctionComponent<{}> = () => {
+  const darkColor = "#800303";
+  const lightColor = "#e3dada";
+  return (
+    <div
+      css={css`
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        color: ${darkColor};
+        padding: 15px;
+      `}
+    >
+      <Typography>
+        Space here to add another component. For example, a font picker.
+      </Typography>
+      <Typography variant="h1">Font:</Typography>
+      <OptionCard
+        isSelected={false}
+        backgroundColorWhenSelected={lightColor}
+        backgroundColorWhenNotSelected={"#FFFFFF"}
+        css={css`
+          color: ${darkColor};
+          border: 1px solid ${darkColor};
+        `}
+      >
+        <div
+          css={css`
+            font-family: "Roboto Mono", monospace;
+            font-size: 1.25rem;
+            font-weight: 700;
+          `}
+        >
+          Roboto Mono
+        </div>
+      </OptionCard>
+      <OptionCard
+        isSelected={true}
+        backgroundColorWhenSelected={lightColor}
+        backgroundColorWhenNotSelected={"#FFFFFF"}
+        css={css`
+          color: ${darkColor};
+          border: 1px solid ${darkColor};
+        `}
+      >
+        <div
+          css={css`
+            font-family: serif;
+            font-size: 1.25rem;
+            font-weight: 700;
+          `}
+        >
+          Serif
+        </div>
+      </OptionCard>
+      <OptionCard
+        isSelected={false}
+        backgroundColorWhenSelected={lightColor}
+        backgroundColorWhenNotSelected={"#FFFFFF"}
+        css={css`
+          color: ${darkColor};
+          border: 1px solid ${darkColor};
+        `}
+      >
+        <div
+          css={css`
+            font-family: sans-serif;
+            font-size: 1.25rem;
+            font-weight: 700;
+          `}
+        >
+          Sans-serif
+        </div>
+      </OptionCard>
+    </div>
+  );
+};
diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/PageDemo.stories.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/PageDemo.stories.tsx
@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PageDemo } from "./PageDemo";
+
+const meta: Meta<typeof PageDemo> = {
+  component: PageDemo,
+};
+
+export default meta;
+type Story = StoryObj<typeof PageDemo>;
+
+export const Primary: Story = {};