From 6e7cd6baf632968bbd55b6fb4abedb603c80f81d Mon Sep 17 00:00:00 2001 From: Dale Pidlisny Date: Wed, 24 Apr 2024 15:12:30 -0600 Subject: [PATCH 1/5] feat(accordion): Initial commit of base unstyled build --- .../src/registry-index.ts | 9 ++ .../accordion/accordion.module.scss | 85 ++++++++++++ .../accordion/accordion.stories.tsx | 14 ++ .../src/components/accordion/accordion.tsx | 123 ++++++++++++++++++ .../accordion/component/AccordionItem.tsx | 52 ++++++++ .../src/components/accordion/index.tsx | 2 + .../components/accordion/readme.stories.mdx | 25 ++++ .../src/components/index.tsx | 1 + 8 files changed, 311 insertions(+) create mode 100644 packages/wethegit-components/src/components/accordion/accordion.module.scss create mode 100644 packages/wethegit-components/src/components/accordion/accordion.stories.tsx create mode 100644 packages/wethegit-components/src/components/accordion/accordion.tsx create mode 100644 packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx create mode 100644 packages/wethegit-components/src/components/accordion/index.tsx create mode 100644 packages/wethegit-components/src/components/accordion/readme.stories.mdx diff --git a/packages/wethegit-components-cli/src/registry-index.ts b/packages/wethegit-components-cli/src/registry-index.ts index 79c2e9bd..b420fb57 100644 --- a/packages/wethegit-components-cli/src/registry-index.ts +++ b/packages/wethegit-components-cli/src/registry-index.ts @@ -145,6 +145,14 @@ const ICON: Registry = { "https://wethegit.github.io/component-library/?path=/docs/components-icon-readme--overview", } +const ACCORDION: Registry = { + name: "Accordion", + category: "component", + localDependencies: [ICON, TEXT], + docsUrl: + "https://wethegit.github.io/component-library/?path=/docs/components-accordion-readme--overview", +} + const MODAL: Registry = { name: "modal", category: "component", @@ -189,6 +197,7 @@ const BACK_TO_TOP: Registry = { /* INDEX */ export const REGISTRY_INDEX: RegistryIndex = { + [ACCORDION.name]: ACCORDION, [BACK_TO_TOP.name]: BACK_TO_TOP, [BREAKPOINT_SNIPE.name]: BREAKPOINT_SNIPE, [FLEX.name]: FLEX, diff --git a/packages/wethegit-components/src/components/accordion/accordion.module.scss b/packages/wethegit-components/src/components/accordion/accordion.module.scss new file mode 100644 index 00000000..bafb16b8 --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/accordion.module.scss @@ -0,0 +1,85 @@ +.accordion { + margin: 0; +} + +a, +a:hover, +a:focus { + outline: none; + text-decoration: none; + transition: 0.5s; +} + +.accordionGroup { + background-color: #fff; +} + +.accordionIcon { + color: #475f7b; + font-size: 12px; + position: relative; + top: 2px; + transition: 0.35s; +} + +.accordionToggle { + align-items: center; + background-color: #ebedf0; + cursor: pointer; + display: flex; + justify-content: space-between; + padding-inline: 1rem; + transition: 0.3s; + + &.active { + background-color: #5a8dee; + + .accordionIcon { + color: #fff; + transform: rotate(180deg); + } + } +} + +.accordionCard { + border: 1px solid #ddd; +} + +.accordionBody { + color: #475f7b; + flex: 1 1 auto; + min-height: 1px; + padding: 1rem; + + p { + color: #727e8c; + font-size: 14px; + font-weight: 400; + line-height: 24px; + margin-bottom: 0; + } +} + +.accordionTitle { + color: #475f7b; + font-size: 14px; + font-weight: 500; + line-height: 0; + transition: 0.3s; +} + +.accordionToggle.active .accordionTitle { + color: #fff; +} + +.collapse { + height: 0; + overflow: hidden; + position: relative; + transition: height 0.35s ease; + + &.show { + border: 1px solid blue; + height: auto; + } +} diff --git a/packages/wethegit-components/src/components/accordion/accordion.stories.tsx b/packages/wethegit-components/src/components/accordion/accordion.stories.tsx new file mode 100644 index 00000000..62787858 --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/accordion.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Accordion } from "." + +const meta: Meta = { + title: "components/accordion", + component: Accordion, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = {} diff --git a/packages/wethegit-components/src/components/accordion/accordion.tsx b/packages/wethegit-components/src/components/accordion/accordion.tsx new file mode 100644 index 00000000..f5972a00 --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/accordion.tsx @@ -0,0 +1,123 @@ +import { useState } from "react" + +import styles from "./accordion.module.scss" +import AccordionItem from "./component/AccordionItem" + +export interface AccordionProps + extends Omit, "aria-label"> { + /** + * Mandatory `aria-label` attribute. + */ + "aria-label": string + /** + * A function that toggles the accordion. + */ + toggle: () => void + /** + * The accordion class name. + */ + className?: string +} + +const cards = [ + { + id: 1, + header: "Jean-Luc Picard", + text: `Jean-Luc Picard is a fictional character in the Star Trek franchise, most often seen as the captain of the Federation starship USS Enterprise (NCC-1701-D). Played by Patrick Stewart, Picard has appeared in the television series Star Trek: The Next Generation (TNG) and the premiere episode of Star Trek: Deep Space Nine, as well as the feature films Star Trek Generations (1994), Star Trek: First Contact (1996), Star Trek: Insurrection (1998), and Star Trek: Nemesis (2002). He is also featured as the central character in the show Star Trek: Picard (2020–2023).`, + }, + { + id: 2, + header: "William Riker", + text: `William Thomas "Will" Riker is a fictional character in the Star Trek universe appearing primarily as a main character in Star Trek: The Next Generation, portrayed by Jonathan Frakes. Throughout the series and its accompanying films, he is the Enterprise's first officer, and briefly captain, until he accepts command of the USS Titan at the end of Star Trek: Nemesis. He is the husband of Deanna Troi.`, + }, + { + id: 3, + header: "Data", + text: `Data was found by Starfleet in 2338. He was the sole survivor on Omicron Theta in the rubble of a colony left after an attack from the Crystalline Entity. He is a synthetic life form with artificial intelligence, designed and built by Doctor Noonien Soong in his own likeness (likewise portrayed by Spiner). Data is a self-aware, sapient, sentient and anatomically fully functional male android who serves as the second officer and chief operations officer aboard the Federation starship USS Enterprise-D and later the USS Enterprise-E.`, + }, + { + id: 4, + header: "Worf", + text: `

Worf, son of Mogh is a fictional character in the Star Trek franchise, portrayed by actor Michael Dorn. He appears in the television series Star Trek: The Next Generation (TNG), seasons four through seven of Star Trek: Deep Space Nine (DS9) and the third and final season of Star Trek: Picard, as well as the feature films Star Trek Generations (1994), Star Trek: First Contact (1996), Star Trek: Insurrection (1998), and Star Trek: Nemesis (2002).

+ +

Worf has appeared in more Star Trek franchise episodes than any other character. Worf is the best character in the Star Trek universe.

+ +

@@@@%#%@@@@@@@@@@@@@@@@@@@@@@@@%#*****%#%###*%@@@@@@@@@@@@@@@@@@@@@@@@@ + @%%@@@@@@@@@@@@@@@@@@%*#%%#**=+=**#*#%%%%%%%%***#%@%@@@@@@@@@@@@@@@@@@@ + %#**%@@@@@@@@@@@@@@@@@@%**==+*#%#****%%@@@@@@@@@%%#%%%@@@@@@@@@@@@@@@@@ + @@@%@@@@@@@@@@@@@@@@%*===+#%%%%#%###%%##%%%@@@@@@@@%%%##%@@@@@@@@@@@@@@ + @@%%@@@@@@@@@@@@@@%+===+#%@@%**%%%****#####***#%%@@@@@@@%*#@@@@@@@@@@@@ + @@@@@@@@@@@@@@@@%*-:=*##%%**=**#%%#***####****##**%%@@@@@@%**%%@@@@%@@@ + @@@@@@@@@@@%@%#*+:-+***=-+*==**#####*****##%#**######%@@%%%%%*+*@@%**@@ + @@@@@@@@@@@@@%+=***=+===**==+***###***#****###**###%%%%@@%@@%%=-*@@@@@@ + @@@@@@@@@@@@%%=-+=-=::==*+===#%***##*****###########%%%%@@@%@@%=:=%@@@@ + @@@@@@@@@@@@%==*=:-:..:-+====*##=*=********#########%%%%%@@@@%%*-=%@@@@ + @@@@@@@@@@%%*=-=-=:..:::==+.=****=*********##***###%#%%%%@@@@@%%=:#@%@@ + @@@@@@@@@@@%*==-.::.:++++**++=****==+*****#****###%%%%%%%%%@@@@%=.=#@@@ + @@@@@@@@%@@*=+*::=-..-:****=+=****++*******#****#%%%%%%#%@@@@@@%*::=#@@ + @@@@@@@#@@*:*#%-:+:..:=***=-*=****++************#%%%%##%%@@%%@@@%*:++#@ + @@@@@@@%@#=+*%#-.=:..:+**=*=**+*=**+***********#%@%%%#%%%%%@@@@@@%+--:% + @@@@@@@@%==%%%%=.--.:-=**+*++#*++==+**********#%%%%%##%%%@%%@@@@%%#*::* + @@@@@@@@#-*%%%%*:=:.:=*******+**-:===+*******#%%%%%%%%%%%%%%%@@@@%%+=-= + @@@@@@@@+.=#%##*-=::=***++*+*+=**==+++++**####%%%%%%%%%%%%%%%@@@@@%*==* + @@@@@@@%*:-*###*:===+*****+*#*==+*+==+**######%%@@%%%%%%%%%%%%@@%%%%*:+ + @@@@@@@%*==*#*%#=*****+******%*++***###%%%%%**#%%@%%%%%%%%%%%@@@@%%%%++ + %@@%%@@%-:=##%%%*###*###**#*+*%%%%%%%*-=%**%%%#%%%%%%%%@%%%%%@@@@@%%%** + @@@@@@@%-:=*%%%%%#%#%*:*%%*:=*#%%@%*====*******###%%%%%%%**%%%%@@@%%%** + @@@@@@%%=:=*#%%#%%-:.:+*+==-+*#%%%##*=-===+**##*#%%%%%%%#####%%%%%%##*# + @@@@@@%*==*#%%%#%%-..-+++*-:+*#%%%#****++++**####%%%%@@%#*#*#%%@%%%%%** + @@@@@@%*==++##*#%%-.:+**=:.=+**#%%%#*+*******###%%%%%@@%%**#%%%%%#%%#*# + @@@@@@%*-==*+##%%#=::..:=.:=*+*%#*#%*=++****####%%%%%@@%%####%%%%**%*** + @@@@%%%=--===*#%#%+...:+**+*#%@@%%%%*+=+***#####%%%%@@@@%##%###%%%##*+# + @@@@@%#-:===*##%*##...:+*:::+**+***++******####%%%%%@@@@%%#%%*%%%%%**=* + @@@@@@*:-==++*#*#%%+..::-+===++=+*###***#####%%%%%%%@@@@%#%*%#%%#*%**** + @@@@@@*====*****%%%#:.:+**=+===++*#%%%%%#####%%%#%%%@@@@%%%%#%%%#*#**+* + @@@@%%#=+=++*#**#%%%=:=*###*******#%%%%%%%%%#%###%%@@@@@@@%%%%%%%##%+*% + @@@@@#%+==+**%#%#%%%*=*#*++=====+***###**%%%%%##%%@@%@@@@@%%%%%#%%*%**% + %%@@%#**=-++*%#%%%%%+*-==+*##*********#**##%@%%%%@@%@@@@@@@%%#%%%%%#%*% + #*@@%***=+#*#%%%%%%#*%==+*************#%%#%%%%%@@@%%@@@@@@@%%%@%###%%%% + @@@@@%%#+#%%%%%%%%%%#%%=*****#%%%%##%%%%%#%%%@@@@%@@@@@@@@@@%%@%##%%@%% + @@%%@@%%%*%#%%%%%%%%%%#=*#*+**#%%%%%%%%#%%%%%@@@@%%@@@@@@@@%%%%%#%%#*#% + @@@@@@@@%%#%#%%%#%@@%#*=++=*#%%%%%%%%%#%%%@%%@@@@@@@@@@@%%%%@@@%@@@@%%% + @@@@@@@@%%%%%@@%%#%%@%*=+=*#%%%%%%%%%%%%%@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@@@%@@@@@@@@@%###%%*=**%%%%@%%@@%@%@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@@@@@@@@@@@@@@%*=*++=+***%%%%%@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@@@@@@@@@%=*===*+=+*+*%##***%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@@@@@@%*=*=-*=++=-==**%=*%*%*##%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@@@@*=-=-::=*+**===+*%**-%%#%*%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@@*=+=+-:*=**#***+=*#@#*#%%%*#%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ + @@@@@*:-=-:+=::-*++=:=**%@%####%#%@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%@ + @@@%#=-::=:==-=+***++=+*@@%##%###%%%%%%%%%%%%%%%%%#***++++++++=+++++++* + @%#**-==+==-:.+%+*-==-+#@@%%%*=-===:::-=-=======---:=========++==++===* + %***+-=*::==-.*#+=*==+*#*++=:.:==---==========::::-=====+=+===========* + %***--=:=.=:-+*#*++=++*+===:::-=====-:=====-:::-=====++=====+========+* + *:...:--:-==+*++*=++==-=+===:-====-::====:::::======++=====+=========+* + -....--==++=======-====*=========-:::--:::::=====++===+=============+=* + -....:+:::-==+====*+==**+========:::::::::-=====:*+=+===+===========++* + =....=:===-.-====+-==+**++==+++==:::::::-=====-:.+*================+++%

`, + }, +] + +export function Accordion({}: AccordionProps) { + const [active, setActive] = useState(null) + + const handleToggle = (index: number) => { + console.log("set") + active === index ? setActive(null) : setActive(index) + } + + return ( +
+ {cards.map((card, index) => { + return ( + + ) + })} +
+ ) +} diff --git a/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx b/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx new file mode 100644 index 00000000..52f154fe --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx @@ -0,0 +1,52 @@ +import React, { useRef } from "react" + +import { Icon, Text } from "@local/components" + +import styles from "../accordion.module.scss" +interface Card { + header: string + id: number + text: string +} + +interface Props { + handleToggle: (id: number) => void + active: number | null + card: Card + // className: string +} + +const AccordionItem: React.FC = ({ handleToggle, active, card }) => { + const contentEl = useRef(null) + const { header, id, text } = card + + return ( +
+
handleToggle(id)} + > +
{header}
+ + +
+ +
+ + {text} + + {/* */} +
+
+ ) +} + +export default AccordionItem diff --git a/packages/wethegit-components/src/components/accordion/index.tsx b/packages/wethegit-components/src/components/accordion/index.tsx new file mode 100644 index 00000000..92c49e54 --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/index.tsx @@ -0,0 +1,2 @@ +export { Accordion } from "./accordion" +export type { AccordionProps } from "./accordion" diff --git a/packages/wethegit-components/src/components/accordion/readme.stories.mdx b/packages/wethegit-components/src/components/accordion/readme.stories.mdx new file mode 100644 index 00000000..d42cc676 --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/readme.stories.mdx @@ -0,0 +1,25 @@ +import { Meta } from "@storybook/blocks" + + + +# Accordion + +`` provides a componentized solution to adding an accordion to your project. + +## Install + +```bash +npx @wethegit/components-cli add accordion +``` + +Then add the required styles to your global stylesheet: + +```css filename="global.scss" +@import "/components/accordion/styles/accordion"; +``` + +### Customize + +To customize the accordion styles, you can override the variables inside the `accordion.scss` file. + +For more information about the options, check the [accordion styles docs](/docs/components-accordion-styles-accordion--overview). diff --git a/packages/wethegit-components/src/components/index.tsx b/packages/wethegit-components/src/components/index.tsx index 1634f347..e0b27e5e 100644 --- a/packages/wethegit-components/src/components/index.tsx +++ b/packages/wethegit-components/src/components/index.tsx @@ -1,3 +1,4 @@ +export * from "./accordion" export * from "./back-to-top" export * from "./breakpoint-snipe" export * from "./flex" From 0c181ed550ff4740919c24e175957b00529b74d5 Mon Sep 17 00:00:00 2001 From: Dale Pidlisny Date: Mon, 29 Apr 2024 18:18:50 -0600 Subject: [PATCH 2/5] update(accordion): Add aria tags, accessibility features, icon, renamed vars and classes --- .../accordion/accordion.module.scss | 129 +++++++++--------- .../src/components/accordion/accordion.tsx | 99 ++------------ .../accordion/component/AccordionItem.tsx | 94 +++++++++---- .../src/components/accordion/content.ts | 33 +++++ 4 files changed, 170 insertions(+), 185 deletions(-) create mode 100644 packages/wethegit-components/src/components/accordion/content.ts diff --git a/packages/wethegit-components/src/components/accordion/accordion.module.scss b/packages/wethegit-components/src/components/accordion/accordion.module.scss index bafb16b8..b48de8ce 100644 --- a/packages/wethegit-components/src/components/accordion/accordion.module.scss +++ b/packages/wethegit-components/src/components/accordion/accordion.module.scss @@ -1,85 +1,78 @@ -.accordion { - margin: 0; -} - -a, -a:hover, -a:focus { - outline: none; - text-decoration: none; - transition: 0.5s; -} - -.accordionGroup { - background-color: #fff; -} - -.accordionIcon { - color: #475f7b; - font-size: 12px; - position: relative; - top: 2px; - transition: 0.35s; -} - -.accordionToggle { - align-items: center; +.accordionPanel { background-color: #ebedf0; - cursor: pointer; - display: flex; - justify-content: space-between; - padding-inline: 1rem; + border: 1px solid #ddd; transition: 0.3s; - &.active { - background-color: #5a8dee; + h3 { + margin: 0; + } + + button { + align-items: stretch; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + padding: 0.5rem 1rem; + width: 100%; + + .accordionTitle { + color: #475f7b; + font-size: 14px; + font-weight: 500; + margin: 0; + transition: 0.3s; + } .accordionIcon { - color: #fff; - transform: rotate(180deg); + color: transparent; + transition: 0.35s; } - } -} -.accordionCard { - border: 1px solid #ddd; -} + &.active { + background-color: #5a8dee; + + .accordionIcon { + color: #fff; + transform: rotate(180deg); + } -.accordionBody { - color: #475f7b; - flex: 1 1 auto; - min-height: 1px; - padding: 1rem; + .accordionTitle { + color: #fff; + } + } + } - p { - color: #727e8c; + .accordionBody { + background-color: #fff; + flex: 1 1 auto; font-size: 14px; font-weight: 400; line-height: 24px; - margin-bottom: 0; - } -} -.accordionTitle { - color: #475f7b; - font-size: 14px; - font-weight: 500; - line-height: 0; - transition: 0.3s; -} - -.accordionToggle.active .accordionTitle { - color: #fff; -} + p { + color: #475f7b; + margin: 0; + padding: 1rem; -.collapse { - height: 0; - overflow: hidden; - position: relative; - transition: height 0.35s ease; + + p { + padding-top: 0; + } + } - &.show { - border: 1px solid blue; - height: auto; + &.collapse { + height: 0; + overflow: hidden; + position: relative; + transition: height 0.35s ease; + } } } + +a, +a:hover, +a:focus { + outline: none; + text-decoration: none; + transition: 0.5s; +} diff --git a/packages/wethegit-components/src/components/accordion/accordion.tsx b/packages/wethegit-components/src/components/accordion/accordion.tsx index f5972a00..669b85d8 100644 --- a/packages/wethegit-components/src/components/accordion/accordion.tsx +++ b/packages/wethegit-components/src/components/accordion/accordion.tsx @@ -1,120 +1,37 @@ import { useState } from "react" import styles from "./accordion.module.scss" -import AccordionItem from "./component/AccordionItem" +import AccordionItem, { CardsData } from "./component/AccordionItem" +import cards from "./content.js" export interface AccordionProps extends Omit, "aria-label"> { - /** - * Mandatory `aria-label` attribute. - */ "aria-label": string - /** - * A function that toggles the accordion. - */ toggle: () => void - /** - * The accordion class name. - */ className?: string } -const cards = [ - { - id: 1, - header: "Jean-Luc Picard", - text: `Jean-Luc Picard is a fictional character in the Star Trek franchise, most often seen as the captain of the Federation starship USS Enterprise (NCC-1701-D). Played by Patrick Stewart, Picard has appeared in the television series Star Trek: The Next Generation (TNG) and the premiere episode of Star Trek: Deep Space Nine, as well as the feature films Star Trek Generations (1994), Star Trek: First Contact (1996), Star Trek: Insurrection (1998), and Star Trek: Nemesis (2002). He is also featured as the central character in the show Star Trek: Picard (2020–2023).`, - }, - { - id: 2, - header: "William Riker", - text: `William Thomas "Will" Riker is a fictional character in the Star Trek universe appearing primarily as a main character in Star Trek: The Next Generation, portrayed by Jonathan Frakes. Throughout the series and its accompanying films, he is the Enterprise's first officer, and briefly captain, until he accepts command of the USS Titan at the end of Star Trek: Nemesis. He is the husband of Deanna Troi.`, - }, - { - id: 3, - header: "Data", - text: `Data was found by Starfleet in 2338. He was the sole survivor on Omicron Theta in the rubble of a colony left after an attack from the Crystalline Entity. He is a synthetic life form with artificial intelligence, designed and built by Doctor Noonien Soong in his own likeness (likewise portrayed by Spiner). Data is a self-aware, sapient, sentient and anatomically fully functional male android who serves as the second officer and chief operations officer aboard the Federation starship USS Enterprise-D and later the USS Enterprise-E.`, - }, - { - id: 4, - header: "Worf", - text: `

Worf, son of Mogh is a fictional character in the Star Trek franchise, portrayed by actor Michael Dorn. He appears in the television series Star Trek: The Next Generation (TNG), seasons four through seven of Star Trek: Deep Space Nine (DS9) and the third and final season of Star Trek: Picard, as well as the feature films Star Trek Generations (1994), Star Trek: First Contact (1996), Star Trek: Insurrection (1998), and Star Trek: Nemesis (2002).

- -

Worf has appeared in more Star Trek franchise episodes than any other character. Worf is the best character in the Star Trek universe.

- -

@@@@%#%@@@@@@@@@@@@@@@@@@@@@@@@%#*****%#%###*%@@@@@@@@@@@@@@@@@@@@@@@@@ - @%%@@@@@@@@@@@@@@@@@@%*#%%#**=+=**#*#%%%%%%%%***#%@%@@@@@@@@@@@@@@@@@@@ - %#**%@@@@@@@@@@@@@@@@@@%**==+*#%#****%%@@@@@@@@@%%#%%%@@@@@@@@@@@@@@@@@ - @@@%@@@@@@@@@@@@@@@@%*===+#%%%%#%###%%##%%%@@@@@@@@%%%##%@@@@@@@@@@@@@@ - @@%%@@@@@@@@@@@@@@%+===+#%@@%**%%%****#####***#%%@@@@@@@%*#@@@@@@@@@@@@ - @@@@@@@@@@@@@@@@%*-:=*##%%**=**#%%#***####****##**%%@@@@@@%**%%@@@@%@@@ - @@@@@@@@@@@%@%#*+:-+***=-+*==**#####*****##%#**######%@@%%%%%*+*@@%**@@ - @@@@@@@@@@@@@%+=***=+===**==+***###***#****###**###%%%%@@%@@%%=-*@@@@@@ - @@@@@@@@@@@@%%=-+=-=::==*+===#%***##*****###########%%%%@@@%@@%=:=%@@@@ - @@@@@@@@@@@@%==*=:-:..:-+====*##=*=********#########%%%%%@@@@%%*-=%@@@@ - @@@@@@@@@@%%*=-=-=:..:::==+.=****=*********##***###%#%%%%@@@@@%%=:#@%@@ - @@@@@@@@@@@%*==-.::.:++++**++=****==+*****#****###%%%%%%%%%@@@@%=.=#@@@ - @@@@@@@@%@@*=+*::=-..-:****=+=****++*******#****#%%%%%%#%@@@@@@%*::=#@@ - @@@@@@@#@@*:*#%-:+:..:=***=-*=****++************#%%%%##%%@@%%@@@%*:++#@ - @@@@@@@%@#=+*%#-.=:..:+**=*=**+*=**+***********#%@%%%#%%%%%@@@@@@%+--:% - @@@@@@@@%==%%%%=.--.:-=**+*++#*++==+**********#%%%%%##%%%@%%@@@@%%#*::* - @@@@@@@@#-*%%%%*:=:.:=*******+**-:===+*******#%%%%%%%%%%%%%%%@@@@%%+=-= - @@@@@@@@+.=#%##*-=::=***++*+*+=**==+++++**####%%%%%%%%%%%%%%%@@@@@%*==* - @@@@@@@%*:-*###*:===+*****+*#*==+*+==+**######%%@@%%%%%%%%%%%%@@%%%%*:+ - @@@@@@@%*==*#*%#=*****+******%*++***###%%%%%**#%%@%%%%%%%%%%%@@@@%%%%++ - %@@%%@@%-:=##%%%*###*###**#*+*%%%%%%%*-=%**%%%#%%%%%%%%@%%%%%@@@@@%%%** - @@@@@@@%-:=*%%%%%#%#%*:*%%*:=*#%%@%*====*******###%%%%%%%**%%%%@@@%%%** - @@@@@@%%=:=*#%%#%%-:.:+*+==-+*#%%%##*=-===+**##*#%%%%%%%#####%%%%%%##*# - @@@@@@%*==*#%%%#%%-..-+++*-:+*#%%%#****++++**####%%%%@@%#*#*#%%@%%%%%** - @@@@@@%*==++##*#%%-.:+**=:.=+**#%%%#*+*******###%%%%%@@%%**#%%%%%#%%#*# - @@@@@@%*-==*+##%%#=::..:=.:=*+*%#*#%*=++****####%%%%%@@%%####%%%%**%*** - @@@@%%%=--===*#%#%+...:+**+*#%@@%%%%*+=+***#####%%%%@@@@%##%###%%%##*+# - @@@@@%#-:===*##%*##...:+*:::+**+***++******####%%%%%@@@@%%#%%*%%%%%**=* - @@@@@@*:-==++*#*#%%+..::-+===++=+*###***#####%%%%%%%@@@@%#%*%#%%#*%**** - @@@@@@*====*****%%%#:.:+**=+===++*#%%%%%#####%%%#%%%@@@@%%%%#%%%#*#**+* - @@@@%%#=+=++*#**#%%%=:=*###*******#%%%%%%%%%#%###%%@@@@@@@%%%%%%%##%+*% - @@@@@#%+==+**%#%#%%%*=*#*++=====+***###**%%%%%##%%@@%@@@@@%%%%%#%%*%**% - %%@@%#**=-++*%#%%%%%+*-==+*##*********#**##%@%%%%@@%@@@@@@@%%#%%%%%#%*% - #*@@%***=+#*#%%%%%%#*%==+*************#%%#%%%%%@@@%%@@@@@@@%%%@%###%%%% - @@@@@%%#+#%%%%%%%%%%#%%=*****#%%%%##%%%%%#%%%@@@@%@@@@@@@@@@%%@%##%%@%% - @@%%@@%%%*%#%%%%%%%%%%#=*#*+**#%%%%%%%%#%%%%%@@@@%%@@@@@@@@%%%%%#%%#*#% - @@@@@@@@%%#%#%%%#%@@%#*=++=*#%%%%%%%%%#%%%@%%@@@@@@@@@@@%%%%@@@%@@@@%%% - @@@@@@@@%%%%%@@%%#%%@%*=+=*#%%%%%%%%%%%%%@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@@@%@@@@@@@@@%###%%*=**%%%%@%%@@%@%@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@@@@@@@@@@@@@@%*=*++=+***%%%%%@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@@@@@@@@@%=*===*+=+*+*%##***%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@@@@@@%*=*=-*=++=-==**%=*%*%*##%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@@@@*=-=-::=*+**===+*%**-%%#%*%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@@*=+=+-:*=**#***+=*#@#*#%%%*#%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ - @@@@@*:-=-:+=::-*++=:=**%@%####%#%@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%@ - @@@%#=-::=:==-=+***++=+*@@%##%###%%%%%%%%%%%%%%%%%#***++++++++=+++++++* - @%#**-==+==-:.+%+*-==-+#@@%%%*=-===:::-=-=======---:=========++==++===* - %***+-=*::==-.*#+=*==+*#*++=:.:==---==========::::-=====+=+===========* - %***--=:=.=:-+*#*++=++*+===:::-=====-:=====-:::-=====++=====+========+* - *:...:--:-==+*++*=++==-=+===:-====-::====:::::======++=====+=========+* - -....--==++=======-====*=========-:::--:::::=====++===+=============+=* - -....:+:::-==+====*+==**+========:::::::::-=====:*+=+===+===========++* - =....=:===-.-====+-==+**++==+++==:::::::-=====-:.+*================+++%

`, - }, -] - export function Accordion({}: AccordionProps) { const [active, setActive] = useState(null) + // Define your icon name here + const icon = "chevron" + const handleToggle = (index: number) => { - console.log("set") active === index ? setActive(null) : setActive(index) } return (
- {cards.map((card, index) => { + {cards.map((card: CardsData, index: number) => { return ( ) })} diff --git a/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx b/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx index 52f154fe..24339653 100644 --- a/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx +++ b/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx @@ -1,50 +1,92 @@ import React, { useRef } from "react" -import { Icon, Text } from "@local/components" +import { Icon, IconDefs, IconSymbol, Tag, Text } from "@local/components" + +const DEFAULT_TAG = "h3" as const + +export function GenericSection({ ...props }) { + const { as = DEFAULT_TAG, ...rest } = props + + return +} import styles from "../accordion.module.scss" -interface Card { - header: string - id: number - text: string + +export interface CardsData { + title: string + text: string | object } interface Props { - handleToggle: (id: number) => void + handleToggle: (index: number) => void active: number | null - card: Card - // className: string + card: CardsData + icon: string + index: number } -const AccordionItem: React.FC = ({ handleToggle, active, card }) => { +const AccordionItem: React.FC = ({ handleToggle, active, card, icon, index }) => { const contentEl = useRef(null) - const { header, id, text } = card + const { title, text } = card + const containsTags = /<[a-z][\s\S]*>/i.test(text) + const processedHtml = containsTags ? text : text + + if (!card) return null return ( -
-
handleToggle(id)} - > -
{header}
+
+ +
+ + + + + -
+ + + +
+ {typeof text === "string" && ( + + )} + + {typeof text === "object" && + Object.values(processedHtml).map((p, i) => ( + + ))} +
) } diff --git a/packages/wethegit-components/src/components/accordion/content.ts b/packages/wethegit-components/src/components/accordion/content.ts new file mode 100644 index 00000000..182d39a7 --- /dev/null +++ b/packages/wethegit-components/src/components/accordion/content.ts @@ -0,0 +1,33 @@ +const cards = [ + { + title: "Jean-Luc Picard", + text: "Jean-Luc Picard is a fictional character in the Star Trek franchise, most often seen as the captain of the Federation starship USS Enterprise (NCC-1701-D). Played by Patrick Stewart, Picard has appeared in the television series Star Trek: The Next Generation (TNG) and the premiere episode of Star Trek: Deep Space Nine, as well as the feature films Star Trek Generations (1994), Star Trek: First Contact (1996), Star Trek: Insurrection (1998), and Star Trek: Nemesis (2002). He is also featured as the central character in the show Star Trek: Picard (2020–2023).", + }, + { + title: "William Riker", + text: `William Thomas "Will" Riker is a fictional character in the Star Trek universe appearing primarily as a main character in Star Trek: The Next Generation, portrayed by Jonathan Frakes. Throughout the series and its accompanying films, he is the Enterprise's first officer, and briefly captain, until he accepts command of the USS Titan at the end of Star Trek: Nemesis. He is the husband of Deanna Troi.`, + }, + { + title: "Data", + text: `Data was found by Starfleet in 2338. He was the sole survivor on Omicron Theta in the rubble of a colony left after an attack from the Crystalline Entity. He is a synthetic life form with artificial intelligence, designed and built by Doctor Noonien Soong in his own likeness (likewise portrayed by Spiner). +

+ Data is a self-aware, sapient, sentient and anatomically fully functional male android who serves as the second officer and chief operations officer aboard the Federation starship USS Enterprise-D and later the USS Enterprise-E.`, + }, + { + title: "Worf", + text: { + paragraph1: `Worf, son of Mogh is a fictional character in the Star Trek franchise, portrayed by actor Michael Dorn. He appears in the television series Star Trek: The Next Generation (TNG), seasons four through seven of Star Trek: Deep Space Nine (DS9) and the third and final season of Star Trek: Picard, as well as the feature films. +
    +
  • Star Trek Generations (1994)
    • +
  • Star Trek: First Contact (1996)
    • +
  • Star Trek: Insurrection (1998)
    • +
  • Star Trek: Nemesis (2002)
    • +
`, + paragraph2: + "Worf has appeared in more Star Trek franchise episodes than any other character. Worf is the best character in the Star Trek universe.", + paragraph3: "Third paragraph", + }, + }, +] + +export default cards From c81fcf7b7671663da11c5e7d5f16f7f0240fb8bd Mon Sep 17 00:00:00 2001 From: Dale Pidlisny Date: Tue, 30 Apr 2024 12:52:52 -0600 Subject: [PATCH 3/5] update(accordion): Update conditional styles and clean up --- .../accordion/accordion.module.scss | 26 +++++++++++-------- .../accordion/component/AccordionItem.tsx | 19 +++++++------- .../src/components/accordion/content.ts | 4 +-- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/packages/wethegit-components/src/components/accordion/accordion.module.scss b/packages/wethegit-components/src/components/accordion/accordion.module.scss index b48de8ce..a8548b34 100644 --- a/packages/wethegit-components/src/components/accordion/accordion.module.scss +++ b/packages/wethegit-components/src/components/accordion/accordion.module.scss @@ -1,14 +1,18 @@ .accordionPanel { - background-color: #ebedf0; - border: 1px solid #ddd; + --light-grey: #ebedf0; + --grey: #475f7b; + --white: #fff; + + background-color: var(--white); + border: 1px solid var(--light-grey); transition: 0.3s; - h3 { + & * { margin: 0; } button { - align-items: stretch; + align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; @@ -17,7 +21,7 @@ width: 100%; .accordionTitle { - color: #475f7b; + color: var(--grey); font-size: 14px; font-weight: 500; margin: 0; @@ -26,32 +30,32 @@ .accordionIcon { color: transparent; + padding: 2px 0 0 2px; transition: 0.35s; } &.active { - background-color: #5a8dee; + background-color: var(--light-grey); .accordionIcon { - color: #fff; transform: rotate(180deg); + transform-origin: center; } .accordionTitle { - color: #fff; + color: var(--grey); } } } .accordionBody { - background-color: #fff; - flex: 1 1 auto; + background-color: var(--white); font-size: 14px; font-weight: 400; line-height: 24px; p { - color: #475f7b; + color: var(--grey); margin: 0; padding: 1rem; diff --git a/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx b/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx index 24339653..8370ad51 100644 --- a/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx +++ b/packages/wethegit-components/src/components/accordion/component/AccordionItem.tsx @@ -2,6 +2,8 @@ import React, { useRef } from "react" import { Icon, IconDefs, IconSymbol, Tag, Text } from "@local/components" +import styles from "../accordion.module.scss" + const DEFAULT_TAG = "h3" as const export function GenericSection({ ...props }) { @@ -10,8 +12,6 @@ export function GenericSection({ ...props }) { return } -import styles from "../accordion.module.scss" - export interface CardsData { title: string text: string | object @@ -28,20 +28,20 @@ interface Props { const AccordionItem: React.FC = ({ handleToggle, active, card, icon, index }) => { const contentEl = useRef(null) const { title, text } = card - const containsTags = /<[a-z][\s\S]*>/i.test(text) - const processedHtml = containsTags ? text : text if (!card) return null return ( -
+