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

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

@@ -1,430 +0,0 @@
-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

@@ -1,173 +0,0 @@
-// 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

@@ -1,79 +0,0 @@
-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',
-    },
-  ],
-}