@1024pix/pix-ui 23.2.1 → 23.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Pix-UI Changelog
 
+## v23.3.0 (29/12/2022)
+
+
+### :rocket: Amélioration
+- [#307](https://github.com/1024pix/pix-ui/pull/307) [FEATURE] Création du composant carte (PIX-6141).
+
+### :building_construction: Tech
+- [#313](https://github.com/1024pix/pix-ui/pull/313) [TECH] Ne plus ajouter de lien vers la review-app dans la pull-request 
+
 ## v23.2.1 (21/12/2022)
 
 

package/addon/components/pix-indicator-card.hbs

@@ -0,0 +1,45 @@
+<section class="indicator-card" ...attributes>
+  {{#if @isLoading}}
+    <p class="screen-reader-only">{{@loadingMessage}}</p>
+    <div class="indicator-card__icon" aria-hidden="true"></div>
+    <div class="indicator-card__content" aria-hidden="true"></div>
+  {{else}}
+    <div
+      id={{this.iconId}}
+      class="indicator-card__icon"
+      aria-hidden="true"
+      {{did-insert this.setIconColor}}
+    >
+      <FaIcon @icon={{@icon}} />
+    </div>
+    <dl class="indicator-card__content">
+      <div class="indicator-card__title">
+        <dt>{{@title}}</dt>
+        {{#if @info}}
+          <PixTooltip
+            @id={{this.tooltipId}}
+            @position="top"
+            @isWide={{true}}
+            class="indicator-card__tooltip hide-on-mobile"
+          >
+            <:triggerElement>
+              <FaIcon
+                @icon="circle-question"
+                class="indicator-card__tooltip-icon"
+                tabindex="0"
+                aria-describedby={{this.tooltipId}}
+              />
+            </:triggerElement>
+            <:tooltip>
+              {{@info}}
+            </:tooltip>
+          </PixTooltip>
+        {{/if}}
+      </div>
+      <dd class="indicator-card__value">{{yield}}</dd>
+      <p class="indicator-card__sub">
+        {{yield to="sub"}}
+      </p>
+    </dl>
+  {{/if}}
+</section>

package/addon/components/pix-indicator-card.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import accessibleContrastedColorGenerator from '@1024pix/pix-ui/utils/accessible-contrasted-color-generator';
+
+export default class PixIndicatorCard extends Component {
+  id = guidFor(this);
+  iconId = 'icon-' + this.id;
+  tooltipId = 'tooltip-' + this.id;
+
+  @action
+  setIconColor() {
+    const element = document.getElementById(this.iconId);
+    try {
+      element.style.color = this.args.color;
+      element.style.backgroundColor = accessibleContrastedColorGenerator(this.args.color);
+    } catch (error) {
+      console.error(error.message);
+    }
+  }
+}

package/addon/styles/_pix-indicator-card.scss

@@ -0,0 +1,65 @@
+.indicator-card {
+  display: flex;
+  width: 100%;
+  background-color: $pix-neutral-0;
+  border-radius: 8px;
+  min-height: 112px;
+
+  box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.05);
+  padding: 0;
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px 0 0 8px;
+    background-color: $pix-neutral-20;
+    min-width: 96px;
+    font-size: 2.5rem;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: $pix-neutral-60;
+    padding: $spacing-s $spacing-m;
+    margin: 0;
+  }
+
+  &__title {
+    @include text-large();
+    display: flex;
+    align-items: center;
+    font-weight: $font-medium;
+    font-size: 1rem;
+    line-height: 1.375rem;
+    margin-bottom: $spacing-xxs;
+  }
+
+  &__value {
+    font-family: $font-open-sans;
+    font-weight: $font-medium;
+    font-size: 2rem;
+    line-height: 2.5rem;
+    margin: 0;
+    margin-bottom: $spacing-xxs;
+  }
+
+  &__sub {
+    @include text-small();
+    font-weight: $font-normal;
+    display: flex;
+    gap: 10px;
+    margin: 0
+  }
+
+  &__tooltip {
+    font-weight: $font-normal;
+  }
+
+  &__tooltip-icon {
+    color: $pix-neutral-30;
+    margin: 0 $spacing-xs;
+  }
+}

package/addon/styles/addon.scss

@@ -30,6 +30,7 @@
 @import 'pix-pagination';
 @import 'pix-checkbox';
 @import 'pix-toggle';
+@import 'pix-indicator-card';
 @import 'trap-focus';
 
 // at the end so it can override it's children scss

package/addon/utils/accessible-contrasted-color-generator.js

@@ -0,0 +1,29 @@
+import Color from 'color';
+
+// See this link that explains why we had to implement lightenBy and darkenBy  https://github.com/Qix-/color/issues/53#issuecomment-487822576
+function lightenBy(color, ratio) {
+  const lightness = color.lightness();
+  return color.lightness(lightness + (100 - lightness) * ratio);
+}
+
+function darkenBy(color, ratio) {
+  const lightness = color.lightness();
+  return color.lightness(lightness - lightness * ratio);
+}
+
+export default function (hex) {
+  const color = Color(hex);
+  let newColor = color;
+  let contrast;
+  do {
+    if (color.luminosity() < 0.5) {
+      newColor = lightenBy(newColor, 0.05);
+    } else {
+      newColor = darkenBy(newColor, 0.05);
+    }
+    contrast = color.contrast(newColor);
+
+    // newColor.luminosity() can return 0.9999..99 when newColor is white but reinstanciating Color with the hexacode #FFFFFF returns 1
+  } while (contrast < 4.5 && Color(newColor.hex()).luminosity() < 1);
+  return newColor.hex();
+}

package/app/components/pix-indicator-card.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-indicator-card';

package/app/stories/pix-block.stories.mdx

@@ -1,11 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import * as stories from './pix-block.stories.js';
 
-<Meta
-  title='Layout/Block'
-  component='PixBlock'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Layout/Block" component="PixBlock" argTypes={stories.argTypes} />
 
 # Pix Block
 
@@ -21,18 +17,16 @@ Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une
   <Story name="Block" story={stories.block} height={60} />
 </Canvas>
 
-
 ## Usage
 
 ```html
 <PixBlock @shadow="light">
-  <div> Un bloc avec une ombre faible </div>
+  <div>Un bloc avec une ombre faible</div>
 </PixBlock>
 
 <PixBlock @shadow="heavy">
-  <div> Un bloc avec une ombre forte </div>
+  <div>Un bloc avec une ombre forte</div>
 </PixBlock>
-
 ```
 
 ## Arguments

package/app/stories/pix-indicator-card.stories.js

@@ -0,0 +1,57 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+    <div style="min-width:300px">
+      <PixIndicatorCard
+        @title={{this.title}}
+        @color={{this.color}}
+        @icon={{this.icon}}
+        @info={{this.info}}
+        @isLoading={{this.isLoading}}
+        @loadingMessage={{this.loadingMessage}}
+      >
+        <:default>{{this.value}}</:default>
+        <:sub>
+          <span>En cours : 1</span><span>En attente : 2</span><span>Envoyés : 3</span>
+        </:sub>
+      </PixIndicatorCard>
+    </div>`,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Hello Dedans',
+  color: 'purple',
+  icon: 'circle-question',
+  value: '42',
+  info: "Coucou la bulle d'infos",
+  isLoading: false,
+  loadingMessage: 'texte de chargement ScreenReader',
+};
+
+export const argTypes = {
+  title: {
+    name: 'Title',
+    description: 'Titre de la carte',
+  },
+  color: {
+    name: 'Color',
+    description: "Couleur de l'icone",
+  },
+  icon: {
+    name: 'Icon',
+    description: "Icone dans l'encart",
+  },
+  value: {
+    name: 'Value',
+    description: 'Contenu principal',
+  },
+  info: {
+    name: 'Info',
+    description: "Contenu de la bulle d'info",
+  },
+};

package/app/stories/pix-indicator-card.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import * as stories from './pix-indicator-card.stories.js';
+
+<Meta title="Others/Indicator Card" component="PixIndicatorCard" argTypes={stories.argTypes} />
+
+# Pix Indicator Card
+
+Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une ombre projetée.
+
+> La carte adapte la couleur de fond avec la couleur de l'icone passée en paramètre.
+
+> La carte peut contenir un titre, une tooltip ainsi que des infos complémentaires.
+
+## Default
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+    <PixIndicatorCard
+      @title={{this.title}}
+      @color={{this.color}}
+      @icon={{this.icon}}
+      @info={{this.info}}
+      @isLoading={{this.isLoading}}
+      @loadingMessage={{this.loadingMessage}}
+    >
+      <:default>{{this.value}}</:default>
+      <:sub>
+        <span>En cours : 1</span><span>En attente : 2</span><span>Envoyés : 3</span>
+      </:sub>
+    </PixIndicatorCard>
+```
+
+<ArgsTable story="Default" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "23.2.1",
+  "version": "23.3.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -23,7 +23,7 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "./scripts/build.sh && npm run signal-github",
+    "build": "./scripts/build.sh",
     "build-ember": "ember build --environment=production",
     "build-storybook": "ember build && cp -v CNAME dist && build-storybook -s dist",
     "clean": "rm -rf dist node_modules",
@@ -39,10 +39,10 @@
     "storybook": "ember build && ember serve & start-storybook -p 9001 -s dist",
     "test": "ember test",
     "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each",
-    "signal-github": "./scripts/signal-deploy-to-pr.sh"
+    "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
+    "color": "^4.2.3",
     "ember-cli-babel": "^7.26.8",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
@@ -82,6 +82,7 @@
     "core-js": "^3.26.1",
     "ember-auto-import": "^2.5.0",
     "ember-cli": "^4.8.0",
+    "ember-cli-cjs-transform": "^2.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",