feat(cc-addon-option-form): add style for the addon components error …

…message
CleverCloud · Jul 3, 2023 · e88ec63 · e88ec63
1 parent 884a7ad
commit e88ec63
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/src/components/cc-addon-option-form/cc-addon-option-form.js b/src/components/cc-addon-option-form/cc-addon-option-form.js
@@ -100,6 +100,24 @@ export class CcAddonOptionForm extends LitElement {
         [name='description'] {
           line-height: 1.5;
         }
+
+        .option-warning {
+          display: grid;
+          gap: 0.5em;
+          grid-template-columns: min-content 1fr;
+          text-align: left;
+        }
+
+        .option-warning p {
+          margin: 0;
+        }
+
+        .icon-warning {
+          align-self: center;
+          color: var(--cc-color-text-warning);
+
+          --cc-icon-size: 1.25em;
+        }
       `,
     ];
   }

diff --git a/src/components/cc-addon-option-form/cc-addon-option-form.stories.js b/src/components/cc-addon-option-form/cc-addon-option-form.stories.js
@@ -1,17 +1,21 @@
 import './cc-addon-option-form.js';
-import '../cc-error/cc-error.js';
 import { html } from 'lit';
+import {
+  iconRemixAlertFill as iconAlert,
+} from '../../assets/cc-remix.icons.js';
 import { makeStory } from '../../stories/lib/make-story.js';
 import { enhanceStoriesNames } from '../../stories/lib/story-names.js';
 
 const htmlExample = html`
-<div class="option-details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed libero risus,
-porttitor et turpis sed, mollis ultricies quam. Sed quis fermentum sem, sed dictum sapien.
-Donec rutrum ante vel dolor bibendum, eu pretium velit gravida</div>
-<cc-error class="option-warning">
-Nullam non nulla convallis, tincidunt nibh at, blandit eros. Cras arcu quam, faucibus eget neque id,
-scelerisque ornare neque
-</cc-error>
+  <div class="option-details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed libero risus,
+    porttitor et turpis sed, mollis ultricies quam. Sed quis fermentum sem, sed dictum sapien.
+    Donec rutrum ante vel dolor bibendum, eu pretium velit gravida
+  </div>
+  <div class="option-warning">
+    <cc-icon .icon="${iconAlert}" accessible-name="Warning" class="icon-warning"></cc-icon>
+    <p>Nullam non nulla convallis, tincidunt nibh at, blandit eros. Cras arcu quam, faucibus eget neque id,
+      scelerisque ornare neque</p>
+  </div>
 `;
 
 export default {