ui: Split out product css component into its separate elements (#7342)

* Remove old %action-group

* Remove old variables we no longer need

* Use the discovery-chain component in the same manner as others

* Split `product` out into its separate components

ui-v2/app/styles/components/action-group.scss

@@ -1,13 +0,0 @@
-@import '../base/components/action-group/index';
-.action-group {
-  @extend %action-group;
-}
-/* This needs to go into table */
-%action-group {
-  position: absolute;
-  top: 8px;
-  right: 15px;
-}
-%action-group .type-delete {
-  @extend %internal-button-dangerous;
-}

ui-v2/app/styles/components/app-view.scss

@@ -82,3 +82,41 @@ main {
 %app-view > div.disabled > div {
   margin-top: 0 !important;
 }
+
+/* toggleable toolbar for short screens */
+[for='toolbar-toggle'] {
+  @extend %with-search-color-icon;
+  background-position: 0 4px;
+  display: inline-block;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  color: $blue-500;
+}
+#toolbar-toggle {
+  display: none;
+}
+@media #{$--horizontal-selects} {
+  [for='toolbar-toggle'] {
+    display: none;
+  }
+}
+// reduced search magnifying icon layout
+@media #{$--lt-horizontal-selects} {
+  %app-view header h1 {
+    display: inline-block;
+  }
+  %app-view header h1 {
+    display: inline-block;
+  }
+  // on the instance detail page we don't have the magnifier
+  html.template-instance.template-show h1 {
+    display: block;
+  }
+  #toolbar-toggle + * {
+    display: none;
+  }
+  #toolbar-toggle:checked + * {
+    display: block;
+  }
+}

ui-v2/app/styles/components/brand-loader.scss

@@ -0,0 +1,7 @@
+@import './brand-loader/index';
+html body > svg {
+  display: none;
+}
+html.ember-loading body > svg {
+  @extend %brand-loader;
+}

ui-v2/app/styles/components/brand-loader/index.scss

@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';

ui-v2/app/styles/components/brand-loader/layout.scss

@@ -0,0 +1,10 @@
+%brand-loader {
+  display: block;
+}
+%brand-loader {
+  position: absolute;
+  top: 50%;
+  margin-top: -26px;
+  left: 50%;
+  margin-left: -84px;
+}

ui-v2/app/styles/components/discovery-chain.scss

@@ -1,2 +1,5 @@
 @import './card/index';
 @import './discovery-chain/index';
+.discovery-chain {
+  @extend %discovery-chain;
+}

ui-v2/app/styles/components/discovery-chain/layout.scss

@@ -1,6 +1,3 @@
-.discovery-chain {
-  @extend %discovery-chain;
-}
 %discovery-chain .resolvers,
 %discovery-chain .splitters,
 %discovery-chain .routes {

ui-v2/app/styles/components/footer.scss

@@ -0,0 +1,4 @@
+@import './footer/index';
+#wrapper > footer {
+  @extend %footer;
+}

ui-v2/app/styles/components/footer/index.scss

@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';

ui-v2/app/styles/components/footer/layout.scss

