From 2c7ddb695a901104de6a3fd3e2ba4ed5374ec9df Mon Sep 17 00:00:00 2001 From: Jared White Date: Thu, 18 Jul 2024 13:37:19 -0700 Subject: [PATCH] feat: add vertical tabs with sidebar layout (#91) --- src/navigation/Tabs.scss | 33 ++++++++++++- src/navigation/Tabs.tsx | 3 ++ src/navigation/__stories__/Tabs.docs.mdx | 5 +- src/navigation/__stories__/Tabs.stories.tsx | 55 +++++++++++++++++++++ 4 files changed, 93 insertions(+), 3 deletions(-) diff --git a/src/navigation/Tabs.scss b/src/navigation/Tabs.scss index 1ee29ba..cbd8f7c 100644 --- a/src/navigation/Tabs.scss +++ b/src/navigation/Tabs.scss @@ -19,6 +19,9 @@ --tab-active-indicator-color: var(--seeds-color-primary); --tab-panel-padding: var(--seeds-spacer-section); --tab-panel-background-color: var(--seeds-bg-color-surface); + --tab-panel-border-color: var(--tab-border-color); + --tab-panel-border-width: var(--tab-border-width); + --tab-vertical-sidebar-width: var(--seeds-s60); @custom-media --tab-collapse-breakpoint (--sm-only); } @@ -99,14 +102,14 @@ .tabs-panel { padding: var(--tab-panel-padding); background-color: var(--tab-panel-background-color); - border: var(--tab-border-width) solid var(--tab-border-color); + border: var(--tab-panel-border-width) solid var(--tab-panel-border-color); &:not(.is-active) { display: none; } } -@media (--tab-collapse-breakpoint) { +@mixin vertical-tabs() { .tabs-tablist { flex-direction: column; } @@ -136,8 +139,34 @@ box-shadow: inset calc(var(--tab-active-indicator-width) + var(--tab-border-width)) 0px 0px var(--tab-active-indicator-color); } + } +} + +.seeds-tabs.vertical-sidebar-layout { + @include vertical-tabs(); + + --tab-panel-padding: 0; + --tab-panel-border-width: 0; + + .tabs-panel { + margin-block-start: var(--seeds-spacer-label); + border-radius: var(--tab-border-radius); } + @media (--md-and-up) { + display: grid; + grid-template-columns: var(--tab-vertical-sidebar-width) auto; + gap: var(--seeds-spacer-section); + + .tabs-panel { + margin-block-start: 0; + } + } +} + +@media (--tab-collapse-breakpoint) { + @include vertical-tabs(); + .tabs-panel { margin-block-start: var(--seeds-spacer-label); } diff --git a/src/navigation/Tabs.tsx b/src/navigation/Tabs.tsx index 8d0b0b1..5d08a01 100644 --- a/src/navigation/Tabs.tsx +++ b/src/navigation/Tabs.tsx @@ -12,6 +12,8 @@ import { export interface TabsProps { children: React.ReactNode className?: string + /** If true, displays tabs and the selected tab panel side-by-side on larger displays */ + verticalSidebar?: boolean defaultFocus?: boolean defaultIndex?: number disabledTabClassName?: string @@ -27,6 +29,7 @@ export interface TabsProps { const Tabs = (props: TabsProps) => { const className = ["seeds-tabs"] if (props.className) className.push(props.className) + if (props.verticalSidebar) className.push("vertical-sidebar-layout") const focusTab = typeof props.focusTabOnClick !== "undefined" ? props.focusTabOnClick : false return diff --git a/src/navigation/__stories__/Tabs.docs.mdx b/src/navigation/__stories__/Tabs.docs.mdx index f91f21f..6cb0eda 100644 --- a/src/navigation/__stories__/Tabs.docs.mdx +++ b/src/navigation/__stories__/Tabs.docs.mdx @@ -30,7 +30,7 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx" | `--tab-font-weight` | Font weight | `--seeds-font-weight-semibold` | | `--tab-font-weight-sm` | Font weight on mobile screens | `--seeds-font-weight-regular` | | `--tab-background-color` | | `--seeds-bg-color-surface` | -| `--tab-label-color` | | `--seeds-text-color-light` | +| `--tab-label-color` | | `--seeds-text-color-light` | | `--tab-padding-inline` | Horizontal spacing within tab interior | `--seeds-s6` | | `--tab-padding-block` | Vertical spacing within tab interior | `--seeds-s4` | | `--tab-padding-inline-sm` | Horizontal spacing on mobile screens | `--seeds-s6` | @@ -43,4 +43,7 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx" | `--tab-active-indicator-color` | | `--seeds-color-primary` | | `--tab-panel-padding` | Spacing within the panel interior | `--seeds-spacer-section` | | `--tab-panel-background-color` | | `--seeds-bg-color-surface` | +| `--tab-panel-border-color` | | `--seeds-border-color` | +| `--tab-panel-border-width` | Tab border radius | `--seeds-border-1` | +| `--tab-vertical-sidebar-width` | Width of the sidebar in vertical layout for desktop | `--seeds-s60` | | `--tab-collapse-breakpoint` | Screen size breakpoint for vertical orientation | `--sm-only` | diff --git a/src/navigation/__stories__/Tabs.stories.tsx b/src/navigation/__stories__/Tabs.stories.tsx index e90c555..a0ef821 100644 --- a/src/navigation/__stories__/Tabs.stories.tsx +++ b/src/navigation/__stories__/Tabs.stories.tsx @@ -1,5 +1,7 @@ import React from "react" import Tabs from "../Tabs" +import Card from "../../blocks/Card" +import HeadingGroup from "../../text/HeadingGroup" import MDXDocs from "./Tabs.docs.mdx" @@ -95,3 +97,56 @@ export const SmallTabs = () => { ) } + +export const VerticalTabs = () => { + return ( + + + Title 1 + Title 2 + + + + + + + + + +

+ A flower that grows in the wild, meaning it was not intentionally seeded or planted. + The term implies that the plant probably is neither a hybrid nor a selected cultivar + that is in any way different from the way it appears in the wild as a native plant. + even if it is growing where it would not naturally. +

+ + + +

+ The term can refer to the flowering plant as a whole, even when not in bloom, and not + just the flower. +

+ + + + + + + + + + +

+ The term can refer to the flowering plant as a whole, even when not in bloom, and not + just the flower. +

+ + + + + ) +}