@linzjs/lui 11.1.8 → 11.3.0

package/dist/scss/Components/LuiFormSection/LuiFormSectionHeader.scss

@@ -0,0 +1,46 @@
+@use '../../Foundation/Variables/LuiColors' as luiColors;
+@use '../../Foundation/Variables/SpacingVars' as spacing;
+@use '../../Foundation/Variables/BreakpointVars' as breakpoints;
+@use "../../Foundation/Utilities" as *;
+
+.LuiFormSectionHeader {
+  margin-top: spacing.$unit-md;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: luiColors.$white;
+
+  @include breakpoint(md) {
+    flex-direction: row;
+    background-color: inherit;
+    padding: 0;
+  }
+}
+
+.LuiFormSectionHeader-header {
+  width: 100%;
+  padding-right: spacing.$unit-sm;
+
+  @include breakpoint(md) {
+    width: 30%;
+  }
+}
+
+.LuiFormSectionHeader-heading {
+  margin: 0;
+}
+
+.LuiFormSectionHeader-details {
+  padding: 0;
+  width: 100%;
+  background-color: luiColors.$white;
+  flex-grow: 2;
+
+  @include breakpoint(md) {
+    width: 70%;
+    border-radius: 5px;
+    margin-top: spacing.$unit-sm;
+    background-color: luiColors.$white;
+
+  }
+}

package/dist/scss/Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss

@@ -0,0 +1,16 @@
+@use '../../../Foundation/Variables/LuiColors' as luiColors;
+@use '../../../Foundation/Variables/SpacingVars' as spacing;
+
+.HelpInfo {
+  margin: 0;
+  display: flex;
+  color: luiColors.$fuscous;
+}
+
+.HelpInfo-icon {
+  transform: rotate(180deg);
+
+  margin-left: spacing.$unit-sm;
+  margin-right: spacing.$unit-xs;
+  fill: luiColors.$fuscous;
+}

package/dist/scss/Foundation/Variables/FormVars.scss

@@ -3,17 +3,32 @@
 @use './SpacingVars.scss' as spacing;
 @use './ColorVars.scss' as colors;
 @use './FontVars.scss' as fonts;
+@use '../Utilities/REM.scss' as rem;
 
 $label-spacing: spacing.$unit-md; // 24px
 $input-spacing: spacing.$unit-xs; // 8px
 
-$label-font-size: 14px;
-$label-line-height: 24px;
+$label-font-size: rem.rem(14px);
+$label-line-height: spacing.$unit-md;
 
-@mixin font-label {
+@mixin formLabel {
   @include fonts.font-semibold();
+  margin-bottom: $input-spacing;
   font-size: $label-font-size;
   line-height: $label-line-height;
+  color: colors.$charcoal;
+}
+
+@mixin formPlaceholder {
+  &::placeholder {
+    font-weight: normal;
+    color: colors.$input-placeholder;
+    opacity: 1; // Because firefox is cool
+
+    .isDisabled & {
+      color: colors.$input-placeholder-when-disabled;
+    }
+  }
 }
 
 $input-width: spacing.$unit-md;

package/dist/scss/Foundation/Variables/_LuiColors.scss

@@ -123,7 +123,8 @@ $base-type-color: $charcoal;
 
 // Icons, inputs & radio/checkboxes
 $input-text: $charcoal;
-$input-placeholder: $gray;
+$input-placeholder: $fuscous;
+$input-placeholder-when-disabled: $gray;
 $base-icon-color: $sea;
 $disabled-color: $gray;
 $disabled-color-dark: $gray;

package/dist/scss/base.scss

@@ -59,6 +59,8 @@
 @forward "./Components/LOLCommonMenu/LOLFirmSwitcherMenu.scss";
 @forward "./Components/Spinner/spinner.scss";
 @forward "./Components/LuiFormElements/LuiFileInputBox.scss";
+@forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";
+@forward "./Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss";
 
 // The following have scss next to the component that is yet to be hooked up with the react implementation
 // LuiTabs

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "11.1.8",
+  "version": "11.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",