process flow: calculate variant based on item count and step style fixes

src/components.d.ts

@@ -274,7 +274,6 @@ export namespace Components {
   interface HyProcess {
     dataItems: ProcessFlowBoxValue[] | string;
     numberTerm: string;
-    variant: ProcessFlowBoxVariants;
   }
   interface HyProcessFlowBox {
     boxDescription: string;
@@ -837,7 +836,6 @@ declare namespace LocalJSX {
   interface HyProcess {
     dataItems?: ProcessFlowBoxValue[] | string;
     numberTerm?: string;
-    variant?: ProcessFlowBoxVariants;
   }
   interface HyProcessFlowBox {
     boxDescription?: string;

src/components/process-flow-box/process-flow-box.scss

@@ -91,6 +91,7 @@
     font-family: var(--main-font-family);
     font-size: 16px;
     font-weight: 600;
+    hyphens: auto;
     letter-spacing: 0;
     line-height: 22px;
     padding: 19px 17px;

src/components/process/process.scss

@@ -34,9 +34,9 @@
       width: 48%;
     }
     @include breakpoint($wide) {
-      flex: 1;
-      max-width: 24%;
-      width: 24%;
+      flex-grow: 1;
+      max-width: 23%;
+      width: 23%;
     }
   }
 }

src/components/process/process.tsx

@@ -13,7 +13,6 @@ import {ProcessFlowBoxVariants} from '../../utils/utils';
   shadow: true
 })
 export class Process implements ComponentInterface {
-  @Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;
   @Prop() numberTerm: string;
 
   private _dataItems: ProcessFlowBoxValue[];
@@ -32,8 +31,23 @@ export class Process implements ComponentInterface {
   }
 
   render() {
-    const itemsPerRow = this.variant == 'small' ? 4 : 3;
-    const classAttributes = [this.variant, 'hy-process'].join(' ');
+    /*
+    - Logic:
+    - 3 items: big
+    - 4 items: small
+    - 5 items: big
+    - 6 items: big
+    - 7 items: small
+    - 8 items: small
+    - 9 items: big
+    * */
+    const bigVariants = [3, 5, 6, 9];
+    const processVariant = bigVariants.includes(this._dataItems.length)
+      ? ProcessFlowBoxVariants.default
+      : ProcessFlowBoxVariants.small;
+
+    const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;
+    const classAttributes = [processVariant, 'hy-process'].join(' ');
     const classItem = 'box';
     var stepState;
 
@@ -44,7 +58,7 @@ export class Process implements ComponentInterface {
           return (
             <hy-process-flow-box
               class={classItem}
-              variant={this.variant}
+              variant={processVariant}
               box-number={index + 1}
               box-title={x.heading}
               box-description={x.description}

src/components/process/readme.md

@@ -38,11 +38,10 @@ This process consists of boxes that have
 
 ## Properties
 
-| Property     | Attribute     | Description | Type                                                             | Default                          |
-| ------------ | ------------- | ----------- | ---------------------------------------------------------------- | -------------------------------- |
-| `dataItems`  | `data-items`  |             | `ProcessFlowBoxValue[] \| string`                                | `undefined`                      |
-| `numberTerm` | `number-term` |             | `string`                                                         | `undefined`                      |
-| `variant`    | `variant`     |             | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |
+| Property     | Attribute     | Description | Type                              | Default     |
+| ------------ | ------------- | ----------- | --------------------------------- | ----------- |
+| `dataItems`  | `data-items`  |             | `ProcessFlowBoxValue[] \| string` | `undefined` |
+| `numberTerm` | `number-term` |             | `string`                          | `undefined` |
 
 ## Dependencies
 

src/index.html

@@ -221,5 +221,43 @@
     {"heading":"4/5","description":"Key Highlight description text"}]'
     >
     </hy-key-figure-group>
+
+    <hy-process
+      class="hy-process-container"
+      number-term="Step"
+      data-items='[{"heading":"Step title","description":"Step description text"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step asdfjasjdflhaskdfh"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'
+    >
+    </hy-process>
+
+    <hy-process
+      class="hy-process-container"
+      number-term="Step"
+      data-items='[{"heading":"Step title","description":"Step description text"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step asdfjasjdflhaskdfh"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step asdfjasjdflhaskdfh"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'
+    >
+    </hy-process>
+
+    <hy-process
+      class="hy-process-container"
+      number-term="Step"
+      data-items='[{"heading":"Step title","description":"Step description text"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
+   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'
+    >
+    </hy-process>
   </body>
 </html>