@@ -1,25 +1,3 @@
-%footer > a:first-child {
-  position: relative;
-}
-%footer > a:first-child::before {
-  @extend %with-hashicorp-logo-mask, %as-pseudo;
-  background-color: $gray-400;
-  font-size: 1.4em;
-  position: absolute;
-  top: 50%;
-  margin-top: -0.7em;
-  left: -25px;
-}
-%footer {
-  border-top: $decor-border-100;
-}
-%footer {
-  border-color: $gray-200;
-  background-color: $white;
-}
-%footer > * {
-  color: $gray-400;
-}
 %footer {
   display: flex;
   justify-content: center;

ui-v2/app/styles/components/footer/skin.scss

@@ -0,0 +1,25 @@
+/* This layout is to do with the logo */
+%footer > a:first-child {
+  position: relative;
+}
+%footer > a:first-child::before {
+  position: absolute;
+  top: 50%;
+  margin-top: -0.7em;
+  left: -25px;
+}
+%footer > a:first-child::before {
+  @extend %with-hashicorp-logo-mask, %as-pseudo;
+  background-color: $gray-400;
+  font-size: 1.4em;
+}
+%footer {
+  border-top: $decor-border-100;
+}
+%footer {
+  border-color: $gray-200;
+  background-color: $white;
+}
+%footer > * {
+  color: $gray-400;
+}

ui-v2/app/styles/components/index.scss

@@ -8,14 +8,6 @@
 @import './pill';
 @import './table';
 @import './form-elements';
-
-@import './tabular-details';
-@import './tabular-collection';
-@import './list-collection';
-
-@import './app-view';
-@import './product';
-
 @import './tooltip';
 @import './tag-list';
 @import './healthcheck-output';
@@ -33,3 +25,16 @@
 @import './notice';
 @import './sort-control';
 @import './discovery-chain';
+
+@import './tabular-details';
+@import './tabular-collection';
+@import './list-collection';
+
+/**/
+
+@import './brand-loader';
+@import './loader';
+@import './main-header-horizontal';
+@import './main-nav-horizontal';
+@import './app-view';
+@import './footer';

ui-v2/app/styles/components/loader.scss

@@ -0,0 +1,7 @@
+@import './loader/index';
+html.template-loading main > div {
+  @extend %loader;
+}
+%loader circle {
+  fill: $magenta-100;
+}

ui-v2/app/styles/components/loader/index.scss

@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';

ui-v2/app/styles/components/loader/layout.scss

@@ -0,0 +1,7 @@
+/* blobs / %ui-loader ? */
+%loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 90px - 48px - 50px);
+}

ui-v2/app/styles/components/loader/skin.scss

@@ -1,21 +1,3 @@
-/* logo */
-%brand-loader {
-  display: block;
-}
-%brand-loader {
-  position: absolute;
-  top: 50%;
-  margin-top: -26px;
-  left: 50%;
-  margin-left: -84px;
-}
-/* blobs / %ui-loader ? */
-%loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: calc(100vh - 90px - 48px - 50px);
-}
 %loader circle {
   animation: loader-animation 1.5s infinite ease-in-out;
   transform-origin: 50% 50%;

ui-v2/app/styles/components/main-header-horizontal.scss

@@ -0,0 +1,30 @@
+@import './main-header-horizontal/index';
+[role='banner'] {
+  @extend %main-header-horizontal;
+}
+%main-nav-horizontal .docs-link a::after {
+  @extend %with-learn-icon, %as-pseudo;
+}
+%main-nav-horizontal .learn-link a::after {
+  @extend %with-docs-icon, %as-pseudo;
+}
+%main-nav-horizontal .feedback-link a::after {
+  @extend %with-logo-github-monochrome-icon, %as-pseudo;
+}
+%main-header-horizontal::before {
+  background-color: $magenta-600;
+}
+%main-nav-horizontal-action,
+%main-nav-horizontal-toggle-button {
+  color: $magenta-050;
+}
+@media #{$--lt-horizontal-nav} {
+  %main-nav-horizontal-panel {
+    background-color: $magenta-600;
+  }
+}
+@media #{$--horizontal-nav} {
+  %main-nav-horizontal-action-active {
+    background-color: $magenta-800;
+  }
+}

ui-v2/app/styles/components/main-header-horizontal/index.scss

@@ -0,0 +1,2 @@
+@import './skin.scss';
+@import './layout.scss';

ui-v2/app/styles/components/main-nav-horizontal.scss

@@ -1,19 +1,5 @@
-@import './loader';
+@import './main-nav-horizontal/index';
-@import './main-header-horizontal';
+
-@import '../main-nav-horizontal/index';
-@import './footer';
-[role='banner'] {
-  @extend %main-header-horizontal;
-}
-%main-header-horizontal > div {
-  @extend %main-nav-horizontal-panel;
-}
-%main-header-horizontal label[for='main-nav-toggle'] {
-  @extend %main-nav-horizontal-toggle-button;
-}
-%main-header-horizontal > input {
-  @extend %main-nav-horizontal-toggle;
-}
 %main-header-horizontal nav:first-of-type {
   @extend %primary-nav;
 }
