small fixes per PR reviews/suggestions

Author: didoo

packages/components/src/components/hds/layout/flex/index.hbs

@@ -4,7 +4,7 @@
 }}
 {{!
   Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering
-  a plain HTML elements requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
+  a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
 }}
 {{#if (eq this.componentTag "div")}}
   <div class={{this.classNames}} ...attributes>{{yield (hash Item=(component "hds/layout/flex/item"))}}</div>

packages/components/src/components/hds/layout/flex/item.hbs

@@ -4,7 +4,7 @@
 }}
 {{!
   Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering
-  a plain HTML elements requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
+  a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
 }}
 {{#if (eq this.componentTag "div")}}
   <div class={{this.classNames}} {{style this.inlineStyles}} ...attributes>{{yield}}</div>

packages/components/src/components/hds/layout/flex/types.ts

@@ -35,9 +35,9 @@ export enum HdsLayoutFlexGapValues {
   'Eight' = '8',
   'Twelve' = '12',
   'Sixteen' = '16',
-  'Twentyfour' = '24',
-  'Thirtytwo' = '32',
-  'Fortyeight' = '48',
+  'TwentyFour' = '24',
+  'ThirtyTwo' = '32',
+  'FortyEight' = '48',
 }
 
 export type HdsLayoutFlexGaps = `${HdsLayoutFlexGapValues}`;

packages/components/src/styles/components/layout/flex.scss

@@ -12,7 +12,7 @@
 
   // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
   // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
-  // These variables can be used by the consumers as escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
   gap:
     var(--hds-layout-flex-row-gap, 0)
     var(--hds-layout-flex-column-gap, 0);
@@ -90,7 +90,6 @@
 
 // gap
 
-// set just row gap size
 .hds-layout-flex--row-gap-4 { --hds-layout-flex-row-gap: 4px; }
 .hds-layout-flex--row-gap-8 { --hds-layout-flex-row-gap: 8px; }
 .hds-layout-flex--row-gap-12 { --hds-layout-flex-row-gap: 12px; }
@@ -99,7 +98,6 @@
 .hds-layout-flex--row-gap-32 { --hds-layout-flex-row-gap: 32px; }
 .hds-layout-flex--row-gap-48 { --hds-layout-flex-row-gap: 48px; }
 
-// set just column gap size
 .hds-layout-flex--column-gap-4 { --hds-layout-flex-column-gap: 4px; }
 .hds-layout-flex--column-gap-8 { --hds-layout-flex-column-gap: 8px; }
 .hds-layout-flex--column-gap-12 { --hds-layout-flex-column-gap: 12px; }