@capillarytech/creatives-library 1.0.1-alpha.0 → 1.0.2

package/components/molecules/PageHeaderDescription/tests/__snapshots__/PageHeaderDescription.test.js.snap

@@ -3,7 +3,6 @@
 exports[`<PageHeaderDescription /> should render the PageHeaderDescription 1`] = `
 <PageHeaderDescription
   className=""
-  intl={true}
   isLoading={false}
   labelValues={
     Array [
@@ -38,50 +37,328 @@ exports[`<PageHeaderDescription /> should render the PageHeaderDescription 1`] =
             }
           }
         >
-          <span
-            className="style__TextWithSeparator-sc-1fz9gqm-2 ibYmbW page-header-description-container"
+          <StyledComponent
+            className="page-header-description-container"
+            forwardedComponent={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "attrs": Array [],
+                "componentStyle": ComponentStyle {
+                  "componentId": "style__TextWithSeparator-sc-1fz9gqm-2",
+                  "isStatic": false,
+                  "lastClassName": "emQepx",
+                  "rules": Array [
+                    "padding-right:",
+                    "2.857rem",
+                    ";",
+                  ],
+                },
+                "displayName": "style__TextWithSeparator",
+                "foldedComponentIds": Array [],
+                "render": [Function],
+                "styledComponentId": "style__TextWithSeparator-sc-1fz9gqm-2",
+                "target": "span",
+                "toString": [Function],
+                "warnTooManyClasses": [Function],
+                "withComponent": [Function],
+              }
+            }
+            forwardedRef={null}
             style={
               Object {
                 "maxWidth": "50%",
               }
             }
           >
-            <style__InlineHeader
-              className="key-text"
-              type="label1"
+            <span
+              className="style__TextWithSeparator-sc-1fz9gqm-2 emQepx page-header-description-container"
+              style={
+                Object {
+                  "maxWidth": "50%",
+                }
+              }
             >
-              <div
-                className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 gdLfVw dOdjTH key-text"
+              <style__InlineHeader
+                className="key-text"
                 type="label1"
               >
-                Description1 
-              </div>
-            </style__InlineHeader>
-            <style__InlineHeader
-              className="divider-text"
-              type="label1"
-            >
-              <div
-                className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 gdLfVw dOdjTH divider-text"
+                <StyledComponent
+                  className="key-text"
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "CapLabelInline": Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                          "isStatic": false,
+                          "rules": Array [
+                            "font-size:",
+                            [Function],
+                            ";font-weight:",
+                            [Function],
+                            ";color:",
+                            [Function],
+                            ";line-height:",
+                            [Function],
+                            ";",
+                          ],
+                        },
+                        "displayName": "CapLabel__CapLabelInline",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      },
+                      "_foldedDefaultProps": Object {
+                        "type": "label1",
+                      },
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "style__InlineHeader-sc-1fz9gqm-0",
+                        "isStatic": false,
+                        "lastClassName": "dKysQN",
+                        "rules": Array [
+                          "font-size:",
+                          [Function],
+                          ";font-weight:",
+                          [Function],
+                          ";color:",
+                          [Function],
+                          ";line-height:",
+                          [Function],
+                          ";",
+                          "display:inline-block;font-weight:",
+                          "500",
+                          ";color:",
+                          "#7F8185",
+                          ";line-height:",
+                          "14px",
+                          ";",
+                        ],
+                      },
+                      "displayName": "style__InlineHeader",
+                      "foldedComponentIds": Array [
+                        "CapLabel-n7zsf5-0",
+                      ],
+                      "propTypes": Object {
+                        "children": [Function],
+                        "type": [Function],
+                      },
+                      "render": [Function],
+                      "styledComponentId": "style__InlineHeader-sc-1fz9gqm-0",
+                      "target": "div",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  type="label1"
+                >
+                  <div
+                    className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 dKysQN key-text"
+                    type="label1"
+                  >
+                    Description1 
+                  </div>
+                </StyledComponent>
+              </style__InlineHeader>
+              <style__InlineHeader
+                className="divider-text"
                 type="label1"
               >
-                :
-              </div>
-            </style__InlineHeader>
-            <style__HeaderWithPadding
-              className="truncate-text"
-              title="description1"
-              type="label2"
-            >
-              <div
-                className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 style__HeaderWithPadding-sc-1fz9gqm-1 jzfptu dOdjTH eOljGI truncate-text"
+                <StyledComponent
+                  className="divider-text"
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "CapLabelInline": Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                          "isStatic": false,
+                          "rules": Array [
+                            "font-size:",
+                            [Function],
+                            ";font-weight:",
+                            [Function],
+                            ";color:",
+                            [Function],
+                            ";line-height:",
+                            [Function],
+                            ";",
+                          ],
+                        },
+                        "displayName": "CapLabel__CapLabelInline",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      },
+                      "_foldedDefaultProps": Object {
+                        "type": "label1",
+                      },
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "style__InlineHeader-sc-1fz9gqm-0",
+                        "isStatic": false,
+                        "lastClassName": "dKysQN",
+                        "rules": Array [
+                          "font-size:",
+                          [Function],
+                          ";font-weight:",
+                          [Function],
+                          ";color:",
+                          [Function],
+                          ";line-height:",
+                          [Function],
+                          ";",
+                          "display:inline-block;font-weight:",
+                          "500",
+                          ";color:",
+                          "#7F8185",
+                          ";line-height:",
+                          "14px",
+                          ";",
+                        ],
+                      },
+                      "displayName": "style__InlineHeader",
+                      "foldedComponentIds": Array [
+                        "CapLabel-n7zsf5-0",
+                      ],
+                      "propTypes": Object {
+                        "children": [Function],
+                        "type": [Function],
+                      },
+                      "render": [Function],
+                      "styledComponentId": "style__InlineHeader-sc-1fz9gqm-0",
+                      "target": "div",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  type="label1"
+                >
+                  <div
+                    className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 dKysQN divider-text"
+                    type="label1"
+                  >
+                    :
+                  </div>
+                </StyledComponent>
+              </style__InlineHeader>
+              <style__HeaderWithPadding
+                className="truncate-text"
                 title="description1"
                 type="label2"
               >
-                description1
-              </div>
-            </style__HeaderWithPadding>
-          </span>
+                <StyledComponent
+                  className="truncate-text"
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "CapLabelInline": Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                          "isStatic": false,
+                          "rules": Array [
+                            "font-size:",
+                            [Function],
+                            ";font-weight:",
+                            [Function],
+                            ";color:",
+                            [Function],
+                            ";line-height:",
+                            [Function],
+                            ";",
+                          ],
+                        },
+                        "displayName": "CapLabel__CapLabelInline",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      },
+                      "_foldedDefaultProps": Object {
+                        "type": "label1",
+                      },
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "style__HeaderWithPadding-sc-1fz9gqm-1",
+                        "isStatic": false,
+                        "lastClassName": "jhQsLZ",
+                        "rules": Array [
+                          "font-size:",
+                          [Function],
+                          ";font-weight:",
+                          [Function],
+                          ";color:",
+                          [Function],
+                          ";line-height:",
+                          [Function],
+                          ";",
+                          "display:inline-block;font-weight:",
+                          "500",
+                          ";color:",
+                          "#7F8185",
+                          ";line-height:",
+                          "14px",
+                          ";",
+                          "padding-left:",
+                          "0.571rem",
+                          ";font-weight:",
+                          "400",
+                          ";",
+                        ],
+                      },
+                      "displayName": "style__HeaderWithPadding",
+                      "foldedComponentIds": Array [
+                        "CapLabel-n7zsf5-0",
+                        "style__InlineHeader-sc-1fz9gqm-0",
+                      ],
+                      "propTypes": Object {
+                        "children": [Function],
+                        "type": [Function],
+                      },
+                      "render": [Function],
+                      "styledComponentId": "style__HeaderWithPadding-sc-1fz9gqm-1",
+                      "target": "div",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  title="description1"
+                  type="label2"
+                >
+                  <div
+                    className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 style__HeaderWithPadding-sc-1fz9gqm-1 jhQsLZ truncate-text"
+                    title="description1"
+                    type="label2"
+                  >
+                    description1
+                  </div>
+                </StyledComponent>
+              </style__HeaderWithPadding>
+            </span>
+          </StyledComponent>
         </style__TextWithSeparator>
         <span
           className="page-header-description-container"
@@ -95,36 +372,280 @@ exports[`<PageHeaderDescription /> should render the PageHeaderDescription 1`] =
             className="key-text"
             type="label1"
           >
-            <div
-              className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 gdLfVw dOdjTH key-text"
+            <StyledComponent
+              className="key-text"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "CapLabelInline": Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "attrs": Array [],
+                    "componentStyle": ComponentStyle {
+                      "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                      "isStatic": false,
+                      "rules": Array [
+                        "font-size:",
+                        [Function],
+                        ";font-weight:",
+                        [Function],
+                        ";color:",
+                        [Function],
+                        ";line-height:",
+                        [Function],
+                        ";",
+                      ],
+                    },
+                    "displayName": "CapLabel__CapLabelInline",
+                    "foldedComponentIds": Array [],
+                    "render": [Function],
+                    "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                    "target": "span",
+                    "toString": [Function],
+                    "warnTooManyClasses": [Function],
+                    "withComponent": [Function],
+                  },
+                  "_foldedDefaultProps": Object {
+                    "type": "label1",
+                  },
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "style__InlineHeader-sc-1fz9gqm-0",
+                    "isStatic": false,
+                    "lastClassName": "dKysQN",
+                    "rules": Array [
+                      "font-size:",
+                      [Function],
+                      ";font-weight:",
+                      [Function],
+                      ";color:",
+                      [Function],
+                      ";line-height:",
+                      [Function],
+                      ";",
+                      "display:inline-block;font-weight:",
+                      "500",
+                      ";color:",
+                      "#7F8185",
+                      ";line-height:",
+                      "14px",
+                      ";",
+                    ],
+                  },
+                  "displayName": "style__InlineHeader",
+                  "foldedComponentIds": Array [
+                    "CapLabel-n7zsf5-0",
+                  ],
+                  "propTypes": Object {
+                    "children": [Function],
+                    "type": [Function],
+                  },
+                  "render": [Function],
+                  "styledComponentId": "style__InlineHeader-sc-1fz9gqm-0",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
+              }
+              forwardedRef={null}
               type="label1"
             >
-              Description2 
-            </div>
+              <div
+                className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 dKysQN key-text"
+                type="label1"
+              >
+                Description2 
+              </div>
+            </StyledComponent>
           </style__InlineHeader>
           <style__InlineHeader
             className="divider-text"
             type="label1"
           >
-            <div
-              className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 gdLfVw dOdjTH divider-text"
+            <StyledComponent
+              className="divider-text"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "CapLabelInline": Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "attrs": Array [],
+                    "componentStyle": ComponentStyle {
+                      "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                      "isStatic": false,
+                      "rules": Array [
+                        "font-size:",
+                        [Function],
+                        ";font-weight:",
+                        [Function],
+                        ";color:",
+                        [Function],
+                        ";line-height:",
+                        [Function],
+                        ";",
+                      ],
+                    },
+                    "displayName": "CapLabel__CapLabelInline",
+                    "foldedComponentIds": Array [],
+                    "render": [Function],
+                    "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                    "target": "span",
+                    "toString": [Function],
+                    "warnTooManyClasses": [Function],
+                    "withComponent": [Function],
+                  },
+                  "_foldedDefaultProps": Object {
+                    "type": "label1",
+                  },
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "style__InlineHeader-sc-1fz9gqm-0",
+                    "isStatic": false,
+                    "lastClassName": "dKysQN",
+                    "rules": Array [
+                      "font-size:",
+                      [Function],
+                      ";font-weight:",
+                      [Function],
+                      ";color:",
+                      [Function],
+                      ";line-height:",
+                      [Function],
+                      ";",
+                      "display:inline-block;font-weight:",
+                      "500",
+                      ";color:",
+                      "#7F8185",
+                      ";line-height:",
+                      "14px",
+                      ";",
+                    ],
+                  },
+                  "displayName": "style__InlineHeader",
+                  "foldedComponentIds": Array [
+                    "CapLabel-n7zsf5-0",
+                  ],
+                  "propTypes": Object {
+                    "children": [Function],
+                    "type": [Function],
+                  },
+                  "render": [Function],
+                  "styledComponentId": "style__InlineHeader-sc-1fz9gqm-0",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
+              }
+              forwardedRef={null}
               type="label1"
             >
-              :
-            </div>
+              <div
+                className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 dKysQN divider-text"
+                type="label1"
+              >
+                :
+              </div>
+            </StyledComponent>
           </style__InlineHeader>
           <style__HeaderWithPadding
             className="truncate-text"
             title="description2"
             type="label2"
           >
-            <div
-              className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 style__HeaderWithPadding-sc-1fz9gqm-1 jzfptu dOdjTH eOljGI truncate-text"
+            <StyledComponent
+              className="truncate-text"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "CapLabelInline": Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "attrs": Array [],
+                    "componentStyle": ComponentStyle {
+                      "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                      "isStatic": false,
+                      "rules": Array [
+                        "font-size:",
+                        [Function],
+                        ";font-weight:",
+                        [Function],
+                        ";color:",
+                        [Function],
+                        ";line-height:",
+                        [Function],
+                        ";",
+                      ],
+                    },
+                    "displayName": "CapLabel__CapLabelInline",
+                    "foldedComponentIds": Array [],
+                    "render": [Function],
+                    "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                    "target": "span",
+                    "toString": [Function],
+                    "warnTooManyClasses": [Function],
+                    "withComponent": [Function],
+                  },
+                  "_foldedDefaultProps": Object {
+                    "type": "label1",
+                  },
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "style__HeaderWithPadding-sc-1fz9gqm-1",
+                    "isStatic": false,
+                    "lastClassName": "jhQsLZ",
+                    "rules": Array [
+                      "font-size:",
+                      [Function],
+                      ";font-weight:",
+                      [Function],
+                      ";color:",
+                      [Function],
+                      ";line-height:",
+                      [Function],
+                      ";",
+                      "display:inline-block;font-weight:",
+                      "500",
+                      ";color:",
+                      "#7F8185",
+                      ";line-height:",
+                      "14px",
+                      ";",
+                      "padding-left:",
+                      "0.571rem",
+                      ";font-weight:",
+                      "400",
+                      ";",
+                    ],
+                  },
+                  "displayName": "style__HeaderWithPadding",
+                  "foldedComponentIds": Array [
+                    "CapLabel-n7zsf5-0",
+                    "style__InlineHeader-sc-1fz9gqm-0",
+                  ],
+                  "propTypes": Object {
+                    "children": [Function],
+                    "type": [Function],
+                  },
+                  "render": [Function],
+                  "styledComponentId": "style__HeaderWithPadding-sc-1fz9gqm-1",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
+              }
+              forwardedRef={null}
               title="description2"
               type="label2"
             >
-              description2
-            </div>
+              <div
+                className="CapLabel-n7zsf5-0 style__InlineHeader-sc-1fz9gqm-0 style__HeaderWithPadding-sc-1fz9gqm-1 jhQsLZ truncate-text"
+                title="description2"
+                type="label2"
+              >
+                description2
+              </div>
+            </StyledComponent>
           </style__HeaderWithPadding>
         </span>
       </div>
@@ -136,7 +657,6 @@ exports[`<PageHeaderDescription /> should render the PageHeaderDescription 1`] =
 exports[`<PageHeaderDescription /> should render the PageHeaderDescription Skeleton 1`] = `
 <PageHeaderDescription
   className=""
