From 6a48a84dd0bfab10acd7fc64ee5aa469ebc24c62 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 25 Mar 2024 13:23:11 -0700 Subject: [PATCH] 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) --- bin/link-rs | 2 +- package.json | 4 +- scss/css_properties.scss | 231 ++++++++++++++++++++++++++++++++++++++ src/Drawer/DrawerBody.jsx | 13 ++- yarn.lock | 14 +-- 5 files changed, 249 insertions(+), 15 deletions(-) create mode 100644 scss/css_properties.scss diff --git a/bin/link-rs b/bin/link-rs index 5bd55789..7392ac2a 100755 --- 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 index 9c1d86ad..b41a5306 100644 --- 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 new file mode 100644 index 00000000..61077f2e --- /dev/null +++ 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 index 2e07ad0c..e6a4bc02 100644 --- 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, -}) => ( -
+}, ref) => ( +
{children}
-); +)); DrawerBody.propTypes = { children: propTypes.node.isRequired, diff --git a/yarn.lock b/yarn.lock index 97e6bdc5..98d2c9d5 100644 --- 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"