Merge pull request #2186 from hashicorp/showcase-improve-icon-coverage

Showcase - Added use cases for display variants to the `icon` page

Author: didoo

showcase/app/styles/app.scss

@@ -51,6 +51,7 @@
 @import "./showcase-pages/form/text-input";
 @import "./showcase-pages/form/textarea";
 @import "./showcase-pages/form/toggle";
+@import "./showcase-pages/icon";
 @import "./showcase-pages/link-inline";
 @import "./showcase-pages/menu-primitive";
 @import "./showcase-pages/modal";

showcase/app/styles/showcase-pages/icon.scss

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// ICON
+
+body.foundations-icon {
+  .shw-foundation-outline-icons {
+    .flight-icon {
+      outline: 1px dotted #CCC;
+    }
+  }
+
+  .shw-foundation-icon-container-flex {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .shw-foundation-icon-container-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px;
+    align-items: center;
+  }
+}

showcase/app/templates/foundations/icon.hbs

@@ -37,6 +37,8 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Divider @level={{2}} />
+
   <Shw::Text::H2>Color</Shw::Text::H2>
 
   <Shw::Flex @direction="column" as |SF|>
@@ -68,4 +70,66 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  {{#let (array true false) as |booleans|}}
+    {{#each booleans as |isInline|}}
+      <Shw::Text::Body>{{if isInline "Inline (default)" "Block"}}</Shw::Text::Body>
+
+      <Shw::Flex class="shw-foundation-outline-icons" as |SF|>
+        <SF.Item @label="single icon">
+          <FlightIcon @name="bookmark" @isInlineBlock={{isInline}} />
+        </SF.Item>
+        <SF.Item @label="multiple icons">
+          <FlightIcon @name="alert-circle-fill" @isInlineBlock={{isInline}} />
+          <FlightIcon @name="alert-diamond-fill" @isInlineBlock={{isInline}} />
+          <FlightIcon @name="alert-triangle-fill" @isInlineBlock={{isInline}} />
+        </SF.Item>
+      </Shw::Flex>
+
+      <Shw::Flex class="shw-foundation-outline-icons" @gap="4rem" as |SG|>
+        <SG.Item @label="icon + inline text">
+          <FlightIcon @name="bookmark" @isInlineBlock={{isInline}} />
+          <span class="hds-typography-body-200">Lorem ipsum dolor</span>
+        </SG.Item>
+        <SG.Item @label="icon + inline text (inside flexbox)">
+          <div class="shw-foundation-icon-container-flex">
+            <FlightIcon @name="bookmark" @isInlineBlock={{isInline}} />
+            <span class="hds-typography-body-200">Lorem ipsum dolor</span>
+          </div>
+        </SG.Item>
+        <SG.Item @label="icon + inline text (inside grid)">
+          <div class="shw-foundation-icon-container-grid">
+            <FlightIcon @name="bookmark" @isInlineBlock={{isInline}} />
+            <span class="hds-typography-body-200">Lorem ipsum dolor</span>
+          </div>
+        </SG.Item>
+      </Shw::Flex>
+
+      <Shw::Flex class="shw-foundation-outline-icons" @gap="4rem" as |SF|>
+        <SF.Item @label="icons interleaved with inline text">
+          <span class="hds-typography-body-200">Lorem ipsum dolor</span>
+          <FlightIcon @name="bookmark" @isInlineBlock={{isInline}} />
+          <span class="hds-typography-body-200">Sit amet consectetur</span>
+          <FlightIcon @name="alert-circle-fill" @isInlineBlock={{isInline}} />
+          <FlightIcon @name="alert-diamond-fill" @isInlineBlock={{isInline}} />
+          <FlightIcon @name="alert-triangle-fill" @isInlineBlock={{isInline}} />
+          <span class="hds-typography-body-200">Adipisicing elit</span>
+        </SF.Item>
+        <SF.Item @label="icons interleaved with block text">
+          <p class="hds-typography-body-200">Lorem ipsum dolor</p>
+          <FlightIcon @name="bookmark" @isInlineBlock={{isInline}} />
+          <p class="hds-typography-body-200">Sit amet consectetur</p>
+          <FlightIcon @name="alert-circle-fill" @isInlineBlock={{isInline}} />
+          <FlightIcon @name="alert-diamond-fill" @isInlineBlock={{isInline}} />
+          <FlightIcon @name="alert-triangle-fill" @isInlineBlock={{isInline}} />
+          <p class="hds-typography-body-200">Adipisicing elit</p>
+        </SF.Item>
+      </Shw::Flex>
+
+    {{/each}}
+  {{/let}}
+
 </section>