Merge pull request #118 from laruiss/develop

Develop

Author: laruiss

src/components/DsfrQuote/DsfrQuote.spec.js

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/vue'
+
+import DsfrQuote from './DsfrQuote.vue'
+
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
+describe('DsfrQuote', () => {
+  it('should render a complete DsfrQuote', () => {
+    const quote = 'LA citation'
+    const author = 'Pierre-Louis EGAUD'
+    const firstSourceText = 'Détail 1'
+    const details = [
+      firstSourceText,
+      'Détail 2',
+      'Détail 3',
+      {
+        url: 'https://www.wikipedia.fr',
+        label: 'wikipedia',
+      },
+    ]
+    const illustration = 'illustration'
+    const source = 'Duckduckgo'
+    const sourceUrl = 'https://www.duckduckgo.com'
+    const quoteImage = 'https://placekitten.com/g/150/150'
+
+    const { container, getByText } = render(DsfrQuote, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        quote,
+        author,
+        details,
+        illustration,
+        source,
+        sourceUrl,
+        quoteImage,
+      },
+    })
+    const imgEl = container.querySelector('.fr-responsive-img')
+    const quoteEl = container.querySelector('blockquote p')
+    const citeEl = getByText(source)
+    const firstLink = getByText('Détail 1')
+    const lastLink = container.querySelectorAll('.fr-quote__source li')[details.length]
+
+    expect(quoteEl).toBeInTheDocument()
+    expect(citeEl).toBeInTheDocument()
+    expect(quoteEl.innerHTML).toContain(quote)
+    expect(imgEl).toHaveAttribute('src', quoteImage)
+    expect(firstLink).not.toHaveAttribute('href')
+    expect(firstLink.innerHTML).toContain(firstSourceText)
+    expect(lastLink.querySelector('a')).toHaveAttribute('href')
+  })
+})

src/components/DsfrQuote/DsfrQuote.stories.js

@@ -0,0 +1,85 @@
+import DsfrQuote from './DsfrQuote.vue'
+
+export default {
+  component: DsfrQuote,
+  title: 'Basic/Citations',
+  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.*',
+    },
+    quote: {
+      control: 'text',
+      description: '**Texte** de la citation',
+    },
+    author: {
+      control: 'text',
+      description: '**Auteur** de la citation',
+    },
+    details: {
+      control: 'object',
+      description: '**Détails** de la citation',
+    },
+    illustration: {
+      control: 'text',
+      description: '**Illustration** de la citation',
+    },
+    separator: {
+      control: 'text',
+      description: '**Séparateur** horizontal ou vertical',
+    },
+    source: {
+      control: 'text',
+      description: '**ouvrage** d\'où est tirée la citation',
+    },
+    sourceUrl: {
+      control: 'text',
+      description: '**URL** de la source de la citation',
+    },
+    quoteImage: {
+      control: 'text',
+      description: '**URL** de l\'image',
+    },
+  },
+}
+
+export const Citation = (args) => ({
+  components: { DsfrQuote },
+  data () {
+    return {
+      ...args,
+    }
+  },
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+      <DsfrQuote
+        :quote="quote"
+        :author="author"
+        :details="details"
+        :illustration="illustration"
+        :source="source"
+        :sourceUrl="sourceUrl"
+        :quoteImage="quoteImage"
+      />
+    </div>
+  `,
+})
+Citation.args = {
+  dark: false,
+  quote: 'LA citation',
+  author: 'Pierre-Louis EGAUD',
+  separator: '',
+  details: [
+    'Détail 1',
+    'Détail 2',
+    'Détail 3',
+    {
+      url: 'https://www.wikipedia.fr',
+      label: 'wikipedia',
+    },
+  ],
+  illustration: 'illustration',
+  source: 'Duckduckgo',
+  sourceUrl: 'https://www.duckduckgo.com',
+  quoteImage: 'https://placekitten.com/g/150/150',
+}

src/components/DsfrQuote/DsfrQuote.vue

@@ -0,0 +1,128 @@
+<template>
+  <figure class="fr-quote fr-quote--column">
+    <VIcon
+      label="Quote"
+    >
+      <VIcon
+        name="ri-chat-1-line"
+        scale="1.3"
+        fill="var(--bf500)"
+      />
+      <VIcon
+        name="ri-double-quotes-l"
+        scale="0.6"
+        fill="var(--bf500)"
+      />
+    </VIcon>
+
+    <blockquote
+      v-if="source"
+      :cite="sourceUrl"
+    >
+      <p>« {{ quote }} »</p>
+    </blockquote>
+
+    <figcaption>
+      <p class="fr-quote__author">
+        {{ author }}
+      </p>
+
+      <ul class="fr-quote__source">
+        <li>
+          <cite>{{ source }}</cite>
+        </li>
+
+        <li
+          v-for="(detail, index) in details"
+          :key="index"
+        >
+          <a
+            v-if="typeof detail === 'object'"
+            target="_blank"
+            :href="detail.url"
+          >
+            {{ detail.label }}
+            <VIcon
+              name="ri-external-link-line"
+              scale="0.9"
+            />
+          </a>
+          {{ typeof detail !== 'object' ? detail : '' }}
+        </li>
+      </ul>
+
+      <div class="fr-quote__image">
+        <img
+          :src="quoteImage"
+          class="fr-responsive-img"
+          alt=""
+        >
+        <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
+      </div>
+    </figcaption>
+  </figure>
+</template>
+
+<script>
+export default {
+  name: 'DsfrQuote',
+  props: {
+    quote: {
+      type: String,
+      default: undefined,
+    },
+    icon: {
+      type: String,
+      default: undefined,
+    },
+    author: {
+      type: String,
+      default: undefined,
+    },
+    details: {
+      type: Array,
+      default: () => [],
+    },
+    illustration: {
+      type: String,
+      default: undefined,
+    },
+    separator: {
+      type: String,
+      default: 'horizontal',
+    },
+    source: {
+      type: String,
+      default: '',
+    },
+    sourceUrl: {
+      type: String,
+      default: '',
+    },
+    quoteImage: {
+      type: String,
+      default: '',
+    },
+  },
+
+}
+</script>
+
+<style src="./quotes.css" />
+
+<style scoped>
+.fr-quote {
+  color: var(--g800);
+}
+
+.fr-quote::before {
+  content: normal;
+}
+
+.fr-quote__source a {
+  box-shadow: none;
+}
+.fr-quote__source a::after {
+  content: normal;
+}
+</style>