32 - Add buttons and dropdowns of the design system

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type { Preview } from '@storybook/react'
+import { ThemeProvider } from '../src/sections/ui/theme/ThemeProvider'
+import DocumentationTemplate from '../src/stories/ui/DocumentationTemplate.mdx'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    docs: {
+      page: DocumentationTemplate
+    }
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    )
+  ]
+}
+
+export default preview

.stylelintrc.json

@@ -10,6 +10,18 @@
     "scss/dollar-variable-pattern": null,
     "scss/dollar-variable-empty-line-before": null,
     "selector-id-pattern": null,
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["export"]
+      }
+    ],
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreSelectors": [":export"]
+      }
+    ]
   }
 }

src/index.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './assets/styles/index.scss'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 import './i18n'
+import { ThemeProvider } from './sections/ui/theme/ThemeProvider'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
     <React.Suspense fallback="loading">
-      <App />
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
     </React.Suspense>
   </React.StrictMode>
 )

src/sections/hello-dataverse/HelloDataverse.module.scss

@@ -1,3 +1,5 @@
+@import "src/sections/ui/assets/styles/design-tokens/colors.module";
+
 .container {
   display: flex;
   flex-direction: column;
@@ -9,7 +11,7 @@
 }
 
 .title {
-  color: #C55B28;
+  color: $dv-brand-color;
 }
 
 .logo {
@@ -18,6 +20,6 @@
 }
 
 .link {
-  color: #3174AF;
+  color: $dv-link-color;
 }
 

src/sections/layout/Layout.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom'
 import { Header } from './header/Header'
-import { Container } from '../ui/grid/container/Container'
+import { Container } from '../ui/grid/Container'
 import { Footer } from './footer/Footer'
 import styles from './Layout.module.scss'
 

src/sections/layout/footer/Footer.module.scss

@@ -1,26 +1,25 @@
+@import "src/sections/ui/assets/styles/design-tokens/colors.module";
+@import "src/sections/ui/assets/styles/design-tokens/typography.module";
+
 .container {
     padding: 60px 0;
-    color: #767676;
+    color: $dv-subtext-color;
 }
 
 .copyright {
     margin: 0 0 10px;
-    font-size: 85%;
+    font-size: $dv-font-size-sm;
 }
 
 .powered-by-container {
-    font-size: .85em;
+    font-size: $dv-font-size-sm;
     text-align: right;
 }
 
 .powered-by-text {
     margin-right: 0.6em;
 }
 
-.powered-by-logo {
-    font-size: 14px;
-}
-
 .version {
     margin-right: 0.3em;
     white-space: nowrap;

src/sections/layout/footer/Footer.tsx

@@ -1,6 +1,6 @@
-import { Container } from '../../ui/grid/container/Container'
-import { Row } from '../../ui/grid/row/Row'
-import { Col } from '../../ui/grid/col/Col'
+import { Container } from '../../ui/grid/Container'
+import { Row } from '../../ui/grid/Row'
+import { Col } from '../../ui/grid/Col'
 import styles from './Footer.module.scss'
 import dataverseProjectLogo from './dataverse-project-logo.svg'
 import { useTranslation } from 'react-i18next'
@@ -27,7 +27,6 @@ export function Footer() {
             <div className={styles['powered-by-container']}>
               <span className={styles['powered-by-text']}>{t('poweredBy')}</span>
               <a
-                className={styles['powered-by-logo']}
                 href="https://dataverse.org/"
                 title="The Dataverse Project"
                 target="_blank"