Merge pull request IQSS#41 from IQSS/feature/add-buttons-and-dropdown…

…s-of-the-design-system

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,4 +1,4 @@
-@import "src/assets/styles/colors";
+@import "src/sections/ui/assets/styles/design-tokens/colors.module";
 
 .container {
   display: flex;

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,5 +1,5 @@
-@import "src/assets/styles/colors";
-@import "src/assets/styles/typography";
+@import "src/sections/ui/assets/styles/design-tokens/colors.module";
+@import "src/sections/ui/assets/styles/design-tokens/typography.module";
 
 .container {
     padding: 60px 0;

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'

src/sections/ui/assets/styles/bootstrap-customized.scss

@@ -0,0 +1,68 @@
+@import "src/sections/ui/assets/styles/design-tokens/typography.module";
+@import "src/sections/ui/assets/styles/design-tokens/colors.module";
+
+// Theme
+
+$primary: $dv-primary-color;
+$secondary: $dv-secondary-color;
+$success: $dv-success-color;
+$info: $dv-info-color;
+$warning: $dv-warning-color;
+$danger: $dv-danger-color;
+
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
+
+// Body
+$body-color: $dv-text-color;
+$headings-color: $dv-headings-color;
+
+  // Typography
+$font-family-base: $dv-font-family;
+
+$font-size-base: $dv-font-size;
+$font-size-sm: $dv-font-size-sm;
+
+$line-height-base: $dv-line-height;
+
+$font-weight-normal: $dv-font-weight;
+$font-weight-light: $dv-font-weight-light;
+$font-weight-bold: $dv-font-weight-bold;
+
+// Links
+$link-color: $dv-link-color;
+$link-hover-color: $dv-link-hover-color;
+
+// Base
+@import "node_modules/bootstrap/scss/maps";
+@import "node_modules/bootstrap/scss/root";
+@import "node_modules/bootstrap/scss/reboot";
+@import "node_modules/bootstrap/scss/type";
+
+// Buttons and Dropdowns
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/dropdown";
+
+// Grid
+@import "node_modules/bootstrap/scss/utilities";
+@import "node_modules/bootstrap/scss/utilities/api";
+@import "node_modules/bootstrap/scss/containers";
+@import "node_modules/bootstrap/scss/grid";
+
+// Badge
+@import "bootstrap/scss/badge";
+
+// Navbar
+
+$navbar-light-brand-color: $dv-brand-color;
+$navbar-brand-font-size: $dv-brand-font-size;
+
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/helpers";
+
+.navbar-collapse {
+  justify-content: end;
+}

src/sections/ui/assets/styles/design-tokens/colors.module.scss

@@ -0,0 +1,46 @@
+// Base colors
+$dv-brand-color: #C55B28;
+$dv-primary-color: #337AB7;
+$dv-secondary-color: #6c757d;
+$dv-success-color: #3c763d;
+$dv-danger-color: #a94442;
+$dv-warning-color: #8a6d3b;
+$dv-info-color: #31708f;
+$dv-success-box-color: #dff0d8;
+$dv-danger-box-color: #f2dede;
+$dv-warning-box-color: #fcf8e3;
+$dv-info-box-color: #d9edf7;
+
+// Text colors
+$dv-text-color: #333;
+$dv-subtext-color: #767676;
+
+$dv-primary-text-color: white;
+$dv-secondary-text-color: $dv-text-color;
+
+$dv-headings-color: #333;
+
+// Link colors
+$dv-link-color: #3174AF;
+$dv-link-hover-color: #23527c;
+
+:export {
+  brand: $dv-brand-color;
+  primary: $dv-primary-color;
+  secondary: $dv-secondary-color;
+  textColor: $dv-text-color;
+  subTextColor: $dv-subtext-color;
+  primaryTextColor: $dv-primary-text-color;
+  secondaryTextColor: $dv-secondary-text-color;
+  headingsColor: $dv-headings-color;
+  linkColor: $dv-link-color;
+  linkHoverColor: $dv-link-hover-color;
+  successColor: $dv-success-color;
+  dangerColor: $dv-danger-color;
+  warningColor: $dv-warning-color;
+  infoColor: $dv-info-color;
+  successBoxColor: $dv-success-box-color;
+  dangerBoxColor: $dv-danger-box-color;
+  warningBoxColor: $dv-warning-box-color;
+  infoBoxColor: $dv-info-box-color;
+}

src/sections/ui/assets/styles/design-tokens/typography.module.scss

@@ -0,0 +1,22 @@
+$dv-font-size: 16px;
+$dv-font-size-sm: 12px;
+$dv-brand-font-size: 24px;
+
+$dv-font-family: ("Helvetica Neue",helvetica,arial,sans-serif);
+
+$dv-font-weight: 400;
+$dv-font-weight-light: 300;
+$dv-font-weight-bold: 700;
+
+$dv-line-height: 1.5;
+
+:export {
+  fontSize: $dv-font-size;
+  fontSizeSm: $dv-font-size-sm;
+  brandFontSize: $dv-brand-font-size;
+  fontFamily: $dv-font-family;
+  fontWeight: $dv-font-weight;
+  fontWeightLight: $dv-font-weight-light;
+  fontWeightBold: $dv-font-weight-bold;
+  lineHeight: $dv-line-height;
+}

src/assets/styles/fontcustom.scss → src/sections/ui/assets/styles/fontcustom.scss

@@ -6,18 +6,18 @@
   font-weight: normal;
   font-family: fontcustom;
   font-style: normal;
-  src: url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.eot");
-  src: url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.eot?#iefix") format("embedded-opentype"),
-       url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff2") format("woff2"),
-       url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff") format("woff"),
-       url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.ttf") format("truetype"),
-       url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
+  src: url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.eot");
+  src: url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.eot?#iefix") format("embedded-opentype"),
+       url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff2") format("woff2"),
+       url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff") format("woff"),
+       url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.ttf") format("truetype"),
+       url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
 }
 
 @media screen and (min-resolution) {
   @font-face {
     font-family: fontcustom;
-    src: url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
+    src: url("src/sections/ui/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
   }
 }
 

src/sections/ui/assets/styles/index.scss

@@ -0,0 +1,2 @@
+@import "src/sections/ui/assets/styles/fontcustom";
+@import "src/sections/ui/assets/styles/bootstrap-customized";

src/sections/ui/badge/Badge.tsx

@@ -0,0 +1,11 @@
+import { Badge as BadgeBS } from 'react-bootstrap'
+import { ReactNode } from 'react'
+
+interface BadgeProps {
+  variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
+  children: ReactNode
+}
+
+export function Badge({ variant, children }: BadgeProps) {
+  return <BadgeBS bg={variant}>{children}</BadgeBS>
+}

src/sections/ui/button/Button.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react'
 import styles from './Button.module.scss'
-import './button.scss'
 import { Button as ButtonBS } from 'react-bootstrap'
 import { Icon } from '../icon.enum'
 

src/sections/ui/dropdown-button/DropdownButton.tsx

@@ -1,6 +1,5 @@
 import { DropdownButton as DropdownButtonBS } from 'react-bootstrap'
 import { ReactNode } from 'react'
-import './dropdown-button.scss'
 import styles from './DropdownButton.module.scss'
 import { Icon } from '../icon.enum'