32 - Add buttons and dropdowns of the design system

src/assets/styles/_bootstrap-customized.scss

@@ -1,21 +1,15 @@
 @use "sass:map";
-@import "./src/assets/styles/bootstrap-variables";
+@import "src/assets/styles/bootstrap-variables";
+@import "src/assets/styles/typography";
+@import "src/assets/styles/colors";
 
 // Body
-$font-size-base: 14px;
-$body-color: #333;
-$font-family-base: ("Helvetica Neue",helvetica,arial,sans-serif);
+$body-color: $dv-text-color;
+$font-family-base: $dv-font-family;
 
-$link-color: #3174AF;
-$link-hover-color: #23527c;
-$link-hover-decoration: underline;
-
-// Colors
-$custom-colors: (
-        "dataverse-orange": #c55b28
-);
-
-$theme-colors: map.merge($theme-colors, $custom-colors);
+// Links
+$link-color: $dv-link-color;
+$link-hover-color: $dv-link-hover-color;
 
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/root";

src/assets/styles/_colors.scss

@@ -0,0 +1,27 @@
+// Theme colors
+$dv-brand-color: #C55B28;
+$dv-primary-color: #337AB7;
+$dv-secondary-color: #E7E7E7;
+
+// Text colors
+$dv-text-color: #333;
+$dv-subtext-color: #767676;
+
+$dv-primary-text-color: white;
+$dv-primary-text-shadow-color: rgb(0 0 0 / 20%);
+
+$dv-secondary-text-color: $dv-text-color;
+$dv-secondary-text-shadow-color: white;
+
+// Link colors
+$dv-link-color: #3174AF;
+$dv-link-hover-color: #23527c;
+
+// Button colors
+$dv-primary-background-color: $dv-primary-color;
+$dv-primary-background-color-disabled: #265a88;
+$dv-primary-border-color: #245580;
+
+$dv-secondary-background-color: white;
+$dv-secondary-background-color-disabled: #e0e0e0;
+$dv-secondary-border-color: #ccc;

src/assets/styles/_typography.scss

@@ -0,0 +1,5 @@
+$dv-font-size: 14px;
+$dv-font-size-sm: 12px;
+$dv-brand-font-size: 24px;
+
+$dv-font-family: ("Helvetica Neue",helvetica,arial,sans-serif);

src/assets/styles/fontcustom.scss

