feat(ContentCard): content card custom heading tag (#4226)

* feat: content card custom heading tag * fix: tags can only be h1 to h6 * test: fix
scaleway · Sep 12, 2024 · 656db57 · 656db57
1 parent db42fa3
commit 656db57
Show file tree

Hide file tree

Showing 4 changed files with 243 additions and 1 deletion.
diff --git a/.changeset/honest-mayflies-lay.md b/.changeset/honest-mayflies-lay.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+`<ContentCard />`: new prop `headingTag` to change tag of header
diff --git a/packages/plus/src/components/ContentCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/ContentCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -3756,3 +3756,227 @@ exports[`ContentCard > renders correctly with required title 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`ContentCard > renders correctly with title with custom tag 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: block;
+  text-align: left;
+  padding: 0;
+  color: #3f4250;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border: 1px solid #d9dadd;
+  border-radius: 4px;
+  background: #ffffff;
+  overflow-wrap: break-word;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0[disabled]:hover {
+  border: 1px solid #d9dadd;
+  box-shadow: none;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 24px 24px 0 24px;
+  padding: 24px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  color: #3f4250;
+  font-size: 16px;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+      target="_blank"
+    >
+      <div
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <div
+                class="emotion-10 emotion-5"
+              >
+                <div
+                  class="emotion-12 emotion-5"
+                >
+                  <h1
+                    class="emotion-14 emotion-15"
+                  >
+                    test
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/plus/src/components/ContentCard/__tests__/index.test.tsx b/packages/plus/src/components/ContentCard/__tests__/index.test.tsx
@@ -19,6 +19,13 @@ describe('ContentCard', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
+  test('renders correctly with title with custom tag', () => {
+    const { asFragment } = renderWithTheme(
+      <ContentCard title="test" headingTag="h1" />,
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
   test('renders correctly with disabled', () => {
     const { asFragment } = renderWithTheme(
       <ContentCard title="test" disabled />,

diff --git a/packages/plus/src/components/ContentCard/index.tsx b/packages/plus/src/components/ContentCard/index.tsx
@@ -111,6 +111,11 @@ type ContentCardProps = {
   icon?: ReactNode
   subtitle?: string
   title: string
+  /*
+   * Define the HTML Section Heading element level (h1 - h6) to use for the header
+   */
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
   description?: string
   children?: ReactNode
   /**
@@ -140,6 +145,7 @@ export const ContentCard = forwardRef<
       icon,
       subtitle,
       title,
+      headingTag = 'h3',
       description,
       children,
       href,
@@ -220,7 +226,7 @@ export const ContentCard = forwardRef<
                         </Text>
                       ) : null}
                       <Text
-                        as="h3"
+                        as={headingTag}
                         variant="bodyStrong"
                         sentiment="neutral"
                         disabled={disabled}