feat: ✨ Implémente le composant "Mise en exergue"

src/components/DsfrHighlight/DsfrHighlight.spec.js

@@ -0,0 +1,73 @@
+import { render } from '@testing-library/vue'
+
+import DsfrHighlight from './DsfrHighlight.vue'
+
+describe('DsfrHighlight', () => {
+  it('should display a highlighted text medium', () => {
+    const text = 'Texte de la mise en exergue'
+
+    const { getByText } = render(DsfrHighlight, {
+      props: {
+        text,
+      },
+    })
+
+    const pEl = getByText(text)
+
+    expect(pEl.parentNode).toHaveClass('fr-highlight')
+    expect(pEl).not.toHaveClass('fr-text--sm')
+    expect(pEl).not.toHaveClass('fr-text--lg')
+  })
+
+  it('should display a highlighted text medium if large and small are provided as props', () => {
+    const text = 'Texte de la mise en exergue'
+
+    const { getByText } = render(DsfrHighlight, {
+      props: {
+        text,
+        small: true,
+        large: true,
+      },
+    })
+
+    const pEl = getByText(text)
+
+    expect(pEl.parentNode).toHaveClass('fr-highlight')
+    expect(pEl).not.toHaveClass('fr-text--sm')
+    expect(pEl).not.toHaveClass('fr-text--lg')
+  })
+
+  it('should display a highlighted text small if small is provided as props', () => {
+    const text = 'Texte de la mise en exergue'
+
+    const { getByText } = render(DsfrHighlight, {
+      props: {
+        text,
+        small: true,
+      },
+    })
+
+    const pEl = getByText(text)
+
+    expect(pEl.parentNode).toHaveClass('fr-highlight')
+    expect(pEl).toHaveClass('fr-text--sm')
+    expect(pEl).not.toHaveClass('fr-text--lg')
+  })
+
+  it('should display a highlighted text large if large is provided as props', () => {
+    const text = 'Texte de la mise en exergue'
+
+    const { getByText } = render(DsfrHighlight, {
+      props: {
+        text,
+        large: true,
+      },
+    })
+
+    const pEl = getByText(text)
+
+    expect(pEl.parentNode).toHaveClass('fr-highlight')
+    expect(pEl).not.toHaveClass('fr-text--sm')
+    expect(pEl).toHaveClass('fr-text--lg')
+  })
+})

src/components/DsfrHighlight/DsfrHighlight.stories.js

@@ -0,0 +1,50 @@
+import DsfrHighlight from './DsfrHighlight.vue'
+
+export default {
+  component: DsfrHighlight,
+  title: 'Éléments/Mise en Exergue - Highlight',
+  argTypes: {
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    text: {
+      control: 'text',
+      description: 'Texte de la mise en avant',
+    },
+    small: {
+      control: 'boolean',
+      description: 'Permet d’afficher le texte en petit',
+    },
+    large: {
+      control: 'boolean',
+      description: 'Permet d’afficher le texte en plus grand',
+    },
+  },
+}
+
+export const MiseEnExergue = (args) => ({
+  components: {
+    DsfrHighlight,
+  },
+
+  data () {
+    return { ...args }
+  },
+
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w);">
+      <DsfrHighlight
+        :text="text"
+        :small="small"
+        :large="large"
+      />
+    </div>
+  `,
+})
+
+MiseEnExergue.args = {
+  small: false,
+  large: false,
+  text: 'Texte original de la mise en exergue',
+}

src/components/DsfrHighlight/DsfrHighlight.vue

@@ -0,0 +1,32 @@
+<script>
+
+export default {
+  name: 'DsfrHighlight',
+
+  props: {
+    text: {
+      type: String,
+      default: undefined,
+    },
+    small: Boolean,
+    large: Boolean,
+  },
+}
+</script>
+
+<template>
+  <div class="fr-highlight">
+    <p
+      :class="{
+        'fr-text--lg': large && !small,
+        'fr-text--sm': small && !large,
+      }"
+    >
+      {{ text }}
+    </p>
+  </div>
+</template>
+
+<style src="./highlights.css">
+
+</style>

src/components/DsfrHighlight/highlights.css

@@ -0,0 +1,25 @@
+
+/* ------------------------------------ *\
+  HIGHLIGHTS
+\* ------------------------------------ */
+
+.fr-highlight {
+  padding-left: 1rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.fr-highlight p {
+  margin-bottom: 0;
+}
+
+.fr-highlight {
+  border-left: 0.25rem solid var(--bf500);
+}
+
+@media (min-width: 48em) {
+  .fr-highlight {
+    padding-left: 2rem;
+    margin-left: 2rem;
+  }
+}

src/components/index.js

@@ -6,6 +6,7 @@ export { default as DsfrCallout } from './DsfrCallout/DsfrCallout.vue'
 export { default as DsfrCheckbox } from './DsfrCheckbox/DsfrCheckbox.vue'
 export { default as DsfrCheckboxSet } from './DsfrCheckbox/DsfrCheckboxSet.vue'
 export { default as DsfrHeader } from './DsfrHeader/DsfrHeader.vue'
+export { default as DsfrHighlight } from './DsfrHighlight/DsfrHighlight.vue'
 export { default as DsfrInput } from './DsfrInput/DsfrInput.vue'
 export { default as DsfrFollow } from './DsfrFollow/DsfrFollow.vue'
 export { default as DsfrFooter } from './DsfrFooter/DsfrFooter.vue'