@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/components/molecules/articleCard/index.tsx

@@ -0,0 +1,430 @@
+import React from 'react'
+
+import { theme } from 'misc/theme'
+import { CSSProperties } from 'styled-components'
+
+import { Heading } from '../../atoms/heading'
+import { Text } from '../../atoms/text'
+import {
+  StyledCard,
+  StyledAuthor,
+  StyledExpertName,
+  StyledAnchor,
+} from './index.styled'
+
+type CardAuthorProps = {
+  avatarImg: JSX.Element
+  authorName: React.ReactNode
+  authorLink?: string
+  editorName?: string
+  editorLink?: string
+  size: string
+  uploadTime: string
+  handleClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  isBookmarked: boolean
+  dataEventCategoryForBookmark?: string
+  dataEventActionForBookmark?: string
+  dataEventLabelForBookmark?: string
+}
+
+const CardAuthor = ({
+  avatarImg,
+  authorName,
+  authorLink,
+  uploadTime,
+  size,
+}: CardAuthorProps) => {
+  return (
+    <StyledAuthor>
+      <div className="author">
+        <div className="avatar" data-size={size}>
+          {avatarImg}
+        </div>
+        <div className="poster" data-is-disabled-url={!!!authorLink}>
+          <Text size={size === 'lg' ? 'p3' : 'p4'}>
+            <a href={authorLink}>
+              <span className="name">{authorName}</span>•{' '}
+            </a>
+            <span>{uploadTime}</span>
+          </Text>
+        </div>
+      </div>
+    </StyledAuthor>
+  )
+}
+
+type ArticleExpertProps = {
+  isMobile: boolean
+  avatarImg: JSX.Element
+  name: React.ReactNode
+  link?: string
+  size: 'lg' | 'md' | 'sm'
+  specialty: string
+  handleClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  isBookmarked: boolean
+  dataEventCategoryForBookmark?: string
+  dataEventActionForBookmark?: string
+  dataEventLabelForBookmark?: string
+}
+
+const CardExpert = ({
+  isMobile,
+  avatarImg,
+  name,
+  link,
+  size = 'lg',
+  specialty,
+  handleClick,
+  isBookmarked,
+  dataEventCategoryForBookmark,
+  dataEventActionForBookmark,
+  dataEventLabelForBookmark,
+}: ArticleExpertProps) => {
+  return (
+    <StyledAuthor>
+      <div className="author">
+        <div className="expert-avatar" data-size={size}>
+          {avatarImg}
+        </div>
+        <div className="expert" data-is-disabled-url={!!!link}>
+          {isMobile ? (
+            <a href={link}>
+              {size === 'lg' ? (
+                <>
+                  <Heading
+                    tag="h6"
+                    className="expert__name"
+                    color={theme.colors.gray600}
+                  >
+                    {name}
+                  </Heading>
+                  <Text
+                    color={theme.colors.gray500}
+                    size="p3"
+                    className="specialty"
+                  >
+                    {specialty}
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <Heading
+                    tag="h6"
+                    className="expert__name"
+                    color={theme.colors.gray600}
+                  >
+                    {name}
+                  </Heading>
+                </>
+              )}
+            </a>
+          ) : (
+            <a href={link}>
+              {size === 'lg' ? (
+                <>
+                  <Heading
+                    tag="h6"
+                    className="expert__name"
+                    color={theme.colors.gray600}
+                  >
+                    {name}
+                  </Heading>
+                  <Text
+                    color={theme.colors.gray500}
+                    size="p3"
+                    className="specialty"
+                  >
+                    {specialty}
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <StyledExpertName
+                    color={theme.colors.gray600}
+                    className="expert__name"
+                  >
+                    {name}
+                  </StyledExpertName>
+                  <Text
+                    color={theme.colors.gray500}
+                    size="p4"
+                    className="specialty"
+                  >
+                    {specialty}
+                  </Text>
+                </>
+              )}
+            </a>
+          )}
+        </div>
+      </div>
+    </StyledAuthor>
+  )
+}
+
+export type Props = {
+  banner: JSX.Element
+  title: string
+  text: string
+  avatarImg: JSX.Element
+  direction?: 'vertical' | 'horizontal'
+  size?: 'sm' | 'lg' | 'md'
+  type?: 'author' | 'expert'
+  section?: 'home' | 'normal'
+  authorName: React.ReactNode
+  authorLink?: string
+  specialty?: string
+  uploadTime: string
+  categoryName?: string
+  categoryLink?: string
+  articleLink?: string
+  isBookmarkDisplayed?: boolean
+  onBookmark?: () => void
+  isBookmark?: boolean
+  hasAffiliate?: boolean
+  hasButton?: boolean
+  textButton?: string
+  isMobile?: boolean
+  styleBanner?: CSSProperties
+  styleLabel?: CSSProperties
+  styleTitle?: CSSProperties
+  style?: CSSProperties
+  className?: string
+  dataEventCategoryForCategory?: string
+  dataEventActionForCategory?: string
+  dataEventLabelForCategory?: string
+  dataEventCategoryForTitle?: string
+  dataEventActionForTitle?: string
+  dataEventLabelForTitle?: string
+  dataEventCategoryForBanner?: string
+  dataEventActionForBanner?: string
+  dataEventLabelForBanner?: string
+  dataEventCategoryForBookmark?: string
+  dataEventActionForBookmark?: string
+  dataEventLabelForBookmark?: string
+  onClickCategoryName?: (e: React.MouseEvent) => void
+  articleLinkTarget?: React.HTMLAttributeAnchorTarget
+}
+
+const ArticleCard = ({
+  articleLink,
+  authorLink,
+  authorName,
+  avatarImg,
+  banner,
+  categoryLink,
+  categoryName,
+  className,
+  dataEventActionForBanner,
+  dataEventActionForBookmark,
+  dataEventActionForCategory,
+  dataEventActionForTitle,
+  dataEventCategoryForBanner,
+  dataEventCategoryForBookmark,
+  dataEventCategoryForCategory,
+  dataEventCategoryForTitle,
+  dataEventLabelForBanner,
+  dataEventLabelForBookmark,
+  dataEventLabelForCategory,
+  dataEventLabelForTitle,
+  direction = 'horizontal',
+  hasAffiliate,
+  isBookmark = false,
+  isBookmarkDisplayed = true,
+  isMobile = true,
+  onBookmark,
+  onClickCategoryName,
+  section = 'normal',
+  size = 'md',
+  specialty,
+  style,
+  styleBanner,
+  styleLabel,
+  styleTitle,
+  text,
+  title,
+  type = 'author',
+  uploadTime,
+  articleLinkTarget,
+}: Props) => {
+  const handleClick = (
+    e: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>,
+  ) => {
+    e.stopPropagation()
+    onBookmark && onBookmark()
+  }
+
+  const headingTag =
+    size === 'lg' && type === 'expert'
+      ? 'h4'
+      : size === 'lg' && section === 'home'
+      ? isMobile
+        ? 'h4'
+        : 'h3'
+      : size === 'lg'
+      ? 'h4'
+      : 'h5'
+  const descriptionTag = size === 'lg' ? 'p3' : 'p4'
+  const categoryLabelTag =
+    !isMobile && section === 'home' && size === 'lg' && type === 'author'
+      ? 'c1'
+      : 'c2'
+
+  return (
+    <StyledCard
+      className={className}
+      data-size={size}
+      style={style}
+      data-direction={direction}
+      data-is-expert={type === 'expert' || undefined}
+    >
+      <div className="banner" style={styleBanner}>
+        <StyledAnchor
+          data-event-category={dataEventCategoryForBanner}
+          data-event-action={dataEventActionForBanner}
+          data-event-label={dataEventLabelForBanner}
+          href={articleLink || '#'}
+          target={articleLinkTarget}
+        >
+          {banner}
+        </StyledAnchor>
+        {hasAffiliate && (
+          <div className="shoppable">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect width="24" height="24" rx="12" fill="#1B3250" />
+              <path
+                d="M16.6667 8.00033H15.3333C15.3333 6.16033 13.84 4.66699 12 4.66699C10.16 4.66699 8.66667 6.16033 8.66667 8.00033H7.33333C6.6 8.00033 6 8.60033 6 9.33366V17.3337C6 18.067 6.6 18.667 7.33333 18.667H16.6667C17.4 18.667 18 18.067 18 17.3337V9.33366C18 8.60033 17.4 8.00033 16.6667 8.00033ZM12 6.00033C13.1067 6.00033 14 6.89366 14 8.00033H10C10 6.89366 10.8933 6.00033 12 6.00033ZM12 12.667C10.4467 12.667 9.14 11.607 8.77333 10.167C8.66 9.74699 8.98667 9.33366 9.42 9.33366C9.73333 9.33366 9.98667 9.56033 10.0733 9.86699C10.3067 10.7137 11.08 11.3337 12 11.3337C12.92 11.3337 13.6933 10.7137 13.9267 9.86699C14.0133 9.56033 14.2667 9.33366 14.58 9.33366C15.0133 9.33366 15.3333 9.74699 15.2267 10.167C14.86 11.607 13.5533 12.667 12 12.667Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+      <div className="content">
+        <div className="inner-content">
+          <Text
+            style={styleLabel}
+            className="label"
+            size={categoryLabelTag}
+            type="caption"
+          >
+            <StyledAnchor
+              data-event-category={dataEventCategoryForCategory}
+              data-event-action={dataEventActionForCategory}
+              data-event-label={dataEventLabelForCategory}
+              href={categoryLink || '#'}
+              onClick={onClickCategoryName}
+            >
+              {categoryName}
+            </StyledAnchor>
+            {isBookmarkDisplayed && (
+              <a className="bookmark" onClick={handleClick}>
+                {!isBookmark ? (
+                  <svg
+                    data-event-category={dataEventCategoryForBookmark}
+                    data-event-action={dataEventActionForBookmark}
+                    data-event-label={dataEventLabelForBookmark}
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12.75 2.25H5.25C4.425 2.25 3.75 2.925 3.75 3.75V15.75L9 13.5L14.25 15.75V3.75C14.25 2.925 13.575 2.25 12.75 2.25Z"
+                      fill="#D2D6DC"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    data-event-category={dataEventCategoryForBookmark}
+                    data-event-action={dataEventActionForBookmark}
+                    data-event-label={dataEventLabelForBookmark}
+                    width="14"
+                    height="16"
+                    viewBox="0 0 14 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 15L7 11.1111L1 15V2.55556C1 2.143 1.18061 1.74733 1.5021 1.45561C1.82359 1.16389 2.25963 1 2.71429 1H11.2857C11.7404 1 12.1764 1.16389 12.4979 1.45561C12.8194 1.74733 13 2.143 13 2.55556V15Z"
+                      fill="#2ED69E"
+                      stroke="#2ED69E"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                )}
+              </a>
+            )}
+          </Text>
+
+          <Heading
+            tag={headingTag}
+            style={styleTitle}
+            className="title"
+            as={size === 'lg' ? 'h2' : 'h3'}
+          >
+            <StyledAnchor
+              data-event-category={dataEventCategoryForTitle}
+              data-event-action={dataEventActionForTitle}
+              data-event-label={dataEventLabelForTitle}
+              href={articleLink || '#'}
+              target={articleLinkTarget}
+            >
+              {title}
+            </StyledAnchor>
+          </Heading>
+
+          {text && (
+            <a href={articleLink || '#'} target={articleLinkTarget}>
+              <Text size={descriptionTag} className="text">
+                {text}
+              </Text>
+            </a>
+          )}
+        </div>
+
+        <div className="footer">
+          {type === 'author' ? (
+            <CardAuthor
+              size={size}
+              avatarImg={avatarImg}
+              authorName={authorName}
+              authorLink={authorLink}
+              uploadTime={uploadTime}
+              handleClick={handleClick}
+              isBookmarked={isBookmark}
+              dataEventCategoryForBookmark={dataEventCategoryForBookmark}
+              dataEventActionForBookmark={dataEventActionForBookmark}
+              dataEventLabelForBookmark={dataEventLabelForBookmark}
+            />
+          ) : (
+            <CardExpert
+              size={size}
+              isMobile={isMobile}
+              avatarImg={avatarImg}
+              specialty={specialty}
+              name={authorName}
+              link={authorLink}
+              handleClick={handleClick}
+              isBookmarked={isBookmark}
+              dataEventCategoryForBookmark={dataEventCategoryForBookmark}
+              dataEventActionForBookmark={dataEventActionForBookmark}
+              dataEventLabelForBookmark={dataEventLabelForBookmark}
+            />
+          )}
+        </div>
+      </div>
+    </StyledCard>
+  )
+}
+
+export { ArticleCard }

package/src/components/molecules/breadcrumbs/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 > .collapsed-breadcrumb {
+  border: none;
+}
+
+.c0 > .collapsed-breadcrumb > div {
+  padding: 0;
+}
+
+.c0 > .collapsed-breadcrumb > ul {
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
+.c0[data-size='lg'] {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+.c0[data-size='md'] {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.c0[data-size='sm'] {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+.c2 {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 6px;
+  background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.c2[data-size='lg'] {
+  width: 6px;
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.c2[data-size='md'] {
+  width: 5px;
+  margin-right: 7px;
+  margin-left: 7px;
+}
+
+.c2[data-size='sm'] {
+  width: 4px;
+  margin-right: 6px;
+  margin-left: 6px;
+}
+
+.c1 {
+  max-width: 12em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.c1 > a {
+  color: #262626;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1[data-last='true'] > a {
+  color: #737373;
+}
+
+.c1 > a:hover,
+.c1 > a:focus {
+  color: #2c74df;
+  outline: none;
+}
+
+.c1 > a:hover .arrowLeft,
+.c1 > a:focus .arrowLeft,
+.c1 > a:hover .arrowRight,
+.c1 > a:focus .arrowRight {
+  stroke: #2b62cd;
+}
+
+.c1 > a:active {
+  color: #2b62cd;
+}
+
+.c1[data-disabled] > a {
+  cursor: not-allowed;
+  color: #bfbfbf;
+}
+
+<div
+  class="c0"
+  data-size="md"
+>
+  <div
+    class="c1"
+    data-last="false"
+    title="Home"
+  >
+    <a
+      href="/"
+    >
+      Home
+    </a>
+  </div>
+  <div
+    class="c2"
+    data-size="md"
+  />
+  <div
+    class="c1"
+    data-last="false"
+    title="Category 1"
+  >
+    <a
+      href="/category-1"
+    >
+      Category 1
+    </a>
+  </div>
+  <div
+    class="c2"
+    data-size="md"
+  />
+  <div
+    class="c1"
+    data-last="false"
+    title="Sub Category 1 with a very long name that will not show completely"
+  >
+    <a
+      href="/category-1/sub-category-1"
+    >
+      Sub Category 1 with a very long name that will not show completely
+    </a>
+  </div>
+  <div
+    class="c2"
+    data-size="md"
+  />
+  <div
+    class="c1"
+    data-last="true"
+    title="Sub Category 2"
+  >
+    <a
+      href="/category-1/sub-category-1/sub-category-2"
+    >
+      Sub Category 2
+    </a>
+  </div>
+</div>
+`;

package/src/components/molecules/breadcrumbs/index.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Breadcrumbs, Props } from './index'
+
+export default {
+  component: Breadcrumbs,
+  title: 'Molecules/Breadcrumbs',
+}
+
+const Template: Story<Props> = (args) => <Breadcrumbs {...args} />
+
+export const Normal = Template.bind({})
+export const LongList = Template.bind({})
+
+Normal.args = {
+  size: 'md',
+  pages: [
+    {
+      label: 'Home',
+      value: '/',
+    },
+    {
+      label: 'Category 1',
+      value: '/category-1',
+    },
+    {
+      label:
+        'Sub Category 1 with a very long name that will not show completely',
+      value: '/category-1/sub-category-1',
+    },
+    {
+      label: 'Sub Category 2',
+      value: '/category-1/sub-category-1/sub-category-2',
+    },
+  ],
+}
+LongList.args = {
+  size: 'md',
+  pages: [
+    {
+      label: 'Home',
+      value: '/',
+    },
+    {
+      label: 'Category 1',
+      value: '/category-1',
+    },
+    {
+      label: 'Sub Category 1',
+      value: '/category-1/sub-category-1',
+    },
+    {
+      label: 'Category 1',
+      value: '/category-1',
+    },
+    {
+      label: 'Sub Category 1',
+      value: '/category-1/sub-category-1',
+    },
+    {
+      label: 'Category 1',
+      value: '/category-1',
+    },
+    {
+      label: 'Sub Category 1',
+      value: '/category-1/sub-category-1',
+    },
+    {
+      label: 'Category 1',
+      value: '/category-1',
+    },
+    {
+      label: 'Sub Category 1',
+      value: '/category-1/sub-category-1',
+    },
+  ],
+}