-  intl={true}
   isLoading={true}
   labelValues={
     Array [
@@ -163,81 +683,65 @@ exports[`<PageHeaderDescription /> should render the PageHeaderDescription Skele
       <div
         className="ant-row cap-row-v2"
       >
-        <CenteredSkeleton
-          borderRadius="5px"
-          height="90vh"
+        <CapSkeleton
+          active={true}
           key=".0"
-          width="90vw"
+          paragraph={
+            Object {
+              "rows": 2,
+              "width": 400,
+            }
+          }
+          title={false}
         >
-          <CenteredSkeleton__CenteredDiv>
+          <Skeleton
+            active={true}
+            avatar={false}
+            className="cap-skeleton-v2 undefined"
+            paragraph={
+              Object {
+                "rows": 2,
+                "width": 400,
+              }
+            }
+            title={false}
+          >
             <div
-              className="CenteredSkeleton__CenteredDiv-sc-1nygsa4-0 eISaok"
+              className="ant-skeleton cap-skeleton-v2 undefined ant-skeleton-active"
             >
-              <withStyles__StyledComponent
-                borderRadius="5px"
-                className=""
-                height="90vh"
-                isAvatar={false}
-                isParagraph={false}
-                isTitle={true}
-                width="90vw"
+              <div
+                className="ant-skeleton-content"
               >
-                <CustomSkeleton
-                  borderRadius="5px"
-                  className="withStyles__StyledComponent-lzchdo-0 fcwmDn"
-                  height="90vh"
-                  isAvatar={false}
-                  isParagraph={false}
-                  isTitle={true}
-                  width="90vw"
+                <Paragraph
+                  prefixCls="ant-skeleton-paragraph"
+                  rows={2}
+                  width={400}
                 >
-                  <CapSkeleton
-                    active={true}
-                    avatar={false}
-                    borderRadius="5px"
-                    className="custom-skeleton withStyles__StyledComponent-lzchdo-0 fcwmDn"
-                    height="90vh"
-                    paragraph={false}
-                    title={true}
-                    width="90vw"
+                  <ul
+                    className="ant-skeleton-paragraph"
                   >
-                    <Skeleton
-                      active={true}
-                      avatar={false}
-                      borderRadius="5px"
-                      className="cap-skeleton-v2 custom-skeleton withStyles__StyledComponent-lzchdo-0 fcwmDn"
-                      height="90vh"
-                      paragraph={false}
-                      title={true}
-                      width="90vw"
-                    >
-                      <div
-                        className="ant-skeleton cap-skeleton-v2 custom-skeleton withStyles__StyledComponent-lzchdo-0 fcwmDn ant-skeleton-active"
-                      >
-                        <div
-                          className="ant-skeleton-content"
-                        >
-                          <Title
-                            prefixCls="ant-skeleton-title"
-                          >
-                            <h3
-                              className="ant-skeleton-title"
-                              style={
-                                Object {
-                                  "width": undefined,
-                                }
-                              }
-                            />
-                          </Title>
-                        </div>
-                      </div>
-                    </Skeleton>
-                  </CapSkeleton>
-                </CustomSkeleton>
-              </withStyles__StyledComponent>
+                    <li
+                      key="0"
+                      style={
+                        Object {
+                          "width": undefined,
+                        }
+                      }
+                    />
+                    <li
+                      key="1"
+                      style={
+                        Object {
+                          "width": 400,
+                        }
+                      }
+                    />
+                  </ul>
+                </Paragraph>
+              </div>
             </div>
-          </CenteredSkeleton__CenteredDiv>
-        </CenteredSkeleton>
+          </Skeleton>
+        </CapSkeleton>
       </div>
     </Row>
   </CapRow>