@@ -0,0 +1,69 @@
+/*
+  Icon Font: fontcustom
+*/
+
+@font-face {
+  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");
+}
+
+@media screen and (min-resolution) {
+  @font-face {
+    font-family: fontcustom;
+    src: url("src/assets/fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
+  }
+}
+
+[data-icon]::before { content: attr(data-icon); }
+
+[data-icon]::before,
+.icon-astro::before,
+.icon-audio::before,
+.icon-code::before,
+.icon-collection::before,
+.icon-dataset::before,
+.icon-document::before,
+.icon-file::before,
+.icon-geodata::before,
+.icon-image::before,
+.icon-network::before,
+.icon-other::before,
+.icon-package::before,
+.icon-tabular::before,
+.icon-unlock::before,
+.icon-video::before {
+  display: inline-block;
+  font-weight: normal;
+  font-family: fontcustom, sans-serif;
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  text-decoration: inherit;
+  text-rendering: optimizelegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.icon-astro::before { content: "\f100"; }
+.icon-audio::before { content: "\f101"; }
+.icon-code::before { content: "\f102"; }
+.icon-collection::before { content: "\f103"; }
+.icon-dataset::before { content: "\f104"; }
+.icon-document::before { content: "\f105"; }
+.icon-file::before { content: "\f106"; }
+.icon-geodata::before { content: "\f107"; }
+.icon-image::before { content: "\f108"; }
+.icon-network::before { content: "\f109"; }
+.icon-other::before { content: "\f10a"; }
+.icon-package::before { content: "\f10b"; }
+.icon-tabular::before { content: "\f10c"; }
+.icon-unlock::before { content: "\f10d"; }
+.icon-video::before { content: "\f10e"; }

src/assets/styles/index.scss

@@ -1 +1,2 @@
+@import "fontcustom";
 @import "bootstrap-customized";

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

@@ -1,3 +1,5 @@
+@import "src/assets/styles/colors";
+
 .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/footer/Footer.module.scss

@@ -1,26 +1,25 @@
+@import "src/assets/styles/colors";
+@import "src/assets/styles/typography";
+
 .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

@@ -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"

src/sections/ui/button/Button.module.scss

@@ -1,35 +1,7 @@
-.common {
-  display: inline-block;
-  color: #333;
-  line-height: 1.4286;
-  text-shadow: 0 1px 0 #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%),0 1px 1px rgb(0 0 0 / 7.5%);
-  cursor: pointer;
+.spacing {
+  margin: 0 7px
 }
 
-.primary {
-  composes: common;
-  background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
-}
-
-.secondary {
-  composes: common;
-  background-color: white;
-}
-
-.small {
-  padding: 3px 6px;
-  font-size: 12px;
-}
-
-.medium {
-  padding: 6px 12px;
-  font-size: 14px;
-}
-
-.large {
-  padding: 12px 24px;
-  font-size: 16px;
-}
+.icon {
+  margin-right: .3em;
+}

src/sections/ui/button/Button.tsx

@@ -1,17 +1,37 @@
+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'
 
-export interface ButtonProps {
-  secondary?: boolean
-  size?: 'small' | 'medium' | 'large'
-  label: string
+type ButtonVariant = 'primary' | 'secondary' | 'link'
+
+interface ButtonProps {
+  variant?: ButtonVariant
+  disabled?: boolean
   onClick?: () => void
+  icon?: Icon
+  withSpacing?: boolean
+  children: ReactNode
 }
 
-export const Button = ({ secondary = false, size = 'medium', label, ...props }: ButtonProps) => {
-  const mode = secondary ? 'secondary' : 'primary'
+export function Button({
+  variant = 'primary',
+  disabled = false,
+  onClick,
+  icon,
+  withSpacing,
+  children
+}: ButtonProps) {
   return (
-    <button type="button" className={[styles[mode], styles[size]].join(' ')} {...props}>
-      {label}
-    </button>
+    <ButtonBS
+      className={`${withSpacing ? styles.spacing : ''}`}
+      variant={variant}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      aria-disabled={disabled}>
+      {icon && <span className={`${styles.icon} ${icon}`} role="img" aria-label={icon}></span>}
+      {children}
+    </ButtonBS>
   )
 }

src/sections/ui/button/button.scss

@@ -0,0 +1,7 @@
+@import "src/assets/styles/colors";
+
+$primary: $dv-primary-background-color;
+$secondary: #E7E7E7;
+
+@import "./src/assets/styles/bootstrap-variables";
+@import "bootstrap/scss/buttons";

src/sections/ui/dropdown-button/DropdownButton.module.scss

@@ -0,0 +1,7 @@
+.spacing {
+  margin: 0 7px
+}
+
+.icon {
+  margin-right: .3em;
+}

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

@@ -0,0 +1,40 @@
+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'
+
+type DropdownButtonVariant = 'primary' | 'secondary'
+
+interface DropdownButtonProps {
+  id: string
+  title: string
+  variant?: DropdownButtonVariant
+  icon?: Icon
+  withSpacing?: boolean
+  children: ReactNode
+}
+
+export function DropdownButton({
+  id,
+  title,
+  variant = 'primary',
+  icon,
+  withSpacing,
+  children
+}: DropdownButtonProps) {
+  return (
+    <DropdownButtonBS
+      className={`${withSpacing ? styles.spacing : ''}`}
+      id={id}
+      title={
+        <>
+          {icon && <span className={`${styles.icon} ${icon}`} role="img" aria-label={icon}></span>}
+          {title}
+        </>
+      }
+      variant={variant}>
+      {children}
+    </DropdownButtonBS>
+  )
+}

src/sections/ui/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx

@@ -0,0 +1,11 @@
+import { Dropdown as DropdownBS } from 'react-bootstrap'
+import { ReactNode } from 'react'
+
+interface DropdownItemProps {
+  href: string
+  children: ReactNode
+}
+
+export function DropdownButtonItem({ href, children }: DropdownItemProps) {
+  return <DropdownBS.Item href={href}>{children}</DropdownBS.Item>
+}

src/sections/ui/dropdown-button/dropdown-button.scss

@@ -0,0 +1,3 @@
+@import "src/sections/ui/button/button";
+@import "bootstrap/scss/dropdown";
+

src/sections/ui/grid/container/container.scss

@@ -1,9 +1,2 @@
 @import "src/assets/styles/bootstrap-variables";
-
-$container-max-widths: (
-        md: 750px,
-        lg: 970px,
-        xl: 1170px
-);
-
 @import "node_modules/bootstrap/scss/containers";

src/sections/ui/icon.enum.ts

@@ -0,0 +1,17 @@
+export enum Icon {
+  ASTRO = 'icon-astro',
+  AUDIO = 'icon-audio',
+  CODE = 'icon-code',
+  COLLECTION = 'icon-collection',
+  DATASET = 'icon-dataset',
+  DOCUMENT = 'icon-document',
+  FILE = 'icon-file',
+  GEODATA = 'icon-geodata',
+  IMAGE = 'icon-image',
+  NETWORK = 'icon-network',
+  OTHER = 'icon-other',
+  PACKAGE = 'icon-package',
+  TABULAR = 'icon-tabular',
+  UNLOCK = 'icon-unlock',
+  VIDEO = 'icon-video'
+}