Merge pull request #1176 from securityscorecard/ajkl2533@sb-overview-…

…revamp

chore(storybook): revamp overview page

.vscode/extensions.json

@@ -3,6 +3,6 @@
     "arcanis.vscode-zipfs",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "phoenisx.cssvar"
+    "vunguyentuan.vscode-css-variables"
   ]
 }

.vscode/settings.json

@@ -4,12 +4,4 @@
     "**/build": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cssvar.postcssSyntax": {
-    "postcss-syntax": ["jsx", "tsx"]
-  },
-  "cssvar.themes": [
-    "dark",
-    "dark-theme",
-  ],
-  "cssvar.excludeThemedVariables": true
 }

docs/overview.mdx

@@ -0,0 +1,202 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Meta, Story, Unstyled, useOf } from '@storybook/blocks';
+
+import { DSProvider } from '../src/theme';
+import { ButtonV2, ElementLabel, Inline, Padbox, Stack, Surface } from "../src/components";
+import * as AccordionStories from '../src/components/Accordion/Accordion.stories';
+import * as BadgeStories from '../src/components/Badge/Badge.stories';
+import * as BannerStories from '../src/components/Banner/Banner.stories';
+import * as BreadcrumbsStories from '../src/components/Breadcrumbs/Breadcrumbs.stories';
+import * as ButtonStories from '../src/components/ButtonV2/Button.stories';
+import * as IconButtonStories from '../src/components/ButtonV2/IconButton.stories';
+import * as CalloutStories from '../src/components/Callout/Callout.stories';
+import * as CardStories from '../src/components/Card/Card.stories';
+import * as CheckboxStories from '../src/components/forms/Checkbox/Checkbox.stories';
+import * as ChipStories from '../src/components/Chip/Chip.stories';
+import * as CloseButtonStories from '../src/components/CloseButton/CloseButton.stories';
+import * as CollapsibleStories from '../src/components/Collapsible/Collapsible.stories';
+import * as ControlDropdownStories from '../src/components/ControlDropdown/ControlDropdown.stories';
+import * as DateRangePickerStories from '../src/components/DateRangePicker/DateRangePicker.stories';
+import * as DisplayStories from '../src/components/Display/Display.stories';
+import * as DropdownStories from '../src/components/Dropdown/Dropdown.stories';
+import * as ElementLabelStories from '../src/components/ElementLabel/ElementLabel.stories';
+import * as ErrorBoundaryStories from '../src/components/ErrorBoundary/ErrorBoundary.stories';
+import * as FileSelectorStories from '../src/components/FileSelector/FileSelector.stories';
+import * as HeadingStories from '../src/components/Heading/Heading.stories';
+import * as HexGradeStories from '../src/components/HexGrade/HexGrade.stories';
+import * as HintTooltipStories from '../src/components/HintTooltip/HintTooltip.stories';
+import * as IconStories from '../src/components/Icon/Icon.stories';
+import * as IconWrapperStories from '../src/components/IconWrapper/IconWrapper.stories';
+import * as InputStories from '../src/components/forms/Input/Input.stories';
+import * as InputGroupStories from '../src/components/forms/InputGroup/InputGroup.stories';
+import * as LabelStories from '../src/components/forms/Label/Label.stories';
+import * as LinkStories from '../src/components/Link/Link.stories';
+import * as LoadingStories from '../src/components/Loading/Loading.stories';
+import * as LogoStories from '../src/components/Logo/Logo.stories';
+import * as MessageStories from '../src/components/forms/Message/Message.stories';
+import * as MultiValueInputStories from '../src/components/forms/MultiValueInput/MultiValueInput.stories';
+import * as PaginationStories from '../src/components/Pagination/Pagination.stories';
+import * as PasswordStories from '../src/components/forms/Password/Password.stories';
+import * as ParagraphStories from '../src/components/Paragraph/Paragraph.stories';
+import * as PillStories from '../src/components/Pill/Pill.stories';
+import * as ProgressBarStories from '../src/components/ProgressBar/ProgressBar.stories';
+import * as RadioStories from '../src/components/forms/Radio/Radio.stories';
+import * as RangeStories from '../src/components/forms/Range/Range.stories';
+import * as ScoreDeltaStories from '../src/components/ScoreDelta/ScoreDelta.stories';
+import * as ScrollViewStories from '../src/components/ScrollView/ScrollView.stories';
+import * as SearchBarStories from '../src/components/forms/SearchBar/SearchBar.stories';
+import * as SegmentedToggleStories from '../src/components/forms/SegmentedToggle/SegmentedToggle.stories';
+import * as SelectStories from '../src/components/forms/Select/Select.stories';
+import * as SignalStories from '../src/components/Signal/Signal.stories';
+import * as SingleDatePickerStories from '../src/components/SingleDatePicker/SingleDatePicker.stories';
+import * as SkeletonStories from '../src/components/Skeleton/Skeleton.stories';
+import * as SnippetStories from '../src/components/Snippet/Snippet.stories';
+import * as SortableListStories from '../src/components/SortableList/SortableList.stories';
+import * as SpinnerStories from '../src/components/Spinner/Spinner.stories';
+import * as StatusDotStories from '../src/components/StatusDot/StatusDot.stories';
+import * as StatusPillStories from '../src/components/StatusPill/StatusPill.stories';
+import * as StepperStories from '../src/components/Stepper/Stepper.stories';
+import * as SwitchStories from '../src/components/forms/Switch/Switch.stories';
+import * as TabsStories from '../src/components/Tabs/Tabs.stories';
+import * as TextStories from '../src/components/Text/Text.stories';
+import * as TextAreaStories from '../src/components/forms/TextArea/TextArea.stories';
+import * as TooltipStories from '../src/components/Tooltip/Tooltip.stories';
+import * as TrendIconStories from '../src/components/TrendIcon/TrendIcon.stories';
+import * as UserAvatarStories from '../src/components/UserAvatar/UserAvatar.stories';
+
+export const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+`;
+export const FullWidthStory = styled.div`
+  flex: 1; align-items: center; display: flex;
+
+& > .sb-story {
+width: 100%;
+}
+`
+
+export function OverviewCard ({ title, of, centerStory = true }) {
+  const resolvedOf = useOf(of || 'story', ['story', 'meta']);
+  const componentTitle = title ?? resolvedOf.story.title.split('/').at(-1);
+
+return (
+
+<Surface
+  background="dynamic"
+  elevation={1}
+  id={resolvedOf.story.componentId}
+  radius="md"
+  hasBorder
+>
+  <Padbox paddingSize="md" style={{ height: '100%' }}>
+    <Stack
+      align="space-between"
+      gap="md"
+      splitAt={2}
+      // style={{ minHeight: 300 }}
+    >
+      <Inline align="center" gap="sm">
+        <ElementLabel size="md" isStrong>
+          {componentTitle}
+        </ElementLabel>
+      </Inline>
+      {centerStory ? (
+        <Inline align="center" justify="center" style={{ flex: 1 }}>
+          <Story of={of} />
+        </Inline>
+      ) : (
+        <FullWidthStory>
+          <Story of={of} />
+        </FullWidthStory>
+      )}
+      <Inline justify="flex-end">
+        <ButtonV2
+          as="a"
+          href={`/?path=/docs/${resolvedOf.story.componentId}--documentation`}
+          iconEnd={{ name: 'angle-right' }}
+          size="sm"
+          variant="ghost"
+        >
+          See documentation
+        </ButtonV2>
+      </Inline>
+    </Stack>
+  </Padbox>
+</Surface>
+)}
+
+<Meta title="Overview" />
+
+# Overview
+
+Components are the building blocks of our design system, each component serves an specific need. Find below a list of examples.
+
+<Unstyled>
+  <DSProvider>
+    <Grid>
+      <OverviewCard centerStory={false} of={AccordionStories.Playground} />
+      <OverviewCard of={BadgeStories.Playground} />
+      <OverviewCard centerStory={false} of={BannerStories.Playground} />
+      <OverviewCard of={BreadcrumbsStories.Playground} />
+      <OverviewCard of={ButtonStories.Playground} />
+      <OverviewCard of={IconButtonStories.Playground} />
+      <OverviewCard of={CalloutStories.Playground} />
+      <OverviewCard of={CardStories.Playground} />
+      <OverviewCard of={CheckboxStories.Playground} />
+      <OverviewCard of={ChipStories.Playground} />
+      <OverviewCard of={CloseButtonStories.Default} />
+      <OverviewCard centerStory={false} of={CollapsibleStories.Playground} />
+      <OverviewCard of={ControlDropdownStories.Playground} />
+      <OverviewCard of={DateRangePickerStories.Playground} />
+      <OverviewCard of={DisplayStories.Playground} />
+      <OverviewCard of={DropdownStories.Playground} />
+      <OverviewCard of={ElementLabelStories.Playground} />
+      <OverviewCard of={ErrorBoundaryStories.Medium} />
+      <OverviewCard of={FileSelectorStories.Playground} />
+      <OverviewCard of={HeadingStories.Playground} />
+      <OverviewCard of={HexGradeStories.SolidHexGrades} />
+      <OverviewCard of={HintTooltipStories.Default} />
+      <OverviewCard of={IconStories.Playground} />
+      <OverviewCard of={IconWrapperStories.Playground} />
+      <OverviewCard of={InputStories.Filled} />
+      <OverviewCard of={InputGroupStories.InputGroupWithButton} />
+      <OverviewCard of={LabelStories.Default} />
+      <OverviewCard of={LinkStories.Playground} />
+      <OverviewCard centerStory={false} of={LoadingStories.Playground} />
+      <OverviewCard of={LogoStories.VariantEmblem} />
+      <OverviewCard of={MessageStories.Playground} />
+      <OverviewCard of={MultiValueInputStories.Filled} />
+      <OverviewCard of={PaginationStories.OnlyCurrentPage} />
+      <OverviewCard of={PasswordStories.DefaultPassword} />
+      <OverviewCard of={ParagraphStories.Playground} />
+      <OverviewCard of={PillStories.Playground} />
+      <OverviewCard centerStory={false} of={ProgressBarStories.Variants} />
+      <OverviewCard of={RadioStories.Playground} />
+      <OverviewCard of={RangeStories.Playground} />
+      <OverviewCard of={ScoreDeltaStories.Playground} />
+      <OverviewCard of={ScrollViewStories.Playground} />
+      <OverviewCard of={SearchBarStories.Playground} />
+      <OverviewCard of={SegmentedToggleStories.Playground} />
+      <OverviewCard centerStory={false} of={SelectStories.Playground} />
+      <OverviewCard of={SignalStories.Playground} />
+      <OverviewCard of={SingleDatePickerStories.Playground} />
+      <OverviewCard centerStory={false} of={SkeletonStories.Default} />
+      <OverviewCard centerStory={false} of={SnippetStories.Playground} />
+      <OverviewCard centerStory={false} of={SortableListStories.Playground} />
+      <OverviewCard of={SpinnerStories.DarkSpinner} />
+      <OverviewCard of={StatusDotStories.Default} />
+      <OverviewCard of={StatusPillStories.Default} />
+      <OverviewCard of={StepperStories.Vertical} />
+      <OverviewCard of={SwitchStories.Playground} />
+      <OverviewCard of={TabsStories.Playground} />
+      <OverviewCard of={TextStories.Playground} />
+      <OverviewCard centerStory={false} of={TextAreaStories.Filled} />
+      <OverviewCard of={TooltipStories.Playground} />
+      <OverviewCard of={TrendIconStories.Trends} />
+      <OverviewCard of={UserAvatarStories.Playground} />
+    </Grid>
+  </DSProvider>
+</Unstyled>

src/theme/DSProvider/DSProvider.mdx → docs/theme/DSProvider.mdx

@@ -1,6 +1,6 @@
 import { Controls, Meta } from '@storybook/blocks';
 
-import * as DSProviderStories from './DSProvider.stories';
+import * as DSProviderStories from '../../src/theme/DSProvider/DSProvider.stories';
 
 <Meta of={DSProviderStories} title="Theme/DSProvider" />
 

src/theme/DSThemeOverride/DSThemeOverride.mdx → docs/theme/DSThemeOverride.mdx

@@ -1,6 +1,6 @@
 import { Meta, Source, Story } from '@storybook/blocks';
 
-import { DarkMode } from '../../components/Text/Text.stories';
+import { DarkMode } from '../../src/components/Text/Text.stories';
 
 <Meta title="theme/DSThemeOverride" />
 

src/theme/colors.mdx → docs/theme/colors.mdx

@@ -1,6 +1,6 @@
 import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
 
-import { colors } from './colors';
+import { colors } from '../../src/theme/colors';
 
 <Meta title="Theme/Colors" />
 

src/theme/createIconLibrary.mdx → docs/theme/createIconLibrary.mdx

@@ -1,7 +1,7 @@
 import { IconGallery, IconItem, Meta } from '@storybook/blocks';
 
-import Icon from '../components/Icon/Icon';
-import { IconTypes, SSCIconNames } from './icons/icons.enums';
+import Icon from '../../src/components/Icon/Icon';
+import { IconTypes, SSCIconNames } from '../../src/theme/icons/icons.enums';
 
 <Meta title="Theme/createIconLibrary()" />
 

src/theme/space.mdx → docs/theme/space.mdx

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
 
 import { SpaceScale } from '../../.storybook/blocks/SpaceScale';
-import { theme } from '.';
+import { theme } from '../../src/theme';
 
 <Meta title="Theme/Space" />
 

src/theme/theme.mdx → docs/theme/theme.mdx

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/blocks';
 
-import { theme } from './theme';
+import { theme } from '../../src/theme/theme';
 
 <Meta title="Theme/Theme Object" />
 

src/theme/typography.mdx → docs/theme/typography.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
 
 import { FontItem, FontPalette } from '../../.storybook/blocks/FontPallete';
-import { theme } from './theme';
+import { theme } from '../../src/theme/theme';
 
 export const lipsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra
 magna lectus, a congue ex blandit vel. Donec id mi commodo eros porta tempus. Vivamus et elit ut

package.json

@@ -124,18 +124,18 @@
     "@semantic-release/github": "^10.1.6",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
-    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-themes": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/manager-api": "^8.2.7",
-    "@storybook/preview-api": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-vite": "^8.2.7",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-themes": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/preview-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.7",
+    "@storybook/theming": "^8.3.5",
     "@testing-library/dom": ">=7.21.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
@@ -170,7 +170,7 @@
     "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "eslint-plugin-testing-library": "^5.1.0",
     "history": "^5.3.0",
     "husky": "^7.0.4",
@@ -198,7 +198,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "semantic-release": "^24.1.0",
     "semantic-release-export-data": "^1.1.0",
-    "storybook": "^8.2.7",
+    "storybook": "^8.3.5",
     "storycap": "^5.0.0",
     "styled-components": "^5.3.3",
     "stylelint": "^16.6.1",

src/components/Card/Card.stories.tsx

@@ -129,7 +129,7 @@ function CardMediaTemplate({
 }
 
 const CardTemplate: StoryFn<CardProps> = ({ ...args }) => (
-  <div style={{ width: '400px' }}>
+  <div style={{ maxWidth: '400px' }}>
     <Card {...args} data-custom-attr="test" />
   </div>
 );