Merge release/2.6.1 into main branch (#1169)

* add forwardRef to DrawerBody (#1166) * Bump sanitize-html from 2.11.0 to 2.12.1 (#1163) * Bump webpack-dev-middleware from 6.1.1 to 6.1.2 (#1167) * Provides CSS properties for typography, layout and color (#1168)
user-interviews · Mar 25, 2024 · 6a48a84 · 6a48a84
1 parent d913532
commit 6a48a84
Show file tree

Hide file tree

Showing 5 changed files with 249 additions and 15 deletions.
diff --git a/bin/link-rs b/bin/link-rs
@@ -10,4 +10,4 @@ fi
 yarn build
 yalc publish
 cd $RAILS_SERVER_PATH
-yalc link @user-interviews/ui-design-system
+yalc add @user-interviews/ui-design-system
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -28,7 +28,7 @@
     "react-select": "^5.0.0",
     "react-toggle": "4.1.1",
     "react-transition-group": "^4.3.0",
-    "sanitize-html": "^2.11.0",
+    "sanitize-html": "^2.12.1",
     "tippy.js": "^6.3.7",
     "uuid": "^7.0.2"
   },

diff --git a/scss/css_properties.scss b/scss/css_properties.scss
@@ -0,0 +1,231 @@
+@import 'borders';
+@import 'box_shadow';
+@import 'colors';
+@import 'elevations';
+@import 'spacing';
+@import 'typography';
+@import 'z_stack';
+
+:root {
+  --ux-border-radius: #{$ux-border-radius};
+
+  --ux-navbar-shadow-color: #{$ux-navbar-shadow-color};
+  --ux-box-shadow: #{$ux-box-shadow};
+  --ux-box-shadow-light: #{$ux-box-shadow-light};
+  --ux-box-shadow-card: #{$ux-box-shadow-card};
+  --ux-box-shadow-table-sticky-column-left: #{$ux-box-shadow-table-sticky-column-left};
+  --ux-box-shadow-table-sticky-column-right: #{$ux-box-shadow-table-sticky-column-right};
+  --ux-box-shadow-top: #{$ux-box-shadow-top};
+  --ux-box-shadow-top-light: #{$ux-box-shadow-top-light};
+  --ux-drawer-box-shadow-right: #{$ux-drawer-box-shadow-right};
+  --ux-drawer-box-shadow-left: #{$ux-drawer-box-shadow-left};
+
+  --ux-elevations-00: #{$ux-elevations-00};
+  --ux-elevations-10: #{$ux-elevations-10};
+  --ux-elevations-20: #{$ux-elevations-20};
+  --ux-elevations-30: #{$ux-elevations-30};
+  --ux-elevations-40: #{$ux-elevations-40};
+  --ux-elevations-50: #{$ux-elevations-50};
+
+  --ux-black: #{$ux-black};
+  --ux-blue: #{$ux-blue};
+  --ux-cream: #{$ux-cream};
+  --ux-emerald: #{$ux-emerald};
+  --ux-gray: #{$ux-gray};
+  --ux-green: #{$ux-green};
+  --ux-light-blue: #{$ux-light-blue};
+  --ux-navy: #{$ux-navy};
+  --ux-orange: #{$ux-orange};
+  --ux-purple: #{$ux-purple};
+  --ux-red: #{$ux-red};
+  --ux-sand: #{$ux-sand};
+  --ux-teal: #{$ux-teal};
+  --ux-yellow: #{$ux-yellow};
+  --ux-white: #{$ux-white};
+  --brand-color-facebook: #{$brand-color-facebook};
+  --brand-color-google: #{$brand-color-google};
+  --brand-color-google-alt: #{$brand-color-google-alt};
+  --brand-color-linkedin: #{$brand-color-linkedin};
+  --brand-color-office365: #{$brand-color-office365};
+  --brand-color-twitter: #{$brand-color-twitter};
+  --brand-color-yahoo: #{$brand-color-yahoo};
+  --ux-blue-100: #{$ux-blue-100};
+  --ux-blue-200: #{$ux-blue-200};
+  --ux-blue-300: #{$ux-blue-300};
+  --ux-blue-400: #{$ux-blue-400};
+  --ux-blue-500: #{$ux-blue-500};
+  --ux-blue-600: #{$ux-blue-600};
+  --ux-blue-700: #{$ux-blue-700};
+  --ux-blue-800: #{$ux-blue-800};
+  --ux-blue-900: #{$ux-blue-900};
+  --ux-emerald-100: #{$ux-emerald-100};
+  --ux-emerald-200: #{$ux-emerald-200};
+  --ux-emerald-300: #{$ux-emerald-300};
+  --ux-emerald-400: #{$ux-emerald-400};
+  --ux-emerald-500: #{$ux-emerald-500};
+  --ux-emerald-600: #{$ux-emerald-600};
+  --ux-emerald-700: #{$ux-emerald-700};
+  --ux-emerald-800: #{$ux-emerald-800};
+  --ux-emerald-900: #{$ux-emerald-900};
+  --ux-gray-100: #{$ux-gray-100};
+  --ux-gray-200: #{$ux-gray-200};
+  --ux-gray-300: #{$ux-gray-300};
+  --ux-gray-400: #{$ux-gray-400};
+  --ux-gray-500: #{$ux-gray-500};
+  --ux-gray-600: #{$ux-gray-600};
+  --ux-gray-700: #{$ux-gray-700};
+  --ux-gray-800: #{$ux-gray-800};
+  --ux-gray-900: #{$ux-gray-900};
+  --ux-green-100: #{$ux-green-100};
+  --ux-green-200: #{$ux-green-200};
+  --ux-green-300: #{$ux-green-300};
+  --ux-green-400: #{$ux-green-400};
+  --ux-green-500: #{$ux-green-500};
+  --ux-green-600: #{$ux-green-600};
+  --ux-green-700: #{$ux-green-700};
+  --ux-green-800: #{$ux-green-800};
+  --ux-green-900: #{$ux-green-900};
+  --ux-navy-100: #{$ux-navy-100};
+  --ux-navy-200: #{$ux-navy-200};
+  --ux-navy-300: #{$ux-navy-300};
+  --ux-navy-400: #{$ux-navy-400};
+  --ux-navy-500: #{$ux-navy-500};
+  --ux-navy-600: #{$ux-navy-600};
+  --ux-navy-700: #{$ux-navy-700};
+  --ux-navy-800: #{$ux-navy-800};
+  --ux-navy-900: #{$ux-navy-900};
+  --ux-neutral-100: #{$ux-neutral-100};
+  --ux-neutral-200: #{$ux-neutral-200};
+  --ux-neutral-300: #{$ux-neutral-300};
+  --ux-neutral-400: #{$ux-neutral-400};
+  --ux-neutral-500: #{$ux-neutral-500};
+  --ux-neutral-600: #{$ux-neutral-600};
+  --ux-neutral-700: #{$ux-neutral-700};
+  --ux-neutral-800: #{$ux-neutral-800};
+  --ux-neutral-900: #{$ux-neutral-900};
+  --ux-orange-100: #{$ux-orange-100};
+  --ux-orange-200: #{$ux-orange-200};
+  --ux-orange-300: #{$ux-orange-300};
+  --ux-orange-400: #{$ux-orange-400};
+  --ux-orange-500: #{$ux-orange-500};
+  --ux-orange-600: #{$ux-orange-600};
+  --ux-orange-700: #{$ux-orange-700};
+  --ux-orange-800: #{$ux-orange-800};
+  --ux-orange-900: #{$ux-orange-900};
+  --ux-red-100: #{$ux-red-100};
+  --ux-red-200: #{$ux-red-200};
+  --ux-red-300: #{$ux-red-300};
+  --ux-red-400: #{$ux-red-400};
+  --ux-red-500: #{$ux-red-500};
+  --ux-red-600: #{$ux-red-600};
+  --ux-red-700: #{$ux-red-700};
+  --ux-red-800: #{$ux-red-800};
+  --ux-red-900: #{$ux-red-900};
+  --ux-sand-100: #{$ux-sand-100};
+  --ux-sand-200: #{$ux-sand-200};
+  --ux-sand-300: #{$ux-sand-300};
+  --ux-sand-400: #{$ux-sand-400};
+  --ux-sand-500: #{$ux-sand-500};
+  --ux-sand-600: #{$ux-sand-600};
+  --ux-sand-700: #{$ux-sand-700};
+  --ux-sand-800: #{$ux-sand-800};
+  --ux-sand-900: #{$ux-sand-900};
+  --ux-teal-100: #{$ux-teal-100};
+  --ux-teal-200: #{$ux-teal-200};
+  --ux-teal-300: #{$ux-teal-300};
+  --ux-teal-400: #{$ux-teal-400};
+  --ux-teal-500: #{$ux-teal-500};
+  --ux-teal-600: #{$ux-teal-600};
+  --ux-teal-700: #{$ux-teal-700};
+  --ux-teal-800: #{$ux-teal-800};
+  --ux-teal-900: #{$ux-teal-900};
+  --ux-yellow-100: #{$ux-yellow-100};
+  --ux-yellow-200: #{$ux-yellow-200};
+  --ux-yellow-300: #{$ux-yellow-300};
+  --ux-yellow-400: #{$ux-yellow-400};
+  --ux-yellow-500: #{$ux-yellow-500};
+  --ux-yellow-600: #{$ux-yellow-600};
+  --ux-yellow-700: #{$ux-yellow-700};
+  --ux-yellow-800: #{$ux-yellow-800};
+  --ux-yellow-900: #{$ux-yellow-900};
+  --ux-purple-100: #{$ux-purple-100};
+  --ux-purple-200: #{$ux-purple-200};
+  --ux-purple-300: #{$ux-purple-300};
+  --ux-purple-400: #{$ux-purple-400};
+  --ux-purple-500: #{$ux-purple-500};
+  --ux-purple-600: #{$ux-purple-600};
+  --ux-purple-700: #{$ux-purple-700};
+  --ux-purple-800: #{$ux-purple-800};
+  --ux-purple-900: #{$ux-purple-900};
+
+  --synth-spacing-1: #{$synth-spacing-1};
+  --synth-spacing-2: #{$synth-spacing-2};
+  --synth-spacing-3: #{$synth-spacing-3};
+  --synth-spacing-4: #{$synth-spacing-4};
+  --synth-spacing-5: #{$synth-spacing-5};
+  --synth-spacing-6: #{$synth-spacing-6};
+  --synth-spacing-7: #{$synth-spacing-7};
+  --synth-spacing-8: #{$synth-spacing-8};
+  --synth-spacing-9: #{$synth-spacing-9};
+  --synth-spacing-10: #{$synth-spacing-10};
+  --synth-spacing-11: #{$synth-spacing-11};
+  --synth-spacing-12: #{$synth-spacing-12};
+
+  --synth-success-green-dark: #{$synth-success-green-dark};
+  --synth-success-green-medium: #{$synth-success-green-medium};
+  --synth-success-green-light: #{$synth-success-green-light};
+  --synth-error-red-dark: #{$synth-error-red-dark};
+  --synth-error-red-medium: #{$synth-error-red-medium};
+  --synth-error-red-light: #{$synth-error-red-light};
+  --synth-warning-amber-dark: #{$synth-warning-amber-dark};
+  --synth-warning-amber-medium: #{$synth-warning-amber-medium};
+  --synth-warning-amber-light: #{$synth-warning-amber-light};
+  --synth-warning-amber-alternate: #{$synth-warning-amber-alternate};
+  --synth-alert-bg-neutral: #{$synth-alert-bg-neutral};
+  --synth-div-stroke-neutral: #{$synth-div-stroke-neutral};
+  --synth-header-neutral: #{$synth-header-neutral};
+  --synth-page-neutral: #{$synth-page-neutral};
+  --synth-text-neutral: #{$synth-text-neutral};
+  --synth-unselected-neutral: #{$synth-unselected-neutral};
+  --synth-accent-green: #{$synth-accent-green};
+  --synth-dark-background-selected-blue: #{$synth-dark-background-selected-blue};
+  --synth-dark-background-pressed-blue: #{$synth-dark-background-pressed-blue};
+  --synth-hover-state: #{$synth-hover-state};
+  --synth-indicator-stroke-green: #{$synth-indicator-stroke-green};
+  --synth-navbar-blue: #{$synth-navbar-blue};
+  --synth-primary-cta-blue: #{$synth-primary-cta-blue};
+  --synth-selected-state-green: #{$synth-selected-state-green};
+  --synth-hyperlink-color: #{$synth-hyperlink-color};
+  --synth-hover-blue: #{$synth-hover-blue};
+  --synth-header-gray-blue: #{$synth-header-gray-blue};
+
+  --synth-font-family: #{$synth-font-family};
+  --synth-font-weight-regular: #{$synth-font-weight-regular};
+  --synth-font-weight-medium: #{$synth-font-weight-medium};
+  --synth-font-weight-bold: #{$synth-font-weight-bold};
+  --synth-font-size-base: #{$synth-font-size-base};
+
+  --z-index-1050: #{$z-index-1050};
+  --z-index-1045: #{$z-index-1045};
+  --z-index-1040: #{$z-index-1040};
+  --z-index-1030: #{$z-index-1030};
+  --z-index-1025: #{$z-index-1025};
+  --z-index-1020: #{$z-index-1020};
+  --z-index-115: #{$z-index-115};
+  --z-index-100: #{$z-index-100};
+  --z-index-30: #{$z-index-30};
+  --z-index-20: #{$z-index-20};
+  --z-index-11: #{$z-index-11};
+  --z-index-10: #{$z-index-10};
+  --z-index-3: #{$z-index-3};
+  --z-index-2: #{$z-index-2};
+  --z-index-1: #{$z-index-1};
+  --z-index-popover: #{$z-index-popover};
+  --z-index-flash: #{$z-index-flash};
+  --z-index-drawer: #{$z-index-drawer};
+  --z-index-modal-backdrop: #{$z-index-modal-backdrop};
+  --z-index-fixed: #{$z-index-fixed};
+  --z-index-overlay: #{$z-index-overlay};
+  --z-index-table-cell-sticky-column: #{$z-index-table-cell-sticky-column};
+  --z-index-table-foot-sticky-row: #{$z-index-table-foot-sticky-row};
+}
diff --git a/src/Drawer/DrawerBody.jsx b/src/Drawer/DrawerBody.jsx
@@ -1,15 +1,18 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import * as propTypes from 'prop-types';
 
 import './DrawerBody.scss';
 
-const DrawerBody = ({
+const DrawerBody = forwardRef(({
   children,
-}) => (
-  <div className="Drawer__body">
+}, ref) => (
+  <div
+    className="Drawer__body"
+    ref={ref}
+  >
     {children}
   </div>
-);
+));
 
 DrawerBody.propTypes = {
   children: propTypes.node.isRequired,

diff --git a/yarn.lock b/yarn.lock
@@ -11542,10 +11542,10 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sanitize-html@^2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
-  integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
+sanitize-html@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.12.1.tgz#280a0f5c37305222921f6f9d605be1f6558914c7"
+  integrity sha512-Plh+JAn0UVDpBRP/xEjsk+xDCoOvMBwQUf/K+/cBAVuTbtX8bj2VB7S1sL1dssVpykqp0/KPSesHrqXtokVBpA==
   dependencies:
     deepmerge "^4.2.2"
     escape-string-regexp "^4.0.0"
@@ -12917,9 +12917,9 @@ webidl-conversions@^6.1.0:
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
 webpack-dev-middleware@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-6.1.1.tgz#6bbc257ec83ae15522de7a62f995630efde7cc3d"
-  integrity sha512-y51HrHaFeeWir0YO4f0g+9GwZawuigzcAdRNon6jErXy/SqV/+O6eaVAzDqE6t3e3NpGeR5CS+cCDaTC+V3yEQ==
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-6.1.2.tgz#0463232e59b7d7330fa154121528d484d36eb973"
+  integrity sha512-Wu+EHmX326YPYUpQLKmKbTyZZJIB8/n6R09pTmB03kJmnMsVPTo9COzHZFr01txwaCAuZvfBJE4ZCHRcKs5JaQ==
   dependencies:
     colorette "^2.0.10"
     memfs "^3.4.12"