feat(text): add caption preset examples for table & figcaption

Signed-off-by: astagnol <[email protected]>
ovh · Nov 13, 2024 · 11e1038 · 11e1038
1 parent b993eb0
commit 11e1038
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 0 deletions.
diff --git a/packages/storybook/stories/components/table/table.stories.ts b/packages/storybook/stories/components/table/table.stories.ts
@@ -45,6 +45,41 @@ const exampleTable = `<table>
   </tbody>
 </table>`
 
+const odsTextCaptionTable = `<table>
+  <caption>
+    <ods-text preset="caption">Front-end web developer course 2021</ods-text>
+  </caption>
+  <thead>
+  <tr>
+    <th scope="col">Person</th>
+    <th scope="col">Most interest in</th>
+    <th scope="col">Age</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <th scope="row">Chris</th>
+    <td>HTML tables</td>
+    <td>22</td>
+  </tr>
+  <tr>
+    <th scope="row">Dennis</th>
+    <td>Web accessibility</td>
+    <td>45</td>
+  </tr>
+  <tr>
+    <th scope="row">Sarah</th>
+    <td>JavaScript frameworks</td>
+    <td>29</td>
+  </tr>
+  <tr>
+    <th scope="row">Karen</th>
+    <td>Web performance</td>
+    <td>36</td>
+  </tr>
+  </tbody>
+</table>`
+
 export default meta;
 
 export const Demo: StoryObj = {
@@ -137,3 +172,12 @@ ${unsafeHTML(exampleTable)}
 </ods-table>
   `,
 };
+
+export const Caption: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-table>
+${unsafeHTML(odsTextCaptionTable)}
+</ods-table>
+  `,
+};
diff --git a/packages/storybook/stories/components/table/technical-information.mdx b/packages/storybook/stories/components/table/technical-information.mdx
@@ -34,3 +34,7 @@ You can apply your own style on each part of the table directly.
 <Heading label="Variant" level={ 3 } />
 
 <Canvas of={ TableStories.Variant } sourceState="shown" />
+
+<Heading label="Text component caption preset" level={ 3 } />
+
+<Canvas of={ TableStories.Caption } sourceState="shown" />
diff --git a/packages/storybook/stories/components/text/technical-information.mdx b/packages/storybook/stories/components/text/technical-information.mdx
@@ -31,4 +31,16 @@ Custom CSS :
 
 <Heading label="Preset" level={ 3 } />
 
+**Caption** preset can be used should you need ODS caption custom style.
+
+For actual `<caption>` (used in a table) or `<figcaption>` (image), use the native tag using either an ods-text inside of it or the Saas mixin.
+
 <Canvas of={ TextStories.Preset } sourceState="shown" />
+
+<Heading label="Caption preset in <table>" level={ 3 } />
+
+<Canvas of={ TextStories.CaptionTable } sourceState="shown" />
+
+<Heading label="Caption preset in <figcaption>" level={ 3 } />
+
+<Canvas of={ TextStories.FigCaption } sourceState="shown" />
diff --git a/packages/storybook/stories/components/text/text.stories.ts b/packages/storybook/stories/components/text/text.stories.ts
@@ -32,6 +32,7 @@ export const Demo: StoryObj = {
         type: { summary: 'string' }
       },
       control: { type: 'select' },
+      description: 'Caption preset is only custom styling. For `<caption>` or `<figcaption>`, use the native tag with ods-text or Sass mixin',
       options: ODS_TEXT_PRESETS,
     },
     content: {
@@ -105,3 +106,52 @@ export const CustomCSS: StoryObj = {
 </style>
   `,
 };
+
+export const CaptionTable: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<table>
+  <caption>
+    <ods-text preset="caption">My table title</ods-text>
+  </caption>
+  <thead>
+  <tr>
+    <th scope="col">Person</th>
+    <th scope="col">Age</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <th scope="row">Chris</th>
+    <td>22</td>
+  </tr>
+  </tbody>
+</table>
+<style>
+  caption {
+    caption-side: bottom;
+  }
+  table {
+    border-collapse: collapse;
+    border: 2px solid rgb(140 140 140);
+  }
+</style>
+  `,
+};
+
+export const FigCaption: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<figure>
+  <img src="https://images.crunchbase.com/image/upload/c_pad,h_256,w_256,f_auto,q_auto:eco,dpr_1/ayzwkdawmlyzvuummuf4" alt="OVHcloud logo" />
+  <figcaption>
+    <ods-text preset="caption">My picture title</ods-text>
+  </figcaption>
+</figure>
+<style>
+  img {
+    height: 100px;
+  }
+</style>
+  `,
+};