@@ -24,6 +10,16 @@
 %secondary-nav {
   @extend %main-nav-horizontal;
 }
+
+%main-header-horizontal > div {
+  @extend %main-nav-horizontal-panel;
+}
+%main-header-horizontal label[for='main-nav-toggle'] {
+  @extend %main-nav-horizontal-toggle-button;
+}
+%main-header-horizontal > input {
+  @extend %main-nav-horizontal-toggle;
+}
 @media #{$--lt-horizontal-nav} {
   %primary-nav {
     margin-top: 65px;

ui-v2/app/styles/components/product.scss

@@ -1,87 +0,0 @@
-@import './product/index';
-@import './filter-bar';
-html body > svg {
-  display: none;
-}
-%main-nav-horizontal .docs-link a::after {
-  @extend %with-learn-icon, %as-pseudo;
-}
-
-%main-nav-horizontal .learn-link a::after {
-  @extend %with-docs-icon, %as-pseudo;
-}
-%main-nav-horizontal .feedback-link a::after {
-  @extend %with-logo-github-monochrome-icon, %as-pseudo;
-}
-html.ember-loading body > svg {
-  @extend %brand-loader;
-}
-html.template-loading main > div {
-  @extend %loader;
-}
-%loader circle {
-  fill: $magenta-100;
-}
-%main-header-horizontal::before {
-  background-color: $magenta-600;
-}
-%main-nav-horizontal-action,
-%main-nav-horizontal-toggle-button {
-  color: $magenta-050;
-}
-@media #{$--lt-horizontal-nav} {
-  %main-nav-horizontal-panel {
-    background-color: $magenta-600;
-  }
-}
-@media #{$--horizontal-nav} {
-  %main-nav-horizontal-action-active {
-    background-color: $magenta-800;
-  }
-}
-#wrapper > footer {
-  @extend %footer;
-}
-/*TODO: This should go in reset, and probably needs select etc adding  */
-@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
-  input {
-    font-size: 16px !important;
-  }
-}
-/* toggleable toolbar for short screens */
-[for='toolbar-toggle'] {
-  @extend %with-search-color-icon;
-  background-position: 0 4px;
-  display: inline-block;
-  width: 26px;
-  height: 26px;
-  cursor: pointer;
-  color: $blue-500;
-}
-#toolbar-toggle {
-  display: none;
-}
-@media #{$--horizontal-selects} {
-  [for='toolbar-toggle'] {
-    display: none;
-  }
-}
-// reduced search magnifying icon layout
-@media #{$--lt-horizontal-selects} {
-  %app-view header h1 {
-    display: inline-block;
-  }
-  %app-view header h1 {
-    display: inline-block;
-  }
-  // on the instance detail page we don't have the magnifier
-  html.template-instance.template-show h1 {
-    display: block;
-  }
-  #toolbar-toggle + * {
-    display: none;
-  }
-  #toolbar-toggle:checked + * {
-    display: block;
-  }
-}

ui-v2/app/styles/core/typography.scss

@@ -109,3 +109,9 @@ pre code,
 %app-view h1 em {
   font-size: $typo-size-500;
 }
+/*TODO: This should go in reset, and probably needs select etc adding  */
+@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
+  input {
+    font-size: 16px !important;
+  }
+}

ui-v2/app/styles/variables/index.scss

@@ -1,7 +1,7 @@
 @import './custom-query';
 
 // TODO: Setup only the CSS props we actually need here
-// potentially see if our compiled can automatically remove
+// potentially see if our compiler can automatically remove
 // unused CSS props
 :root {
   --white: #{$white};
@@ -10,8 +10,3 @@
   --gray-500: #{$gray-500};
   --decor-elevation-600: #{$decor-elevation-600};
 }
-
-$gray: $gray-200;
-$gray-025: #fafbfc;
-
-$magenta-800-no-hash: 5a1434;